@cnamts/synapse 0.0.8-alpha → 0.0.9-alpha

package/src/components/SearchListField/SearchListField.mdx

@@ -0,0 +1,74 @@
+import {Canvas, Meta, Controls, Source} from '@storybook/blocks';
+import * as SearchListFieldStories from './SearchListField.stories';
+import SearchListField from './SearchListField.vue';
+
+<Meta title="Composants/Formulaires/SearchListField" component={SearchListField}/>
+
+# 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.
+
+<Canvas story={{height: '150px'}} of={SearchListFieldStories.Default}/>
+
+# API
+
+<Controls of={SearchListFieldStories.Default}/>
+
+## Utilisation de base
+
+    <Source
+        dark
+        code={`
+<script setup lang="ts">
+    import { ref } from 'vue'
+    import { SearchListField } from '@cnamts/synapse'
+
+    import type { SearchListItem } from '@cnamts/synapse/src/components/SearchListField/types'
+
+    const items: SearchListItem[] = [
+    {
+        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',
+    },
+    ]
+
+    const value = ref<string | null>(null)
+
+    const selectChoice = (choice: string) => {
+    value.value = choice
+}
+</script>
+
+<template>
+    <SearchListField
+        :items="items"
+        @update:model-value="($event) => selectChoice($event)"
+    />
+    <br>
+    <pre>Selected: {{ value }}</pre>
+</template>
+`}
+/>
+
+

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

@@ -0,0 +1,126 @@
+import type { StoryObj, Meta } from '@storybook/vue3'
+import SearchListField from './SearchListField.vue'
+
+const meta = {
+	title: 'Composants/Formulaires/SearchListField',
+	component: SearchListField,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['filteredItems', 'search', 'emitChangeEvent'] },
+	},
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
+	argTypes: {
+		modelValue: {
+			default: '[]',
+		},
+		items: { control: { type: 'object' } },
+	},
+} satisfies Meta<typeof SearchListField>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/**
+ * Story par défaut
+ */
+export const Default: Story = {
+	args: {
+		modelValue: [],
+		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',
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { SearchListField },
+			setup() {
+				return { args }
+			},
+			template: `
+                <SearchListField v-bind="args" v-model="args.modelValue"/>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SearchListField
+   	v-model="modelValue"
+	:items="items"
+  />
+  {{ 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',
+  },
+  {
+	label: 'Orthophoniste',
+	value: 'orthophoniste',
+  },
+  {
+	label: 'Orthoptiste',
+	value: 'orthoptiste',
+  },
+  {
+	label: 'Pédicure-podologue',
+	value: 'pedicure-podologue',
+  },
+  {
+	label: 'Pharmacien',
+	value: 'pharmacien',
+  },
+]
+</script>
+        `,
+			},
+		],
+	},
+}

package/src/components/SearchListField/SearchListField.vue

@@ -0,0 +1,194 @@
+<script lang="ts" setup>
+	import { ref, computed, watch } from 'vue'
+	import { mdiMagnify } from '@mdi/js'
+	import type { PropType } from 'vue'
+	import type { SearchListItem } from './types'
+	import { locales } from './locales'
+
+	import { SyTextField } from '@/components'
+
+	const props = defineProps({
+		modelValue: {
+			type: Array as PropType<unknown[]>,
+			default: () => [],
+		},
+		items: {
+			type: Array as PropType<SearchListItem[]>,
+			default: () => [],
+		},
+		outlined: {
+			type: Boolean,
+			default: true,
+		},
+	})
+
+	const emit = defineEmits(['update:modelValue'])
+
+	const search = ref<string | null>(null)
+	const internalValue = ref<unknown[]>(props.modelValue)
+	const searchIcon = mdiMagnify
+
+	watch(
+		() => props.modelValue,
+		(newValue) => {
+			internalValue.value = newValue
+		},
+	)
+
+	const filteredItems = computed(() => {
+		if (search.value === null) {
+			return props.items
+		}
+		const searchLower = search.value.toLowerCase()
+		return props.items.filter(item =>
+			item.label.toLowerCase().includes(searchLower),
+		)
+	})
+
+	const emitChangeEvent = (value: unknown[]) => {
+		emit('update:modelValue', value)
+	}
+
+	defineExpose({
+		filteredItems,
+		search,
+		emitChangeEvent,
+	})
+</script>
+
+<template>
+	<div class="vd-search-list">
+		<SyTextField
+			v-model="search"
+			:label="locales.search"
+			aria-describedby="search-description"
+			aria-labelledby="search-label"
+			hide-details
+			color="primary"
+			:variant="outlined ? 'outlined' : 'underlined'"
+			clearable
+			tabindex="0"
+		>
+			<template #prepend-inner>
+				<VIcon class="mr-1">
+					{{ searchIcon }}
+				</VIcon>
+			</template>
+		</SyTextField>
+
+		<!-- eslint-disable-next-line  vuejs-accessibility/label-has-for -->
+		<label
+			id="search-label"
+			class="d-sr-only"
+		>
+			{{ locales.search }}
+		</label>
+		<span
+			id="search-description"
+			class="d-sr-only"
+		>
+			{{ locales.search }}
+		</span>
+
+		<VList
+			id="search-list"
+			v-model:selected="internalValue"
+			title="search-list"
+			select-strategy="classic"
+			class="pb-0"
+			role="listbox"
+			aria-labelledby="search-list-title"
+			@update:selected="emitChangeEvent"
+		>
+			<h2
+				id="search-list-title"
+				class="d-sr-only"
+			>
+				{{ locales.searchListTitle }}
+			</h2>
+			<VListItem
+				v-for="(item, index) in filteredItems"
+				:id="`search-list-item-${index}`"
+				:key="index"
+				:value="item.value"
+				role="option"
+				:aria-selected="internalValue.includes(item.value)"
+				:aria-labelledby="`search-list-item-${index}`"
+				:tabindex="0"
+				active-class="text-primary"
+				class="d-flex align-center justify-start mx-4"
+			>
+				<span
+					:id="`search-list-item-label-${index}`"
+					class="d-sr-only"
+				>
+					{{ item.label }}
+				</span>
+				<template #prepend="{ isActive }">
+					<VListItemAction start>
+						<input
+							:id="`checkbox-${index}`"
+							type="checkbox"
+							role="option"
+							:checked="isActive"
+							:aria-selected="isActive"
+							:aria-label="`${locales.checkboxLabel} ${item.label}`"
+							:aria-labelledby="`checkbox-${index}`"
+							:title="`${locales.checkboxLabel} ${item.label}`"
+							class="custom-checkbox ml-2"
+						>
+						<!-- eslint-disable-next-line  vuejs-accessibility/label-has-for -->
+						<label
+							:for="`checkbox-${index}`"
+							class="d-sr-only"
+						>
+							{{ locales.checkboxLabel }}
+						</label>
+					</VListItemAction>
+
+					<VListItemTitle>{{ item.label }}</VListItemTitle>
+				</template>
+			</VListItem>
+		</VList>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.v-list {
+	background: transparent;
+}
+
+.vd-search-list .v-list-item--active::before {
+	opacity: 0;
+}
+
+.custom-checkbox {
+	appearance: none;
+	width: 20px;
+	height: 20px;
+	border: 2px solid rgb(0 0 0 / 50%);
+	border-radius: 2px;
+	outline: none;
+	cursor: pointer;
+	transition: all 0.3s ease;
+}
+
+.custom-checkbox:checked {
+	background-color: tokens.$primary-base !important;
+	border-color: tokens.$primary-base !important;
+
+	&::before {
+		content: '\2713';
+		display: block;
+		text-align: center;
+		line-height: 15px;
+		color: #fff;
+	}
+}
+
+.custom-checkbox:hover {
+	border-color: tokens.$primary-darker !important;
+}
+</style>

package/src/components/SearchListField/locales.ts

@@ -0,0 +1,5 @@
+export const locales = {
+	search: 'Rechercher',
+	searchListTitle: 'Liste des éléments',
+	checkboxLabel: 'Sélectionner la valeur',
+}

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

@@ -0,0 +1,323 @@
+import { mount } from '@vue/test-utils'
+import SearchListField from '../SearchListField.vue'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createVuetify } from 'vuetify'
+
+describe('SearchListField.vue', () => {
+	let vuetify
+
+	beforeEach(() => {
+		vuetify = createVuetify()
+	})
+
+	it('renders the password field', () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+				modelValue: [1],
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('initial state', () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+			},
+		})
+
+		expect(wrapper.vm.filteredItems).toEqual(wrapper.props().items)
+		expect(
+			wrapper.find('.vd-search-list .v-list-item--active').exists(),
+		).toBe(false)
+	})
+
+	it('initial state with empty value prop', () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+				modelValue: [],
+			},
+		})
+
+		expect(
+			wrapper.find('.vd-search-list .v-list-item--active').exists(),
+		).toBe(false)
+	})
+
+	it('selects an item', async () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+			},
+		})
+
+		const listItem = wrapper.find('.vd-search-list .v-list-item')
+		await listItem.trigger('click')
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('update:modelValue')).toEqual([[[1]]])
+		expect(listItem.classes()).toContain('v-list-item--active')
+	})
+
+	it('filters items based on search input', async () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Apple',
+						value: 'apple',
+					},
+					{
+						label: 'Banana',
+						value: 'banana',
+					},
+					{
+						label: 'Orange',
+						value: 'orange',
+					},
+				],
+			},
+		})
+
+		wrapper.vm.search = 'Banana'
+		await wrapper.vm.$nextTick()
+
+		const filteredItems = wrapper.vm.filteredItems
+		expect(filteredItems).toHaveLength(1)
+		expect(filteredItems[0].label).toBe('Banana')
+	})
+
+	it('clears the search field', async () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+			},
+		})
+
+		wrapper.vm.search = 'Item 1'
+		await wrapper.vm.$nextTick()
+
+		await wrapper.find('.v-icon--clickable').trigger('click')
+
+		expect(wrapper.vm.search).toBeNull()
+	})
+
+	it('filteredItems computed property', async () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+			},
+		})
+
+		expect(wrapper.vm.filteredItems).toHaveLength(2)
+
+		wrapper.vm.search = 'Item 1'
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.filteredItems).toHaveLength(1)
+	})
+
+	it('filteredItems computed property with null search', async () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+			},
+		})
+
+		expect(wrapper.vm.filteredItems).toHaveLength(2)
+
+		wrapper.vm.search = null
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.filteredItems).toHaveLength(2)
+	})
+
+	it('filteredItems computed property with multiple matching items', async () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+					{
+						label: 'Another Item 1',
+						value: 3,
+					},
+				],
+			},
+		})
+
+		wrapper.vm.search = 'Item 1'
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.filteredItems).toHaveLength(2)
+	})
+
+	it('emitChangeEvent method', async () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+			},
+		})
+
+		wrapper.vm.emitChangeEvent([''])
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+	})
+
+	it('emits the update:modelValue event when an item is selected', async () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+			},
+		})
+
+		const listItem = wrapper.find('.vd-search-list .v-list-item')
+		listItem.trigger('click')
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')).toEqual([[[1]]])
+	})
+
+	it('renders the password field without outlined prop', () => {
+		const wrapper = mount(SearchListField, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+				outlined: false,
+			},
+		})
+
+		expect(wrapper.find('.v-field--variant-underlined')).toBeTruthy()
+	})
+})

package/src/components/SearchListField/types.d.ts

@@ -0,0 +1,4 @@
+export interface SearchListItem {
+	label: string
+	value: unknown
+}