@cnamts/synapse 1.0.14 → 1.0.16

package/src/components/Tables/common/TableHeader.vue

@@ -205,13 +205,22 @@
 		class="v-data-table-header__content d-flex align-center h-100 w-100"
 		:class="alignClass"
 	>
-		<div
-			class="col-title"
-			:class="[textAlignClass, headerClassRaw]"
-			:style="[{ width: '100%' }, headerStyle]"
+		<slot
+			:name="`header.${column.key}`"
+			v-bind="{
+				column,
+				locales,
+				...headerParams,
+			}"
 		>
-			{{ column.title }}
-		</div>
+			<div
+				class="col-title"
+				:class="[textAlignClass, headerClassRaw]"
+				:style="[{ width: '100%' }, headerStyle]"
+			>
+				{{ column.title }}
+			</div>
+		</slot>
 		<div
 			v-if="header!.sortable"
 			class="sort-container d-flex align-center"
@@ -227,7 +236,7 @@
 			<div
 				v-if="sortOrderIndex"
 				class="sort-order-indicator text-primary ml-0 mr-2"
-				:title="`Sort order: ${sortOrderIndex}`"
+				:title="locales.sortOrder(sortOrderIndex)"
 			>
 				{{ sortOrderIndex }}
 			</div>

package/src/components/Tables/common/filters/DateFilter.vue

@@ -119,7 +119,7 @@
 <template>
 	<DatePicker
 		v-model="modelValue"
-		:label="header.title"
+		:label="header.title || 'Sélectionner une date'"
 		:clearable="inputConfig?.clearable ?? clearable"
 		:density="inputConfig?.density ?? density"
 		:hide-details="inputConfig?.hideDetails ?? hideDetails"

package/src/components/Tables/common/locales.ts

@@ -35,4 +35,5 @@ export const locales = {
 	sortDescending: 'Tri décroissant',
 	sortNone: 'Aucun tri',
 	sortOther: 'Tri personnalisé',
+	sortOrder: (order: number) => `Ordre de tri: ${order}`,
 }

package/src/components/Tables/common/tableFilterUtils.ts

@@ -1,11 +1,11 @@
-import type { FilterOption } from './types'
+import type { FilterOption, Items } from './types'
 import filterByPeriod from './filters/logics/period'
 import filterByExactDate from './filters/logics/date'
 import filterByNumber from './filters/logics/number'
 import filterBySelect from './filters/logics/select'
 import filterByText from './filters/logics/text'
 
-export function filterItems<T extends Record<string, unknown>>(items: T[], filters: FilterOption[]): T[] {
+export function filterItems<T extends Items[0]>(items: T[], filters: FilterOption[]): T[] {
 	if (!Array.isArray(items) || items.length === 0) return []
 	if (!Array.isArray(filters) || filters.length === 0) return items
 
@@ -14,7 +14,7 @@ export function filterItems<T extends Record<string, unknown>>(items: T[], filte
 	})
 }
 
-function applyFilter<T extends Record<string, unknown>>(item: T, filter: FilterOption): boolean {
+function applyFilter<T extends Items[0]>(item: T, filter: FilterOption): boolean {
 	if (!filter.key) return true
 
 	const itemValue = item[filter.key]

package/src/components/Tables/common/types.ts

@@ -21,6 +21,8 @@ export interface FilterOption {
 	type: FilterType
 }
 
+export type Items = (Record<string, unknown> | object)[]
+
 export interface DataOptions {
 	page: number
 	itemsPerPage: number
@@ -78,7 +80,7 @@ export type TableColumnHeader = {
 
 // Component-specific props interfaces
 export type SyTableProps = {
-	items?: Record<string, unknown>[]
+	items?: Items
 	suffix: string
 	saveState?: boolean
 	caption?: string
@@ -100,7 +102,7 @@ export type SyTableProps = {
 
 export type SyServerTableProps = {
 	serverItemsLength: number
-	items?: Record<string, unknown>[]
+	items?: Items
 	suffix: string
 	saveState?: boolean
 	caption?: string

package/src/components/Tables/common/useTableCheckbox.ts

@@ -1,11 +1,12 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { toRef } from 'vue'
+import type { Items } from './types'
 
 interface UseTableCheckboxOptions {
 	/**
 	 * The items to be displayed in the table
 	 */
-	items: MaybeRefOrGetter<Record<string, unknown>[]>
+	items: MaybeRefOrGetter<Items>
 	/**
 	 * The model value for selected items
 	 */
@@ -27,7 +28,7 @@ export function useTableCheckbox(options: UseTableCheckboxOptions) {
 	/**
 	 * Function to get a unique identifier for each item
 	 */
-	const getItemValue = (item: Record<string, unknown>) => {
+	const getItemValue = (item: Items[0]) => {
 		// 1) If a custom selectionKey is provided and exists on item, use it
 		const key = (typeof selectionKeyRef?.value === 'function'
 			? (selectionKeyRef.value as unknown as () => string | undefined)()
@@ -36,7 +37,7 @@ export function useTableCheckbox(options: UseTableCheckboxOptions) {
 			return item[key]
 		}
 		// 2) Otherwise, if the item has an id field, use that
-		if (item.id !== undefined) {
+		if ('id' in item && item.id !== undefined) {
 			return item.id
 		}
 		// Otherwise, return the full object instead of a JSON string

package/src/components/Tables/common/useTableFilter.ts

@@ -1,5 +1,5 @@
 import { inject } from 'vue'
-import type { FilterOption } from './types'
+import type { FilterOption, Items } from './types'
 import { filterItems as filterItemsUtil } from './tableFilterUtils'
 
 /**
@@ -10,7 +10,7 @@ import { filterItems as filterItemsUtil } from './tableFilterUtils'
 export function useTableFilter() {
 	// Récupère la fonction filterItems du modèle provide/inject
 	const filterItems = inject<
-		<T extends Record<string, unknown>>(items: T[], filters: FilterOption[]) => T[]
+		<T extends Items[0]>(items: T[], filters: FilterOption[]) => T[]
 	>('filterItems', filterItemsUtil)
 
 	return {

package/src/components/Tables/common/useTableItems.ts

@@ -1,12 +1,10 @@
 import { computed, type Ref } from 'vue'
-import { processItems } from './formatters'
-import type { DataOptions, FilterOption, TableColumnHeader } from './types'
+import type { DataOptions, FilterOption, Items, TableColumnHeader } from './types'
 
 /**
  * Composable for handling table items processing
  *
  * @param items - Reference to table items
- * @param headers - Reference to table headers
  * @param filters - Reference to active filters
  * @param options - Reference to table options
  * @param filterItems - Function to filter items (from useTableFilter)
@@ -14,35 +12,23 @@ import type { DataOptions, FilterOption, TableColumnHeader } from './types'
  */
 export function useTableItems({
 	items,
-	headers,
 	filters,
 	options,
 	filterItems,
 }: {
-	items: Ref<Record<string, unknown>[]>
+	items: Ref<Items>
 	headers: Ref<TableColumnHeader[] | undefined>
 	filters: Ref<FilterOption[]>
 	options: Ref<Partial<DataOptions>>
-	filterItems: <T extends Record<string, unknown>>(items: T[], filters: FilterOption[]) => T[]
+	filterItems: <T extends Items[0]>(items: T[], filters: FilterOption[]) => T[]
 }) {
-	// Process items with formatters based on headers
-	const processedItems = computed(() => {
-		if (!headers.value) return items.value
-		// Just return the items as is since we can't process them with headers
-		return processItems(items.value)
-	})
-
 	// Filter items based on active filters
 	const filteredItems = computed(() => {
 		// Create a deep copy of items to avoid modifying originals
-		const itemsCopy = processedItems.value.map((item) => {
-			return JSON.parse(JSON.stringify(item))
-		})
 
 		// Apply filters to copied items
-		return filterItems(itemsCopy, filters.value)
+		return filterItems(items.value, filters.value)
 	})
-
 	// Apply pagination to filtered items
 	const paginatedItems = computed(() => {
 		if (!filteredItems.value.length) return []
@@ -60,7 +46,6 @@ export function useTableItems({
 	})
 
 	return {
-		processedItems,
 		filteredItems,
 		paginatedItems,
 	}

package/src/components/index.ts

@@ -47,6 +47,7 @@ export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'
 export { default as DatePicker } from '@/components/DatePicker/CalendarMode/DatePicker.vue'
 export { default as DiacriticPicker } from './DiacriticPicker/DiacriticPicker.vue'
 export { default as FileUpload } from './FileUpload/FileUpload.vue'
+export { default as LunarCalendar } from './LunarCalendar/LunarCalendar.vue'
 export { default as NirField } from './NirField/NirField.vue'
 export * from './NirField/nirValidation'
 export { default as PasswordField } from './PasswordField/PasswordField.vue'
@@ -65,6 +66,7 @@ export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
 export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
 export { default as Captcha } from './Captcha/Captcha.vue'
 export { default as SyForm } from './Customs/SyForm/SyForm.vue'
+export { default as SyRadioGroup } from './Customs/SyRadioGroup/SyRadioGroup.vue'
 
 // ===========================
 // Tableaux

package/src/composables/validation/tests/useFormValidation.spec.ts

@@ -0,0 +1,251 @@
+import { describe, it, expect, vi } from 'vitest'
+import { defineComponent, h } from 'vue'
+import { mount } from '@vue/test-utils'
+import { useFormValidation, useValidatableComponent } from '../useFormValidation'
+import type { ValidatableComponent } from '../useFormValidation'
+
+type FormValidationApi = ReturnType<typeof useFormValidation>
+
+let lastChildApi: ReturnType<typeof useValidatableComponent> | null = null
+
+const ChildComponent = {
+	name: 'ValidatableChild',
+	setup() {
+		const api = useValidatableComponent()
+		lastChildApi = api
+		return () => null
+	},
+}
+
+const ParentWithForm = defineComponent({
+	name: 'ParentWithFormValidation',
+	setup() {
+		const form = useFormValidation()
+		return { form }
+	},
+	render() {
+		return h(ChildComponent)
+	},
+})
+
+describe('useFormValidation', () => {
+	it('registers components and avoids duplicates', () => {
+		lastChildApi = null
+
+		const wrapper = mount(ParentWithForm)
+		const form = (wrapper.vm as { form: FormValidationApi }).form
+		expect(lastChildApi).not.toBeNull()
+		const childApi = lastChildApi!
+
+		const component: ValidatableComponent = {
+			validateOnSubmit: vi.fn(() => true),
+		}
+
+		expect(form.validatableComponents.value).toHaveLength(0)
+
+		childApi.register(component)
+		expect(form.validatableComponents.value).toHaveLength(1)
+		expect(form.validatableComponents.value[0]).toStrictEqual(component)
+
+		// Duplicate registration should be ignored
+		childApi.register(component)
+		expect(form.validatableComponents.value).toHaveLength(1)
+	})
+
+	it('unregisters components by reference and by validateOnSubmit fallback', () => {
+		lastChildApi = null
+
+		const wrapper = mount(ParentWithForm)
+		const form = (wrapper.vm as { form: FormValidationApi }).form
+		expect(lastChildApi).not.toBeNull()
+		const childApi = lastChildApi!
+
+		const sharedValidate = vi.fn(() => true)
+		const component1: ValidatableComponent = { validateOnSubmit: sharedValidate }
+		const component2: ValidatableComponent = { validateOnSubmit: sharedValidate }
+
+		// Direct reference removal
+		childApi.register(component1)
+		expect(form.validatableComponents.value).toHaveLength(1)
+
+		childApi.unregister(component1)
+		expect(form.validatableComponents.value).toHaveLength(0)
+
+		// Fallback: removal by matching validateOnSubmit reference
+		childApi.register(component1)
+		expect(form.validatableComponents.value).toHaveLength(1)
+
+		childApi.unregister(component2)
+		expect(form.validatableComponents.value).toHaveLength(0)
+	})
+
+	it('clearAll calls clearValidation on registered components and ignores missing or throwing ones', () => {
+		lastChildApi = null
+
+		const wrapper = mount(ParentWithForm)
+		const form = (wrapper.vm as { form: FormValidationApi }).form
+		expect(lastChildApi).not.toBeNull()
+		const childApi = lastChildApi!
+
+		const clearSpy = vi.fn()
+		const throwingClear = vi.fn(() => {
+			throw new Error('boom')
+		})
+
+		const componentWithClear: ValidatableComponent = {
+			validateOnSubmit: vi.fn(() => true),
+			clearValidation: clearSpy,
+		}
+		const componentWithoutClear: ValidatableComponent = {
+			validateOnSubmit: vi.fn(() => true),
+		}
+		const componentThrowing: ValidatableComponent = {
+			validateOnSubmit: vi.fn(() => true),
+			clearValidation: throwingClear,
+		}
+
+		childApi.register(componentWithClear)
+		childApi.register(componentWithoutClear)
+		childApi.register(componentThrowing)
+
+		form.clearAll()
+
+		expect(clearSpy).toHaveBeenCalledTimes(1)
+		expect(throwingClear).toHaveBeenCalledTimes(1)
+	})
+
+	it('clearAll returns early when there are no registered components', () => {
+		const wrapper = mount(ParentWithForm)
+		const form = (wrapper.vm as { form: FormValidationApi }).form
+
+		expect(form.validatableComponents.value).toHaveLength(0)
+
+		// Should not throw even when nothing is registered
+		form.clearAll()
+	})
+
+	it('resetAll calls reset on registered components and ignores missing or throwing ones', () => {
+		lastChildApi = null
+
+		const wrapper = mount(ParentWithForm)
+		const form = (wrapper.vm as { form: FormValidationApi }).form
+		expect(lastChildApi).not.toBeNull()
+		const childApi = lastChildApi!
+
+		const resetSpy = vi.fn()
+		const throwingReset = vi.fn(() => {
+			throw new Error('boom')
+		})
+
+		const componentWithReset: ValidatableComponent = {
+			validateOnSubmit: vi.fn(() => true),
+			reset: resetSpy,
+		}
+		const componentWithoutReset: ValidatableComponent = {
+			validateOnSubmit: vi.fn(() => true),
+		}
+		const componentThrowingReset: ValidatableComponent = {
+			validateOnSubmit: vi.fn(() => true),
+			reset: throwingReset,
+		}
+
+		childApi.register(componentWithReset)
+		childApi.register(componentWithoutReset)
+		childApi.register(componentThrowingReset)
+
+		form.resetAll()
+
+		expect(resetSpy).toHaveBeenCalledTimes(1)
+		expect(throwingReset).toHaveBeenCalledTimes(1)
+	})
+
+	it('resetAll returns early when there are no registered components', () => {
+		const wrapper = mount(ParentWithForm)
+		const form = (wrapper.vm as { form: FormValidationApi }).form
+
+		expect(form.validatableComponents.value).toHaveLength(0)
+
+		// Should not throw even when nothing is registered
+		form.resetAll()
+	})
+
+	it('validateAll returns true when there are no registered components', async () => {
+		const wrapper = mount(ParentWithForm)
+		const form = (wrapper.vm as { form: FormValidationApi }).form
+
+		await expect(form.validateAll()).resolves.toBe(true)
+	})
+
+	it('validateAll returns false when at least one component is invalid (sync/async mix)', async () => {
+		lastChildApi = null
+
+		const wrapper = mount(ParentWithForm)
+		const form = (wrapper.vm as { form: FormValidationApi }).form
+		expect(lastChildApi).not.toBeNull()
+		const childApi = lastChildApi!
+
+		const syncTrue: ValidatableComponent = {
+			validateOnSubmit: vi.fn(() => true),
+		}
+		const asyncTrue: ValidatableComponent = {
+			validateOnSubmit: vi.fn(async () => true),
+		}
+		const asyncFalse: ValidatableComponent = {
+			validateOnSubmit: vi.fn(async () => false),
+		}
+
+		childApi.register(syncTrue)
+		childApi.register(asyncTrue)
+		childApi.register(asyncFalse)
+
+		await expect(form.validateAll()).resolves.toBe(false)
+	})
+
+	it('validateAll returns true when all components are valid', async () => {
+		lastChildApi = null
+
+		const wrapper = mount(ParentWithForm)
+		const form = (wrapper.vm as { form: FormValidationApi }).form
+		expect(lastChildApi).not.toBeNull()
+		const childApi = lastChildApi!
+
+		const syncTrue: ValidatableComponent = {
+			validateOnSubmit: vi.fn(() => true),
+		}
+		const asyncTrue: ValidatableComponent = {
+			validateOnSubmit: vi.fn(async () => true),
+		}
+
+		childApi.register(syncTrue)
+		childApi.register(asyncTrue)
+
+		await expect(form.validateAll()).resolves.toBe(true)
+	})
+})
+
+describe('useValidatableComponent without provider', () => {
+	it('returns no-op functions when no form provider is present', () => {
+		let orphanApi: ReturnType<typeof useValidatableComponent> | null = null
+
+		const OrphanComponent = {
+			name: 'OrphanComponent',
+			setup() {
+				const api = useValidatableComponent()
+				orphanApi = api
+				return () => null
+			},
+		}
+
+		mount(OrphanComponent)
+
+		expect(orphanApi).toBeTruthy()
+
+		const dummyComponent: ValidatableComponent = { validateOnSubmit: () => true }
+
+		// These calls should be safe no-ops
+		orphanApi!.register(dummyComponent)
+		orphanApi!.unregister(dummyComponent)
+		orphanApi!.clearAll()
+		orphanApi!.resetAll()
+	})
+})

package/src/composables/validation/tests/useValidatable.spec.ts

@@ -0,0 +1,90 @@
+/* eslint-disable vue/one-component-per-file */
+import { describe, it, expect, vi } from 'vitest'
+import { defineComponent, h } from 'vue'
+import { mount } from '@vue/test-utils'
+import { useFormValidation } from '../useFormValidation'
+import { useValidatable } from '../useValidatable'
+
+type FormValidationApi = ReturnType<typeof useFormValidation>
+
+describe('useValidatable', () => {
+	it('registers component on mount and unregisters on unmount', () => {
+		const ChildComponent = defineComponent({
+			name: 'ValidatableChild',
+			setup() {
+				const validateOnSubmit = vi.fn(() => true)
+				const clearValidation = vi.fn()
+				const reset = vi.fn()
+
+				useValidatable(validateOnSubmit, clearValidation, reset)
+
+				return {
+					validateOnSubmit,
+					clearValidation,
+					reset,
+				}
+			},
+			render() {
+				return null
+			},
+		})
+
+		const ParentWithForm = defineComponent({
+			name: 'ParentWithFormForUseValidatable',
+			setup() {
+				const form = useFormValidation()
+				return { form }
+			},
+			render() {
+				return h(ChildComponent)
+			},
+		})
+
+		const wrapper = mount(ParentWithForm)
+		const form = (wrapper.vm as { form: FormValidationApi }).form
+
+		expect(form.validatableComponents.value).toHaveLength(1)
+		const registered = form.validatableComponents.value[0]
+
+		const childWrapper = wrapper.findComponent(ChildComponent)
+		const childVm = childWrapper.vm as unknown as {
+			validateOnSubmit: ReturnType<typeof vi.fn>
+			clearValidation: ReturnType<typeof vi.fn>
+			reset: ReturnType<typeof vi.fn>
+		}
+
+		registered.validateOnSubmit()
+		expect(childVm.validateOnSubmit).toHaveBeenCalledTimes(1)
+
+		registered.clearValidation?.()
+		expect(childVm.clearValidation).toHaveBeenCalledTimes(1)
+
+		registered.reset?.()
+		expect(childVm.reset).toHaveBeenCalledTimes(1)
+
+		wrapper.unmount()
+		expect(form.validatableComponents.value).toHaveLength(0)
+	})
+
+	it('does nothing harmful when no form provider is present', () => {
+		const OrphanComponent = defineComponent({
+			name: 'OrphanValidatable',
+			setup() {
+				const validateOnSubmit = vi.fn(() => true)
+				const clearValidation = vi.fn()
+				const reset = vi.fn()
+
+				useValidatable(validateOnSubmit, clearValidation, reset)
+
+				return () => null
+			},
+		})
+
+		const mountOrphan = () => {
+			const wrapper = mount(OrphanComponent)
+			wrapper.unmount()
+		}
+
+		expect(mountOrphan).not.toThrow()
+	})
+})