group form checkboxes into single step

app/javascript/template_builder/area.vue

@@ -35,7 +35,7 @@
         @click="selectedAreaRef.value = area"
       />
       <span
-        v-if="withName"
+        v-if="field.type !== 'checkbox' || field.name"
         ref="name"
         contenteditable
         class="pr-1 cursor-text outline-none block"
@@ -138,9 +138,6 @@ export default {
         'bg-purple-100'
       ]
     },
-    withName () {
-      return !['checkbox', 'radio'].includes(this.field.type) || this.field.options
-    },
     isSelected () {
       return this.selectedAreaRef.value === this.area
     },
@@ -169,11 +166,11 @@ export default {
       }
     },
     maybeUpdateOptions () {
-      if (!['radio', 'checkbox', 'select'].includes(this.field.type)) {
+      if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
         delete this.field.options
       }
 
-      if (this.field.type === 'select') {
+      if (['select', 'multiple', 'radio'].includes(this.field.type)) {
         this.field.options ||= ['']
       }
     },

app/javascript/template_builder/builder.vue

@@ -291,7 +291,7 @@ export default {
         required: true
       }
 
-      if (this.dragFieldType === 'select') {
+      if (['select', 'multiple', 'radio'].includes(this.dragFieldType)) {
         field.options = ['']
       }
 
@@ -311,7 +311,7 @@ export default {
       } else if (previousField?.areas) {
         baseArea = previousField.areas[previousField.areas.length - 1]
       } else {
-        if (['checkbox', 'radio'].includes(this.dragFieldType)) {
+        if (['checkbox'].includes(this.dragFieldType)) {
           baseArea = {
             w: area.maskW / 30 / area.maskW,
             h: area.maskW / 30 / area.maskW * (area.maskW / area.maskH)

app/javascript/template_builder/field.vue

@@ -182,7 +182,9 @@ export default {
     defaultName () {
       const typeIndex = this.template.fields.filter((f) => f.type === this.field.type).indexOf(this.field)
 
-      return `${this.$t(this.field.type)} Field ${typeIndex + 1}`
+      const suffix = { multiple: 'Select', radio: 'Group' }[this.field.type] || 'Field'
+
+      return `${this.$t(this.field.type)} ${suffix} ${typeIndex + 1}`
     },
     areas () {
       return this.field.areas || []
@@ -203,11 +205,11 @@ export default {
       document.activeElement.blur()
     },
     maybeUpdateOptions () {
-      if (!['radio', 'checkbox', 'select'].includes(this.field.type)) {
+      if (!['radio', 'multiple', 'select'].includes(this.field.type)) {
         delete this.field.options
       }
 
-      if (this.field.type === 'select') {
+      if (['radio', 'multiple', 'select'].includes(this.field.type)) {
         this.field.options ||= ['']
       }
     },

app/javascript/template_builder/field_type.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWriting, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot } from '@tabler/icons-vue'
+import { IconTextSize, IconWriting, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
@@ -77,6 +77,7 @@ export default {
         file: IconPaperclip,
         select: IconSelect,
         checkbox: IconCheckbox,
+        multiple: IconChecks,
         radio: IconCircleDot
       }
     }

app/javascript/template_builder/fields.vue

@@ -1,11 +1,13 @@
 <template>
-  <FieldSubmitter
-    :model-value="selectedSubmitter.uuid"
-    class="w-full"
-    :submitters="submitters"
-    @remove="removeSubmitter"
-    @update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
-  />
+  <div class="sticky -top-1 bg-base-100 pt-1 -mt-1 z-10">
+    <FieldSubmitter
+      :model-value="selectedSubmitter.uuid"
+      class="w-full bg-base-100"
+      :submitters="submitters"
+      @remove="removeSubmitter"
+      @update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
+    />
+  </div>
   <div class="mb-1 mt-2">
     <Field
       v-for="field in submitterFields"
@@ -19,7 +21,7 @@
       @set-draw="$emit('set-draw', $event)"
     />
   </div>
-  <div class="grid grid-cols-3 gap-1">
+  <div class="grid grid-cols-3 gap-1 pb-2">
     <button
       v-for="(icon, type) in fieldIcons"
       :key="type"
@@ -145,7 +147,7 @@ export default {
         type
       }
 
-      if (['select', 'checkbox', 'radio'].includes(type)) {
+      if (['select', 'multiple', 'radio'].includes(type)) {
         field.options = ['']
       }
 

app/javascript/template_builder/i18n.js

@@ -6,5 +6,6 @@ export default {
   file: 'File',
   select: 'Select',
   checkbox: 'Checkbox',
+  multiple: 'Multiple',
   radio: 'Radio'
 }