edvoyui-component-library-test-flight 0.0.238 → 0.0.239

package/dist/components/telephone/EUITelephone.vue

@@ -48,7 +48,7 @@
         :class="[getIconClass()]"
         @on-input="onInputChanged"
         @country-changed="onCountryChanged"
-        @blur="$emit('blur')"
+        @blur="onBlur"
       ></vue-tel-input>
     </button>
 
@@ -75,7 +75,6 @@
 import { computed, onUpdated, PropType, ref, toRefs, watch } from "vue";
 import { VueTelInput, VueTelInputCountryOption } from "vue-tel-input";
 import "vue-tel-input/vue-tel-input.css";
-import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
 
 const emit = defineEmits(["update:modelValue", "blur", "update:isValid"]);
 
@@ -162,10 +161,15 @@ const inputValue = computed(() => {
 });
 
 const mobile = ref(props.modelValue);
+const isTouched = ref(false);
+const telephoneIsValid = ref(props.isValid);
 const listener = computed(() => props.modelValue);
 watch(listener, (value) => {
   mobile.value = value;
 });
+watch(isValid, (value) => {
+  telephoneIsValid.value = value;
+});
 
 // Make bindProps a reactive computed property
 const bindProps = computed(() => ({
@@ -200,10 +204,16 @@ const bindProps = computed(() => ({
 }));
 
 const onInputChanged = (_formattedNumber: string, phoneObject: any) => {
-  hasError.value = phoneObject.valid ? true : false;
+  telephoneIsValid.value = Boolean(phoneObject.valid);
+  hasError.value = telephoneIsValid.value;
   emit("update:modelValue", phoneObject.number);
 };
 
+const onBlur = () => {
+  isTouched.value = true;
+  emit("blur");
+};
+
 const firstTime = ref(true);
 const onCountryChanged = (_event: VueTelInputCountryOption) => {
   if (!firstTime.value) {
@@ -217,7 +227,7 @@ onUpdated(() => {
   }, 1500);
 });
 
-const errorMessage = computed(() => {
+const externalErrorMessage = computed(() => {
   if (Array.isArray(props.errors)) {
     if (typeof props.errors?.at(0) === "object") {
       return props.errors?.at(0)?.$message;
@@ -233,6 +243,19 @@ const errorMessage = computed(() => {
   }
 });
 
+const internalErrorMessage = computed(() => {
+  if (!isTouched.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";
+});
+
+const errorMessage = computed(
+  () => externalErrorMessage.value || internalErrorMessage.value,
+);
+
 const getIconClass = () => {
   switch (props.iconType) {
     case "startIcon":
@@ -289,4 +312,4 @@ const focusInput = () => {
     @apply rounded-md py-2;
   }
 }
-</style>
+</style>