style submitter form

app/javascript/submission_form/area.vue

@@ -1,8 +1,36 @@
 <template>
   <div
-    class="flex cursor-pointer bg-red-100 bg-opacity-60 absolute"
+    class="flex cursor-pointer bg-red-100 absolute border"
     :style="computedStyle"
+    :class="{ 'border-red-100 bg-opacity-70': !isActive, 'border-red-500 border-dashed bg-opacity-30 z-10': isActive }"
   >
+    <div
+      v-if="!isActive && !modelValue"
+      class="absolute top-0 bottom-0 right-0 left-0 items-center justify-center h-full w-full"
+    >
+      <span
+        v-if="field"
+        class="flex justify-center items-center h-full opacity-50"
+      >
+        <component
+          :is="fieldIcons[field.type]"
+          width="100%"
+          height="100%"
+          class="max-h-10 text-base-content"
+        />
+      </span>
+    </div>
+    <div
+      v-if="isActive"
+      class="absolute -top-7 rounded bg-base-content text-base-100 px-2 text-sm whitespace-nowrap"
+    >
+      {{ field.name || fieldNames[field.type] }}
+    </div>
+    <div
+      v-if="isActive"
+      ref="scrollToElem"
+      class="absolute -top-20"
+    />
     <img
       v-if="field.type === 'image' && image"
       class="object-contain"
@@ -23,12 +51,14 @@
       </a>
     </div>
     <span v-else>
-      {{ value }}
+      {{ modelValue }}
     </span>
   </div>
 </template>
 
 <script>
+import { IconTextSize, IconWriting, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot } from '@tabler/icons-vue'
+
 export default {
   name: 'FieldArea',
   props: {
@@ -36,11 +66,16 @@ export default {
       type: Object,
       required: true
     },
-    value: {
-      type: [Array, String, Number, Object],
+    modelValue: {
+      type: [Array, String, Number, Object, Boolean],
       required: false,
       default: ''
     },
+    isActive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     attachmentsIndex: {
       type: Object,
       required: false,
@@ -51,24 +86,49 @@ export default {
       required: true
     }
   },
+  emits: ['update:model-value'],
   computed: {
+    fieldNames () {
+      return {
+        text: 'Text',
+        signature: 'Signature',
+        date: 'Date',
+        image: 'Image',
+        file: 'File',
+        select: 'Select',
+        checkbox: 'Checkbox',
+        radio: 'Radio'
+      }
+    },
+    fieldIcons () {
+      return {
+        text: IconTextSize,
+        signature: IconWriting,
+        date: IconCalendarEvent,
+        image: IconPhoto,
+        file: IconPaperclip,
+        select: IconSelect,
+        checkbox: IconCheckbox,
+        radio: IconCircleDot
+      }
+    },
     image () {
       if (this.field.type === 'image') {
-        return this.attachmentsIndex[this.value]
+        return this.attachmentsIndex[this.modelValue]
       } else {
         return null
       }
     },
     signature () {
       if (this.field.type === 'signature') {
-        return this.attachmentsIndex[this.value]
+        return this.attachmentsIndex[this.modelValue]
       } else {
         return null
       }
     },
     attachments () {
       if (this.field.type === 'attachment') {
-        return (this.value || []).map((uuid) => this.attachmentsIndex[uuid])
+        return (this.modelValue || []).map((uuid) => this.attachmentsIndex[uuid])
       } else {
         return []
       }