@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

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

package/src/components/Customs/SyTextField/SyTextField.mdx

@@ -0,0 +1,44 @@
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
+import * as SyTextFieldStories from "./SyTextField.stories";
+
+<Meta of={SyTextFieldStories} />
+
+# SyTextField
+
+Le composant `SyTextField` est utilisé pour proposer une alternative au `TextField` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité RGAA.
+
+<Canvas of={SyTextFieldStories.Default} />
+
+
+# API
+
+<Controls of={SyTextFieldStories.Default} />
+
+
+# Exemple d'utilisation
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import SyTextField from '@cnamts/synapse'
+
+	const model = ref('')
+
+</script>
+
+<template>
+	<main class="ma-12">
+		Text saisie: {{ model }}
+		<div class="d-flex flex-wrap align-center">
+        <SyTextField
+				v-model="model"
+				label="Label"
+				color="primary"
+				is-clearable
+			/>
+		</div>
+	</main>
+</template>
+`}
+/>

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

@@ -0,0 +1,403 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
+import { VIcon } from 'vuetify/components'
+import { ref } from 'vue'
+import { mdiAccountBox } from '@mdi/js'
+
+const meta = {
+	title: 'Composants/Formulaires/SyTextField',
+	component: SyTextField,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['modelValue', 'appendInnerIconColor'] },
+	},
+	argTypes: {
+		modelValue: { control: 'text' },
+		label: { control: 'text' },
+		prependIcon: {
+			control: 'select',
+			options: ['info', 'success', 'warning', 'error', 'close'],
+		},
+		appendIcon: {
+			control: 'select',
+			options: ['info', 'success', 'warning', 'error', 'close'],
+		},
+		prependInnerIcon: {
+			control: 'select',
+			options: ['info', 'success', 'warning', 'error', 'close'],
+		},
+		appendInnerIcon: {
+			control: 'select',
+			options: ['info', 'success', 'warning', 'error', 'close'],
+		},
+		variantStyle: {
+			control: 'select',
+			options: ['outlined', 'plain', 'underlined', 'filled', 'solo', 'solo-inverted', 'solo-filled'],
+		},
+		color: {
+			control: 'select',
+			options: ['primary', 'secondary', 'success', 'error', 'warning'],
+		},
+	},
+} as Meta<typeof SyTextField>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField v-model="value" />
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		showDivider: false,
+		variantStyle: 'outlined',
+		color: 'primary',
+		isClearable: true,
+		label: 'Label',
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyTextField v-bind="args" />
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotPrepend: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField 
+						v-model="value" 
+						prepend-icon="info"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: false,
+		label: 'Label',
+		color: 'primary',
+		prependIcon: 'info',
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyTextField
+						v-bind="args"
+						:label="args.label"
+						:prepend-icon="args.prependIcon"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotAppend: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField 
+						v-model="value" 
+						append-icon="success"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: false,
+		label: 'champs de text',
+		color: 'primary',
+		appendIcon: 'success',
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyTextField
+						v-bind="args"
+						:append-icon="args.appendIcon"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotPrependInner: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField 
+						v-model="value" 
+						prepend-inner-icon="info"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: false,
+		label: 'Label',
+		color: 'primary',
+		prependInnerIcon: 'info',
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyTextField
+						v-bind="args"
+						:prepend-inner-icon="args.prependInnerIcon"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotPrependInnerDivider: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField 
+						v-model="value" 
+						prepend-inner-icon="info"
+						show-divider
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: true,
+		label: 'Label',
+		color: 'primary',
+		prependInnerIcon: 'info',
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyTextField
+						v-bind="args"
+						:prepend-inner-icon="args.prependInnerIcon"
+						:show-divider="args.showDivider"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotAppendInner: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField 
+						v-model="value" 
+						append-inner-icon="success"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: false,
+		label: 'Label',
+		color: 'primary',
+		appendInnerIcon: 'success',
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyTextField
+						v-bind="args"
+						:append-inner-icon="args.appendInnerIcon"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotCustomIcon: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField v-model="value">
+						<template #append-inner>
+							<VIcon>
+								{{ iconName }}
+							</VIcon>
+						</template>
+					</SyTextField>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import SyTextField from '@cnamts/synapse'
+					import { mdiAccountBox } from '@mdi/js'
+					
+					const iconName = mdiAccountBox
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: false,
+		label: 'Label',
+		color: 'primary',
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				const iconName = ref(mdiAccountBox)
+
+				return { args, iconName }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyTextField
+						v-bind="args"
+					>
+						<template #append-inner>
+							<VIcon>
+								{{ iconName }}
+							</VIcon>
+						</template>
+					</SyTextField>
+				</div>
+			`,
+		}
+	},
+}