@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/PhoneField/PhoneField.stories.ts

@@ -47,8 +47,6 @@ export const Default: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -63,12 +61,10 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
@@ -129,8 +125,6 @@ export const Required: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -145,12 +139,10 @@ export const Required: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
@@ -210,8 +202,6 @@ export const CustomIndicatifs: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -226,12 +216,10 @@ export const CustomIndicatifs: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
@@ -301,8 +289,6 @@ export const NotValidatedOnBlur: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -317,12 +303,10 @@ export const NotValidatedOnBlur: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
@@ -382,8 +366,6 @@ export const DisplayFormatCode: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -398,12 +380,10 @@ export const DisplayFormatCode: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code')
@@ -463,8 +443,6 @@ export const DisplayFormatCodeAbbreviation: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -479,12 +457,10 @@ export const DisplayFormatCodeAbbreviation: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code-abbreviation')
@@ -544,8 +520,6 @@ export const DisplayFormatCodeCountry: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -560,12 +534,10 @@ export const DisplayFormatCodeCountry: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('code-country')
@@ -625,8 +597,6 @@ export const DisplayFormatCountry: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -641,12 +611,10 @@ export const DisplayFormatCountry: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('country')
@@ -706,8 +674,6 @@ export const DisplayFormatAbbreviation: Story = {
 					<PhoneField
 						v-model="modelValue"
 						:required="required"
-						:outlined="outlined"
-						:outlinedIndicatif="outlinedIndicatif"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
 						:displayFormat="displayFormat"
@@ -722,12 +688,10 @@ export const DisplayFormatAbbreviation: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import PhoneField from '@cnamts/PhoneField'
+					import { PhoneField } from '@cnamts/synapse'
 					
 					const modelValue = ref('')
 					const required = ref(true)
-					const outlined = ref(true)
-					const outlinedIndicatif = ref(true)
 					const withCountryCode = ref(true)
 					const countryCodeRequired = ref(true)
 					const displayFormat = ref('abbreviation')
@@ -791,8 +755,6 @@ export const DisplayModels: Story = {
             v-model="modelValue"
             v-model:selectedDialCode="selectedDialCode"
             :required="required"
-            :outlined="outlined"
-            :outlinedIndicatif="outlinedIndicatif"
             :withCountryCode="withCountryCode"
             :countryCodeRequired="countryCodeRequired"
             :displayFormat="displayFormat"
@@ -807,13 +769,11 @@ export const DisplayModels: Story = {
 				name: 'Script',
 				code: `
         <script setup lang="ts">
-          import PhoneField from '@cnamts/PhoneField'
+          import { PhoneField } from '@cnamts/synapse'
 
           const modelValue = ref('')
           const selectedDialCode = ref('')
           const required = ref(true)
-          const outlined = ref(true)
-          const outlinedIndicatif = ref(true)
           const withCountryCode = ref(true)
           const countryCodeRequired = ref(true)
           const displayFormat = ref('code-country')

package/src/components/PhoneField/PhoneField.vue

@@ -1,5 +1,5 @@
-<script setup lang="ts">
-	import { computed, ref, watch, toRaw } from 'vue'
+<script lang="ts" setup>
+	import { computed, ref, watch } from 'vue'
 	import type { PropType } from 'vue'
 	import { required as RequiredRule } from '@/utils/rules/required'
 	import { exactLength } from '@/utils/rules/exactLength'
@@ -24,8 +24,8 @@
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 		dialCodeModel: { type: [String, Object] as PropType<string | Record<string, any>>, default: '' },
 		required: { type: Boolean, default: false },
-		outlined: { type: Boolean, default: false },
-		outlinedIndicatif: { type: Boolean, default: false },
+		outlined: { type: Boolean, default: true },
+		outlinedIndicatif: { type: Boolean, default: true },
 		withCountryCode: { type: Boolean, default: false },
 		countryCodeRequired: { type: Boolean, default: false },
 		displayFormat: { type: String as PropType<DisplayFormat>, default: 'code' },
@@ -44,6 +44,34 @@
 	const hasError = ref(false)
 	const onBlur = ref(false)
 
+	function formatPhoneNumber(value: string): string {
+		if (!value) return ''
+		const cleaned = value.replace(/\D/g, '')
+		return cleaned.replace(/(.{2})/g, '$1 ').trim()
+	}
+
+	const computedValue = computed(() => formatPhoneNumber(phoneNumber.value))
+
+	watch(() => props.modelValue, (newVal) => {
+		phoneNumber.value = (newVal || '').replace(/\s/g, '')
+	}, { immediate: true })
+
+	watch(dialCode, (newVal) => {
+		emit('update:selectedDialCode', newVal)
+		if (typeof newVal === 'object' && newVal !== null) {
+			counter.value = newVal.phoneLength || 10
+			phoneMask.value = newVal.mask || '#'.repeat(newVal.phoneLength || 10).replace(/(.{2})/g, '$1 ').trim()
+		}
+	})
+
+	function handlePhoneInput(event: Event) {
+		const input = (event.target as HTMLInputElement).value
+		const cleanedInput = input.replace(/\D/g, '')
+		phoneNumber.value = cleanedInput
+		emit('update:modelValue', cleanedInput)
+		emit('change', cleanedInput)
+	}
+
 	const mergedDialCodes = computed(() =>
 		props.useCustomIndicatifsOnly ? props.customIndicatifs : [...indicatifs, ...props.customIndicatifs],
 	)
@@ -66,28 +94,13 @@
 		return format[props.displayFormat] || ind.code
 	}
 
-	const currentDialCode = computed(() => {
-		const rawDialCode = toRaw(dialCode.value)
-		return dialCodeOptions.value.find(ind => ind.code === String(rawDialCode))
-	})
-
-	function applyPhoneMask(phone: string): string {
-		phone = phone.replace(/\D/g, '')
-		if (currentDialCode.value?.mask) {
-			const regex = new RegExp(currentDialCode.value.mask.replace(/#/g, '\\d'))
-			return phone.replace(regex, currentDialCode.value.mask).trim()
+	const validationRules = computed(() => {
+		const rules = [exactLength(counter.value, true)]
+		if (props.required) {
+			rules.unshift(RequiredRule)
 		}
-		return phone.replace(/(.{2})/g, '$1 ').trim()
-	}
-
-	function handlePhoneInput(event: Event) {
-		const input = (event.target as HTMLInputElement).value.replace(/\s|\D/g, '')
-		phoneNumber.value = input.startsWith(String(dialCode.value) || '')
-			? input.slice(String(dialCode.value || '').length)
-			: input
-		emit('update:modelValue', phoneNumber.value)
-		emit('change', phoneNumber.value)
-	}
+		return rules
+	})
 
 	function validateInputOnBlur() {
 		if (!props.isValidatedOnBlur) return
@@ -100,34 +113,6 @@
 		onBlur.value = true
 	}
 
-	const validationRules = computed(() => {
-		const rules = [exactLength(counter.value, true)]
-		if (props.required) {
-			rules.unshift(RequiredRule)
-		}
-		return rules
-	})
-
-	const computedValue = computed(() =>
-		phoneNumber.value ? applyPhoneMask(phoneNumber.value) : '',
-	)
-
-	watch(() => props.modelValue, (newVal) => {
-		phoneNumber.value = newVal || ''
-	})
-
-	watch(dialCode, (newVal) => {
-		emit('update:selectedDialCode', newVal)
-	})
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-	watch(dialCode, (selectedPhoneCode: any) => {
-		if (selectedPhoneCode) {
-			counter.value = selectedPhoneCode?.phoneLength || 10
-			phoneMask.value = selectedPhoneCode?.mask || '## ## ## ## ##'
-		}
-	})
-
 	defineExpose({
 		computedValue,
 		dialCode,
@@ -137,7 +122,6 @@
 		phoneNumber,
 		mergedDialCodes,
 	})
-
 </script>
 
 <template>
@@ -146,26 +130,26 @@
 			v-if="props.withCountryCode"
 			v-model="dialCode"
 			:items="dialCodeOptions"
-			text-key="displayText"
-			value-key="code"
 			:label="locales.indicatifLabel"
+			:outlined="outlinedIndicatif"
 			:required="props.countryCodeRequired"
 			class="custom-select"
-			:outlined="outlinedIndicatif"
+			text-key="displayText"
+			value-key="code"
 		/>
 		<SyTextField
+			v-model="phoneNumber"
 			v-maska="phoneMask"
-			:model-value="computedValue"
-			:rules="validationRules"
-			:required="props.required"
 			:counter="counter"
 			:counter-value="(value: string) => value.replace(/\s/g, '').length"
 			:label="locales.label"
+			:required="props.required"
+			:rules="validationRules"
 			:variant="outlined ? 'outlined' : 'underlined'"
+			class="phone-field"
 			color="primary"
-			class="phoneField"
-			@input="handlePhoneInput"
 			@blur="validateInputOnBlur"
+			@input="handlePhoneInput"
 		>
 			<template #append-inner>
 				<VIcon
@@ -184,46 +168,46 @@
 
 <style scoped>
 .phone-field-container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 100%;
 }
 
-.phoneField {
-  width: 100%;
+.phone-field {
+	width: 100%;
 }
 
 .custom-select {
-  width: 30%;
+	width: 30%;
 }
 
-@media (min-width: 600px) {
-  .phone-field-container {
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .custom-select {
-    margin-right: 1rem;
-    margin-bottom: 0;
-    min-width: 144px;
-  }
-
-  .phoneField {
-    min-width: 350px;
-  }
+@media (width >= 600px) {
+	.phone-field-container {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.custom-select {
+		margin-right: 1rem;
+		margin-bottom: 0;
+		min-width: 144px;
+	}
+
+	.phone-field {
+		min-width: 350px;
+	}
 }
 
 :deep(.v-list) {
-  position: absolute;
-  left: inherit !important;
-  background-color: white;
-  max-height: 300px;
-  padding: 0;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08);
-  border-radius: 4px;
-  overflow-y: auto;
-  z-index: 2;
+	position: absolute;
+	left: inherit !important;
+	background-color: white;
+	max-height: 300px;
+	padding: 0;
+	box-shadow: 0 2px 5px rgb(0 0 0 / 12%), 0 2px 10px rgb(0 0 0 / 8%);
+	border-radius: 4px;
+	overflow-y: auto;
+	z-index: 2;
 }
 </style>

package/src/components/PhoneField/tests/PhoneField.spec.ts

@@ -96,21 +96,6 @@ describe('PhoneField', () => {
 		expect(wrapper.vm.hasError).toBe(false)
 	})
 
-	it('updates phoneNumber when modelValue prop changes', async () => {
-		const wrapper = mount(PhoneField, {
-			global: {
-				plugins: [vuetify],
-			},
-			props: {
-				modelValue: '1234567890',
-			},
-		})
-
-		await wrapper.setProps({ modelValue: '0987654321' })
-
-		expect(wrapper.vm.phoneNumber).toBe('0987654321')
-	})
-
 	it('uses only custom indicatifs when useCustomIndicatifsOnly is true', () => {
 		const customIndicatifs = [{ code: '+99', abbreviation: 'XX', country: 'Testland', phoneLength: 10 }]
 		const wrapper = mount(PhoneField, {

package/src/components/RangeField/RangeField.mdx

@@ -0,0 +1,54 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+import * as RangeFieldStories from './RangeField.stories.ts';
+
+<Meta of={RangeFieldStories} />
+
+# RangeField
+
+Le composant RangeField est utilisé pour permettre à l'utilisateur de sélectionner un interval.
+
+<Canvas of={RangeFieldStories.Default} />
+
+# Api
+
+<Controls of={RangeFieldStories.Default} />
+
+
+# Personnalisation des limites
+
+Vous pouvez personnaliser les limites de l'intervalle en utilisant les props `min` et `max`.
+
+<Canvas
+	of={RangeFieldStories.OtherRange}
+	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script setup lang="ts">
+			import { ref } from 'vue'
+			import { RangeField } from '@cnamts/synapse'
+
+			const range = ref([0, 100])
+		</script>
+
+		<template>
+			<RangeField
+				v-model="range"
+				min="-50"
+				max="50"
+			/>
+		</template>
+		`
+	}}
+/>
+
+
+# Personnalisation des composants Vuetify
+
+
+Vous pouvez personnaliser les composants Vuetify `VTextField` utilisés dans le composant RangeField en utilisant la props `vuetifyOptions`.
+
+
+<Canvas
+	of={RangeFieldStories.Customization}
+/>