@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

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,33 +1,33 @@
 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 '@/components/Customs/CustomSelect/CustomSelect.vue'
+	import SySelect from '@cnamts/synapse'
 
 	const selectedValue = ref(undefined)
 
-	const items = ref([
+	const items = [
 		{ text: 'Option 1', value: '1' },
 		{ text: 'Option 2', value: '2' },
-	])
+	]
 </script>
 
 <template>

package/src/components/Customs/SySelect/SySelect.stories.ts

@@ -0,0 +1,338 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+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/SySelect',
+	component: SySelect,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['selectedValue', 'isOpen', 'closeList'] },
+	},
+	argTypes: {
+		selectedValue: { control: 'text' },
+		items: { control: 'object' },
+		errorMessages: { control: 'object' },
+		required: { control: 'boolean' },
+	},
+} as Meta<typeof SySelect>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SySelect
+						v-model="value"
+						:items="items"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SySelect from '@cnamts/SySelect'
+					
+					const items =  [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		items: [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SySelect
+						v-bind="args"
+					/>
+				</div>
+				<br/><br/><br/><br/>
+			`,
+		}
+	},
+}
+
+export const Outlined: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SySelect
+						v-model="value"
+						:items="items"
+						outlined
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SySelect from '@cnamts/SySelect'
+					
+					const items =  [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		items: [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			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">
+					<SySelect
+						v-bind="args"
+						outlined
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const Required: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SySelect
+						v-model="value"
+						:items="items"
+						required
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SySelect from '@cnamts/SySelect'
+					
+					const items =  [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		items: [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+		required: true,
+	},
+	render: (args) => {
+		return {
+			components: { SySelect },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SySelect
+						v-bind="args"
+						:required="args.required"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const withCustomError: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SySelect
+						v-model="value"
+						:items="items"
+						:error-messages="errorMessages"
+					/>
+					<VBtn @click="triggerError">
+						Trigger Error
+					</VBtn>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SySelect from '@cnamts/SySelect'
+					import { ref } from 'vue'
+					
+					const items =  [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+					
+					const errorMessages = ref([])
+					
+					const triggerError = () => {
+						errorMessages.value = ['This is a test error message']
+					}
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		items: [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				const errorMessages = ref([])
+				const triggerError = () => {
+					// @ts-expect-error test error message
+					errorMessages.value = ['This is a test error message']
+				}
+				return { args, errorMessages, triggerError }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SySelect
+						v-bind="args"
+						:error-messages="errorMessages"
+					/>
+				</div>
+				<div class="d-flex flex-wrap align-center px-4">
+					<VBtn @click="triggerError">
+						Trigger Error
+					</VBtn>
+				</div>
+			`,
+		}
+	},
+}
+
+export const withCustomKey: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+					<template>
+						<SySelect
+							v-model="value"
+							:items="items"
+							text-key="customKey"
+							outlined
+						/>
+					</template>
+					`,
+			},
+			{
+				name: 'Script',
+				code: `
+					<script setup lang="ts">
+						import SySelect from '@cnamts/SySelect'
+						
+						const items =  [
+							{ customKey: 'Choix 1', value: '1' },
+							{ customKey: 'Choix 2', value: '2' },
+						],
+					</script>
+					`,
+			},
+		],
+	},
+	args: {
+		items: [
+			{ customKey: 'Choix 1', value: '1' },
+			{ customKey: 'Choix 2', value: '2' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { SySelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SySelect
+						v-bind="args"
+						outlined
+						text-key="customKey"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const Info: Story = {
+	render: (args) => {
+		return {
+			components: { Alert },
+			setup() {
+				return { args }
+			},
+			template: `
+				<Alert v-model="args.modelValue" :type="args.type" :variant="tonal" :closable="false">
+					<template #default>
+						<b>Format des items :</b>
+						<ul>
+							<li>- Si les items passés en props sont des objets, le composant les utilisera directement.</li>
+							<li>- Si les items sont un tableau de string, le composant les utilisera directement.</li>
+						</ul>
+					</template>
+				</Alert>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { mdiMenuDown } from '@mdi/js'
+	import { mdiInformation, mdiMenuDown } from '@mdi/js'
 	import { ref, watch, computed, type PropType } from 'vue'
 	import { VIcon, VTextField, VList, VListItem, VListItemTitle } from 'vuetify/components'
 
@@ -26,7 +26,7 @@
 		},
 		menuId: {
 			type: String,
-			default: 'custom-select-menu',
+			default: 'sy-select-menu',
 		},
 		outlined: {
 			type: Boolean,
@@ -45,7 +45,8 @@
 	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 = () => {
 		isOpen.value = !isOpen.value
@@ -53,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) => {
@@ -91,10 +92,19 @@
 	watch(() => props.modelValue, (newValue) => {
 		selectedItem.value = newValue
 	})
+
+	watch(isOpen, (newValue) => {
+		hasError.value = !newValue && !selectedItem.value && isRequired.value
+	})
+
+	defineExpose({
+		isOpen,
+		closeList,
+	})
 </script>
 
 <template>
-	<div class="d-block w-100">
+	<div>
 		<VTextField
 			:id="inputId"
 			ref="input"
@@ -109,12 +119,22 @@
 			: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"
 		>
-			<VIcon>{{ mdiMenuDown }}</VIcon>
+			<template #append-inner>
+				<VIcon
+					v-if="hasError"
+					class="mr-6"
+				>
+					{{ mdiInformation }}
+				</VIcon>
+				<VIcon>
+					{{ mdiMenuDown }}
+				</VIcon>
+			</template>
 		</VTextField>
 		<VList
 			v-if="isOpen"
@@ -143,9 +163,10 @@
 <style scoped lang="scss">
 @use '@/assets/tokens.scss';
 
-.custom-select {
+.sy-select {
   display: flex;
   flex-direction: column;
+  min-width: 225px;
 }
 
 .v-field {
@@ -153,7 +174,7 @@
 }
 .v-field--focused {
   .v-icon {
-    transform: rotateX(180deg) translateY(50%);
+    transform: rotateX(180deg);
   }
 }
 
@@ -181,8 +202,10 @@
 .v-icon {
   position: absolute;
   right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
   color: tokens.$grey-darken-20;
 }
+
+:deep(.v-field__input) {
+ color: tokens.$grey-darken-20
+}
 </style>