@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

package/src/components/Customs/SyBtnSelect/SyBtnSelect.mdx

@@ -5,7 +5,7 @@ import * as SyBtnSelectStories from "./SyBtnSelect.stories";
 
 # SyBtnSelect
 
-Le composant `SyBtnSelect` est utilisé pour proposer une sélection d'options avec un bouton personnalisé, conforme au style du Design System et qui respecte les règles d'accessibilité RGAA.<br/>
+Le composant `SyBtnSelect` est utilisé pour proposer une sélection d'options avec un bouton personnalisé, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.<br/>
 Il est basé sur un `v-btn`.
 
 <Canvas of={SyBtnSelectStories.Default}/>

package/src/components/Customs/SyInputSelect/SyInputSelect.mdx

@@ -5,7 +5,7 @@ import * as SyInputSelectStories from "./SyInputSelect.stories";
 
 # SyInputSelect
 
-Le composant `SyInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles RGAA.<br/>
+Le composant `SyInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.<br/>
 Il est basé sur un `v-input`.
 
 <Canvas of={SyInputSelectStories.Default} />

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

@@ -20,6 +20,7 @@ const meta = {
 		textKey: { control: 'text' },
 		valueKey: { control: 'text' },
 		vuetifyOptions: { control: 'object' },
+		displayAsterisk: { control: 'boolean' },
 	},
 } as Meta<typeof SyInputSelect>
 
@@ -149,6 +150,70 @@ export const Required: Story = {
 	},
 }
 
+export const RequiredWithAsterisk: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'Version du champ de sélection requis avec un astérisque visuel.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SyInputSelect
+    v-model="value"
+    :items="items"
+    label="Sélectionnez une option"
+    required
+    display-asterisk
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import SyInputSelect from '@cnamts/synapse'
+
+const value = ref('')
+const items = [
+  { text: 'Option 1', value: '1' },
+  { text: 'Option 2', value: '2' },
+]
+</script>
+        `,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		label: 'Sélectionnez une option',
+		required: true,
+		displayAsterisk: true,
+	},
+	render: (args) => {
+		return {
+			components: { SyInputSelect },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+					<SyInputSelect
+						v-bind="args"
+						:required="args.required"
+						:display-asterisk="args.displayAsterisk"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
 export const withCustomError: Story = {
 	parameters: {
 		sourceCode: [

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

@@ -14,6 +14,7 @@
 		required?: boolean
 		errorMessages?: string | string[]
 		isHeaderToolbar?: boolean
+		displayAsterisk?: boolean
 	}>(), {
 		modelValue: null,
 		items: () => [],
@@ -24,6 +25,7 @@
 		required: false,
 		errorMessages: () => [],
 		isHeaderToolbar: false,
+		displayAsterisk: false,
 	})
 
 	const options = useCustomizableOptions(defaultOptions, props)
@@ -65,7 +67,15 @@
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 			return (selectedItem.value as Record<string, any>)[props.textKey]
 		}
-		return props.label
+		return labelWithAsterisk.value
+	})
+
+	const isShouldDisplayAsterisk = computed(() => {
+		return props.displayAsterisk && props.required
+	})
+
+	const labelWithAsterisk = computed(() => {
+		return isShouldDisplayAsterisk.value ? `${props.label} *` : props.label
 	})
 
 	watch(() => props.modelValue, (newValue) => {
@@ -144,8 +154,8 @@
 		:id="inputId"
 		v-model="selectedItem"
 		:error-messages="localErrorMessages"
-		:label="props.label"
-		:title="props.label"
+		:label="labelWithAsterisk"
+		:title="labelWithAsterisk"
 		role="menu"
 		@click="checkForErrors"
 	>

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

@@ -5,7 +5,7 @@ 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.<br/>
+Le composant `SySelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles d'accessibilité <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.<br/>
 Il est basé sur un `v-textfield`.
 
 <Canvas of={SySelectStories.Default} />

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

@@ -3,6 +3,7 @@ import SySelect from '@/components/Customs/SySelect/SySelect.vue'
 import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
 import { ref } from 'vue'
+import { fn } from '@storybook/test'
 
 const meta: Meta<typeof SySelect> = {
 	title: 'Composants/Formulaires/SySelect',
@@ -16,6 +17,19 @@ const meta: Meta<typeof SySelect> = {
 		items: { control: 'object' },
 		errorMessages: { control: 'object' },
 		required: { control: 'boolean' },
+		displayAsterisk: { control: 'boolean' },
+		textKey: {
+			control: 'text',
+			description: 'Nom de la propriété qui contient le texte à afficher',
+		},
+		valueKey: {
+			control: 'text',
+			description: 'Nom de la propriété qui contient la valeur à retourner',
+		},
+		returnObject: {
+			control: 'boolean',
+			description: 'Retourne l\'objet complet sélectionné',
+		},
 	},
 } as Meta<typeof SySelect>
 
@@ -52,10 +66,11 @@ export const Default: Story = {
 		],
 	},
 	args: {
-		items: [
+		'items': [
 			{ text: 'Option 1', value: '1' },
 			{ text: 'Option 2', value: '2' },
 		],
+		'onUpdate:modelValue': fn(),
 	},
 	render: (args) => {
 		return {
@@ -106,11 +121,12 @@ export const Required: Story = {
 		],
 	},
 	args: {
-		items: [
+		'items': [
 			{ text: 'Option 1', value: '1' },
 			{ text: 'Option 2', value: '2' },
 		],
-		required: true,
+		'required': true,
+		'onUpdate:modelValue': fn(),
 	},
 	render: (args) => {
 		return {
@@ -130,6 +146,71 @@ export const Required: Story = {
 	},
 }
 
+export const RequiredWithAsterisk: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: 'Version du champ de sélection requis avec un astérisque visuel.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SySelect
+    v-model="value"
+    :items="items"
+    label="Sélectionnez une option"
+    required
+    display-asterisk
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import SySelect from '@cnamts/synapse'
+
+const value = ref('')
+const items = [
+  { text: 'Option 1', value: '1' },
+  { text: 'Option 2', value: '2' },
+]
+</script>
+        `,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		'label': 'Sélectionnez une option',
+		'required': true,
+		'displayAsterisk': true,
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SySelect },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+					<SySelect
+						v-bind="args"
+						:required="args.required"
+						:display-asterisk="args.displayAsterisk"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
 export const withCustomError: Story = {
 	parameters: {
 		sourceCode: [
@@ -171,10 +252,11 @@ export const withCustomError: Story = {
 		],
 	},
 	args: {
-		items: [
+		'items': [
 			{ text: 'Option 1', value: '1' },
 			{ text: 'Option 2', value: '2' },
 		],
+		'onUpdate:modelValue': fn(),
 	},
 	render: (args) => {
 		return {
@@ -235,10 +317,11 @@ export const withCustomKey: Story = {
 		],
 	},
 	args: {
-		items: [
+		'items': [
 			{ customKey: 'Choix 1', value: '1' },
 			{ customKey: 'Choix 2', value: '2' },
 		],
+		'onUpdate:modelValue': fn(),
 	},
 	render: (args) => {
 		return {

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

@@ -14,7 +14,7 @@
 		},
 		label: {
 			type: String,
-			default: '',
+			default: 'Sélectionnez une option',
 		},
 		errorMessages: {
 			type: [String, Array] as PropType<string | readonly string[]>,
@@ -44,6 +44,18 @@
 			type: String,
 			default: 'value',
 		},
+		displayAsterisk: {
+			type: Boolean,
+			default: false,
+		},
+		returnObject: {
+			type: Boolean,
+			default: false,
+		},
+		disableErrorHandling: {
+			type: Boolean,
+			default: false,
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -65,8 +77,14 @@
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 	const selectItem = (item: any) => {
-		selectedItem.value = item
-		emit('update:modelValue', item)
+		if (props.returnObject) {
+			selectedItem.value = item
+			emit('update:modelValue', item)
+		}
+		else {
+			selectedItem.value = item[props.valueKey]
+			emit('update:modelValue', item[props.valueKey])
+		}
 		isOpen.value = false
 	}
 
@@ -76,11 +94,22 @@
 	}
 
 	const selectedItemText = computed(() => {
-		if (selectedItem.value && typeof selectedItem.value === 'object') {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-			return (selectedItem.value as Record<string, any>)[props.textKey]
+		if (selectedItem.value) {
+			if (props.returnObject) {
+				return (selectedItem.value as Record<string, unknown>)[props.textKey]
+			}
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			return props.items.find((item: any) => item[props.valueKey] === selectedItem.value)?.[props.textKey]
 		}
-		return props.label
+		return ''
+	})
+
+	const isShouldDisplayAsterisk = computed(() => {
+		return props.displayAsterisk && props.required
+	})
+
+	const labelWithAsterisk = computed(() => {
+		return isShouldDisplayAsterisk.value ? `${props.label} *` : props.label
 	})
 
 	const formattedItems = computed(() => {
@@ -93,6 +122,8 @@
 	})
 
 	const isRequired = computed(() => {
+		// Si la gestion des erreurs est désactivée, on ne considère jamais le champ comme requis
+		if (props.disableErrorHandling) return false
 		return (props.required || props.errorMessages.length > 0) && !selectedItem.value
 	})
 
@@ -104,7 +135,13 @@
 
 	watch([isOpen, hasError], ([newIsOpen, newHasError]) => {
 		if (!newIsOpen) {
-			hasError.value = (!selectedItem.value && isRequired.value) || props.errorMessages.length > 0
+			// Si la gestion des erreurs est désactivée, on ne met jamais hasError à true
+			if (props.disableErrorHandling) {
+				hasError.value = false
+			}
+			else {
+				hasError.value = (!selectedItem.value && isRequired.value) || props.errorMessages.length > 0
+			}
 		}
 		else {
 			hasError.value = newHasError
@@ -112,7 +149,10 @@
 	})
 
 	watch(() => props.errorMessages, (newValue) => {
-		hasError.value = newValue.length > 0
+		// Si la gestion des erreurs est désactivée, on ne met jamais hasError à true
+		if (!props.disableErrorHandling) {
+			hasError.value = newValue.length > 0
+		}
 	})
 
 	onMounted(() => {
@@ -134,16 +174,17 @@
 			ref="input"
 			v-model="selectedItemText"
 			v-click-outside="closeList"
-			title="Sélectionnez une option"
+			:title="labelWithAsterisk"
 			color="primary"
 			tabindex="0"
 			readonly
 			:disabled="disabled"
-			:label="selectedItem ? label : 'Sélectionnez une option'"
-			:aria-label="selectedItem ? label : 'Sélectionnez une option'"
-			:error-messages="errorMessages"
+			:label="labelWithAsterisk"
+			:aria-label="labelWithAsterisk"
+			:error-messages="props.disableErrorHandling ? [] : errorMessages"
 			:variant="outlined ? 'outlined' : 'underlined'"
-			:rules="isRequired ? ['Le champ est requis.'] : []"
+			:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
+			:display-asterisk="displayAsterisk"
 			class="sy-select"
 			:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
 			@click="toggleMenu"

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

@@ -89,7 +89,11 @@ describe('SySelect.vue', () => {
 
 	it('returns the correct text when selectedItem is an object', async () => {
 		const wrapper = mount(SySelect, {
-			props: { modelValue: { text: 'Option 1', value: '1' }, textKey: 'text' },
+			props: {
+				modelValue: { text: 'Option 1', value: '1' },
+				textKey: 'text',
+				returnObject: true,
+			},
 			global: {
 				plugins: [vuetify],
 			},
@@ -100,6 +104,24 @@ describe('SySelect.vue', () => {
 		expect(instance.selectedItemText).toBe('Option 1')
 	})
 
+	it('returns the correct text when selectedItem is a value', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				items: [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }],
+				modelValue: '1',
+				textKey: 'text',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		const instance = wrapper.vm as any
+		await wrapper.setProps({ modelValue: '2' })
+		await wrapper.vm.$nextTick()
+		expect(instance.selectedItemText).toBe('Option 2')
+	})
+
 	it('formats items correctly', () => {
 		const items = ['Option 1', 'Option 2']
 		const wrapper = mount(SySelect, {
@@ -163,7 +185,7 @@ describe('SySelect.vue', () => {
 		const instance = wrapper.vm as any
 		instance.selectItem({ text: 'Option 1', value: '1' })
 		await wrapper.vm.$nextTick()
-		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ text: 'Option 1', value: '1' }])
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['1'])
 	})
 
 	it('closes the menu when v-click-outside directive is called', async () => {
@@ -190,4 +212,115 @@ describe('SySelect.vue', () => {
 		await wrapper.vm.closeList()
 		expect(wrapper.vm.isOpen).toBe(false)
 	})
+
+	it('emit the value when returnObject is false', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				returnObject: false,
+				items: [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.find('.sy-select').trigger('click')
+		const firstItem = wrapper.findAll('.v-list-item').at(0)
+		await firstItem!.trigger('click')
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['1'])
+
+		await wrapper.find('.sy-select').trigger('click')
+		const secondItem = wrapper.findAll('.v-list-item').at(1)
+		await secondItem!.trigger('click')
+		expect(wrapper.emitted()['update:modelValue'][1]).toEqual(['2'])
+	})
+
+	it('emit the object when returnObject is true', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				returnObject: true,
+				items: [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.sy-select').trigger('click')
+		const firstItem = wrapper.findAll('.v-list-item').at(0)
+		await firstItem!.trigger('click')
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ text: 'Option 1', value: '1' }])
+
+		await wrapper.find('.sy-select').trigger('click')
+		const secondItem = wrapper.findAll('.v-list-item').at(1)
+		await secondItem!.trigger('click')
+		expect(wrapper.emitted()['update:modelValue'][1]).toEqual([{ text: 'Option 2', value: '2' }])
+	})
+
+	it('emit the value when returnObject is false with textKey and keyValue set', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				returnObject: false,
+				textKey: 'theText',
+				valueKey: 'theValue',
+				items: [{ theText: 'Option 1', theValue: '1' }, { theText: 'Option 2', theValue: '2' }],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.find('.sy-select').trigger('click')
+		const firstItem = wrapper.findAll('.v-list-item').at(0)
+		await firstItem!.trigger('click')
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['1'])
+
+		await wrapper.find('.sy-select').trigger('click')
+		const secondItem = wrapper.findAll('.v-list-item').at(1)
+		await secondItem!.trigger('click')
+		expect(wrapper.emitted()['update:modelValue'][1]).toEqual(['2'])
+	})
+
+	it('emit the object when returnObject is true with textKey and keyValue set', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				returnObject: true,
+				textKey: 'theText',
+				valueKey: 'theValue',
+				items: [{ theText: 'Option 1', theValue: '1' }, { theText: 'Option 2', theValue: '2' }],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.sy-select').trigger('click')
+		const firstItem = wrapper.findAll('.v-list-item').at(0)
+		await firstItem!.trigger('click')
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ theText: 'Option 1', theValue: '1' }])
+
+		await wrapper.find('.sy-select').trigger('click')
+		const secondItem = wrapper.findAll('.v-list-item').at(1)
+		await secondItem!.trigger('click')
+		expect(wrapper.emitted()['update:modelValue'][1]).toEqual([{ theText: 'Option 2', theValue: '2' }])
+	})
+
+	it('emit the value when items is an array of string', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				items: ['Option 1', 'Option 2'],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.sy-select').trigger('click')
+		const firstItem = wrapper.findAll('.v-list-item').at(0)
+		await firstItem!.trigger('click')
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['Option 1'])
+
+		await wrapper.find('.sy-select').trigger('click')
+		const secondItem = wrapper.findAll('.v-list-item').at(1)
+		await secondItem!.trigger('click')
+		expect(wrapper.emitted()['update:modelValue'][1]).toEqual(['Option 2'])
+	})
 })

package/src/components/Customs/SyTextField/SyTextField.mdx

@@ -1,11 +1,11 @@
 import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
-import * as SyTextFieldStories from "./SyTextField.stories";
+import * as SyTextFieldStories from "./SyTextField.stories.ts";
 
 <Meta of={SyTextFieldStories} />
 
 # SyTextField
 
-Le composant `SyTextField` est utilisé pour proposer une alternative au `TextField` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité RGAA.
+Le composant `SyTextField` est utilisé pour proposer une alternative au `TextField` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>.
 
 Il étend les fonctionnalités de base de Vuetify avec :