@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/PhoneField/types.ts

@@ -0,0 +1,30 @@
+import { type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+import { type locales as defaultLocales } from './locales'
+
+export type DisplayFormat = 'code' | 'code-abbreviation' | 'code-country' | 'country' | 'abbreviation'
+export type Indicatif = {
+	code: string
+	abbreviation: string
+	country: string
+	countryFr?: string
+	mask?: string
+	phoneLength?: number
+}
+export type PhoneFieldProps = FieldValidationProps & {
+	modelValue?: string
+	isClearable?: boolean
+	dialCodeModel?: string | Indicatif
+	outlined?: boolean
+	withCountryCode?: boolean
+	displayFormat?: DisplayFormat
+	customIndicatifs?: Indicatif[]
+	useCustomIndicatifsOnly?: boolean
+	displayAsterisk?: boolean
+	bgColor?: string
+	helpText?: string
+	hideDetails?: boolean
+	autocompleteCountryCode?: string
+	autocompletePhone?: string
+	withoutFieldset?: boolean
+	locales?: typeof defaultLocales
+}

package/src/components/PhoneField/usePhoneFieldValidation.ts

@@ -0,0 +1,119 @@
+import { type ValidationRule } from '@/composables/validation/useValidation'
+import { computed, ref, type Ref } from 'vue'
+import { useValidation } from '@/composables/unifyValidation/useValidation'
+import type { locales } from './locales'
+import type { VuetifyValidationRule } from '@/composables/unifyValidation/useValidation'
+import type { Indicatif } from './types'
+
+export function usePhoneFieldValidation(params: {
+	modelValue: Ref<string>
+	readonly: Ref<boolean>
+	disabled: Ref<boolean>
+	required: Ref<boolean>
+	counter: Ref<number>
+	phoneFieldIdentifier: Ref<string>
+	shouldDisableErrorHandling: Ref<boolean>
+	hasError: Ref<boolean>
+	hasWarning: Ref<boolean>
+	hasSuccess: Ref<boolean>
+	showSuccessMessages: Ref<boolean>
+	disableErrorHandling: Ref<boolean>
+	isValidateOnBlur: Ref<boolean>
+	focused: Ref<boolean>
+	customRules: Ref<ValidationRule[]>
+	warningRules?: Ref<ValidationRule[]>
+	successRules?: Ref<ValidationRule[]>
+	rules?: Ref<VuetifyValidationRule[] | undefined>
+	errorMessages?: Ref<string[] | null | undefined>
+	warningMessages?: Ref<string[] | null | undefined>
+	successMessages?: Ref<string[] | null | undefined>
+	locales: Ref<typeof locales>
+	useVuetifyValidation?: Ref<boolean>
+	dialCode?: Ref<Indicatif>
+	withCountryCode?: Ref<boolean>
+}) {
+	const validationRules = computed<ValidationRule[]>(() => {
+		const rules = [] as ValidationRule[]
+
+		rules.push({
+			type: 'exactLength',
+			options: {
+				length: params.counter.value,
+				ignoreSpace: true,
+				message: params.locales.value.errorLength(params.counter.value),
+				successMessage: params.locales.value.success(params.phoneFieldIdentifier.value),
+				fieldIdentifier: params.phoneFieldIdentifier.value,
+			},
+		})
+
+		if (params.required.value) {
+			rules.unshift({
+				type: 'required',
+				options: {
+					length: params.counter.value,
+					ignoreSpace: true,
+					message: params.locales.value.errorRequired(params.phoneFieldIdentifier.value),
+					fieldIdentifier: params.phoneFieldIdentifier.value,
+				},
+			})
+		}
+
+		return rules
+	})
+
+	const { hasError, hasWarning, hasSuccess, errors, warnings, successes, state, validate, clearValidation } = useValidation({
+		modelValue: params.modelValue,
+		readonly: params.readonly,
+		disabled: params.disabled,
+		required: params.required,
+		isValidateOnBlur: params.isValidateOnBlur,
+		showSuccessMessages: params.showSuccessMessages,
+		disableErrorHandling: params.disableErrorHandling,
+		label: params.phoneFieldIdentifier,
+		focused: params.focused,
+		customRules: computed(() => [
+			...validationRules.value,
+			...params.customRules.value,
+		]),
+		customWarningRules: params.warningRules ?? ref([]),
+		customSuccessRules: params.successRules ?? ref([]),
+		useVuetifyValidation: params.useVuetifyValidation ?? ref(false),
+		rules: params.rules ?? ref(undefined),
+		hasErrorProp: params.hasError,
+		hasWarningProp: params.hasWarning,
+		hasSuccessProp: params.hasSuccess,
+		errorMessages: params.errorMessages,
+		warningMessages: params.warningMessages,
+		successMessages: params.successMessages,
+	})
+
+	const iconColor = computed(() => {
+		if (params.shouldDisableErrorHandling.value) return '#222324'
+		if (hasError.value) return 'error'
+		if (hasWarning.value) return 'warning'
+		if (hasSuccess.value) return 'success'
+		return '#222324'
+	})
+
+	const clearButtonColorClass = computed(() => {
+		if (hasError.value) return 'error-field'
+		if (hasWarning.value) return 'warning-field'
+		if (hasSuccess.value) return 'success-field'
+		return 'text-iconBase'
+	})
+
+	return {
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+		iconColor,
+		clearButtonColorClass,
+		validationRules,
+		state,
+		validate,
+		clearValidation,
+	}
+}

package/src/components/PhoneField/usePhoneIndicatifs.ts

@@ -0,0 +1,89 @@
+import { computed, ref, watch, type Ref } from 'vue'
+import { indicatifs } from './indicatifs'
+import type { Indicatif, DisplayFormat } from './types'
+
+export function usePhoneIndicatifs(
+	dialCodeProp: Ref<string | Indicatif>,
+	displayFormat: Ref<DisplayFormat>,
+	customIndicatifs: Ref<Indicatif[]>,
+	useCustomIndicatifsOnly: Ref<boolean>,
+) {
+	function getIndicatifDisplayText(indicatif: Indicatif): string {
+		switch (displayFormat.value) {
+			case 'code-abbreviation':
+				return `${indicatif.code} (${indicatif.abbreviation})`
+			case 'code-country':
+				return `${indicatif.code} ${indicatif.countryFr || indicatif.country}`
+			case 'country':
+				return indicatif.countryFr || indicatif.country
+			case 'abbreviation':
+				return indicatif.abbreviation
+			default:
+				return indicatif.code
+		}
+	}
+
+	const dialCodeList = computed(() => {
+		const mergedDialCodes = useCustomIndicatifsOnly.value ? customIndicatifs.value : [...indicatifs, ...customIndicatifs.value]
+		return mergedDialCodes.map((indicatif) => {
+			const countryName = indicatif.countryFr || indicatif.country
+			const plainDisplayText = getIndicatifDisplayText(indicatif)
+			let displayText = escapeHtml(plainDisplayText)
+
+			if (displayFormat.value === 'code-abbreviation' || displayFormat.value === 'abbreviation') {
+				const safeCountry = escapeHtml(countryName)
+				const safeAbbr = escapeHtml(indicatif.abbreviation)
+				displayText = displayText.replace(safeAbbr, `<abbr title="${safeCountry}">${safeAbbr}</abbr>`)
+			}
+
+			return {
+				...indicatif,
+				displayText,
+				plainDisplayText,
+				phoneLength: indicatif.phoneLength || indicatif.mask?.replace(/[^#]/g, '').length,
+			}
+		})
+	})
+
+	const internalDialCode = ref<Indicatif>(
+		getIndicatif(dialCodeProp.value) || getFallbackIndicatif(),
+	)
+	watch(dialCodeList, () => {
+		const foundIndicatif = getIndicatif(internalDialCode.value)
+		if (!foundIndicatif) {
+			internalDialCode.value = getFallbackIndicatif()
+		}
+	})
+
+	watch(dialCodeProp, (newVal) => {
+		const foundIndicatif = getIndicatif(newVal)
+		if (foundIndicatif) {
+			internalDialCode.value = foundIndicatif
+		}
+	}, { immediate: true })
+
+	function getIndicatif(dialCode: string | Indicatif | null | undefined): Indicatif | undefined {
+		const countryCode = (typeof dialCode === 'string' ? dialCode : dialCode?.code)
+		return dialCodeList.value.find(indicatif => indicatif.code === countryCode)
+	}
+
+	function getFallbackIndicatif(): Indicatif {
+		return dialCodeList.value.find(indicatif => indicatif.code === '+33')
+			|| dialCodeList.value[0]
+			|| indicatifs.find(indicatif => indicatif.code === '+33')!
+	}
+
+	return {
+		internalDialCode,
+		dialCodeList,
+	}
+}
+
+function escapeHtml(value: string): string {
+	return value
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#39;')
+}