feat(front) : tags multiselect — couleur des sites + limite d'affichage

- Sites : les tags du multiselect prennent la couleur de fond du site
  (champ color, groupe site:read) avec texte blanc, en saisie comme en
  consultation (clients, fournisseurs, prestataires, produits).
- Autres multiselects : 3 tags affichés au maximum (surplus condensé en « +N »).
- Bump @malio/layer-ui 1.7.15 → 1.7.17 (support color/textColor et maxTags
  sur les options).

frontend/modules/catalog/components/CategoryDrawer.vue

@@ -30,6 +30,7 @@
             <MalioSelectCheckbox
                 v-model="form.categoryTypeIds.value"
                 :options="typeOptions"
+                :max-tags="3"
                 :label="t('admin.categories.form.types')"
                 :error="form.errors.categoryTypes"
                 :display-tag="true"

frontend/modules/catalog/composables/useProductOptions.ts

@@ -16,6 +16,13 @@ import { ref } from 'vue'
 export interface RefOption {
     value: string
     label: string
+    // Couleur de fond optionnelle de l'option (hex #RRGGBB). Alimentee par le
+    // referentiel sites (couleur d'identification du site, affichee sur les tags
+    // selectionnes du multiselect).
+    color?: string
+    // Couleur de texte optionnelle (hex). Sites : blanc, pour rester lisible
+    // sur le fond colore du tag.
+    textColor?: string
 }
 
 /** Membre Hydra minimal commun aux referentiels consommes ici. */
@@ -23,6 +30,7 @@ interface HydraMember {
     '@id': string
     name?: string
     label?: string
+    color?: string
 }
 
 const LD_JSON_HEADERS = { Accept: 'application/ld+json' }
@@ -35,13 +43,19 @@ async function fetchOptions(
     url: string,
     query: Record<string, string | string[]>,
     toLabel: (member: HydraMember) => string,
+    toColor?: (member: HydraMember) => string | undefined,
 ): Promise<RefOption[]> {
     const res = await useApi().get<{ member?: HydraMember[] }>(
         url,
         { pagination: 'false', ...query },
         { headers: LD_JSON_HEADERS, toast: false },
     )
-    return (res.member ?? []).map(m => ({ value: m['@id'], label: toLabel(m) }))
+    return (res.member ?? []).map(m => ({
+        value: m['@id'],
+        label: toLabel(m),
+        // Couleur reportee uniquement si un extracteur est fourni (ex: sites).
+        ...(toColor ? { color: toColor(m) } : {}),
+    }))
 }
 
 /** Sites de disponibilite (libelle = nom du site). */
@@ -49,7 +63,9 @@ export function useSiteOptions() {
     const options = ref<RefOption[]>([])
 
     async function load(): Promise<void> {
-        options.value = await fetchOptions('/sites', {}, s => s.name ?? '')
+        // Sites : couleur de fond depuis l'embed + texte blanc pour rester lisible.
+        const sites = await fetchOptions('/sites', {}, s => s.name ?? '', s => s.color)
+        options.value = sites.map(o => ({ ...o, textColor: '#FFFFFF' }))
     }
 
     return { options, load }

frontend/modules/catalog/pages/admin/products/[id]/edit.vue

@@ -25,6 +25,7 @@
                 <MalioSelectCheckbox
                     :model-value="form.states"
                     :options="stateOptions"
+                    :max-tags="3"
                     :label="t('admin.products.form.states')"
                     :display-tag="true"
                     :required="true"
@@ -71,6 +72,7 @@
                 <MalioSelectCheckbox
                     :model-value="form.storageTypeIris"
                     :options="storageTypeOptions"
+                    :max-tags="3"
                     :label="t('admin.products.form.storageTypes')"
                     :display-tag="true"
                     :required="true"

frontend/modules/catalog/pages/admin/products/new.vue

@@ -21,6 +21,7 @@
             <MalioSelectCheckbox
                 :model-value="form.states"
                 :options="stateOptions"
+                :max-tags="3"
                 :label="t('admin.products.form.states')"
                 :display-tag="true"
                 :required="true"
@@ -66,6 +67,7 @@
             <MalioSelectCheckbox
                 :model-value="form.storageTypeIris"
                 :options="storageTypeOptions"
+                :max-tags="3"
                 :label="t('admin.products.form.storageTypes')"
                 :display-tag="true"
                 :required="true"

frontend/modules/commercial/components/ClientAddressBlock.vue

@@ -53,6 +53,7 @@
                 v-if="!hideEmpty || isFilled(model.contactIris)"
                 :model-value="model.contactIris"
                 :options="contactOptions"
+                :max-tags="3"
                 :label="t('commercial.clients.form.address.contacts')"
                 :display-tag="true"
                 :readonly="readonly"
@@ -97,6 +98,7 @@
             <MalioSelectCheckbox
                 :model-value="model.categoryIris"
                 :options="categoryOptions"
+                :max-tags="3"
                 :label="t('commercial.clients.form.address.categories')"
                 :display-tag="true"
                 :readonly="readonly"

frontend/modules/commercial/components/SupplierAddressBlock.vue

@@ -51,6 +51,7 @@
                 v-if="!hideEmpty || isFilled(model.contactIris)"
                 :model-value="model.contactIris"
                 :options="contactOptions"
+                :max-tags="3"
                 :label="t('commercial.suppliers.form.address.contacts')"
                 :display-tag="true"
                 :readonly="readonly"
@@ -67,6 +68,7 @@
             <MalioSelectCheckbox
                 :model-value="model.categoryIris"
                 :options="categoryOptions"
+                :max-tags="3"
                 :label="t('commercial.suppliers.form.address.categories')"
                 :display-tag="true"
                 :readonly="readonly"

frontend/modules/commercial/composables/__tests__/useClientReferentials.spec.ts

@@ -45,7 +45,7 @@ describe('useClientReferentials.loadCommon (resilience ERP-102)', () => {
 
         // Resilience : les referentiels OK sont peuples malgre l'echec de /categories.
         // Le libelle d'un site est son numero de departement (2 premiers chiffres du code postal).
-        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: '86' }])
+        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: '86', textColor: '#FFFFFF' }])
         expect(refs.tvaModes.value).toEqual([{ value: '/api/x/1', label: 'Libelle X' }])
         expect(refs.banks.value).toEqual([{ value: '/api/x/1', label: 'Libelle X' }])
         // Pays : value = nom du pays (et non l'IRI).
@@ -63,7 +63,7 @@ describe('useClientReferentials.loadCommon (resilience ERP-102)', () => {
                 })
             }
             if (url === '/sites') {
-                return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault', postalCode: '86100' }] })
+                return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault', postalCode: '86100', color: '#FF0000' }] })
             }
             return Promise.resolve({ member: [] })
         })
@@ -74,8 +74,9 @@ describe('useClientReferentials.loadCommon (resilience ERP-102)', () => {
         expect(refs.categories.value).toEqual([
             { value: '/api/categories/1', label: 'Secteur', code: 'SECTEUR' },
         ])
-        // Le libelle d'un site est son numero de departement (2 premiers chiffres du code postal).
+        // Le libelle d'un site est son numero de departement (2 premiers chiffres du
-        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: '86' }])
+        // code postal) ; la couleur du site est reportee (fond) avec un texte blanc.
+        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: '86', color: '#FF0000', textColor: '#FFFFFF' }])
     })
 
     it('separe les categories CLIENT (formulaire) des categories ADRESSE (blocs adresse)', async () => {

frontend/modules/commercial/composables/useClientReferentials.ts

@@ -19,6 +19,13 @@ import { ref } from 'vue'
 export interface RefOption {
     value: string
     label: string
+    // Couleur de fond optionnelle de l'option (hex #RRGGBB). Aujourd'hui
+    // alimentee par le referentiel sites (couleur d'identification du site,
+    // affichee sur les tags selectionnes du multiselect).
+    color?: string
+    // Couleur de texte optionnelle (hex). Sites : blanc, pour rester lisible
+    // sur le fond colore du tag.
+    textColor?: string
 }
 
 /** Option de type de reglement enrichie de son code stable (RG-1.12 / RG-1.13). */
@@ -46,6 +53,7 @@ interface CategoryMember extends HydraMember {
 interface SiteMember extends HydraMember {
     name: string
     postalCode: string
+    color?: string
 }
 
 interface ReferentialMember extends HydraMember {
@@ -119,7 +127,7 @@ export function useClientReferentials() {
                 // Libelle = numero de departement (2 premiers chiffres du code
                 // postal du site), ex: 86100 -> « 86 ». Le code postal est deja
                 // expose par /sites (groupe site:read) — aucune colonne a ajouter.
-                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: (s.postalCode ?? '').slice(0, 2) })) }),
+                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: (s.postalCode ?? '').slice(0, 2), color: s.color, textColor: '#FFFFFF' })) }),
             fetchAll<ReferentialMember>('/tva_modes')
                 .then((tva) => { tvaModes.value = tva.map(t => ({ value: t['@id'], label: t.label })) }),
             fetchAll<ReferentialMember>('/payment_delays')

frontend/modules/commercial/composables/useSupplierReferentials.ts

@@ -20,6 +20,13 @@ import { ref } from 'vue'
 export interface RefOption {
     value: string
     label: string
+    // Couleur de fond optionnelle de l'option (hex #RRGGBB). Alimentee par le
+    // referentiel sites (couleur d'identification du site, affichee sur les tags
+    // selectionnes du multiselect).
+    color?: string
+    // Couleur de texte optionnelle (hex). Sites : blanc, pour rester lisible
+    // sur le fond colore du tag.
+    textColor?: string
 }
 
 /** Option de type de reglement enrichie de son code stable (RG-2.07 / RG-2.08). */
@@ -44,6 +51,7 @@ interface CategoryMember extends HydraMember {
 interface SiteMember extends HydraMember {
     name: string
     postalCode: string
+    color?: string
 }
 
 interface ReferentialMember extends HydraMember {
@@ -106,7 +114,7 @@ export function useSupplierReferentials() {
             fetchAll<SiteMember>('/sites')
                 // Libelle = numero de departement (2 premiers chiffres du code
                 // postal du site), ex: 86100 -> « 86 ».
-                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: (s.postalCode ?? '').slice(0, 2) })) }),
+                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: (s.postalCode ?? '').slice(0, 2), color: s.color, textColor: '#FFFFFF' })) }),
             fetchAll<ReferentialMember>('/tva_modes')
                 .then((tva) => { tvaModes.value = tva.map(t => ({ value: t['@id'], label: t.label })) }),
             fetchAll<ReferentialMember>('/payment_delays')

frontend/modules/commercial/pages/clients/[id]/edit.vue

@@ -35,6 +35,7 @@
                 <MalioSelectCheckbox
                     :model-value="main.categoryIris"
                     :options="mainCategoryOptions"
+                    :max-tags="3"
                     :label="t('commercial.clients.form.main.categories')"
                     :display-tag="true"
                     :disabled="businessReadonly"

frontend/modules/commercial/pages/clients/[id]/index.vue

@@ -58,6 +58,7 @@
                     v-if="isFilled(categoryIris)"
                     :model-value="categoryIris"
                     :options="mainCategoryOptions"
+                    :max-tags="3"
                     :label="t('commercial.clients.form.main.categories')"
                     :display-tag="true"
                     disabled

frontend/modules/commercial/pages/clients/new.vue

@@ -29,6 +29,7 @@
             <MalioSelectCheckbox
                 :model-value="main.categoryIris"
                 :options="referentials.categories.value"
+                :max-tags="3"
                 :label="t('commercial.clients.form.main.categories')"
                 :display-tag="true"
                 :disabled="mainLocked"

frontend/modules/commercial/pages/suppliers/[id]/edit.vue

@@ -34,6 +34,7 @@
                 <MalioSelectCheckbox
                     :model-value="main.categoryIris"
                     :options="mainCategoryOptions"
+                    :max-tags="3"
                     :label="t('commercial.suppliers.form.main.categories')"
                     :display-tag="true"
                     :disabled="businessReadonly"

frontend/modules/commercial/pages/suppliers/[id]/index.vue

@@ -58,6 +58,7 @@
                     v-if="isFilled(categoryIris)"
                     :model-value="categoryIris"
                     :options="mainCategoryOptions"
+                    :max-tags="3"
                     :label="t('commercial.suppliers.form.main.categories')"
                     :display-tag="true"
                     disabled

frontend/modules/commercial/pages/suppliers/new.vue

@@ -29,6 +29,7 @@
             <MalioSelectCheckbox
                 :model-value="main.categoryIris"
                 :options="referentials.categories.value"
+                :max-tags="3"
                 :label="t('commercial.suppliers.form.main.categories')"
                 :display-tag="true"
                 :disabled="mainLocked"

frontend/modules/commercial/utils/forms/__tests__/clientConsultation.spec.ts

@@ -168,9 +168,9 @@ describe('options construites depuis l\'embed (role-independantes)', () => {
         ])
     })
 
-    it('siteOptionsOf expose value=IRI, label=nom', () => {
+    it('siteOptionsOf expose value=IRI, label=nom, color, textColor', () => {
         expect(siteOptionsOf([{ '@id': '/api/sites/4', name: 'Chatellerault', color: '#000' }])).toEqual([
-            { value: '/api/sites/4', label: 'Chatellerault' },
+            { value: '/api/sites/4', label: 'Chatellerault', color: '#000', textColor: '#FFFFFF' },
         ])
     })
 
@@ -201,7 +201,7 @@ describe('options construites depuis l\'embed (role-independantes)', () => {
             categories: [{ '@id': '/api/categories/3', name: 'Secteur', code: 'SECTEUR' }],
         })
         expect(view.draft.id).toBe(18)
-        expect(view.siteOptions).toEqual([{ value: '/api/sites/4', label: 'Chatellerault' }])
+        expect(view.siteOptions).toEqual([{ value: '/api/sites/4', label: 'Chatellerault', textColor: '#FFFFFF' }])
         expect(view.categoryOptions).toEqual([{ value: '/api/categories/3', label: 'Secteur', code: 'SECTEUR' }])
     })
 })

frontend/modules/commercial/utils/forms/__tests__/supplierConsultation.spec.ts

@@ -155,9 +155,9 @@ describe('options construites depuis l\'embed (role-independantes)', () => {
         ])
     })
 
-    it('siteOptionsOf expose value=IRI, label=nom', () => {
+    it('siteOptionsOf expose value=IRI, label=nom, color, textColor', () => {
         expect(siteOptionsOf([{ '@id': '/api/sites/87', name: 'Chatellerault', color: '#000' }])).toEqual([
-            { value: '/api/sites/87', label: 'Chatellerault' },
+            { value: '/api/sites/87', label: 'Chatellerault', color: '#000', textColor: '#FFFFFF' },
         ])
     })
 
@@ -190,7 +190,7 @@ describe('options construites depuis l\'embed (role-independantes)', () => {
         })
         expect(view.draft.id).toBe(33)
         expect(view.draft.addressType).toBe('RENDU')
-        expect(view.siteOptions).toEqual([{ value: '/api/sites/87', label: 'Chatellerault' }])
+        expect(view.siteOptions).toEqual([{ value: '/api/sites/87', label: 'Chatellerault', textColor: '#FFFFFF' }])
         expect(view.categoryOptions).toEqual([{ value: '/api/categories/2279', label: 'Negociant', code: 'NEGOCIANT' }])
     })
 })

frontend/modules/commercial/utils/forms/clientConsultation.ts

@@ -143,6 +143,12 @@ export interface ClientRelation {
 export interface SelectOption {
     value: string
     label: string
+    // Couleur de fond optionnelle (hex #RRGGBB), reportee pour les sites afin
+    // de colorer les tags selectionnes en consultation comme en edition.
+    color?: string
+    // Couleur de texte optionnelle (hex). Sites : blanc, pour rester lisible
+    // sur le fond colore du tag.
+    textColor?: string
 }
 
 /** Option de categorie enrichie de son code (compatible CategoryOption des blocs). */
@@ -266,7 +272,7 @@ export function categoryOptionsOf(categories: CategoryRead[] | undefined): Categ
 
 /** Options de sites (value=IRI, label=nom) construites depuis l'embed d'une adresse. */
 export function siteOptionsOf(sites: SiteRead[] | undefined): SelectOption[] {
-    return (sites ?? []).map(s => ({ value: s['@id'], label: s.name ?? s['@id'] }))
+    return (sites ?? []).map(s => ({ value: s['@id'], label: s.name ?? s['@id'], color: s.color, textColor: '#FFFFFF' }))
 }
 
 /** Options de contacts (value=IRI, label=nom complet ou email) depuis l'embed client. */

frontend/modules/commercial/utils/forms/supplierConsultation.ts

@@ -138,6 +138,12 @@ export interface AccountingDraft {
 export interface SelectOption {
     value: string
     label: string
+    // Couleur de fond optionnelle (hex #RRGGBB), reportee pour les sites afin
+    // de colorer les tags selectionnes en consultation comme en edition.
+    color?: string
+    // Couleur de texte optionnelle (hex). Sites : blanc, pour rester lisible
+    // sur le fond colore du tag.
+    textColor?: string
 }
 
 /** Option de categorie enrichie de son code (compatible CategoryOption des blocs). */
@@ -241,7 +247,7 @@ export function categoryOptionsOf(categories: CategoryRead[] | undefined): Categ
 
 /** Options de sites (value=IRI, label=nom) construites depuis l'embed d'une adresse. */
 export function siteOptionsOf(sites: SiteRead[] | undefined): SelectOption[] {
-    return (sites ?? []).map(s => ({ value: s['@id'], label: s.name ?? s['@id'] }))
+    return (sites ?? []).map(s => ({ value: s['@id'], label: s.name ?? s['@id'], color: s.color, textColor: '#FFFFFF' }))
 }
 
 /** Options de contacts (value=IRI, label=nom complet ou email) depuis l'embed fournisseur. */

frontend/modules/technique/components/ProviderAddressBlock.vue

@@ -37,6 +37,7 @@
                 v-if="!hideEmpty || isFilled(model.contactIris)"
                 :model-value="model.contactIris"
                 :options="contactOptions"
+                :max-tags="3"
                 :label="t('technique.providers.form.address.contacts')"
                 :display-tag="true"
                 :readonly="readonly"

frontend/modules/technique/composables/useProviderReferentials.ts

@@ -26,6 +26,13 @@ import { ref } from 'vue'
 export interface RefOption {
     value: string
     label: string
+    // Couleur de fond optionnelle de l'option (hex #RRGGBB). Alimentee par le
+    // referentiel sites (couleur d'identification du site, affichee sur les tags
+    // selectionnes du multiselect).
+    color?: string
+    // Couleur de texte optionnelle (hex). Sites : blanc, pour rester lisible
+    // sur le fond colore du tag.
+    textColor?: string
 }
 
 /** Option de type de reglement enrichie de son code stable (RG-3.07 / RG-3.08). */
@@ -50,6 +57,7 @@ interface CategoryMember extends HydraMember {
 interface SiteMember extends HydraMember {
     name: string
     postalCode: string
+    color?: string
 }
 
 interface CountryMember extends HydraMember {
@@ -94,7 +102,7 @@ export function useProviderReferentials() {
             // Sites (RG-3.03) : libelle = numero de departement (2 premiers chiffres
             // du code postal du site), ex: 86100 -> « 86 », 17400 -> « 17 ».
             fetchAll<SiteMember>('/sites')
-                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: (s.postalCode ?? '').slice(0, 2) })) }),
+                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: (s.postalCode ?? '').slice(0, 2), color: s.color, textColor: '#FFFFFF' })) }),
             // Pays (ERP-116) : la valeur d'option est le NOM du pays (l'adresse stocke
             // `country` en chaine libre, « France »...). value === label. Aligne sur
             // les ecrans client/fournisseur. Sert le select Pays de l'onglet Adresse.

frontend/modules/technique/pages/providers/[id]/edit.vue

@@ -31,6 +31,7 @@
                 <MalioSelectCheckbox
                     :model-value="main.categoryIris"
                     :options="referentials.categories.value"
+                    :max-tags="3"
                     :label="t('technique.providers.form.main.categories')"
                     :display-tag="true"
                     :disabled="businessReadonly"

frontend/modules/technique/pages/providers/[id]/index.vue

@@ -57,6 +57,7 @@
                     v-if="isFilled(mainCategoryIris)"
                     :model-value="mainCategoryIris"
                     :options="mainCategoryOptions"
+                    :max-tags="3"
                     :label="t('technique.providers.form.main.categories')"
                     :display-tag="true"
                     disabled

frontend/modules/technique/pages/providers/new.vue

@@ -30,6 +30,7 @@
             <MalioSelectCheckbox
                 :model-value="main.categoryIris"
                 :options="referentials.categories.value"
+                :max-tags="3"
                 :label="t('technique.providers.form.main.categories')"
                 :display-tag="true"
                 :disabled="mainLocked"

frontend/modules/technique/utils/forms/__tests__/providerDetail.spec.ts

@@ -122,8 +122,8 @@ describe('providerDetail helpers', () => {
         it('categoryOptionsOf / siteOptionsOf / contactOptionsOf', () => {
             expect(categoryOptionsOf([{ '@id': '/api/categories/7', name: 'Maintenance', code: 'MAINT' }]))
                 .toEqual([{ value: '/api/categories/7', label: 'Maintenance' }])
-            expect(siteOptionsOf([{ '@id': '/api/sites/1', name: 'Châtellerault' }]))
+            expect(siteOptionsOf([{ '@id': '/api/sites/1', name: 'Châtellerault', color: '#000' }]))
-                .toEqual([{ value: '/api/sites/1', label: 'Châtellerault' }])
+                .toEqual([{ value: '/api/sites/1', label: 'Châtellerault', color: '#000', textColor: '#FFFFFF' }])
             expect(contactOptionsOf([{ '@id': '/api/provider_contacts/5', id: 5, firstName: 'Jean', lastName: 'Dupont' }]))
                 .toEqual([{ value: '/api/provider_contacts/5', label: 'Jean Dupont' }])
         })

frontend/modules/technique/utils/forms/providerDetail.ts

@@ -187,7 +187,7 @@ export function categoryOptionsOf(categories: CategoryRead[] | undefined): RefOp
 
 /** Options de sites (value=IRI, label=nom) construites depuis un embed. */
 export function siteOptionsOf(sites: SiteRead[] | undefined): RefOption[] {
-    return (sites ?? []).map(s => ({ value: s['@id'], label: s.name ?? s['@id'] }))
+    return (sites ?? []).map(s => ({ value: s['@id'], label: s.name ?? s['@id'], color: s.color, textColor: '#FFFFFF' }))
 }
 
 /** Options de contacts (value=IRI, label=nom complet ou email) depuis l'embed prestataire. */

frontend/package-lock.json

@@ -7,7 +7,7 @@
       "name": "starseed-frontend",
       "hasInstallScript": true,
       "dependencies": {
-        "@malio/layer-ui": "^1.7.15",
+        "@malio/layer-ui": "^1.7.18",
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/i18n": "^10.2.3",
         "@nuxtjs/tailwindcss": "^6.14.0",
@@ -85,6 +85,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -582,27 +583,6 @@
       "integrity": "sha512-/B8YJGPzaYq1NbsQmwgP8EZqg40NpTw4ZB3suuI0TplbxKHeK94jeaawLmVhCv+YwUnOpiWEz9U6SeThku/8JQ==",
       "license": "MIT"
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
-      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.2",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
-      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
@@ -1303,6 +1283,7 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
       "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@floating-ui/core": "^1.7.5",
         "@floating-ui/utils": "^0.2.11"
@@ -1866,9 +1847,9 @@
       "license": "MIT"
     },
     "node_modules/@malio/layer-ui": {
-      "version": "1.7.15",
+      "version": "1.7.18",
-      "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.15/layer-ui-1.7.15.tgz",
+      "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.18/layer-ui-1.7.18.tgz",
-      "integrity": "sha512-CgEC0l2pkR6rlzpi1zZqswHs+/yGTSd861tdT678/wSKtQPQ6JxUIf63ugFDItyvyLW+nbcNWuHTFC2Bimp1EQ==",
+      "integrity": "sha512-A+YcnEzzucsAz0FqkhVmN41uvtEHjy4ZbbHK8POjqNCkhuy7aTnisMUiYGlZUaEcu5lRjzw6RvjAavRTGzTNvQ==",
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/tailwindcss": "^6.14.0",
@@ -2221,6 +2202,7 @@
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.4.2.tgz",
       "integrity": "sha512-5+IPRNX2CjkBhuWUwz0hBuLqiaJPRoKzQ+SvcdrQDbAyE+VDeFt74VpSFr5/R0ujrK4b+XnSHUJWdS72w6hsog==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "c12": "^3.3.3",
         "consola": "^3.4.2",
@@ -2323,6 +2305,7 @@
       "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-4.4.2.tgz",
       "integrity": "sha512-/q6C7Qhiricgi+PKR7ovBnJlKTL0memCbA1CzRT+itCW/oeYzUfeMdQ35mGntlBoyRPNrMXbzuSUhfDbSCU57w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/shared": "^3.5.30",
         "defu": "^6.1.4",
@@ -4638,6 +4621,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.23.2.tgz",
       "integrity": "sha512-yjv2N7gaQMbIVfsSZHBMscLoybgetcTraXsSMrELAerl/jfRipg5S1dBXMFvgRy8Kh48+TGoH+5nqshxdOEGoQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -4886,6 +4870,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.23.2.tgz",
       "integrity": "sha512-tRbbjpOPrY4ApIHtn3ctnKIhkkioewMsZa5gJzqVB47LJFNyzLXLo/aID4sJRKTIMi1wd1fA9TiBKPe6KqczPA==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -4991,6 +4976,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-3.23.2.tgz",
       "integrity": "sha512-K2o1gMwn09nrd5ewftSy08U6LMC1cW3Cmml5+vHT9P/VeMtYwkbNg+9Mt1uFh7VfAZmlkj8d3u7RYqfl8xMVJA==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -5017,6 +5003,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.23.2.tgz",
       "integrity": "sha512-kRHQ3nSbAfkFdxj9FtDdr4hpREndGgWFA6ZEAwlLeGUxf8QYTpuF9zb2yxdBPBlTc5+JsbPcskNt+u1PazGKYw==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
@@ -5031,6 +5018,7 @@
       "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.23.2.tgz",
       "integrity": "sha512-1kvsBqGNu2ZJ0P/lkxN0pAMqSyUcpkMIzE4xwGUIyAiD0pZV6dr+OCMwGWOTLllSyrn91xI5K7OLk3pYeCPKqA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "prosemirror-changeset": "^2.3.0",
         "prosemirror-commands": "^1.6.2",
@@ -5174,6 +5162,7 @@
       "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.19.0"
       }
@@ -5236,6 +5225,7 @@
       "integrity": "sha512-/Zb/xaIDfxeJnvishjGdcR4jmr7S+bda8PKNhRGdljDM+elXhlvN0FyPSsMnLmJUrVG9aPO6dof80wjMawsASg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.58.2",
         "@typescript-eslint/types": "8.58.2",
@@ -6015,6 +6005,7 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.32.tgz",
       "integrity": "sha512-8UYUYo71cP/0YHMO814TRZlPuUUw3oifHuMR7Wp9SNoRSrxRQnhMLNlCeaODNn6kNTJsjFoQ/kqIj4qGvya4Xg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.29.2",
         "@vue/compiler-core": "3.5.32",
@@ -6258,6 +6249,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6645,6 +6637,7 @@
       "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.8.2.tgz",
       "integrity": "sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "peerDependencies": {
         "bare-abort-controller": "*"
       },
@@ -6842,6 +6835,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -6956,6 +6950,7 @@
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
       "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -7150,7 +7145,8 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/citty/-/citty-0.2.2.tgz",
       "integrity": "sha512-+6vJA3L98yv+IdfKGZHBNiGW5KHn22e/JwID0Strsz8h4S/csAu/OuICwxrg44k5MRiZHWIo8XXuJgQTriRP4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/clean-regexp": {
       "version": "1.0.0",
@@ -8203,6 +8199,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -9361,6 +9358,7 @@
       "integrity": "sha512-GZZ9mKe8r646NUAf/zemnGbjYh4Bt8/MqASJY+pSm5ZDtc3YQox+4gsLI7yi1hba6o+eCsGxpHn5+iEVn31/FQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": ">=20.0.0",
         "@types/whatwg-mimetype": "^3.0.2",
@@ -11807,6 +11805,7 @@
       "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-4.4.2.tgz",
       "integrity": "sha512-iWVFpr/YEqVU/CenqIHMnIkvb2HE/9f+q8oxZ+pj2et+60NljGRClCgnmbvGPdmNFE0F1bEhoBCYfqbDOCim3Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dxup/nuxt": "^0.4.0",
         "@nuxt/cli": "^3.34.0",
@@ -12865,6 +12864,7 @@
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -12922,6 +12922,7 @@
       "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.112.0.tgz",
       "integrity": "sha512-7rQ3QdJwobMQLMZwQaPuPYMEF2fDRZwf51lZ//V+bA37nejjKW5ifMHbbCwvA889Y4RLhT+/wLJpPRhAoBaZYw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/types": "^0.112.0"
       },
@@ -13188,6 +13189,7 @@
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
       "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/devtools-api": "^7.7.7"
       },
@@ -13313,6 +13315,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -13856,6 +13859,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
       "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -14646,6 +14650,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
       "integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -15549,6 +15554,7 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
       "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -16228,6 +16234,7 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "napi-postinstall": "^0.3.0"
       },
@@ -16494,6 +16501,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
       "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -17412,6 +17420,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.32.tgz",
       "integrity": "sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.32",
         "@vue/compiler-sfc": "3.5.32",
@@ -17456,6 +17465,7 @@
       "integrity": "sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "debug": "^4.4.0",
         "eslint-scope": "^8.2.0 || ^9.0.0",
@@ -17492,6 +17502,7 @@
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.3.1.tgz",
       "integrity": "sha512-azq8fhVnCwJAw0iXW7i44h9P+Bj+snNuevBAaJ9bxn0I3YVsRU3deVFPNnTfZ2uxVJefGp83JUmL68ddCPw5Pw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@intlify/core-base": "11.3.1",
         "@intlify/devtools-types": "11.3.1",

frontend/package.json

@@ -17,7 +17,7 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@malio/layer-ui": "^1.7.15",
+    "@malio/layer-ui": "^1.7.18",
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/i18n": "^10.2.3",
     "@nuxtjs/tailwindcss": "^6.14.0",