@cnamts/synapse 0.0.11-alpha → 0.0.12-alpha

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,14 @@
 			type: String,
 			default: 'value',
 		},
+		displayAsterisk: {
+			type: Boolean,
+			default: false,
+		},
+		returnObject: {
+			type: Boolean,
+			default: false,
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -65,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
 	}
 
@@ -76,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(() => {
@@ -134,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"

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'])
+	})
 })