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).
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user