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

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

@@ -73,9 +73,18 @@
 
 <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";
 
+type TelephoneInputMeta = PhoneMeta & { number: string };
+
 const emit = defineEmits(["update:modelValue", "blur", "update:isValid"]);
 
 const props = defineProps({
@@ -160,21 +169,56 @@ 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 firstTime = ref(true);
+const dynamicMaxLength = ref<number>(props.length);
+const normalizeValueForCountry = (
+  value: string | number | null | undefined,
+  country: CountryObject | null,
+) => {
+  const stringValue = String(value ?? "").trim();
+  if (!stringValue || stringValue.startsWith("+") || !country?.dialCode) {
+    return stringValue;
+  }
+
+  return `+${country.dialCode}${stringValue.replace(/\D/g, "")}`;
+};
+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;
+
+  const dialCodeLength = String(example.countryCallingCode ?? "").length;
+
+  return example.nationalNumber.length + dialCodeLength + 1;
+};
 const listener = computed(() => props.modelValue);
 watch(listener, (value) => {
-  mobile.value = value;
+  mobile.value = normalizeValueForCountry(value, activeCountry.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",
@@ -187,7 +231,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,
@@ -203,9 +247,30 @@ const bindProps = computed(() => ({
   },
 }));
 
-const onInputChanged = (_formattedNumber: string, phoneObject: any) => {
+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;
+  }
+
   telephoneIsValid.value = Boolean(phoneObject.valid);
   hasError.value = telephoneIsValid.value;
+
+  dynamicMaxLength.value = getCountryMaxLength(
+    activeCountry.value ?? phoneObject.country ?? null,
+  );
+
   emit("update:modelValue", phoneObject.number);
 };
 
@@ -214,8 +279,12 @@ const onBlur = () => {
   emit("blur");
 };
 
-const firstTime = ref(true);
-const onCountryChanged = (_event: VueTelInputCountryOption) => {
+const onCountryChanged = (country: CountryObject) => {
+  activeCountry.value = country;
+  dynamicMaxLength.value = getCountryMaxLength(country);
+  if (firstTime.value && props.modelValue) {
+    mobile.value = normalizeValueForCountry(props.modelValue, country);
+  }
   if (!firstTime.value) {
     emit("update:modelValue", "");
   }

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";