intl-tel-input 26.0.0-beta.1 → 26.0.2

package/vue/README.md

@@ -10,7 +10,9 @@ A Vue component wrapper for the [intl-tel-input](https://github.com/jackocnr/int
 - [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 copy the given URL into your browser.
+There is a demo of the Vue component on the [demo site](https://intl-tel-input.com/examples/vue-component.html) with example code.
+
+Alternatively, download and build the project yourself in 3 simple steps. You just need to initialise the submodules with `git submodule update --init --recursive`, then run `npm install`, and then `npm run build`. You can then run `npm run vue:demo` and copy the given URL into your browser. By default, this is setup to show the validation demo - you can change this by locating the `"vue:demo"` task in the scripts section of package.json, and updating the demo path accordingly. View a list of available demos [here](https://github.com/jackocnr/intl-tel-input/tree/master/vue/demo).
 
 ## Getting Started
 ```vue
@@ -28,13 +30,9 @@ 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. Make sure to change the path in the `package.json` script to the correct demo if you're running it locally e.g.:
-
-```
-"vue:demo": "vite --config vue/demo/[demo variant]/vite.config.js"
-```
+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. See the instructions above for how to run this demo (and others) yourself.
 
-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 `loadUtils` 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 `loadUtils` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@25.15.0/build/js/utils.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 `loadUtils` 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 `loadUtils` option to that URL, or alternatively just point it to a CDN-hosted version, e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@26.0.2/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput Vue component.
@@ -45,12 +43,16 @@ Sets the disabled attribute of both the telephone input and selected country but
 
 **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`.*
+The props to pass to the input element, e.g. `id`, `class`, `placeholder`, `required`, `onBlur`. *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.
 
+**usePreciseValidation**  
+Type: `Boolean`, Default: `false`  
+By default, the component uses the plugin's `isValidNumber` method for validation, but if you'd rather use `isValidNumberPrecise`, set this to `true`.
+
 **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.
@@ -60,7 +62,7 @@ Here's a list of all of the current events you can listen to on the IntlTelInput
 
 **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.
+A handler to be called when the selected country changes. It will be passed the new country iso2 code, e.g. "gb" for the UK.
 
 **changeErrorCode**  
 Type: `Function`  
@@ -76,7 +78,7 @@ A handler to be called when the number validity changes e.g. to true/false. It w
 
 ## 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`.
+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 accessing `ref.value.instance` e.g. `ref.value?.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.value?.input`.
 
 ## Accessing Static Methods
 

package/vue/build/IntlTelInput.vue.d.ts

@@ -2,6 +2,7 @@ import { SomeOptions } from './modules/types/public-api';
 import { InputHTMLAttributes } from 'vue';
 interface Props {
     options?: SomeOptions;
+    usePreciseValidation?: boolean;
     disabled?: boolean;
     inputProps?: InputHTMLAttributes;
 }
@@ -27,6 +28,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
 }>, {
     disabled: boolean;
     options: SomeOptions;
+    usePreciseValidation: boolean;
     inputProps: InputHTMLAttributes;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     input: HTMLInputElement;

package/vue/build/IntlTelInputWithUtils.vue.d.ts

@@ -2,6 +2,7 @@ import { SomeOptions } from './modules/types/public-api';
 import { InputHTMLAttributes } from 'vue';
 interface Props {
     options?: SomeOptions;
+    usePreciseValidation?: boolean;
     disabled?: boolean;
     inputProps?: InputHTMLAttributes;
 }
@@ -27,6 +28,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
 }>, {
     disabled: boolean;
     options: SomeOptions;
+    usePreciseValidation: boolean;
     inputProps: InputHTMLAttributes;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     input: HTMLInputElement;

package/vue/build/exports/IntlTelInput.mjs

@@ -1,10 +1,11 @@
-import { defineComponent as g, mergeModels as m, useModel as b, ref as r, onMounted as h, watch as C, onUnmounted as M, withDirectives as N, createElementBlock as P, openBlock as D, mergeProps as E, vModelText as I } from "vue";
-import { i as k } from "../intl-tel-input-f0-6rrpA.mjs";
-const B = /* @__PURE__ */ g({
+import { defineComponent as g, mergeModels as m, useModel as b, ref as r, onMounted as h, watch as C, onUnmounted as P, withDirectives as N, createElementBlock as M, openBlock as B, mergeProps as D, vModelText as E } from "vue";
+import { i as I } from "../intl-tel-input-DYFK-Vt4.mjs";
+const x = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "IntlTelInput",
   props: /* @__PURE__ */ m({
     options: { default: () => ({}) },
+    usePreciseValidation: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     inputProps: { default: () => ({}) }
   }, {
@@ -20,40 +21,40 @@ const B = /* @__PURE__ */ g({
     "changeErrorCode"
   ], ["update:modelValue"]),
   setup(s, { expose: v, emit: f }) {
-    const u = b(s, "modelValue"), l = s, o = f, n = r(), t = r(), i = r(!1), d = () => t.value ? l.options.strictMode ? t.value.isValidNumberPrecise() : t.value.isValidNumber() : null, p = () => {
+    const u = b(s, "modelValue"), l = s, n = f, o = r(), t = r(), i = r(!1), d = () => t.value ? l.usePreciseValidation ? t.value.isValidNumberPrecise() : t.value.isValidNumber() : null, p = () => {
       let e = d();
-      i.value !== e && (i.value = e, o("changeValidity", !!e), o(
+      i.value !== e && (i.value = e, n("changeValidity", !!e), n(
         "changeErrorCode",
         e ? null : t.value.getValidationError()
       ));
     }, c = () => {
       var e;
-      o("changeNumber", ((e = t.value) == null ? void 0 : e.getNumber()) ?? ""), p();
-    }, y = () => {
+      n("changeNumber", ((e = t.value) == null ? void 0 : e.getNumber()) ?? ""), p();
+    }, V = () => {
       var e;
-      o("changeCountry", ((e = t.value) == null ? void 0 : e.getSelectedCountryData().iso2) ?? ""), c(), p();
+      n("changeCountry", ((e = t.value) == null ? void 0 : e.getSelectedCountryData().iso2) ?? ""), c(), p();
     };
     return h(() => {
-      n.value && (t.value = k(n.value, l.options), u.value && t.value.setNumber(u.value), l.disabled && t.value.setDisabled(l.disabled), i.value = d());
+      o.value && (t.value = I(o.value, l.options), u.value && t.value.setNumber(u.value), l.disabled && t.value.setDisabled(l.disabled), i.value = d());
     }), C(
       () => l.disabled,
       (e) => {
         var a;
         return (a = t.value) == null ? void 0 : a.setDisabled(e);
       }
-    ), M(() => {
+    ), P(() => {
       var e;
       return (e = t.value) == null ? void 0 : e.destroy();
-    }), v({ instance: t, input: n }), (e, a) => N((D(), P("input", E({
+    }), v({ instance: t, input: o }), (e, a) => N((B(), M("input", D({
       ref_key: "input",
-      ref: n,
-      "onUpdate:modelValue": a[0] || (a[0] = (V) => u.value = V),
+      ref: o,
+      "onUpdate:modelValue": a[0] || (a[0] = (y) => u.value = y),
       type: "tel",
-      onCountrychange: y,
+      onCountrychange: V,
       onInput: c
     }, e.inputProps), null, 16)), [
       [
-        I,
+        E,
         u.value,
         void 0,
         { lazy: !0 }
@@ -62,5 +63,5 @@ const B = /* @__PURE__ */ g({
   }
 });
 export {
-  B as default
+  x as default
 };