@cnamts/synapse 0.0.5-alpha → 0.0.6-alpha

package/src/components/Customs/SyInputSelect/SyInputSelect.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-	import { mdiChevronDown } from '@mdi/js'
+	import { mdiChevronDown, mdiInformation } from '@mdi/js'
 	import { computed, onMounted, ref, watch } from 'vue'
-	import { VIcon, VList, VListItem, VListItemTitle } from 'vuetify/components'
-
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import defaultOptions from './config'
 
@@ -22,7 +20,7 @@
 		textKey: 'text',
 		valueKey: 'value',
 		label: 'Sélectionnez une option',
-		outlined: false,
+		outlined: true,
 		required: false,
 		errorMessages: () => [],
 		isHeaderToolbar: false,
@@ -34,6 +32,7 @@
 
 	const isOpen = ref(false)
 	const selectedItem = ref<Record<string, unknown> | string | null>(props.modelValue)
+	const hasError = ref(false)
 
 	const toggleMenu = () => {
 		isOpen.value = !isOpen.value
@@ -43,6 +42,10 @@
 		isOpen.value = false
 	}
 
+	const isRequired = computed(() => {
+		return (props.required || props.errorMessages.length > 0) && !selectedItem.value
+	})
+
 	const inputId = ref(`sy-input-select-${Math.random().toString(36).substring(7)}`)
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -69,8 +72,18 @@
 		selectedItem.value = newValue
 	})
 
+	watch([isOpen, hasError], ([newIsOpen, newHasError]) => {
+		if (!newIsOpen) {
+			hasError.value = (!selectedItem.value && isRequired.value) || props.errorMessages.length > 0
+		}
+		else {
+			hasError.value = newHasError
+		}
+	})
+
 	watch(() => props.errorMessages, (newValue) => {
 		localErrorMessages.value = newValue
+		hasError.value = newValue.length > 0
 	})
 
 	const menu = ref<HTMLElement | null>(null)
@@ -88,6 +101,9 @@
 	})
 
 	const buttonClass = computed(() => {
+		if (props.outlined && hasError.value) {
+			return 'v-btn v-btn--density-default v-btn--size-default v-btn--variant-outlined error text-error'
+		}
 		return props.outlined ? 'v-btn v-btn--density-default v-btn--size-default v-btn--variant-outlined' : 'text-color'
 	})
 
@@ -144,6 +160,13 @@
 			@keydown.space.prevent="toggleMenu"
 		>
 			<span>{{ selectedItemText }}</span>
+			<VIcon
+				v-if="hasError"
+				class="ml-2"
+				color="error"
+			>
+				{{ mdiInformation }}
+			</VIcon>
 			<VIcon> {{ mdiChevronDown }}</VIcon>
 		</div>
 		<VList
@@ -179,6 +202,11 @@
 <style lang="scss" scoped>
 @use '@/assets/tokens.scss';
 
+.sy-input-select {
+  text-transform: none !important;
+  font-size: 16px;
+}
+
 .v-input {
   cursor: pointer;
   position: relative;
@@ -210,6 +238,10 @@
   }
 }
 
+.error {
+  border-color: tokens.$danger-default;
+}
+
 .v-btn {
   color: tokens.$blue-base;
 }

package/src/components/Customs/SyInputSelect/constants/ExpertiseLevelEnum.ts

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

package/src/components/Customs/SySelect/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />

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

@@ -0,0 +1,217 @@
+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/Formulaires/SySelect/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>
+                                </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 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-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>
+                                </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>
+              </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/Customs/SySelect/AccessibiliteItems.ts

@@ -0,0 +1,173 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+
+	{
+		title: 'Catégorie 10 : Présentation de l’information',
+		subtitle: '10.1 Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information  ?',
+		items: [
+
+			{
+				precision: '10.1.1 Dans chaque page web, les balises servant à la présentation de l’information ne doivent pas être présentes dans le code source généré des pages. Cette règle est-elle respectée ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1.1',
+				solution: [{
+					info1: '1. Vérifier l’absence des éléments de présentation <basefont>, <big>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> ; ',
+					info2: '2. Vérifier l’absence de l’élément <u> uniquement si le DOCTYPE du document ne correspond pas à HTML 5 ; ',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+
+	{
+		title: 'Catégorie 11 : Formulaires',
+		subtitle: '11.2 Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ? ',
+
+		items2: [
+
+			{
+
+				subtitle: '11.13 La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ?  ',
+				precision: '11.13.1 Chaque champ de formulaire dont l’objet se rapporte à une information concernant l’utilisateur vérifie-t-il ces conditions ? '
+					+ 'Le champ de formulaire possède un attribut autocomplete ; '
+					+ 'L’attribut autocomplete est pourvu d’une valeur présente dans la liste des valeurs possibles pour l’attribut autocomplete associés à un champ de formulaire ; '
+					+ 'La valeur indiquée pour l’attribut autocomplete est pertinente au regard du type d’information attendu. ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.13.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire qui se rapportent à une information concernant l’utilisateur (nom, prénom, numéro de téléphone, etc.) ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que : Le champ de formulaire possède un attribut autocomplete ; L’attribut autocomplete est pourvu d’une valeur présente dans la liste des valeurs possibles; La valeur indiquée pour l’attribut autocomplete est pertinente au regard du type d’information attendu.',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire retrouvé, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+		items: [
+			{
+				precision: '11.2.2 Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut title ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+			{
+				precision: '11.2.3 Chaque étiquette implémentée via l’attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.3',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut WAI-ARIA aria-label ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+			{
+				precision: '11.2.5 Chaque champ de formulaire ayant un intitulé visible vérifie-t-il ces conditions (hors cas particuliers) ? '
+					+ 'S’il est présent, le contenu de l’attribut WAI-ARIA aria-label du champ de formulaire contient au moins l’intitulé visible ; '
+					+ 'S’il est présent, le passage de texte lié au champ de formulaire via un attribut WAI-ARIA aria-labelledby contient au moins l’intitulé visible ; '
+					+ 'S’il est présent, le contenu de l’attribut title du champ de formulaire contient au moins l’intitulé visible ; '
+					+ 'S’il est présent le contenu de la balise <label> associé au champ de formulaire contient au moins l’intitulé visible.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.5',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie à la fois par un intitulé visible et par le contenu soit d’un élément <label>, soit d’un attribut title ou d’un attribut aria-label ou d’un attribut aria-labelledby ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’élément <label> ou 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 champ de formulaire, le test est validé. ',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+		],
+
+	},
+
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: '1.2.4 Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ?'
+					+ ' La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ;'
+					+ ' Les balises <title> et <desc> sont absentes ou vides ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’attribut title.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2.4',
+				solution: [{
+					info1: '1. Retrouver dans le document les images décoratives dépourvues de légende structurées au moyen d’un élément <svg> ;',
+					info2: '2. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :'
+						+ ' Possède un attribut WAI-ARIA aria-hidden="true" ;'
+						+ ' Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;'
+						+ ' Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;'
+						+ ' Et est dépourvu d’attribut title (ainsi que ses éléments enfants).',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 8 : Eléments Obligatoires',
+		subtitle: '8.9 Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation',
+		items: [
+
+			{
+				precision: ' 8.9.1 Dans chaque page web les balises (à l’exception de <div>, <span> et <table>) ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments sémantiques utilisés à des fins de présentation ;',
+					info2: '2. Pour chacun de ces éléments, vérifier que :'
+						+ 'L’élément est pourvu d’un attribut role=“presentation” ;'
+						+ 'L’utilisation de cet élément à des fins de présentation reste justifée',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+	{
+		title: 'Catégorie 11 : Formulaires',
+		subtitle: '11.1 Chaque champ de formulaire a-t-il une étiquette ',
+		items: [
+			{
+				precision: '11.1.1 Chaque champ de formulaire vérifie-t-il une de ces conditions ? '
+					+ 'Le champ de formulaire possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ; '
+					+ 'Le champ de formulaire possède un attribut WAI-ARIA aria-label ; '
+					+ 'Une balise <label> ayant un attribut for est associée au champ de formulaire ; '
+					+ 'Le champ de formulaire possède un attribut title ; '
+					+ 'Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le champ de formulaire : '
+						+ 'Possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ; '
+						+ 'Possède un attribut WAI-ARIA aria-label ; '
+						+ 'Est associé à un élément <label> ayant un attribut for ; '
+						+ 'Possède un attribut title ; '
+						+ 'Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible. ',
+					info3: '3. Si c’est le cas pour champ de formulaire, le test est validé. ',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+
+	},
+
+]

package/src/components/Customs/SySelect/SySelect.mdx

@@ -5,7 +5,8 @@ import * as SySelectStories from "./SySelect.stories";
 
 # SySelect
 
-Le composant `SySelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles d'accessibilité RGAA.
+Le composant `SySelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles d'accessibilité RGAA.<br/>
+Il est basé sur un `v-textfield`.
 
 <Canvas of={SySelectStories.Default} />
 
@@ -20,7 +21,7 @@ Le composant `SySelect` est utilisé pour proposer une alternative au `v-select`
 <Source dark code={`
 <script setup lang="ts">
 	import { ref } from 'vue'
-	import SySelect from '@cnamts/synapse'
+	import { SySelect } from '@cnamts/synapse'
 
 	const selectedValue = ref(undefined)
 

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import SySelect from '@/components/Customs/SySelect/SySelect.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
 import { ref } from 'vue'
-import Alert from '../../Alert/Alert.vue'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 
 const meta = {
 	title: 'Composants/Formulaires/SySelect',
@@ -75,60 +75,6 @@ export const Default: Story = {
 	},
 }
 
-export const Outlined: Story = {
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<SySelect
-						v-model="value"
-						:items="items"
-						outlined
-					/>
-				</template>
-				`,
-			},
-			{
-				name: 'Script',
-				code: `
-				<script setup lang="ts">
-					import SySelect from '@cnamts/SySelect'
-					
-					const items =  [
-						{ text: 'Option 1', value: '1' },
-						{ text: 'Option 2', value: '2' },
-					],
-				</script>
-				`,
-			},
-		],
-	},
-	args: {
-		items: [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4" style="z-index: 99999">
-					<SySelect
-						v-bind="args"
-						outlined
-					/>
-				</div>
-			`,
-		}
-	},
-}
-
 export const Required: Story = {
 	parameters: {
 		sourceCode: [
@@ -317,12 +263,12 @@ export const withCustomKey: Story = {
 export const Info: Story = {
 	render: (args) => {
 		return {
-			components: { Alert },
+			components: { SyAlert },
 			setup() {
 				return { args }
 			},
 			template: `
-				<Alert v-model="args.modelValue" :type="args.type" :variant="tonal" :closable="false">
+				<SyAlert v-model="args.modelValue" :type="args.type" :variant="tonal" :closable="false">
 					<template #default>
 						<b>Format des items :</b>
 						<ul>
@@ -330,7 +276,7 @@ export const Info: Story = {
 							<li>- Si les items sont un tableau de string, le composant les utilisera directement.</li>
 						</ul>
 					</template>
-				</Alert>
+				</SyAlert>
 			`,
 		}
 	},