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

package/dist/components/pillSelect/EUIPillSelect.vue

@@ -31,7 +31,7 @@
       </EUIButton>
     </div>
      <template v-if="errors && Object.keys(errors).length">
-      <EUIErrorMessage :errors="errors" :name="name" />
+      <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
     </template>
   </div>
 </template>

package/dist/components/telephone/EUITelephone.vue

@@ -48,12 +48,12 @@
         :class="[getIconClass()]"
         @on-input="onInputChanged"
         @country-changed="onCountryChanged"
-        @blur="$emit('blur')"
+        @blur="onBlur"
       ></vue-tel-input>
     </button>
 
     <div class="errors" v-if="errorMessage">
-      <p class="mt-2 text-xs text-red-500">
+      <p class="text-xs text-red-500">
         {{ errorMessage }}
       </p>
     </div>
@@ -161,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(() => ({
@@ -199,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) {
@@ -216,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;
@@ -232,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":
@@ -288,4 +312,4 @@ const focusInput = () => {
     @apply rounded-md py-2;
   }
 }
-</style>
+</style>