@cnamts/synapse 1.0.1 → 1.0.2

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

@@ -636,4 +636,234 @@ describe('SySelect.vue', () => {
 		await clearBtn.trigger('click')
 		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([null])
 	})
+
+	describe('Multiple selection mode', () => {
+		it('handles multiple selection correctly', async () => {
+			const items = [
+				{ text: '-choisir-', value: null },
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+				{ text: 'Option 3', value: '3' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					modelValue: [],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Open the select menu
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Select Option 1
+			const listItems = wrapper.findAll('.v-list-item')
+			await listItems[1].trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Check that Option 1 is selected
+			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([['1']])
+
+			// Select Option 2 as well
+			await listItems[2].trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Check that both options are selected
+			expect(wrapper.emitted()['update:modelValue'][1]).toEqual([['1', '2']])
+		})
+
+		it('clears all selections when default option is clicked', async () => {
+			const items = [
+				{ text: '-choisir-', value: null },
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					modelValue: ['1', '2'],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Open the select menu
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Click on the default option
+			const defaultOption = wrapper.findAll('.v-list-item')[0]
+			await defaultOption.trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Check that all selections are cleared
+			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[]])
+		})
+
+		it('treats default option as selected when no items are selected', async () => {
+			const items = [
+				{ text: '-choisir-', value: null },
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					modelValue: [],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+
+			// Check that the selectedItemText is the default option
+			expect(instance.selectedItemText).toBe('-choisir-')
+
+			// Check that isDefaultOption returns true for the default item
+			const defaultItem = items[0]
+			expect(instance.isDefaultOption(defaultItem)).toBe(true)
+
+			// Check that isItemSelected returns true for the default item when no selections
+			expect(instance.isItemSelected(defaultItem)).toBe(true)
+		})
+	})
+
+	describe('Chips mode', () => {
+		it('renders chips for selected items', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+				{ text: 'Option 3', value: '3' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					modelValue: ['1', '2'],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that chips are rendered
+			const chips = wrapper.findAll('.v-chip')
+			expect(chips.length).toBe(2)
+			expect(chips[0].text()).toBe('Option 1')
+			expect(chips[1].text()).toBe('Option 2')
+		})
+
+		it('removes a chip when close button is clicked', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+				{ text: 'Option 3', value: '3' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					modelValue: ['1', '2'],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Find the first chip's close button and click it
+			const closeButton = wrapper.find('.v-chip__close')
+			await closeButton.trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Check that the chip was removed from the model
+			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([['2']])
+		})
+
+		it('handles chip text correctly for object items', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1', data: { id: 101 } },
+				{ text: 'Option 2', value: '2', data: { id: 102 } },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					returnObject: true,
+					modelValue: [items[0], items[1]],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that chips display the correct text
+			const chips = wrapper.findAll('.v-chip')
+			expect(chips.length).toBe(2)
+			expect(chips[0].text()).toBe('Option 1')
+			expect(chips[1].text()).toBe('Option 2')
+		})
+
+		it('safely handles different item types in chips', async () => {
+			// This test verifies our safeChipItem function works correctly
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: 2 }, // Number value
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					modelValue: ['1', 2],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that chips are rendered without errors
+			const chips = wrapper.findAll('.v-chip')
+			expect(chips.length).toBe(2)
+			expect(chips[0].text()).toBe('Option 1')
+			expect(chips[1].text()).toBe('Option 2')
+
+			// Test the safeChipItem method directly
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			const stringResult = instance.safeChipItem('test')
+			const numberResult = instance.safeChipItem(123)
+			const objectResult = instance.safeChipItem({ id: 3 })
+
+			expect(stringResult).toBe('test')
+			expect(numberResult).toBe(123)
+			expect(typeof objectResult).toBe('object')
+		})
+	})
 })

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

@@ -138,7 +138,7 @@ const meta = {
 		},
 		'bgColor': {
 			description: 'Couleur de fond du champ',
-			control: 'text',
+			control: 'color',
 		},
 		'centerAffix': {
 			description: 'Centre verticalement les éléments ajoutés avant/après le champ',
@@ -217,13 +217,14 @@ const meta = {
 			default: false,
 		},
 		'displayPersistentPlaceholder': {
-			description: 'Garde le placeholder visible même avec une valeur',
+			description: 'Garde le placeholder visible. Si le champ est vide, le placeholder reste affiché',
 			control: 'boolean',
 			default: false,
 		},
 		'placeholder': {
 			description: 'Texte affiché quand le champ est vide',
 			control: 'text',
+			default: 'Placeholder',
 		},
 		'prefix': {
 			description: 'Texte affiché avant la valeur: prefix="€" : affichera "€" avant la valeur saisie',

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+	// Prevent display-asterisk from being passed to the DOM
+	defineOptions({
+		inheritAttrs: false,
+	})
 	import { computed, onMounted, ref, watch, nextTick, type ComponentPublicInstance } from 'vue'
 	import type { IconType, VariantStyle, ColorType } from './types'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
@@ -92,7 +96,7 @@
 			tooltipLocation: 'top',
 			variantStyle: 'outlined',
 			color: 'primary',
-			label: 'custom label',
+			label: '',
 			errorMessages: null,
 			warningMessages: null,
 			successMessages: null,
@@ -100,7 +104,7 @@
 			isClearable: false,
 			isActive: false,
 			baseColor: undefined,
-			bgColor: undefined,
+			bgColor: 'white',
 			centerAffix: undefined,
 			counter: false,
 			counterValue: undefined,
@@ -253,7 +257,7 @@
 
 	const hasError = computed(() => validation.hasError.value)
 	const hasWarning = computed(() => validation.hasWarning.value)
-	const hasSuccess = computed(() => validation.hasSuccess.value)
+	const hasSuccess = computed(() => validation.hasSuccess.value && !hasError.value && !hasWarning.value)
 
 	const errors = computed(() => validation.errors.value)
 	const warnings = computed(() => validation.warnings.value)
@@ -338,6 +342,12 @@
 			setAriaHidden('.v-text-field__suffix')
 			addSrOnlySpan('.v-text-field__prefix')
 			addSrOnlySpan('.v-text-field__suffix')
+
+			// Remove aria-describedby attribute
+			const inputElement = syTextFieldRef.value?.$el?.querySelector('input')
+			if (inputElement) {
+				inputElement.removeAttribute('aria-describedby')
+			}
 		})
 	})
 
@@ -399,6 +409,7 @@
 		:type="props.type"
 		:variant="props.variantStyle"
 		:width="props.width"
+		v-bind="Object.fromEntries(Object.entries($attrs).filter(([key]) => key !== 'display-asterisk'))"
 		:class="{
 			'error-field': hasError,
 			'warning-field': hasWarning,
@@ -519,11 +530,11 @@
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
-:deep(.v-field__input input::placeholder),
-:deep(input.v-field__input::placeholder),
-:deep(textarea.v-field__input::placeholder) {
-	opacity: 0;
-}
+// :deep(.v-field__input input::placeholder),
+// :deep(input.v-field__input::placeholder),
+// :deep(textarea.v-field__input::placeholder) {
+// 	opacity: 0;
+// }
 
 .warning-field {
 	:deep(.v-input__details > .v-icon),

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import DatePicker from '../DatePicker/DatePicker.vue'
 import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { ref, onMounted } from 'vue'
+import { fn } from '@storybook/test'
 
 const meta = {
 	title: 'Composants/Formulaires/DatePicker/CombinedMode',
@@ -14,6 +15,7 @@ const meta = {
 	parameters: {
 		layout: 'fullscreen',
 		controls: { exclude: ['modelValue'] },
+		actions: { argTypesRegex: '^on.*' },
 	},
 	argTypes: {
 		modelValue: {
@@ -121,10 +123,22 @@ const meta = {
 			control: 'boolean',
 			description: 'Affiche les jours de week-end',
 		},
+		displayHolidayDays: {
+			control: 'boolean',
+			description: 'Affiche les jours fériés',
+		},
 		period: {
 			control: 'object',
 			description: 'Période pendant laquelle les dates peuvent être sélectionnées (au format: MM/DD/YYYY)',
 		},
+		autoClamp: {
+			control: 'boolean',
+			description: 'Active le clamping automatique des dates',
+		},
+		displayAsterisk: {
+			control: 'boolean',
+			description: 'Affiche l\'astérisque',
+		},
 	},
 } as Meta<typeof DatePicker>
 
@@ -162,22 +176,28 @@ export const Default: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Sélectionner une date',
-		format: 'DD/MM/YYYY',
-		isBirthDate: false,
-		showWeekNumber: false,
-		required: false,
-		displayRange: false,
-		displayIcon: true,
-		displayAppendIcon: false,
-		displayPrependIcon: true,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		// modelValue est défini dans le setup du render
-		displayTodayButton: true,
-		displayWeekendDays: true,
-		useCombinedMode: true,
+		'placeholder': 'Sélectionner une date',
+		'format': 'DD/MM/YYYY',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'displayPrependIcon': true,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': '',
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
+		'onDate-selected': fn(),
+		'displayTodayButton': true,
+		'displayWeekendDays': true,
+		'displayHolidayDays': true,
+		'useCombinedMode': true,
 	},
 	render: (args) => {
 		return {
@@ -195,6 +215,87 @@ export const Default: Story = {
 	},
 }
 
+export const Required: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<DatePicker
+						v-model="date"
+						placeholder="Sélectionner une date"
+						useCombinedMode
+						required
+						format="DD/MM/YYYY"
+					/>
+					<DatePicker
+						v-model="date"
+						placeholder="Sélectionner une date"
+						useCombinedMode
+						required
+						displayAsterisk
+						format="DD/MM/YYYY"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { DatePicker } from '@cnamts/synapse'
+					import { ref } from 'vue'
+					
+					const date = ref('')
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'label': 'Sélectionner une date',
+		'format': 'DD/MM/YYYY',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': true,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'displayPrependIcon': true,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': '',
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
+		'onDate-selected': fn(),
+		'displayTodayButton': true,
+		'displayWeekendDays': true,
+		'displayHolidayDays': true,
+		'useCombinedMode': true,
+	},
+	render: (args) => {
+		return {
+			components: { DatePicker },
+			setup() {
+				const value = ref('')
+				return { args, value }
+			},
+			template: `
+              <div class="d-flex flex-wrap align-center pa-4">
+				<h4 class="mb-4">Sans astérisque :</h4>
+                <DatePicker v-bind="args" v-model="value"/>
+				<h4 class="mb-4">Avec astérisque :</h4>
+				<DatePicker v-bind="args" displayAsterisk v-model="value"/>
+              </div>
+            `,
+		}
+	},
+}
+
 export const DateRange: Story = {
 	parameters: {
 		sourceCode: [
@@ -226,21 +327,26 @@ export const DateRange: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Sélectionner une période',
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: '',
-		isBirthDate: false,
-		showWeekNumber: false,
-		required: false,
-		displayRange: true,
-		displayIcon: true,
-		displayAppendIcon: false,
-		displayPrependIcon: true,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		// modelValue est défini dans le setup du render
-		useCombinedMode: true,
+		'placeholder': 'Sélectionner une période',
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': true,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'displayPrependIcon': true,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': ['', ''],
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
+		'onDate-selected': fn(),
+		'useCombinedMode': true,
 	},
 	render: (args) => {
 		return {
@@ -1004,6 +1110,110 @@ export const WithTextFieldActivator: Story = {
 	},
 }
 
+export const AutoClampFeature: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div class="d-flex flex-column">
+						<h3>Démonstration de l'auto clamp avec différents formats</h3>
+						
+						<h4 class="mt-4">Format DD/MM/YYYY (séparateur /)</h4>
+						<DatePicker
+							v-model="dateSlash"
+							placeholder="Saisie avec auto clamp - séparateur /"
+							format="DD/MM/YYYY"
+							useCombinedMode
+							autoClamp
+						/>
+						
+						<h4 class="mt-4">Format DD-MM-YYYY (séparateur -)</h4>
+						<DatePicker
+							v-model="dateDash"
+							placeholder="Saisie avec auto clamp - séparateur -"
+							format="DD-MM-YYYY"
+							useCombinedMode
+							autoClamp
+						/>
+						
+						<h4 class="mt-4">Format YYYY.MM.DD (séparateur .)</h4>
+						<DatePicker
+							v-model="dateDot"
+							placeholder="Saisie avec auto clamp - séparateur ."
+							format="YYYY.MM.DD"
+							useCombinedMode
+							autoClamp
+						/>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { DatePicker } from '@cnamts/synapse'
+					
+					const dateSlash = ref('')
+					const dateDash = ref('')
+					const dateDot = ref('')
+				</script>
+				`,
+			},
+		],
+	},
+	render: () => {
+		return {
+			components: { DatePicker },
+			setup() {
+				const dateSlash = ref('')
+				const dateDash = ref('')
+				const dateDot = ref('')
+				return { dateSlash, dateDash, dateDot }
+			},
+			template: `
+              <div class="d-flex flex-column pa-4">
+                <h3>Démonstration de l'auto clamp avec différents formats</h3>
+                <div class="mb-4 mt-2">Saisissez uniquement des chiffres - les séparateurs seront ajoutés automatiquement selon le format défini</div>
+                
+                <h4 class="mb-2">Format DD/MM/YYYY (séparateur /)</h4>
+                <DatePicker
+                  v-model="dateSlash"
+                  placeholder="Saisie avec auto clamp - séparateur /"
+                  format="DD/MM/YYYY"
+                  useCombinedMode
+                  autoClamp
+                />
+                <div class="caption mb-4">Valeur actuelle: {{ dateSlash || 'aucune date saisie' }}</div>
+                
+                <h4 class="mb-2">Format DD-MM-YYYY (séparateur -)</h4>
+                <DatePicker
+                  v-model="dateDash"
+                  placeholder="Saisie avec auto clamp - séparateur -"
+                  format="DD-MM-YYYY"
+                  useCombinedMode
+                  autoClamp
+                />
+                <div class="caption mb-4">Valeur actuelle: {{ dateDash || 'aucune date saisie' }}</div>
+                
+                <h4 class="mb-2">Format YYYY.MM.DD (séparateur .)</h4>
+                <DatePicker
+                  v-model="dateDot"
+                  placeholder="Saisie avec auto clamp - séparateur ."
+                  format="YYYY.MM.DD"
+                  useCombinedMode
+                  autoClamp
+                />
+                <div class="caption mb-4">Valeur actuelle: {{ dateDot || 'aucune date saisie' }}</div>
+              </div>
+            `,
+		}
+	},
+}
+
 export const WithFormSubmission: Story = {
 	parameters: {
 		sourceCode: [