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,5 +1,5 @@
 <template>
-    <div class="relative grid grid-cols-3 gap-x-[80px] gap-y-5 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+    <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)]">
        <!-- ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
        <MalioButtonIcon
            v-if="removable && !readonly"
@@ -35,6 +35,10 @@
            @update:model-value="(v: boolean) => toggleFlag('isBilling', v)"
        />

+        <!-- Cellule vide : laisse un trou en position 4 (ligne 1) pour que
+             Categorie reparte au debut de la ligne suivante. -->
+        <div aria-hidden="true" />
+
        <MalioSelectCheckbox
            :model-value="model.categoryIris"
            :options="categoryOptions"
@@ -79,33 +83,41 @@
            @update:model-value="(v: string) => update('city', v)"
        />

-        <!-- Adresse : saisie assistee (BAN) ou libre en mode degrade. -->
-        <MalioInputAutocomplete
-            v-if="!degraded"
-            :model-value="model.street"
-            :options="addressOptions"
-            :loading="addressLoading"
-            :min-search-length="3"
-            :label="t('commercial.clients.form.address.street')"
-            :readonly="readonly"
-            @update:model-value="(v: string | number | null) => update('street', v === null ? null : String(v))"
-            @search="onAddressSearch"
-            @select="onAddressSelect"
-        />
-        <MalioInputText
-            v-else
-            :model-value="model.street"
-            :label="t('commercial.clients.form.address.street')"
-            :readonly="readonly"
-            @update:model-value="(v: string) => update('street', v)"
-        />
+        <!-- Adresse + Adresse complementaire sur 2 colonnes : on wrappe car
+             MalioInputText/Autocomplete (inheritAttrs:false) renvoient `class`
+             sur l'input interne, pas sur la cellule de grille. Le wrapper porte
+             le col-span-2, le champ le remplit (w-full). -->
+        <div class="col-span-2">
+            <!-- Adresse : saisie assistee (BAN) ou libre en mode degrade. -->
+            <MalioInputAutocomplete
+                v-if="!degraded"
+                :model-value="model.street"
+                :options="addressOptions"
+                :loading="addressLoading"
+                :min-search-length="3"
+                :label="t('commercial.clients.form.address.street')"
+                :readonly="readonly"
+                @update:model-value="(v: string | number | null) => update('street', v === null ? null : String(v))"
+                @search="onAddressSearch"
+                @select="onAddressSelect"
+            />
+            <MalioInputText
+                v-else
+                :model-value="model.street"
+                :label="t('commercial.clients.form.address.street')"
+                :readonly="readonly"
+                @update:model-value="(v: string) => update('street', v)"
+            />
+        </div>

-        <MalioInputText
-            :model-value="model.streetComplement"
-            :label="t('commercial.clients.form.address.streetComplement')"
-            :readonly="readonly"
-            @update:model-value="(v: string) => update('streetComplement', v)"
-        />
+        <div class="col-span-2">
+            <MalioInputText
+                :model-value="model.streetComplement"
+                :label="t('commercial.clients.form.address.streetComplement')"
+                :readonly="readonly"
+                @update:model-value="(v: string) => update('streetComplement', v)"
+            />
+        </div>

        <!-- Sites Starseed : cases a cocher inline (>= 1 obligatoire, RG-1.10). -->
        <div class="flex justify-between">
@@ -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>

@@ -16,7 +16,7 @@
             Sans validation de ce bloc, les onglets restent inaccessibles. Au
             succes du POST, les champs passent en lecture seule et on bascule
             automatiquement sur l'onglet Information. -->
-        <div class="mt-[48px] grid grid-cols-3 gap-x-[80px] gap-y-5">
+        <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
            <MalioInputText
                v-model="main.companyName"
                :label="t('commercial.clients.form.main.companyName')"
@@ -105,7 +105,7 @@
        <MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
            <!-- Onglet Information -->
            <template #information>
-                <div class="mt-12 grid grid-cols-3 gap-x-[80px] gap-y-5 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
+                <div class="mt-12 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)]">
                    <!-- pt-1 : aligne le bord superieur du textarea sur celui des
                         inputs (centres dans un conteneur h-12, soit ~4px de retrait haut). -->
                    <MalioInputTextArea