style(front) : ajustements layout blocs contact/adresse (ERP-63)

- Bloc Contact aligne sur le bloc Adresse : carte ombree en grille, bouton supprimer en absolute haut-droite (mdi:delete-outline). - Bloc Adresse : champs Adresse et Adresse complementaire sur 2 colonnes (col-span-2 via wrapper, car les inputs Malio renvoient class sur l'input interne) ; cellule vide pour renvoyer Categorie a la ligne suivante. - Grilles alignees (grid-cols-4, gaps homogenes).
2026-06-03 10:47:15 +02:00
parent b3cc7e4ced
commit bc2ee7aac0
3 changed files with 95 additions and 88 deletions
@@ -1,64 +1,59 @@
 <template>
-    <div class="rounded-md border border-neutral-200 bg-white p-6">
-        <div class="mb-4 flex items-center justify-between">
-            <h3 class="text-lg font-bold">{{ title }}</h3>
-            <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee
-                 si non supprimable (1er bloc obligatoire RG-1.14) ou en lecture seule. -->
-            <!-- ariaLabel passe via v-bind objet : la prop du composant est
-                 camelCase (aria-* serait traite en attribut HTML, jamais en prop). -->
-            <MalioButtonIcon
-                v-if="removable && !readonly"
-                icon="mdi:trash-can-outline"
-                variant="ghost"
-                v-bind="{ ariaLabel: t('commercial.clients.form.contact.remove') }"
-                @click="$emit('remove')"
-            />
-        </div>
+    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+        <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
+             non supprimable (1er bloc obligatoire RG-1.14) ou en lecture seule.
+             ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
+        <MalioButtonIcon
+            v-if="removable && !readonly"
+            icon="mdi:delete-outline"
+            variant="ghost"
+            button-class="absolute top-3 right-3"
+            v-bind="{ ariaLabel: t('commercial.clients.form.contact.remove') }"
+            @click="$emit('remove')"
+        />

-        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <MalioInputText
-                :model-value="model.lastName"
-                :label="t('commercial.clients.form.contact.lastName')"
-                :readonly="readonly"
-                @update:model-value="(v: string) => update('lastName', v)"
-            />
-            <MalioInputText
-                :model-value="model.firstName"
-                :label="t('commercial.clients.form.contact.firstName')"
-                :readonly="readonly"
-                @update:model-value="(v: string) => update('firstName', v)"
-            />
-            <MalioInputText
-                :model-value="model.jobTitle"
-                :label="t('commercial.clients.form.contact.jobTitle')"
-                :readonly="readonly"
-                @update:model-value="(v: string) => update('jobTitle', v)"
-            />
-            <MalioInputEmail
-                :model-value="model.email"
-                :label="t('commercial.clients.form.contact.email')"
-                :readonly="readonly"
-                @update:model-value="(v: string) => update('email', v)"
-            />
-            <MalioInputPhone
-                :model-value="model.phonePrimary"
-                :label="t('commercial.clients.form.contact.phonePrimary')"
-                :mask="PHONE_MASK"
-                :readonly="readonly"
-                :addable="!model.hasSecondaryPhone && !readonly"
-                :add-button-label="t('commercial.clients.form.contact.addPhone')"
-                @update:model-value="(v: string) => update('phonePrimary', v)"
-                @add="revealSecondaryPhone"
-            />
-            <MalioInputPhone
-                v-if="model.hasSecondaryPhone"
-                :model-value="model.phoneSecondary"
-                :label="t('commercial.clients.form.contact.phoneSecondary')"
-                :mask="PHONE_MASK"
-                :readonly="readonly"
-                @update:model-value="(v: string) => update('phoneSecondary', v)"
-            />
-        </div>
+        <MalioInputText
+            :model-value="model.lastName"
+            :label="t('commercial.clients.form.contact.lastName')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('lastName', v)"
+        />
+        <MalioInputText
+            :model-value="model.firstName"
+            :label="t('commercial.clients.form.contact.firstName')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('firstName', v)"
+        />
+        <MalioInputText
+            :model-value="model.jobTitle"
+            :label="t('commercial.clients.form.contact.jobTitle')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('jobTitle', v)"
+        />
+        <MalioInputEmail
+            :model-value="model.email"
+            :label="t('commercial.clients.form.contact.email')"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('email', v)"
+        />
+        <MalioInputPhone
+            :model-value="model.phonePrimary"
+            :label="t('commercial.clients.form.contact.phonePrimary')"
+            :mask="PHONE_MASK"
+            :readonly="readonly"
+            :addable="!model.hasSecondaryPhone && !readonly"
+            :add-button-label="t('commercial.clients.form.contact.addPhone')"
+            @update:model-value="(v: string) => update('phonePrimary', v)"
+            @add="revealSecondaryPhone"
+        />
+        <MalioInputPhone
+            v-if="model.hasSecondaryPhone"
+            :model-value="model.phoneSecondary"
+            :label="t('commercial.clients.form.contact.phoneSecondary')"
+            :mask="PHONE_MASK"
+            :readonly="readonly"
+            @update:model-value="(v: string) => update('phoneSecondary', v)"
+        />
    </div>
 </template>