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

package/dist/components/telephone/EUITelephone.vue

@@ -48,6 +48,7 @@
         :class="[getIconClass()]"
         @on-input="onInputChanged"
         @country-changed="onCountryChanged"
+        @focus="onFocus"
         @blur="onBlur"
       ></vue-tel-input>
     </button>
@@ -79,13 +80,13 @@ 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";
 
 type TelephoneInputMeta = PhoneMeta & { number: string };
 
-const emit = defineEmits(["update:modelValue", "blur", "update:isValid"]);
+const emit = defineEmits(["update:modelValue", "blur", "focus", "update:isValid"]);
 
 const props = defineProps({
   modelValue: {
@@ -160,9 +161,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(() => {
@@ -170,6 +171,7 @@ const inputValue = computed(() => {
 });
 
 const mobile = ref(String(props.modelValue ?? ""));
+const isFocused = ref(false);
 const isTouched = ref(false);
 const telephoneIsValid = ref(props.isValid);
 const activeCountry = ref<CountryObject | null>(null);
@@ -191,8 +193,13 @@ const getCountryMaxLength = (
 ) => {
   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;
 
   const dialCodeLength = String(example.countryCallingCode ?? "").length;
@@ -247,34 +254,28 @@ const bindProps = computed<VueTelInputProps>(() => ({
   },
 }));
 
+const onFocus = () => {
+  isFocused.value = true;
+  emit("focus");
+};
+
 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;
-  }
-
+  isFocused.value = true;
   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);
 };
 
 const onBlur = () => {
+  isFocused.value = false;
   isTouched.value = true;
   emit("blur");
 };
@@ -313,17 +314,34 @@ 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(
-  () => externalErrorMessage.value || internalErrorMessage.value,
-);
+const errorMessage = computed(() => {
+  if (props.readonly || props.disabled) return "";
+
+  if (isFocused.value && !telephoneIsValid.value) {
+    return "";
+  }
+
+  if (isTouched.value) {
+    return internalErrorMessage.value || externalErrorMessage.value || "";
+  }
+
+  return externalErrorMessage.value || "";
+});
 
 const getIconClass = () => {
   switch (props.iconType) {