edvoyui-component-library-test-flight 0.0.240 → 0.0.241

package/dist/components/telephone/EUITelephone.vue

@@ -173,7 +173,19 @@ const mobile = ref(String(props.modelValue ?? ""));
 const isTouched = ref(false);
 const telephoneIsValid = ref(props.isValid);
 const activeCountry = ref<CountryObject | null>(null);
+const firstTime = ref(true);
 const dynamicMaxLength = ref<number>(props.length);
+const normalizeValueForCountry = (
+  value: string | number | null | undefined,
+  country: CountryObject | null,
+) => {
+  const stringValue = String(value ?? "").trim();
+  if (!stringValue || stringValue.startsWith("+") || !country?.dialCode) {
+    return stringValue;
+  }
+
+  return `+${country.dialCode}${stringValue.replace(/\D/g, "")}`;
+};
 const getCountryMaxLength = (
   country: CountryObject | PhoneMeta["country"] | null,
 ) => {
@@ -183,14 +195,13 @@ const getCountryMaxLength = (
   const example = getExampleNumber(countryCode, mobileExamples);
   if (!example) return props.length;
 
-  return Math.max(
-    example.nationalNumber.length + 5,
-    example.formatInternational().length,
-  );
+  const dialCodeLength = String(example.countryCallingCode ?? "").length;
+
+  return example.nationalNumber.length + dialCodeLength + 1;
 };
 const listener = computed(() => props.modelValue);
 watch(listener, (value) => {
-  mobile.value = String(value ?? "");
+  mobile.value = normalizeValueForCountry(value, activeCountry.value);
 });
 watch(isValid, (value) => {
   telephoneIsValid.value = value;
@@ -240,6 +251,19 @@ const onInputChanged = (
   _formattedNumber: string,
   phoneObject: TelephoneInputMeta,
 ) => {
+  const countryCode = phoneObject.country ?? activeCountry.value?.iso2;
+  const example = countryCode
+    ? getExampleNumber(countryCode, mobileExamples)
+    : undefined;
+  const dialCode =
+    example?.countryCallingCode ?? activeCountry.value?.dialCode ?? "";
+  const phoneDigits = String(phoneObject.number ?? "").replace(/\D/g, "");
+  const nationalDigits = phoneDigits.slice(String(dialCode).length);
+
+  if (nationalDigits.length > 0) {
+    isTouched.value = true;
+  }
+
   telephoneIsValid.value = Boolean(phoneObject.valid);
   hasError.value = telephoneIsValid.value;
 
@@ -255,10 +279,12 @@ const onBlur = () => {
   emit("blur");
 };
 
-const firstTime = ref(true);
 const onCountryChanged = (country: CountryObject) => {
   activeCountry.value = country;
   dynamicMaxLength.value = getCountryMaxLength(country);
+  if (firstTime.value && props.modelValue) {
+    mobile.value = normalizeValueForCountry(props.modelValue, country);
+  }
   if (!firstTime.value) {
     emit("update:modelValue", "");
   }