From f7307c38aaf82d8642f0e6c9c0fd4021b9c64946 Mon Sep 17 00:00:00 2001
From: Yaroslav Ovdii <yaroslav.o@upplabs.com>
Date: Fri, 24 Jul 2020 12:04:54 +0300
Subject: [PATCH 1/2] added readonly feature

---
 js/build.templates.js                         | 26 +++---
 js/interface.templates.js                     | 22 ++---
 js/libs/core.js                               |  4 +
 templates/components/checkbox.build.hbs       | 38 ++++++---
 templates/components/date.build.hbs           | 81 +++++++++++++------
 templates/components/email.build.hbs          | 16 +++-
 templates/components/input.build.hbs          | 15 +++-
 templates/components/number.build.hbs         | 17 +++-
 templates/components/radio.build.hbs          | 30 +++++--
 templates/components/select.build.hbs         | 17 ++++
 templates/components/starRating.build.hbs     | 18 ++++-
 templates/components/telephone.build.hbs      | 16 +++-
 templates/components/textarea.build.hbs       | 16 +++-
 templates/components/time.build.hbs           | 42 +++++++---
 templates/components/url.build.hbs            | 16 +++-
 .../configurations/checkbox.interface.hbs     |  8 ++
 templates/configurations/date.interface.hbs   |  9 ++-
 templates/configurations/email.interface.hbs  |  9 ++-
 templates/configurations/input.interface.hbs  |  8 ++
 templates/configurations/number.interface.hbs |  8 ++
 templates/configurations/radio.build.hbs      |  8 ++
 templates/configurations/select.interface.hbs |  8 ++
 .../configurations/starRating.interface.hbs   |  8 ++
 .../configurations/telephone.interface.hbs    |  8 ++
 .../configurations/textarea.interface.hbs     |  8 ++
 templates/configurations/time.interface.hbs   |  8 ++
 templates/configurations/url.interface.hbs    |  8 ++
 27 files changed, 381 insertions(+), 91 deletions(-)

diff --git a/js/build.templates.js b/js/build.templates.js
index ae6d60c0..1c33c0a1 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -7,15 +7,15 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.buttons"] = Handleb
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.checkbox"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<template>\n  <div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n  <template v-for=\"(option, index) in options\">\n    <div class=\"checkbox checkbox-icon\">\n      <input\n        type=\"checkbox\"\n        :id=\"name + '-' + index\"\n        :name=\"name\"\n        v-model=\"value\"\n        :value=\"option.id || option.label\">\n      <label v-on:click=\"clickHandler(option)\">\n        <span class=\"check\"><i class=\"fa fa-check\"></i></span>\n        <span class=\"option-item\">{{ option.label || option.id }}</span>\n      </label>\n    </div>\n  </template>\n\n  <p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n</template>\n";
+    return "<template>\n  <div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n\n  <template v-if=\"readonly\">\n    <template v-for=\"(option, index) in options\">\n      <p class=\"form-control-static\">{{ option.label || option.id }}</p>\n      <input\n      type=\"hidden\"\n      :id=\"name + '-' + index\"\n      :name=\"name\"\n      v-model=\"value\"\n      :value=\"option.id || option.label\">\n    </template>\n  </template>\n\n  <template v-else>\n    <template v-for=\"(option, index) in options\">\n      <div class=\"checkbox checkbox-icon\">\n        <input\n          type=\"checkbox\"\n          :id=\"name + '-' + index\"\n          :name=\"name\"\n          v-model=\"value\"\n          :value=\"option.id || option.label\">\n        <label v-on:click=\"clickHandler(option)\">\n          <span class=\"check\"><i class=\"fa fa-check\"></i></span> {{ option.label || option.id }}\n        </label>\n      </div>\n    </template>\n  </template>\n\n  <p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n</template>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.date"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<div v-if=\"isWeb\" class=\"input-group custom-date\">\n  <div class=\"input-group-addon\">\n    <i class=\"fa fa-calendar\"></i>\n  </div>\n\n  <input\n    type=\"text\"\n    v-model.lazy=\"value\"\n    v-on:change=\"updateValue()\"\n    v-on:input=\"onInput($event)\"\n    :name=\"name\"\n    :id=\"name\"\n    :placeholder=\"placeholder\"\n    class=\"date-picker form-control\"\n  />\n</div>\n<div v-else class=\"input-group native-date\">\n  <div class=\"input-group-addon\">\n    <i class=\"fa fa-calendar\"></i>\n  </div>\n\n  <input\n    type=\"date\"\n    v-model.lazy=\"value\"\n    v-on:change=\"updateValue()\"\n    :name=\"name\"\n    :id=\"name\"\n    :placeholder=\"placeholder\"\n    class=\"form-control\"\n  />\n</div>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<div v-if=\"isWeb\" class=\"input-group custom-date\">\n  <template v-if=\"readonly\">\n    <p class=\"form-control-static\">{{ value }}</p>\n    <input\n      type=\"hidden\"\n      v-model.lazy=\"value\"\n      v-on:change=\"updateValue()\"\n      :name=\"name\"\n      :id=\"name\"\n      :placeholder=\"placeholder\"\n      class=\"form-control\"\n    />\n  </template>\n\n  <template v-else>\n    <div class=\"input-group-addon\">\n      <i class=\"fa fa-calendar\"></i>\n    </div>\n\n    <input\n      type=\"text\"\n      v-model.lazy=\"value\"\n      v-on:change=\"updateValue()\"\n      v-on:input=\"onInput($event)\"\n      :name=\"name\"\n      :id=\"name\"\n      :placeholder=\"placeholder\"\n      class=\"date-picker form-control\"\n    />\n  </template>\n</div>\n<div v-else class=\"input-group native-date\">\n\n  <template v-if=\"readonly\">\n    <p class=\"form-control-static\">{{ value }}</p>\n    <input\n      type=\"hidden\"\n      v-model.lazy=\"value\"\n      v-on:change=\"updateValue()\"\n      :name=\"name\"\n      :id=\"name\"\n      :placeholder=\"placeholder\"\n      class=\"form-control\"\n    />\n  </template>\n\n  <template v-else>\n    <div class=\"input-group-addon\">\n      <i class=\"fa fa-calendar\"></i>\n    </div>\n\n    <input \n      type=\"date\"\n      v-model.lazy=\"value\"\n      v-on:change=\"updateValue()\"\n      :name=\"name\"\n      :id=\"name\"\n      :placeholder=\"placeholder\"\n      class=\"form-control\"\n    />\n  </template>\n</div>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.email"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<input\n  type=\"email\"\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n  autocomplete=\"new-password\"\n/>\n<p class=\"text-danger\" v-if=\"$v.value.email === false && $v.value.$dirty\">The input is not a valid email address.</p>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<template v-if=\"readonly\">\n  <p class=\"form-control-static\">{{ value }}</p>\n  <input\n    type=\"hidden\"\n    class=\"form-control\"\n    v-model.trim.lazy=\"value\"\n    v-on:blur=\"updateValue()\"\n    v-on:input=\"onInput($event)\"\n    :name=\"name\"\n    :id=\"name\"\n    :placeholder=\"placeholder\"\n    autocomplete=\"new-password\"\n  />\n</template>\n<input v-else\n  type=\"email\"\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n  autocomplete=\"new-password\"\n/>\n<p class=\"text-danger\" v-if=\"$v.value.email === false && $v.value.$dirty\">The input is not a valid email address.</p>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.field"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -39,7 +39,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.image"] = Handlebar
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.input"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<input\n  type=\"text\"\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n/>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<template v-if=\"readonly\">\n  <p class=\"form-control-static\">{{ value }}</p>\n  <input \n    type=\"hidden\"\n    class=\"form-control\"\n    v-model.trim.lazy=\"value\"\n    v-on:blur=\"updateValue()\"\n    v-on:input=\"onInput($event)\"\n    :name=\"name\"\n    :id=\"name\"\n    :placeholder=\"placeholder\"\n  />\n</template>\n<input v-else\n  type=\"text\"\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n/>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.interface"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -51,7 +51,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.interface"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.number"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<input\n  type=\"text\"\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n/>\n<p class=\"text-danger\" v-if=\"$v.value.maxLength === false && $v.value.$dirty\">This field only accept up to 15 digits.</p>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n<p class=\"text-danger\" v-if=\"$v.value.positive === false && $v.value.$dirty\">Only positive digits are allowed.</p>\n<p class=\"text-danger\" v-if=\"$v.value.integer === false && $v.value.$dirty\">Only integer digits are allowed.</p>\n<p class=\"text-danger\" v-if=\"$v.value.decimal === false && $v.value.$dirty\">Only digits or {{decimals}} digits after point are allowed.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n\n<template v-if=\"readonly\">\n  <p class=\"form-control-static\">{{ value }}</p>\n  <input\n  type=\"hidden\"\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n  />\n</template>\n\n<input v-else\n  type=\"text\"\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n/>\n<p class=\"text-danger\" v-if=\"$v.value.maxLength === false && $v.value.$dirty\">This field only accept up to 15 digits.</p>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n<p class=\"text-danger\" v-if=\"$v.value.positive === false && $v.value.$dirty\">Only positive digits are allowed.</p>\n<p class=\"text-danger\" v-if=\"$v.value.integer === false && $v.value.$dirty\">Only integer digits are allowed.</p>\n<p class=\"text-danger\" v-if=\"$v.value.decimal === false && $v.value.$dirty\">Only digits or {{decimals}} digits after point are allowed.</p>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.paragraph"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -63,11 +63,11 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.password"] = Handle
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.radio"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<template>\n   <div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n  <template v-for=\"(option, index) in options\">\n    <div class=\"radio radio-icon\">\n      <input\n        type=\"radio\"\n        :id=\"name + '-' + index\"\n        :name=\"name\"\n        v-model=\"value\"\n        :value=\"option.id || option.label\">\n      <label v-on:click=\"clickHandler(option)\">\n        <span class=\"check\"><i class=\"fa fa-circle\"></i></span> {{ option.label || option.id }}\n      </label>\n    </div>\n  </template>\n  <p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n</template>\n";
+    return "<template>\n  <div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n  <template v-if=\"readonly\">\n    <template v-for=\"(option, index) in options\">\n      <p class=\"form-control-static\">{{ option.label || option.id }}</p>\n      <input\n        type=\"hidden\"\n        :id=\"name + '-' + index\"\n        :name=\"name\"\n        v-model=\"value\"\n        :value=\"option.id || option.label\"\n      />\n    </template>\n  </template>\n  <template v-else>\n    <template v-for=\"(option, index) in options\">\n      <div class=\"radio radio-icon\">\n        <input\n          type=\"radio\"\n          :id=\"name + '-' + index\"\n          :name=\"name\"\n          v-model=\"value\"\n          :value=\"option.id || option.label\">\n        <label v-on:click=\"clickHandler(option)\">\n          <span class=\"check\"><i class=\"fa fa-circle\"></i></span> {{ option.label || option.id }}\n        </label>\n      </div>\n    </template>\n  </template>\n  <p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n</template>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.select"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<label :for=\"name\" class=\"select-proxy-display\">\n  <select\n    class=\"form-control hidden-select\"\n    :name=\"name\"\n    :id=\"name\"\n    v-model=\"value\"\n    v-on:change=\"updateValue()\"\n    v-on:input=\"onInput($event)\">\n    <option v-if=\"placeholder\" value=\"\">{{ placeholder }}</option>\n    <option v-for=\"option in options\" :value=\"(_.isNumber(option.id) || _.isString(option.id)) ? option.id : option.label\" :disabled=\"option.disabled\">\n      {{ option.label || option.id }}\n    </option>\n  </select>\n  <span class=\"icon fa fa-chevron-down\"></span>\n  <span class=\"select-value-proxy\"><template v-if=\"value && value !== ''\">{{ _selectedLabel }}</template><template v-else>{{ placeholder }}</template></span>\n</label>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<template v-if=\"readonly\">\n  <p class=\"form-control-static\">{{ value }}</p>\n  <select\n    class=\"form-control hidden-select hidden\"\n    :name=\"name\"\n    :id=\"name\"\n    v-model=\"value\"\n    v-on:change=\"updateValue()\"\n    v-on:input=\"onInput($event)\">\n    <option v-if=\"placeholder\" value=\"\">{{ placeholder }}</option>\n    <option v-for=\"option in options\" :value=\"(_.isNumber(option.id) || _.isString(option.id)) ? option.id : option.label\" :disabled=\"option.disabled\">\n      {{ option.label || option.id }}\n    </option>\n  </select>\n</template>\n<template v-else>\n<label :for=\"name\" class=\"select-proxy-display\">\n  <select\n    class=\"form-control hidden-select\"\n    :name=\"name\"\n    :id=\"name\"\n    v-model=\"value\"\n    v-on:change=\"updateValue()\"\n    v-on:input=\"onInput($event)\">\n    <option v-if=\"placeholder\" value=\"\">{{ placeholder }}</option>\n    <option v-for=\"option in options\" :value=\"(_.isNumber(option.id) || _.isString(option.id)) ? option.id : option.label\" :disabled=\"option.disabled\">\n      {{ option.label || option.id }}\n    </option>\n  </select>\n  <span class=\"icon fa fa-chevron-down\"></span>\n  <span class=\"select-value-proxy\"><template v-if=\"value && value !== ''\">{{ _selectedLabel }}</template><template v-else>{{ placeholder }}</template></span>\n</label>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n</template>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.signature"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -75,19 +75,19 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.signature"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.starRating"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<div class=\"inverse-direction\">\n  <template v-for=\"(option, index) in values\">\n    <input\n      class=\"rating-input\"\n      :name=\"name\"\n      type=\"radio\"\n      :id=\"name + '-' + index\"\n      v-model=\"value\"\n      :value=\"option.id\"\n      v-on:change=\"updateValue()\"\n      v-on:input=\"onInput($event)\"\n    >\n    <label class=\"rating-star\" :for=\"name + '-' + index\">\n      <i class=\"fa fa-star-o\"></i>\n      <i class=\"fa fa-star\"></i>\n    </label>\n  </template>\n</div>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<div v-if=\"readonly\" class=\"inverse-direction\">\n  <template v-for=\"(option, index) in values\">\n    <input\n      class=\"rating-input\"\n      :name=\"name\"\n      type=\"radio\"\n      :id=\"name + '-' + index\"\n      v-model=\"value\"\n      :value=\"option.id\"\n    />\n    <label class=\"rating-star\">\n      <i class=\"fa fa-star-o\"></i>\n      <i class=\"fa fa-star\"></i>\n    </label>\n  </template>\n</div>\n<div v-else class=\"inverse-direction\">\n  <template v-for=\"(option, index) in values\">\n    <input\n      class=\"rating-input\"\n      :name=\"name\"\n      type=\"radio\"\n      :id=\"name + '-' + index\"\n      v-model=\"value\"\n      :value=\"option.id\"\n      v-on:change=\"updateValue()\"\n      v-on:input=\"onInput($event)\"\n    >\n    <label class=\"rating-star\" :for=\"name + '-' + index\">\n      <i class=\"fa fa-star-o\"></i>\n      <i class=\"fa fa-star\"></i>\n    </label>\n  </template>\n</div>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.telephone"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<input\n  type=\"tel\"\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n/>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n<p class=\"text-danger\" v-if=\"$v.value.phone === false && $v.value.$dirty\">Phone could contain <b>; , . ( ) - + SPACE * #</b> and numbers.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<div v-if=\"readonly\">\n  <p class=\"form-control-static\">{{ value }}</p>\n  <input\n    type=\"hidden\"\n    class=\"form-control\"\n    v-model.trim.lazy=\"value\"\n    v-on:blur=\"updateValue()\"\n    v-on:input=\"onInput($event)\"\n    :name=\"name\"\n    :id=\"name\"\n    :placeholder=\"placeholder\"\n  />\n</div>\n\n<input v-else\n  type=\"tel\"\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n/>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n<p class=\"text-danger\" v-if=\"$v.value.phone === false && $v.value.$dirty\">Phone could contain <b>; , . ( ) - + SPACE * #</b> and numbers.</p>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.textarea"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<textarea\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n  :rows=\"rows\"\n></textarea>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<template v-if=\"readonly\">\n  <p class=\"form-control-static\">{{ value }}</p>\n  <input\n    type=\"hidden\"\n    class=\"form-control\"\n    v-model.trim.lazy=\"value\"\n    v-on:blur=\"updateValue()\"\n    v-on:input=\"onInput($event)\"\n    :name=\"name\"\n    :id=\"name\"\n    :placeholder=\"placeholder\"\n  />\n</template>\n\n<textarea v-else\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n  :rows=\"rows\"\n></textarea>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.time"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<div class=\"input-group custom-time\">\n  <div class=\"input-group-addon\">\n    <i class=\"fa fa-clock-o\"></i>\n  </div>\n\n  <input\n    type=\"time\"\n    v-model.lazy=\"value\"\n    v-on:change=\"updateValue()\"\n    v-on:input=\"onInput($event)\"\n    :name=\"name\"\n    :id=\"name\"\n    :placeholder=\"placeholder\"\n    class=\"form-control\"\n  />\n</div>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<div class=\"input-group custom-time\">\n  <template v-if=\"readonly\">\n    <p class=\"form-control-static\">{{ value }}</p>\n    <input\n      type=\"hidden\"\n      v-model.lazy=\"value\"\n      v-on:change=\"updateValue()\"\n      v-on:input=\"onInput($event)\"\n      :name=\"name\"\n      :id=\"name\"\n      :placeholder=\"placeholder\"\n      class=\"form-control\"\n    />\n  </template>\n\n  <template v-else>\n    <div class=\"input-group-addon\">\n      <i class=\"fa fa-clock-o\"></i>\n    </div>\n\n    <input\n      type=\"time\"\n      v-model.lazy=\"value\"\n      v-on:change=\"updateValue()\"\n      v-on:input=\"onInput($event)\"\n      :name=\"name\"\n      :id=\"name\"\n      :placeholder=\"placeholder\"\n      class=\"form-control\"\n    />\n  </template>\n</div>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.title"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -95,7 +95,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.title"] = Handlebar
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.url"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<input\n  type=\"text\"\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n/>\n<p class=\"text-danger\" v-if=\"$v.value.url === false && $v.value.$dirty\">The input is not a valid URL.</p>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<template v-if=\"readonly\">\n  <p class=\"form-control-static\">{{ value }}</p>\n  <input\n    type=\"hidden\"\n    class=\"form-control\"\n    v-model.trim.lazy=\"value\"\n    v-on:blur=\"updateValue()\"\n    v-on:input=\"onInput($event)\"\n    :name=\"name\"\n    :id=\"name\"\n    :placeholder=\"placeholder\"\n  />\n</template>\n\n<input v-else\n  type=\"text\"\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n/>\n<p class=\"text-danger\" v-if=\"$v.value.url === false && $v.value.$dirty\">The input is not a valid URL.</p>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.wysiwyg"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -103,5 +103,5 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.wysiwyg"] = Handleb
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.radio"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value <small>(Enter one of the options you entered above)</small></label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value <small>(Enter one of the options you entered above)</small></label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
\ No newline at end of file
diff --git a/js/interface.templates.js b/js/interface.templates.js
index a278abef..a68b2a19 100644
--- a/js/interface.templates.js
+++ b/js/interface.templates.js
@@ -7,15 +7,15 @@ this["Fliplet"]["Widget"]["Templates"]["templates.configurations.buttons"] = Han
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.checkbox"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default values <small>(One per line)</small></label>\n  <textarea class=\"form-control\" v-model.trim=\"defaultValue\" placeholder=\"Default values\" />\n</div>\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default values <small>(One per line)</small></label>\n  <textarea class=\"form-control\" v-model.trim=\"defaultValue\" placeholder=\"Default values\" />\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.date"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <div class=\"input-group custom-date\">\n    <div class=\"input-group-addon\">\n      <i class=\"fa fa-calendar\"></i>\n    </div>\n    <input class=\"form-control date-picker\" type=\"text\" v-model=\"value\" placeholder=\"Default value\" />\n  </div>\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <div class=\"input-group custom-date\">\n    <div class=\"input-group-addon\">\n      <i class=\"fa fa-calendar\"></i>\n    </div>\n    <input class=\"form-control date-picker\" type=\"text\" v-model=\"value\" placeholder=\"Default value\" />\n  </div>\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.email"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.file"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -48,11 +48,11 @@ this["Fliplet"]["Widget"]["Templates"]["templates.configurations.image"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.input"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.number"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n<div class=\"form-group\">\n  <label class=\"control-label\">What numbers should be allowed?</label>\n  <div class=\"radio radio-icon\">\n    <input type=\"radio\" id=\"numbers-all\" name=\"numbers-option\" v-bind:value=\"false\" v-model=\"positiveOnly\">\n    <label for=\"numbers-all\">\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> Allow all numbers\n    </label>\n  </div>\n  <div class=\"radio radio-icon\">\n    <input type=\"radio\" id=\"numbers-natural\" name=\"numbers-option\" v-bind:value=\"true\" v-model=\"positiveOnly\">\n    <label for=\"numbers-natural\">\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> Positive numbers only\n    </label>\n  </div>\n</div>\n<div class=\"form-group\">\n  <label>Decimal places allowed</label>\n  <input class=\"form-control\" type=\"number\" min=\"0\" max=\"10\" step=\"1\" v-model.number=\"decimals\" placeholder=\"0\" />\n</div>\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n<div class=\"form-group\">\n  <label class=\"control-label\">What numbers should be allowed?</label>\n  <div class=\"radio radio-icon\">\n    <input type=\"radio\" id=\"numbers-all\" name=\"numbers-option\" v-bind:value=\"false\" v-model=\"positiveOnly\">\n    <label for=\"numbers-all\">\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> Allow all numbers\n    </label>\n  </div>\n  <div class=\"radio radio-icon\">\n    <input type=\"radio\" id=\"numbers-natural\" name=\"numbers-option\" v-bind:value=\"true\" v-model=\"positiveOnly\">\n    <label for=\"numbers-natural\">\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> Positive numbers only\n    </label>\n  </div>\n</div>\n<div class=\"form-group\">\n  <label>Decimal places allowed</label>\n  <input class=\"form-control\" type=\"number\" min=\"0\" max=\"10\" step=\"1\" v-model.number=\"decimals\" placeholder=\"0\" />\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.paragraph"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -64,7 +64,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.configurations.password"] = Ha
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.select"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value <small>(Enter one of the options you entered above)</small></label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Option placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Option placeholder\" />\n</div>\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value <small>(Enter one of the options you entered above)</small></label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Option placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Option placeholder\" />\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.signature"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -72,19 +72,19 @@ this["Fliplet"]["Widget"]["Templates"]["templates.configurations.signature"] = H
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.starRating"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label for=\"default-value\">Default value</label>\n  <select v-model.trim=\"value\" id=\"default-value\" class=\"form-control\">\n    <option value=\"\">Select one</option>\n    <option value=\"1\">1</option>\n    <option value=\"2\">2</option>\n    <option value=\"3\">3</option>\n    <option value=\"4\">4</option>\n    <option value=\"5\">5</option>\n  </select>\n</div>\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label for=\"default-value\">Default value</label>\n  <select v-model.trim=\"value\" id=\"default-value\" class=\"form-control\">\n    <option value=\"\">Select one</option>\n    <option value=\"1\">1</option>\n    <option value=\"2\">2</option>\n    <option value=\"3\">3</option>\n    <option value=\"4\">4</option>\n    <option value=\"5\">5</option>\n  </select>\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.telephone"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.textarea"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <textarea class=\"form-control\" v-model.trim=\"value\" placeholder=\"Default value\"></textarea>\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder\" />\n</div>\n<div class=\"form-group\">\n  <label>Rows <small>(Specifies the height of the text area in lines)</small></label>\n  <label for=\"textarea-rows\" class=\"select-proxy-display\">\n    <span class=\"icon fa fa-chevron-down\"></span>\n    <span class=\"select-value-proxy\">2</span>\n    <select class=\"form-control hidden-select\" id=\"textarea-rows\" v-model=\"rows\">\n      <option :value=\"number\" v-for=\"number in [1,2,3,4,5,6,7,8,9]\">{{ number }}</option>\n    </select>\n  </label>\n</div>\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <textarea class=\"form-control\" v-model.trim=\"value\" placeholder=\"Default value\"></textarea>\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder\" />\n</div>\n<div class=\"form-group\">\n  <label>Rows <small>(Specifies the height of the text area in lines)</small></label>\n  <label for=\"textarea-rows\" class=\"select-proxy-display\">\n    <span class=\"icon fa fa-chevron-down\"></span>\n    <span class=\"select-value-proxy\">2</span>\n    <select class=\"form-control hidden-select\" id=\"textarea-rows\" v-model=\"rows\">\n      <option :value=\"number\" v-for=\"number in [1,2,3,4,5,6,7,8,9]\">{{ number }}</option>\n    </select>\n  </label>\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.time"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value (current time when empty)</label>\n  <input class=\"form-control\" type=\"time\" v-model=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value (current time when empty)</label>\n  <input class=\"form-control\" type=\"time\" v-model=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.title"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -92,7 +92,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.configurations.title"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.url"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n";
+    return "<div class=\"form-group\">\n  <label>Description</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\n</div>\n<div class=\"form-group\">\n  <label>Default value</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"value\" placeholder=\"Default value\" />\n</div>\n<div class=\"form-group\">\n  <label>Placeholder</label>\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\n</div>\n<div class=\"form-group\">\n  <div class=\"checkbox checkbox-icon\">\n    <input type=\"checkbox\" id=\"readonly\" name=\"readonly\" v-model=\"readonly\">\n    <label for=\"readonly\">\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span> Read only and cannot be edited\n    </label>\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.wysiwyg"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/libs/core.js b/js/libs/core.js
index 5674b7cf..d2b85127 100644
--- a/js/libs/core.js
+++ b/js/libs/core.js
@@ -161,6 +161,10 @@ Fliplet.FormBuilder = (function() {
         canHide: {
           type: Boolean,
           default: true
+        },
+        readonly: {
+          type: Boolean,
+          default: false
         }
       }, component.props);
 
diff --git a/templates/components/checkbox.build.hbs b/templates/components/checkbox.build.hbs
index 87297d95..c46fc231 100644
--- a/templates/components/checkbox.build.hbs
+++ b/templates/components/checkbox.build.hbs
@@ -1,18 +1,32 @@
 <template>
   <div v-if="description" class="help-block description">\{{ description }}</div>
-  <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>
-        <span class="option-item">\{{ option.label || option.id }}</span>
-      </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>
diff --git a/templates/components/date.build.hbs b/templates/components/date.build.hbs
index dc5b4901..555aba2d 100644
--- a/templates/components/date.build.hbs
+++ b/templates/components/date.build.hbs
@@ -1,33 +1,64 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
 <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>
diff --git a/templates/components/email.build.hbs b/templates/components/email.build.hbs
index 86dcf775..2e2bd92d 100644
--- a/templates/components/email.build.hbs
+++ b/templates/components/email.build.hbs
@@ -1,5 +1,19 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
-<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"
diff --git a/templates/components/input.build.hbs b/templates/components/input.build.hbs
index 0370b9b2..7f9d85d3 100644
--- a/templates/components/input.build.hbs
+++ b/templates/components/input.build.hbs
@@ -1,5 +1,18 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
-<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"
diff --git a/templates/components/number.build.hbs b/templates/components/number.build.hbs
index debcd4fb..188e81eb 100644
--- a/templates/components/number.build.hbs
+++ b/templates/components/number.build.hbs
@@ -1,5 +1,20 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
-<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"
diff --git a/templates/components/radio.build.hbs b/templates/components/radio.build.hbs
index aec57b69..3052b496 100644
--- a/templates/components/radio.build.hbs
+++ b/templates/components/radio.build.hbs
@@ -1,17 +1,31 @@
 <template>
   <div v-if="description" class="help-block description">\{{ description }}</div>
-  <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>
diff --git a/templates/components/select.build.hbs b/templates/components/select.build.hbs
index f3d289d4..a8701991 100644
--- a/templates/components/select.build.hbs
+++ b/templates/components/select.build.hbs
@@ -1,4 +1,20 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
+<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"
@@ -16,3 +32,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>
diff --git a/templates/components/starRating.build.hbs b/templates/components/starRating.build.hbs
index 70bd0cc7..8b8838b2 100644
--- a/templates/components/starRating.build.hbs
+++ b/templates/components/starRating.build.hbs
@@ -1,5 +1,21 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
-<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"
diff --git a/templates/components/telephone.build.hbs b/templates/components/telephone.build.hbs
index 8ff08dbf..de9f2f90 100644
--- a/templates/components/telephone.build.hbs
+++ b/templates/components/telephone.build.hbs
@@ -1,5 +1,19 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
-<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"
diff --git a/templates/components/textarea.build.hbs b/templates/components/textarea.build.hbs
index 812f405c..1c5d7601 100644
--- a/templates/components/textarea.build.hbs
+++ b/templates/components/textarea.build.hbs
@@ -1,5 +1,19 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
-<textarea
+<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>
+
+<textarea v-else
   class="form-control"
   v-model.trim.lazy="value"
   v-on:blur="updateValue()"
diff --git a/templates/components/time.build.hbs b/templates/components/time.build.hbs
index bb392ba2..a445bd4a 100644
--- a/templates/components/time.build.hbs
+++ b/templates/components/time.build.hbs
@@ -1,18 +1,34 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
 <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>
diff --git a/templates/components/url.build.hbs b/templates/components/url.build.hbs
index b9bb0b74..c3c8abc1 100644
--- a/templates/components/url.build.hbs
+++ b/templates/components/url.build.hbs
@@ -1,5 +1,19 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
-<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"
diff --git a/templates/configurations/checkbox.interface.hbs b/templates/configurations/checkbox.interface.hbs
index 160cfc28..83ef130d 100644
--- a/templates/configurations/checkbox.interface.hbs
+++ b/templates/configurations/checkbox.interface.hbs
@@ -6,3 +6,11 @@
   <label>Default values <small>(One per line)</small></label>
   <textarea class="form-control" v-model.trim="defaultValue" placeholder="Default values" />
 </div>
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>
diff --git a/templates/configurations/date.interface.hbs b/templates/configurations/date.interface.hbs
index 4e1d616b..b0ce57df 100644
--- a/templates/configurations/date.interface.hbs
+++ b/templates/configurations/date.interface.hbs
@@ -15,4 +15,11 @@
   <label>Placeholder</label>
   <input class="form-control" type="text" v-model.trim="placeholder" placeholder="Placeholder text" />
 </div>
-
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>
diff --git a/templates/configurations/email.interface.hbs b/templates/configurations/email.interface.hbs
index 037861cf..eb56d1bd 100644
--- a/templates/configurations/email.interface.hbs
+++ b/templates/configurations/email.interface.hbs
@@ -10,4 +10,11 @@
   <label>Placeholder</label>
   <input class="form-control" type="text" v-model.trim="placeholder" placeholder="Placeholder text" />
 </div>
-
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>
diff --git a/templates/configurations/input.interface.hbs b/templates/configurations/input.interface.hbs
index f2ecd83e..eb56d1bd 100644
--- a/templates/configurations/input.interface.hbs
+++ b/templates/configurations/input.interface.hbs
@@ -10,3 +10,11 @@
   <label>Placeholder</label>
   <input class="form-control" type="text" v-model.trim="placeholder" placeholder="Placeholder text" />
 </div>
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>
diff --git a/templates/configurations/number.interface.hbs b/templates/configurations/number.interface.hbs
index 05dc1ad8..db5e8ce2 100644
--- a/templates/configurations/number.interface.hbs
+++ b/templates/configurations/number.interface.hbs
@@ -29,3 +29,11 @@
   <label>Decimal places allowed</label>
   <input class="form-control" type="number" min="0" max="10" step="1" v-model.number="decimals" placeholder="0" />
 </div>
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>
diff --git a/templates/configurations/radio.build.hbs b/templates/configurations/radio.build.hbs
index 2c80abae..b82e633d 100644
--- a/templates/configurations/radio.build.hbs
+++ b/templates/configurations/radio.build.hbs
@@ -6,3 +6,11 @@
   <label>Default value <small>(Enter one of the options you entered above)</small></label>
   <input class="form-control" type="text" v-model.trim="value" placeholder="Default value" />
 </div>
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>
diff --git a/templates/configurations/select.interface.hbs b/templates/configurations/select.interface.hbs
index f335ac2b..b83e360a 100644
--- a/templates/configurations/select.interface.hbs
+++ b/templates/configurations/select.interface.hbs
@@ -10,3 +10,11 @@
   <label>Option placeholder</label>
   <input class="form-control" type="text" v-model.trim="placeholder" placeholder="Option placeholder" />
 </div>
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>
diff --git a/templates/configurations/starRating.interface.hbs b/templates/configurations/starRating.interface.hbs
index d7f4a0ba..1dd259be 100644
--- a/templates/configurations/starRating.interface.hbs
+++ b/templates/configurations/starRating.interface.hbs
@@ -13,3 +13,11 @@
     <option value="5">5</option>
   </select>
 </div>
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>
diff --git a/templates/configurations/telephone.interface.hbs b/templates/configurations/telephone.interface.hbs
index f2ecd83e..eb56d1bd 100644
--- a/templates/configurations/telephone.interface.hbs
+++ b/templates/configurations/telephone.interface.hbs
@@ -10,3 +10,11 @@
   <label>Placeholder</label>
   <input class="form-control" type="text" v-model.trim="placeholder" placeholder="Placeholder text" />
 </div>
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>
diff --git a/templates/configurations/textarea.interface.hbs b/templates/configurations/textarea.interface.hbs
index 564b7c44..827220f2 100644
--- a/templates/configurations/textarea.interface.hbs
+++ b/templates/configurations/textarea.interface.hbs
@@ -20,3 +20,11 @@
     </select>
   </label>
 </div>
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>
diff --git a/templates/configurations/time.interface.hbs b/templates/configurations/time.interface.hbs
index a35c1234..763b5d96 100644
--- a/templates/configurations/time.interface.hbs
+++ b/templates/configurations/time.interface.hbs
@@ -10,3 +10,11 @@
   <label>Placeholder</label>
   <input class="form-control" type="text" v-model.trim="placeholder" placeholder="Placeholder text" />
 </div>
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>
diff --git a/templates/configurations/url.interface.hbs b/templates/configurations/url.interface.hbs
index f2ecd83e..eb56d1bd 100644
--- a/templates/configurations/url.interface.hbs
+++ b/templates/configurations/url.interface.hbs
@@ -10,3 +10,11 @@
   <label>Placeholder</label>
   <input class="form-control" type="text" v-model.trim="placeholder" placeholder="Placeholder text" />
 </div>
+<div class="form-group">
+  <div class="checkbox checkbox-icon">
+    <input type="checkbox" id="readonly" name="readonly" v-model="readonly">
+    <label for="readonly">
+      <span class="check"><i class="fa fa-check"></i></span> Read only and cannot be edited
+    </label>
+  </div>
+</div>

From 2d0d2c3621515225de50156eeab0067f7c4b1658 Mon Sep 17 00:00:00 2001
From: Yaroslav Ovdii <yaroslav.o@upplabs.com>
Date: Thu, 30 Jul 2020 17:30:08 +0300
Subject: [PATCH 2/2] added new readonly state for multiline, checkbox, radio
 and startRarting

---
 js/build.templates.js                     |  8 +++----
 js/components/textarea.js                 |  5 +++++
 templates/components/checkbox.build.hbs   | 16 ++++++++------
 templates/components/radio.build.hbs      | 18 +++++++++-------
 templates/components/starRating.build.hbs | 26 ++++++++++++-----------
 templates/components/textarea.build.hbs   |  2 +-
 6 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/js/build.templates.js b/js/build.templates.js
index 1c33c0a1..d029bed4 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -7,7 +7,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.buttons"] = Handleb
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.checkbox"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<template>\n  <div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n\n  <template v-if=\"readonly\">\n    <template v-for=\"(option, index) in options\">\n      <p class=\"form-control-static\">{{ option.label || option.id }}</p>\n      <input\n      type=\"hidden\"\n      :id=\"name + '-' + index\"\n      :name=\"name\"\n      v-model=\"value\"\n      :value=\"option.id || option.label\">\n    </template>\n  </template>\n\n  <template v-else>\n    <template v-for=\"(option, index) in options\">\n      <div class=\"checkbox checkbox-icon\">\n        <input\n          type=\"checkbox\"\n          :id=\"name + '-' + index\"\n          :name=\"name\"\n          v-model=\"value\"\n          :value=\"option.id || option.label\">\n        <label v-on:click=\"clickHandler(option)\">\n          <span class=\"check\"><i class=\"fa fa-check\"></i></span> {{ option.label || option.id }}\n        </label>\n      </div>\n    </template>\n  </template>\n\n  <p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n</template>\n";
+    return "<template>\n  <div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n\n  <template v-if=\"readonly\">\n    <template v-for=\"(option, index) in options\">\n      <template v-if=\"value.includes(option.label) || value.includes(option.id)\">\n        <p class=\"form-control-static\">{{ option.label || option.id }}</p>\n        <input\n        type=\"hidden\"\n        :id=\"name + '-' + index\"\n        :name=\"name\"\n        v-model=\"value\"\n        :value=\"option.id || option.label\">\n      </template>\n    </template>\n  </template>\n\n  <template v-else>\n    <template v-for=\"(option, index) in options\">\n      <div class=\"checkbox checkbox-icon\">\n        <input\n          type=\"checkbox\"\n          :id=\"name + '-' + index\"\n          :name=\"name\"\n          v-model=\"value\"\n          :value=\"option.id || option.label\">\n        <label v-on:click=\"clickHandler(option)\">\n          <span class=\"check\"><i class=\"fa fa-check\"></i></span> {{ option.label || option.id }}\n        </label>\n      </div>\n    </template>\n  </template>\n\n  <p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n</template>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.date"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -63,7 +63,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.password"] = Handle
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.radio"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<template>\n  <div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n  <template v-if=\"readonly\">\n    <template v-for=\"(option, index) in options\">\n      <p class=\"form-control-static\">{{ option.label || option.id }}</p>\n      <input\n        type=\"hidden\"\n        :id=\"name + '-' + index\"\n        :name=\"name\"\n        v-model=\"value\"\n        :value=\"option.id || option.label\"\n      />\n    </template>\n  </template>\n  <template v-else>\n    <template v-for=\"(option, index) in options\">\n      <div class=\"radio radio-icon\">\n        <input\n          type=\"radio\"\n          :id=\"name + '-' + index\"\n          :name=\"name\"\n          v-model=\"value\"\n          :value=\"option.id || option.label\">\n        <label v-on:click=\"clickHandler(option)\">\n          <span class=\"check\"><i class=\"fa fa-circle\"></i></span> {{ option.label || option.id }}\n        </label>\n      </div>\n    </template>\n  </template>\n  <p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n</template>\n";
+    return "<template>\n  <div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n  <template v-if=\"readonly\">\n    <template v-for=\"(option, index) in options\">\n      <template v-if=\"value === option.label || value === option.id\">\n        <p class=\"form-control-static\">{{ option.label || option.id }}</p>\n        <input\n          type=\"hidden\"\n          :id=\"name + '-' + index\"\n          :name=\"name\"\n          v-model=\"value\"\n          :value=\"option.id || option.label\"\n        />\n      </template>\n    </template>\n  </template>\n  <template v-else>\n    <template v-for=\"(option, index) in options\">\n      <div class=\"radio radio-icon\">\n        <input\n          type=\"radio\"\n          :id=\"name + '-' + index\"\n          :name=\"name\"\n          v-model=\"value\"\n          :value=\"option.id || option.label\">\n        <label v-on:click=\"clickHandler(option)\">\n          <span class=\"check\"><i class=\"fa fa-circle\"></i></span> {{ option.label || option.id }}\n        </label>\n      </div>\n    </template>\n  </template>\n  <p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n</template>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.select"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -75,7 +75,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.signature"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.starRating"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<div v-if=\"readonly\" class=\"inverse-direction\">\n  <template v-for=\"(option, index) in values\">\n    <input\n      class=\"rating-input\"\n      :name=\"name\"\n      type=\"radio\"\n      :id=\"name + '-' + index\"\n      v-model=\"value\"\n      :value=\"option.id\"\n    />\n    <label class=\"rating-star\">\n      <i class=\"fa fa-star-o\"></i>\n      <i class=\"fa fa-star\"></i>\n    </label>\n  </template>\n</div>\n<div v-else class=\"inverse-direction\">\n  <template v-for=\"(option, index) in values\">\n    <input\n      class=\"rating-input\"\n      :name=\"name\"\n      type=\"radio\"\n      :id=\"name + '-' + index\"\n      v-model=\"value\"\n      :value=\"option.id\"\n      v-on:change=\"updateValue()\"\n      v-on:input=\"onInput($event)\"\n    >\n    <label class=\"rating-star\" :for=\"name + '-' + index\">\n      <i class=\"fa fa-star-o\"></i>\n      <i class=\"fa fa-star\"></i>\n    </label>\n  </template>\n</div>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<div v-if=\"readonly\" class=\"inverse-direction\">\n  <template v-for=\"(option, index) in values\">\n    <template v-if=\"value >= option.id\">\n      <input\n        class=\"rating-input\"\n        :name=\"name\"\n        type=\"radio\"\n        :id=\"name + '-' + index\"\n        v-model=\"value\"\n        :value=\"option.id\"\n      />\n      <label class=\"rating-star\">\n        <i class=\"fa fa-star-o\"></i>\n        <i class=\"fa fa-star\"></i>\n      </label>\n    </template>\n  </template>\n</div>\n<div v-else class=\"inverse-direction\">\n  <template v-for=\"(option, index) in values\">\n    <input\n      class=\"rating-input\"\n      :name=\"name\"\n      type=\"radio\"\n      :id=\"name + '-' + index\"\n      v-model=\"value\"\n      :value=\"option.id\"\n      v-on:change=\"updateValue()\"\n      v-on:input=\"onInput($event)\"\n    >\n    <label class=\"rating-star\" :for=\"name + '-' + index\">\n      <i class=\"fa fa-star-o\"></i>\n      <i class=\"fa fa-star\"></i>\n    </label>\n  </template>\n</div>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.telephone"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -83,7 +83,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.telephone"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.textarea"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<template v-if=\"readonly\">\n  <p class=\"form-control-static\">{{ value }}</p>\n  <input\n    type=\"hidden\"\n    class=\"form-control\"\n    v-model.trim.lazy=\"value\"\n    v-on:blur=\"updateValue()\"\n    v-on:input=\"onInput($event)\"\n    :name=\"name\"\n    :id=\"name\"\n    :placeholder=\"placeholder\"\n  />\n</template>\n\n<textarea v-else\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n  :rows=\"rows\"\n></textarea>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\n<template v-if=\"readonly\">\n  <p class=\"form-control-static\" v-html=\"replaceNewLines(value)\"></p>\n  <input\n    type=\"hidden\"\n    class=\"form-control\"\n    v-model.trim.lazy=\"value\"\n    v-on:blur=\"updateValue()\"\n    v-on:input=\"onInput($event)\"\n    :name=\"name\"\n    :id=\"name\"\n    :placeholder=\"placeholder\"\n  />\n</template>\n\n<textarea v-else\n  class=\"form-control\"\n  v-model.trim.lazy=\"value\"\n  v-on:blur=\"updateValue()\"\n  v-on:input=\"onInput($event)\"\n  :name=\"name\"\n  :id=\"name\"\n  :placeholder=\"placeholder\"\n  :rows=\"rows\"\n></textarea>\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.time"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/components/textarea.js b/js/components/textarea.js
index 93142e1d..ef54d4aa 100644
--- a/js/components/textarea.js
+++ b/js/components/textarea.js
@@ -22,5 +22,10 @@ Fliplet.FormBuilder.field('textarea', {
       rules.value.required = window.validators.required;
     }
     return rules;
+  },
+  methods: {
+    replaceNewLines: function(value) {
+      return value.replace(/(?:\r\n|\r|\n)/g, '<br>')
+    }
   }
 });
diff --git a/templates/components/checkbox.build.hbs b/templates/components/checkbox.build.hbs
index c46fc231..235dfd8d 100644
--- a/templates/components/checkbox.build.hbs
+++ b/templates/components/checkbox.build.hbs
@@ -3,13 +3,15 @@
 
   <template v-if="readonly">
     <template v-for="(option, index) in options">
-      <p class="form-control-static">\{{ option.label || option.id }}</p>
-      <input
-      type="hidden"
-      :id="name + '-' + index"
-      :name="name"
-      v-model="value"
-      :value="option.id || option.label">
+      <template v-if="value.includes(option.label) || value.includes(option.id)">
+        <p class="form-control-static">\{{ option.label || option.id }}</p>
+        <input
+        type="hidden"
+        :id="name + '-' + index"
+        :name="name"
+        v-model="value"
+        :value="option.id || option.label">
+      </template>
     </template>
   </template>
 
diff --git a/templates/components/radio.build.hbs b/templates/components/radio.build.hbs
index 3052b496..544d6d32 100644
--- a/templates/components/radio.build.hbs
+++ b/templates/components/radio.build.hbs
@@ -2,14 +2,16 @@
   <div v-if="description" class="help-block description">\{{ description }}</div>
   <template v-if="readonly">
     <template v-for="(option, index) in options">
-      <p class="form-control-static">\{{ option.label || option.id }}</p>
-      <input
-        type="hidden"
-        :id="name + '-' + index"
-        :name="name"
-        v-model="value"
-        :value="option.id || option.label"
-      />
+      <template v-if="value === option.label || value === option.id">
+        <p class="form-control-static">\{{ option.label || option.id }}</p>
+        <input
+          type="hidden"
+          :id="name + '-' + index"
+          :name="name"
+          v-model="value"
+          :value="option.id || option.label"
+        />
+      </template>
     </template>
   </template>
   <template v-else>
diff --git a/templates/components/starRating.build.hbs b/templates/components/starRating.build.hbs
index 8b8838b2..5f0211c9 100644
--- a/templates/components/starRating.build.hbs
+++ b/templates/components/starRating.build.hbs
@@ -1,18 +1,20 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
 <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 v-if="value >= option.id">
+      <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>
   </template>
 </div>
 <div v-else class="inverse-direction">
diff --git a/templates/components/textarea.build.hbs b/templates/components/textarea.build.hbs
index 1c5d7601..a473325e 100644
--- a/templates/components/textarea.build.hbs
+++ b/templates/components/textarea.build.hbs
@@ -1,6 +1,6 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
 <template v-if="readonly">
-  <p class="form-control-static">\{{ value }}</p>
+  <p class="form-control-static" v-html="replaceNewLines(value)"></p>
   <input
     type="hidden"
     class="form-control"