@desource/phone-mask-vue 1.3.0 β 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/README.md +113 -6
- package/dist/core.cjs +1 -1
- package/dist/core.mjs +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/phone-mask-vue.css +1 -1
- package/dist/types/components/PhoneInput.vue.d.ts.map +1 -1
- package/dist/types/composables/internal/useCountry.d.ts +1 -1
- package/dist/types/composables/internal/useCountry.d.ts.map +1 -1
- package/dist/types/composables/internal/useCountrySelector.d.ts +5 -4
- package/dist/types/composables/internal/useCountrySelector.d.ts.map +1 -1
- package/dist/types/composables/internal/useFormatter.d.ts +2 -1
- package/dist/types/composables/internal/useFormatter.d.ts.map +1 -1
- package/dist/types/composables/internal/useInputHandlers.d.ts +1 -1
- package/dist/types/composables/internal/useInputHandlers.d.ts.map +1 -1
- package/dist/types/core.d.ts +1 -0
- package/dist/types/core.d.ts.map +1 -1
- package/dist/types/types.d.ts +2 -1
- package/dist/types/types.d.ts.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
# @desource/phone-mask-vue
|
|
2
2
|
|
|
3
|
+
## 1.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Core Upgrades:
|
|
8
|
+
- Added `@desource/phone-mask/kit` subpath for formatter, handlers, services, utilities, and shared country selector helpers
|
|
9
|
+
- Root `@desource/phone-mask` now focuses on country mask entries/data. Helper, formatter, handler, service, and utility imports should use `@desource/phone-mask/kit`
|
|
10
|
+
- Added shared country selector DOM, positioning, keyboard, and focus helpers used by framework packages
|
|
11
|
+
|
|
12
|
+
- Vue/React/Svelte Upgrades:
|
|
13
|
+
- Rebuilt the country selector dropdown with stable body-rendered fixed positioning using Portal/Teleport patterns
|
|
14
|
+
- Improved dropdown UX across desktop and mobile: viewport-aware above/below placement, body-level rendering, outside-click close, Escape close, focus restore, search keyboard navigation, and empty-results keyboard safety
|
|
15
|
+
- Improved dropdown accessibility semantics by exposing the selector popup as a searchable dialog with listbox options
|
|
16
|
+
- Aligned country selector behavior and tests across React, Vue, and Svelte through shared common/core helpers
|
|
17
|
+
|
|
18
|
+
- React Upgrades:
|
|
19
|
+
- Simplified internal memoization and callback usage where it reduced bundle/runtime overhead without changing behavior
|
|
20
|
+
|
|
21
|
+
- Svelte Upgrades:
|
|
22
|
+
- Cleaned up event listener and attachment typings for newer Svelte/TypeScript tooling
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- Updated dependencies []:
|
|
27
|
+
- @desource/phone-mask@1.4.0
|
|
28
|
+
|
|
29
|
+
## 1.3.1
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- Core Upgrades:
|
|
34
|
+
- Sync country masks with google-libphonenumber (πΈπ° Slovakia updates)
|
|
35
|
+
|
|
36
|
+
- Updated dependencies []:
|
|
37
|
+
- @desource/phone-mask@1.3.1
|
|
38
|
+
|
|
3
39
|
## 1.3.0
|
|
4
40
|
|
|
5
41
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -65,7 +65,7 @@ Composable mode (for custom input implementations in case even directive doesn't
|
|
|
65
65
|
import { usePhoneMask } from '@desource/phone-mask-vue';
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
-
Core
|
|
68
|
+
Core kit utilities and mask data re-exported from the core package subpaths:
|
|
69
69
|
|
|
70
70
|
```ts
|
|
71
71
|
import { getFlagEmoji, formatDigitsWithMap } from '@desource/phone-mask-vue/core';
|
|
@@ -114,9 +114,9 @@ const country = ref('US');
|
|
|
114
114
|
const phone = ref('');
|
|
115
115
|
const digits = ref('');
|
|
116
116
|
|
|
117
|
-
const handleChange = (
|
|
118
|
-
phone.value =
|
|
119
|
-
digits.value =
|
|
117
|
+
const handleChange = (nextPhone: PMaskPhoneNumber) => {
|
|
118
|
+
phone.value = nextPhone.full;
|
|
119
|
+
digits.value = nextPhone.digits;
|
|
120
120
|
};
|
|
121
121
|
</script>
|
|
122
122
|
|
|
@@ -170,6 +170,113 @@ const { inputRef, digits, full, fullFormatted, isComplete, setCountry } = usePho
|
|
|
170
170
|
</template>
|
|
171
171
|
```
|
|
172
172
|
|
|
173
|
+
### Send Raw Digits to Backend
|
|
174
|
+
|
|
175
|
+
```vue
|
|
176
|
+
<script setup lang="ts">
|
|
177
|
+
import { ref } from 'vue';
|
|
178
|
+
import { PhoneInput, type PMaskPhoneNumber } from '@desource/phone-mask-vue';
|
|
179
|
+
|
|
180
|
+
const phoneDigits = ref('');
|
|
181
|
+
|
|
182
|
+
const onPhoneChange = async (phone: PMaskPhoneNumber) => {
|
|
183
|
+
await fetch('/api/profile/phone', {
|
|
184
|
+
method: 'POST',
|
|
185
|
+
headers: { 'content-type': 'application/json' },
|
|
186
|
+
body: JSON.stringify({
|
|
187
|
+
phoneDigits: phone.digits, // unformatted value for backend
|
|
188
|
+
phoneFull: phone.full // optional full number with country code
|
|
189
|
+
})
|
|
190
|
+
});
|
|
191
|
+
};
|
|
192
|
+
</script>
|
|
193
|
+
|
|
194
|
+
<template>
|
|
195
|
+
<PhoneInput v-model="phoneDigits" country="US" @change="onPhoneChange" />
|
|
196
|
+
</template>
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### Dynamic Mask Updates on Country Change
|
|
200
|
+
|
|
201
|
+
```vue
|
|
202
|
+
<script setup lang="ts">
|
|
203
|
+
import { ref } from 'vue';
|
|
204
|
+
import { usePhoneMask, type PCountryKey } from '@desource/phone-mask-vue';
|
|
205
|
+
|
|
206
|
+
const selectedCountry = ref<PCountryKey>('US');
|
|
207
|
+
const digits = ref('');
|
|
208
|
+
|
|
209
|
+
const { inputRef, fullFormatted, isComplete, setCountry } = usePhoneMask({
|
|
210
|
+
value: digits,
|
|
211
|
+
onChange: (value) => (digits.value = value),
|
|
212
|
+
country: selectedCountry
|
|
213
|
+
});
|
|
214
|
+
|
|
215
|
+
const onCountrySelect = (nextCountry: PCountryKey) => {
|
|
216
|
+
selectedCountry.value = nextCountry;
|
|
217
|
+
setCountry(nextCountry); // updates mask immediately
|
|
218
|
+
};
|
|
219
|
+
</script>
|
|
220
|
+
|
|
221
|
+
<template>
|
|
222
|
+
<select :value="selectedCountry" @change="onCountrySelect(($event.target as HTMLSelectElement).value as PCountryKey)">
|
|
223
|
+
<option value="US">US</option>
|
|
224
|
+
<option value="GB">GB</option>
|
|
225
|
+
<option value="DE">DE</option>
|
|
226
|
+
</select>
|
|
227
|
+
|
|
228
|
+
<input ref="inputRef" type="tel" />
|
|
229
|
+
<p>{{ fullFormatted }}</p>
|
|
230
|
+
<p>{{ isComplete ? 'complete' : 'incomplete' }}</p>
|
|
231
|
+
</template>
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
### Multi-tenant: tenantId Default Country + Tenant-specific Validation Rules
|
|
235
|
+
|
|
236
|
+
```vue
|
|
237
|
+
<script setup lang="ts">
|
|
238
|
+
import { computed, ref } from 'vue';
|
|
239
|
+
import { usePhoneMask, type PCountryKey } from '@desource/phone-mask-vue';
|
|
240
|
+
|
|
241
|
+
type TenantPolicy = {
|
|
242
|
+
defaultCountry: PCountryKey;
|
|
243
|
+
prefixRule?: RegExp;
|
|
244
|
+
};
|
|
245
|
+
|
|
246
|
+
const props = defineProps<{ tenantId: string }>();
|
|
247
|
+
|
|
248
|
+
const TENANT_POLICIES: Record<string, TenantPolicy> = {
|
|
249
|
+
acme: { defaultCountry: 'US', prefixRule: /^(202|303)\d{7}$/ },
|
|
250
|
+
globex: { defaultCountry: 'GB', prefixRule: /^7\d{9}$/ }
|
|
251
|
+
};
|
|
252
|
+
|
|
253
|
+
const tenantPolicy = computed(() => TENANT_POLICIES[props.tenantId] ?? { defaultCountry: 'US' as const });
|
|
254
|
+
const digits = ref('');
|
|
255
|
+
|
|
256
|
+
const {
|
|
257
|
+
inputRef,
|
|
258
|
+
digits: maskDigits,
|
|
259
|
+
isComplete
|
|
260
|
+
} = usePhoneMask({
|
|
261
|
+
value: digits,
|
|
262
|
+
onChange: (value) => (digits.value = value),
|
|
263
|
+
country: computed(() => tenantPolicy.value.defaultCountry)
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
const isTenantValid = computed(() => {
|
|
267
|
+
if (!isComplete.value) return false;
|
|
268
|
+
const rule = tenantPolicy.value.prefixRule;
|
|
269
|
+
return rule ? rule.test(maskDigits.value) : true;
|
|
270
|
+
});
|
|
271
|
+
</script>
|
|
272
|
+
|
|
273
|
+
<template>
|
|
274
|
+
<input ref="inputRef" type="tel" />
|
|
275
|
+
<p>Default country: {{ tenantPolicy.defaultCountry }}</p>
|
|
276
|
+
<p>Tenant validation: {{ isTenantValid ? 'pass' : 'fail' }}</p>
|
|
277
|
+
</template>
|
|
278
|
+
```
|
|
279
|
+
|
|
173
280
|
## π Component API
|
|
174
281
|
|
|
175
282
|
### Props
|
|
@@ -682,8 +789,8 @@ const form = reactive({
|
|
|
682
789
|
βββ dist/
|
|
683
790
|
β βββ index.mjs # Main ESM entry
|
|
684
791
|
β βββ index.cjs # Main CommonJS entry
|
|
685
|
-
β βββ core.mjs # Core
|
|
686
|
-
β βββ core.cjs # Core
|
|
792
|
+
β βββ core.mjs # Core kit utilities and mask data subpath
|
|
793
|
+
β βββ core.cjs # Core kit utilities and mask data CJS subpath
|
|
687
794
|
β βββ phone-mask-vue.css # Component styles
|
|
688
795
|
β βββ types/ # TypeScript declarations
|
|
689
796
|
βββ README.md # This file
|
package/dist/core.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=require(`@desource/phone-mask`);Object.keys(e).forEach(function(t){t!==`default`&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=require(`@desource/phone-mask`);Object.keys(e).forEach(function(t){t!==`default`&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});var t=require(`@desource/phone-mask/kit`);Object.keys(t).forEach(function(e){e!==`default`&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});
|
package/dist/core.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export*from"@desource/phone-mask";
|
|
1
|
+
export*from"@desource/phone-mask/kit";export*from"@desource/phone-mask";
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require(`vue`),t=require(`@desource/phone-mask`);function n({country:n,locale:r,detect:i,onCountryChange:a}={}){let o=(0,e.computed)(()=>(0,e.toValue)(r)||(0,t.getNavigatorLang)()),s=(0,e.ref)((0,t.parseCountryCode)((0,e.toValue)(n),`US`)),c=(0,e.computed)(()=>(0,t.getCountry)(s.value,o.value)),l=e=>{let n=(0,t.parseCountryCode)(e);return n?(s.value=n,!0):!1},u=async()=>{l(await(0,t.detectByGeoIp)())||l((0,t.detectCountryFromLocale)())};return(0,e.watchEffect)(()=>{let t=(0,e.toValue)(n);t&&t!==s.value&&l(t)}),(0,e.watchEffect)(()=>{(0,e.toValue)(i)&&!(0,e.toValue)(n)&&u()}),(0,e.watchEffect)(()=>{a?.(c.value)}),{country:c,setCountry:l,locale:o}}function r({country:n,value:r,onChange:i,onPhoneChange:a,onValidationChange:o}){let s=(0,e.computed)(()=>(0,t.createPhoneFormatter)((0,e.toValue)(n))),c=(0,e.computed)(()=>s.value.getMaxDigits()),l=(0,e.computed)(()=>(0,t.extractDigits)((0,e.toValue)(r),c.value)),u=(0,e.computed)(()=>s.value.getPlaceholder()),d=(0,e.computed)(()=>s.value.formatDisplay(l.value)),f=(0,e.computed)(()=>l.value?`${(0,e.toValue)(n).code}${l.value}`:``),p=(0,e.computed)(()=>d.value?`${(0,e.toValue)(n).code} ${d.value}`:``),m=(0,e.computed)(()=>s.value.isComplete(l.value)),h=(0,e.computed)(()=>l.value.length===0),g=(0,e.computed)(()=>!h.value&&!m.value),_=(0,e.computed)(()=>({full:f.value,fullFormatted:p.value,digits:l.value}));return(0,e.watchEffect)(()=>{(0,e.toValue)(r)!==l.value&&i(l.value)}),(0,e.watchEffect)(()=>{a?.(_.value)}),(0,e.watchEffect)(()=>{o?.(m.value)}),{digits:l,formatter:s,displayPlaceholder:u,displayValue:d,full:f,fullFormatted:p,isComplete:m,isEmpty:h,shouldShowWarn:g}}function i(){let t=null,n=()=>{t&&=(clearTimeout(t),null)};return(0,e.onUnmounted)(n),{set:(e,r)=>{n(),t=setTimeout(e,r)},clear:n}}function a(){let t=(0,e.ref)(!1),n=i();return{showValidationHint:t,clearValidationHint:(e=!0)=>{e&&(t.value=!1),n.clear()},scheduleValidationHint:e=>{t.value=!1,n.set(()=>{t.value=!0},e)}}}var o=500,s=300;function c(n){let{formatter:r,digits:i,inactive:a,onChange:c,scheduleValidationHint:l}=n,u=(n,i)=>{(0,e.nextTick)(()=>{n&&(0,t.setCaret)(n,(0,e.toValue)(r).getCaretPosition(i))})};return{handleBeforeInput:e=>{(0,t.processBeforeInput)(e)},handleInput:n=>{if((0,e.toValue)(a))return;let i=(0,t.processInput)(n,{formatter:(0,e.toValue)(r)});i&&(c?.(i.newDigits),u(n.target,i.caretDigitIndex),l?.(o))},handleKeydown:n=>{if((0,e.toValue)(a))return;let o=(0,t.processKeydown)(n,{digits:(0,e.toValue)(i),formatter:(0,e.toValue)(r)});o&&(c?.(o.newDigits),u(n.target,o.caretDigitIndex),l?.(s))},handlePaste:n=>{if((0,e.toValue)(a))return;let o=(0,t.processPaste)(n,{digits:(0,e.toValue)(i),formatter:(0,e.toValue)(r)});o&&(c?.(o.newDigits),u(n.target,o.caretDigitIndex),l?.(s))}}}function l({rootRef:n,dropdownRef:r,searchRef:i,selectorRef:a,locale:o,countryOption:s,inactive:c,onSelectCountry:l,onAfterSelect:u}){let d=(0,e.ref)(``),f=(0,e.ref)(!1),p=(0,e.shallowRef)({}),m=(0,e.ref)(0),h=(0,e.computed)(()=>(0,t.MasksFull)((0,e.toValue)(o))),g=(0,e.computed)(()=>(0,t.filterCountries)(h.value,d.value)),_=(0,e.computed)(()=>!(0,e.toValue)(s)&&h.value.length>1),v=e=>{m.value=e},y=()=>{(0,e.nextTick)(()=>i.value?.focus({preventScroll:!0}))},b=()=>{f.value=!1},x=()=>{f.value=!0,v(0),y()},ee=()=>{(0,e.toValue)(c)||!_.value||(f.value?b():x())},S=e=>{l(e),b(),d.value=``,v(0),u?.()},te=e=>{d.value=e.target.value,v(0)},C=e=>{let t=e.target,n=r.value,i=a.value;t&&(n?.contains(t)||i?.contains(t)||b())},w=e=>{if(e?.type===`scroll`&&e.target&&r.value?.contains(e.target)||!n.value)return;let t=n.value.getBoundingClientRect();p.value={top:`${t.bottom+globalThis.scrollY+8}px`,left:`${t.left+globalThis.scrollX}px`,width:`${t.width}px`}},T=()=>{(0,e.nextTick)(()=>{let e=r.value?.lastElementChild,t=e?.children[m.value];if(!e||!t)return;let n=e.getBoundingClientRect(),i=t.getBoundingClientRect(),a=0;if(i.top<n.top)a=e.scrollTop-(n.top-i.top);else if(i.bottom>n.bottom)a=e.scrollTop+(i.bottom-n.bottom);else return;e.scrollTo({top:a,behavior:`smooth`})})},ne=e=>{e.key===`ArrowDown`?(e.preventDefault(),v(Math.min(m.value+1,g.value.length-1)),T()):e.key===`ArrowUp`?(e.preventDefault(),v(Math.max(m.value-1,0)),T()):e.key===`Enter`&&g.value[m.value]?(e.preventDefault(),S(g.value[m.value].id)):e.key===`Escape`&&b()},E=()=>{globalThis.removeEventListener(`resize`,w),globalThis.removeEventListener(`scroll`,w,!0),globalThis.removeEventListener(`click`,C,!0)};return(0,e.watch)(_,e=>{!e&&f.value&&b()}),(0,e.watch)(f,e=>{if(!e){E();return}w(),globalThis.addEventListener(`resize`,w),globalThis.addEventListener(`scroll`,w,!0),globalThis.addEventListener(`click`,C,!0)}),(0,e.onBeforeUnmount)(E),{dropdownOpen:f,search:d,focusedIndex:m,dropdownStyle:p,filteredCountries:g,hasDropdown:_,openDropdown:x,closeDropdown:b,toggleDropdown:ee,selectCountry:S,setFocusedIndex:v,handleSearchChange:te,handleSearchKeydown:ne}}function u(t=1800){let n=(0,e.ref)(!1),r=(0,e.ref)(!1),a=i();return{copied:n,isCopying:r,copy:async e=>{if(r.value)return!1;let i=e.trim();if(!i)return!1;r.value=!0;try{return await navigator.clipboard.writeText(i),n.value=!0,a.set(()=>{n.value=!1},t),!0}catch(e){return console.warn(`Copy failed`,e),!1}finally{r.value=!1}}}}var d=1800;function f({liveRef:t,fullFormatted:n,onCopy:r}){let a=i(),{copied:o,copy:s}=u(d),c=(0,e.computed)(()=>o.value?`Copied`:`Copy ${n.value}`),l=(0,e.computed)(()=>o.value?`Copied`:`Copy phone number`),f=e=>{t?.value&&(t.value.textContent=e,a.set(()=>{t.value&&(t.value.textContent=``)},d))};return{copied:o,copyAriaLabel:c,copyButtonTitle:l,onCopyClick:async()=>{let e=n.value.trim();await s(e)&&(r?.(e),f(`Phone number copied to clipboard`))}}}function p({theme:t}){let n=(0,e.ref)(!1),r=(0,e.computed)(()=>{let r=(0,e.toValue)(t);return r===`auto`?n.value?`theme-dark`:`theme-light`:`theme-${r}`}),i=null,a=e=>{n.value=e.matches};return(0,e.onBeforeMount)(()=>{i=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null,i&&(n.value=i.matches,i.addEventListener(`change`,a))}),(0,e.onBeforeUnmount)(()=>{i?.removeEventListener(`change`,a)}),{themeClass:r}}var m=[`disabled`,`tabindex`,`aria-label`,`aria-expanded`,`aria-haspopup`],h=[`aria-label`],g={class:`pi-code`},_={class:`pi-input-wrap`},v=[`id`,`name`,`placeholder`,`value`,`disabled`,`readonly`,`aria-invalid`],y={class:`pi-actions`,role:`toolbar`,"aria-label":`Phone input actions`},b=[`aria-label`,`title`],x={key:1,width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},ee={key:2,width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},S=[`aria-label`,`title`],te={key:0,width:`11`,height:`11`,viewBox:`0 0 14 14`,fill:`none`,"aria-hidden":`true`},C={class:`pi-search-wrap`},w=[`value`,`aria-activedescendant`,`placeholder`],T=[`id`,`aria-selected`,`title`,`onClick`,`onMouseenter`],ne=[`aria-label`],E={class:`pi-opt-name`},re={class:`pi-opt-code`},ie={key:0,class:`pi-empty`},D=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,e.defineComponent)({__name:`PhoneInput`,props:(0,e.mergeModels)({id:{},name:{},country:{},detect:{type:Boolean,default:!0},locale:{},size:{default:`normal`},theme:{default:`auto`},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},showCopy:{type:Boolean,default:!0},showClear:{type:Boolean,default:!1},withValidity:{type:Boolean,default:!0},searchPlaceholder:{default:`Search country or code...`},noResultsText:{default:`No countries found`},clearButtonLabel:{default:`Clear phone number`},dropdownClass:{},disableDefaultStyles:{type:Boolean,default:!1}},{modelValue:{default:``},modelModifiers:{}}),emits:(0,e.mergeModels)([`change`,`country-change`,`validation-change`,`focus`,`blur`,`copy`,`clear`],[`update:modelValue`]),setup(t,{expose:i,emit:o}){let s=t,u=(0,e.useSlots)(),d=o,D=(0,e.useModel)(t,`modelValue`),O=e=>{D.value=e},{country:k,setCountry:A,locale:j}=n({country:()=>s.country,locale:()=>s.locale,detect:()=>s.detect,onCountryChange:e=>d(`country-change`,e)}),{digits:M,formatter:ae,displayPlaceholder:N,displayValue:P,full:oe,fullFormatted:F,isComplete:I,isEmpty:se,shouldShowWarn:ce}=r({country:k,value:D,onChange:O,onPhoneChange:e=>d(`change`,e),onValidationChange:e=>d(`validation-change`,e)}),{showValidationHint:le,clearValidationHint:L,scheduleValidationHint:ue}=a(),R=(0,e.useTemplateRef)(`rootRef`),z=(0,e.useTemplateRef)(`telRef`),B=(0,e.useTemplateRef)(`liveRef`),V=(0,e.useTemplateRef)(`dropdownRef`),H=(0,e.useTemplateRef)(`searchRef`),U=(0,e.useTemplateRef)(`selectorRef`),W=(0,e.getCurrentInstance)()?.uid??0,de=`pi-options-${W}`,fe=e=>`pi-option-${W}-${e}`,G=(0,e.computed)(()=>s.disabled||s.readonly),pe=(0,e.computed)(()=>le.value&&ce.value),me=(0,e.computed)(()=>s.showCopy&&!se.value&&!s.disabled),he=(0,e.computed)(()=>s.showClear&&!se.value&&!G.value),{copied:K,copyAriaLabel:ge,copyButtonTitle:_e,onCopyClick:ve}=f({liveRef:B,fullFormatted:F,onCopy:e=>d(`copy`,e)}),q=()=>(0,e.nextTick)(()=>z.value?.focus()),{dropdownOpen:J,search:ye,focusedIndex:Y,dropdownStyle:be,filteredCountries:X,hasDropdown:Z,closeDropdown:xe,toggleDropdown:Se,selectCountry:Ce,setFocusedIndex:we,handleSearchChange:Q,handleSearchKeydown:Te}=l({rootRef:R,dropdownRef:V,searchRef:H,selectorRef:U,locale:j,countryOption:()=>s.country,inactive:G,onSelectCountry:A,onAfterSelect:q}),Ee=(0,e.computed)(()=>J.value&&X.value[Y.value]?fe(Y.value):void 0),{handleBeforeInput:De,handleInput:Oe,handleKeydown:ke,handlePaste:Ae}=c({formatter:ae,digits:M,inactive:G,onChange:O,scheduleValidationHint:ue}),je=e=>{L(!1),xe(),d(`focus`,e)},Me=e=>d(`blur`,e),Ne=()=>{O(``),L(),d(`clear`)},Pe=()=>{Ne(),q()};i({focus:q,blur:()=>z.value?.blur(),clear:Ne,selectCountry:Ce,getFullNumber:()=>oe.value,getFullFormattedNumber:()=>F.value,getDigits:()=>M.value,isValid:()=>I.value,isComplete:()=>I.value});let{themeClass:$}=p({theme:()=>s.theme}),Fe=(0,e.computed)(()=>[`phone-input`,`size-${s.size}`,$.value,{"is-disabled":s.disabled,"is-readonly":s.readonly,"is-unstyled":s.disableDefaultStyles,"is-incomplete":s.withValidity&&pe.value,"is-complete":s.withValidity&&I.value}]),Ie=(0,e.computed)(()=>({"--pi-actions-count":+me.value+ +he.value+(u[`actions-before`]?1:0)}));return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{ref_key:`rootRef`,ref:R,"aria-label":`Phone input with country selector`,role:`group`,class:(0,e.normalizeClass)(Fe.value),style:(0,e.normalizeStyle)(Ie.value)},[(0,e.createElementVNode)(`div`,{ref_key:`selectorRef`,ref:U,class:`pi-selector`},[(0,e.createElementVNode)(`button`,{type:`button`,class:(0,e.normalizeClass)([`pi-selector-btn`,{"no-dropdown":!(0,e.unref)(Z)||t.readonly}]),disabled:t.disabled,tabindex:G.value||!(0,e.unref)(Z)?-1:void 0,"aria-label":`Selected country: ${(0,e.unref)(k).name}`,"aria-expanded":(0,e.unref)(J),"aria-haspopup":(0,e.unref)(Z)?`listbox`:void 0,onClick:r[0]||=(...t)=>(0,e.unref)(Se)&&(0,e.unref)(Se)(...t)},[(0,e.createElementVNode)(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${(0,e.unref)(k).name} flag`},[(0,e.renderSlot)(n.$slots,`flag`,{country:(0,e.unref)(k)},()=>[(0,e.createTextVNode)((0,e.toDisplayString)((0,e.unref)(k).flag),1)],!0)],8,h),(0,e.createElementVNode)(`span`,g,(0,e.toDisplayString)((0,e.unref)(k).code),1),!G.value&&(0,e.unref)(Z)?((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,{key:0,class:(0,e.normalizeClass)([`pi-chevron`,{"is-open":(0,e.unref)(J)}]),width:`12`,height:`12`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`},[...r[8]||=[(0,e.createElementVNode)(`path`,{d:`M2.5 4.5L6 8L9.5 4.5`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`,"stroke-linejoin":`round`},null,-1)]],2)):(0,e.createCommentVNode)(``,!0)],10,m)],512),(0,e.createElementVNode)(`div`,_,[(0,e.createElementVNode)(`input`,{id:t.id,ref_key:`telRef`,ref:z,type:`tel`,inputmode:`tel`,autocomplete:`tel-national`,autocorrect:`off`,autocapitalize:`off`,spellcheck:`false`,class:`pi-input`,name:t.name,placeholder:(0,e.unref)(N),value:(0,e.unref)(P),disabled:t.disabled,readonly:t.readonly,"aria-invalid":pe.value,onBeforeinput:r[1]||=(...t)=>(0,e.unref)(De)&&(0,e.unref)(De)(...t),onInput:r[2]||=(...t)=>(0,e.unref)(Oe)&&(0,e.unref)(Oe)(...t),onKeydown:r[3]||=(...t)=>(0,e.unref)(ke)&&(0,e.unref)(ke)(...t),onPaste:r[4]||=(...t)=>(0,e.unref)(Ae)&&(0,e.unref)(Ae)(...t),onFocus:je,onBlur:Me},null,40,v),(0,e.createElementVNode)(`div`,y,[(0,e.createVNode)(e.Transition,{name:`fade-scale`},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,`actions-before`,{},void 0,!0)]),_:3}),(0,e.createVNode)(e.Transition,{name:`fade-scale`},{default:(0,e.withCtx)(()=>[me.value?((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{key:0,type:`button`,class:(0,e.normalizeClass)([`pi-btn`,`pi-btn-copy`,{"is-copied":(0,e.unref)(K)}]),"aria-label":(0,e.unref)(ge),title:(0,e.unref)(_e),onClick:r[5]||=(...t)=>(0,e.unref)(ve)&&(0,e.unref)(ve)(...t)},[u[`copy-svg`]?(0,e.renderSlot)(n.$slots,`copy-svg`,{key:0,copied:(0,e.unref)(K)},void 0,!0):(0,e.unref)(K)?((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,ee,[...r[10]||=[(0,e.createElementVNode)(`path`,{d:`M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z`,fill:`currentColor`},null,-1)]])):((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,x,[...r[9]||=[(0,e.createElementVNode)(`path`,{d:`M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z`,fill:`currentColor`},null,-1)]]))],10,b)):(0,e.createCommentVNode)(``,!0)]),_:3}),(0,e.createVNode)(e.Transition,{name:`fade-scale`},{default:(0,e.withCtx)(()=>[he.value?((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{key:0,type:`button`,class:`pi-btn pi-btn-clear`,"aria-label":t.clearButtonLabel,title:t.clearButtonLabel,onClick:Pe},[u[`clear-svg`]?(0,e.renderSlot)(n.$slots,`clear-svg`,{key:1},void 0,!0):((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,te,[...r[11]||=[(0,e.createElementVNode)(`path`,{d:`M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z`,fill:`currentColor`},null,-1)]]))],8,S)):(0,e.createCommentVNode)(``,!0)]),_:3})])]),((0,e.openBlock)(),(0,e.createBlock)(e.Teleport,{to:`body`},[(0,e.createVNode)(e.Transition,{name:`dropdown`},{default:(0,e.withCtx)(()=>[(0,e.unref)(J)?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,ref_key:`dropdownRef`,ref:V,class:(0,e.normalizeClass)([`phone-dropdown`,[t.dropdownClass,(0,e.unref)($)]]),role:`dialog`,"aria-modal":`false`,"aria-label":`Select country`,style:(0,e.normalizeStyle)((0,e.unref)(be))},[(0,e.createElementVNode)(`div`,C,[(0,e.createElementVNode)(`input`,{ref_key:`searchRef`,ref:H,value:(0,e.unref)(ye),type:`search`,class:`pi-search`,"aria-label":`Search countries`,"aria-controls":de,"aria-activedescendant":Ee.value,placeholder:t.searchPlaceholder,onKeydown:r[6]||=(...t)=>(0,e.unref)(Te)&&(0,e.unref)(Te)(...t),onInput:r[7]||=(...t)=>(0,e.unref)(Q)&&(0,e.unref)(Q)(...t)},null,40,w)]),(0,e.createElementVNode)(`ul`,{id:de,class:`pi-options`,role:`listbox`,tabindex:`-1`},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)((0,e.unref)(X),(t,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`li`,{id:fe(r),key:t.id,role:`option`,class:(0,e.normalizeClass)([`pi-option`,{"is-focused":r===(0,e.unref)(Y),"is-selected":t.id===(0,e.unref)(k).id}]),"aria-selected":t.id===(0,e.unref)(k).id,title:t.name,onClick:n=>(0,e.unref)(Ce)(t.id),onMouseenter:t=>(0,e.unref)(we)(r)},[(0,e.createElementVNode)(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${t.name} flag`},[(0,e.renderSlot)(n.$slots,`flag`,{country:t},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.flag),1)],!0)],8,ne),(0,e.createElementVNode)(`span`,E,(0,e.toDisplayString)(t.name),1),(0,e.createElementVNode)(`span`,re,(0,e.toDisplayString)(t.code),1)],42,T))),128)),(0,e.unref)(X).length===0?((0,e.openBlock)(),(0,e.createElementBlock)(`li`,ie,(0,e.toDisplayString)(t.noResultsText),1)):(0,e.createCommentVNode)(``,!0)])],6)):(0,e.createCommentVNode)(``,!0)]),_:3})])),(0,e.createElementVNode)(`div`,{ref_key:`liveRef`,ref:B,class:`sr-only`,role:`status`,"aria-live":`polite`,"aria-atomic":`true`},null,512)],6))}}),[[`__scopeId`,`data-v-4b4c49b3`]]);function O(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function k(e,t,n){if(t.digits=n,e.value=t.formatter.formatDisplay(t.digits),t.options.onChange){let n=e.value?`${t.country.code} ${e.value}`:``,r=t.digits?`${t.country.code}${t.digits}`:``;t.options.onChange({full:r,fullFormatted:n,digits:t.digits})}}function A(e,n){let r=n.formatter.getMaxDigits(),i=(0,t.extractDigits)(e.value,r),a=n.formatter.formatDisplay(i);(i!==n.digits||e.value!==a)&&k(e,n,i)}function j(e,n){let r=n.country.id,i=(0,t.parseCountryCode)(n.options.country);i&&i!==r&&N(e,n,i)}function M(n,r,i){return a=>{let o=i(a,r);o&&(k(n,r,o.newDigits),(0,e.nextTick)(()=>{(0,t.setCaret)(n,r.formatter.getCaretPosition(o.caretDigitIndex))}))}}async function ae(e){let n=(0,t.parseCountryCode)(e.country);if(n)return n;if(e.detect){let e=(0,t.parseCountryCode)(await(0,t.detectByGeoIp)());if(e)return e;let n=(0,t.parseCountryCode)((0,t.detectCountryFromLocale)());if(n)return n}return`US`}function N(e,n,r){let i=(0,t.parseCountryCode)(r);if(!i)return;let a=(0,t.getCountry)(i,n.locale);n.country=a,n.options.onCountryChange?.(a),n.formatter=(0,t.createPhoneFormatter)(a),e.placeholder=n.formatter.getPlaceholder(),A(e,n)}var P={mounted(e,n){if(e.tagName!==`INPUT`){console.warn(`[v-phone-mask] Directive can only be used on input elements`);return}e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.setAttribute(`placeholder`,``);let r=O(n.value),i=r.locale||(0,t.getNavigatorLang)(),a=(0,t.getCountry)((0,t.parseCountryCode)(r.country,`US`),i),o={country:a,formatter:(0,t.createPhoneFormatter)(a),digits:``,locale:i,options:r};e.__phoneMaskState=o,o.inputHandler=M(e,o,t.processInput),o.keydownHandler=M(e,o,t.processKeydown),o.pasteHandler=M(e,o,t.processPaste),o.beforeInputHandler=t.processBeforeInput,e.addEventListener(`beforeinput`,o.beforeInputHandler),e.addEventListener(`input`,o.inputHandler),e.addEventListener(`keydown`,o.keydownHandler),e.addEventListener(`paste`,o.pasteHandler),ae(r).then(t=>{e.__phoneMaskState===o&&N(e,o,t)})},updated(e,t){let n=e.__phoneMaskState;n&&(n.options=O(t.value),j(e,n),A(e,n))},unmounted(e){let t=e.__phoneMaskState;t&&(t.beforeInputHandler&&e.removeEventListener(`beforeinput`,t.beforeInputHandler),t.inputHandler&&e.removeEventListener(`input`,t.inputHandler),t.keydownHandler&&e.removeEventListener(`keydown`,t.keydownHandler),t.pasteHandler&&e.removeEventListener(`paste`,t.pasteHandler),delete e.__phoneMaskState)}};function oe(t){let i=(0,e.shallowRef)(null),{country:a,setCountry:o}=n({country:t.country,locale:t.locale,detect:t.detect,onCountryChange:t.onCountryChange}),{digits:s,formatter:l,displayPlaceholder:u,displayValue:d,full:f,fullFormatted:p,isComplete:m,isEmpty:h,shouldShowWarn:g}=r({country:a,value:t.value,onChange:t.onChange,onPhoneChange:t.onPhoneChange}),{handleBeforeInput:_,handleInput:v,handleKeydown:y,handlePaste:b}=c({formatter:l,digits:s,onChange:t.onChange});return(0,e.onMounted)(()=>{let e=i.value;e&&(e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`))}),(0,e.watchEffect)(()=>{let e=i.value;e&&(e.value=d.value,e.setAttribute(`placeholder`,u.value))},{flush:`post`}),(0,e.onMounted)(()=>{let e=i.value;e&&(e.addEventListener(`beforeinput`,_),e.addEventListener(`input`,v),e.addEventListener(`keydown`,y),e.addEventListener(`paste`,b))}),(0,e.onUnmounted)(()=>{let e=i.value;e&&(e.removeEventListener(`beforeinput`,_),e.removeEventListener(`input`,v),e.removeEventListener(`keydown`,y),e.removeEventListener(`paste`,b))}),{inputRef:i,digits:s,formatter:l,full:f,fullFormatted:p,isComplete:m,isEmpty:h,shouldShowWarn:g,country:a,setCountry:o,clear:()=>{t.onChange(``)}}}function F(e){e.component(`PhoneInput`,D),e.directive(`phone-mask`,P)}var I={install:F};exports.PhoneInput=D,exports.default=I,exports.install=F,exports.usePhoneMask=oe,exports.vPhoneMask=P,exports.vPhoneMaskSetCountry=N;
|
|
1
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require(`vue`),t=require(`@desource/phone-mask/kit`),n=require(`@desource/phone-mask`);function r({country:n,locale:r,detect:i,onCountryChange:a}={}){let o=(0,e.computed)(()=>(0,e.toValue)(r)||(0,t.getNavigatorLang)()),s=(0,e.ref)((0,t.parseCountryCode)((0,e.toValue)(n),`US`)),c=(0,e.computed)(()=>(0,t.getCountry)(s.value,o.value)),l=e=>{let n=(0,t.parseCountryCode)(e);return n?(s.value=n,!0):!1},u=async()=>{l(await(0,t.detectByGeoIp)())||l((0,t.detectCountryFromLocale)())};return(0,e.watchEffect)(()=>{let t=(0,e.toValue)(n);t&&t!==s.value&&l(t)}),(0,e.watchEffect)(()=>{(0,e.toValue)(i)&&!(0,e.toValue)(n)&&u()}),(0,e.watchEffect)(()=>{a?.(c.value)}),{country:c,setCountry:l,locale:o}}function i({country:n,value:r,onChange:i,onPhoneChange:a,onValidationChange:o}){let s=(0,e.computed)(()=>(0,t.createPhoneFormatter)((0,e.toValue)(n))),c=(0,e.computed)(()=>s.value.getMaxDigits()),l=(0,e.computed)(()=>(0,t.extractDigits)((0,e.toValue)(r),c.value)),u=(0,e.computed)(()=>s.value.getPlaceholder()),d=(0,e.computed)(()=>s.value.formatDisplay(l.value)),f=(0,e.computed)(()=>l.value?`${(0,e.toValue)(n).code}${l.value}`:``),p=(0,e.computed)(()=>d.value?`${(0,e.toValue)(n).code} ${d.value}`:``),m=(0,e.computed)(()=>s.value.isComplete(l.value)),h=(0,e.computed)(()=>l.value.length===0),g=(0,e.computed)(()=>!h.value&&!m.value),_=(0,e.computed)(()=>({full:f.value,fullFormatted:p.value,digits:l.value}));return(0,e.watchEffect)(()=>{(0,e.toValue)(r)!==l.value&&i(l.value)}),(0,e.watchEffect)(()=>{a?.(_.value)}),(0,e.watchEffect)(()=>{o?.(m.value)}),{digits:l,formatter:s,displayPlaceholder:u,displayValue:d,full:f,fullFormatted:p,isComplete:m,isEmpty:h,shouldShowWarn:g}}function a(){let t=null,n=()=>{t&&=(clearTimeout(t),null)};return(0,e.onUnmounted)(n),{set:(e,r)=>{n(),t=setTimeout(e,r)},clear:n}}function o(){let t=(0,e.ref)(!1),n=a();return{showValidationHint:t,clearValidationHint:(e=!0)=>{e&&(t.value=!1),n.clear()},scheduleValidationHint:e=>{t.value=!1,n.set(()=>{t.value=!0},e)}}}var s=500,c=300;function l(n){let{formatter:r,digits:i,inactive:a,onChange:o,scheduleValidationHint:l}=n,u=(n,i)=>{(0,e.nextTick)(()=>{n&&(0,t.setCaret)(n,(0,e.toValue)(r).getCaretPosition(i))})};return{handleBeforeInput:e=>{(0,t.processBeforeInput)(e)},handleInput:n=>{if((0,e.toValue)(a))return;let i=(0,t.processInput)(n,{formatter:(0,e.toValue)(r)});i&&(o?.(i.newDigits),u(n.target,i.caretDigitIndex),l?.(s))},handleKeydown:n=>{if((0,e.toValue)(a))return;let s=(0,t.processKeydown)(n,{digits:(0,e.toValue)(i),formatter:(0,e.toValue)(r)});s&&(o?.(s.newDigits),u(n.target,s.caretDigitIndex),l?.(c))},handlePaste:n=>{if((0,e.toValue)(a))return;let s=(0,t.processPaste)(n,{digits:(0,e.toValue)(i),formatter:(0,e.toValue)(r)});s&&(o?.(s.newDigits),u(n.target,s.caretDigitIndex),l?.(c))}}}function u({rootRef:r,dropdownRef:i,searchRef:a,selectorRef:o,locale:s,countryOption:c,inactive:l,onSelectCountry:u,onAfterSelect:d}){let f=(0,e.ref)(``),p=(0,e.ref)(!1),m=(0,e.ref)(0),h=!1,g=(0,e.computed)(()=>(0,n.MasksFull)((0,e.toValue)(s))),_=(0,e.computed)(()=>(0,t.filterCountries)(g.value,f.value)),v=(0,e.computed)(()=>!(0,e.toValue)(c)&&g.value.length>1),y=e=>{m.value=typeof e==`function`?e(m.value):e},b=()=>{(0,e.nextTick)(()=>a.value?.focus({preventScroll:!0}))},ee=()=>{f.value=``,y(0),h=!1},x=()=>{(0,t.positionCountryDropdown)(r.value,i.value)},S=()=>{p.value=!1,ee()},C=()=>{if((0,e.toValue)(l)||!v.value||p.value)return;let t=i.value,n=o.value;!t||!n||(x(),y(0),p.value=!0)},te=()=>{(0,e.toValue)(l)||!v.value||(p.value?S():C())},w=e=>{u(e),S(),d?.()},T=e=>{f.value=e.target.value,y(0)},ne=n=>{(0,e.nextTick)(()=>(0,t.scrollCountryOptionIntoView)(i.value,n))};return(0,e.watch)([v,()=>(0,e.toValue)(l)],([e,t])=>{(t||!e)&&p.value&&S()}),(0,e.watch)(p,(e,n,r)=>{e&&(x(),h&&b(),r((0,t.bindCountryDropdownListeners)(()=>i.value,()=>o.value,S,x)))}),{dropdownOpen:p,search:f,focusedIndex:m,filteredCountries:_,hasDropdown:v,openDropdown:C,closeDropdown:S,toggleDropdown:te,selectCountry:w,setFocusedIndex:y,handleSearchChange:T,handleSearchKeydown:e=>{(0,t.handleCountrySearchKeydown)(e,m.value,_.value,y,ne,e=>w(e.id))},handleSelectorPointerDown:e=>{h=e.pointerType===`mouse`},handleSelectorKeydown:e=>{(0,t.handleCountryButtonKeydown)(e,p.value,()=>{h=!0},b,C)}}}function d(t=1800){let n=(0,e.ref)(!1),r=(0,e.ref)(!1),i=a();return{copied:n,isCopying:r,copy:async e=>{if(r.value)return!1;let a=e.trim();if(!a)return!1;r.value=!0;try{return await navigator.clipboard.writeText(a),n.value=!0,i.set(()=>{n.value=!1},t),!0}catch(e){return console.warn(`Copy failed`,e),!1}finally{r.value=!1}}}}var f=1800;function p({liveRef:t,fullFormatted:n,onCopy:r}){let i=a(),{copied:o,copy:s}=d(f),c=(0,e.computed)(()=>o.value?`Copied`:`Copy ${n.value}`),l=(0,e.computed)(()=>o.value?`Copied`:`Copy phone number`),u=e=>{t?.value&&(t.value.textContent=e,i.set(()=>{t.value&&(t.value.textContent=``)},f))};return{copied:o,copyAriaLabel:c,copyButtonTitle:l,onCopyClick:async()=>{let e=n.value.trim();await s(e)&&(r?.(e),u(`Phone number copied to clipboard`))}}}function m({theme:t}){let n=(0,e.ref)(!1),r=(0,e.computed)(()=>{let r=(0,e.toValue)(t);return r===`auto`?n.value?`theme-dark`:`theme-light`:`theme-${r}`}),i=null,a=e=>{n.value=e.matches};return(0,e.onBeforeMount)(()=>{i=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null,i&&(n.value=i.matches,i.addEventListener(`change`,a))}),(0,e.onBeforeUnmount)(()=>{i?.removeEventListener(`change`,a)}),{themeClass:r}}var h={class:`pi-selector`},g=[`disabled`,`tabindex`,`aria-label`,`aria-expanded`,`aria-haspopup`,`aria-controls`],_=[`aria-label`],v={class:`pi-code`},y={class:`pi-input-wrap`},b=[`id`,`name`,`placeholder`,`value`,`disabled`,`readonly`,`aria-invalid`],ee={class:`pi-actions`,role:`toolbar`,"aria-label":`Phone input actions`},x=[`aria-label`,`title`],S={key:1,width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},C={key:2,width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},te=[`aria-label`,`title`],w={key:0,width:`11`,height:`11`,viewBox:`0 0 14 14`,fill:`none`,"aria-hidden":`true`},T={class:`pi-search-wrap`},ne=[`aria-activedescendant`,`placeholder`,`value`],re=[`id`,`aria-selected`,`title`,`onClick`,`onMouseenter`],ie=[`aria-label`],ae={class:`pi-opt-name`},oe={class:`pi-opt-code`},se={key:0,class:`pi-empty`},E=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,e.defineComponent)({__name:`PhoneInput`,props:(0,e.mergeModels)({id:{},name:{},country:{},detect:{type:Boolean,default:!0},locale:{},size:{default:`normal`},theme:{default:`auto`},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},showCopy:{type:Boolean,default:!0},showClear:{type:Boolean,default:!1},withValidity:{type:Boolean,default:!0},searchPlaceholder:{default:`Search country or code...`},noResultsText:{default:`No countries found`},clearButtonLabel:{default:`Clear phone number`},dropdownClass:{},disableDefaultStyles:{type:Boolean,default:!1}},{modelValue:{default:``},modelModifiers:{}}),emits:(0,e.mergeModels)([`change`,`country-change`,`validation-change`,`focus`,`blur`,`copy`,`clear`],[`update:modelValue`]),setup(t,{expose:n,emit:a}){let s=t,c=(0,e.useSlots)(),d=a,f=(0,e.useModel)(t,`modelValue`),E=e=>{f.value=e},{country:D,setCountry:O,locale:k}=r({country:()=>s.country,locale:()=>s.locale,detect:()=>s.detect,onCountryChange:e=>d(`country-change`,e)}),{digits:A,formatter:j,displayPlaceholder:ce,displayValue:M,full:N,fullFormatted:P,isComplete:F,isEmpty:I,shouldShowWarn:le}=i({country:D,value:f,onChange:E,onPhoneChange:e=>d(`change`,e),onValidationChange:e=>d(`validation-change`,e)}),{showValidationHint:ue,clearValidationHint:L,scheduleValidationHint:de}=o(),R=(0,e.useTemplateRef)(`rootRef`),z=(0,e.useTemplateRef)(`telRef`),B=(0,e.useTemplateRef)(`liveRef`),V=(0,e.useTemplateRef)(`dropdownRef`),H=(0,e.useTemplateRef)(`searchRef`),U=(0,e.useTemplateRef)(`selectorRef`),W=(0,e.getCurrentInstance)()?.uid??0,fe=`pi-dropdown-${W}`,pe=`pi-options-${W}`,me=e=>`pi-option-${W}-${e}`,G=(0,e.computed)(()=>s.disabled||s.readonly),he=(0,e.computed)(()=>ue.value&&le.value),ge=(0,e.computed)(()=>s.showCopy&&!I.value&&!s.disabled),_e=(0,e.computed)(()=>s.showClear&&!I.value&&!G.value),{copied:K,copyAriaLabel:ve,copyButtonTitle:ye,onCopyClick:be}=p({liveRef:B,fullFormatted:P,onCopy:e=>d(`copy`,e)}),q=()=>(0,e.nextTick)(()=>z.value?.focus()),{dropdownOpen:J,search:xe,focusedIndex:Y,filteredCountries:X,hasDropdown:Se,closeDropdown:Ce,toggleDropdown:we,selectCountry:Te,setFocusedIndex:Ee,handleSearchChange:De,handleSearchKeydown:Oe,handleSelectorPointerDown:ke,handleSelectorKeydown:Ae}=u({rootRef:R,dropdownRef:V,searchRef:H,selectorRef:U,locale:k,countryOption:()=>s.country,inactive:G,onSelectCountry:O,onAfterSelect:q}),je=(0,e.computed)(()=>J.value&&X.value[Y.value]?me(Y.value):void 0),Z=(0,e.computed)(()=>Se.value&&!G.value),Me=(0,e.computed)(()=>Se.value&&(!G.value||J.value)),{handleBeforeInput:Ne,handleInput:Pe,handleKeydown:Fe,handlePaste:Q}=l({formatter:j,digits:A,inactive:G,onChange:E,scheduleValidationHint:de}),Ie=e=>{L(!1),Ce(),d(`focus`,e)},Le=e=>d(`blur`,e),Re=()=>{E(``),L(),d(`clear`)},ze=()=>{Re(),q()};n({focus:q,blur:()=>z.value?.blur(),clear:Re,selectCountry:Te,getFullNumber:()=>N.value,getFullFormattedNumber:()=>P.value,getDigits:()=>A.value,isValid:()=>F.value,isComplete:()=>F.value});let{themeClass:$}=m({theme:()=>s.theme}),Be=(0,e.computed)(()=>[`phone-input`,`size-${s.size}`,$.value,{"is-disabled":s.disabled,"is-readonly":s.readonly,"is-unstyled":s.disableDefaultStyles,"is-incomplete":s.withValidity&&he.value,"is-complete":s.withValidity&&F.value}]),Ve=(0,e.computed)(()=>({"--pi-actions-count":+ge.value+ +_e.value+ +!!c[`actions-before`]}));return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{ref_key:`rootRef`,ref:R,"aria-label":`Phone input`,role:`group`,class:(0,e.normalizeClass)(Be.value),style:(0,e.normalizeStyle)(Ve.value)},[(0,e.createElementVNode)(`div`,h,[(0,e.createElementVNode)(`button`,{ref_key:`selectorRef`,ref:U,type:`button`,class:(0,e.normalizeClass)([`pi-selector-btn`,{"no-dropdown":!Z.value}]),disabled:t.disabled,tabindex:Z.value?void 0:-1,"aria-label":`Selected country: ${(0,e.unref)(D).name}`,"aria-expanded":Z.value&&(0,e.unref)(J),"aria-haspopup":Z.value?`dialog`:void 0,"aria-controls":Z.value?fe:void 0,onPointerdown:r[0]||=(...t)=>(0,e.unref)(ke)&&(0,e.unref)(ke)(...t),onKeydown:r[1]||=(...t)=>(0,e.unref)(Ae)&&(0,e.unref)(Ae)(...t),onClick:r[2]||=(...t)=>(0,e.unref)(we)&&(0,e.unref)(we)(...t)},[(0,e.createElementVNode)(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${(0,e.unref)(D).name} flag`},[(0,e.renderSlot)(n.$slots,`flag`,{country:(0,e.unref)(D)},()=>[(0,e.createTextVNode)((0,e.toDisplayString)((0,e.unref)(D).flag),1)],!0)],8,_),(0,e.createElementVNode)(`span`,v,(0,e.toDisplayString)((0,e.unref)(D).code),1),Z.value?((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,{key:0,class:(0,e.normalizeClass)([`pi-chevron`,{"is-open":(0,e.unref)(J)}]),width:`12`,height:`12`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`},[...r[10]||=[(0,e.createElementVNode)(`path`,{d:`M2.5 4.5L6 8L9.5 4.5`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`,"stroke-linejoin":`round`},null,-1)]],2)):(0,e.createCommentVNode)(``,!0)],42,g)]),(0,e.createElementVNode)(`div`,y,[(0,e.createElementVNode)(`input`,{id:t.id,ref_key:`telRef`,ref:z,type:`tel`,inputmode:`tel`,autocomplete:`tel-national`,autocorrect:`off`,autocapitalize:`off`,spellcheck:`false`,class:`pi-input`,name:t.name,placeholder:(0,e.unref)(ce),value:(0,e.unref)(M),disabled:t.disabled,readonly:t.readonly,"aria-invalid":he.value,onBeforeinput:r[3]||=(...t)=>(0,e.unref)(Ne)&&(0,e.unref)(Ne)(...t),onInput:r[4]||=(...t)=>(0,e.unref)(Pe)&&(0,e.unref)(Pe)(...t),onKeydown:r[5]||=(...t)=>(0,e.unref)(Fe)&&(0,e.unref)(Fe)(...t),onPaste:r[6]||=(...t)=>(0,e.unref)(Q)&&(0,e.unref)(Q)(...t),onFocus:Ie,onBlur:Le},null,40,b),(0,e.createElementVNode)(`div`,ee,[(0,e.createVNode)(e.Transition,{name:`fade-scale`},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(n.$slots,`actions-before`,{},void 0,!0)]),_:3}),(0,e.createVNode)(e.Transition,{name:`fade-scale`},{default:(0,e.withCtx)(()=>[ge.value?((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{key:0,type:`button`,class:(0,e.normalizeClass)([`pi-btn`,`pi-btn-copy`,{"is-copied":(0,e.unref)(K)}]),"aria-label":(0,e.unref)(ve),title:(0,e.unref)(ye),onClick:r[7]||=(...t)=>(0,e.unref)(be)&&(0,e.unref)(be)(...t)},[c[`copy-svg`]?(0,e.renderSlot)(n.$slots,`copy-svg`,{key:0,copied:(0,e.unref)(K)},void 0,!0):(0,e.unref)(K)?((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,C,[...r[12]||=[(0,e.createElementVNode)(`path`,{d:`M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z`,fill:`currentColor`},null,-1)]])):((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,S,[...r[11]||=[(0,e.createElementVNode)(`path`,{d:`M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z`,fill:`currentColor`},null,-1)]]))],10,x)):(0,e.createCommentVNode)(``,!0)]),_:3}),(0,e.createVNode)(e.Transition,{name:`fade-scale`},{default:(0,e.withCtx)(()=>[_e.value?((0,e.openBlock)(),(0,e.createElementBlock)(`button`,{key:0,type:`button`,class:`pi-btn pi-btn-clear`,"aria-label":t.clearButtonLabel,title:t.clearButtonLabel,onClick:ze},[c[`clear-svg`]?(0,e.renderSlot)(n.$slots,`clear-svg`,{key:1},void 0,!0):((0,e.openBlock)(),(0,e.createElementBlock)(`svg`,w,[...r[13]||=[(0,e.createElementVNode)(`path`,{d:`M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z`,fill:`currentColor`},null,-1)]]))],8,te)):(0,e.createCommentVNode)(``,!0)]),_:3})])]),((0,e.openBlock)(),(0,e.createBlock)(e.Teleport,{to:`body`},[Me.value?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,id:fe,ref_key:`dropdownRef`,ref:V,class:(0,e.normalizeClass)([`phone-dropdown`,[{"is-open":(0,e.unref)(J)},t.dropdownClass,(0,e.unref)($)]]),role:`dialog`,"aria-modal":`false`,"aria-label":`Country`},[(0,e.unref)(J)?((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:0},[(0,e.createElementVNode)(`div`,T,[(0,e.createElementVNode)(`input`,{ref_key:`searchRef`,ref:H,name:`search`,type:`search`,class:`pi-search`,"aria-label":`Search`,"aria-controls":pe,"aria-activedescendant":je.value,placeholder:t.searchPlaceholder,value:(0,e.unref)(xe),onKeydown:r[8]||=(...t)=>(0,e.unref)(Oe)&&(0,e.unref)(Oe)(...t),onInput:r[9]||=(...t)=>(0,e.unref)(De)&&(0,e.unref)(De)(...t)},null,40,ne)]),(0,e.createElementVNode)(`ul`,{id:pe,class:`pi-options`,role:`listbox`,tabindex:`-1`},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)((0,e.unref)(X),(t,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`li`,{id:me(r),key:t.id,role:`option`,class:(0,e.normalizeClass)([`pi-option`,{"is-focused":r===(0,e.unref)(Y),"is-selected":t.id===(0,e.unref)(D).id}]),"aria-selected":t.id===(0,e.unref)(D).id,title:t.name,onClick:n=>(0,e.unref)(Te)(t.id),onMouseenter:t=>(0,e.unref)(Ee)(r)},[(0,e.createElementVNode)(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${t.name} flag`},[(0,e.renderSlot)(n.$slots,`flag`,{country:t},()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.flag),1)],!0)],8,ie),(0,e.createElementVNode)(`span`,ae,(0,e.toDisplayString)(t.name),1),(0,e.createElementVNode)(`span`,oe,(0,e.toDisplayString)(t.code),1)],42,re))),128)),(0,e.unref)(X).length===0?((0,e.openBlock)(),(0,e.createElementBlock)(`li`,se,(0,e.toDisplayString)(t.noResultsText),1)):(0,e.createCommentVNode)(``,!0)])],64)):(0,e.createCommentVNode)(``,!0)],2)):(0,e.createCommentVNode)(``,!0)])),(0,e.createElementVNode)(`div`,{ref_key:`liveRef`,ref:B,class:`sr-only`,role:`status`,"aria-live":`polite`,"aria-atomic":`true`},null,512)],6))}}),[[`__scopeId`,`data-v-44386135`]]);function D(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function O(e,t,n){if(t.digits=n,e.value=t.formatter.formatDisplay(t.digits),t.options.onChange){let n=e.value?`${t.country.code} ${e.value}`:``,r=t.digits?`${t.country.code}${t.digits}`:``;t.options.onChange({full:r,fullFormatted:n,digits:t.digits})}}function k(e,n){let r=n.formatter.getMaxDigits(),i=(0,t.extractDigits)(e.value,r),a=n.formatter.formatDisplay(i);(i!==n.digits||e.value!==a)&&O(e,n,i)}function A(e,n){let r=n.country.id,i=(0,t.parseCountryCode)(n.options.country);i&&i!==r&&M(e,n,i)}function j(n,r,i){return a=>{let o=i(a,r);o&&(O(n,r,o.newDigits),(0,e.nextTick)(()=>{(0,t.setCaret)(n,r.formatter.getCaretPosition(o.caretDigitIndex))}))}}async function ce(e){let n=(0,t.parseCountryCode)(e.country);if(n)return n;if(e.detect){let e=(0,t.parseCountryCode)(await(0,t.detectByGeoIp)());if(e)return e;let n=(0,t.parseCountryCode)((0,t.detectCountryFromLocale)());if(n)return n}return`US`}function M(e,n,r){let i=(0,t.parseCountryCode)(r);if(!i)return;let a=(0,t.getCountry)(i,n.locale);n.country=a,n.options.onCountryChange?.(a),n.formatter=(0,t.createPhoneFormatter)(a),e.placeholder=n.formatter.getPlaceholder(),k(e,n)}var N={mounted(e,n){if(e.tagName!==`INPUT`){console.warn(`[v-phone-mask] Directive can only be used on input elements`);return}e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.setAttribute(`placeholder`,``);let r=D(n.value),i=r.locale||(0,t.getNavigatorLang)(),a=(0,t.getCountry)((0,t.parseCountryCode)(r.country,`US`),i),o={country:a,formatter:(0,t.createPhoneFormatter)(a),digits:``,locale:i,options:r};e.__phoneMaskState=o,o.inputHandler=j(e,o,t.processInput),o.keydownHandler=j(e,o,t.processKeydown),o.pasteHandler=j(e,o,t.processPaste),o.beforeInputHandler=t.processBeforeInput,e.addEventListener(`beforeinput`,o.beforeInputHandler),e.addEventListener(`input`,o.inputHandler),e.addEventListener(`keydown`,o.keydownHandler),e.addEventListener(`paste`,o.pasteHandler),ce(r).then(t=>{e.__phoneMaskState===o&&M(e,o,t)})},updated(e,t){let n=e.__phoneMaskState;n&&(n.options=D(t.value),A(e,n),k(e,n))},unmounted(e){let t=e.__phoneMaskState;t&&(t.beforeInputHandler&&e.removeEventListener(`beforeinput`,t.beforeInputHandler),t.inputHandler&&e.removeEventListener(`input`,t.inputHandler),t.keydownHandler&&e.removeEventListener(`keydown`,t.keydownHandler),t.pasteHandler&&e.removeEventListener(`paste`,t.pasteHandler),delete e.__phoneMaskState)}};function P(t){let n=(0,e.shallowRef)(null),{country:a,setCountry:o}=r({country:t.country,locale:t.locale,detect:t.detect,onCountryChange:t.onCountryChange}),{digits:s,formatter:c,displayPlaceholder:u,displayValue:d,full:f,fullFormatted:p,isComplete:m,isEmpty:h,shouldShowWarn:g}=i({country:a,value:t.value,onChange:t.onChange,onPhoneChange:t.onPhoneChange}),{handleBeforeInput:_,handleInput:v,handleKeydown:y,handlePaste:b}=l({formatter:c,digits:s,onChange:t.onChange});return(0,e.onMounted)(()=>{let e=n.value;e&&(e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`))}),(0,e.watchEffect)(()=>{let e=n.value;e&&(e.value=d.value,e.setAttribute(`placeholder`,u.value))},{flush:`post`}),(0,e.onMounted)(()=>{let e=n.value;e&&(e.addEventListener(`beforeinput`,_),e.addEventListener(`input`,v),e.addEventListener(`keydown`,y),e.addEventListener(`paste`,b))}),(0,e.onUnmounted)(()=>{let e=n.value;e&&(e.removeEventListener(`beforeinput`,_),e.removeEventListener(`input`,v),e.removeEventListener(`keydown`,y),e.removeEventListener(`paste`,b))}),{inputRef:n,digits:s,formatter:c,full:f,fullFormatted:p,isComplete:m,isEmpty:h,shouldShowWarn:g,country:a,setCountry:o,clear:()=>{t.onChange(``)}}}function F(e){e.component(`PhoneInput`,E),e.directive(`phone-mask`,N)}var I={install:F};exports.PhoneInput=E,exports.default=I,exports.install=F,exports.usePhoneMask=P,exports.vPhoneMask=N,exports.vPhoneMaskSetCountry=M;
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Fragment as e,Teleport as t,Transition as n,computed as r,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createTextVNode as c,createVNode as l,defineComponent as u,getCurrentInstance as d,mergeModels as f,nextTick as p,normalizeClass as m,normalizeStyle as h,onBeforeMount as g,onBeforeUnmount as _,onMounted as v,onUnmounted as y,openBlock as b,ref as x,renderList as S,renderSlot as C,shallowRef as w,toDisplayString as T,toValue as E,unref as D,useModel as ee,useSlots as te,useTemplateRef as O,watch as ne,watchEffect as k,withCtx as A}from"vue";import{MasksFull as re,createPhoneFormatter as j,detectByGeoIp as M,detectCountryFromLocale as ie,extractDigits as ae,filterCountries as oe,getCountry as N,getNavigatorLang as P,parseCountryCode as F,processBeforeInput as I,processInput as L,processKeydown as se,processPaste as R,setCaret as z}from"@desource/phone-mask";function ce({country:e,locale:t,detect:n,onCountryChange:i}={}){let a=r(()=>E(t)||P()),o=x(F(E(e),`US`)),s=r(()=>N(o.value,a.value)),c=e=>{let t=F(e);return t?(o.value=t,!0):!1},l=async()=>{c(await M())||c(ie())};return k(()=>{let t=E(e);t&&t!==o.value&&c(t)}),k(()=>{E(n)&&!E(e)&&l()}),k(()=>{i?.(s.value)}),{country:s,setCountry:c,locale:a}}function le({country:e,value:t,onChange:n,onPhoneChange:i,onValidationChange:a}){let o=r(()=>j(E(e))),s=r(()=>o.value.getMaxDigits()),c=r(()=>ae(E(t),s.value)),l=r(()=>o.value.getPlaceholder()),u=r(()=>o.value.formatDisplay(c.value)),d=r(()=>c.value?`${E(e).code}${c.value}`:``),f=r(()=>u.value?`${E(e).code} ${u.value}`:``),p=r(()=>o.value.isComplete(c.value)),m=r(()=>c.value.length===0),h=r(()=>!m.value&&!p.value),g=r(()=>({full:d.value,fullFormatted:f.value,digits:c.value}));return k(()=>{E(t)!==c.value&&n(c.value)}),k(()=>{i?.(g.value)}),k(()=>{a?.(p.value)}),{digits:c,formatter:o,displayPlaceholder:l,displayValue:u,full:d,fullFormatted:f,isComplete:p,isEmpty:m,shouldShowWarn:h}}function B(){let e=null,t=()=>{e&&=(clearTimeout(e),null)};return y(t),{set:(n,r)=>{t(),e=setTimeout(n,r)},clear:t}}function ue(){let e=x(!1),t=B();return{showValidationHint:e,clearValidationHint:(n=!0)=>{n&&(e.value=!1),t.clear()},scheduleValidationHint:n=>{e.value=!1,t.set(()=>{e.value=!0},n)}}}var de=500,V=300;function fe(e){let{formatter:t,digits:n,inactive:r,onChange:i,scheduleValidationHint:a}=e,o=(e,n)=>{p(()=>{e&&z(e,E(t).getCaretPosition(n))})};return{handleBeforeInput:e=>{I(e)},handleInput:e=>{if(E(r))return;let n=L(e,{formatter:E(t)});n&&(i?.(n.newDigits),o(e.target,n.caretDigitIndex),a?.(de))},handleKeydown:e=>{if(E(r))return;let s=se(e,{digits:E(n),formatter:E(t)});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(V))},handlePaste:e=>{if(E(r))return;let s=R(e,{digits:E(n),formatter:E(t)});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(V))}}}function pe({rootRef:e,dropdownRef:t,searchRef:n,selectorRef:i,locale:a,countryOption:o,inactive:s,onSelectCountry:c,onAfterSelect:l}){let u=x(``),d=x(!1),f=w({}),m=x(0),h=r(()=>re(E(a))),g=r(()=>oe(h.value,u.value)),v=r(()=>!E(o)&&h.value.length>1),y=e=>{m.value=e},b=()=>{p(()=>n.value?.focus({preventScroll:!0}))},S=()=>{d.value=!1},C=()=>{d.value=!0,y(0),b()},T=()=>{E(s)||!v.value||(d.value?S():C())},D=e=>{c(e),S(),u.value=``,y(0),l?.()},ee=e=>{u.value=e.target.value,y(0)},te=e=>{let n=e.target,r=t.value,a=i.value;n&&(r?.contains(n)||a?.contains(n)||S())},O=n=>{if(n?.type===`scroll`&&n.target&&t.value?.contains(n.target)||!e.value)return;let r=e.value.getBoundingClientRect();f.value={top:`${r.bottom+globalThis.scrollY+8}px`,left:`${r.left+globalThis.scrollX}px`,width:`${r.width}px`}},k=()=>{p(()=>{let e=t.value?.lastElementChild,n=e?.children[m.value];if(!e||!n)return;let r=e.getBoundingClientRect(),i=n.getBoundingClientRect(),a=0;if(i.top<r.top)a=e.scrollTop-(r.top-i.top);else if(i.bottom>r.bottom)a=e.scrollTop+(i.bottom-r.bottom);else return;e.scrollTo({top:a,behavior:`smooth`})})},A=e=>{e.key===`ArrowDown`?(e.preventDefault(),y(Math.min(m.value+1,g.value.length-1)),k()):e.key===`ArrowUp`?(e.preventDefault(),y(Math.max(m.value-1,0)),k()):e.key===`Enter`&&g.value[m.value]?(e.preventDefault(),D(g.value[m.value].id)):e.key===`Escape`&&S()},j=()=>{globalThis.removeEventListener(`resize`,O),globalThis.removeEventListener(`scroll`,O,!0),globalThis.removeEventListener(`click`,te,!0)};return ne(v,e=>{!e&&d.value&&S()}),ne(d,e=>{if(!e){j();return}O(),globalThis.addEventListener(`resize`,O),globalThis.addEventListener(`scroll`,O,!0),globalThis.addEventListener(`click`,te,!0)}),_(j),{dropdownOpen:d,search:u,focusedIndex:m,dropdownStyle:f,filteredCountries:g,hasDropdown:v,openDropdown:C,closeDropdown:S,toggleDropdown:T,selectCountry:D,setFocusedIndex:y,handleSearchChange:ee,handleSearchKeydown:A}}function me(e=1800){let t=x(!1),n=x(!1),r=B();return{copied:t,isCopying:n,copy:async i=>{if(n.value)return!1;let a=i.trim();if(!a)return!1;n.value=!0;try{return await navigator.clipboard.writeText(a),t.value=!0,r.set(()=>{t.value=!1},e),!0}catch(e){return console.warn(`Copy failed`,e),!1}finally{n.value=!1}}}}var H=1800;function he({liveRef:e,fullFormatted:t,onCopy:n}){let i=B(),{copied:a,copy:o}=me(H),s=r(()=>a.value?`Copied`:`Copy ${t.value}`),c=r(()=>a.value?`Copied`:`Copy phone number`),l=t=>{e?.value&&(e.value.textContent=t,i.set(()=>{e.value&&(e.value.textContent=``)},H))};return{copied:a,copyAriaLabel:s,copyButtonTitle:c,onCopyClick:async()=>{let e=t.value.trim();await o(e)&&(n?.(e),l(`Phone number copied to clipboard`))}}}function ge({theme:e}){let t=x(!1),n=r(()=>{let n=E(e);return n===`auto`?t.value?`theme-dark`:`theme-light`:`theme-${n}`}),i=null,a=e=>{t.value=e.matches};return g(()=>{i=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null,i&&(t.value=i.matches,i.addEventListener(`change`,a))}),_(()=>{i?.removeEventListener(`change`,a)}),{themeClass:n}}var _e=[`disabled`,`tabindex`,`aria-label`,`aria-expanded`,`aria-haspopup`],ve=[`aria-label`],ye={class:`pi-code`},be={class:`pi-input-wrap`},xe=[`id`,`name`,`placeholder`,`value`,`disabled`,`readonly`,`aria-invalid`],Se={class:`pi-actions`,role:`toolbar`,"aria-label":`Phone input actions`},Ce=[`aria-label`,`title`],we={key:1,width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},Te={key:2,width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},Ee=[`aria-label`,`title`],De={key:0,width:`11`,height:`11`,viewBox:`0 0 14 14`,fill:`none`,"aria-hidden":`true`},Oe={class:`pi-search-wrap`},ke=[`value`,`aria-activedescendant`,`placeholder`],Ae=[`id`,`aria-selected`,`title`,`onClick`,`onMouseenter`],je=[`aria-label`],Me={class:`pi-opt-name`},Ne={class:`pi-opt-code`},Pe={key:0,class:`pi-empty`},U=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})(u({__name:`PhoneInput`,props:f({id:{},name:{},country:{},detect:{type:Boolean,default:!0},locale:{},size:{default:`normal`},theme:{default:`auto`},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},showCopy:{type:Boolean,default:!0},showClear:{type:Boolean,default:!1},withValidity:{type:Boolean,default:!0},searchPlaceholder:{default:`Search country or code...`},noResultsText:{default:`No countries found`},clearButtonLabel:{default:`Clear phone number`},dropdownClass:{},disableDefaultStyles:{type:Boolean,default:!1}},{modelValue:{default:``},modelModifiers:{}}),emits:f([`change`,`country-change`,`validation-change`,`focus`,`blur`,`copy`,`clear`],[`update:modelValue`]),setup(u,{expose:f,emit:g}){let _=u,v=te(),y=g,x=ee(u,`modelValue`),w=e=>{x.value=e},{country:E,setCountry:ne,locale:k}=ce({country:()=>_.country,locale:()=>_.locale,detect:()=>_.detect,onCountryChange:e=>y(`country-change`,e)}),{digits:re,formatter:j,displayPlaceholder:M,displayValue:ie,full:ae,fullFormatted:oe,isComplete:N,isEmpty:P,shouldShowWarn:F}=le({country:E,value:x,onChange:w,onPhoneChange:e=>y(`change`,e),onValidationChange:e=>y(`validation-change`,e)}),{showValidationHint:I,clearValidationHint:L,scheduleValidationHint:se}=ue(),R=O(`rootRef`),z=O(`telRef`),B=O(`liveRef`),de=O(`dropdownRef`),V=O(`searchRef`),me=O(`selectorRef`),H=d()?.uid??0,U=`pi-options-${H}`,W=e=>`pi-option-${H}-${e}`,G=r(()=>_.disabled||_.readonly),K=r(()=>I.value&&F.value),Fe=r(()=>_.showCopy&&!P.value&&!_.disabled),q=r(()=>_.showClear&&!P.value&&!G.value),{copied:J,copyAriaLabel:Y,copyButtonTitle:Ie,onCopyClick:Le}=he({liveRef:B,fullFormatted:oe,onCopy:e=>y(`copy`,e)}),X=()=>p(()=>z.value?.focus()),{dropdownOpen:Z,search:Re,focusedIndex:Q,dropdownStyle:ze,filteredCountries:Be,hasDropdown:$,closeDropdown:Ve,toggleDropdown:He,selectCountry:Ue,setFocusedIndex:We,handleSearchChange:Ge,handleSearchKeydown:Ke}=pe({rootRef:R,dropdownRef:de,searchRef:V,selectorRef:me,locale:k,countryOption:()=>_.country,inactive:G,onSelectCountry:ne,onAfterSelect:X}),qe=r(()=>Z.value&&Be.value[Q.value]?W(Q.value):void 0),{handleBeforeInput:Je,handleInput:Ye,handleKeydown:Xe,handlePaste:Ze}=fe({formatter:j,digits:re,inactive:G,onChange:w,scheduleValidationHint:se}),Qe=e=>{L(!1),Ve(),y(`focus`,e)},$e=e=>y(`blur`,e),et=()=>{w(``),L(),y(`clear`)},tt=()=>{et(),X()};f({focus:X,blur:()=>z.value?.blur(),clear:et,selectCountry:Ue,getFullNumber:()=>ae.value,getFullFormattedNumber:()=>oe.value,getDigits:()=>re.value,isValid:()=>N.value,isComplete:()=>N.value});let{themeClass:nt}=ge({theme:()=>_.theme}),rt=r(()=>[`phone-input`,`size-${_.size}`,nt.value,{"is-disabled":_.disabled,"is-readonly":_.readonly,"is-unstyled":_.disableDefaultStyles,"is-incomplete":_.withValidity&&K.value,"is-complete":_.withValidity&&N.value}]),it=r(()=>({"--pi-actions-count":+Fe.value+ +q.value+(v[`actions-before`]?1:0)}));return(r,d)=>(b(),o(`div`,{ref_key:`rootRef`,ref:R,"aria-label":`Phone input with country selector`,role:`group`,class:m(rt.value),style:h(it.value)},[s(`div`,{ref_key:`selectorRef`,ref:me,class:`pi-selector`},[s(`button`,{type:`button`,class:m([`pi-selector-btn`,{"no-dropdown":!D($)||u.readonly}]),disabled:u.disabled,tabindex:G.value||!D($)?-1:void 0,"aria-label":`Selected country: ${D(E).name}`,"aria-expanded":D(Z),"aria-haspopup":D($)?`listbox`:void 0,onClick:d[0]||=(...e)=>D(He)&&D(He)(...e)},[s(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${D(E).name} flag`},[C(r.$slots,`flag`,{country:D(E)},()=>[c(T(D(E).flag),1)],!0)],8,ve),s(`span`,ye,T(D(E).code),1),!G.value&&D($)?(b(),o(`svg`,{key:0,class:m([`pi-chevron`,{"is-open":D(Z)}]),width:`12`,height:`12`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`},[...d[8]||=[s(`path`,{d:`M2.5 4.5L6 8L9.5 4.5`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`,"stroke-linejoin":`round`},null,-1)]],2)):a(``,!0)],10,_e)],512),s(`div`,be,[s(`input`,{id:u.id,ref_key:`telRef`,ref:z,type:`tel`,inputmode:`tel`,autocomplete:`tel-national`,autocorrect:`off`,autocapitalize:`off`,spellcheck:`false`,class:`pi-input`,name:u.name,placeholder:D(M),value:D(ie),disabled:u.disabled,readonly:u.readonly,"aria-invalid":K.value,onBeforeinput:d[1]||=(...e)=>D(Je)&&D(Je)(...e),onInput:d[2]||=(...e)=>D(Ye)&&D(Ye)(...e),onKeydown:d[3]||=(...e)=>D(Xe)&&D(Xe)(...e),onPaste:d[4]||=(...e)=>D(Ze)&&D(Ze)(...e),onFocus:Qe,onBlur:$e},null,40,xe),s(`div`,Se,[l(n,{name:`fade-scale`},{default:A(()=>[C(r.$slots,`actions-before`,{},void 0,!0)]),_:3}),l(n,{name:`fade-scale`},{default:A(()=>[Fe.value?(b(),o(`button`,{key:0,type:`button`,class:m([`pi-btn`,`pi-btn-copy`,{"is-copied":D(J)}]),"aria-label":D(Y),title:D(Ie),onClick:d[5]||=(...e)=>D(Le)&&D(Le)(...e)},[v[`copy-svg`]?C(r.$slots,`copy-svg`,{key:0,copied:D(J)},void 0,!0):D(J)?(b(),o(`svg`,Te,[...d[10]||=[s(`path`,{d:`M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z`,fill:`currentColor`},null,-1)]])):(b(),o(`svg`,we,[...d[9]||=[s(`path`,{d:`M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z`,fill:`currentColor`},null,-1)]]))],10,Ce)):a(``,!0)]),_:3}),l(n,{name:`fade-scale`},{default:A(()=>[q.value?(b(),o(`button`,{key:0,type:`button`,class:`pi-btn pi-btn-clear`,"aria-label":u.clearButtonLabel,title:u.clearButtonLabel,onClick:tt},[v[`clear-svg`]?C(r.$slots,`clear-svg`,{key:1},void 0,!0):(b(),o(`svg`,De,[...d[11]||=[s(`path`,{d:`M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z`,fill:`currentColor`},null,-1)]]))],8,Ee)):a(``,!0)]),_:3})])]),(b(),i(t,{to:`body`},[l(n,{name:`dropdown`},{default:A(()=>[D(Z)?(b(),o(`div`,{key:0,ref_key:`dropdownRef`,ref:de,class:m([`phone-dropdown`,[u.dropdownClass,D(nt)]]),role:`dialog`,"aria-modal":`false`,"aria-label":`Select country`,style:h(D(ze))},[s(`div`,Oe,[s(`input`,{ref_key:`searchRef`,ref:V,value:D(Re),type:`search`,class:`pi-search`,"aria-label":`Search countries`,"aria-controls":U,"aria-activedescendant":qe.value,placeholder:u.searchPlaceholder,onKeydown:d[6]||=(...e)=>D(Ke)&&D(Ke)(...e),onInput:d[7]||=(...e)=>D(Ge)&&D(Ge)(...e)},null,40,ke)]),s(`ul`,{id:U,class:`pi-options`,role:`listbox`,tabindex:`-1`},[(b(!0),o(e,null,S(D(Be),(e,t)=>(b(),o(`li`,{id:W(t),key:e.id,role:`option`,class:m([`pi-option`,{"is-focused":t===D(Q),"is-selected":e.id===D(E).id}]),"aria-selected":e.id===D(E).id,title:e.name,onClick:t=>D(Ue)(e.id),onMouseenter:e=>D(We)(t)},[s(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${e.name} flag`},[C(r.$slots,`flag`,{country:e},()=>[c(T(e.flag),1)],!0)],8,je),s(`span`,Me,T(e.name),1),s(`span`,Ne,T(e.code),1)],42,Ae))),128)),D(Be).length===0?(b(),o(`li`,Pe,T(u.noResultsText),1)):a(``,!0)])],6)):a(``,!0)]),_:3})])),s(`div`,{ref_key:`liveRef`,ref:B,class:`sr-only`,role:`status`,"aria-live":`polite`,"aria-atomic":`true`},null,512)],6))}}),[[`__scopeId`,`data-v-4b4c49b3`]]);function W(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function G(e,t,n){if(t.digits=n,e.value=t.formatter.formatDisplay(t.digits),t.options.onChange){let n=e.value?`${t.country.code} ${e.value}`:``,r=t.digits?`${t.country.code}${t.digits}`:``;t.options.onChange({full:r,fullFormatted:n,digits:t.digits})}}function K(e,t){let n=t.formatter.getMaxDigits(),r=ae(e.value,n),i=t.formatter.formatDisplay(r);(r!==t.digits||e.value!==i)&&G(e,t,r)}function Fe(e,t){let n=t.country.id,r=F(t.options.country);r&&r!==n&&Y(e,t,r)}function q(e,t,n){return r=>{let i=n(r,t);i&&(G(e,t,i.newDigits),p(()=>{z(e,t.formatter.getCaretPosition(i.caretDigitIndex))}))}}async function J(e){let t=F(e.country);if(t)return t;if(e.detect){let e=F(await M());if(e)return e;let t=F(ie());if(t)return t}return`US`}function Y(e,t,n){let r=F(n);if(!r)return;let i=N(r,t.locale);t.country=i,t.options.onCountryChange?.(i),t.formatter=j(i),e.placeholder=t.formatter.getPlaceholder(),K(e,t)}var Ie={mounted(e,t){if(e.tagName!==`INPUT`){console.warn(`[v-phone-mask] Directive can only be used on input elements`);return}e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.setAttribute(`placeholder`,``);let n=W(t.value),r=n.locale||P(),i=N(F(n.country,`US`),r),a={country:i,formatter:j(i),digits:``,locale:r,options:n};e.__phoneMaskState=a,a.inputHandler=q(e,a,L),a.keydownHandler=q(e,a,se),a.pasteHandler=q(e,a,R),a.beforeInputHandler=I,e.addEventListener(`beforeinput`,a.beforeInputHandler),e.addEventListener(`input`,a.inputHandler),e.addEventListener(`keydown`,a.keydownHandler),e.addEventListener(`paste`,a.pasteHandler),J(n).then(t=>{e.__phoneMaskState===a&&Y(e,a,t)})},updated(e,t){let n=e.__phoneMaskState;n&&(n.options=W(t.value),Fe(e,n),K(e,n))},unmounted(e){let t=e.__phoneMaskState;t&&(t.beforeInputHandler&&e.removeEventListener(`beforeinput`,t.beforeInputHandler),t.inputHandler&&e.removeEventListener(`input`,t.inputHandler),t.keydownHandler&&e.removeEventListener(`keydown`,t.keydownHandler),t.pasteHandler&&e.removeEventListener(`paste`,t.pasteHandler),delete e.__phoneMaskState)}};function Le(e){let t=w(null),{country:n,setCountry:r}=ce({country:e.country,locale:e.locale,detect:e.detect,onCountryChange:e.onCountryChange}),{digits:i,formatter:a,displayPlaceholder:o,displayValue:s,full:c,fullFormatted:l,isComplete:u,isEmpty:d,shouldShowWarn:f}=le({country:n,value:e.value,onChange:e.onChange,onPhoneChange:e.onPhoneChange}),{handleBeforeInput:p,handleInput:m,handleKeydown:h,handlePaste:g}=fe({formatter:a,digits:i,onChange:e.onChange});return v(()=>{let e=t.value;e&&(e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`))}),k(()=>{let e=t.value;e&&(e.value=s.value,e.setAttribute(`placeholder`,o.value))},{flush:`post`}),v(()=>{let e=t.value;e&&(e.addEventListener(`beforeinput`,p),e.addEventListener(`input`,m),e.addEventListener(`keydown`,h),e.addEventListener(`paste`,g))}),y(()=>{let e=t.value;e&&(e.removeEventListener(`beforeinput`,p),e.removeEventListener(`input`,m),e.removeEventListener(`keydown`,h),e.removeEventListener(`paste`,g))}),{inputRef:t,digits:i,formatter:a,full:c,fullFormatted:l,isComplete:u,isEmpty:d,shouldShowWarn:f,country:n,setCountry:r,clear:()=>{e.onChange(``)}}}function X(e){e.component(`PhoneInput`,U),e.directive(`phone-mask`,Ie)}var Z={install:X};export{U as PhoneInput,Z as default,X as install,Le as usePhoneMask,Ie as vPhoneMask,Y as vPhoneMaskSetCountry};
|
|
1
|
+
import{Fragment as e,Teleport as t,Transition as n,computed as r,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createTextVNode as c,createVNode as l,defineComponent as u,getCurrentInstance as d,mergeModels as f,nextTick as p,normalizeClass as m,normalizeStyle as h,onBeforeMount as g,onBeforeUnmount as _,onMounted as v,onUnmounted as y,openBlock as b,ref as x,renderList as S,renderSlot as C,shallowRef as w,toDisplayString as T,toValue as E,unref as D,useModel as ee,useSlots as te,useTemplateRef as O,watch as ne,watchEffect as k,withCtx as re}from"vue";import{bindCountryDropdownListeners as ie,createPhoneFormatter as A,detectByGeoIp as ae,detectCountryFromLocale as oe,extractDigits as j,filterCountries as se,getCountry as M,getNavigatorLang as N,handleCountryButtonKeydown as ce,handleCountrySearchKeydown as le,parseCountryCode as P,positionCountryDropdown as ue,processBeforeInput as F,processInput as I,processKeydown as L,processPaste as R,scrollCountryOptionIntoView as de,setCaret as z}from"@desource/phone-mask/kit";import{MasksFull as B}from"@desource/phone-mask";function fe({country:e,locale:t,detect:n,onCountryChange:i}={}){let a=r(()=>E(t)||N()),o=x(P(E(e),`US`)),s=r(()=>M(o.value,a.value)),c=e=>{let t=P(e);return t?(o.value=t,!0):!1},l=async()=>{c(await ae())||c(oe())};return k(()=>{let t=E(e);t&&t!==o.value&&c(t)}),k(()=>{E(n)&&!E(e)&&l()}),k(()=>{i?.(s.value)}),{country:s,setCountry:c,locale:a}}function pe({country:e,value:t,onChange:n,onPhoneChange:i,onValidationChange:a}){let o=r(()=>A(E(e))),s=r(()=>o.value.getMaxDigits()),c=r(()=>j(E(t),s.value)),l=r(()=>o.value.getPlaceholder()),u=r(()=>o.value.formatDisplay(c.value)),d=r(()=>c.value?`${E(e).code}${c.value}`:``),f=r(()=>u.value?`${E(e).code} ${u.value}`:``),p=r(()=>o.value.isComplete(c.value)),m=r(()=>c.value.length===0),h=r(()=>!m.value&&!p.value),g=r(()=>({full:d.value,fullFormatted:f.value,digits:c.value}));return k(()=>{E(t)!==c.value&&n(c.value)}),k(()=>{i?.(g.value)}),k(()=>{a?.(p.value)}),{digits:c,formatter:o,displayPlaceholder:l,displayValue:u,full:d,fullFormatted:f,isComplete:p,isEmpty:m,shouldShowWarn:h}}function V(){let e=null,t=()=>{e&&=(clearTimeout(e),null)};return y(t),{set:(n,r)=>{t(),e=setTimeout(n,r)},clear:t}}function me(){let e=x(!1),t=V();return{showValidationHint:e,clearValidationHint:(n=!0)=>{n&&(e.value=!1),t.clear()},scheduleValidationHint:n=>{e.value=!1,t.set(()=>{e.value=!0},n)}}}var he=500,H=300;function ge(e){let{formatter:t,digits:n,inactive:r,onChange:i,scheduleValidationHint:a}=e,o=(e,n)=>{p(()=>{e&&z(e,E(t).getCaretPosition(n))})};return{handleBeforeInput:e=>{F(e)},handleInput:e=>{if(E(r))return;let n=I(e,{formatter:E(t)});n&&(i?.(n.newDigits),o(e.target,n.caretDigitIndex),a?.(he))},handleKeydown:e=>{if(E(r))return;let s=L(e,{digits:E(n),formatter:E(t)});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(H))},handlePaste:e=>{if(E(r))return;let s=R(e,{digits:E(n),formatter:E(t)});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(H))}}}function _e({rootRef:e,dropdownRef:t,searchRef:n,selectorRef:i,locale:a,countryOption:o,inactive:s,onSelectCountry:c,onAfterSelect:l}){let u=x(``),d=x(!1),f=x(0),m=!1,h=r(()=>B(E(a))),g=r(()=>se(h.value,u.value)),_=r(()=>!E(o)&&h.value.length>1),v=e=>{f.value=typeof e==`function`?e(f.value):e},y=()=>{p(()=>n.value?.focus({preventScroll:!0}))},b=()=>{u.value=``,v(0),m=!1},S=()=>{ue(e.value,t.value)},C=()=>{d.value=!1,b()},w=()=>{if(E(s)||!_.value||d.value)return;let e=t.value,n=i.value;!e||!n||(S(),v(0),d.value=!0)},T=()=>{E(s)||!_.value||(d.value?C():w())},D=e=>{c(e),C(),l?.()},ee=e=>{u.value=e.target.value,v(0)},te=e=>{p(()=>de(t.value,e))};return ne([_,()=>E(s)],([e,t])=>{(t||!e)&&d.value&&C()}),ne(d,(e,n,r)=>{e&&(S(),m&&y(),r(ie(()=>t.value,()=>i.value,C,S)))}),{dropdownOpen:d,search:u,focusedIndex:f,filteredCountries:g,hasDropdown:_,openDropdown:w,closeDropdown:C,toggleDropdown:T,selectCountry:D,setFocusedIndex:v,handleSearchChange:ee,handleSearchKeydown:e=>{le(e,f.value,g.value,v,te,e=>D(e.id))},handleSelectorPointerDown:e=>{m=e.pointerType===`mouse`},handleSelectorKeydown:e=>{ce(e,d.value,()=>{m=!0},y,w)}}}function U(e=1800){let t=x(!1),n=x(!1),r=V();return{copied:t,isCopying:n,copy:async i=>{if(n.value)return!1;let a=i.trim();if(!a)return!1;n.value=!0;try{return await navigator.clipboard.writeText(a),t.value=!0,r.set(()=>{t.value=!1},e),!0}catch(e){return console.warn(`Copy failed`,e),!1}finally{n.value=!1}}}}var W=1800;function ve({liveRef:e,fullFormatted:t,onCopy:n}){let i=V(),{copied:a,copy:o}=U(W),s=r(()=>a.value?`Copied`:`Copy ${t.value}`),c=r(()=>a.value?`Copied`:`Copy phone number`),l=t=>{e?.value&&(e.value.textContent=t,i.set(()=>{e.value&&(e.value.textContent=``)},W))};return{copied:a,copyAriaLabel:s,copyButtonTitle:c,onCopyClick:async()=>{let e=t.value.trim();await o(e)&&(n?.(e),l(`Phone number copied to clipboard`))}}}function ye({theme:e}){let t=x(!1),n=r(()=>{let n=E(e);return n===`auto`?t.value?`theme-dark`:`theme-light`:`theme-${n}`}),i=null,a=e=>{t.value=e.matches};return g(()=>{i=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null,i&&(t.value=i.matches,i.addEventListener(`change`,a))}),_(()=>{i?.removeEventListener(`change`,a)}),{themeClass:n}}var be={class:`pi-selector`},xe=[`disabled`,`tabindex`,`aria-label`,`aria-expanded`,`aria-haspopup`,`aria-controls`],Se=[`aria-label`],Ce={class:`pi-code`},we={class:`pi-input-wrap`},Te=[`id`,`name`,`placeholder`,`value`,`disabled`,`readonly`,`aria-invalid`],Ee={class:`pi-actions`,role:`toolbar`,"aria-label":`Phone input actions`},De=[`aria-label`,`title`],Oe={key:1,width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},ke={key:2,width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},Ae=[`aria-label`,`title`],je={key:0,width:`11`,height:`11`,viewBox:`0 0 14 14`,fill:`none`,"aria-hidden":`true`},Me={class:`pi-search-wrap`},Ne=[`aria-activedescendant`,`placeholder`,`value`],Pe=[`id`,`aria-selected`,`title`,`onClick`,`onMouseenter`],Fe=[`aria-label`],Ie={class:`pi-opt-name`},Le={class:`pi-opt-code`},Re={key:0,class:`pi-empty`},G=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})(u({__name:`PhoneInput`,props:f({id:{},name:{},country:{},detect:{type:Boolean,default:!0},locale:{},size:{default:`normal`},theme:{default:`auto`},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},showCopy:{type:Boolean,default:!0},showClear:{type:Boolean,default:!1},withValidity:{type:Boolean,default:!0},searchPlaceholder:{default:`Search country or code...`},noResultsText:{default:`No countries found`},clearButtonLabel:{default:`Clear phone number`},dropdownClass:{},disableDefaultStyles:{type:Boolean,default:!1}},{modelValue:{default:``},modelModifiers:{}}),emits:f([`change`,`country-change`,`validation-change`,`focus`,`blur`,`copy`,`clear`],[`update:modelValue`]),setup(u,{expose:f,emit:g}){let _=u,v=te(),y=g,x=ee(u,`modelValue`),w=e=>{x.value=e},{country:E,setCountry:ne,locale:k}=fe({country:()=>_.country,locale:()=>_.locale,detect:()=>_.detect,onCountryChange:e=>y(`country-change`,e)}),{digits:ie,formatter:A,displayPlaceholder:ae,displayValue:oe,full:j,fullFormatted:se,isComplete:M,isEmpty:N,shouldShowWarn:ce}=pe({country:E,value:x,onChange:w,onPhoneChange:e=>y(`change`,e),onValidationChange:e=>y(`validation-change`,e)}),{showValidationHint:le,clearValidationHint:P,scheduleValidationHint:ue}=me(),F=O(`rootRef`),I=O(`telRef`),L=O(`liveRef`),R=O(`dropdownRef`),de=O(`searchRef`),z=O(`selectorRef`),B=d()?.uid??0,V=`pi-dropdown-${B}`,he=`pi-options-${B}`,H=e=>`pi-option-${B}-${e}`,U=r(()=>_.disabled||_.readonly),W=r(()=>le.value&&ce.value),G=r(()=>_.showCopy&&!N.value&&!_.disabled),K=r(()=>_.showClear&&!N.value&&!U.value),{copied:q,copyAriaLabel:ze,copyButtonTitle:Be,onCopyClick:J}=ve({liveRef:L,fullFormatted:se,onCopy:e=>y(`copy`,e)}),Y=()=>p(()=>I.value?.focus()),{dropdownOpen:X,search:Ve,focusedIndex:Z,filteredCountries:Q,hasDropdown:He,closeDropdown:Ue,toggleDropdown:We,selectCountry:Ge,setFocusedIndex:Ke,handleSearchChange:qe,handleSearchKeydown:Je,handleSelectorPointerDown:Ye,handleSelectorKeydown:Xe}=_e({rootRef:F,dropdownRef:R,searchRef:de,selectorRef:z,locale:k,countryOption:()=>_.country,inactive:U,onSelectCountry:ne,onAfterSelect:Y}),Ze=r(()=>X.value&&Q.value[Z.value]?H(Z.value):void 0),$=r(()=>He.value&&!U.value),Qe=r(()=>He.value&&(!U.value||X.value)),{handleBeforeInput:$e,handleInput:et,handleKeydown:tt,handlePaste:nt}=ge({formatter:A,digits:ie,inactive:U,onChange:w,scheduleValidationHint:ue}),rt=e=>{P(!1),Ue(),y(`focus`,e)},it=e=>y(`blur`,e),at=()=>{w(``),P(),y(`clear`)},ot=()=>{at(),Y()};f({focus:Y,blur:()=>I.value?.blur(),clear:at,selectCountry:Ge,getFullNumber:()=>j.value,getFullFormattedNumber:()=>se.value,getDigits:()=>ie.value,isValid:()=>M.value,isComplete:()=>M.value});let{themeClass:st}=ye({theme:()=>_.theme}),ct=r(()=>[`phone-input`,`size-${_.size}`,st.value,{"is-disabled":_.disabled,"is-readonly":_.readonly,"is-unstyled":_.disableDefaultStyles,"is-incomplete":_.withValidity&&W.value,"is-complete":_.withValidity&&M.value}]),lt=r(()=>({"--pi-actions-count":+G.value+ +K.value+ +!!v[`actions-before`]}));return(r,d)=>(b(),o(`div`,{ref_key:`rootRef`,ref:F,"aria-label":`Phone input`,role:`group`,class:m(ct.value),style:h(lt.value)},[s(`div`,be,[s(`button`,{ref_key:`selectorRef`,ref:z,type:`button`,class:m([`pi-selector-btn`,{"no-dropdown":!$.value}]),disabled:u.disabled,tabindex:$.value?void 0:-1,"aria-label":`Selected country: ${D(E).name}`,"aria-expanded":$.value&&D(X),"aria-haspopup":$.value?`dialog`:void 0,"aria-controls":$.value?V:void 0,onPointerdown:d[0]||=(...e)=>D(Ye)&&D(Ye)(...e),onKeydown:d[1]||=(...e)=>D(Xe)&&D(Xe)(...e),onClick:d[2]||=(...e)=>D(We)&&D(We)(...e)},[s(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${D(E).name} flag`},[C(r.$slots,`flag`,{country:D(E)},()=>[c(T(D(E).flag),1)],!0)],8,Se),s(`span`,Ce,T(D(E).code),1),$.value?(b(),o(`svg`,{key:0,class:m([`pi-chevron`,{"is-open":D(X)}]),width:`12`,height:`12`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`},[...d[10]||=[s(`path`,{d:`M2.5 4.5L6 8L9.5 4.5`,stroke:`currentColor`,"stroke-width":`1.5`,"stroke-linecap":`round`,"stroke-linejoin":`round`},null,-1)]],2)):a(``,!0)],42,xe)]),s(`div`,we,[s(`input`,{id:u.id,ref_key:`telRef`,ref:I,type:`tel`,inputmode:`tel`,autocomplete:`tel-national`,autocorrect:`off`,autocapitalize:`off`,spellcheck:`false`,class:`pi-input`,name:u.name,placeholder:D(ae),value:D(oe),disabled:u.disabled,readonly:u.readonly,"aria-invalid":W.value,onBeforeinput:d[3]||=(...e)=>D($e)&&D($e)(...e),onInput:d[4]||=(...e)=>D(et)&&D(et)(...e),onKeydown:d[5]||=(...e)=>D(tt)&&D(tt)(...e),onPaste:d[6]||=(...e)=>D(nt)&&D(nt)(...e),onFocus:rt,onBlur:it},null,40,Te),s(`div`,Ee,[l(n,{name:`fade-scale`},{default:re(()=>[C(r.$slots,`actions-before`,{},void 0,!0)]),_:3}),l(n,{name:`fade-scale`},{default:re(()=>[G.value?(b(),o(`button`,{key:0,type:`button`,class:m([`pi-btn`,`pi-btn-copy`,{"is-copied":D(q)}]),"aria-label":D(ze),title:D(Be),onClick:d[7]||=(...e)=>D(J)&&D(J)(...e)},[v[`copy-svg`]?C(r.$slots,`copy-svg`,{key:0,copied:D(q)},void 0,!0):D(q)?(b(),o(`svg`,ke,[...d[12]||=[s(`path`,{d:`M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z`,fill:`currentColor`},null,-1)]])):(b(),o(`svg`,Oe,[...d[11]||=[s(`path`,{d:`M13.5 5.5V13.5H5.5V5.5H13.5ZM13.5 4H5.5C4.67 4 4 4.67 4 5.5V13.5C4 14.33 4.67 15 5.5 15H13.5C14.33 15 15 14.33 15 13.5V5.5C15 4.67 14.33 4 13.5 4ZM10.5 1H2.5V11H4V2.5H10.5V1Z`,fill:`currentColor`},null,-1)]]))],10,De)):a(``,!0)]),_:3}),l(n,{name:`fade-scale`},{default:re(()=>[K.value?(b(),o(`button`,{key:0,type:`button`,class:`pi-btn pi-btn-clear`,"aria-label":u.clearButtonLabel,title:u.clearButtonLabel,onClick:ot},[v[`clear-svg`]?C(r.$slots,`clear-svg`,{key:1},void 0,!0):(b(),o(`svg`,je,[...d[13]||=[s(`path`,{d:`M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z`,fill:`currentColor`},null,-1)]]))],8,Ae)):a(``,!0)]),_:3})])]),(b(),i(t,{to:`body`},[Qe.value?(b(),o(`div`,{key:0,id:V,ref_key:`dropdownRef`,ref:R,class:m([`phone-dropdown`,[{"is-open":D(X)},u.dropdownClass,D(st)]]),role:`dialog`,"aria-modal":`false`,"aria-label":`Country`},[D(X)?(b(),o(e,{key:0},[s(`div`,Me,[s(`input`,{ref_key:`searchRef`,ref:de,name:`search`,type:`search`,class:`pi-search`,"aria-label":`Search`,"aria-controls":he,"aria-activedescendant":Ze.value,placeholder:u.searchPlaceholder,value:D(Ve),onKeydown:d[8]||=(...e)=>D(Je)&&D(Je)(...e),onInput:d[9]||=(...e)=>D(qe)&&D(qe)(...e)},null,40,Ne)]),s(`ul`,{id:he,class:`pi-options`,role:`listbox`,tabindex:`-1`},[(b(!0),o(e,null,S(D(Q),(e,t)=>(b(),o(`li`,{id:H(t),key:e.id,role:`option`,class:m([`pi-option`,{"is-focused":t===D(Z),"is-selected":e.id===D(E).id}]),"aria-selected":e.id===D(E).id,title:e.name,onClick:t=>D(Ge)(e.id),onMouseenter:e=>D(Ke)(t)},[s(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${e.name} flag`},[C(r.$slots,`flag`,{country:e},()=>[c(T(e.flag),1)],!0)],8,Fe),s(`span`,Ie,T(e.name),1),s(`span`,Le,T(e.code),1)],42,Pe))),128)),D(Q).length===0?(b(),o(`li`,Re,T(u.noResultsText),1)):a(``,!0)])],64)):a(``,!0)],2)):a(``,!0)])),s(`div`,{ref_key:`liveRef`,ref:L,class:`sr-only`,role:`status`,"aria-live":`polite`,"aria-atomic":`true`},null,512)],6))}}),[[`__scopeId`,`data-v-44386135`]]);function K(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function q(e,t,n){if(t.digits=n,e.value=t.formatter.formatDisplay(t.digits),t.options.onChange){let n=e.value?`${t.country.code} ${e.value}`:``,r=t.digits?`${t.country.code}${t.digits}`:``;t.options.onChange({full:r,fullFormatted:n,digits:t.digits})}}function ze(e,t){let n=t.formatter.getMaxDigits(),r=j(e.value,n),i=t.formatter.formatDisplay(r);(r!==t.digits||e.value!==i)&&q(e,t,r)}function Be(e,t){let n=t.country.id,r=P(t.options.country);r&&r!==n&&X(e,t,r)}function J(e,t,n){return r=>{let i=n(r,t);i&&(q(e,t,i.newDigits),p(()=>{z(e,t.formatter.getCaretPosition(i.caretDigitIndex))}))}}async function Y(e){let t=P(e.country);if(t)return t;if(e.detect){let e=P(await ae());if(e)return e;let t=P(oe());if(t)return t}return`US`}function X(e,t,n){let r=P(n);if(!r)return;let i=M(r,t.locale);t.country=i,t.options.onCountryChange?.(i),t.formatter=A(i),e.placeholder=t.formatter.getPlaceholder(),ze(e,t)}var Ve={mounted(e,t){if(e.tagName!==`INPUT`){console.warn(`[v-phone-mask] Directive can only be used on input elements`);return}e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`),e.setAttribute(`placeholder`,``);let n=K(t.value),r=n.locale||N(),i=M(P(n.country,`US`),r),a={country:i,formatter:A(i),digits:``,locale:r,options:n};e.__phoneMaskState=a,a.inputHandler=J(e,a,I),a.keydownHandler=J(e,a,L),a.pasteHandler=J(e,a,R),a.beforeInputHandler=F,e.addEventListener(`beforeinput`,a.beforeInputHandler),e.addEventListener(`input`,a.inputHandler),e.addEventListener(`keydown`,a.keydownHandler),e.addEventListener(`paste`,a.pasteHandler),Y(n).then(t=>{e.__phoneMaskState===a&&X(e,a,t)})},updated(e,t){let n=e.__phoneMaskState;n&&(n.options=K(t.value),Be(e,n),ze(e,n))},unmounted(e){let t=e.__phoneMaskState;t&&(t.beforeInputHandler&&e.removeEventListener(`beforeinput`,t.beforeInputHandler),t.inputHandler&&e.removeEventListener(`input`,t.inputHandler),t.keydownHandler&&e.removeEventListener(`keydown`,t.keydownHandler),t.pasteHandler&&e.removeEventListener(`paste`,t.pasteHandler),delete e.__phoneMaskState)}};function Z(e){let t=w(null),{country:n,setCountry:r}=fe({country:e.country,locale:e.locale,detect:e.detect,onCountryChange:e.onCountryChange}),{digits:i,formatter:a,displayPlaceholder:o,displayValue:s,full:c,fullFormatted:l,isComplete:u,isEmpty:d,shouldShowWarn:f}=pe({country:n,value:e.value,onChange:e.onChange,onPhoneChange:e.onPhoneChange}),{handleBeforeInput:p,handleInput:m,handleKeydown:h,handlePaste:g}=ge({formatter:a,digits:i,onChange:e.onChange});return v(()=>{let e=t.value;e&&(e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`))}),k(()=>{let e=t.value;e&&(e.value=s.value,e.setAttribute(`placeholder`,o.value))},{flush:`post`}),v(()=>{let e=t.value;e&&(e.addEventListener(`beforeinput`,p),e.addEventListener(`input`,m),e.addEventListener(`keydown`,h),e.addEventListener(`paste`,g))}),y(()=>{let e=t.value;e&&(e.removeEventListener(`beforeinput`,p),e.removeEventListener(`input`,m),e.removeEventListener(`keydown`,h),e.removeEventListener(`paste`,g))}),{inputRef:t,digits:i,formatter:a,full:c,fullFormatted:l,isComplete:u,isEmpty:d,shouldShowWarn:f,country:n,setCountry:r,clear:()=>{e.onChange(``)}}}function Q(e){e.component(`PhoneInput`,G),e.directive(`phone-mask`,Ve)}var He={install:Q};export{G as PhoneInput,He as default,Q as install,Z as usePhoneMask,Ve as vPhoneMask,X as vPhoneMaskSetCountry};
|
package/dist/phone-mask-vue.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.phone-input,.phone-dropdown{--pi-bg:#fff;--pi-fg:#111827;--pi-muted:#6b7280;--pi-border:#e5e7eb;--pi-border-hover:#d1d5db;--pi-border-focus:#3b82f6;--pi-radius:8px;--pi-padding:12px;--pi-font-size:16px;--pi-height:44px;--pi-actions-size:32px;--pi-shadow:0 1px 2px 0 #0000000d;--pi-shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--pi-warning:#f59e0b;--pi-warning-light:#fbbf24;--pi-success:#10b981;--pi-focus-ring:3px solid #3b82f626;--pi-focus-ring-warning:3px solid #f59e0b26;--pi-focus-ring-success:3px solid #10b98126;--pi-disabled-bg:#f9fafb;--pi-disabled-fg:#9ca3af}.phone-input.theme-dark,.phone-dropdown.theme-dark{--pi-bg:#1f2937;--pi-fg:#f9fafb;--pi-muted:#9ca3af;--pi-border:#374151;--pi-border-hover:#4b5563;--pi-border-focus:#60a5fa;--pi-shadow:0 1px 3px 0 #0000004d;--pi-shadow-lg:0 20px 25px -5px #0000004d, 0 10px 10px -5px #0003;--pi-warning:#fbbf24;--pi-warning-light:#fcd34d;--pi-focus-ring:3px solid #60a5fa33;--pi-focus-ring-warning:3px solid #fbbf1833;--pi-focus-ring-success:3px solid #10b98133;--pi-disabled-bg:#374151}.phone-input *,.phone-input :before,.phone-input :after,.phone-dropdown *,.phone-dropdown :before,.phone-dropdown :after{box-sizing:border-box}.phone-input button,.phone-input input,.phone-dropdown button,.phone-dropdown input{font:inherit;color:inherit;background:0 0;border:none;margin:0;padding:0}.phone-input button,.phone-dropdown button{cursor:pointer}.phone-input button:disabled,.phone-dropdown button:disabled{cursor:not-allowed}.phone-input input,.phone-dropdown input{outline:none}.phone-input input::placeholder,.phone-dropdown input::placeholder{opacity:.5}.phone-input input:disabled,.phone-dropdown input:disabled{cursor:not-allowed}.phone-input[data-v-
|
|
1
|
+
.phone-input,.phone-dropdown{--pi-bg:#fff;--pi-fg:#111827;--pi-muted:#6b7280;--pi-border:#e5e7eb;--pi-border-hover:#d1d5db;--pi-border-focus:#3b82f6;--pi-radius:8px;--pi-padding:12px;--pi-font-size:16px;--pi-height:44px;--pi-actions-size:32px;--pi-shadow:0 1px 2px 0 #0000000d;--pi-shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--pi-warning:#f59e0b;--pi-warning-light:#fbbf24;--pi-success:#10b981;--pi-focus-ring:3px solid #3b82f626;--pi-focus-ring-warning:3px solid #f59e0b26;--pi-focus-ring-success:3px solid #10b98126;--pi-disabled-bg:#f9fafb;--pi-disabled-fg:#9ca3af}.phone-input.theme-dark,.phone-dropdown.theme-dark{--pi-bg:#1f2937;--pi-fg:#f9fafb;--pi-muted:#9ca3af;--pi-border:#374151;--pi-border-hover:#4b5563;--pi-border-focus:#60a5fa;--pi-shadow:0 1px 3px 0 #0000004d;--pi-shadow-lg:0 20px 25px -5px #0000004d, 0 10px 10px -5px #0003;--pi-warning:#fbbf24;--pi-warning-light:#fcd34d;--pi-focus-ring:3px solid #60a5fa33;--pi-focus-ring-warning:3px solid #fbbf1833;--pi-focus-ring-success:3px solid #10b98133;--pi-disabled-bg:#374151}.phone-input *,.phone-input :before,.phone-input :after,.phone-dropdown *,.phone-dropdown :before,.phone-dropdown :after{box-sizing:border-box}.phone-input button,.phone-input input,.phone-dropdown button,.phone-dropdown input{font:inherit;color:inherit;background:0 0;border:none;margin:0;padding:0}.phone-input button,.phone-dropdown button{cursor:pointer}.phone-input button:disabled,.phone-dropdown button:disabled{cursor:not-allowed}.phone-input input,.phone-dropdown input{outline:none}.phone-input input::placeholder,.phone-dropdown input::placeholder{opacity:.5}.phone-input input:disabled,.phone-dropdown input:disabled{cursor:not-allowed}.phone-input[data-v-44386135],.phone-dropdown[data-v-44386135]{font-size:var(--pi-font-size);background:var(--pi-bg);color:var(--pi-fg);border-radius:var(--pi-radius);border:1px solid var(--pi-border)}.phone-input[data-v-44386135]{align-items:stretch;width:100%;display:flex;position:relative}.phone-input[data-v-44386135]:focus-within{outline:var(--pi-focus-ring)}.phone-input.is-incomplete[data-v-44386135]{border-color:var(--pi-warning)}.phone-input.is-incomplete[data-v-44386135]:focus-within{outline:var(--pi-focus-ring-warning)}.phone-input.is-complete[data-v-44386135]{border-color:var(--pi-success)}.phone-input.is-complete[data-v-44386135]:focus-within{outline:var(--pi-focus-ring-success)}.phone-input.is-disabled[data-v-44386135]{background:var(--pi-disabled-bg);color:var(--pi-disabled-fg)}.phone-input.is-readonly[data-v-44386135]{cursor:default}.phone-input.size-compact[data-v-44386135]{--pi-font-size:14px;--pi-height:36px;--pi-padding:10px;--pi-actions-size:24px}.phone-input.size-large[data-v-44386135]{--pi-font-size:18px;--pi-height:52px;--pi-padding:16px;--pi-actions-size:32px}.phone-input.is-unstyled[data-v-44386135]{all:initial;display:block}.pi-selector[data-v-44386135]{flex-shrink:0}.pi-selector-btn[data-v-44386135]{padding-left:var(--pi-padding);min-height:var(--pi-height);border-radius:var(--pi-radius) 0 0 var(--pi-radius);border:1px solid #0000;align-items:center;gap:6px;padding-right:0;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.pi-selector-btn.no-dropdown[data-v-44386135]{cursor:default}.pi-selector-btn[data-v-44386135]:focus-visible{border-color:var(--pi-border-focus);outline:none}.pi-selector-btn:disabled>.pi-flag[data-v-44386135]{opacity:.5}.pi-flag[data-v-44386135]{font-size:1.25em;line-height:1;display:inline-flex}.pi-chevron[data-v-44386135]{color:var(--pi-muted);margin-left:2px;transition:transform .2s}.pi-chevron.is-open[data-v-44386135]{transform:rotate(180deg)}.pi-input-wrap[data-v-44386135]{flex:1;align-items:center;display:flex;position:relative}.pi-input[data-v-44386135]{width:100%;padding-left:var(--pi-padding);padding-right:calc((var(--pi-actions-size) + 2px) * var(--pi-actions-count) + var(--pi-padding));min-height:var(--pi-height);border-radius:0 var(--pi-radius) var(--pi-radius) 0;flex:1;transition:all .15s cubic-bezier(.4,0,.2,1)}.pi-input[data-v-44386135]:hover:not(:disabled):not(:read-only){border-color:var(--pi-border-hover)}.pi-input[data-v-44386135]:focus{border-color:var(--pi-border-focus);position:relative}.pi-input[data-v-44386135]:-webkit-autofill{-webkit-text-fill-color:var(--pi-fg);caret-color:var(--pi-fg);-webkit-box-shadow:0 0 0 1000px var(--pi-bg) inset;box-shadow:0 0 0 1000px var(--pi-bg) inset;transition:background-color 9999s ease-out,color 9999s ease-out}.pi-input[data-v-44386135]:-webkit-autofill:hover{-webkit-text-fill-color:var(--pi-fg);caret-color:var(--pi-fg);-webkit-box-shadow:0 0 0 1000px var(--pi-bg) inset;box-shadow:0 0 0 1000px var(--pi-bg) inset;transition:background-color 9999s ease-out,color 9999s ease-out}.pi-input[data-v-44386135]:-webkit-autofill:focus{-webkit-text-fill-color:var(--pi-fg);caret-color:var(--pi-fg);-webkit-box-shadow:0 0 0 1000px var(--pi-bg) inset;box-shadow:0 0 0 1000px var(--pi-bg) inset;transition:background-color 9999s ease-out,color 9999s ease-out}.pi-input[data-v-44386135]:-webkit-autofill:active{-webkit-text-fill-color:var(--pi-fg);caret-color:var(--pi-fg);-webkit-box-shadow:0 0 0 1000px var(--pi-bg) inset;box-shadow:0 0 0 1000px var(--pi-bg) inset;transition:background-color 9999s ease-out,color 9999s ease-out}.pi-input[data-v-44386135]:-moz-autofill{-moz-text-fill-color:var(--pi-fg);box-shadow:0 0 0 1000px var(--pi-bg) inset}.pi-actions[data-v-44386135]{align-items:center;gap:2px;display:inline-flex;position:absolute;top:50%;right:2px;transform:translateY(-50%)}.pi-btn[data-v-44386135]{width:var(--pi-actions-size);height:var(--pi-actions-size);color:var(--pi-muted);background:0 0;border:none;border-radius:9999px;justify-content:center;align-items:center;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.pi-btn[data-v-44386135]:hover{background:var(--pi-disabled-bg);color:var(--pi-fg)}.pi-btn[data-v-44386135]:active:not(:disabled){transform:scale(.95)}.pi-btn[data-v-44386135]:focus{outline:1px solid var(--pi-border-focus);outline-offset:-1px}.pi-btn.is-copied[data-v-44386135]{color:var(--pi-success);border-color:var(--pi-success)}.pi-btn svg[data-v-44386135]{flex-shrink:0}.phone-dropdown[data-v-44386135]{top:var(--pi-dd-top,0);left:var(--pi-dd-left,0);width:var(--pi-dd-width,0);max-width:calc(100vw - 16px);box-shadow:var(--pi-shadow-lg);opacity:0;visibility:hidden;pointer-events:none;transform-origin:top;will-change:opacity, transform;z-index:1000;flex-direction:column;margin:0;transition:none;display:flex;position:fixed;overflow:hidden;transform:scale(.98)}.phone-dropdown.is-open[data-v-44386135]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .16s cubic-bezier(.4,0,.2,1),transform .16s cubic-bezier(.4,0,.2,1);transform:scale(1)}.phone-dropdown[data-placement=top][data-v-44386135]{transform-origin:bottom}.pi-search-wrap[data-v-44386135]{border-bottom:1px solid var(--pi-border);padding:8px}.pi-search[data-v-44386135]{border:1px solid var(--pi-border);border-radius:calc(var(--pi-radius) - 2px);background:var(--pi-bg);width:100%;padding:8px 12px;font-size:16px;transition:border-color .15s}.pi-search[data-v-44386135]:focus{border-color:var(--pi-border-focus)}.pi-options[data-v-44386135]{max-height:var(--pi-dd-max-height,300px);flex:auto;min-height:0;margin:0;padding:4px 0;list-style:none;overflow-y:auto}.pi-options[data-v-44386135]::-webkit-scrollbar{width:8px}.pi-options[data-v-44386135]::-webkit-scrollbar-track{background:0 0}.pi-options[data-v-44386135]::-webkit-scrollbar-thumb{background:var(--pi-border);border-radius:4px}.pi-options[data-v-44386135]::-webkit-scrollbar-thumb:hover{background:var(--pi-border-hover)}.pi-option[data-v-44386135]{cursor:pointer;align-items:center;gap:8px;padding:8px 12px;transition:background-color .1s;display:flex}.pi-option[data-v-44386135]:hover,.pi-option.is-focused[data-v-44386135]{background:var(--pi-disabled-bg)}.pi-option.is-selected[data-v-44386135]{background:var(--pi-border);font-weight:500}.pi-opt-name[data-v-44386135]{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.pi-opt-code[data-v-44386135]{color:var(--pi-muted);font-size:.875em}.pi-empty[data-v-44386135]{text-align:center;color:var(--pi-muted);padding:12px;font-size:.875em}.fade-enter-active[data-v-44386135],.fade-leave-active[data-v-44386135]{transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.fade-enter-from[data-v-44386135],.fade-leave-to[data-v-44386135]{opacity:0;transform:translateY(-50%)translate(8px)}.fade-scale-enter-active[data-v-44386135],.fade-scale-leave-active[data-v-44386135]{transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.fade-scale-enter-from[data-v-44386135],.fade-scale-leave-to[data-v-44386135]{opacity:0;transform:scale(.8)}.sr-only[data-v-44386135]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=480px){.phone-input[data-v-44386135]{--pi-padding:8px;--pi-actions-size:24px}.size-compact[data-v-44386135]{--pi-actions-size:20px}}@media (prefers-reduced-motion:reduce){[data-v-44386135]{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput.vue"],"names":[],"mappings":"AA+
|
|
1
|
+
{"version":3,"file":"PhoneInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput.vue"],"names":[],"mappings":"AA+0BA,OAAO,KAAK,EAAmB,iBAAiB,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAElH,KAAK,WAAW,GAAG,eAAe,CAAC;AAgBnC,KAAK,WAAW,GAAG,eAAe,CAAC;AAoKnC,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAmBF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA6bxD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type MaybeRefOrGetter, type ComputedRef } from 'vue';
|
|
2
|
-
import {
|
|
2
|
+
import type { MaskFull } from '@desource/phone-mask';
|
|
3
3
|
export interface UseCountryOptions {
|
|
4
4
|
/** Country ISO code (e.g., 'US', 'DE', 'GB') */
|
|
5
5
|
country?: MaybeRefOrGetter<string | undefined>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCountry.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useCountry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAE,MAAM,KAAK,CAAC;AACnG,OAAO,
|
|
1
|
+
{"version":3,"file":"useCountry.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useCountry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAE,MAAM,KAAK,CAAC;AACnG,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AASrD,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC/C,6DAA6D;IAC7D,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC9C,0DAA0D;IAC1D,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC/C,oCAAoC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,sCAAsC;IACtC,UAAU,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,CAAC;IACrD,4BAA4B;IAC5B,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,EACpB,MAAM,EACN,eAAe,EAChB,GAAE,iBAAsB,GAAG,gBAAgB,CAiD3C"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type MaybeRefOrGetter, type ShallowRef } from 'vue';
|
|
2
2
|
import { type CountryKey } from '@desource/phone-mask';
|
|
3
3
|
interface UseCountrySelectorOptions {
|
|
4
4
|
rootRef: ShallowRef<HTMLDivElement | null>;
|
|
5
5
|
dropdownRef: ShallowRef<HTMLDivElement | null>;
|
|
6
6
|
searchRef: ShallowRef<HTMLInputElement | null>;
|
|
7
|
-
selectorRef: ShallowRef<
|
|
7
|
+
selectorRef: ShallowRef<HTMLButtonElement | null>;
|
|
8
8
|
locale: MaybeRefOrGetter<string>;
|
|
9
9
|
onSelectCountry: (code: CountryKey) => void;
|
|
10
10
|
countryOption?: MaybeRefOrGetter<string | undefined>;
|
|
@@ -15,16 +15,17 @@ export declare function useCountrySelector({ rootRef, dropdownRef, searchRef, se
|
|
|
15
15
|
dropdownOpen: import("vue").Ref<boolean, boolean>;
|
|
16
16
|
search: import("vue").Ref<string, string>;
|
|
17
17
|
focusedIndex: import("vue").Ref<number, number>;
|
|
18
|
-
dropdownStyle: ShallowRef<CSSProperties, CSSProperties>;
|
|
19
18
|
filteredCountries: import("vue").ComputedRef<import("@desource/phone-mask").MaskFull[]>;
|
|
20
19
|
hasDropdown: import("vue").ComputedRef<boolean>;
|
|
21
20
|
openDropdown: () => void;
|
|
22
21
|
closeDropdown: () => void;
|
|
23
22
|
toggleDropdown: () => void;
|
|
24
23
|
selectCountry: (code: CountryKey) => void;
|
|
25
|
-
setFocusedIndex: (index: number) => void;
|
|
24
|
+
setFocusedIndex: (index: number | ((index: number) => number)) => void;
|
|
26
25
|
handleSearchChange: (e: Event) => void;
|
|
27
26
|
handleSearchKeydown: (e: KeyboardEvent) => void;
|
|
27
|
+
handleSelectorPointerDown: (e: PointerEvent) => void;
|
|
28
|
+
handleSelectorKeydown: (e: KeyboardEvent) => void;
|
|
28
29
|
};
|
|
29
30
|
export {};
|
|
30
31
|
//# sourceMappingURL=useCountrySelector.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCountrySelector.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useCountrySelector.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCountrySelector.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useCountrySelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,gBAAgB,EAAE,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AACtG,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAUlE,UAAU,yBAAyB;IACjC,OAAO,EAAE,UAAU,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C,WAAW,EAAE,UAAU,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC/C,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC/C,WAAW,EAAE,UAAU,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,WAAW,EACX,SAAS,EACT,WAAW,EACX,MAAM,EACN,aAAa,EACb,QAAQ,EACR,eAAe,EACf,aAAa,EACd,EAAE,yBAAyB;;;;;;;;;0BAsDG,UAAU;6BA5CP,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;4BAkDrC,KAAK;6BASJ,aAAa;mCAWP,YAAY;+BAIhB,aAAa;EAqDhD"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type MaybeRefOrGetter, type ComputedRef } from 'vue';
|
|
2
|
-
import {
|
|
2
|
+
import type { MaskFull } from '@desource/phone-mask';
|
|
3
|
+
import { type FormatterHelpers } from '@desource/phone-mask/kit';
|
|
3
4
|
import type { PhoneNumber } from '../../types';
|
|
4
5
|
/** Configuration options for the useFormatter composable */
|
|
5
6
|
export interface UseFormatterOptions {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormatter.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useFormatter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAE,MAAM,KAAK,CAAC;AAC9F,OAAO,
|
|
1
|
+
{"version":3,"file":"useFormatter.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useFormatter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,gBAAgB,EAAE,KAAK,WAAW,EAAE,MAAM,KAAK,CAAC;AAC9F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAuC,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACtG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,4DAA4D;AAC5D,MAAM,WAAW,mBAAmB;IAClC,gCAAgC;IAChC,OAAO,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC7C,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD;AAED,8CAA8C;AAC9C,MAAM,WAAW,kBAAkB;IACjC,oCAAoC;IACpC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,+BAA+B;IAC/B,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;IACzC,iCAAiC;IACjC,kBAAkB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACxC,+BAA+B;IAC/B,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,0CAA0C;IAC1C,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,kCAAkC;IAClC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,2CAA2C;IAC3C,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACjC,iCAAiC;IACjC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC9B,yCAAyC;IACzC,cAAc,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,aAAa,EACb,kBAAkB,EACnB,EAAE,mBAAmB,GAAG,kBAAkB,CAiD1C"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type MaybeRefOrGetter } from 'vue';
|
|
2
|
-
import { type FormatterHelpers } from '@desource/phone-mask';
|
|
2
|
+
import { type FormatterHelpers } from '@desource/phone-mask/kit';
|
|
3
3
|
export interface UseInputHandlersOptions {
|
|
4
4
|
formatter: MaybeRefOrGetter<FormatterHelpers>;
|
|
5
5
|
digits: MaybeRefOrGetter<string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInputHandlers.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useInputHandlers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAC/D,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,
|
|
1
|
+
{"version":3,"file":"useInputHandlers.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useInputHandlers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAC/D,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,WAAW,sBAAsB;IACrC,iBAAiB,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CAC1C;AAKD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,sBAAsB,CAsDzF"}
|
package/dist/types/core.d.ts
CHANGED
package/dist/types/core.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../src/core.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../src/core.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC"}
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { MaybeRefOrGetter, ShallowRef, ComputedRef } from 'vue';
|
|
2
|
-
import type { MaskFull, CountryKey
|
|
2
|
+
import type { MaskFull, CountryKey } from '@desource/phone-mask';
|
|
3
|
+
import type { FormatterHelpers } from '@desource/phone-mask/kit';
|
|
3
4
|
export type Size = 'compact' | 'normal' | 'large';
|
|
4
5
|
export type Theme = 'auto' | 'light' | 'dark';
|
|
5
6
|
export type PhoneNumber = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAClD,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,2DAA2D;IAC3D,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,gCAAgC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC/C,8DAA8D;IAC9D,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC9C,oCAAoC;IACpC,MAAM,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC/C,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,kCAAkC;IAClC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,kBAAkB;IACjC,kDAAkD;IAClD,QAAQ,EAAE,UAAU,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,+BAA+B;IAC/B,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;IACzC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACjC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC9B,cAAc,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,UAAU,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,CAAC;IACrD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iCAAiC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IACxC,uCAAuC;IACvC,CAAC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC/C,4CAA4C;IAC5C,CAAC,CAAC,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACjD,uBAAuB;IACvB,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACtC,sBAAsB;IACtB,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACrC,0CAA0C;IAC1C,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,oCAAoC;IACpC,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,yDAAyD;IACzD,gBAAgB,EAAE,EAAE,CAAC;IACrB,oEAAoE;IACpE,IAAI,EAAE;QAAE,OAAO,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC5B,mCAAmC;IACnC,UAAU,EAAE;QAAE,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC;IAChC,mCAAmC;IACnC,WAAW,EAAE,EAAE,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,sDAAsD;IACtD,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,qEAAqE;IACrE,aAAa,EAAE,MAAM,MAAM,CAAC;IAC5B,2FAA2F;IAC3F,sBAAsB,EAAE,MAAM,MAAM,CAAC;IACrC,oFAAoF;IACpF,SAAS,EAAE,MAAM,MAAM,CAAC;IACxB,iDAAiD;IACjD,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,oDAAoD;IACpD,UAAU,EAAE,MAAM,OAAO,CAAC;CAC3B;AAED,yDAAyD;AACzD,MAAM,WAAW,qBAAqB;IACpC,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,oCAAoC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC/C;AAED,kEAAkE;AAClE,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,qBAAqB,CAAC;IAC/B,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAED,qDAAqD;AACrD,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB;IACjE,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desource/phone-mask-vue",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "π Vue 3 component, composable, and directive for international phone number masking. Powered by @desource/phone-mask with Google libphonenumber sync.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vue",
|
|
@@ -61,13 +61,13 @@
|
|
|
61
61
|
"vue": "^3.4.33"
|
|
62
62
|
},
|
|
63
63
|
"dependencies": {
|
|
64
|
-
"@desource/phone-mask": "1.
|
|
64
|
+
"@desource/phone-mask": "1.4.0"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
67
|
"@testing-library/vue": "^8.1.0",
|
|
68
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
69
|
-
"vue": "^3.5.
|
|
70
|
-
"vue-tsc": "^3.2.
|
|
68
|
+
"@vitejs/plugin-vue": "^6.0.6",
|
|
69
|
+
"vue": "^3.5.34",
|
|
70
|
+
"vue-tsc": "^3.2.8"
|
|
71
71
|
},
|
|
72
72
|
"scripts": {
|
|
73
73
|
"clean": "rimraf dist tsconfig.tsbuildinfo test-results coverage",
|