@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/components/PeriodField/PeriodField.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 	import { ref, watch, computed } from 'vue'
 	import DatePicker from '@/components/DatePicker/DatePicker.vue'
-	import { type RuleOptions } from '@/composables'
+	import { type RuleOptions, useFieldValidation } from '@/composables'
+
+	const { parseDate } = useFieldValidation()
 
 	type DateInput = string | null
 	type PeriodValue = { from: DateInput, to: DateInput }
@@ -54,7 +56,7 @@
 			options: {
 				validate: (value: Date | null) => {
 					if (value === null) return true
-					if (tempToDate.value === undefined) return true
+					if (tempToDate.value === undefined || tempToDate.value === null) return true
 					return value <= tempToDate.value
 				},
 				message: 'La date de début ne peut pas être supérieure à la date de fin.',
@@ -93,7 +95,7 @@
 			options: {
 				validate: (value: Date | null) => {
 					if (value === null) return true
-					if (tempFromDate.value === undefined) return true
+					if (tempFromDate.value === undefined || tempFromDate.value === null) return true
 					return value >= tempFromDate.value
 				},
 				message: 'La date de fin ne peut pas être inférieure à la date de début.',
@@ -144,8 +146,8 @@
 	const formattedToDate = computed(() => formatDateValue(internalToDate.value))
 
 	// Computed properties pour les dates temporaires
-	const tempFromDate = computed(() => formattedFromDate.value ? stringToDate(formattedFromDate.value) : undefined)
-	const tempToDate = computed(() => formattedToDate.value ? stringToDate(formattedToDate.value) : undefined)
+	const tempFromDate = computed(() => formattedFromDate.value ? parseDate(formattedFromDate.value, props.format) : undefined)
+	const tempToDate = computed(() => formattedToDate.value ? parseDate(formattedToDate.value, props.format) : undefined)
 
 	// Sets pour optimiser la recherche des erreurs et succès
 	const fromDateErrorsSet = computed(() => new Set(errors.value.filter(error => error.includes('fromDate'))))
@@ -183,8 +185,8 @@
 
 		// Si les deux dates sont renseignées, vérifier qu'elles sont cohérentes
 		if (formattedFromDate.value && formattedToDate.value) {
-			const fromDate = stringToDate(formattedFromDate.value)
-			const toDate = stringToDate(formattedToDate.value)
+			const fromDate = parseDate(formattedFromDate.value, props.format)
+			const toDate = parseDate(formattedToDate.value, props.format)
 			if (!fromDate || !toDate || fromDate > toDate) {
 				return false
 			}
@@ -264,35 +266,6 @@
 		return result
 	}
 
-	function stringToDate(dateString: string | null): Date | undefined {
-		if (!dateString) return undefined
-
-		// Créer un mapping des positions des éléments de date selon le format
-		const format = props.format || 'DD/MM/YYYY'
-		const separator = format.includes('/') ? '/' : format.includes('-') ? '-' : '.'
-		const parts = format.split(separator)
-		const dateParts = dateString.split(separator)
-
-		if (parts.length !== dateParts.length) return undefined
-
-		let day = '', month = '', year = ''
-
-		// Extraire les valeurs selon leur position dans le format
-		parts.forEach((part, index) => {
-			const value = dateParts[index]
-			if (part.includes('DD')) day = value
-			else if (part.includes('MM')) month = value
-			else if (part.includes('YYYY')) year = value
-			else if (part.includes('YY')) year = '20' + value // Assumons que nous sommes au 21ème siècle
-		})
-
-		// Vérifier que nous avons toutes les parties nécessaires
-		if (!day || !month || !year) return undefined
-
-		const date = new Date(`${year}-${month}-${day}`)
-		return isNaN(date.getTime()) ? undefined : date
-	}
-
 	defineExpose({
 		validateOnSubmit,
 		errors,
@@ -303,53 +276,66 @@
 
 <template>
 	<div class="period-field">
-		<DatePicker
-			ref="fromDateRef"
-			v-model="internalFromDate"
-			:custom-rules="fromDateRules"
-			:custom-warning-rules="props.customWarningRules"
-			:date-format-return="props.dateFormatReturn"
-			:display-append-icon="props.displayAppendIcon"
-			:display-icon="props.displayIcon"
-			:error-message="hasFromDateErrors"
-			:format="props.format"
-			:is-disabled="props.isDisabled"
-			:is-outlined="props.isOutlined"
-			:no-calendar="props.noCalendar"
-			:no-icon="props.noIcon"
-			:placeholder="props.placeholderFrom"
-			:required="props.required"
-			:show-week-number="props.showWeekNumber"
-			:success-message="hasFromDateSuccesses"
-			class="mr-2"
-			@closed="handleFromDateClosed"
-		/>
-		<DatePicker
-			ref="toDateRef"
-			v-model="internalToDate"
-			:custom-rules="toDateRules"
-			:custom-warning-rules="props.customWarningRules"
-			:date-format-return="props.dateFormatReturn"
-			:display-append-icon="props.displayAppendIcon"
-			:display-icon="props.displayIcon"
-			:error-message="hasToDateErrors"
-			:format="props.format"
-			:is-disabled="props.isDisabled"
-			:is-outlined="props.isOutlined"
-			:no-calendar="props.noCalendar"
-			:no-icon="props.noIcon"
-			:placeholder="props.placeholderTo"
-			:required="props.required"
-			:show-week-number="props.showWeekNumber"
-			:success-message="hasToDateSuccesses"
-			@closed="handleToDateClosed"
-		/>
+		<div
+			class="period-field__col"
+		>
+			<DatePicker
+				ref="fromDateRef"
+				v-model="internalFromDate"
+				:custom-rules="fromDateRules"
+				:custom-warning-rules="props.customWarningRules"
+				:date-format-return="props.dateFormatReturn"
+				:display-append-icon="props.displayAppendIcon"
+				:display-icon="props.displayIcon"
+				:error-message="hasFromDateErrors"
+				:format="props.format"
+				:is-disabled="props.isDisabled"
+				:is-outlined="props.isOutlined"
+				:no-calendar="props.noCalendar"
+				:no-icon="props.noIcon"
+				:placeholder="props.placeholderFrom"
+				:required="props.required"
+				:show-week-number="props.showWeekNumber"
+				:success-message="hasFromDateSuccesses"
+				@closed="handleFromDateClosed"
+			/>
+		</div>
+		<div
+			class="period-field__col"
+		>
+			<DatePicker
+				ref="toDateRef"
+				v-model="internalToDate"
+				:custom-rules="toDateRules"
+				:custom-warning-rules="props.customWarningRules"
+				:date-format-return="props.dateFormatReturn"
+				:display-append-icon="props.displayAppendIcon"
+				:display-icon="props.displayIcon"
+				:error-message="hasToDateErrors"
+				:format="props.format"
+				:is-disabled="props.isDisabled"
+				:is-outlined="props.isOutlined"
+				:no-calendar="props.noCalendar"
+				:no-icon="props.noIcon"
+				:placeholder="props.placeholderTo"
+				:required="props.required"
+				:show-week-number="props.showWeekNumber"
+				:success-message="hasToDateSuccesses"
+				@closed="handleToDateClosed"
+			/>
+		</div>
 	</div>
 </template>
 
 <style scoped>
 .period-field {
 	display: flex;
-	gap: 10px;
+	gap: 24px;
+	flex-wrap: wrap;
+}
+
+.period-field__col {
+	flex: 1;
+	min-width: min(300px, 100%);
 }
 </style>

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

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

package/src/components/PeriodField/tests/PeriodField.spec.ts

@@ -98,44 +98,36 @@ describe('PeriodField.vue', () => {
 	describe('Validation', () => {
 		it('shows error when start date is after end date', async () => {
 			const wrapper = mount(PeriodField, {
-				global: {
-					plugins: [vuetify],
-				},
 				props: {
 					modelValue: {
-						from: '12/12/1995',
-						to: '20/12/1995',
+						from: '01/01/2025',
+						to: '01/01/2024',
 					},
 				},
+				global: {
+					plugins: [vuetify],
+				},
 			})
 
-			const startField = wrapper.findAll('input')[0]
-			await startField.trigger('focus')
-			await startField.setValue('22/12/1995')
-			await startField.trigger('blur')
 			await wrapper.vm.$nextTick()
 
-			expect(wrapper.text()).toContain('La date de début ne peut pas être supérieure à la date de fin')
+			expect(wrapper.text()).toContain('La date de fin ne peut pas être inférieure à la date de début')
 			expect(wrapper.vm.isValid).toBe(false)
 		})
 
 		it('shows error when end date is before start date', async () => {
 			const wrapper = mount(PeriodField, {
-				global: {
-					plugins: [vuetify],
-				},
 				props: {
 					modelValue: {
-						from: '12/12/1995',
-						to: '20/12/1995',
+						from: '01/01/2025',
+						to: '01/01/2024',
 					},
 				},
+				global: {
+					plugins: [vuetify],
+				},
 			})
 
-			const endField = wrapper.findAll('input')[1]
-			await endField.trigger('focus')
-			await endField.setValue('10/12/1995')
-			await endField.trigger('blur')
 			await wrapper.vm.$nextTick()
 
 			expect(wrapper.text()).toContain('La date de fin ne peut pas être inférieure à la date de début')

package/src/components/PhoneField/PhoneField.mdx

@@ -6,7 +6,7 @@ import PhoneField from './PhoneField.vue'
 
 # PhoneField
 
-The `PhoneField` component is used to input phone numbers with various formatting options.
+Le composant`PhoneField`  est utilisé pour saisir des numéros de téléphone avec différentes options de formatage.
 
 <Canvas of={PhoneFieldStories.Default} />
 

package/src/components/PhoneField/PhoneField.stories.ts

@@ -30,6 +30,7 @@ const meta = {
 			description: 'Permet d\'utiliser uniquement les indicatifs que vous renseignez dans la props customIndicatifs',
 		},
 		isValidatedOnBlur: { control: 'boolean' },
+		displayAsterisk: { control: 'boolean' },
 	},
 } satisfies Meta<typeof PhoneField>
 
@@ -192,6 +193,74 @@ export const Required: Story = {
 	},
 }
 
+/**
+ * Story avec champ requis et astérisque.
+ */
+export const RequiredWithAsterisk: Story = {
+	args: {
+		...Default.args,
+		required: true,
+		displayAsterisk: true,
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Version du champ téléphone requis avec un astérisque visuel.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <PhoneField
+    v-model="phoneNumber"
+    required
+    display-asterisk
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import PhoneField from '@cnamts/synapse'
+
+const phoneNumber = ref('')
+</script>
+        `,
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { PhoneField },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+					<PhoneField
+						v-model="args.modelValue"
+						:required="args.required"
+						:outlined="args.outlined"
+						:outlinedIndicatif="args.outlinedIndicatif"
+						:withCountryCode="args.withCountryCode"
+						:countryCodeRequired="args.countryCodeRequired"
+						:displayFormat="args.displayFormat"
+						:customIndicatifs="args.customIndicatifs"
+						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
+						:isValidatedOnBlur="args.isValidatedOnBlur"
+						:display-asterisk="args.displayAsterisk"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
 export const CustomIndicatifs: Story = {
 	parameters: {
 		sourceCode: [

package/src/components/PhoneField/PhoneField.vue

@@ -32,6 +32,7 @@
 		customIndicatifs: { type: Array as PropType<Indicatif[]>, default: () => [] },
 		useCustomIndicatifsOnly: { type: Boolean, default: false },
 		isValidatedOnBlur: { type: Boolean, default: true },
+		displayAsterisk: { type: Boolean, default: false },
 	})
 
 	const emit = defineEmits(['update:modelValue', 'update:selectedDialCode', 'change'])
@@ -133,6 +134,7 @@
 			:label="locales.indicatifLabel"
 			:outlined="outlinedIndicatif"
 			:required="props.countryCodeRequired"
+			:display-asterisk="props.displayAsterisk"
 			class="custom-select"
 			text-key="displayText"
 			value-key="code"
@@ -146,6 +148,7 @@
 			:required="props.required"
 			:rules="validationRules"
 			:variant="outlined ? 'outlined' : 'underlined'"
+			:display-asterisk="props.displayAsterisk"
 			class="phone-field"
 			color="primary"
 			@blur="validateInputOnBlur"

package/src/components/PhoneField/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/PhoneField/Usages.stories.ts

@@ -0,0 +1,38 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Formulaires/PhoneField/Usages',
+}
+
+const itemsToDo = [
+	'Indiquer le nombre de numéros attendus dans la saisie .',
+	'Utiliser un formatage dynamique du numéro.',
+]
+
+const itemsNotToDo = [
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/PhoneField/indicatifs.ts

@@ -1,5 +1,5 @@
 export const indicatifs = [
-	{ code: '+1', country: 'USA/Canada', abbreviation: 'US/CA', phoneLength: 10, mask: '###-###-####' },
+	{ code: '+1', country: 'USA/Canada', abbreviation: 'US/CA', phoneLength: 10, mask: '### ### ####' },
 	{ code: '+7', country: 'Russia/Kazakhstan', abbreviation: 'RU/KZ', phoneLength: 10, mask: '### ### ## ##' },
 	{ code: '+20', country: 'Egypt', abbreviation: 'EG', phoneLength: 9, mask: '### ### ####' },
 	{ code: '+27', country: 'South Africa', abbreviation: 'ZA', phoneLength: 9, mask: '### ### ####' },

package/src/components/RangeField/RangeField.vue

@@ -32,10 +32,6 @@
 
 	watch(model, (value) => {
 		if (!Array.isArray(value)) {
-			model.value = [
-				props.min,
-				props.max,
-			]
 			return
 		}
 

package/src/components/SearchListField/SearchListField.mdx

@@ -6,8 +6,7 @@ import SearchListField from './SearchListField.vue';
 
 # SearchListField
 
-Le composant `SearchListField` est utilisé pour afficher un champ de saisie de mot de passe et gérer sa validation.
-Il permet également d’afficher ou de masquer le contenu du champ à l’aide d’une icône.
+Le composant `SearchListField` est utilisé pour permettre à l’utilisateur de sélectionner des valeurs dans une liste.
 
 <Canvas story={{height: '150px'}} of={SearchListFieldStories.Default}/>
 

package/src/components/SelectBtnField/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/SelectBtnField/Usages.stories.ts

@@ -0,0 +1,40 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Formulaires/SelectBtnField/Usages',
+}
+const itemsToDo = [
+	'Utiliser des libellés clairs et compréhensibles.',
+	'Limiter le nombre d\'options pour éviter la surcharge cognitive.',
+]
+
+const itemsNotToDo = [
+	'Utiliser ce composant pour un trop grand nombre d\'options. (Privilégier alors un bouton select).',
+	'Rendre la sélection ambiguë (ex. : icônes sans texte explicatif).',
+	'Forcer une selection initiale si elle n\'est pas nécessaire.',
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/SkipLink/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/SkipLink/Usages.stories.ts

@@ -0,0 +1,41 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Navigation/SkipLink/Usages',
+}
+
+const itemsToDo = [
+	'Le composant lien d\'évitement est invisible par défaut pour ne pas encombrer l\'interface.',
+	'Il doit alors être le premier élément dans l\'ordre du focus.',
+	'Les libellés des liens doivent être clairs et concis tel que "Aller au contenu principal" ou "Passer au menu".',
+]
+
+const itemsNotToDo = [
+	'Utiliser des libellés trop vagues ou trop longs.',
+
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/SyAlert/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/SyAlert/Usages.stories.ts

@@ -0,0 +1,40 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Feedback/SyAlert/Usages',
+}
+
+const itemsToDo = [
+	'La nature du message (erreur, succès, information) doit être clairement exprimée dans le titre de l\'alerte. La couleur ou l\'icône n\'étant pas accessibles ou compréhensibles par tous les utilisateurs.',
+	'Placer la bannière en tête de la section à laquelle elle s\'applique.',
+]
+
+const itemsNotToDo = [
+	'Utiliser ce composant à la place d\'une page d\'erreur.',
+
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/TableToolbar/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 />