style(directory) : style plat sans box-shadow sur les fiches (LST-72)
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:
@@ -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)"
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user