add input mode

app/javascript/template_builder/area.vue

@@ -232,6 +232,7 @@
       class="absolute top-0 bottom-0 right-0 left-0"
       :class="isDragged ? 'cursor-grab' : 'cursor-pointer'"
       @dblclick="maybeToggleDefaultValue"
+      @click="maybeToggleCheckboxValue"
     />
     <span
       v-if="field?.type && editable"
@@ -304,6 +305,11 @@ export default {
       type: Object,
       required: true
     },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     isDraw: {
       type: Boolean,
       required: false,
@@ -363,7 +369,7 @@ export default {
       }
     },
     isValueInput () {
-      return (this.field.type === 'heading' && this.isSelected) || this.isContenteditable
+      return (this.field.type === 'heading' && this.isSelected) || this.isContenteditable || (this.inputMode && ['text', 'number', 'date'].includes(this.field.type))
     },
     modalContainerEl () {
       return this.$el.getRootNode().querySelector('#docuseal_modal_container')
@@ -504,11 +510,19 @@ export default {
         this.save()
       }
     },
-    focusValueInput () {
+    maybeToggleCheckboxValue () {
+      if (this.inputMode && this.field.type === 'checkbox') {
+        this.field.readonly = !this.field.readonly
+        this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true
+
+        this.save()
+      }
+    },
+    focusValueInput (e) {
       if (this.$refs.defaultValue !== document.activeElement) {
         this.$refs.defaultValue.focus()
 
-        if (this.$refs.defaultValue.innerText.length) {
+        if (this.$refs.defaultValue.innerText.length && this.$refs.defaultValue !== e?.target) {
           window.getSelection().collapse(
             this.$refs.defaultValue.firstChild,
             this.$refs.defaultValue.innerText.length

app/javascript/template_builder/builder.vue

@@ -247,6 +247,7 @@
                 :selected-submitter="selectedSubmitter"
                 :document="document"
                 :is-drag="!!dragField"
+                :input-mode="inputMode"
                 :default-fields="[...defaultRequiredFields, ...defaultFields]"
                 :allow-draw="!onlyDefinedFields"
                 :default-submitters="defaultSubmitters"
@@ -472,6 +473,11 @@ export default {
       required: false,
       default: true
     },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     withHelp: {
       type: Boolean,
       required: false,

app/javascript/template_builder/document.vue

@@ -4,6 +4,7 @@
       v-for="(image, index) in sortedPreviewImages"
       :key="image.id"
       :ref="setPageRefs"
+      :input-mode="inputMode"
       :number="index"
       :editable="editable"
       :areas="areasIndex[index]"
@@ -36,6 +37,11 @@ export default {
       type: Object,
       required: true
     },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     areasIndex: {
       type: Object,
       required: false,

app/javascript/template_builder/page.vue

@@ -21,6 +21,7 @@
         :key="i"
         :ref="setAreaRefs"
         :area="item.area"
+        :input-mode="inputMode"
         :field="item.field"
         :editable="editable"
         :with-field-placeholder="withFieldPlaceholder"
@@ -72,6 +73,11 @@ export default {
       required: false,
       default: () => []
     },
+    inputMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     defaultFields: {
       type: Array,
       required: false,