@cnamts/synapse 0.0.8-alpha → 0.0.9-alpha

package/src/components/ContextualMenu/Accessibilite.stories.ts

@@ -0,0 +1,191 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Navigation/ContextualMenu/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ i.subtitle}}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div>
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ i.precision }}
+													</p>
+													<div v-for="(value, index) in i.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="{{i.link}}" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ value.info1 }}</p>
+														<p>{{ value.info2 }}</p>
+														<p>{{ value.info3 }}</p>
+														<p>{{ value.info4 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+										<v-expansion-panel >
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+						<v-expansion-panels v-if="AccessibiliteItemsValidated.length > 0" value="opened" multiple>
+							<v-expansion-panel 
+								v-for="(item, index) in AccessibiliteItemsValidated"
+								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+										<v-expansion-panel>
+											<v-expansion-panel-title style="font-weight: bold;font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+						<div v-else style="display: flex;justify-content: center;"><span style="text-align:center;"  >Pas de critère d'accessibilité bloquant</span></div>
+					</v-col>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/ContextualMenu/AccessibiliteItems.ts

@@ -0,0 +1,89 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.1 Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+		items: [
+			{
+				precision: '3.1.2 Pour chaque indication de couleur donnée par un texte, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.1.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 6 : Liens',
+		subtitle: ' 6.1 Chaque lien est-il explicite',
+		items: [
+			{
+
+				precision: ' 6.1.5 Pour chaque lien ayant un intitulé visible, le nom accessible du lien contient-il au moins l’intitulé visible (hors cas particuliers) ? '
+					+ 'L’intitulé de lien seul permet d’en comprendre la fonction et la destination ; '
+					+ 'L’intitulé de lien additionné au contexte du lien permet d’en comprendre la fonction et la destination.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#6.1.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les liens autres que SVG dont le contenu est fourni à la fois par un intitulé visible et par le contenu soit d’un attribut title ou d’un attribut aria-label ou d’un attribut aria-labelledby ; ',
+					info2: '2. Pour chaque lien, vérifier que le contenu de l’attribut title ou de l’attribut aria-label ou de l’attribut aria-labelledby contient l’intitulé visible ; ',
+					info3: '3. Si c’est le cas pour chaque lien, le test est validé pour les liens autres que SVG. ',
+					info4: '4. Retrouver dans le document les liens SVG dont le contenu est fourni à la fois par un intitulé visible et par le contenu soit d’un attribut aria-labelledby, ou d’un attribut aria-label ou d’un élément title (enfant direct de l’élément <svg>) ou d’un attribut x-link:title (SVG 1.1) ou d’un ou plusieurs éléments <text>; ',
+					info5: '5. Pour chaque lien SVG, vérifier que le contenu de l’attribut aria-labelledby ou de l’attribut aria-label ou de l’élément <title> ou de l’attribut x-link:title ou d’un ou plusieurs éléments <text> contient l’intitulé visible ; ',
+					info6: '6. Si c’est le cas pour chaque lien SVG, le test est validé pour les liens SVG. ',
+					info7: '7. Si le test est validé à la fois pour les liens non SVG et pour les liens SVG, le test est globalement validé. ',
+
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+		items: [
+			{
+				precision: '3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+		],
+	},
+	{
+		title: 'Catégorie 6 : Liens',
+		subtitle: '6.2 Dans chaque page web, chaque lien a-t-il un intitulé ? ',
+		items: [
+			{
+
+				precision: ' 6.2.1 Dans chaque page web, chaque lien a-t-il un intitulé entre <a> et </a> ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#6.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les liens quels qu’ils soient ; ',
+					info2: '2. Pour chaque lien, vérifier que le contenu de l’élément <a> (ou d’un élément pourvu d’un attribut WAI-ARIA role=link) contient un intitulé (texte ou alternative) ; ',
+					info3: '3. Si c’est le cas pour chaque lien, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+]

package/src/components/ContextualMenu/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/Customs/SySelect/SySelect.stories.ts

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
 import { ref } from 'vue'
-import SyAlert from '@/components/SyAlert/SyAlert.vue'
 
-const meta = {
+const meta: Meta<typeof SySelect> = {
 	title: 'Composants/Formulaires/SySelect',
 	component: SySelect,
 	parameters: {
@@ -64,7 +64,7 @@ export const Default: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="pa-4">
 					<SySelect
 						v-bind="args"
 					/>
@@ -119,7 +119,7 @@ export const Required: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="pa-4">
 					<SySelect
 						v-bind="args"
 						:required="args.required"
@@ -188,13 +188,13 @@ export const withCustomError: Story = {
 				return { args, errorMessages, triggerError }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="pa-4">
 					<SySelect
 						v-bind="args"
 						:error-messages="errorMessages"
 					/>
 				</div>
-				<div class="d-flex flex-wrap align-center px-4">
+				<div class="px-4">
 					<VBtn @click="triggerError">
 						Trigger Error
 					</VBtn>
@@ -247,7 +247,7 @@ export const withCustomKey: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="pa-4">
 					<SySelect
 						v-bind="args"
 						text-key="customKey"

package/src/components/Customs/SySelect/SySelect.vue

@@ -4,7 +4,7 @@
 
 	const props = defineProps({
 		modelValue: {
-			type: [Object, String],
+			type: [Object, String, Number],
 			default: null,
 		},
 		items: {
@@ -13,7 +13,7 @@
 		},
 		label: {
 			type: String,
-			default: 'Sélectionnez une option',
+			default: '',
 		},
 		errorMessages: {
 			type: [String, Array] as PropType<string | readonly string[]>,
@@ -23,6 +23,10 @@
 			type: Boolean,
 			default: false,
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 		menuId: {
 			type: String,
 			default: 'sy-select-menu',
@@ -44,7 +48,7 @@
 	const emit = defineEmits(['update:modelValue'])
 
 	const isOpen = ref(false)
-	const selectedItem = ref<Record<string, unknown > | string | null | undefined>(props.modelValue)
+	const selectedItem = ref<Record<string, unknown > | string | number | null | undefined>(props.modelValue)
 	const hasError = ref(false)
 
 	const labelWidth = ref(0)
@@ -131,7 +135,8 @@
 			color="primary"
 			tabindex="0"
 			readonly
-			:label="selectedItem ? label : ''"
+			:disabled="disabled"
+			:label="selectedItem ? label : 'Sélectionnez une option'"
 			:aria-label="selectedItem ? label : 'Sélectionnez une option'"
 			:error-messages="errorMessages"
 			:variant="outlined ? 'outlined' : 'underlined'"

package/src/components/Customs/SySelect/tests/SySelect.spec.ts

@@ -11,7 +11,7 @@ describe('SySelect.vue', () => {
 			},
 		})
 		expect(wrapper.exists()).toBe(true)
-		expect(wrapper.find('.sy-select').text()).toBe('')
+		expect(wrapper.find('.sy-select').exists()).toBe(true)
 	})
 
 	it('displays the selected item text', async () => {
@@ -84,7 +84,7 @@ describe('SySelect.vue', () => {
 		})
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 		const instance = wrapper.vm as any
-		expect(instance.selectedItemText).toBe('Sélectionnez une option')
+		expect(instance.selectedItemText).toBe('')
 	})
 
 	it('returns the correct text when selectedItem is an object', async () => {

package/src/components/Customs/SyTextField/SyTextField.stories.ts

@@ -37,6 +37,181 @@ const meta = {
 		color: {
 			control: 'select',
 			options: ['primary', 'secondary', 'success', 'error', 'warning'],
+			description: 'Couleur du champ',
+		},
+		density: {
+			control: 'select',
+			options: ['default', 'comfortable', 'compact'],
+			description: 'Densité du champ',
+		},
+		direction: {
+			control: 'select',
+			options: ['horizontal', 'vertical'],
+			description: 'Direction d\'affichage',
+		},
+		type: {
+			control: 'select',
+			options: ['text', 'number', 'password', 'email', 'tel', 'url', 'search', 'date', 'time', 'datetime-local'],
+			description: 'Type d\'input HTML',
+		},
+		baseColor: {
+			control: 'color',
+			description: 'Couleur de base personnalisée',
+		},
+		bgColor: {
+			control: 'color',
+			description: 'Couleur de fond personnalisée',
+		},
+		width: {
+			control: 'text',
+			description: 'Largeur du champ (px, %, vh, etc.)',
+		},
+		maxWidth: {
+			control: 'text',
+			description: 'Largeur maximale (px, %, vh, etc.)',
+		},
+		minWidth: {
+			control: 'text',
+			description: 'Largeur minimale (px, %, vh, etc.)',
+		},
+		rounded: {
+			control: 'select',
+			options: [true, false, 0, 'sm', 'lg', 'xl', 'pill'],
+			description: 'Style des coins arrondis',
+		},
+		required: {
+			control: 'boolean',
+			description: 'Champ obligatoire',
+		},
+		isReadOnly: {
+			control: 'boolean',
+			description: 'Mode lecture seule',
+		},
+		isDisabled: {
+			control: 'boolean',
+			description: 'Désactive le champ',
+		},
+		isClearable: {
+			control: 'boolean',
+			description: 'Affiche un bouton pour effacer',
+		},
+		isTiled: {
+			control: 'boolean',
+			description: 'Style tuile',
+		},
+		isFlat: {
+			control: 'boolean',
+			description: 'Sans élévation',
+		},
+		isActive: {
+			control: 'boolean',
+			description: 'Force l\'état actif',
+		},
+		isFocused: {
+			control: 'boolean',
+			description: 'Force l\'état focus',
+		},
+		isDirty: {
+			control: 'boolean',
+			description: 'Indique si modifié',
+		},
+		isOnError: {
+			control: 'boolean',
+			description: 'Force l\'état erreur',
+		},
+		displayAsterisk: {
+			control: 'boolean',
+			description: 'Affiche l\'astérisque requis',
+		},
+		displayPersistentClear: {
+			control: 'boolean',
+			description: 'Bouton effacer toujours visible',
+		},
+		displayPersistentCounter: {
+			control: 'boolean',
+			description: 'Compteur toujours visible',
+		},
+		displayPersistentHint: {
+			control: 'boolean',
+			description: 'Aide toujours visible',
+		},
+		displayPersistentPlaceholder: {
+			control: 'boolean',
+			description: 'Placeholder toujours visible',
+		},
+		areDetailsHidden: {
+			control: 'select',
+			options: [true, false, 'auto'],
+			description: 'Masque les détails',
+		},
+		areSpinButtonsHidden: {
+			control: 'boolean',
+			description: 'Masque les boutons number',
+		},
+		noIcon: {
+			control: 'boolean',
+			description: 'Masque toutes les icônes',
+		},
+		centerAffix: {
+			control: 'boolean',
+			description: 'Centre les affixes',
+		},
+		counter: {
+			control: 'select',
+			options: [true, false, 'words', 'characters'],
+			description: 'Type de compteur',
+		},
+		counterValue: {
+			control: 'number',
+			description: 'Valeur du compteur',
+		},
+		maxErrors: {
+			control: 'number',
+			description: 'Nombre max d\'erreurs',
+		},
+		errorMessages: {
+			control: 'object',
+			description: 'Messages d\'erreur',
+		},
+		messages: {
+			control: 'object',
+			description: 'Messages additionnels',
+		},
+		hint: {
+			control: 'text',
+			description: 'Message d\'aide',
+		},
+		placeholder: {
+			control: 'text',
+			description: 'Texte indicatif',
+		},
+		prefix: {
+			control: 'text',
+			description: 'Texte avant la valeur',
+		},
+		suffix: {
+			control: 'text',
+			description: 'Texte après la valeur',
+		},
+		id: {
+			control: 'text',
+			description: 'ID HTML',
+		},
+		name: {
+			control: 'text',
+			description: 'Nom du champ',
+		},
+		role: {
+			control: 'text',
+			description: 'Rôle ARIA',
+		},
+		theme: {
+			control: 'text',
+			description: 'Thème personnalisé',
+		},
+		loading: {
+			control: 'boolean',
+			description: 'État de chargement',
 		},
 	},
 } as Meta<typeof SyTextField>
@@ -71,16 +246,18 @@ export const Default: Story = {
 		color: 'primary',
 		isClearable: true,
 		label: 'Label',
+		modelValue: '',
 	},
 	render: (args) => {
 		return {
 			components: { SyTextField, VIcon },
 			setup() {
-				return { args }
+				const value = ref('')
+				return { args, value }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<SyTextField v-bind="args" />
+					<SyTextField v-bind="args" v-model="value" />
 				</div>
 			`,
 		}
@@ -118,6 +295,7 @@ export const Required: Story = {
 		isClearable: true,
 		label: 'Label',
 		required: true,
+		modelValue: '',
 	},
 	render: (args) => {
 		return {
@@ -174,6 +352,7 @@ export const WithCustomError: Story = {
 		isClearable: true,
 		label: 'Label',
 		required: false,
+		modelValue: '',
 	},
 	render: (args) => {
 		return {
@@ -229,6 +408,7 @@ export const SlotPrepend: Story = {
 		label: 'Label',
 		color: 'primary',
 		prependIcon: 'info',
+		modelValue: '',
 	},
 	render: (args) => {
 		return {
@@ -280,6 +460,7 @@ export const SlotAppend: Story = {
 		label: 'champs de text',
 		color: 'primary',
 		appendIcon: 'success',
+		modelValue: '',
 	},
 	render: (args) => {
 		return {
@@ -330,6 +511,7 @@ export const SlotPrependInner: Story = {
 		label: 'Label',
 		color: 'primary',
 		prependInnerIcon: 'info',
+		modelValue: '',
 	},
 	render: (args) => {
 		return {
@@ -381,6 +563,7 @@ export const SlotPrependInnerDivider: Story = {
 		label: 'Label',
 		color: 'primary',
 		prependInnerIcon: 'info',
+		modelValue: '',
 	},
 	render: (args) => {
 		return {
@@ -432,6 +615,7 @@ export const SlotAppendInner: Story = {
 		label: 'Label',
 		color: 'primary',
 		appendInnerIcon: 'success',
+		modelValue: '',
 	},
 	render: (args) => {
 		return {
@@ -487,6 +671,7 @@ export const SlotCustomIcon: Story = {
 		showDivider: false,
 		label: 'Label',
 		color: 'primary',
+		modelValue: '',
 	},
 	render: (args) => {
 		return {