@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/Captcha/Captcha.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import { mdiCached, mdiImageOutline, mdiPause } from '@mdi/js'
-	import { ref, watch } from 'vue'
+	import { computed, ref, toRef, watch } from 'vue'
 	import CaptchaAlert from './CaptchaAlert.vue'
 	import CaptchaBase from './CaptchaBase.vue'
 	import CaptchaBtn from './CaptchaBtn.vue'
@@ -10,28 +10,20 @@
 	import CaptchaInformation from './CaptchaInformation.vue'
 	import volumeUp from './icons/volumeUp.vue'
 	import { locales as defaultLocales } from './locales'
-	import { type CaptchaType, type StateType } from './types'
+	import { type CaptchaProps, type CaptchaType, type StateType } from './types'
+	import { useCaptchaValidation } from './useCaptchaValidation'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import { validationPropsDefaults } from '@/composables/unifyValidation/useValidation.ts'
 
-	const props = withDefaults(defineProps<{
-		urlCreate: string
-		urlGetImage: string
-		urlGetAudio: string
-		modelValue?: string | undefined
-		errorMessage?: string
-		type?: CaptchaType
-		tagTitle?: string
-		helpDesk?: string | false
-		locale?: string
-		locales?: typeof defaultLocales
-	}>(), {
+	const props = withDefaults(defineProps<CaptchaProps>(), {
 		modelValue: undefined,
-		errorMessage: undefined,
 		type: 'image',
 		helpDesk: '3648',
 		tagTitle: 'h3',
+		isClearable: false,
 		locale: navigator.language,
 		locales: () => defaultLocales,
+		...validationPropsDefaults,
 	})
 
 	const emit = defineEmits<{
@@ -41,19 +33,19 @@
 		(e: 'audioError'): void
 		(e: 'creationError'): void
 	}>()
-	const text = ref<string | null>(null)
+	const text = ref<string | null>(props.modelValue ?? null)
 	const type = ref<CaptchaType>(props.type)
 	const id = ref<string | null>(null)
 	const state = ref<StateType>('idle')
-	const captchaValid = ref<boolean>(false)
 
 	watch(() => props.modelValue, (val) => {
 		text.value = val ?? null
-	}, { immediate: true })
+	})
 
 	watch(() => props.type, (val) => {
 		type.value = val
-	}, { immediate: true })
+		clearValidation()
+	})
 
 	watch(text, (val) => {
 		if (val !== props.modelValue) {
@@ -61,12 +53,21 @@
 		}
 	})
 
+	let firstLoading = true
 	function createCaptchaInit() {
+		if (firstLoading) {
+			return
+		}
 		text.value = null
 	}
 
 	function createCaptchaSuccess(captchaId: string | null) {
 		id.value = captchaId
+		if (firstLoading) {
+			firstLoading = false
+			return
+		}
+		clearValidation()
 	}
 
 	function emitChangeValueEvent(val: string) {
@@ -74,6 +75,7 @@
 	}
 
 	function emitChangeTypeEvent() {
+		clearValidation()
 		emit('update:type', type.value)
 	}
 
@@ -86,6 +88,54 @@
 		}
 	}
 
+	const focused = ref(false)
+
+	const { validate, clearValidation, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useCaptchaValidation({
+		modelValue: text,
+		readonly: toRef(props, 'readonly'),
+		disabled: toRef(props, 'disabled'),
+		required: toRef(props, 'required'),
+		isValidateOnBlur: toRef(props, 'isValidateOnBlur'),
+		showSuccessMessages: toRef(props, 'showSuccessMessages'),
+		disableErrorHandling: toRef(props, 'disableErrorHandling'),
+		useVuetifyValidation: toRef(props, 'useVuetifyValidation'),
+		label: computed(() => type.value === 'image' ? props.locales.image.textfieldLabel : props.locales.audio.textfieldLabel),
+		rules: toRef(props, 'rules'),
+		customRules: toRef(props, 'customRules'),
+		customWarningRules: toRef(props, 'customWarningRules'),
+		customSuccessRules: toRef(props, 'customSuccessRules'),
+		errorMessages: toRef(props, 'errorMessages'),
+		warningMessages: toRef(props, 'warningMessages'),
+		successMessages: toRef(props, 'successMessages'),
+		hasErrorProp: toRef(props, 'hasError'),
+		hasWarningProp: toRef(props, 'hasWarning'),
+		hasSuccessProp: toRef(props, 'hasSuccess'),
+		maxErrors: toRef(props, 'maxErrors'),
+		focused,
+		locales: toRef(props, 'locales'),
+	})
+
+	function onFocus() {
+		focused.value = true
+	}
+
+	function onBlur() {
+		focused.value = false
+	}
+
+	function reset() {
+		text.value = null
+		state.value = 'idle'
+		clearValidation()
+	}
+
+	defineExpose({
+		validateOnSubmit: validate,
+		clearValidation,
+		reset,
+		captchaId: id,
+	})
+
 </script>
 
 <template>
@@ -141,10 +191,20 @@
 					:locales
 					:label="locales.image.textfieldLabel"
 					:state="createCaptchaState"
-					:errors="props.errorMessage ? [props.errorMessage] : []"
 					:loading="state === 'pending'"
-					:success="captchaValid"
+					:error-messages="errors"
+					:warning-messages="warnings"
+					:success-messages="successes"
+					:has-error="hasError"
+					:has-warning="hasWarning"
+					:has-success="hasSuccess"
+					:show-success-messages="props.showSuccessMessages"
+					:required="props.required"
+					:max-errors="props.maxErrors"
+					:is-clearable="props.isClearable"
 					@update:model-value="emitChangeValueEvent"
+					@focus="onFocus"
+					@blur="onBlur"
 				/>
 
 				<div class="captcha-config pt-4 d-flex flex-column ga-2 align-start">
@@ -233,12 +293,22 @@
 				<CaptchaForm
 					v-model="text"
 					:locales
-					:label="locales.audio.textfieldLabel"
+					:label="locales.image.textfieldLabel"
 					:state="createCaptchaState"
 					:loading="state === 'pending'"
-					:errors="props.errorMessage ? [props.errorMessage] : []"
-					:success="captchaValid"
+					:error-messages="errors"
+					:warning-messages="warnings"
+					:success-messages="successes"
+					:has-error="hasError"
+					:has-warning="hasWarning"
+					:has-success="hasSuccess"
+					:show-success-messages="props.showSuccessMessages"
+					:required="props.required"
+					:max-errors="props.maxErrors"
+					:is-clearable="props.isClearable"
 					@update:model-value="emitChangeValueEvent"
+					@focus="onFocus"
+					@blur="onBlur"
 				/>
 				<div class="captcha-config pt-4 d-flex flex-column ga-2 align-start">
 					<p class="label-options text-textSubdued">
@@ -282,9 +352,7 @@
 					>
 						{{ locales.choiceCaptcha.image }}
 					</CaptchaBtn>
-					<CaptchaBtn
-						@click="chooseAudio"
-					>
+					<CaptchaBtn @click="chooseAudio">
 						<volume-up
 							fill="#0C419A"
 							aria-hidden="true"
@@ -311,5 +379,4 @@
 	gap: var(--v-gap-2);
 	letter-spacing: 0%;
 }
-
 </style>

package/src/components/Captcha/CaptchaForm.vue

@@ -8,23 +8,53 @@
 		modelValue?: string | null
 		state?: string | null
 		loading?: boolean
-		errors: string[] | undefined
-		success: boolean
 		locales: typeof defaultLocales
+		success?: boolean // This prop is used to determine if the captcha validation was successful, and to set the input to readonly if true
+		errorMessages?: string[]
+		warningMessages?: string[]
+		successMessages?: string[]
+		hasError?: boolean
+		hasWarning?: boolean
+		hasSuccess?: boolean
+		showSuccessMessages?: boolean
+		required?: boolean
+		maxErrors?: number
+		isClearable?: boolean
 	}
 
-	const props = defineProps<Props>()
-	const emit = defineEmits(['update:modelValue'])
+	const props = withDefaults(defineProps<Props>(), {
+		modelValue: null,
+		state: null,
+		loading: false,
+		errorMessages: undefined,
+		warningMessages: undefined,
+		successMessages: undefined,
+		hasError: false,
+		hasWarning: false,
+		hasSuccess: false,
+		showSuccessMessages: false,
+		required: false,
+		maxErrors: undefined,
+	})
+	const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
 
 	const text = ref<string | null>(props.modelValue ?? null)
 
 	watch(() => props.modelValue, (newVal) => {
 		text.value = newVal ?? null
-	}, { immediate: true })
+	})
 
 	function emitChangeEvent() {
 		emit('update:modelValue', text.value)
 	}
+
+	function emitFocusEvent() {
+		emit('focus')
+	}
+
+	function emitBlurEvent() {
+		emit('blur')
+	}
 </script>
 
 <template>
@@ -33,26 +63,25 @@
 			v-model="text"
 			class="mt-4"
 			variant="outlined"
-			:error-messages="props.errors"
-			:custom-rules="[
-				{
-					type: 'required',
-					options: { message: locales.required },
-				}
-			]"
-			:show-success-messages="false"
-			:has-success="success"
+			:error-messages="props.errorMessages ?? []"
+			:warning-messages="props.warningMessages ?? []"
+			:success-messages="props.successMessages ?? []"
+			:has-error="props.hasError"
+			:has-warning="props.hasWarning"
+			:has-success="props.hasSuccess"
+			disable-error-handling
+			:show-success-messages="props.showSuccessMessages"
+			:required="props.required"
+			:max-errors="props.maxErrors"
 			:disabled="state === 'rejected'"
 			:label="label"
-			hide-details="auto"
-			:readonly="success"
-			:is-clearable="!success"
+			:hide-details="!props.hasError && !props.hasWarning && !props.hasSuccess"
+			:readonly="props.success"
+			:is-clearable="props.isClearable && !props.success"
+			:aria-required="required"
 			@update:model-value="emitChangeEvent"
+			@focus="emitFocusEvent"
+			@blur="emitBlurEvent"
 		/>
 	</VSheet>
 </template>
-<style lang="scss" scoped>
-:deep(.v-input__control:not(:has(.v-field--error))+.v-input__details) {
-	display: none;
-}
-</style>

package/src/components/Captcha/tests/Captcha.focus.spec.ts

@@ -0,0 +1,214 @@
+import { describe, expect, it } from 'vitest'
+import { defineComponent } from 'vue'
+import { mount } from '@vue/test-utils'
+import Captcha from '../Captcha.vue'
+
+const CaptchaBaseStub = {
+	name: 'CaptchaBase',
+	emits: ['update:modelValue', 'create-captcha:init', 'create-captcha:success', 'create-captcha:error'],
+	template: `
+		<div>
+			<button class="change-type" @click="$emit('update:modelValue', 'audio')" />
+			<button class="refresh-captcha" @click="$emit('create-captcha:init')" />
+			<button class="captcha-success" @click="$emit('create-captcha:success', 'captcha-id-1')" />
+			<slot
+				name="image"
+				:choose-image="() => {}"
+				:choose-audio="() => {}"
+				:url="''"
+				:state="'idle'"
+				:is-error="false"
+				:error-message="null"
+			/>
+		</div>
+	`,
+}
+
+const CaptchaFormStub = {
+	name: 'CaptchaForm',
+	emits: ['update:modelValue'],
+	template: '<div class="captcha-form-stub" />',
+}
+
+const CaptchaFormWithFocusStub = defineComponent({
+	name: 'CaptchaForm',
+	props: {
+		errorMessages: { type: Array, default: () => [] },
+	},
+	emits: ['update:modelValue', 'focus', 'blur'],
+	template: '<div class="captcha-form-stub" />',
+})
+
+describe('Captcha behavior', () => {
+	it('emits update:type when captcha type changes from CaptchaBase', async () => {
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				type: 'image',
+			},
+			global: {
+				stubs: {
+					CaptchaInformation: true,
+					CaptchaBase: CaptchaBaseStub,
+					CaptchaImg: true,
+					CaptchaAlert: true,
+					CaptchaBtn: true,
+					CaptchaHelpdesk: true,
+					CaptchaForm: CaptchaFormStub,
+					volumeUp: true,
+					SyIcon: true,
+					VBtn: true,
+				},
+			},
+		})
+
+		await wrapper.find('.change-type').trigger('click')
+
+		expect(wrapper.emitted('update:type')).toBeTruthy()
+		expect(wrapper.emitted('update:type')?.[0]).toEqual(['audio'])
+	})
+
+	it('clears captcha text when a new captcha is initialized', async () => {
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+			},
+			global: {
+				stubs: {
+					CaptchaInformation: true,
+					CaptchaBase: CaptchaBaseStub,
+					CaptchaImg: true,
+					CaptchaAlert: true,
+					CaptchaBtn: true,
+					CaptchaHelpdesk: true,
+					CaptchaForm: CaptchaFormStub,
+					volumeUp: true,
+					SyIcon: true,
+					VBtn: true,
+				},
+			},
+		})
+
+		// Complete the initial captcha load so subsequent refreshes work
+		await wrapper.find('.captcha-success').trigger('click')
+
+		const form = wrapper.findComponent(CaptchaFormStub)
+		await form.vm.$emit('update:modelValue', 'captcha-text')
+		await wrapper.find('.refresh-captcha').trigger('click')
+
+		const modelEvents = wrapper.emitted('update:modelValue') || []
+		expect(modelEvents.length).toBeGreaterThanOrEqual(2)
+		expect(modelEvents[0]).toEqual(['captcha-text'])
+		expect(modelEvents[modelEvents.length - 1]).toEqual([''])
+	})
+
+	it('does not clear validation errors when the first captcha loads after a blur', async () => {
+		const commonStubs = {
+			CaptchaInformation: true,
+			CaptchaBase: CaptchaBaseStub,
+			CaptchaImg: true,
+			CaptchaAlert: true,
+			CaptchaBtn: true,
+			CaptchaHelpdesk: true,
+			CaptchaForm: CaptchaFormWithFocusStub,
+			volumeUp: true,
+			SyIcon: true,
+			VBtn: true,
+		}
+
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				customRules: [
+					{
+						type: 'custom' as const,
+						options: {
+							validate: (v: unknown) => v ? true : 'Le captcha est requis',
+						},
+					},
+				],
+			},
+			global: { stubs: commonStubs },
+		})
+
+		// Simulate: user focuses and blurs without entering a value (triggers validation)
+		const form = wrapper.findComponent(CaptchaFormWithFocusStub)
+		await form.vm.$emit('focus')
+		await form.vm.$emit('blur')
+
+		// Wait for async validation to complete
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		// Errors should now be set
+		const errorsBeforeSuccess = form.props('errorMessages') as string[]
+		expect(errorsBeforeSuccess).toContain('Le captcha est requis')
+
+		// Simulate: first captcha load completes (race condition – used to clear validation)
+		await wrapper.find('.captcha-success').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		// Errors must still be present – first create-captcha:success must NOT clear validation
+		const errorsAfterFirstSuccess = form.props('errorMessages') as string[]
+		expect(errorsAfterFirstSuccess).toContain('Le captcha est requis')
+	})
+
+	it('clears validation errors when the captcha is refreshed after a blur', async () => {
+		const commonStubs = {
+			CaptchaInformation: true,
+			CaptchaBase: CaptchaBaseStub,
+			CaptchaImg: true,
+			CaptchaAlert: true,
+			CaptchaBtn: true,
+			CaptchaHelpdesk: true,
+			CaptchaForm: CaptchaFormWithFocusStub,
+			volumeUp: true,
+			SyIcon: true,
+			VBtn: true,
+		}
+
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				customRules: [
+					{
+						type: 'custom' as const,
+						options: {
+							validate: (v: unknown) => v ? true : 'Le captcha est requis',
+						},
+					},
+				],
+			},
+			global: { stubs: commonStubs },
+		})
+
+		// Complete the initial load first
+		await wrapper.find('.captcha-success').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		// User blurs without a value → error shown
+		const form = wrapper.findComponent(CaptchaFormWithFocusStub)
+		await form.vm.$emit('focus')
+		await form.vm.$emit('blur')
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		expect(form.props('errorMessages') as string[]).toContain('Le captcha est requis')
+
+		// User asks for a new captcha (init + success)
+		await wrapper.find('.refresh-captcha').trigger('click')
+		await wrapper.find('.captcha-success').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		// Errors should be cleared now (this is the intended behaviour for a refresh)
+		expect(form.props('errorMessages') as string[]).toEqual([])
+	})
+})