@cnamts/synapse 1.0.10 → 1.0.11

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

@@ -1,7 +1,5 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { vuetify } from '@tests/unit/setup'
-
 import RatingPicker from '../RatingPicker.vue'
 import { RatingEnum } from '../Rating'
 import NumberPicker from '../NumberPicker/NumberPicker.vue'
@@ -14,9 +12,6 @@ import { locales } from '../locales'
 describe('RatingPicker', () => {
 	it('renders correctly', () => {
 		const wrapper = mount(RatingPicker, {
-			global: {
-				plugins: [vuetify],
-			},
 			stubs: {
 				NumberPicker: {
 					template: '<div />',
@@ -32,9 +27,6 @@ describe('RatingPicker', () => {
 
 	it('renders with additional content with the NumberPicker', async () => {
 		const wrapper = mount(RatingPicker, {
-			global: {
-				plugins: [vuetify],
-			},
 			stubs: {
 				NumberPicker: {
 					template: '<div />',
@@ -57,9 +49,6 @@ describe('RatingPicker', () => {
 
 	it('renders with additional content with the StarsPicker', async () => {
 		const wrapper = mount(RatingPicker, {
-			global: {
-				plugins: [vuetify],
-			},
 			stubs: {
 				StarsPicker: {
 					template: '<div />',
@@ -82,9 +71,6 @@ describe('RatingPicker', () => {
 
 	it('renders with additional content with the EmotionPicker', async () => {
 		const wrapper = mount(RatingPicker, {
-			global: {
-				plugins: [vuetify],
-			},
 			stubs: {
 				EmotionPicker: {
 					template: '<div />',
@@ -107,9 +93,6 @@ describe('RatingPicker', () => {
 
 	it('renders with additional content with the EmotionPicker when twoEmotions is true', async () => {
 		const wrapper = mount(RatingPicker, {
-			global: {
-				plugins: [vuetify],
-			},
 			stubs: {
 				EmotionPicker: {
 					template: '<div />',
@@ -133,9 +116,6 @@ describe('RatingPicker', () => {
 
 	it('do not render the additional content when the rating is good', async () => {
 		const wrapper = mount(RatingPicker, {
-			global: {
-				plugins: [vuetify],
-			},
 			stubs: {
 				NumberPicker: {
 					template: '<div />',
@@ -157,9 +137,6 @@ describe('RatingPicker', () => {
 
 	it('sends the correct values to the EmotionPicker', async () => {
 		const wrapper = mount(RatingPicker, {
-			global: {
-				plugins: [vuetify],
-			},
 			stubs: {
 				EmotionPicker: {
 					template: '<div />',

package/src/components/SearchListField/SearchListField.mdx

@@ -54,12 +54,11 @@ import SearchListField from './SearchListField.vue';
     },
     ]
 
-    const value = ref<string | null>
-(null)
+    const value = ref<string | null>(null)
 
     const selectChoice = (choice: string) => {
-    value.value = choice
-}
+        value.value = choice
+    }
 </script>
 
 <template>

package/src/components/SearchListField/SearchListField.stories.ts

@@ -1,12 +1,13 @@
 import type { StoryObj, Meta } from '@storybook/vue3'
 import SearchListField from './SearchListField.vue'
+import { fn } from '@storybook/test'
 
 const meta = {
 	title: 'Composants/Formulaires/SearchListField',
 	component: SearchListField,
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['filteredItems', 'search', 'emitChangeEvent'] },
+		controls: { exclude: ['filteredItems', 'search', 'emitChangeEvent', 'onUpdate:modelValue'] },
 	},
 	decorators: [
 		() => ({
@@ -18,6 +19,10 @@ const meta = {
 			default: '[]',
 		},
 		items: { control: { type: 'object' } },
+		returnObject: {
+			description: 'Si true, retourne l\'objet entier au lieu de la valeur',
+			control: 'boolean',
+		},
 	},
 } satisfies Meta<typeof SearchListField>
 
@@ -30,8 +35,8 @@ type Story = StoryObj<typeof meta>
  */
 export const Default: Story = {
 	args: {
-		modelValue: [],
-		items: [
+		'modelValue': [],
+		'items': [
 			{
 				label: 'Chirurgien-dentiste',
 				value: 'chirurgien-dentiste',
@@ -57,6 +62,7 @@ export const Default: Story = {
 				value: 'pharmacien',
 			},
 		],
+		'onUpdate:modelValue': fn(),
 	},
 	render: (args) => {
 		return {
@@ -130,3 +136,97 @@ const items = [
 		],
 	},
 }
+
+export const WithReturnObject: Story = {
+	args: {
+		'modelValue': [],
+		'returnObject': true,
+		'items': [
+			{
+				label: 'Chirurgien-dentiste',
+				value: 'chirurgien-dentiste',
+			},
+			{
+				label: 'Infirmier',
+				value: 'infirmier',
+			},
+			{
+				label: 'Orthophoniste',
+				value: 'orthophoniste',
+			},
+			{
+				label: 'Orthoptiste',
+				value: 'orthoptiste',
+			},
+			{
+				label: 'Pédicure-podologue',
+				value: 'pedicure-podologue',
+			},
+			{
+				label: 'Pharmacien',
+				value: 'pharmacien',
+			},
+		],
+		'onUpdate:modelValue': fn(),
+	},
+	argTypes: {
+		returnObject: { control: false },
+	},
+	render: (args) => {
+		return {
+			components: { SearchListField },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div>
+					<SearchListField v-bind="args" v-model="args.modelValue"/>
+					<div style="margin-top: 20px;">
+						<strong>Valeur(s) sélectionnée(s) :</strong>
+						<pre>{{ args.modelValue }}</pre>
+					</div>
+				</div>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SearchListField
+	v-model="modelValue"
+	:items="items"
+	:return-object="true"
+  />
+  {{ modelValue }}
+</template>
+		`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SearchListField } from '@cnamts/synapse'
+
+const modelValue = ref([])
+
+const items = [
+  {
+	label: 'Chirurgien-dentiste',
+	value: 'chirurgien-dentiste',
+  },
+  {
+	label: 'Infirmier',
+	value: 'infirmier',
+  },
+  // ... autres objets
+]
+</script>
+		`,
+			},
+		],
+	},
+}

package/src/components/SearchListField/SearchListField.vue

@@ -24,6 +24,10 @@
 			type: String,
 			default: 'white',
 		},
+		returnObject: {
+			type: Boolean,
+			default: false,
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -33,6 +37,25 @@
 	const searchIcon = mdiMagnify
 	const checkboxListRef = ref<HTMLElement | null>(null)
 
+	// Helper function for deep equality comparison
+	const isEqual = (a: unknown, b: unknown): boolean => {
+		if (a === b) return true
+		if (a === null || b === null) return false
+		if (typeof a !== 'object' || typeof b !== 'object') return false
+
+		const keysA = Object.keys(a as Record<string, unknown>)
+		const keysB = Object.keys(b as Record<string, unknown>)
+
+		if (keysA.length !== keysB.length) return false
+
+		for (const key of keysA) {
+			if (!keysB.includes(key)) return false
+			if (!isEqual((a as Record<string, unknown>)[key], (b as Record<string, unknown>)[key])) return false
+		}
+
+		return true
+	}
+
 	watch(
 		() => props.modelValue,
 		(newValue) => {
@@ -45,20 +68,22 @@
 			return props.items
 		}
 		const searchLower = search.value.toLowerCase()
-		return props.items.filter(item =>
-			item.label.toLowerCase().includes(searchLower),
-		)
+		return props.items.filter((item) => {
+			return item.label.toLowerCase().includes(searchLower)
+		})
 	})
 
 	const emitChangeEvent = (value: unknown[]) => {
 		emit('update:modelValue', value)
 	}
 
-	const toggleSelection = (itemValue: unknown) => {
+	const toggleSelection = (item: SearchListItem) => {
 		const newValue = [...internalValue.value]
-		const index = newValue.indexOf(itemValue)
+		const valueToEmit = props.returnObject ? item : item.value
+		const index = newValue.findIndex(value => props.returnObject ? isEqual(value, item) : isEqual(value, item.value))
+
 		if (index === -1) {
-			newValue.push(itemValue)
+			newValue.push(valueToEmit)
 		}
 		else {
 			newValue.splice(index, 1)
@@ -130,9 +155,9 @@
 				v-for="(item, index) in filteredItems"
 				:id="`search-list-item-${index}`"
 				:key="index"
-				:value="item.value"
+				:value="props.returnObject ? item : item.value"
 				role="option"
-				:aria-selected="internalValue.includes(item.value)"
+				:aria-selected="internalValue.some(value => props.returnObject ? isEqual(value, item) : isEqual(value, item.value))"
 				:tabindex="0"
 				active-class="text-primary"
 				class="d-flex align-center justify-start mx-4"
@@ -149,7 +174,7 @@
 							hide-details
 							class="ml-2 search-list-checkbox"
 							density="compact"
-							@click="toggleSelection(item.value)"
+							@click="toggleSelection(item)"
 						/>
 					</VListItemAction>
 

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

@@ -1,20 +1,10 @@
 import { mount } from '@vue/test-utils'
 import SearchListField from '../SearchListField.vue'
-import { describe, it, expect, beforeEach } from 'vitest'
-import { createVuetify } from 'vuetify'
+import { describe, it, expect } from 'vitest'
 
 describe('SearchListField.vue', () => {
-	let vuetify
-
-	beforeEach(() => {
-		vuetify = createVuetify()
-	})
-
 	it('renders the password field', () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -34,9 +24,6 @@ describe('SearchListField.vue', () => {
 
 	it('initial state', () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -59,9 +46,6 @@ describe('SearchListField.vue', () => {
 
 	it('initial state with empty value prop', () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -84,9 +68,6 @@ describe('SearchListField.vue', () => {
 
 	it('selects an item', async () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -111,9 +92,6 @@ describe('SearchListField.vue', () => {
 
 	it('filters items based on search input', async () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -142,9 +120,6 @@ describe('SearchListField.vue', () => {
 
 	it('clears the search field', async () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -169,9 +144,6 @@ describe('SearchListField.vue', () => {
 
 	it('filteredItems computed property', async () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -195,9 +167,6 @@ describe('SearchListField.vue', () => {
 
 	it('filteredItems computed property with null search', async () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -221,9 +190,6 @@ describe('SearchListField.vue', () => {
 
 	it('filteredItems computed property with multiple matching items', async () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -249,9 +215,6 @@ describe('SearchListField.vue', () => {
 
 	it('emitChangeEvent method', async () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -273,9 +236,6 @@ describe('SearchListField.vue', () => {
 
 	it('emits the update:modelValue event when an item is selected', async () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -300,9 +260,6 @@ describe('SearchListField.vue', () => {
 
 	it('renders the password field without outlined prop', () => {
 		const wrapper = mount(SearchListField, {
-			global: {
-				plugins: [vuetify],
-			},
 			propsData: {
 				items: [
 					{
@@ -320,4 +277,101 @@ describe('SearchListField.vue', () => {
 
 		expect(wrapper.find('.v-field--variant-underlined')).toBeTruthy()
 	})
+
+	describe('Return object functionality', () => {
+		it('emits values when returnObject is false (default)', async () => {
+			const items = [
+				{
+					label: 'First Item',
+					value: { id: 1, name: 'First' },
+				},
+				{
+					label: 'Second Item',
+					value: { id: 2, name: 'Second' },
+				},
+			]
+
+			const wrapper = mount(SearchListField, {
+				propsData: {
+					items,
+					modelValue: [],
+					returnObject: false,
+				},
+			})
+
+			wrapper.vm.toggleSelection(items[0])
+			await wrapper.vm.$nextTick()
+
+			const emittedEvents = wrapper.emitted('update:modelValue')
+			expect(emittedEvents).toBeTruthy()
+			expect(emittedEvents![0]).toEqual([[{ id: 1, name: 'First' }]])
+		})
+
+		it('emits entire objects when returnObject is true', async () => {
+			const items = [
+				{
+					label: 'First Item',
+					value: { id: 1, name: 'First' },
+				},
+				{
+					label: 'Second Item',
+					value: { id: 2, name: 'Second' },
+				},
+			]
+
+			const wrapper = mount(SearchListField, {
+				propsData: {
+					items,
+					modelValue: [],
+					returnObject: true,
+				},
+			})
+
+			wrapper.vm.toggleSelection(items[0])
+			await wrapper.vm.$nextTick()
+
+			const emittedEvents = wrapper.emitted('update:modelValue')
+			expect(emittedEvents).toBeTruthy()
+			expect(emittedEvents![0]).toEqual([[items[0]]])
+		})
+
+		it('handles selection and deselection correctly with returnObject true', async () => {
+			const items = [
+				{
+					label: 'First Item',
+					value: { id: 1, name: 'First' },
+				},
+				{
+					label: 'Second Item',
+					value: { id: 2, name: 'Second' },
+				},
+			]
+
+			const wrapper = mount(SearchListField, {
+				propsData: {
+					items,
+					modelValue: [],
+					returnObject: true,
+				},
+			})
+
+			// Select first item
+			wrapper.vm.toggleSelection(items[0])
+			await wrapper.vm.$nextTick()
+
+			const emittedEvents = wrapper.emitted('update:modelValue')
+			expect(emittedEvents).toBeTruthy()
+			expect(emittedEvents![0]).toEqual([[items[0]]])
+
+			// Update props to simulate parent component update
+			await wrapper.setProps({ modelValue: [items[0]] })
+			await wrapper.vm.$nextTick()
+
+			// Deselect first item
+			wrapper.vm.toggleSelection(items[0])
+			await wrapper.vm.$nextTick()
+
+			expect(emittedEvents![1]).toEqual([[]])
+		})
+	})
 })

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

@@ -1,14 +1,6 @@
 import { mount, VueWrapper } from '@vue/test-utils'
 import SocialMediaLinks from '../SocialMediaLinks.vue'
 import { describe, it, expect, afterEach } from 'vitest'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
-
-const vuetify = createVuetify({
-	components,
-	directives,
-})
 
 describe('SocialMediaLinks', () => {
 	let wrapper: VueWrapper
@@ -21,9 +13,6 @@ describe('SocialMediaLinks', () => {
 
 	it('renders correctly with default props', () => {
 		wrapper = mount(SocialMediaLinks, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				links: undefined,
 				headingLevel: 6,
@@ -45,9 +34,6 @@ describe('SocialMediaLinks', () => {
 			{ href: 'https://facebook.com', name: 'Facebook', icon: 'mdi-facebook' },
 		]
 		wrapper = mount(SocialMediaLinks, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				links,
 				headingLevel: 6,
@@ -80,9 +66,6 @@ describe('SocialMediaLinks', () => {
 			{ href: 'https://facebook.com', name: 'Facebook', icon: 'mdi-facebook' },
 		]
 		wrapper = mount(SocialMediaLinks, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				links,
 				headingLevel: 6,
@@ -94,9 +77,6 @@ describe('SocialMediaLinks', () => {
 
 	it('renders no links when links prop is empty array', () => {
 		wrapper = mount(SocialMediaLinks, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				links: [],
 				headingLevel: 6,
@@ -108,9 +88,6 @@ describe('SocialMediaLinks', () => {
 
 	it('renders no links when links prop is null', () => {
 		wrapper = mount(SocialMediaLinks, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				links: undefined,
 				headingLevel: 6,
@@ -123,9 +100,6 @@ describe('SocialMediaLinks', () => {
 	it('renders with correct heading level when headingLevel prop is provided', () => {
 		const headingLevel = 3
 		wrapper = mount(SocialMediaLinks, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				links: [],
 				headingLevel,
@@ -138,9 +112,6 @@ describe('SocialMediaLinks', () => {
 	it('renders with span and ARIA attributes when useNativeHeading is false', () => {
 		const headingLevel = 4
 		wrapper = mount(SocialMediaLinks, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				links: [],
 				headingLevel,
@@ -158,9 +129,6 @@ describe('SocialMediaLinks', () => {
 			{ href: 'https://twitter.com', name: 'Twitter', icon: 'mdi-twitter' },
 		]
 		wrapper = mount(SocialMediaLinks, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				links,
 				headingLevel: 6,

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

@@ -1,9 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { vuetify } from '@tests/unit/setup'
-
 import SubHeader from '../SubHeader.vue'
-
 import type { DataList } from '@/components/DataList/types'
 import type { DataListGroupItems } from '@/components/DataListGroup/types'
 
@@ -49,9 +46,6 @@ const dataListGroupItems: DataListGroupItems = [
 describe('SubHeader', () => {
 	it('renders correctly', () => {
 		const wrapper = mount(SubHeader, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				hideBackBtn: false,
 				backBtnText: 'Retour',
@@ -67,9 +61,6 @@ describe('SubHeader', () => {
 
 	it('renders loading state correctly', async () => {
 		const wrapper = mount(SubHeader, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				hideBackBtn: false,
 				titleText: 'Test',
@@ -84,9 +75,6 @@ describe('SubHeader', () => {
 
 	it('get subTitleText is defined', async () => {
 		const wrapper = mount(SubHeader, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				hideBackBtn: false,
 				titleText: 'Test',
@@ -101,9 +89,6 @@ describe('SubHeader', () => {
 
 	it('emits itemAction event when called', async () => {
 		const wrapper = mount(SubHeader, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				hideBackBtn: false,
 				titleText: 'Test',
@@ -121,9 +106,6 @@ describe('SubHeader', () => {
 
 	it('emits back event when called in slot', async () => {
 		const wrapper = mount(SubHeader, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				hideBackBtn: false,
 				titleText: 'Test',