allow to make form field optional

app/javascript/template_builder/area.vue

@@ -44,8 +44,28 @@
         @focus="onNameFocus"
         @blur="onNameBlur"
       >{{ field.name || defaultName }}</span>
+      <div
+        v-if="isNameFocus"
+        class="flex items-center ml-1.5"
+      >
+        <input
+          :id="`required-checkbox-${field.uuid}`"
+          v-model="field.required"
+          type="checkbox"
+          class="checkbox checkbox-xs no-animation rounded"
+          @mousedown.prevent
+        >
+        <label
+          :for="`required-checkbox-${field.uuid}`"
+          class="label text-xs"
+          @click.prevent="field.required = !field.required"
+          @mousedown.prevent
+        >Required</label>
+      </div>
       <button
+        v-else
         class="pr-1"
+        title="Remove"
         @click.prevent="$emit('remove')"
       >
         <IconX width="14" />

app/javascript/template_builder/builder.vue

@@ -321,6 +321,11 @@ export default {
             w: area.maskW / 5 / area.maskW,
             h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH)
           }
+        } else if (this.dragFieldType === 'signature') {
+          baseArea = {
+            w: area.maskW / 5 / area.maskW,
+            h: (area.maskW / 5 / area.maskW) * (area.maskW / area.maskH) / 2
+          }
         } else {
           baseArea = {
             w: area.maskW / 5 / area.maskW,

app/javascript/template_builder/contenteditable.vue

@@ -9,21 +9,28 @@
       style="min-width: 2px"
       :class="iconInline ? 'inline' : 'block'"
       class="peer outline-none focus:block"
-      @keydown.enter.prevent="onEnter"
+      @keydown.enter.prevent="blurContenteditable"
       @focus="$emit('focus', $event)"
       @blur="onBlur"
     >
       {{ value }}
     </span>
+    <span
+      v-if="withRequired"
+      title="Required"
+      class="text-red-500 peer-focus:hidden"
+      @click="focusContenteditable"
+    >
+      *
+    </span>
     <IconPencil
-      contenteditable="false"
-      class="cursor-pointer ml-1 flex-none opacity-0 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
+      class="cursor-pointer flex-none opacity-0 group-hover/contenteditable:opacity-100 align-middle peer-focus:hidden"
       :style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
       title="Edit"
-      :class="{ 'absolute': !iconInline, 'inline align-bottom': iconInline }"
+      :class="{ 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline }"
       :width="iconWidth"
       :stroke-width="iconStrokeWidth"
-      @click="onPencilClick"
+      @click="focusContenteditable"
     />
   </div>
 </template>
@@ -52,6 +59,11 @@ export default {
       required: false,
       default: 30
     },
+    withRequired: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     iconStrokeWidth: {
       type: Number,
       required: false,
@@ -79,10 +91,10 @@ export default {
       this.$emit('update:model-value', this.value)
       this.$emit('blur', e)
     },
-    onPencilClick () {
+    focusContenteditable () {
       this.$refs.contenteditable.focus()
     },
-    onEnter () {
+    blurContenteditable () {
       this.$refs.contenteditable.blur()
     }
   }

app/javascript/template_builder/field.vue

@@ -27,7 +27,28 @@
             @blur="onNameBlur"
           />
         </div>
-        <div class="flex items-center space-x-1">
+        <div
+          v-if="isNameFocus"
+          class="flex items-center relative"
+        >
+          <input
+            :id="`required-checkbox-${field.uuid}`"
+            v-model="field.required"
+            type="checkbox"
+            class="checkbox checkbox-xs no-animation rounded"
+            @mousedown.prevent
+          >
+          <label
+            :for="`required-checkbox-${field.uuid}`"
+            class="label text-xs"
+            @click.prevent="field.required = !field.required"
+            @mousedown.prevent
+          >Required</label>
+        </div>
+        <div
+          v-else
+          class="flex items-center space-x-1"
+        >
           <span
             v-if="field.areas?.length"
             class="dropdown dropdown-end"
@@ -178,6 +199,11 @@ export default {
     }
   },
   emits: ['set-draw', 'remove', 'move-up', 'move-down', 'scroll-to'],
+  data () {
+    return {
+      isNameFocus: false
+    }
+  },
   computed: {
     defaultName () {
       const typeIndex = this.template.fields.filter((f) => f.type === this.field.type).indexOf(this.field)
@@ -192,6 +218,8 @@ export default {
   },
   methods: {
     onNameFocus (e) {
+      this.isNameFocus = true
+
       if (!this.field.name) {
         setTimeout(() => {
           this.$refs.name.$refs.contenteditable.innerText = ' '
@@ -220,6 +248,8 @@ export default {
         this.field.name = ''
         this.$refs.name.$refs.contenteditable.innerText = this.defaultName
       }
+
+      this.isNameFocus = false
     },
     removeArea (area) {
       this.field.areas.splice(this.field.areas.indexOf(area), 1)

app/javascript/template_builder/field_type.vue

@@ -2,7 +2,7 @@
   <span class="dropdown">
     <label
       tabindex="0"
-      title="Type"
+      :title="$t(modelValue)"
       class="cursor-pointer"
     >
       <component