style(front) : ajustements layout blocs contact/adresse (ERP-63)
Pull Request — Quality gate / Backend (PHP CS + PHPUnit) (pull_request) Successful in 1m40s
Pull Request — Quality gate / Frontend (lint + Vitest + build) (pull_request) Successful in 1m2s

- 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).
This commit is contained in:
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">