@cnamts/synapse 0.0.8-alpha → 0.0.9-alpha

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/DatePicker/DatePicker.mdx

@@ -0,0 +1,191 @@
+import {Meta, Canvas, Controls, Source} from '@storybook/blocks';
+import * as DatePickerStories from "./DatePicker.stories.ts";
+
+<Meta of={DatePickerStories}/>
+
+# DatePicker
+
+Le composant `DatePicker` est un champ de saisie de date qui combine un champ de texte et un sélecteur de date. Il permet de saisir une date manuellement ou de la sélectionner via un calendrier, avec support pour les plages de dates.
+
+<Canvas story={{height: '550px'}} of={DatePickerStories.Default}/>
+
+# API
+
+<Controls of={DatePickerStories.Default}/>
+
+# Props
+
+## Valeur et contrôle
+
+### modelValue
+- **Type** : `string | string[]`
+- **Description** : La valeur du champ. Pour une plage de dates, utiliser un tableau de deux dates. La valeur doit être fournie dans le même format que celui spécifié dans la prop `format`.
+- **Défaut** : `undefined`
+
+### placeholder
+- **Type** : `string`
+- **Description** : Texte indicatif affiché quand le champ est vide
+- **Défaut** : `'Sélectionner une date'`
+
+### format
+- **Type** : `string`
+- **Description** : Format d'affichage et d'entrée de la date. Supporte les formats suivants :
+- `DD` : jour sur 2 chiffres
+- `MM` : mois sur 2 chiffres
+- `YYYY` : année sur 4 chiffres
+- `YY` : année sur 2 chiffres (assumé comme 20XX)
+Les séparateurs peuvent être `/`, `-` ou `.`
+- **Défaut** : `'DD/MM/YYYY'`
+
+### dateFormatReturn
+- **Type** : `string`
+- **Description** : Format de la date pour la valeur de retour. Utilise les mêmes tokens que la prop `format`. Si non spécifié, utilise le même format que `format`.
+- **Défaut** : `''`
+
+<div
+    style={{
+        border: '2px solid #FF0000',
+        padding: '1rem',
+        borderRadius: '4px',
+        marginBottom: '1rem',
+    }}
+>
+    <strong>Note importante sur les formats</strong>
+    <p>
+        Le composant utilise deux formats distincts :
+    </p>
+    <ol>
+        <li>
+            <strong>Format d'entrée/affichage</strong><br/>
+            Défini par la prop <code>format</code>, il détermine à la fois :
+            <ul>
+                <li>Le format dans lequel la date doit être fournie au composant</li>
+                <li>Comment la date est affichée visuellement dans le champ</li>
+            </ul>
+        </li>
+        <li>
+            <strong>Format de retour</strong><br/>
+            Défini par la prop <code>dateFormatReturn</code>, il détermine le format de la date émise
+        </li>
+    </ol>
+    <p>
+        Par exemple, avec <code>format="DD-MM-YY"</code> et <code>dateFormatReturn="YYYY/MM/DD"</code> :
+    </p>
+    <ul>
+        <li>Vous devez fournir la date au format : <code>24-12-25</code></li>
+        <li>Elle sera affichée comme : <code>24-12-25</code></li>
+        <li>Elle sera retournée comme : <code>2025/12/24</code></li>
+    </ul>
+</div>
+
+
+
+### required
+- **Type** : `boolean`
+- **Description** : Indique si le champ est obligatoire
+- **Défaut** : `false`
+
+### isDisabled
+- **Type** : `boolean`
+- **Description** : Désactive le champ
+- **Défaut** : `false`
+
+## Configuration du calendrier
+
+### isBirthDate
+- **Type** : `boolean`
+- **Description** : Active le mode date de naissance (commence par la sélection de l'année)
+- **Défaut** : `false`
+
+### isOutlined
+- **Type** : `boolean`
+- **Description** : Active le style de champ de saisie "outlined" (bordure) plutôt que "underlined" (fond)
+- **Défaut** : `true`
+
+### showWeekNumber
+- **Type** : `boolean`
+- **Description** : Affiche les numéros de semaine dans le calendrier
+- **Défaut** : `false`
+
+### displayRange
+- **Type** : `boolean`
+- **Description** : Active la sélection d'une plage de dates
+- **Défaut** : `false`
+
+### noCalendar
+- **Type** : `boolean`
+- **Description** : Désactive l'affichage du calendrier (saisie manuelle uniquement)
+- **Défaut** : `false`
+
+## Apparence
+
+### displayIcon
+- **Type** : `boolean`
+- **Description** : Affiche l'icône de calendrier
+- **Défaut** : `false`
+
+### displayAppendIcon
+- **Type** : `boolean`
+- **Description** : Affiche l'icône à la fin du champ plutôt qu'au début
+- **Défaut** : `false`
+
+### noIcon
+- **Type** : `boolean`
+- **Description** : Masque toutes les icônes
+- **Défaut** : `false`
+
+## Validation
+
+### customRules
+- **Type** : `{ type: string, options: RuleOptions }[]`
+- **Description** : Règles de validation personnalisées
+- **Défaut** : `[]`
+
+### customWarningRules
+- **Type** : `{ type: string, options: RuleOptions }[]`
+- **Description** : Règles d'avertissement personnalisées
+- **Défaut** : `[]`
+
+# Exemple d'utilisation
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { DatePicker } from '@cnamts/synapse'
+
+	const date = ref('')
+</script>
+
+<template>
+	<DatePicker
+		v-model="date"
+		placeholder="Sélectionner une date"
+		format="DD/MM/YYYY"
+		required
+	/>
+</template>
+`}
+/>
+
+## Exemple avec plage de dates
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { DatePicker } from '@cnamts/synapse'
+
+	const dateRange = ref(['', ''])
+</script>
+
+<template>
+	<DatePicker
+		v-model="dateRange"
+		placeholder="Sélectionner une période"
+		format="DD/MM/YYYY"
+		display-range
+	/>
+</template>
+`}
+/>