@cnamts/synapse 1.0.27 → 1.1.1

package/src/composables/unifyValidation/useValidation.ts

@@ -45,7 +45,7 @@ export const validationPropsDefaults = {
 	disabled: false,
 	required: false,
 	isValidateOnBlur: true,
-	showSuccessMessages: true,
+	showSuccessMessages: false,
 	disableErrorHandling: false,
 	customRules: () => [],
 	customWarningRules: () => [],
@@ -76,13 +76,13 @@ export function useValidation(params: {
 	hasErrorProp?: Ref<boolean>
 	hasWarningProp?: Ref<boolean>
 	hasSuccessProp?: Ref<boolean>
+	maxErrors?: Ref<number>
 } & ({
 	useVuetifyValidation: true
 	rules: Ref<VuetifyValidationRule[] | undefined>
 	customRules?: never
 	customWarningRules?: never
 	customSuccessRules?: never
-	maxErrors?: Ref<number>
 } | {
 	useVuetifyValidation: false
 	customRules: Ref<SyValidationRule[]>
@@ -95,20 +95,7 @@ export function useValidation(params: {
 	customWarningRules?: Ref<SyValidationRule[]>
 	customSuccessRules?: Ref<SyValidationRule[]>
 	rules: Ref<VuetifyValidationRule[] | undefined>
-	maxErrors?: Ref<number>
 })) {
-	if (params.disableErrorHandling.value) {
-		return {
-			errors: ref<string[]>([]),
-			warnings: ref<string[]>([]),
-			successes: ref<string[]>([]),
-			hasError: computed(() => params.hasErrorProp?.value ?? false),
-			hasWarning: computed(() => params.hasWarningProp?.value ?? false),
-			hasSuccess: computed(() => params.hasSuccessProp?.value ?? false),
-			validate: async () => true,
-			clearValidation: () => {},
-		}
-	}
 	const vuetifyErrors = ref<string[]>([])
 	const customErrors = ref<string[]>([])
 	const innerWarnings = ref<string[]>([])
@@ -126,7 +113,7 @@ export function useValidation(params: {
 			computed(() => params.errorMessages?.value || []),
 			params.focused,
 			params.maxErrors,
-			params.label,
+			computed(() => toValue(params.useVuetifyValidation) ? params.label?.value : undefined),
 			params.label,
 			params.readonly,
 			computed(() => params.isValidateOnBlur.value ? 'blur' : 'input'),
@@ -171,23 +158,45 @@ export function useValidation(params: {
 		}
 	}
 
-	const errors = computed(() => [...new Set([
-		...vuetifyErrors.value,
-		...customErrors.value,
-		...(params.errorMessages?.value || []),
-	])])
-	const warnings = computed(() => [...new Set([
-		...innerWarnings.value,
-		...(params.warningMessages?.value || []),
-	])])
-	const successes = computed(() => [...new Set([
-		...(params.showSuccessMessages.value ? innerSuccesses.value : []),
-		...(params.successMessages?.value || []),
-	])])
+	const errors = computed(() => {
+		const errorslist = [...params.errorMessages?.value || []]
+		if (toValue(params.disableErrorHandling) !== true) {
+			errorslist.push(...vuetifyErrors.value)
+			errorslist.push(...customErrors.value)
+		}
+
+		const max = params.maxErrors?.value
+		return max && max > 0 ? [...new Set(errorslist)].slice(0, max) : [...new Set(errorslist)]
+	})
+
+	const warnings = computed(() => {
+		const warningsList = [...params.warningMessages?.value || []]
+		if (toValue(params.disableErrorHandling) !== true) {
+			warningsList.push(...innerWarnings.value)
+		}
+		const max = params.maxErrors?.value
+		return max && max > 0 ? [...new Set(warningsList)].slice(0, max) : [...new Set(warningsList)]
+	})
+	const successes = computed(() => {
+		const successesList = [...params.successMessages?.value || []]
+		if (toValue(params.disableErrorHandling) !== true) {
+			successesList.push(...innerSuccesses.value)
+		}
+		const max = params.maxErrors?.value
+		return max && max > 0 ? [...new Set(successesList)].slice(0, max) : [...new Set(successesList)]
+	})
 	const internalHasSuccess = computed(() => customValidator.hasSuccess.value)
 
-	const hasError = computed(() => errors.value.length > 0 || params.hasErrorProp?.value)
-	const hasWarning = computed(() => warnings.value.length > 0 || params.hasWarningProp?.value)
+	const hasError = computed(() => errors.value.length > 0 || Boolean(params.hasErrorProp?.value))
+	const hasWarning = computed(() => warnings.value.length > 0 || Boolean(params.hasWarningProp?.value))
+
+	const state = computed(() => {
+		if (hasError.value) return 'error'
+		if (hasWarning.value) return 'warning'
+		if (hasSuccess.value) return 'success'
+		return 'default'
+	})
+
 	// TODO: vérifier si c'est la meilleure approche pour supprimer le succès en mode Vuetify
 	const hasSuccess = computed(() => {
 		if (toValue(params.useVuetifyValidation)) {
@@ -212,6 +221,7 @@ export function useValidation(params: {
 		hasError,
 		hasWarning,
 		hasSuccess,
+		state,
 		validate,
 		clearValidation,
 	}

package/src/composables/useFilterable/useFilterable.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect } from 'vitest'
 import useFilterable, { type FilterItem, type FilterProp } from './useFilterable'
 import type { ChipItem } from '@/components/ChipList/types'
 import { nextTick, ref } from 'vue'
@@ -6,10 +6,7 @@ import { nextTick, ref } from 'vue'
 describe('Filterable', () => {
 	describe('formatFilterName', () => {
 		it('preserves existing behavior for names with spaces', () => {
-			const { formatFilterName } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { formatFilterName } = useFilterable(ref([]))
 
 			const name = formatFilterName('Test Name')
 			expect(name).toBe('test-name')
@@ -19,10 +16,7 @@ describe('Filterable', () => {
 		})
 
 		it('preserves existing behavior for names with special characters', () => {
-			const { formatFilterName } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { formatFilterName } = useFilterable(ref([]))
 
 			const nameWithSpecialChars = formatFilterName('Filter@Name#Test')
 			expect(nameWithSpecialChars).toBe('filternametest')
@@ -32,10 +26,7 @@ describe('Filterable', () => {
 		})
 
 		it('fixes camelCase issue by preserving case for single words', () => {
-			const { formatFilterName } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { formatFilterName } = useFilterable(ref([]))
 
 			const camelCaseName = formatFilterName('totoCase')
 			expect(camelCaseName).toBe('totoCase')
@@ -48,10 +39,7 @@ describe('Filterable', () => {
 		})
 
 		it('handles edge cases correctly', () => {
-			const { formatFilterName } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { formatFilterName } = useFilterable(ref([]))
 
 			// Single lowercase word
 			expect(formatFilterName('name')).toBe('name')
@@ -69,10 +57,7 @@ describe('Filterable', () => {
 
 	describe('getChips', () => {
 		it('uses the formatChip function to compute the chip', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -100,10 +85,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns an empty array when the value is an empty string', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -118,10 +100,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is a string', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -141,10 +120,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is a number', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -164,10 +140,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is a period field object', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -193,10 +166,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns an empty array when the value is a period field object with null values', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -214,10 +184,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns a chip when only from is set', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -235,10 +202,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns a chip when only to is set', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -256,10 +220,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is an object', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -290,10 +251,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is an array', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -317,10 +275,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is an array of objects', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -355,10 +310,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is an array of objects with text properties', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -393,10 +345,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns the correct text when the value is an array of objects with text and value properties', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -435,10 +384,7 @@ describe('Filterable', () => {
 		})
 
 		it('returns an empty array when the value is undefined', () => {
-			const { getChips, getFilterCount } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { getChips, getFilterCount } = useFilterable(ref([]))
 
 			const filter = {} as FilterItem
 
@@ -452,10 +398,7 @@ describe('Filterable', () => {
 
 	describe('removeChip', () => {
 		it('removes the chip from the filter', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -473,10 +416,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is a number', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -494,10 +434,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is an object', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -524,10 +461,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is a period field object', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const periodFilter = {
 				name: 'Test',
@@ -551,10 +485,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is a period field object with null values', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const periodFilter = {
 				name: 'Test',
@@ -578,10 +509,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is an array', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const arrayFilter = {
 				name: 'Test',
@@ -599,10 +527,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is an array of objects', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const arrayFilter = {
 				name: 'Test',
@@ -633,10 +558,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is an empty array', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const arrayFilter = {
 				name: 'Test',
@@ -654,10 +576,7 @@ describe('Filterable', () => {
 		})
 
 		it('removes the chip from the filter when the value is an array of strings', () => {
-			const { removeChip } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { removeChip } = useFilterable(ref([]))
 
 			const arrayFilter = {
 				name: 'Test',
@@ -677,10 +596,7 @@ describe('Filterable', () => {
 
 	describe('resetFilter', () => {
 		it('resets the filter', () => {
-			const { resetFilter } = useFilterable(
-				ref([]),
-				() => {},
-			)
+			const { resetFilter } = useFilterable(ref([]))
 
 			const filter = {
 				name: 'Test',
@@ -694,42 +610,89 @@ describe('Filterable', () => {
 	})
 
 	describe('resetAllFilters', () => {
-		it('resets all filters', async () => {
-			const filters = ref<FilterProp>([])
-			const emitsFunction = vi.fn()
-			const { resetAllFilters } = useFilterable(
-				filters,
-				emitsFunction,
-			)
-
-			filters.value = [
-				{
-					name: 'Test',
-					value: 'test',
-				},
-				{
-					name: 'Test 2',
-					value: 'test 2',
-				},
+		it('sets all filter values to undefined', async () => {
+			const model = ref<FilterProp>([
+				{ name: 'Test', value: 'test' },
+				{ name: 'Test 2', value: 'test 2' },
+			])
+			const { filters, resetAllFilters } = useFilterable(model)
+
+			resetAllFilters()
+
+			expect(filters.value.every(f => f.value === undefined)).toBe(true)
+		})
+	})
+
+	describe('model sync (full replacement)', () => {
+		it('initializes filters with a deep copy of the model on mount', () => {
+			const model = ref<FilterProp>([
+				{ name: 'folder', value: ['cardio'] },
+			])
+
+			const { filters } = useFilterable(model)
+
+			expect(filters.value).toEqual([{ name: 'folder', value: ['cardio'] }])
+			// Ensure it is a deep copy, not the same object reference
+			expect(filters.value[0]).not.toBe(model.value[0])
+		})
+
+		it('replaces local pending state when model updates another filter externally', async () => {
+			const model = ref<FilterProp>([
+				{ name: 'folder', value: undefined },
+				{ name: 'profession', value: undefined },
+			])
+
+			const { filters } = useFilterable(model)
+
+			// Simulate a local pending selection in FilterSideBar (not yet applied)
+			filters.value.find(f => f.name === 'profession')!.value = ['infirmier']
+
+			// FilterInline updates 'folder' in the shared model
+			model.value = [
+				{ name: 'folder', value: ['cardiologie'] },
+				{ name: 'profession', value: undefined },
 			]
+			await nextTick()
+
+			// Current behavior: full model deep-copy on external change resets local pending state
+			expect(filters.value.find(f => f.name === 'profession')?.value).toBeUndefined()
+			// 'folder' must reflect the external change
+			expect(filters.value.find(f => f.name === 'folder')?.value).toEqual(['cardiologie'])
+		})
+
+		it('replaces local state when the model externally changes the same filter', async () => {
+			const model = ref<FilterProp>([
+				{ name: 'folder', value: ['old-value'] },
+			])
+
+			const { filters } = useFilterable(model)
 
+			// User has a local pending selection (not yet applied)
+			filters.value.find(f => f.name === 'folder')!.value = ['local-pending']
+
+			// External update changes the same filter
+			model.value = [{ name: 'folder', value: ['new-external'] }]
 			await nextTick()
 
-			resetAllFilters()
+			expect(filters.value.find(f => f.name === 'folder')?.value).toEqual(['new-external'])
+		})
+
+		it('replaces local pending state even when model content is identical', async () => {
+			const model = ref<FilterProp>([
+				{ name: 'folder', value: undefined },
+			])
 
-			expect(emitsFunction).toHaveBeenCalledTimes(1)
-			const emittedCall = emitsFunction.mock.calls[0]
-			expect(emittedCall?.[0]).toBe('update:modelValue')
+			const { filters } = useFilterable(model)
 
-			// Use JSON serialization for robust comparison in CI environments
-			const emittedArray = emittedCall?.[1]
-			const expectedArray = [
-				{ name: 'Test', value: undefined },
-				{ name: 'Test 2', value: undefined },
-			]
+			// User has local pending state
+			filters.value.find(f => f.name === 'folder')!.value = ['local']
+
+			// Re-assign the model with the same content (e.g. echo from own emit)
+			model.value = [{ name: 'folder', value: undefined }]
+			await nextTick()
 
-			// Compare as JSON strings to avoid reference/prototype issues
-			expect(JSON.stringify(emittedArray)).toBe(JSON.stringify(expectedArray))
+			// Current behavior: update is applied from model, local pending state is replaced
+			expect(filters.value.find(f => f.name === 'folder')?.value).toBeUndefined()
 		})
 	})
 })

package/src/composables/useFilterable/useFilterable.ts

@@ -1,4 +1,4 @@
-import { ref, watch, type Ref } from 'vue'
+import { ref, toRaw, watch, type Ref } from 'vue'
 import type { ChipItem } from '@/components/ChipList/types'
 import slugify from 'slugify'
 import { deepCopy } from '@/utils/functions/deepCopy'
@@ -13,11 +13,11 @@ export type FilterItem = {
 
 export type FilterProp = FilterItem[]
 
-export default function useFilterable(model: Ref<FilterProp>, emits) {
+export default function useFilterable(model: Ref<FilterProp>) {
 	const filters = ref<FilterProp>([])
 
 	watch(model, (newFilters) => {
-		filters.value = deepCopy(newFilters)
+		filters.value = deepCopy(toRaw(newFilters))
 	}, { deep: true, immediate: true })
 
 	function getFilterCount(filter: FilterItem): number {
@@ -172,7 +172,6 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 				: undefined
 
 			filter.value = newValue
-			updateValue()
 
 			return
 		}
@@ -187,7 +186,6 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 
 			if (isPeriodField) {
 				filter.value = undefined
-				updateValue()
 
 				return
 			}
@@ -197,7 +195,7 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 			if (hasSelectStructure) {
 				// For single select objects, clear the entire value
 				filter.value = undefined
-				updateValue()
+
 				return
 			}
 
@@ -205,29 +203,20 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 			delete typedValue[chipValue]
 			filter.value = typedValue
 		}
-		updateValue()
 	}
 
 	function resetFilter(filter: FilterItem): void {
 		filter.value = undefined
-		updateValue()
 	}
 
 	function resetAllFilters(): void {
-		filters.value.forEach((filter) => {
-			filter.value = undefined
+		filters.value.forEach((filter: FilterItem) => {
+			resetFilter(filter)
 		})
-
-		updateValue()
-	}
-
-	function updateValue(): void {
-		emits('update:modelValue', filters.value)
 	}
 
 	return {
 		filters,
-		updateValue,
 		removeChip,
 		resetFilter,
 		resetAllFilters,

package/src/composables/useFormFieldErrorHandling.ts

@@ -38,7 +38,7 @@ export const useFormFieldErrorHandling = (
 	emitUpdate?: () => void,
 ): UseFormFieldErrorHandlingReturn => {
 	const validation = useValidation({
-		showSuccessMessages: props.showSuccessMessages ?? true,
+		showSuccessMessages: props.showSuccessMessages ?? false,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling ?? false,
 	})

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

@@ -1,6 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { defineComponent, h } from 'vue'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { useFormValidation, useValidatableComponent } from '../useFormValidation'
 import type { ValidatableComponent } from '../useFormValidation'
 
@@ -35,6 +35,15 @@ const ParentWithForm = defineComponent({
 })
 
 describe('useFormValidation', () => {
+	beforeEach(() => {
+		lastChildApi = null
+		vi.clearAllMocks()
+	})
+
+	afterEach(async () => {
+		await flushPromises()
+	})
+
 	it('registers components and avoids duplicates', () => {
 		lastChildApi = null