intl-tel-input 24.3.6 → 24.4.0

package/vue/README.md

@@ -5,9 +5,12 @@ A Vue component wrapper for the [intl-tel-input](https://github.com/jackocnr/int
 - [Demo](#demo)
 - [Getting Started](#getting-started)
 - [Props](#props)
+- [Events](#events)
+- [Accessing Instance Methods](#accessing-instance-methods)
+- [Accessing Static Methods](#accessing-static-methods)
 
 ## Demo
-Try it for yourself by downloading the project and running `npm install` and then `npm run vue:demo` and then copying the given URL into your browser.
+Try it for yourself by downloading the project and running `npm install` and then `npm run vue:demo` and then copy the given URL into your browser.
 
 ## Getting Started
 ```vue
@@ -25,15 +28,56 @@ Try it for yourself by downloading the project and running `npm install` and the
 </template>
 ```
 
-See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/vue/demo/validation/App.vue) for a more fleshed-out example of how to handle validation [COMING SOON].
+See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/vue/demo/validation/App.vue) for a more fleshed-out example of how to handle validation. Make sure to change the path in the `package.json` script to the correct demo if you're running it locally e.g.:
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `utilsScript` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@24.3.6/build/js/utils.js"`.
+```
+"vue:demo": "vite --config vue/demo/[demo variant]/vite.config.js"
+```
+
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/vueWithUtils"`, to include the utils script. Alternatively, if you use the main `"intl-tel-input/vue"` import, then you should couple this with the `utilsScript` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@24.4.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.
 
-**options**  
-Type: `Object`  
+**disabled**
+Type: `Boolean`, Default: `false`
+Sets the disabled attribute of both the telephone input and selected country button. *Note: we recommend using this instead of `inputProps.disabled`.*
+
+**inputProps**
+Type: `Object`
+The props to pass to the input element e.g. `id`, `class`, `placeholder`, `required`, `onBlur` etc. *Note: we recommend using the separate `disabled` prop instead of `inputProps.disabled`.*
+
+**options**
+Type: `Object`
 An object containing the [initialisation options](https://github.com/jackocnr/intl-tel-input?tab=readme-ov-file#initialisation-options) to pass to the plugin. You can use these exactly the same way as with the main JavaScript plugin.
 
-[MORE COMING SOON]
+**value**
+Type: `String`
+The initial value to put in the input. This will get auto-formatted on init (according to `formatOnDisplay` initialisation option). IntlTelInput is an uncontrolled input, and so will ignore any changes to this value.
+
+## Events
+Here's a list of all of the current events you can listen to on the IntlTelInput Vue component.
+
+**changeCountry**
+Type: `Function`
+A handler to be called when the selected country changes. It will be passed the new country iso2 code e.g. "gb" for UK.
+
+**changeErrorCode**
+Type: `Function`
+A handler to be called when the number validation error changes. It will be passed the new error code (or `null`).
+
+**changeNumber**
+Type: `Function`
+A handler to be called when the number changes. It will be passed the new number.
+
+**changeValidity**
+Type: `Function`
+A handler to be called when the number validity changes e.g. to true/false. It will be passed the new isValid boolean.
+
+## Accessing Instance Methods
+
+You can access all of the plugin's [instance methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#instance-methods) (`setNumber`, `setCountry`, `setPlaceholderNumberType` etc) by passing a ref into the IntlTelInput component (using the `ref` prop), and then calling `ref.intlTelInput.instance` e.g. `ref.intlTelInput.instance.setNumber(...);`. See the [Set Number demo](https://github.com/jackocnr/intl-tel-input/blob/master/vue/demo/set-number/App.vue) for a full example. You can also access the input DOM element in a similar way: `ref.intlTelInput.input`.
+
+## Accessing Static Methods
+
+You can access all of the plugin's [static methods](https://github.com/jackocnr/intl-tel-input/blob/master/README.md#static-methods) by importing `intlTelInput` from the same file as the Vue component e.g. `import { intlTelInput } from "intl-tel-input/vue"` (note the lower case "i" in "intlTelInput"). You can then use this as you would with the main plugin e.g. `intlTelInput.getCountryData()` or `intlTelInput.utils.numberType` etc.

package/vue/build/IntlTelInput.mjs

@@ -1,4 +1,4 @@
-import { mergeModels as L, useModel as T, ref as w, onMounted as P, watch as x, onUnmounted as E, withDirectives as M, openBlock as B, createElementBlock as O, vModelText as V } from "vue";
+import { mergeModels as L, useModel as P, ref as v, onMounted as x, watch as E, onUnmounted as M, withDirectives as B, openBlock as O, createElementBlock as V, mergeProps as F, vModelText as z } from "vue";
 const D = [
   [
     "af",
@@ -1318,7 +1318,7 @@ for (let u = 0; u < D.length; u++) {
     nodeById: {}
   };
 }
-const F = {
+const R = {
   ad: "Andorra",
   ae: "United Arab Emirates",
   af: "Afghanistan",
@@ -1561,7 +1561,7 @@ const F = {
   za: "South Africa",
   zm: "Zambia",
   zw: "Zimbabwe"
-}, z = {
+}, $ = {
   selectedCountryAriaLabel: "Selected country",
   noCountrySelected: "No country selected",
   countryListAriaLabel: "List of countries",
@@ -1572,10 +1572,10 @@ const F = {
   // additional countries (not supported by country-list library)
   ac: "Ascension Island",
   xk: "Kosovo"
-}, S = { ...F, ...z };
+}, S = { ...R, ...$ };
 for (let u = 0; u < b.length; u++)
   b[u].name = S[b[u].iso2];
-let R = 0;
+let j = 0;
 const k = {
   //* Whether or not to allow the dropdown.
   allowDropdown: !0,
@@ -1631,7 +1631,7 @@ const k = {
   utilsScript: "",
   //* The number type to enforce during validation.
   validationNumberType: "MOBILE"
-}, $ = [
+}, K = [
   "800",
   "822",
   "833",
@@ -1653,10 +1653,10 @@ const k = {
   const t = I(u);
   if (t.charAt(0) === "1") {
     const e = t.substr(1, 3);
-    return $.indexOf(e) !== -1;
+    return K.indexOf(e) !== -1;
   }
   return !1;
-}, j = (u, t, e, i) => {
+}, U = (u, t, e, i) => {
   if (e === 0 && !i)
     return 0;
   let s = 0;
@@ -1667,16 +1667,16 @@ const k = {
       return n;
   }
   return t.length;
-}, m = (u, t, e) => {
+}, y = (u, t, e) => {
   const i = document.createElement(u);
   return t && Object.entries(t).forEach(([s, n]) => i.setAttribute(s, n)), e && e.appendChild(i), i;
 }, _ = (u) => {
   const { instances: t } = l;
   Object.values(t).forEach((e) => e[u]());
 };
-class K {
+class H {
   constructor(t, e = {}) {
-    this.id = R++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, k, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder");
+    this.id = j++, this.telInput = t, this.highlightedItem = null, this.options = Object.assign({}, k, e), this.hadInitialPlaceholder = !!t.getAttribute("placeholder");
   }
   //* Can't be private as it's called from intlTelInput convenience wrapper.
   _init() {
@@ -1785,16 +1785,13 @@ class K {
     } = this.options;
     let C = "iti";
     t && (C += " iti--allow-dropdown"), i && (C += " iti--show-flags"), s && (C += ` ${s}`), r || (C += " iti--inline-dropdown");
-    const c = m("div", { class: C });
+    const c = y("div", { class: C });
     if ((h = this.telInput.parentNode) == null || h.insertBefore(c, this.telInput), t || i || e) {
-      this.countryContainer = m(
+      this.countryContainer = y(
         "div",
-        {
-          class: "iti__country-container",
-          style: this.showSelectedCountryOnLeft ? "left: 0" : "right: 0"
-        },
+        { class: "iti__country-container" },
         c
-      ), t ? (this.selectedCountry = m(
+      ), this.showSelectedCountryOnLeft ? this.countryContainer.style.left = "0px" : this.countryContainer.style.right = "0px", t ? (this.selectedCountry = y(
         "button",
         {
           type: "button",
@@ -1806,30 +1803,30 @@ class K {
           role: "combobox"
         },
         this.countryContainer
-      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = m(
+      ), this.telInput.disabled && this.selectedCountry.setAttribute("disabled", "true")) : this.selectedCountry = y(
         "div",
         { class: "iti__selected-country" },
         this.countryContainer
       );
-      const y = m("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
-      if (this.selectedCountryInner = m("div", { class: "iti__flag" }, y), this.selectedCountryA11yText = m(
+      const m = y("div", { class: "iti__selected-country-primary" }, this.selectedCountry);
+      if (this.selectedCountryInner = y("div", { class: "iti__flag" }, m), this.selectedCountryA11yText = y(
         "span",
         { class: "iti__a11y-text" },
         this.selectedCountryInner
-      ), t && (this.dropdownArrow = m(
+      ), t && (this.dropdownArrow = y(
         "div",
         { class: "iti__arrow", "aria-hidden": "true" },
-        y
-      )), e && (this.selectedDialCode = m(
+        m
+      )), e && (this.selectedDialCode = y(
         "div",
         { class: "iti__selected-dial-code" },
         this.selectedCountry
       )), t) {
         const f = a ? "" : "iti--flexible-dropdown-width";
-        if (this.dropdownContent = m("div", {
+        if (this.dropdownContent = y("div", {
           id: `iti-${this.id}__dropdown-content`,
           class: `iti__dropdown-content iti__hide ${f}`
-        }), p && (this.searchInput = m(
+        }), p && (this.searchInput = y(
           "input",
           {
             type: "text",
@@ -1843,11 +1840,11 @@ class K {
             autocomplete: "off"
           },
           this.dropdownContent
-        ), this.searchResultsA11yText = m(
+        ), this.searchResultsA11yText = y(
           "span",
           { class: "iti__a11y-text" },
           this.dropdownContent
-        )), this.countryList = m(
+        )), this.countryList = y(
           "ul",
           {
             class: "iti__country-list",
@@ -1858,17 +1855,17 @@ class K {
           this.dropdownContent
         ), this._appendListItems(), p && this._updateSearchResultsText(), o) {
           let g = "iti iti--container";
-          r ? g += " iti--fullscreen-popup" : g += " iti--inline-dropdown", this.dropdown = m("div", { class: g }), this.dropdown.appendChild(this.dropdownContent);
+          r ? g += " iti--fullscreen-popup" : g += " iti--inline-dropdown", this.dropdown = y("div", { class: g }), this.dropdown.appendChild(this.dropdownContent);
         } else
           this.countryContainer.appendChild(this.dropdownContent);
       }
     }
     if (c.appendChild(this.telInput), this._updateInputPadding(), n) {
-      const y = this.telInput.getAttribute("name") || "", f = n(y);
-      f.phone && (this.hiddenInput = m("input", {
+      const m = this.telInput.getAttribute("name") || "", f = n(m);
+      f.phone && (this.hiddenInput = y("input", {
         type: "hidden",
         name: f.phone
-      }), c.appendChild(this.hiddenInput)), f.country && (this.hiddenInputCountry = m("input", {
+      }), c.appendChild(this.hiddenInput)), f.country && (this.hiddenInputCountry = y("input", {
         type: "hidden",
         name: f.country
       }), c.appendChild(this.hiddenInputCountry));
@@ -1877,7 +1874,7 @@ class K {
   //* For each country: add a country list item <li> to the countryList <ul> container.
   _appendListItems() {
     for (let t = 0; t < this.countries.length; t++) {
-      const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = m(
+      const e = this.countries[t], i = t === 0 ? "iti__highlight" : "", s = y(
         "li",
         {
           id: `iti-${this.id}__item-${e.iso2}`,
@@ -1965,8 +1962,8 @@ class K {
     let a = !1;
     new RegExp("\\p{L}", "u").test(this.telInput.value) && (a = !0), this._handleInputEvent = (r) => {
       if (this.isAndroid && (r == null ? void 0 : r.data) === "+" && i && n && o) {
-        const c = this.telInput.selectionStart || 0, h = this.telInput.value.substring(0, c - 1), y = this.telInput.value.substring(c);
-        this.telInput.value = h + y, this._openDropdownWithPlus();
+        const c = this.telInput.selectionStart || 0, h = this.telInput.value.substring(0, c - 1), m = this.telInput.value.substring(c);
+        this.telInput.value = h + m, this._openDropdownWithPlus();
         return;
       }
       this._updateCountryFromNumber(this.telInput.value) && this._triggerCountryChange();
@@ -1974,8 +1971,8 @@ class K {
       p || d && !t ? a = !0 : /[^+0-9]/.test(this.telInput.value) || (a = !1);
       const C = (r == null ? void 0 : r.detail) && r.detail.isSetNumber && !s;
       if (e && !a && !C) {
-        const c = this.telInput.selectionStart || 0, y = this.telInput.value.substring(0, c).replace(/[^+0-9]/g, "").length, f = (r == null ? void 0 : r.inputType) === "deleteContentForward", g = this._formatNumberAsYouType(), v = j(y, g, c, f);
-        this.telInput.value = g, this.telInput.setSelectionRange(v, v);
+        const c = this.telInput.selectionStart || 0, m = this.telInput.value.substring(0, c).replace(/[^+0-9]/g, "").length, f = (r == null ? void 0 : r.inputType) === "deleteContentForward", g = this._formatNumberAsYouType(), w = U(m, g, c, f);
+        this.telInput.value = g, this.telInput.setSelectionRange(w, w);
       }
     }, this.telInput.addEventListener("input", this._handleInputEvent), (t || i) && (this._handleKeydownEvent = (r) => {
       if (r.key && r.key.length === 1 && !r.altKey && !r.ctrlKey && !r.metaKey) {
@@ -1984,8 +1981,8 @@ class K {
           return;
         }
         if (t) {
-          const p = this.telInput.selectionStart === 0 && r.key === "+", d = /^[0-9]$/.test(r.key), C = i ? d : p || d, c = this._getFullNumber(), h = l.utils.getCoreNumber(c, this.selectedCountryData.iso2), y = this.maxCoreNumberLength && h.length >= this.maxCoreNumberLength, f = this.telInput.value.substring(this.telInput.selectionStart, this.telInput.selectionEnd), g = /\d/.test(f);
-          (!C || y && !g) && r.preventDefault();
+          const p = this.telInput.selectionStart === 0 && r.key === "+", d = /^[0-9]$/.test(r.key), C = i ? d : p || d, c = this._getFullNumber(), h = l.utils.getCoreNumber(c, this.selectedCountryData.iso2), m = this.maxCoreNumberLength && h.length >= this.maxCoreNumberLength, f = this.telInput.value.substring(this.telInput.selectionStart, this.telInput.selectionEnd), g = /\d/.test(f), T = (this.telInput.selectionStart || 0) === this.telInput.value.length;
+          (!C || m && !g && T) && r.preventDefault();
         }
       }
     }, this.telInput.addEventListener("keydown", this._handleKeydownEvent));
@@ -2442,7 +2439,7 @@ class K {
     this.telInput.disabled = t, t ? this.selectedCountry.setAttribute("disabled", "true") : this.selectedCountry.removeAttribute("disabled");
   }
 }
-const U = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUtilsScript = !0, new Promise((t, e) => {
+const G = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUtilsScript = !0, new Promise((t, e) => {
   import(
     /* webpackIgnore: true */
     /* @vite-ignore */
@@ -2454,7 +2451,7 @@ const U = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
   });
 })) : null, l = Object.assign(
   (u, t) => {
-    const e = new K(u, t);
+    const e = new H(u, t);
     return e._init(), u.setAttribute("data-intl-tel-input-id", e.id.toString()), l.instances[e.id] = e, e;
   },
   {
@@ -2470,12 +2467,20 @@ const U = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
     },
     //* A map from instance ID to instance object.
     instances: {},
-    loadUtils: U,
-    version: "24.3.6"
+    loadUtils: G,
+    version: "24.4.0"
   }
-), G = {
+), q = {
   __name: "IntlTelInput",
   props: /* @__PURE__ */ L({
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    inputProps: {
+      type: Object,
+      default: () => ({})
+    },
     options: {
       type: Object,
       default: () => ({})
@@ -2483,9 +2488,6 @@ const U = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
     value: {
       type: String,
       default: ""
-    },
-    disabled: {
-      type: Boolean
     }
   }, {
     modelValue: {
@@ -2494,11 +2496,19 @@ const U = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ L(["changeNumber", "changeCountry", "changeValidity", "changeErrorCode"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ L([
+    "changeNumber",
+    "changeCountry",
+    "changeValidity",
+    "changeErrorCode"
+  ], ["update:modelValue"]),
   setup(u, { expose: t, emit: e }) {
-    const i = T(u, "modelValue"), s = u, n = e, o = w(), a = w(), r = w(!1), p = () => a.value ? s.options.strictMode ? a.value.isValidNumberPrecise() : a.value.isValidNumber() : null, d = () => {
+    const i = P(u, "modelValue"), s = u, n = e, o = v(), a = v(), r = v(!1), p = () => a.value ? s.options.strictMode ? a.value.isValidNumberPrecise() : a.value.isValidNumber() : null, d = () => {
       let h = p();
-      r.value !== h && (r.value = h, n("changeValidity", !!h), n("changeErrorCode", h ? null : a.value.getValidationError()));
+      r.value !== h && (r.value = h, n("changeValidity", !!h), n(
+        "changeErrorCode",
+        h ? null : a.value.getValidationError()
+      ));
     }, C = () => {
       var h;
       n("changeNumber", ((h = a.value) == null ? void 0 : h.getNumber()) ?? ""), d();
@@ -2506,29 +2516,29 @@ const U = (u) => !l.utils && !l.startedLoadingUtilsScript ? (l.startedLoadingUti
       var h;
       n("changeCountry", ((h = a.value) == null ? void 0 : h.getSelectedCountryData().iso2) ?? ""), C(), d();
     };
-    return P(() => {
+    return x(() => {
       o.value && (a.value = l(o.value, s.options), s.value && a.value.setNumber(s.value), s.disabled && a.value.setDisabled(s.disabled));
-    }), x(
+    }), E(
       () => s.disabled,
       (h) => {
-        var y;
-        return (y = a.value) == null ? void 0 : y.setDisabled(h);
+        var m;
+        return (m = a.value) == null ? void 0 : m.setDisabled(h);
       }
-    ), E(() => {
+    ), M(() => {
       var h;
       return (h = a.value) == null ? void 0 : h.destroy();
-    }), t({ instance: a, input: o }), (h, y) => M((B(), O("input", {
+    }), t({ instance: a, input: o }), (h, m) => B((O(), V("input", F({
       ref_key: "input",
       ref: o,
-      "onUpdate:modelValue": y[0] || (y[0] = (f) => i.value = f),
+      "onUpdate:modelValue": m[0] || (m[0] = (f) => i.value = f),
       type: "tel",
       onCountrychange: c,
       onInput: C
-    }, null, 544)), [
-      [V, i.value]
+    }, u.inputProps), null, 16)), [
+      [z, i.value]
     ]);
   }
 };
 export {
-  G as default
+  q as default
 };