feat(directory) : entête Action, hover, modal de conversion et ajustements UI (LST-72)

- Colonne « Action » avec entête (alignée à droite) sur les 3 tableaux - Feedback hover sur les boutons d'action (poubelle / convertir) - Conversion prospect → client passe par une modal de confirmation - ConfirmModal basé sur MalioModal (design Starseed), remplace ConfirmDeleteModal - Nom (client/prospect/prestataire) en gras dans les modals via <i18n-t> - Boutons « Ajouter » : label raccourci + taille standard Malio (180px) - Barres d'outils à hauteur homogène (48px) : le bouton ne saute plus entre onglets Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-26 15:43:49 +02:00
parent be079cdbe2
commit 6b65839061
4 changed files with 131 additions and 88 deletions
@@ -0,0 +1,54 @@
+<template>
+    <MalioModal
+        :model-value="modelValue"
+        modal-class="max-w-md"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <template #header>
+            <h2 class="text-[24px] font-bold">{{ title }}</h2>
+        </template>
+        <!-- Corps : slot par défaut pour permettre du texte enrichi (nom en gras
+             via <i18n-t>) ; sinon repli sur le message texte simple. -->
+        <slot>
+            <p>{{ message }}</p>
+        </slot>
+        <template #footer>
+            <MalioButton
+                variant="secondary"
+                button-class="flex-1"
+                :label="cancelLabel ?? $t('common.cancel')"
+                @click="$emit('update:modelValue', false)"
+            />
+            <MalioButton
+                :variant="confirmVariant"
+                button-class="flex-1"
+                :label="confirmLabel ?? $t('common.delete')"
+                @click="$emit('confirm')"
+            />
+        </template>
+    </MalioModal>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        modelValue: boolean
+        title: string
+        message?: string
+        confirmLabel?: string
+        cancelLabel?: string
+        confirmVariant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+    }>(),
+    {
+        message: undefined,
+        confirmLabel: undefined,
+        cancelLabel: undefined,
+        confirmVariant: 'danger',
+    },
+)
+
+defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'confirm'): void
+}>()
+</script>