@cnamts/synapse 0.0.4-alpha → 0.0.5-alpha

package/src/components/Customs/{CustomInputSelect/CustomInputSelect.vue → SyInputSelect/SyInputSelect.vue}

@@ -43,7 +43,7 @@
 		isOpen.value = false
 	}
 
-	const inputId = ref(`custom-input-select-${Math.random().toString(36).substring(7)}`)
+	const inputId = ref(`sy-input-select-${Math.random().toString(36).substring(7)}`)
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 	const selectItem = (item: any) => {
@@ -113,6 +113,14 @@
 		localErrorMessages.value = []
 		return true
 	}
+
+	defineExpose({
+		isOpen,
+		closeList,
+		selectItem,
+		selectedItem,
+		getItemText,
+	})
 </script>
 
 <template>
@@ -128,7 +136,7 @@
 		<div
 			ref="menu"
 			v-click-outside="closeList"
-			:class="['custom-select', buttonClass, 'text-'+options.menu.color]"
+			:class="['sy-input-select', buttonClass, 'text-'+options.menu.color]"
 			role="menu"
 			tabindex="0"
 			@click="toggleMenu"

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

@@ -0,0 +1,140 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import SyInputSelect from '../SyInputSelect.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('SyInputSelect', () => {
+	it('renders the component with default props', () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.find('.sy-input-select').text()).toBe('Sélectionnez une option')
+	})
+
+	it('displays the selected item text', async () => {
+		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
+		const wrapper = mount(SyInputSelect, {
+			props: { items, modelValue: { text: 'Option 1', value: '1' } },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.sy-input-select').text()).toContain('Option 1')
+	})
+
+	it('does not render error messages when not provided', () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+	})
+
+	it('does not render the label when not provided', () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('label').exists()).toBe(false)
+	})
+
+	it('formats items correctly', () => {
+		const items = ['Option 1', 'Option 2']
+		const wrapper = mount(SyInputSelect, {
+			props: { items, textKey: 'text', valueKey: 'value' },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		const formattedItems = (wrapper.vm as any).formattedItems
+		expect(formattedItems).toEqual([
+			{ text: 'Option 1', value: 'Option 1' },
+			{ text: 'Option 2', value: 'Option 2' },
+		])
+	})
+
+	it('applies the correct button class when outlined is true', () => {
+		const wrapper = mount(SyInputSelect, {
+			props: { outlined: true },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.sy-input-select').classes()).toContain('v-btn--variant-outlined')
+	})
+
+	it('toggles the menu when the button is clicked', async () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		const button = wrapper.find('.sy-input-select')
+		await button.trigger('click')
+		expect(wrapper.vm.isOpen).toBe(true)
+		await button.trigger('click')
+		expect(wrapper.vm.isOpen).toBe(false)
+	})
+
+	it('use closeList method', async () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.vm.closeList()
+		expect(wrapper.vm.isOpen).toBe(false)
+	})
+
+	it('selectItem method', async () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.vm.selectItem({ text: 'Option 1', value: '1' })
+		expect(wrapper.vm.isOpen).toBe(false)
+		expect(wrapper.vm.selectedItem).toEqual({ text: 'Option 1', value: '1' })
+	})
+
+	it('getItemText method', async () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		const item = { text: 'Option 1', value: '1' }
+		const text = wrapper.vm.getItemText(item)
+		expect(text).toBe('Option 1')
+	})
+
+	it('watch modelValue', async () => {
+		const wrapper = mount(SyInputSelect, {
+			props: { modelValue: { text: 'Option 1', value: '1' } },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.vm.selectedItem).toEqual({ text: 'Option 1', value: '1' })
+		await wrapper.setProps({ modelValue: { text: 'Option 2', value: '2' } })
+		expect(wrapper.vm.selectedItem).toEqual({ text: 'Option 2', value: '2' })
+	})
+
+	it('watch errorMessages', async () => {
+		const wrapper = mount(SyInputSelect, {
+			props: { errorMessages: ['Error message'] },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.v-messages__message').exists()).toBe(true)
+		await wrapper.setProps({ errorMessages: [] })
+		expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+	})
+})

package/src/components/Customs/{CustomSelect/CustomSelect.mdx → SySelect/SySelect.mdx}

@@ -1,26 +1,26 @@
 import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
-import * as CustomSelectStories from "./CustomSelect.stories";
+import * as SySelectStories from "./SySelect.stories";
 
-<Meta of={CustomSelectStories} />
+<Meta of={SySelectStories} />
 
-# CustomSelect
+# SySelect
 
-Le composant `CustomSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles d'accessibilité RGAA.
+Le composant `SySelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles d'accessibilité RGAA.
 
-<Canvas of={CustomSelectStories.Default} />
+<Canvas of={SySelectStories.Default} />
 
-<Story of={CustomSelectStories.Info} />
+<Story of={SySelectStories.Info} />
 
 # API
 
-<Controls of={CustomSelectStories.Default} />
+<Controls of={SySelectStories.Default} />
 
 # Exemple d'utilisation
 
 <Source dark code={`
 <script setup lang="ts">
 	import { ref } from 'vue'
-	import CustomSelect from '@cnamts/synapse'
+	import SySelect from '@cnamts/synapse'
 
 	const selectedValue = ref(undefined)
 

package/src/components/Customs/{CustomSelect/CustomSelect.stories.ts → SySelect/SySelect.stories.ts}

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import CustomSelect from '@/components/Customs/CustomSelect/CustomSelect.vue'
+import SySelect from '@/components/Customs/SySelect/SySelect.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
 import { ref } from 'vue'
 import Alert from '../../Alert/Alert.vue'
 
 const meta = {
-	title: 'Composants/Formulaires/CustomSelect',
-	component: CustomSelect,
+	title: 'Composants/Formulaires/SySelect',
+	component: SySelect,
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['selectedValue'] },
+		controls: { exclude: ['selectedValue', 'isOpen', 'closeList'] },
 	},
 	argTypes: {
 		selectedValue: { control: 'text' },
@@ -17,7 +17,7 @@ const meta = {
 		errorMessages: { control: 'object' },
 		required: { control: 'boolean' },
 	},
-} as Meta<typeof CustomSelect>
+} as Meta<typeof SySelect>
 
 export default meta
 
@@ -29,7 +29,7 @@ export const Default: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomSelect
+					<SySelect
 						v-model="value"
 						:items="items"
 					/>
@@ -40,7 +40,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomSelect from '@cnamts/CustomSelect'
+					import SySelect from '@cnamts/SySelect'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
@@ -59,13 +59,13 @@ export const Default: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomSelect
+					<SySelect
 						v-bind="args"
 					/>
 				</div>
@@ -82,7 +82,7 @@ export const Outlined: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomSelect
+					<SySelect
 						v-model="value"
 						:items="items"
 						outlined
@@ -94,7 +94,7 @@ export const Outlined: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomSelect from '@cnamts/CustomSelect'
+					import SySelect from '@cnamts/SySelect'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
@@ -113,13 +113,13 @@ export const Outlined: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4" style="z-index: 99999">
-					<CustomSelect
+					<SySelect
 						v-bind="args"
 						outlined
 					/>
@@ -136,7 +136,7 @@ export const Required: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomSelect
+					<SySelect
 						v-model="value"
 						:items="items"
 						required
@@ -148,7 +148,7 @@ export const Required: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomSelect from '@cnamts/CustomSelect'
+					import SySelect from '@cnamts/SySelect'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
@@ -168,13 +168,13 @@ export const Required: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomSelect },
+			components: { SySelect },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomSelect
+					<SySelect
 						v-bind="args"
 						:required="args.required"
 					/>
@@ -191,7 +191,7 @@ export const withCustomError: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomSelect
+					<SySelect
 						v-model="value"
 						:items="items"
 						:error-messages="errorMessages"
@@ -206,7 +206,7 @@ export const withCustomError: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomSelect from '@cnamts/CustomSelect'
+					import SySelect from '@cnamts/SySelect'
 					import { ref } from 'vue'
 					
 					const items =  [
@@ -232,7 +232,7 @@ export const withCustomError: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				const errorMessages = ref([])
 				const triggerError = () => {
@@ -243,7 +243,7 @@ export const withCustomError: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomSelect
+					<SySelect
 						v-bind="args"
 						:error-messages="errorMessages"
 					/>
@@ -265,7 +265,7 @@ export const withCustomKey: Story = {
 				name: 'Template',
 				code: `
 					<template>
-						<CustomSelect
+						<SySelect
 							v-model="value"
 							:items="items"
 							text-key="customKey"
@@ -278,7 +278,7 @@ export const withCustomKey: Story = {
 				name: 'Script',
 				code: `
 					<script setup lang="ts">
-						import CustomSelect from '@cnamts/CustomSelect'
+						import SySelect from '@cnamts/SySelect'
 						
 						const items =  [
 							{ customKey: 'Choix 1', value: '1' },
@@ -297,13 +297,13 @@ export const withCustomKey: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomSelect
+					<SySelect
 						v-bind="args"
 						outlined
 						text-key="customKey"

package/src/components/Customs/{CustomSelect/CustomSelect.vue → SySelect/SySelect.vue}

@@ -26,7 +26,7 @@
 		},
 		menuId: {
 			type: String,
-			default: 'custom-select-menu',
+			default: 'sy-select-menu',
 		},
 		outlined: {
 			type: Boolean,
@@ -45,7 +45,7 @@
 	const emit = defineEmits(['update:modelValue'])
 
 	const isOpen = ref(false)
-	const selectedItem = ref<Record<string, unknown > | string | null>(props.modelValue)
+	const selectedItem = ref<Record<string, unknown > | string | null | undefined>(props.modelValue)
 	const hasError = ref(false)
 
 	const toggleMenu = () => {
@@ -54,7 +54,7 @@
 	const closeList = () => {
 		isOpen.value = false
 	}
-	const inputId = ref(`custom-select-${Math.random().toString(36).substring(7)}`)
+	const inputId = ref(`sy-select-${Math.random().toString(36).substring(7)}`)
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 	const selectItem = (item: any) => {
@@ -97,6 +97,10 @@
 		hasError.value = !newValue && !selectedItem.value && isRequired.value
 	})
 
+	defineExpose({
+		isOpen,
+		closeList,
+	})
 </script>
 
 <template>
@@ -115,7 +119,7 @@
 			:error-messages="errorMessages"
 			:variant="outlined ? 'outlined' : 'underlined'"
 			:rules="isRequired ? ['Le champ est requis.'] : []"
-			class="custom-select"
+			class="sy-select"
 			@click="toggleMenu"
 			@keydown.enter.prevent="toggleMenu"
 			@keydown.space.prevent="toggleMenu"
@@ -159,7 +163,7 @@
 <style scoped lang="scss">
 @use '@/assets/tokens.scss';
 
-.custom-select {
+.sy-select {
   display: flex;
   flex-direction: column;
   min-width: 225px;

package/src/components/Customs/{CustomInputSelect/tests/CustomInputSelect.spec.ts → SySelect/tests/SySelect.spec.ts}

@@ -1,90 +1,51 @@
 import { mount } from '@vue/test-utils'
 import { expect, describe, it } from 'vitest'
-import CustomSelect from '../CustomInputSelect.vue'
+import SySelect from '../SySelect.vue'
 import { vuetify } from '@tests/unit/setup'
 
-describe('CustomInputSelect.vue', () => {
+describe('SySelect.vue', () => {
 	it('renders the component with default props', () => {
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			global: {
 				plugins: [vuetify],
 			},
 		})
 		expect(wrapper.exists()).toBe(true)
-		expect(wrapper.find('.custom-select').text()).toBe('Sélectionnez une option')
+		expect(wrapper.find('.sy-select').text()).toBe('')
 	})
 
-	it('toggles the menu when clicked', async () => {
-		const wrapper = mount(CustomSelect, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		await wrapper.find('.custom-select').trigger('click')
-		expect(wrapper.find('.v-list').exists()).toBe(true)
-		await wrapper.find('.custom-select').trigger('click')
-		expect(wrapper.find('.v-list').exists()).toBe(false)
-	})
-
-	it('selects an item when clicked', async () => {
-		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
-		const wrapper = mount(CustomSelect, {
-			props: { items },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		await wrapper.find('.custom-select').trigger('click')
-		const firstItem = wrapper.findAll('.v-list-item').at(0)
-		if (firstItem) {
-			await firstItem.trigger('click')
-		}
-		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ text: 'Option 1', value: '1' }])
-	})
-
-	it('closes the menu when an item is selected', async () => {
+	it('displays the selected item text', async () => {
 		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
-		const wrapper = mount(CustomSelect, {
-			props: { items },
+		const wrapper = mount(SySelect, {
+			props: { items, modelValue: { text: 'Option 1', value: '1' } },
 			global: {
 				plugins: [vuetify],
 			},
 		})
-		await wrapper.find('.custom-select').trigger('click')
+		await wrapper.find('.sy-select').trigger('click')
 		const firstItem = wrapper.findAll('.v-list-item').at(0)
 		if (firstItem) {
 			await firstItem.trigger('click')
 		}
-		expect(wrapper.find('.v-list').exists()).toBe(false)
-	})
-
-	it('displays the selected item text', async () => {
-		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
-		const wrapper = mount(CustomSelect, {
-			props: { items, modelValue: { text: 'Option 1', value: '1' } },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		expect(wrapper.find('.custom-select').text()).toContain('Option 1')
+		expect(wrapper.find('input').element.value).toBe('Option 1')
 	})
 
 	it('closes the menu on escape key press', async () => {
 		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			props: { items },
 			global: {
 				plugins: [vuetify],
 			},
 		})
-		await wrapper.find('.custom-select').trigger('click')
+		await wrapper.find('.sy-select').trigger('click')
 		await wrapper.find('.v-list').trigger('keydown.esc')
 		expect(wrapper.find('.v-list').exists()).toBe(false)
 	})
 
 	it('renders error messages when provided', () => {
 		const errorMessages = ['Error 1']
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			props: { errorMessages },
 			global: {
 				plugins: [vuetify],
@@ -94,7 +55,7 @@ describe('CustomInputSelect.vue', () => {
 	})
 
 	it('does not render error messages when not provided', () => {
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			global: {
 				plugins: [vuetify],
 			},
@@ -102,17 +63,8 @@ describe('CustomInputSelect.vue', () => {
 		expect(wrapper.find('.v-messages__message').exists()).toBe(false)
 	})
 
-	it('does not render the label when not provided', () => {
-		const wrapper = mount(CustomSelect, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		expect(wrapper.find('label').exists()).toBe(false)
-	})
-
 	it('returns the correct item text using getItemText', () => {
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			props: { textKey: 'text' },
 			global: {
 				plugins: [vuetify],
@@ -125,7 +77,7 @@ describe('CustomInputSelect.vue', () => {
 	})
 
 	it('returns default text when selectedItem is null', () => {
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			global: {
 				plugins: [vuetify],
 			},
@@ -136,7 +88,7 @@ describe('CustomInputSelect.vue', () => {
 	})
 
 	it('returns the correct text when selectedItem is an object', async () => {
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			props: { modelValue: { text: 'Option 1', value: '1' }, textKey: 'text' },
 			global: {
 				plugins: [vuetify],
@@ -150,7 +102,7 @@ describe('CustomInputSelect.vue', () => {
 
 	it('formats items correctly', () => {
 		const items = ['Option 1', 'Option 2']
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			props: { items, textKey: 'text', valueKey: 'value' },
 			global: {
 				plugins: [vuetify],
@@ -165,27 +117,27 @@ describe('CustomInputSelect.vue', () => {
 	})
 
 	it('applies the correct button class when outlined is true', () => {
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			props: { outlined: true },
 			global: {
 				plugins: [vuetify],
 			},
 		})
-		expect(wrapper.find('.custom-select').classes()).toContain('v-btn--variant-outlined')
+		expect(wrapper.find('.v-field--variant-outlined').exists()).toBe(true)
 	})
 
 	it('does not apply the outlined button class when outlined is false', () => {
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			props: { outlined: false },
 			global: {
 				plugins: [vuetify],
 			},
 		})
-		expect(wrapper.find('.custom-select').classes()).not.toContain('v-btn--variant-outlined')
+		expect(wrapper.find('.sy-select').classes()).not.toContain('v-btn--variant-outlined')
 	})
 
 	it('updates selectedItem when v-model changes', async () => {
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			props: { modelValue: { text: 'Option 1', value: '1' }, textKey: 'text' },
 			global: {
 				plugins: [vuetify],
@@ -200,7 +152,7 @@ describe('CustomInputSelect.vue', () => {
 	})
 
 	it('emits update:modelValue when selectedItem changes', async () => {
-		const wrapper = mount(CustomSelect, {
+		const wrapper = mount(SySelect, {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 			props: { modelValue: null as any, textKey: 'text' },
 			global: {
@@ -213,4 +165,29 @@ describe('CustomInputSelect.vue', () => {
 		await wrapper.vm.$nextTick()
 		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ text: 'Option 1', value: '1' }])
 	})
+
+	it('closes the menu when v-click-outside directive is called', async () => {
+		const wrapper = mount(SySelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.find('.sy-select').trigger('click')
+		expect(wrapper.find('.v-list').exists()).toBe(true)
+		await wrapper.find('.sy-select').trigger('mouseleave')
+		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.find('.v-list').exists()).toBe(false)
+	})
+
+	it('use closeList method', async () => {
+		const wrapper = mount(SySelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.vm.closeList()
+		expect(wrapper.vm.isOpen).toBe(false)
+	})
 })