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

package/dist/components/telephone/EUITelephone.vue

@@ -79,7 +79,7 @@ import {
   type PhoneMeta,
   type VueTelInputProps,
 } from "vue-tel-input";
-import { getExampleNumber } from "libphonenumber-js";
+import { type CountryCode, getExampleNumber } from "libphonenumber-js";
 import mobileExamples from "libphonenumber-js/mobile/examples";
 import "vue-tel-input/vue-tel-input.css";
 
@@ -160,9 +160,9 @@ const id = generateUID();
 
 const hasError = computed({
   set: (value) => {
-    emit("update:isValid", value);
+    emit("update:isValid", !value);
   },
-  get: () => isValid.value,
+  get: () => !isValid.value,
 });
 
 const inputValue = computed(() => {
@@ -173,24 +173,40 @@ 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,
 ) => {
   if (!country) return props.length;
 
-  const countryCode = typeof country === "string" ? country : country.iso2;
-  const example = getExampleNumber(countryCode, mobileExamples);
+  const rawCode = typeof country === "string" ? country : country.iso2;
+  const countryCode = (
+    rawCode ? String(rawCode).toUpperCase() : ""
+  ) as CountryCode;
+  const example = countryCode
+    ? getExampleNumber(countryCode, mobileExamples)
+    : undefined;
   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;
@@ -241,10 +257,10 @@ const onInputChanged = (
   phoneObject: TelephoneInputMeta,
 ) => {
   telephoneIsValid.value = Boolean(phoneObject.valid);
-  hasError.value = telephoneIsValid.value;
+  hasError.value = !telephoneIsValid.value;
 
   dynamicMaxLength.value = getCountryMaxLength(
-    activeCountry.value ?? phoneObject.country ?? null,
+    phoneObject.country ?? activeCountry.value ?? null,
   );
 
   emit("update:modelValue", phoneObject.number);
@@ -255,10 +271,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", "");
   }
@@ -287,12 +305,19 @@ const externalErrorMessage = computed(() => {
 });
 
 const internalErrorMessage = computed(() => {
-  if (!isTouched.value || props.readonly || props.disabled) return "";
+  if (
+    !isTouched.value ||
+    telephoneIsValid.value ||
+    props.readonly ||
+    props.disabled
+  ) {
+    return "";
+  }
 
   const value = String(mobile.value ?? "").trim();
   if (!value) return props.required ? "Mobile number is required" : "";
 
-  return telephoneIsValid.value ? "" : "Enter a valid phone number";
+  return "Enter a valid phone number";
 });
 
 const errorMessage = computed(