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

package/dist/components/select/EUISelect.d.ts

@@ -184,10 +184,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     search: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
     tag: (...args: any[]) => void;
+    open: (...args: any[]) => void;
     "update:searchString": (...args: any[]) => void;
     deselected: (...args: any[]) => void;
     selectedOption: (...args: any[]) => void;
-    open: (...args: any[]) => void;
 }, string, import('../../../node_modules/vue').PublicProps, Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
     clearable: {
         type: BooleanConstructor;
@@ -350,10 +350,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     onSearch?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onTag?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:searchString"?: ((...args: any[]) => any) | undefined;
     onDeselected?: ((...args: any[]) => any) | undefined;
     onSelectedOption?: ((...args: any[]) => any) | undefined;
-    onOpen?: ((...args: any[]) => any) | undefined;
 }>, {
     keys: string[];
     loading: boolean;

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>
 
@@ -73,9 +73,17 @@
 
 <script lang="ts" setup>
 import { computed, onUpdated, PropType, ref, toRefs, watch } from "vue";
-import { VueTelInput, VueTelInputCountryOption } from "vue-tel-input";
+import {
+  VueTelInput,
+  type CountryObject,
+  type PhoneMeta,
+  type VueTelInputProps,
+} from "vue-tel-input";
+import { getExampleNumber } from "libphonenumber-js";
+import mobileExamples from "libphonenumber-js/mobile/examples";
 import "vue-tel-input/vue-tel-input.css";
-import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
+
+type TelephoneInputMeta = PhoneMeta & { number: string };
 
 const emit = defineEmits(["update:modelValue", "blur", "update:isValid"]);
 
@@ -161,16 +169,45 @@ const inputValue = computed(() => {
   return props.modelValue === 0 ? true : !!props.modelValue;
 });
 
-const mobile = ref(props.modelValue);
+const mobile = ref(String(props.modelValue ?? ""));
+const isTouched = ref(false);
+const telephoneIsValid = ref(props.isValid);
+const activeCountry = ref<CountryObject | null>(null);
+const dynamicMaxLength = ref<number>(props.length);
+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);
+  if (!example) return props.length;
+
+  return Math.max(
+    example.nationalNumber.length + 5,
+    example.formatInternational().length,
+  );
+};
 const listener = computed(() => props.modelValue);
 watch(listener, (value) => {
-  mobile.value = value;
+  mobile.value = String(value ?? "");
 });
+watch(isValid, (value) => {
+  telephoneIsValid.value = value;
+});
+watch(
+  () => props.length,
+  (value) => {
+    if (!activeCountry.value) {
+      dynamicMaxLength.value = value;
+    }
+  },
+);
 
 // Make bindProps a reactive computed property
-const bindProps = computed(() => ({
+const bindProps = computed<VueTelInputProps>(() => ({
   mode: "international",
-  autoFormat: false,
+  autoFormat: true,
   autoDefaultCountry: true,
   styleClasses: "eui-tel",
   invalidMsg: "Required mobile number",
@@ -183,7 +220,7 @@ const bindProps = computed(() => ({
     name: props.name,
     id: id,
     placeholder: props.placeholder,
-    maxlength: props.length,
+    maxlength: dynamicMaxLength.value,
     showDialCode: true,
     tabindex: 0,
     readonly: props.readonly,
@@ -199,13 +236,29 @@ const bindProps = computed(() => ({
   },
 }));
 
-const onInputChanged = (_formattedNumber: string, phoneObject: any) => {
-  hasError.value = phoneObject.valid ? true : false;
+const onInputChanged = (
+  _formattedNumber: string,
+  phoneObject: TelephoneInputMeta,
+) => {
+  telephoneIsValid.value = Boolean(phoneObject.valid);
+  hasError.value = telephoneIsValid.value;
+
+  dynamicMaxLength.value = getCountryMaxLength(
+    activeCountry.value ?? phoneObject.country ?? null,
+  );
+
   emit("update:modelValue", phoneObject.number);
 };
 
+const onBlur = () => {
+  isTouched.value = true;
+  emit("blur");
+};
+
 const firstTime = ref(true);
-const onCountryChanged = (_event: VueTelInputCountryOption) => {
+const onCountryChanged = (country: CountryObject) => {
+  activeCountry.value = country;
+  dynamicMaxLength.value = getCountryMaxLength(country);
   if (!firstTime.value) {
     emit("update:modelValue", "");
   }
@@ -217,7 +270,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 +286,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 +355,4 @@ const focusInput = () => {
     @apply rounded-md py-2;
   }
 }
-</style>
+</style>

package/dist/components/textArea/EUITextArea.d.ts

@@ -135,5 +135,5 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
     cols: number;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {
     inputRef: HTMLTextAreaElement;
-}, any>;
+}, HTMLDivElement>;
 export default _default;

package/dist/components/textArea/EUITextArea.vue

@@ -60,10 +60,10 @@
         >
       </textarea>
     </div>
-  </div>
-   <template v-if="errors && Object.keys(errors).length">
+    <template v-if="errors && Object.keys(errors).length">
       <EUIErrorMessage :errors="errors" :name="name" />
     </template>
+  </div>
 </template>
 <script setup lang="ts">
 import { PropType, ref, watch, computed } from "vue";