@cnamts/synapse 1.0.1 → 1.0.3

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

@@ -0,0 +1,179 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SyPagination from '../SyPagination.vue'
+
+describe('SyPagination', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 10,
+			},
+		})
+
+		expect(wrapper.find('.sy-pagination').exists()).toBe(true)
+		expect(wrapper.find('nav').exists()).toBe(true)
+		expect(wrapper.find('.pagination').exists()).toBe(true)
+		expect(wrapper.find('.list').exists()).toBe(true)
+	})
+
+	it('does not render pagination if pages is 1', () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 1,
+			},
+		})
+
+		expect(wrapper.find('nav').exists()).toBe(false)
+	})
+
+	it('emits update:modelValue when page is changed', async () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 10,
+			},
+		})
+
+		// Click on page 2
+		// Find the page 2 link directly
+		const page2Link = wrapper.findAll('a').find(a => a.text().trim() === '2')
+		expect(page2Link).toBeTruthy()
+		await page2Link!.trigger('click')
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted && emitted[0]).toEqual([2])
+
+		// Update the component's modelValue to simulate v-model binding
+		await wrapper.setProps({ modelValue: 2 })
+
+		// Click on next button
+		await wrapper.findAll('a').filter(a => a.text().includes('Suivant'))[0].trigger('click')
+		// Get updated emitted events
+		const updatedEmitted = wrapper.emitted('update:modelValue')
+		expect(updatedEmitted && updatedEmitted[1]).toEqual([3])
+	})
+
+	it('disables previous button on first page', () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 10,
+			},
+		})
+
+		const prevButton = wrapper.findAll('a').filter(a => a.text().includes('Précédent'))[0]
+		expect(prevButton.classes()).toContain('disabled')
+	})
+
+	it('disables next button on last page', () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 10,
+				pages: 10,
+			},
+		})
+
+		const nextButton = wrapper.findAll('a').filter(a => a.text().includes('Suivant'))[0]
+		expect(nextButton.classes()).toContain('disabled')
+	})
+
+	it('shows correct aria-current attribute', () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 3,
+				pages: 10,
+			},
+		})
+
+		const currentPage = wrapper.findAll('a').find(a => a.attributes('aria-current') === 'page')
+		expect(currentPage?.text().trim()).toBe('3')
+	})
+
+	it('respects visible prop for number of visible pages', () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 5,
+				pages: 10,
+				visible: 3,
+			},
+		})
+
+		// Should show first, last, and 3 pages around current page (4, 5, 6)
+		// Count all page number links (excluding prev/next and ellipsis)
+		const pageLinks = wrapper.findAll('a').filter(a =>
+			!a.text().includes('Précédent')
+			&& !a.text().includes('Suivant')
+			&& !a.text().includes('…'),
+		)
+		expect(pageLinks.length).toBe(5) // First, 4, 5, 6, Last
+	})
+
+	it('uses custom label when provided', () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 10,
+				label: 'Test Pagination',
+			},
+		})
+
+		expect(wrapper.find('h2').text()).toContain('Test Pagination')
+	})
+
+	it('sets aria-controls when provided', () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 10,
+				ariaControls: 'test-content',
+			},
+		})
+
+		expect(wrapper.find('nav').attributes('aria-controls')).toBe('test-content')
+	})
+
+	it('uses d-sr-only class for screen reader text', () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 10,
+			},
+		})
+
+		expect(wrapper.find('h2').classes()).toContain('d-sr-only')
+		expect(wrapper.find('.d-sr-only').exists()).toBe(true)
+	})
+
+	it('shows start ellipsis when current page is far from first page', () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 8, // Current page far from first page
+				pages: 10,
+				visible: 3, // Small visible count to ensure ellipsis appears
+			},
+		})
+
+		// Should show ellipsis between first page and middle pages
+		expect(wrapper.findAll('.ellipsis').length).toBeGreaterThanOrEqual(1)
+		expect(wrapper.find('.ellipsis').text()).toBe('…')
+	})
+
+	it('shows both ellipses when current page is in the middle of a large range', () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 10, // Middle page
+				pages: 20,
+				visible: 3, // Small visible count to ensure ellipsis appears
+			},
+		})
+
+		// Should show both start and end ellipsis
+		expect(wrapper.findAll('.ellipsis').length).toBe(2)
+		// Verify the structure: first page, ellipsis, middle pages, ellipsis, last page
+		expect(wrapper.find('.list-first').exists()).toBe(true)
+		expect(wrapper.findAll('.ellipsis').length).toBe(2)
+		expect(wrapper.find('.list-last').exists()).toBe(true)
+	})
+})

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: [