@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

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.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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 	import { mdiInformation, mdiMenuDown } from '@mdi/js'
 	import { ref, watch, onMounted, computed, type PropType } from 'vue'
+	import type { VTextField } from 'vuetify/components'
 
 	const props = defineProps({
 		modelValue: {
@@ -13,7 +14,7 @@
 		},
 		label: {
 			type: String,
-			default: '',
+			default: 'Sélectionnez une option',
 		},
 		errorMessages: {
 			type: [String, Array] as PropType<string | readonly string[]>,
@@ -43,6 +44,14 @@
 			type: String,
 			default: 'value',
 		},
+		displayAsterisk: {
+			type: Boolean,
+			default: false,
+		},
+		returnObject: {
+			type: Boolean,
+			default: false,
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -64,8 +73,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
 	}
 
@@ -75,11 +90,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(() => {
@@ -95,6 +121,8 @@
 		return (props.required || props.errorMessages.length > 0) && !selectedItem.value
 	})
 
+	const input = ref<InstanceType<typeof VTextField> | null>(null)
+
 	watch(() => props.modelValue, (newValue) => {
 		selectedItem.value = newValue
 	})
@@ -131,16 +159,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'"
+			:label="labelWithAsterisk"
+			:aria-label="labelWithAsterisk"
 			:error-messages="errorMessages"
 			:variant="outlined ? 'outlined' : 'underlined'"
 			:rules="isRequired ? ['Le champ est requis.'] : []"
+			:display-asterisk="displayAsterisk"
 			class="sy-select"
 			:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
 			@click="toggleMenu"
@@ -166,7 +195,7 @@
 		<VList
 			v-if="isOpen"
 			class="v-list"
-			:style="`min-width: ${$refs.input?.$el.offsetWidth}px`"
+			:style="`min-width: ${input?.$el.offsetWidth}px`"
 			@keydown.esc.prevent="isOpen = false"
 		>
 			<VListItem

package/src/components/Customs/SySelect/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/Customs/SySelect/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/Formulaires/SySelect/Usages',
+}
+
+const itemsToDo = [
+	'Utiliser un libellé clair et concis.',
+	'Trier les options de manière logique (alphabétique, fréquence d\'utilisation).',
+	'Limiter le nombre d\'options dans une liste sans recherche.',
+]
+
+const itemsNotToDo = [
+	'Utiliser le composant pour des choix binaires (préférer un bouton radio).',
+	'Utiliser une valeur par défaut si la selection n\'est pas requise.',
+]
+
+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/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

@@ -7,6 +7,13 @@ import * as SyTextFieldStories from "./SyTextField.stories";
 
 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.
 
+Il étend les fonctionnalités de base de Vuetify avec :
+
+- Un système de validation avancé
+- Des états visuels (erreur, avertissement, succès)
+- Des icônes de validation automatiques
+- Une personnalisation poussée des messages
+
 <Canvas of={SyTextFieldStories.Default} />
 
 
@@ -15,6 +22,20 @@ Le composant `SyTextField` est utilisé pour proposer une alternative au `TextFi
 <Controls of={SyTextFieldStories.Default} />
 
 
+
+## Validation
+
+Le composant supporte deux types de validation :
+- Règles d'erreur standard (\`customRules\`)
+- Règles d'avertissement (\`customWarningRules\`)
+
+### États visuels :
+
+Le champ adapte automatiquement son apparence selon son état :
+- Rouge pour les erreurs
+- Orange pour les avertissements
+- Vert pour les succès
+
 # Exemple d'utilisation
 
 <Source