style(directory) : style plat sans box-shadow sur les fiches (LST-72)
Pull Request — Quality gate / Frontend (build) (pull_request) Successful in 40s
Pull Request — Quality gate / Backend (PHP CS + PHPUnit) (pull_request) Successful in 1m39s

Aligne les fiches Client / Prospect / Prestataire sur le design Starseed :
- Onglet Information : grille plate (suppression box blanche + box-shadow)
- Blocs Contact & Adresse : à plat, séparés par un filet noir 1px
  (header titre + bouton supprimer, prop `last` sans bordure en bas)
Onglet Rapport inchangé.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-26 15:57:55 +02:00
parent 6b65839061
commit 5d1cc09a49
5 changed files with 85 additions and 67 deletions
@@ -1,17 +1,20 @@
<template> <template>
<div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]"> <!-- Bloc à plat (sans box-shadow) : un filet noir 1px le sépare du suivant
<h3 class="col-span-2 text-sm font-semibold text-neutral-700"> (pas de bordure sous le dernier bloc), comme sur Starseed. -->
{{ title }} <div class="pb-5" :class="{ 'border-b border-black': !last }">
</h3> <div class="flex items-center justify-between">
<MalioButtonIcon <h3 class="text-[20px] font-semibold text-black">{{ title }}</h3>
v-if="removable && !readonly" <MalioButtonIcon
icon="mdi:delete-outline" v-if="removable && !readonly"
variant="ghost" icon="mdi:delete-outline"
class="absolute right-3 top-3" variant="ghost"
:aria-label="$t('common.delete')" button-class="p-0"
@click="$emit('remove')" :aria-label="$t('common.delete')"
/> @click="$emit('remove')"
/>
</div>
<div class="mt-6 grid grid-cols-2 gap-x-[44px] gap-y-4">
<MalioInputText <MalioInputText
class="col-span-2" class="col-span-2"
:label="$t('directory.addresses.fields.label')" :label="$t('directory.addresses.fields.label')"
@@ -79,6 +82,7 @@
:readonly="readonly" :readonly="readonly"
@update:model-value="update('city', $event)" @update:model-value="update('city', $event)"
/> />
</div>
</div> </div>
</template> </template>
@@ -94,6 +98,8 @@ const props = defineProps<{
title: string title: string
removable?: boolean removable?: boolean
readonly?: boolean readonly?: boolean
/** Dernier bloc de la liste : supprime le filet de séparation bas. */
last?: boolean
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
@@ -1,57 +1,61 @@
<template> <template>
<div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]"> <!-- Bloc à plat (sans box-shadow) : un filet noir 1px le sépare du suivant
<h3 class="col-span-2 text-sm font-semibold text-neutral-700"> (pas de bordure sous le dernier bloc), comme sur Starseed. -->
{{ title }} <div class="pb-5" :class="{ 'border-b border-black': !last }">
</h3> <div class="flex items-center justify-between">
<MalioButtonIcon <h3 class="text-[20px] font-semibold text-black">{{ title }}</h3>
v-if="removable && !readonly" <MalioButtonIcon
icon="mdi:delete-outline" v-if="removable && !readonly"
variant="ghost" icon="mdi:delete-outline"
class="absolute right-3 top-3" variant="ghost"
:aria-label="$t('common.delete')" button-class="p-0"
@click="$emit('remove')" :aria-label="$t('common.delete')"
/> @click="$emit('remove')"
/>
</div>
<MalioInputText <div class="mt-6 grid grid-cols-2 gap-x-[44px] gap-y-4">
:label="$t('directory.contacts.fields.lastName')" <MalioInputText
:model-value="modelValue.lastName ?? ''" :label="$t('directory.contacts.fields.lastName')"
:readonly="readonly" :model-value="modelValue.lastName ?? ''"
@update:model-value="update('lastName', $event)" :readonly="readonly"
/> @update:model-value="update('lastName', $event)"
<MalioInputText />
:label="$t('directory.contacts.fields.firstName')" <MalioInputText
:model-value="modelValue.firstName ?? ''" :label="$t('directory.contacts.fields.firstName')"
:readonly="readonly" :model-value="modelValue.firstName ?? ''"
@update:model-value="update('firstName', $event)" :readonly="readonly"
/> @update:model-value="update('firstName', $event)"
<MalioInputText />
class="col-span-2" <MalioInputText
:label="$t('directory.contacts.fields.jobTitle')" class="col-span-2"
:model-value="modelValue.jobTitle ?? ''" :label="$t('directory.contacts.fields.jobTitle')"
:readonly="readonly" :model-value="modelValue.jobTitle ?? ''"
@update:model-value="update('jobTitle', $event)" :readonly="readonly"
/> @update:model-value="update('jobTitle', $event)"
<MalioInputText />
:label="$t('directory.contacts.fields.email')" <MalioInputText
:model-value="modelValue.email ?? ''" :label="$t('directory.contacts.fields.email')"
:readonly="readonly" :model-value="modelValue.email ?? ''"
:error="emailError" :readonly="readonly"
@update:model-value="update('email', $event)" :error="emailError"
/> @update:model-value="update('email', $event)"
<MalioInputText />
:label="$t('directory.contacts.fields.phonePrimary')" <MalioInputText
:model-value="modelValue.phonePrimary ?? ''" :label="$t('directory.contacts.fields.phonePrimary')"
:readonly="readonly" :model-value="modelValue.phonePrimary ?? ''"
:error="phonePrimaryError" :readonly="readonly"
@update:model-value="update('phonePrimary', $event)" :error="phonePrimaryError"
/> @update:model-value="update('phonePrimary', $event)"
<MalioInputText />
:label="$t('directory.contacts.fields.phoneSecondary')" <MalioInputText
:model-value="modelValue.phoneSecondary ?? ''" :label="$t('directory.contacts.fields.phoneSecondary')"
:readonly="readonly" :model-value="modelValue.phoneSecondary ?? ''"
:error="phoneSecondaryError" :readonly="readonly"
@update:model-value="update('phoneSecondary', $event)" :error="phoneSecondaryError"
/> @update:model-value="update('phoneSecondary', $event)"
/>
</div>
</div> </div>
</template> </template>
@@ -64,6 +68,8 @@ const props = defineProps<{
title: string title: string
removable?: boolean removable?: boolean
readonly?: boolean readonly?: boolean
/** Dernier bloc de la liste : supprime le filet de séparation bas. */
last?: boolean
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
@@ -13,7 +13,7 @@
<MalioTabList v-model="activeTab" :tabs="tabs"> <MalioTabList v-model="activeTab" :tabs="tabs">
<template #info> <template #info>
<div class="flex flex-col gap-4 pt-6"> <div class="flex flex-col gap-4 pt-6">
<div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]"> <div class="grid grid-cols-2 gap-x-[44px] gap-y-4">
<MalioInputText <MalioInputText
v-model="info.name" v-model="info.name"
class="col-span-2" class="col-span-2"
@@ -57,6 +57,7 @@
:model-value="contact" :model-value="contact"
:title="$t('directory.contacts.item', { n: i + 1 })" :title="$t('directory.contacts.item', { n: i + 1 })"
:removable="contacts.length > 0" :removable="contacts.length > 0"
:last="i === contacts.length - 1"
@update:model-value="(v) => onContactInput(i, v)" @update:model-value="(v) => onContactInput(i, v)"
@remove="removeContact(i)" @remove="removeContact(i)"
/> />
@@ -87,6 +88,7 @@
:model-value="address" :model-value="address"
:title="$t('directory.addresses.item', { n: i + 1 })" :title="$t('directory.addresses.item', { n: i + 1 })"
:removable="addresses.length > 0" :removable="addresses.length > 0"
:last="i === addresses.length - 1"
@update:model-value="(v) => onAddressInput(i, v)" @update:model-value="(v) => onAddressInput(i, v)"
@remove="removeAddress(i)" @remove="removeAddress(i)"
/> />
@@ -13,7 +13,7 @@
<MalioTabList v-model="activeTab" :tabs="tabs"> <MalioTabList v-model="activeTab" :tabs="tabs">
<template #info> <template #info>
<div class="flex flex-col gap-4 pt-6"> <div class="flex flex-col gap-4 pt-6">
<div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]"> <div class="grid grid-cols-2 gap-x-[44px] gap-y-4">
<MalioInputText <MalioInputText
v-model="info.name" v-model="info.name"
class="col-span-2" class="col-span-2"
@@ -57,6 +57,7 @@
:model-value="contact" :model-value="contact"
:title="$t('directory.contacts.item', { n: i + 1 })" :title="$t('directory.contacts.item', { n: i + 1 })"
:removable="contacts.length > 0" :removable="contacts.length > 0"
:last="i === contacts.length - 1"
@update:model-value="(v) => onContactInput(i, v)" @update:model-value="(v) => onContactInput(i, v)"
@remove="removeContact(i)" @remove="removeContact(i)"
/> />
@@ -87,6 +88,7 @@
:model-value="address" :model-value="address"
:title="$t('directory.addresses.item', { n: i + 1 })" :title="$t('directory.addresses.item', { n: i + 1 })"
:removable="addresses.length > 0" :removable="addresses.length > 0"
:last="i === addresses.length - 1"
@update:model-value="(v) => onAddressInput(i, v)" @update:model-value="(v) => onAddressInput(i, v)"
@remove="removeAddress(i)" @remove="removeAddress(i)"
/> />
@@ -13,7 +13,7 @@
<MalioTabList v-model="activeTab" :tabs="tabs"> <MalioTabList v-model="activeTab" :tabs="tabs">
<template #info> <template #info>
<div class="flex flex-col gap-4 pt-6"> <div class="flex flex-col gap-4 pt-6">
<div class="relative grid grid-cols-2 gap-x-[44px] gap-y-4 rounded-lg bg-white px-7 py-5 shadow-[0_4px_4px_0_rgba(0,0,0,0.10)]"> <div class="grid grid-cols-2 gap-x-[44px] gap-y-4">
<MalioInputText <MalioInputText
v-model="info.company" v-model="info.company"
class="col-span-2" class="col-span-2"
@@ -72,6 +72,7 @@
:model-value="contact" :model-value="contact"
:title="$t('directory.contacts.item', { n: i + 1 })" :title="$t('directory.contacts.item', { n: i + 1 })"
:removable="contacts.length > 0" :removable="contacts.length > 0"
:last="i === contacts.length - 1"
@update:model-value="(v) => onContactInput(i, v)" @update:model-value="(v) => onContactInput(i, v)"
@remove="removeContact(i)" @remove="removeContact(i)"
/> />
@@ -102,6 +103,7 @@
:model-value="address" :model-value="address"
:title="$t('directory.addresses.item', { n: i + 1 })" :title="$t('directory.addresses.item', { n: i + 1 })"
:removable="addresses.length > 0" :removable="addresses.length > 0"
:last="i === addresses.length - 1"
@update:model-value="(v) => onAddressInput(i, v)" @update:model-value="(v) => onAddressInput(i, v)"
@remove="removeAddress(i)" @remove="removeAddress(i)"
/> />