edvoyui-component-library-test-flight 0.0.242 → 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>
@@ -85,7 +86,7 @@ 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: {
@@ -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);
@@ -252,10 +254,16 @@ const bindProps = computed<VueTelInputProps>(() => ({
   },
 }));
 
+const onFocus = () => {
+  isFocused.value = true;
+  emit("focus");
+};
+
 const onInputChanged = (
   _formattedNumber: string,
   phoneObject: TelephoneInputMeta,
 ) => {
+  isFocused.value = true;
   telephoneIsValid.value = Boolean(phoneObject.valid);
   hasError.value = !telephoneIsValid.value;
 
@@ -267,6 +275,7 @@ const onInputChanged = (
 };
 
 const onBlur = () => {
+  isFocused.value = false;
   isTouched.value = true;
   emit("blur");
 };
@@ -320,9 +329,19 @@ const internalErrorMessage = computed(() => {
   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) {