require signature in form

app/javascript/submission_form/area.vue

@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWriting, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -166,7 +166,7 @@ export default {
     fieldIcons () {
       return {
         text: IconTextSize,
-        signature: IconWriting,
+        signature: IconWritingSign,
         date: IconCalendarEvent,
         image: IconPhoto,
         file: IconPaperclip,

app/javascript/submission_form/form.vue

@@ -215,7 +215,7 @@
         <button
           type="submit"
           class="base-button w-full flex justify-center"
-          :disabled="isSubmitting || (currentField.required && ['image', 'file'].includes(currentField.type) && !values[currentField.uuid]?.length)"
+          :disabled="isButtonDisabled"
         >
           <span class="flex">
             <IconInnerShadowTop
@@ -314,6 +314,11 @@ export default {
     currentStepFields () {
       return this.stepFields[this.currentStep]
     },
+    isButtonDisabled () {
+      return this.isSubmitting ||
+        (this.currentField.required && ['image', 'file'].includes(this.currentField.type) && !this.values[this.currentField.uuid]?.length) ||
+        (this.currentField.required && this.currentField.type === 'signature' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isSignatureStarted)
+    },
     currentField () {
       return this.currentStepFields[0]
     },

app/javascript/submission_form/signature_step.vue

@@ -70,11 +70,20 @@ export default {
     }
   },
   emits: ['attached', 'update:model-value'],
+  data () {
+    return {
+      isSignatureStarted: false
+    }
+  },
   mounted () {
     this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
     this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
 
     this.pad = new SignaturePad(this.$refs.canvas)
+
+    this.pad.addEventListener('beginStroke', () => {
+      this.isSignatureStarted = true
+    })
   },
   methods: {
     remove () {
@@ -82,6 +91,8 @@ export default {
     },
     clear () {
       this.pad.clear()
+
+      this.isSignatureStarted = false
     },
     submit () {
       if (this.modelValue) {

app/javascript/template_builder/field_type.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWriting, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
@@ -71,7 +71,7 @@ export default {
     fieldIcons () {
       return {
         text: IconTextSize,
-        signature: IconWriting,
+        signature: IconWritingSign,
         date: IconCalendarEvent,
         image: IconPhoto,
         file: IconPaperclip,