@desource/phone-mask-vue 1.4.0 → 1.4.1

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 CHANGED
@@ -1,5 +1,16 @@
1
1
  # @desource/phone-mask-vue
2
2
 
3
+ ## 1.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Core/Vue/React/Svelte/Nuxt Upgrades:
8
+ - Made an internal tooling update
9
+ - Updated development environment dependencies for better stability and security
10
+
11
+ - Updated dependencies []:
12
+ - @desource/phone-mask@1.4.1
13
+
3
14
  ## 1.4.0
4
15
 
5
16
  ### Minor Changes
package/README.md CHANGED
@@ -2,8 +2,10 @@
2
2
 
3
3
  > Vue 3 phone input component with Google's libphonenumber data
4
4
 
5
- [![npm version](https://img.shields.io/npm/v/@desource/phone-mask-vue?color=blue&logo=vue.js)](https://www.npmjs.com/package/@desource/phone-mask-vue)
5
+ [![npm version](https://img.shields.io/npm/v/@desource/phone-mask-vue?color=blue&logo=vuedotjs)](https://www.npmjs.com/package/@desource/phone-mask-vue)
6
+ [![codewiki](https://img.shields.io/badge/code%20wiki-000000?logo=googlegemini&logoColor=white)](https://codewiki.google/github.com/desource-labs/phone-mask)
6
7
  [![bundle size](https://img.shields.io/bundlephobia/minzip/@desource/phone-mask-vue?label=gzip%20size&color=purple)](https://bundlephobia.com/package/@desource/phone-mask-vue)
8
+ [![context7 docs](https://img.shields.io/badge/context7%20docs-000000)](https://context7.com/desource-labs/phone-mask)
7
9
  [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/DeSource-Labs/phone-mask/blob/main/LICENSE)
8
10
 
9
11
  Beautiful, accessible, extreme small & tree-shakeable Vue 3 phone input with auto-formatting, country selector, and validation.
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]}})});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]}})});
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/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/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;
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desource/phone-mask-vue",
3
- "version": "1.4.0",
3
+ "version": "1.4.1",
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.4.0"
64
+ "@desource/phone-mask": "1.4.1"
65
65
  },
66
66
  "devDependencies": {
67
67
  "@testing-library/vue": "^8.1.0",
68
- "@vitejs/plugin-vue": "^6.0.6",
69
- "vue": "^3.5.34",
70
- "vue-tsc": "^3.2.8"
68
+ "@vitejs/plugin-vue": "^6.0.7",
69
+ "vue": "^3.5.39",
70
+ "vue-tsc": "^3.3.6"
71
71
  },
72
72
  "scripts": {
73
73
  "clean": "rimraf dist tsconfig.tsbuildinfo test-results coverage",
@@ -77,7 +77,7 @@
77
77
  "build:internal": "pnpm build:lib && pnpm build:types",
78
78
  "build:lib": "vite build",
79
79
  "build:types": "vue-tsc -p tsconfig.json",
80
- "typecheck": "tsc -p tsconfig.json --noEmit",
80
+ "typecheck": "vue-tsc -p tsconfig.json --noEmit",
81
81
  "test:unit": "vitest run",
82
82
  "test:unit:coverage": "vitest run --coverage.enabled --coverage.provider=v8 --coverage.reporter=lcov --coverage.reportsDirectory=coverage",
83
83
  "test:e2e": "playwright test"