[Feature] Allow users to set read-only fields for the form.

js/libs/core.js

@@ -151,6 +151,10 @@ Fliplet.FormBuilder = (function() {
         required: {
           type: Boolean,
           default: false
+        },
+        readonly: {
+          type: Boolean,
+          default: false
         }
       }, component.props);
 

templates/components/checkbox.build.hbs

@@ -1,16 +1,30 @@
 <template>
-  <template v-for="(option, index) in options">
-    <div class="checkbox checkbox-icon">
+  <template v-if="readonly">
+    <template v-for="(option, index) in options">
+      <p class="form-control-static">\{{ option.label || option.id }}</p>
       <input
-        type="checkbox"
-        :id="name + '-' + index"
-        :name="name"
-        v-model="value"
-        :value="option.id || option.label">
-      <label v-on:click="clickHandler(option)">
-        <span class="check"><i class="fa fa-check"></i></span> \{{ option.label || option.id }}
-      </label>
-    </div>
+      type="hidden"
+      :id="name + '-' + index"
+      :name="name"
+      v-model="value"
+      :value="option.id || option.label">
+    </template>
+  </template>
+
+  <template v-else>
+    <template v-for="(option, index) in options">
+      <div class="checkbox checkbox-icon">
+        <input
+          type="checkbox"
+          :id="name + '-' + index"
+          :name="name"
+          v-model="value"
+          :value="option.id || option.label">
+        <label v-on:click="clickHandler(option)">
+          <span class="check"><i class="fa fa-check"></i></span> \{{ option.label || option.id }}
+        </label>
+      </div>
+    </template>
   </template>
 
   <p class="text-danger" v-if="$v.value.required === false && $v.value.$dirty">Field is required.</p>

templates/components/date.build.hbs

@@ -1,32 +1,63 @@
 <div v-if="isWeb" class="input-group custom-date">
-  <div class="input-group-addon">
-    <i class="fa fa-calendar"></i>
-  </div>
+  <template v-if="readonly">
+    <p class="form-control-static">\{{ value }}</p>
+    <input
+      type="hidden"
+      v-model.lazy="value"
+      v-on:change="updateValue()"
+      :name="name"
+      :id="name"
+      :placeholder="placeholder"
+      class="form-control"
+    />
+  </template>
 
-  <input
-    type="text"
-    v-model.lazy="value"
-    v-on:change="updateValue()"
-    v-on:input="onInput($event)"
-    :name="name"
-    :id="name"
-    :placeholder="placeholder"
-    class="date-picker form-control"
-  />
+  <template v-else>
+    <div class="input-group-addon">
+      <i class="fa fa-calendar"></i>
+    </div>
+
+    <input
+      type="text"
+      v-model.lazy="value"
+      v-on:change="updateValue()"
+      v-on:input="onInput($event)"
+      :name="name"
+      :id="name"
+      :placeholder="placeholder"
+      class="date-picker form-control"
+    />
+  </template>
 </div>
 <div v-else class="input-group native-date">
-  <div class="input-group-addon">
-    <i class="fa fa-calendar"></i>
-  </div>
 
-  <input
-    type="date"
-    v-model.lazy="value"
-    v-on:change="updateValue()"
-    :name="name"
-    :id="name"
-    :placeholder="placeholder"
-    class="form-control"
-  />
+  <template v-if="readonly">
+    <p class="form-control-static">\{{ value }}</p>
+    <input
+      type="hidden"
+      v-model.lazy="value"
+      v-on:change="updateValue()"
+      :name="name"
+      :id="name"
+      :placeholder="placeholder"
+      class="form-control"
+    />
+  </template>
+
+  <template v-else>
+    <div class="input-group-addon">
+      <i class="fa fa-calendar"></i>
+    </div>
+
+    <input 
+      type="date"
+      v-model.lazy="value"
+      v-on:change="updateValue()"
+      :name="name"
+      :id="name"
+      :placeholder="placeholder"
+      class="form-control"
+    />
+  </template>
 </div>
 <p class="text-danger" v-if="$v.value.required === false && $v.value.$dirty">Field is required.</p>

templates/components/email.build.hbs

@@ -1,4 +1,18 @@
-<input
+<template v-if="readonly">
+  <p class="form-control-static">\{{ value }}</p>
+  <input
+    type="hidden"
+    class="form-control"
+    v-model.trim.lazy="value"
+    v-on:blur="updateValue()"
+    v-on:input="onInput($event)"
+    :name="name"
+    :id="name"
+    :placeholder="placeholder"
+    autocomplete="new-password"
+  />
+</template>
+<input v-else
   type="email"
   class="form-control"
   v-model.trim.lazy="value"

templates/components/input.build.hbs

@@ -1,4 +1,17 @@
-<input
+<template v-if="readonly">
+  <p class="form-control-static">\{{ value }}</p>
+  <input 
+    type="hidden"
+    class="form-control"
+    v-model.trim.lazy="value"
+    v-on:blur="updateValue()"
+    v-on:input="onInput($event)"
+    :name="name"
+    :id="name"
+    :placeholder="placeholder"
+  />
+</template>
+<input v-else
   type="text"
   class="form-control"
   v-model.trim.lazy="value"

templates/components/number.build.hbs

@@ -1,4 +1,18 @@
-<input
+<template v-if="readonly">
+  <p class="form-control-static">\{{ value }}</p>
+  <input
+  type="hidden"
+  class="form-control"
+  v-model.trim.lazy="value"
+  v-on:blur="updateValue()"
+  v-on:input="onInput($event)"
+  :name="name"
+  :id="name"
+  :placeholder="placeholder"
+  />
+</template>
+
+<input v-else
   type="text"
   class="form-control"
   v-model.trim.lazy="value"

templates/components/radio.build.hbs

@@ -1,16 +1,30 @@
 <template>
-  <template v-for="(option, index) in options">
-    <div class="radio radio-icon">
+  <template v-if="readonly">
+    <template v-for="(option, index) in options">
+      <p class="form-control-static">\{{ option.label || option.id }}</p>
       <input
-        type="radio"
+        type="hidden"
         :id="name + '-' + index"
         :name="name"
         v-model="value"
-        :value="option.id || option.label">
-      <label v-on:click="clickHandler(option)">
-        <span class="check"><i class="fa fa-circle"></i></span> \{{ option.label || option.id }}
-      </label>
-    </div>
+        :value="option.id || option.label"
+      />
+    </template>
+  </template>
+  <template v-else>
+    <template v-for="(option, index) in options">
+      <div class="radio radio-icon">
+        <input
+          type="radio"
+          :id="name + '-' + index"
+          :name="name"
+          v-model="value"
+          :value="option.id || option.label">
+        <label v-on:click="clickHandler(option)">
+          <span class="check"><i class="fa fa-circle"></i></span> \{{ option.label || option.id }}
+        </label>
+      </div>
+    </template>
   </template>
   <p class="text-danger" v-if="$v.value.required === false && $v.value.$dirty">Field is required.</p>
 </template>

templates/components/select.build.hbs

@@ -1,11 +1,27 @@
+<template v-if="readonly">
+  <p class="form-control-static">\{{ value }}</p>
+  <select
+    class="form-control hidden-select hidden"
+    :name="name"
+    :id="name"
+    v-model="value"
+    v-on:change="updateValue()"
+    v-on:input="onInput($event)">
+    <option v-if="placeholder" value="">\{{ placeholder }}</option>
+    <option v-for="option in options" :value="(_.isNumber(option.id) || _.isString(option.id)) ? option.id : option.label" :disabled="option.disabled">
+      \{{ option.label || option.id }}
+    </option>
+  </select>
+</template>
+<template v-else>
 <label :for="name" class="select-proxy-display">
   <select
-          class="form-control hidden-select"
-          :name="name"
-          :id="name"
-          v-model="value"
-          v-on:change="updateValue()"
-          v-on:input="onInput($event)">
+    class="form-control hidden-select"
+    :name="name"
+    :id="name"
+    v-model="value"
+    v-on:change="updateValue()"
+    v-on:input="onInput($event)">
     <option v-if="placeholder" value="">\{{ placeholder }}</option>
     <option v-for="option in options" :value="(_.isNumber(option.id) || _.isString(option.id)) ? option.id : option.label" :disabled="option.disabled">
       \{{ option.label || option.id }}
@@ -15,3 +31,4 @@
   <span class="select-value-proxy"><template v-if="value && value !== ''">\{{ _selectedLabel }}</template><template v-else>\{{ placeholder }}</template></span>
 </label>
 <p class="text-danger" v-if="$v.value.required === false && $v.value.$dirty">Field is required.</p>
+</template>

templates/components/starRating.build.hbs

@@ -1,4 +1,20 @@
-<div class="inverse-direction">
+<div v-if="readonly" class="inverse-direction">
+  <template v-for="(option, index) in values">
+    <input
+      class="rating-input"
+      :name="name"
+      type="radio"
+      :id="name + '-' + index"
+      v-model="value"
+      :value="option.id"
+    />
+    <label class="rating-star">
+      <i class="fa fa-star-o"></i>
+      <i class="fa fa-star"></i>
+    </label>
+  </template>
+</div>
+<div v-else class="inverse-direction">
   <template v-for="(option, index) in values">
     <input
             class="rating-input"

templates/components/telephone.build.hbs

@@ -1,4 +1,18 @@
-<input
+<div v-if="readonly">
+  <p class="form-control-static">\{{ value }}</p>
+  <input
+    type="hidden"
+    class="form-control"
+    v-model.trim.lazy="value"
+    v-on:blur="updateValue()"
+    v-on:input="onInput($event)"
+    :name="name"
+    :id="name"
+    :placeholder="placeholder"
+  />
+</div>
+
+<input v-else
   type="tel"
   class="form-control"
   v-model.trim.lazy="value"

templates/components/textarea.build.hbs

@@ -1,4 +1,18 @@
-<textarea
+<div v-if="readonly">
+  <p class="form-control-static">\{{ value }}</p>
+  <input
+    type="hidden"
+    class="form-control"
+    v-model.trim.lazy="value"
+    v-on:blur="updateValue()"
+    v-on:input="onInput($event)"
+    :name="name"
+    :id="name"
+    :placeholder="placeholder"
+  />
+</div>
+
+<textarea v-else
   class="form-control"
   v-model.trim.lazy="value"
   v-on:blur="updateValue()"

templates/components/time.build.hbs

@@ -1,17 +1,33 @@
 <div class="input-group custom-time">
-  <div class="input-group-addon">
-    <i class="fa fa-clock-o"></i>
-  </div>
+  <template v-if="readonly">
+    <p class="form-control-static">\{{ value }}</p>
+    <input
+      type="hidden"
+      v-model.lazy="value"
+      v-on:change="updateValue()"
+      v-on:input="onInput($event)"
+      :name="name"
+      :id="name"
+      :placeholder="placeholder"
+      class="form-control"
+    />
+  </template>
 
-  <input
-    type="time"
-    v-model.lazy="value"
-    v-on:change="updateValue()"
-    v-on:input="onInput($event)"
-    :name="name"
-    :id="name"
-    :placeholder="placeholder"
-    class="form-control"
-  />
+  <template v-else>
+    <div class="input-group-addon">
+      <i class="fa fa-clock-o"></i>
+    </div>
+
+    <input
+      type="time"
+      v-model.lazy="value"
+      v-on:change="updateValue()"
+      v-on:input="onInput($event)"
+      :name="name"
+      :id="name"
+      :placeholder="placeholder"
+      class="form-control"
+    />
+  </template>
 </div>
 <p class="text-danger" v-if="$v.value.required === false && $v.value.$dirty">Field is required.</p>