@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/Captcha/tests/__snapshots__/Captcha.spec.ts.snap

@@ -117,22 +117,22 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                     v-field-label
                     v-label
                   "
-                  for="input-v-3"
-                  id="input-v-3-label"
+                  for="input-v-4"
+                  id="input-v-4-label"
                 >
                   <!---->
-                  Caractères de l’audio
+                  Caractères de l’image
                 </label>
                 <!---->
                 <input
-                  aria-describedby="input-v-3-messages"
-                  aria-label="Caractères de l’audio"
-                  aria-labelledby="input-v-3-label"
+                  aria-label="Caractères de l’image"
+                  aria-labelledby="input-v-4-label"
+                  aria-required="false"
                   autocomplete="off"
                   class="v-field__input"
                   direction="horizontal"
-                  id="input-v-3"
-                  title="Caractères de l’audio"
+                  id="input-v-4"
+                  title="Caractères de l’image"
                   type="text"
                 />
                 <!---->
@@ -143,6 +143,8 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                 <!-- v-if -->
                 <!-- v-if -->
                 <!-- v-if -->
+                <!-- Boutons d'incrément custom (remplacent le spinner natif, perdu en type=text) -->
+                <!-- v-if -->
               </div>
               <div class="v-field__outline">
                 <div class="v-field__outline__start"></div>
@@ -156,7 +158,7 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                     "
                   >
                     <!---->
-                    Caractères de l’audio
+                    Caractères de l’image
                   </label>
                 </div>
                 <div class="v-field__outline__end"></div>
@@ -165,20 +167,7 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
             </div>
           </div>
           <!---->
-          <div class="v-input__details">
-            <transition-group-stub
-              appear="false"
-              class="v-messages"
-              css="true"
-              id="input-v-3-messages"
-              name="slide-y-transition"
-              persisted="false"
-              tag="div"
-            >
-              <!---->
-            </transition-group-stub>
-            <!---->
-          </div>
+          <!---->
         </div>
         <!-- v-if -->
       </div>
@@ -459,21 +448,21 @@ exports[`Captcha > renders correctly in image mode 1`] = `
                     v-field-label
                     v-label
                   "
-                  for="input-v-2"
-                  id="input-v-2-label"
+                  for="input-v-3"
+                  id="input-v-3-label"
                 >
                   <!---->
                   Caractères de l’image
                 </label>
                 <!---->
                 <input
-                  aria-describedby="input-v-2-messages"
                   aria-label="Caractères de l’image"
-                  aria-labelledby="input-v-2-label"
+                  aria-labelledby="input-v-3-label"
+                  aria-required="false"
                   autocomplete="off"
                   class="v-field__input"
                   direction="horizontal"
-                  id="input-v-2"
+                  id="input-v-3"
                   title="Caractères de l’image"
                   type="text"
                 />
@@ -485,6 +474,8 @@ exports[`Captcha > renders correctly in image mode 1`] = `
                 <!-- v-if -->
                 <!-- v-if -->
                 <!-- v-if -->
+                <!-- Boutons d'incrément custom (remplacent le spinner natif, perdu en type=text) -->
+                <!-- v-if -->
               </div>
               <div class="v-field__outline">
                 <div class="v-field__outline__start"></div>
@@ -507,20 +498,7 @@ exports[`Captcha > renders correctly in image mode 1`] = `
             </div>
           </div>
           <!---->
-          <div class="v-input__details">
-            <transition-group-stub
-              appear="false"
-              class="v-messages"
-              css="true"
-              id="input-v-2-messages"
-              name="slide-y-transition"
-              persisted="false"
-              tag="div"
-            >
-              <!---->
-            </transition-group-stub>
-            <!---->
-          </div>
+          <!---->
         </div>
         <!-- v-if -->
       </div>

package/src/components/Captcha/types.ts

@@ -1,2 +1,17 @@
 export type CaptchaType = 'image' | 'audio' | 'choice'
 export type StateType = 'idle' | 'pending' | 'resolved' | 'rejected'
+import type { FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+import type { locales as defaultLocales } from './locales'
+
+export type CaptchaProps = FieldValidationProps & {
+	modelValue?: string | undefined
+	urlCreate: string
+	urlGetImage: string
+	urlGetAudio: string
+	type?: CaptchaType
+	tagTitle?: string
+	helpDesk?: string | false
+	isClearable?: boolean
+	locale?: string
+	locales?: typeof defaultLocales
+}

package/src/components/Captcha/useCaptchaValidation.ts

@@ -0,0 +1,87 @@
+import { computed, type Ref } from 'vue'
+import { useValidation, type VuetifyValidationRule } from '@/composables/unifyValidation/useValidation'
+import type { ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
+import type { locales as defaultLocales } from './locales'
+
+export function useCaptchaValidation(params: {
+	modelValue: Ref<string | null>
+	readonly: Ref<boolean>
+	disabled: Ref<boolean>
+	required: Ref<boolean>
+	isValidateOnBlur: Ref<boolean>
+	showSuccessMessages: Ref<boolean>
+	disableErrorHandling: Ref<boolean>
+	useVuetifyValidation: Ref<boolean>
+	label: Ref<string>
+	rules: Ref<VuetifyValidationRule[] | undefined>
+	customRules: Ref<SyValidationRule[] | undefined>
+	customWarningRules: Ref<SyValidationRule[] | undefined>
+	customSuccessRules: Ref<SyValidationRule[] | undefined>
+	errorMessages: Ref<string[] | undefined | null>
+	warningMessages: Ref<string[] | undefined | null>
+	successMessages: Ref<string[] | undefined | null>
+	hasErrorProp: Ref<boolean>
+	hasWarningProp: Ref<boolean>
+	hasSuccessProp: Ref<boolean>
+	maxErrors: Ref<number | undefined>
+	focused: Ref<boolean>
+	locales: Ref<typeof defaultLocales>
+},
+) {
+	const defaultRules = computed<SyValidationRule[]>(() => params.required
+		? [{
+				type: 'required',
+				options: {
+					message: params.locales.value.required,
+					fieldIdentifier: params.label.value,
+				},
+			}]
+		: [],
+	)
+
+	// Un captcha rempli n'est pas « valide » pour autant : la réponse doit être vérifiée.
+	// On n'autorise donc le succès que s'il existe une source de succès explicite
+	// (règle de succès, règle d'erreur portant un successMessage, message de succès injecté,
+	// ou état de succès forcé) — sinon le succès « champ rempli = valide » par défaut est ignoré.
+	const hasExplicitSuccessSource = computed(() =>
+		(params.customSuccessRules.value?.length ?? 0) > 0
+		|| (params.customRules.value ?? []).some(rule => !!rule.options?.successMessage)
+		|| (params.successMessages.value?.length ?? 0) > 0
+		|| params.hasSuccessProp.value,
+	)
+
+	const { validate, clearValidation, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
+		modelValue: params.modelValue,
+		readonly: params.readonly,
+		disabled: params.disabled,
+		required: params.required,
+		isValidateOnBlur: params.isValidateOnBlur,
+		showSuccessMessages: params.showSuccessMessages,
+		disableErrorHandling: params.disableErrorHandling,
+		useVuetifyValidation: params.useVuetifyValidation,
+		label: params.label,
+		rules: params.rules ?? [],
+		customRules: computed(() => [...defaultRules.value, ...(params.customRules.value ?? [])]),
+		customWarningRules: computed(() => params.customWarningRules.value ?? []),
+		customSuccessRules: computed(() => params.customSuccessRules.value ?? []),
+		errorMessages: params.errorMessages,
+		warningMessages: params.warningMessages,
+		successMessages: params.successMessages,
+		hasErrorProp: params.hasErrorProp,
+		hasWarningProp: params.hasWarningProp,
+		hasSuccessProp: params.hasSuccessProp,
+		maxErrors: computed(() => params.maxErrors.value ?? 1),
+		focused: params.focused,
+	})
+
+	return {
+		validate,
+		clearValidation,
+		errors,
+		warnings,
+		successes: computed(() => hasExplicitSuccessSource.value ? successes.value : []),
+		hasError,
+		hasWarning,
+		hasSuccess: computed(() => hasExplicitSuccessSource.value && hasSuccess.value),
+	}
+}