feat(machine) : add custom field definition editor on machine detail page

Adds UI to create, edit, reorder and delete custom field definitions
directly from the machine detail page in edit mode.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/components/machine/MachineCustomFieldDefEditor.vue

@@ -0,0 +1,124 @@
+<template>
+  <section class="space-y-3">
+    <div class="flex items-center justify-between">
+      <h3 class="text-sm font-semibold">
+        Définitions des champs personnalisés
+      </h3>
+      <button
+        type="button"
+        class="btn btn-primary btn-sm"
+        :disabled="saving"
+        @click="$emit('save')"
+      >
+        <span v-if="saving" class="loading loading-spinner loading-xs" />
+        Enregistrer les champs
+      </button>
+    </div>
+
+    <p v-if="!fields.length" class="text-xs text-gray-500">
+      Aucun champ personnalisé défini. Cliquez sur « Ajouter » pour en créer un.
+    </p>
+
+    <ul v-else class="space-y-2" role="list">
+      <li
+        v-for="(field, index) in fields"
+        :key="field.uid"
+        class="border border-base-200 rounded-md p-3 space-y-2 bg-base-100 transition-colors"
+        :class="reorderClass(index)"
+        draggable="true"
+        @dragstart="onDragStart(index, $event)"
+        @dragenter="onDragEnter(index)"
+        @dragover.prevent="onDragEnter(index)"
+        @drop.prevent="onDrop(index)"
+        @dragend="onDragEnd"
+      >
+        <div class="flex items-start gap-3">
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing mt-1"
+            title="Réordonner"
+            draggable="false"
+          >
+            <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+          </button>
+
+          <div class="flex-1 space-y-2">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <input
+                v-model="field.name"
+                type="text"
+                class="input input-bordered input-sm"
+                placeholder="Nom du champ"
+              >
+              <select v-model="field.type" class="select select-bordered select-sm">
+                <option value="text">
+                  Texte
+                </option>
+                <option value="number">
+                  Nombre
+                </option>
+                <option value="select">
+                  Liste
+                </option>
+                <option value="boolean">
+                  Oui/Non
+                </option>
+                <option value="date">
+                  Date
+                </option>
+              </select>
+            </div>
+
+            <div class="flex items-center gap-2 text-xs">
+              <input v-model="field.required" type="checkbox" class="checkbox checkbox-xs">
+              Obligatoire
+            </div>
+
+            <textarea
+              v-if="field.type === 'select'"
+              v-model="field.optionsText"
+              class="textarea textarea-bordered textarea-sm h-20"
+              placeholder="Option 1&#10;Option 2"
+            />
+          </div>
+
+          <button
+            type="button"
+            class="btn btn-error btn-xs btn-square"
+            @click="$emit('remove-field', index)"
+          >
+            <IconLucideTrash class="w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
+      </li>
+    </ul>
+
+    <button type="button" class="btn btn-outline btn-sm" @click="$emit('add-field')">
+      <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+      Ajouter un champ
+    </button>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { MachineCustomFieldEditorField } from '~/composables/useMachineCustomFieldDefs'
+import IconLucideGripVertical from '~icons/lucide/grip-vertical'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideTrash from '~icons/lucide/trash'
+
+defineProps<{
+  fields: MachineCustomFieldEditorField[]
+  saving: boolean
+  reorderClass: (index: number) => string
+  onDragStart: (index: number, event: DragEvent) => void
+  onDragEnter: (index: number) => void
+  onDrop: (index: number) => void
+  onDragEnd: () => void
+}>()
+
+defineEmits<{
+  save: []
+  'add-field': []
+  'remove-field': [index: number]
+}>()
+</script>