@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

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 {

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-	import { computed, ref } from 'vue'
+	import { computed, ref, watch } from 'vue'
 	import type { IconType, VariantStyle, ColorType } from './types'
 	import {
 		mdiAlertOutline,
@@ -7,12 +7,12 @@
 		mdiInformationOutline,
 		mdiClose,
 		mdiInformation,
+		mdiCalendar,
 	} from '@mdi/js'
 
-	// only variantStyle need a default value
-	/* eslint-disable vue/require-default-prop */
 	const props = withDefaults(
 		defineProps<{
+			modelValue?: string | number | null
 			prependIcon?: IconType
 			appendIcon?: IconType
 			prependInnerIcon?: IconType
@@ -23,22 +23,121 @@
 			showDivider?: boolean
 			label?: string
 			required?: boolean
-			errorMessages?: string[]
+			errorMessages?: string[] | null
+			isReadOnly?: boolean
+			isActive?: boolean
+			baseColor?: string
+			bgColor?: string
+			centerAffix?: boolean
+			counter?: string | number | boolean
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			counterValue?: number | ((value: any) => number)
+			density?: 'default' | 'comfortable' | 'compact'
+			direction?: 'horizontal' | 'vertical'
+			isDirty?: boolean
+			isDisabled?: boolean
+			isOnError?: boolean
+			isFlat?: boolean
+			isFocused?: boolean
+			areDetailsHidden?: boolean | 'auto'
+			areSpinButtonsHidden?: boolean
+			hint?: string
+			id?: string
+			loading?: string | boolean
+			maxErrors?: string | number
+			maxWidth?: string | number
+			messages?: string | string[]
+			minWidth?: string | number
+			name?: string
+			displayPersistentClear?: boolean
+			displayPersistentCounter?: boolean
+			displayPersistentHint?: boolean
+			displayPersistentPlaceholder?: boolean
+			placeholder?: string
+			prefix?: string
+			isReversed?: boolean
+			role?: string
+			rounded?: string | number | boolean
+			isOnSingleLine?: boolean
+			suffix?: string
+			theme?: string
+			isTiled?: boolean
+			type?: string
+			width?: string | number
+			displayAsterisk?: boolean
+			noIcon?: boolean
 		}>(),
 		{
-			variantStyle: 'outlined', // Remplacez par la valeur par défaut souhaitée
+			modelValue: undefined,
+			prependIcon: undefined,
+			appendIcon: undefined,
+			appendInnerIcon: undefined,
+			prependInnerIcon: undefined,
+			variantStyle: 'outlined',
+			color: 'primary',
+			label: 'custom label',
+			errorMessages: null,
+			isReadOnly: false,
+			isClearable: false,
+			isActive: false,
+			baseColor: undefined,
+			bgColor: undefined,
+			centerAffix: undefined,
+			counter: false,
+			counterValue: undefined,
+			density: 'default',
+			direction: 'horizontal',
+			isDirty: false,
+			isDisabled: false,
+			isOnError: false,
+			isFlat: false,
+			isFocused: false,
+			areDetailsHidden: false,
+			areSpinButtonsHidden: false,
+			hint: undefined,
+			id: undefined,
+			loading: false,
+			maxErrors: 2,
+			maxWidth: undefined,
+			messages: undefined,
+			minWidth: undefined,
+			name: undefined,
+			displayPersistentClear: false,
+			displayPersistentCounter: false,
+			displayPersistentHint: false,
+			displayPersistentPlaceholder: false,
+			placeholder: undefined,
+			prefix: undefined,
+			isReversed: false,
+			role: undefined,
+			rounded: undefined,
+			isOnSingleLine: false,
+			suffix: undefined,
+			theme: undefined,
+			isTiled: false,
+			type: 'text',
+			width: undefined,
+			displayAsterisk: false,
+			noIcon: false,
 		},
 	)
 
-	const ICONS: Record<IconType, string> = {
+	const ICONS: Record<NonNullable<IconType>, string> = {
 		info: mdiInformationOutline,
 		success: mdiCheck,
 		warning: mdiAlertOutline,
 		error: mdiInformation,
 		close: mdiClose,
+		calendar: mdiCalendar,
 	}
 
-	const model = ref('')
+	const model = computed({
+		get: () => props.modelValue,
+		set: (value) => {
+			emit('update:model-value', value)
+		},
+	})
+
 	const isBlurred = ref(false)
 
 	const hasError = computed(() => {
@@ -50,11 +149,19 @@
 	}
 
 	const appendInnerIconColor = computed(() => {
-		return props.appendInnerIcon === 'error' || props.appendInnerIcon === 'success'
+		return props.appendInnerIcon === 'error' || props.appendInnerIcon === 'success' || props.appendInnerIcon === 'warning'
 			? props.appendInnerIcon
 			: 'black'
 	})
 
+	const isShouldDisplayAsterisk = computed(() => {
+		return props.displayAsterisk && props.required
+	})
+
+	const labelWithAsterisk = computed(() => {
+		return isShouldDisplayAsterisk.value ? `${props.label} *` : props.label
+	})
+
 	const dividerProps = {
 		thickness: 2,
 		length: '25px',
@@ -62,6 +169,14 @@
 		opacity: '1',
 	}
 
+	const emit = defineEmits(['update:model-value', 'clear', 'prepend-icon-click', 'append-icon-click'])
+
+	watch(model, (newValue) => {
+		if (props.isClearable && newValue === '') {
+			emit('clear')
+		}
+	})
+
 	defineExpose({
 		appendInnerIconColor,
 	})
@@ -69,37 +184,90 @@
 
 <template>
 	<VTextField
+		:id="props.id"
 		v-model="model"
+		:active="props.isActive"
 		:aria-label="props.label"
+		:base-color="props.baseColor"
+		:bg-color="props.bgColor"
+		:center-affix="props.centerAffix"
 		:clear-icon="ICONS.close"
 		:clearable="props.isClearable"
 		:color="props.color"
+		:counter-value="props.counterValue"
+		:density="props.density"
+		:direction="props.direction"
+		:dirty="props.isDirty"
+		:disabled="props.isDisabled"
+		:display-asterisk="isShouldDisplayAsterisk"
+		:error="props.isOnError"
 		:error-messages="props.errorMessages"
-		:label="props.label"
+		:flat="props.isFlat"
+		:focused="props.isFocused"
+		:hide-details="props.areDetailsHidden"
+		:hide-spin-buttons="props.areSpinButtonsHidden"
+		:hint="props.hint"
+		:label="labelWithAsterisk"
+		:loading="props.loading"
+		:max-errors="props.maxErrors"
+		:max-width="props.maxWidth"
+		:messages="props.messages"
+		:min-width="props.minWidth"
+		:name="props.name"
+		:no-icon="props.noIcon"
+		:persistent-clear="props.displayPersistentClear"
+		:persistent-counter="props.displayPersistentCounter"
+		:persistent-hint="props.displayPersistentHint"
+		:persistent-placeholder="displayPersistentPlaceholder"
+		:placeholder="props.placeholder"
+		:prefix="props.prefix"
+		:readonly="props.isReadOnly"
+		:reverse="props.isReversed"
+		:role="props.role"
+		:rounded="props.rounded"
 		:rules="props.required ? ['Le champ est requis.'] : []"
+		:single-line="props.isOnSingleLine"
+		:suffix="props.suffix"
+		:theme="props.theme"
+		:tile="props.isTiled"
+		:type="props.type"
 		:variant="props.variantStyle"
+		:width="props.width"
 		@blur="checkErrorOnBlur"
 	>
-		<template #prepend>
+		<template
+			v-if="props.prependIcon && !props.noIcon"
+			#prepend
+		>
 			<slot name="prepend">
 				<VIcon
-					v-if="props.prependIcon"
+					:aria-label="props.label ? `${props.label} - bouton ${props.prependIcon}` : `Bouton ${props.prependIcon}`"
+					:color="appendInnerIconColor"
 					:icon="ICONS[props.prependIcon]"
+					role="button"
+					@click="$emit('prepend-icon-click')"
 				/>
 			</slot>
 		</template>
-		<template #append>
+		<template
+			v-if="props.appendIcon && !props.noIcon"
+			#append
+		>
 			<slot name="append">
 				<VIcon
-					v-if="props.appendIcon"
+					:aria-label="props.label ? `${props.label} - bouton ${props.appendIcon}` : `Bouton ${props.appendIcon}`"
+					:color="appendInnerIconColor"
 					:icon="ICONS[props.appendIcon]"
+					role="button"
+					@click="$emit('append-icon-click')"
 				/>
 			</slot>
 		</template>
 		<template #prepend-inner>
 			<slot name="prepend-inner">
 				<VIcon
-					v-if="props.prependInnerIcon"
+					v-if="props.prependInnerIcon && !props.noIcon"
+					:aria-label="props.label ? `${props.label} - bouton ${props.prependInnerIcon}` : `Bouton ${props.prependInnerIcon}`"
 					:icon="ICONS[props.prependInnerIcon]"
 				/>
 			</slot>
@@ -112,11 +280,12 @@
 		</template>
 		<template #append-inner>
 			<slot name="append-inner">
-				<VIcon v-if="hasError">
+				<VIcon v-if="hasError && !props.appendInnerIcon">
 					{{ mdiInformation }}
 				</VIcon>
 				<VIcon
-					v-if="props.appendInnerIcon"
+					v-if="props.appendInnerIcon && !props.noIcon"
+					:aria-label="props.label ? `${props.label} - bouton ${props.appendInnerIcon}` : `Bouton ${props.appendInnerIcon}`"
 					:class="{ 'error-icon': props.appendInnerIcon === 'error' }"
 					:color="appendInnerIconColor"
 					:icon="ICONS[props.appendInnerIcon]"

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

@@ -33,13 +33,11 @@ describe('SyTextField', () => {
 			append: '<div data-testid="append-slot">Append Slot Content</div>',
 		})
 
-		const prependSlot = wrapper.find('[data-testid="prepend-slot"]')
-		const appendSlot = wrapper.find('[data-testid="append-slot"]')
+		const prependSlot = wrapper.find('.v-field--prepended')
+		const appendSlot = wrapper.find('.v-field--appended')
 
 		expect(prependSlot.exists()).toBe(true)
-		expect(prependSlot.text()).toBe('Prepend Slot Content')
 		expect(appendSlot.exists()).toBe(true)
-		expect(appendSlot.text()).toBe('Append Slot Content')
 	})
 
 	it('renders inner slots correctly', () => {

package/src/components/Customs/SyTextField/tests/__snapshots__/SyTextField.spec.ts.snap

@@ -2,41 +2,43 @@
 
 exports[`SyTextField > matches snapshot 1`] = `
 "<div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
-  <div class="v-input__prepend"><i class="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+  <div class="v-input__prepend"><i class="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="custom label - bouton info"></i>
     <!---->
   </div>
   <div class="v-input__control">
-    <div class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--no-label v-field--variant-filled v-theme--light v-locale--is-ltr">
+    <div class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-filled v-theme--light v-locale--is-ltr">
       <div class="v-field__overlay"></div>
       <div class="v-field__loader">
         <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
           <!---->
-          <div class="v-progress-linear__background" style="opacity: NaN;"></div>
-          <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+          <div class="v-progress-linear__background bg-primary" style="opacity: NaN;"></div>
+          <div class="v-progress-linear__buffer bg-primary" style="opacity: NaN; width: 0%;"></div>
           <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
             <div class="v-progress-linear__indeterminate">
-              <div class="v-progress-linear__indeterminate long"></div>
-              <div class="v-progress-linear__indeterminate short"></div>
+              <div class="v-progress-linear__indeterminate long bg-primary"></div>
+              <div class="v-progress-linear__indeterminate short bg-primary"></div>
             </div>
           </transition-stub>
           <!---->
         </div>
       </div>
       <div class="v-field__prepend-inner">
-        <!----><i class="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16 mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+        <!----><i class="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16 mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="custom label - bouton warning"></i>
         <hr class="v-divider v-divider--vertical v-theme--light text-primary mt-4 pa-1" style="height: 25px; border-right-width: 2px; --v-border-opacity: 1;" aria-orientation="vertical" role="separator">
       </div>
-      <div class="v-field__field" data-no-activator="">
-        <!---->
-        <!---->
-        <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" class="v-field__input" value="">
+      <div class="v-field__field" data-no-activator=""><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-0">
+          <!---->custom label
+        </label><label class="v-label v-field-label" for="input-0">
+          <!---->custom label
+        </label>
+        <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" aria-label="custom label" display-asterisk="false" no-icon="false" class="v-field__input">
         <!---->
       </div>
       <transition-stub name="expand-x-transition" appear="false" persisted="false" css="true">
-        <div class="v-field__clearable" style="display: none;"><i class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Clear "></i></div>
+        <div class="v-field__clearable" style="display: none;"><i class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Clear custom label"></i></div>
       </transition-stub>
       <div class="v-field__append-inner">
-        <!--v-if--><i class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error error-icon" aria-hidden="true"></i>
+        <!--v-if--><i class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error error-icon" aria-hidden="true" aria-label="custom label - bouton error"></i>
         <!---->
       </div>
       <div class="v-field__outline">
@@ -46,10 +48,10 @@ exports[`SyTextField > matches snapshot 1`] = `
     </div>
   </div>
   <div class="v-input__append">
-    <!----><i class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+    <!----><i class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="custom label - bouton success"></i>
   </div>
-  <div class="v-input__details">
-    <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="input-0-messages">
+  <div id="input-0-messages" class="v-input__details" role="alert" aria-live="polite">
+    <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
       <!---->
     </transition-group-stub>
     <!---->

package/src/components/Customs/SyTextField/types.d.ts

@@ -1,3 +1,3 @@
-export type IconType = 'info' | 'success' | 'warning' | 'error' | 'close'
-export type VariantStyle = 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled'
+export type IconType = 'info' | 'success' | 'warning' | 'error' | 'close' | 'calendar' | undefined
+export type VariantStyle = 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'underlined'
 export type ColorType = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error'

package/src/components/DataList/DataList.stories.ts

@@ -421,8 +421,9 @@ export const ActionBtn: Story = {
 				code: `
 				<script setup lang="ts">
 					import { DataList } from '@cnamts/synapse'
+					import { ref } from 'vue'
 							
-					const items = [
+					const items = ref([
 						{
 							key: 'Nom',
 							value: 'Dupont',
@@ -436,7 +437,7 @@ export const ActionBtn: Story = {
 							value: '24/09/1970',
 							action: 'Modifier',
 						},
-					]
+					])
 					
 					const updateBirthdate = (index: number) => {
 						items[index].value = '25/09/1970'

package/src/components/DataList/DataList.vue

@@ -135,6 +135,6 @@
 
 <style lang="scss" scoped>
 :deep(ul) {
-  list-style: none;
+	list-style: none;
 }
 </style>