@desource/phone-mask-vue 1.1.2 → 1.2.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 CHANGED
@@ -1,5 +1,21 @@
1
1
  # @desource/phone-mask-vue
2
2
 
3
+ ## 1.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - Core Upgrades:
8
+ - Core metadata minification redesigned for better performance and reliability
9
+ - Breaking changes (minor impact):
10
+ - Core mask shape normalized: `mask` is now always `string[]` (no `string | string[]` union) across core types/exports
11
+ - `toArray` removed from all packages
12
+ - Formatter edge case fixed: countries with no mask variants are now handled safely (`maxDigits = 0` path)
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies []:
17
+ - @desource/phone-mask@1.2.0
18
+
3
19
  ## 1.1.2
4
20
 
5
21
  ### Patch Changes
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require(`@desource/phone-mask`),t=require(`vue`);function n({country:n,locale:r,detect:i,onCountryChange:a}={}){let o=(0,t.computed)(()=>(0,t.toValue)(r)||(0,e.getNavigatorLang)()),s=(0,t.ref)((0,e.parseCountryCode)((0,t.toValue)(n),`US`)),c=(0,t.computed)(()=>(0,e.getCountry)(s.value,o.value)),l=t=>{let n=(0,e.parseCountryCode)(t);return n?(s.value=n,!0):!1},u=async()=>{l(await(0,e.detectByGeoIp)())||l((0,e.detectCountryFromLocale)())};return(0,t.watchEffect)(()=>{let e=(0,t.toValue)(n);e&&e!==s.value&&l(e)}),(0,t.watchEffect)(()=>{(0,t.toValue)(i)&&!(0,t.toValue)(n)&&u()}),(0,t.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,t.computed)(()=>(0,e.createPhoneFormatter)((0,t.toValue)(n))),c=(0,t.computed)(()=>s.value.getMaxDigits()),l=(0,t.computed)(()=>(0,e.extractDigits)((0,t.toValue)(r),c.value)),u=(0,t.computed)(()=>s.value.getPlaceholder()),d=(0,t.computed)(()=>s.value.formatDisplay(l.value)),f=(0,t.computed)(()=>l.value?`${(0,t.toValue)(n).code}${l.value}`:``),p=(0,t.computed)(()=>d.value?`${(0,t.toValue)(n).code} ${d.value}`:``),m=(0,t.computed)(()=>s.value.isComplete(l.value)),h=(0,t.computed)(()=>l.value.length===0),g=(0,t.computed)(()=>!h.value&&!m.value),_=(0,t.computed)(()=>({full:f.value,fullFormatted:p.value,digits:l.value}));return(0,t.watchEffect)(()=>{(0,t.toValue)(r)!==l.value&&i(l.value)}),(0,t.watchEffect)(()=>{a?.(_.value)}),(0,t.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 e=null,n=()=>{e&&=(clearTimeout(e),null)};return(0,t.onUnmounted)(n),{set:(t,r)=>{n(),e=setTimeout(t,r)},clear:n}}function a(){let e=(0,t.ref)(!1),n=i();return{showValidationHint:e,clearValidationHint:(t=!0)=>{t&&(e.value=!1),n.clear()},scheduleValidationHint:t=>{e.value=!1,n.set(()=>{e.value=!0},t)}}}var o=500,s=300;function c(n){let{formatter:r,digits:i,inactive:a,onChange:c,scheduleValidationHint:l}=n,u=(n,i)=>{(0,t.nextTick)(()=>{n&&(0,e.setCaret)(n,(0,t.toValue)(r).getCaretPosition(i))})};return{handleBeforeInput:t=>{(0,e.processBeforeInput)(t)},handleInput:n=>{if((0,t.toValue)(a))return;let i=(0,e.processInput)(n,{formatter:(0,t.toValue)(r)});i&&(c?.(i.newDigits),u(n.target,i.caretDigitIndex),l?.(o))},handleKeydown:n=>{if((0,t.toValue)(a))return;let o=(0,e.processKeydown)(n,{digits:(0,t.toValue)(i),formatter:(0,t.toValue)(r)});o&&(c?.(o.newDigits),u(n.target,o.caretDigitIndex),l?.(s))},handlePaste:n=>{if((0,t.toValue)(a))return;let o=(0,e.processPaste)(n,{digits:(0,t.toValue)(i),formatter:(0,t.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,t.ref)(``),f=(0,t.ref)(!1),p=(0,t.shallowRef)({}),m=(0,t.ref)(0),h=(0,t.computed)(()=>(0,e.MasksFull)((0,t.toValue)(o))),g=(0,t.computed)(()=>(0,e.filterCountries)(h.value,d.value)),_=(0,t.computed)(()=>!(0,t.toValue)(s)&&h.value.length>1),v=e=>{m.value=e},y=()=>{(0,t.nextTick)(()=>i.value?.focus({preventScroll:!0}))},b=()=>{f.value=!1},x=()=>{f.value=!0,v(0),y()},ee=()=>{(0,t.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,t.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,t.watch)(_,e=>{!e&&f.value&&b()}),(0,t.watch)(f,e=>{if(!e){E();return}w(),globalThis.addEventListener(`resize`,w),globalThis.addEventListener(`scroll`,w,!0),globalThis.addEventListener(`click`,C,!0)}),(0,t.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(e=1800){let n=(0,t.ref)(!1),r=(0,t.ref)(!1),a=i();return{copied:n,isCopying:r,copy:async t=>{if(r.value)return!1;let i=t.trim();if(!i)return!1;r.value=!0;try{return await navigator.clipboard.writeText(i),n.value=!0,a.set(()=>{n.value=!1},e),!0}catch(e){return console.warn(`Copy failed`,e),!1}finally{r.value=!1}}}}var d=1800;function f({liveRef:e,fullFormatted:n,onCopy:r}){let a=i(),{copied:o,copy:s}=u(d),c=(0,t.computed)(()=>o.value?`Copied`:`Copy ${n.value}`),l=(0,t.computed)(()=>o.value?`Copied`:`Copy phone number`),f=t=>{e?.value&&(e.value.textContent=t,a.set(()=>{e.value&&(e.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:e}){let n=(0,t.ref)(!1),r=(0,t.computed)(()=>{let r=(0,t.toValue)(e);return r===`auto`?n.value?`theme-dark`:`theme-light`:`theme-${r}`}),i=null,a=e=>{n.value=e.matches};return(0,t.onBeforeMount)(()=>{i=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null,i&&(n.value=i.matches,i.addEventListener(`change`,a))}),(0,t.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=[`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,t.defineComponent)({__name:`PhoneInput`,props:(0,t.mergeModels)({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,t.mergeModels)([`change`,`country-change`,`validation-change`,`focus`,`blur`,`copy`,`clear`],[`update:modelValue`]),setup(e,{expose:i,emit:o}){let s=e,u=(0,t.useSlots)(),d=o,D=(0,t.useModel)(e,`modelValue`),O=e=>{D.value=e},{country:k,setCountry:A,locale:ae}=n({country:()=>s.country,locale:()=>s.locale,detect:()=>s.detect,onCountryChange:e=>d(`country-change`,e)}),{digits:j,formatter:oe,displayPlaceholder:M,displayValue:N,full:se,fullFormatted:P,isComplete:F,isEmpty:I,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,t.useTemplateRef)(`rootRef`),z=(0,t.useTemplateRef)(`telRef`),B=(0,t.useTemplateRef)(`liveRef`),V=(0,t.useTemplateRef)(`dropdownRef`),H=(0,t.useTemplateRef)(`searchRef`),U=(0,t.useTemplateRef)(`selectorRef`),W=(0,t.getCurrentInstance)()?.uid??0,G=`pi-options-${W}`,de=e=>`pi-option-${W}-${e}`,K=(0,t.computed)(()=>s.disabled||s.readonly),fe=(0,t.computed)(()=>le.value&&ce.value),pe=(0,t.computed)(()=>s.showCopy&&!I.value&&!s.disabled),me=(0,t.computed)(()=>s.showClear&&!I.value&&!K.value),{copied:q,copyAriaLabel:he,copyButtonTitle:ge,onCopyClick:_e}=f({liveRef:B,fullFormatted:P,onCopy:e=>d(`copy`,e)}),J=()=>(0,t.nextTick)(()=>z.value?.focus()),{dropdownOpen:Y,search:ve,focusedIndex:X,dropdownStyle:ye,filteredCountries:Z,hasDropdown:Q,closeDropdown:be,toggleDropdown:xe,selectCountry:Se,setFocusedIndex:Ce,handleSearchChange:$,handleSearchKeydown:we}=l({rootRef:R,dropdownRef:V,searchRef:H,selectorRef:U,locale:ae,countryOption:()=>s.country,inactive:K,onSelectCountry:A,onAfterSelect:J}),Te=(0,t.computed)(()=>Y.value&&Z.value[X.value]?de(X.value):void 0),{handleBeforeInput:Ee,handleInput:De,handleKeydown:Oe,handlePaste:ke}=c({formatter:oe,digits:j,inactive:K,onChange:O,scheduleValidationHint:ue}),Ae=e=>{L(!1),be(),d(`focus`,e)},je=e=>d(`blur`,e),Me=()=>{O(``),L(),d(`clear`)},Ne=()=>{Me(),J()};i({focus:J,blur:()=>z.value?.blur(),clear:Me,selectCountry:Se,getFullNumber:()=>se.value,getFullFormattedNumber:()=>P.value,getDigits:()=>j.value,isValid:()=>F.value,isComplete:()=>F.value});let{themeClass:Pe}=p({theme:()=>s.theme}),Fe=(0,t.computed)(()=>[`phone-input`,`size-${s.size}`,Pe.value,{"is-disabled":s.disabled,"is-readonly":s.readonly,"is-unstyled":s.disableDefaultStyles,"is-incomplete":s.withValidity&&fe.value,"is-complete":s.withValidity&&F.value}]),Ie=(0,t.computed)(()=>({"--pi-actions-count":+pe.value+ +me.value+(u[`actions-before`]?1:0)}));return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:R,"aria-label":`Phone input with country selector`,role:`group`,class:(0,t.normalizeClass)(Fe.value),style:(0,t.normalizeStyle)(Ie.value)},[(0,t.createElementVNode)(`div`,{ref_key:`selectorRef`,ref:U,class:`pi-selector`},[(0,t.createElementVNode)(`button`,{type:`button`,class:(0,t.normalizeClass)([`pi-selector-btn`,{"no-dropdown":!(0,t.unref)(Q)||e.readonly}]),disabled:e.disabled,tabindex:K.value||!(0,t.unref)(Q)?-1:void 0,"aria-label":`Selected country: ${(0,t.unref)(k).name}`,"aria-expanded":(0,t.unref)(Y),"aria-haspopup":(0,t.unref)(Q)?`listbox`:void 0,onClick:r[0]||=(...e)=>(0,t.unref)(xe)&&(0,t.unref)(xe)(...e)},[(0,t.createElementVNode)(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${(0,t.unref)(k).name} flag`},[(0,t.renderSlot)(n.$slots,`flag`,{country:(0,t.unref)(k)},()=>[(0,t.createTextVNode)((0,t.toDisplayString)((0,t.unref)(k).flag),1)],!0)],8,h),(0,t.createElementVNode)(`span`,g,(0,t.toDisplayString)((0,t.unref)(k).code),1),!K.value&&(0,t.unref)(Q)?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,{key:0,class:(0,t.normalizeClass)([`pi-chevron`,{"is-open":(0,t.unref)(Y)}]),width:`12`,height:`12`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`},[...r[8]||=[(0,t.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,t.createCommentVNode)(``,!0)],10,m)],512),(0,t.createElementVNode)(`div`,_,[(0,t.createElementVNode)(`input`,{ref_key:`telRef`,ref:z,type:`tel`,inputmode:`tel`,autocomplete:`tel-national`,autocorrect:`off`,autocapitalize:`off`,spellcheck:`false`,class:`pi-input`,placeholder:(0,t.unref)(M),value:(0,t.unref)(N),disabled:e.disabled,readonly:e.readonly,"aria-invalid":fe.value,onBeforeinput:r[1]||=(...e)=>(0,t.unref)(Ee)&&(0,t.unref)(Ee)(...e),onInput:r[2]||=(...e)=>(0,t.unref)(De)&&(0,t.unref)(De)(...e),onKeydown:r[3]||=(...e)=>(0,t.unref)(Oe)&&(0,t.unref)(Oe)(...e),onPaste:r[4]||=(...e)=>(0,t.unref)(ke)&&(0,t.unref)(ke)(...e),onFocus:Ae,onBlur:je},null,40,v),(0,t.createElementVNode)(`div`,y,[(0,t.createVNode)(t.Transition,{name:`fade-scale`},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(n.$slots,`actions-before`,{},void 0,!0)]),_:3}),(0,t.createVNode)(t.Transition,{name:`fade-scale`},{default:(0,t.withCtx)(()=>[pe.value?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,type:`button`,class:(0,t.normalizeClass)([`pi-btn`,`pi-btn-copy`,{"is-copied":(0,t.unref)(q)}]),"aria-label":(0,t.unref)(he),title:(0,t.unref)(ge),onClick:r[5]||=(...e)=>(0,t.unref)(_e)&&(0,t.unref)(_e)(...e)},[u[`copy-svg`]?(0,t.renderSlot)(n.$slots,`copy-svg`,{key:0,copied:(0,t.unref)(q)},void 0,!0):(0,t.unref)(q)?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,ee,[...r[10]||=[(0,t.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,t.openBlock)(),(0,t.createElementBlock)(`svg`,x,[...r[9]||=[(0,t.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,t.createCommentVNode)(``,!0)]),_:3}),(0,t.createVNode)(t.Transition,{name:`fade-scale`},{default:(0,t.withCtx)(()=>[me.value?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,type:`button`,class:`pi-btn pi-btn-clear`,"aria-label":e.clearButtonLabel,title:e.clearButtonLabel,onClick:Ne},[u[`clear-svg`]?(0,t.renderSlot)(n.$slots,`clear-svg`,{key:1},void 0,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,te,[...r[11]||=[(0,t.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,t.createCommentVNode)(``,!0)]),_:3})])]),((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[(0,t.createVNode)(t.Transition,{name:`dropdown`},{default:(0,t.withCtx)(()=>[(0,t.unref)(Y)?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref_key:`dropdownRef`,ref:V,class:(0,t.normalizeClass)([`phone-dropdown`,[e.dropdownClass,(0,t.unref)(Pe)]]),role:`dialog`,"aria-modal":`false`,"aria-label":`Select country`,style:(0,t.normalizeStyle)((0,t.unref)(ye))},[(0,t.createElementVNode)(`div`,C,[(0,t.createElementVNode)(`input`,{ref_key:`searchRef`,ref:H,value:(0,t.unref)(ve),type:`search`,class:`pi-search`,"aria-label":`Search countries`,"aria-controls":G,"aria-activedescendant":Te.value,placeholder:e.searchPlaceholder,onKeydown:r[6]||=(...e)=>(0,t.unref)(we)&&(0,t.unref)(we)(...e),onInput:r[7]||=(...e)=>(0,t.unref)($)&&(0,t.unref)($)(...e)},null,40,w)]),(0,t.createElementVNode)(`ul`,{id:G,class:`pi-options`,role:`listbox`,tabindex:`-1`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(Z),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{id:de(r),key:e.id,role:`option`,class:(0,t.normalizeClass)([`pi-option`,{"is-focused":r===(0,t.unref)(X),"is-selected":e.id===(0,t.unref)(k).id}]),"aria-selected":e.id===(0,t.unref)(k).id,title:e.name,onClick:n=>(0,t.unref)(Se)(e.id),onMouseenter:e=>(0,t.unref)(Ce)(r)},[(0,t.createElementVNode)(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${e.name} flag`},[(0,t.renderSlot)(n.$slots,`flag`,{country:e},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(e.flag),1)],!0)],8,ne),(0,t.createElementVNode)(`span`,E,(0,t.toDisplayString)(e.name),1),(0,t.createElementVNode)(`span`,re,(0,t.toDisplayString)(e.code),1)],42,T))),128)),(0,t.unref)(Z).length===0?((0,t.openBlock)(),(0,t.createElementBlock)(`li`,ie,(0,t.toDisplayString)(e.noResultsText),1)):(0,t.createCommentVNode)(``,!0)])],6)):(0,t.createCommentVNode)(``,!0)]),_:3})])),(0,t.createElementVNode)(`div`,{ref_key:`liveRef`,ref:B,class:`sr-only`,role:`status`,"aria-live":`polite`,"aria-atomic":`true`},null,512)],6))}}),[[`__scopeId`,`data-v-d730aa54`]]);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(t,n){let r=n.formatter.getMaxDigits(),i=(0,e.extractDigits)(t.value,r),a=n.formatter.formatDisplay(i);(i!==n.digits||t.value!==a)&&k(t,n,i)}function ae(t,n){let r=n.country.id,i=(0,e.parseCountryCode)(n.options.country);i&&i!==r&&M(t,n,i)}function j(n,r,i){return a=>{let o=i(a,r);o&&(k(n,r,o.newDigits),(0,t.nextTick)(()=>{(0,e.setCaret)(n,r.formatter.getCaretPosition(o.caretDigitIndex))}))}}async function oe(t){let n=(0,e.parseCountryCode)(t.country);if(n)return n;if(t.detect){let t=(0,e.parseCountryCode)(await(0,e.detectByGeoIp)());if(t)return t;let n=(0,e.parseCountryCode)((0,e.detectCountryFromLocale)());if(n)return n}return`US`}function M(t,n,r){let i=(0,e.parseCountryCode)(r);if(!i)return;let a=(0,e.getCountry)(i,n.locale);n.country=a,n.options.onCountryChange?.(a),n.formatter=(0,e.createPhoneFormatter)(a),t.placeholder=n.formatter.getPlaceholder(),A(t,n)}var N={mounted(t,n){if(t.tagName!==`INPUT`){console.warn(`[v-phone-mask] Directive can only be used on input elements`);return}t.setAttribute(`type`,`tel`),t.setAttribute(`inputmode`,`tel`),t.setAttribute(`placeholder`,``);let r=O(n.value),i=r.locale||(0,e.getNavigatorLang)(),a=(0,e.getCountry)((0,e.parseCountryCode)(r.country,`US`),i),o={country:a,formatter:(0,e.createPhoneFormatter)(a),digits:``,locale:i,options:r};t.__phoneMaskState=o,o.inputHandler=j(t,o,e.processInput),o.keydownHandler=j(t,o,e.processKeydown),o.pasteHandler=j(t,o,e.processPaste),o.beforeInputHandler=e.processBeforeInput,t.addEventListener(`beforeinput`,o.beforeInputHandler),t.addEventListener(`input`,o.inputHandler),t.addEventListener(`keydown`,o.keydownHandler),t.addEventListener(`paste`,o.pasteHandler),oe(r).then(e=>{t.__phoneMaskState===o&&M(t,o,e)})},updated(e,t){let n=e.__phoneMaskState;n&&(n.options=O(t.value),ae(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 se(e){let i=(0,t.shallowRef)(null),{country:a,setCountry:o}=n({country:e.country,locale:e.locale,detect:e.detect,onCountryChange:e.onCountryChange}),{digits:s,formatter:l,displayPlaceholder:u,displayValue:d,full:f,fullFormatted:p,isComplete:m,isEmpty:h,shouldShowWarn:g}=r({country:a,value:e.value,onChange:e.onChange,onPhoneChange:e.onPhoneChange}),{handleBeforeInput:_,handleInput:v,handleKeydown:y,handlePaste:b}=c({formatter:l,digits:s,onChange:e.onChange});return(0,t.onMounted)(()=>{let e=i.value;e&&(e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`))}),(0,t.watchEffect)(()=>{let e=i.value;e&&(e.value=d.value,e.setAttribute(`placeholder`,u.value))},{flush:`post`}),(0,t.onMounted)(()=>{let e=i.value;e&&(e.addEventListener(`beforeinput`,_),e.addEventListener(`input`,v),e.addEventListener(`keydown`,y),e.addEventListener(`paste`,b))}),(0,t.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:()=>{e.onChange(``)}}}function P(e){e.component(`PhoneInput`,D),e.directive(`phone-mask`,N)}var F={install:P},I={getFlagEmoji:e.getFlagEmoji,countPlaceholders:e.countPlaceholders,formatDigitsWithMap:e.formatDigitsWithMap,pickMaskVariant:e.pickMaskVariant,removeCountryCodePrefix:e.removeCountryCodePrefix,toArray:e.toArray};exports.PMaskHelpers=I,exports.PhoneInput=D,exports.default=F,exports.install=P,exports.usePhoneMask=se,exports.vPhoneMask=N,exports.vPhoneMaskSetCountry=M;
1
+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require(`@desource/phone-mask`),t=require(`vue`);function n({country:n,locale:r,detect:i,onCountryChange:a}={}){let o=(0,t.computed)(()=>(0,t.toValue)(r)||(0,e.getNavigatorLang)()),s=(0,t.ref)((0,e.parseCountryCode)((0,t.toValue)(n),`US`)),c=(0,t.computed)(()=>(0,e.getCountry)(s.value,o.value)),l=t=>{let n=(0,e.parseCountryCode)(t);return n?(s.value=n,!0):!1},u=async()=>{l(await(0,e.detectByGeoIp)())||l((0,e.detectCountryFromLocale)())};return(0,t.watchEffect)(()=>{let e=(0,t.toValue)(n);e&&e!==s.value&&l(e)}),(0,t.watchEffect)(()=>{(0,t.toValue)(i)&&!(0,t.toValue)(n)&&u()}),(0,t.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,t.computed)(()=>(0,e.createPhoneFormatter)((0,t.toValue)(n))),c=(0,t.computed)(()=>s.value.getMaxDigits()),l=(0,t.computed)(()=>(0,e.extractDigits)((0,t.toValue)(r),c.value)),u=(0,t.computed)(()=>s.value.getPlaceholder()),d=(0,t.computed)(()=>s.value.formatDisplay(l.value)),f=(0,t.computed)(()=>l.value?`${(0,t.toValue)(n).code}${l.value}`:``),p=(0,t.computed)(()=>d.value?`${(0,t.toValue)(n).code} ${d.value}`:``),m=(0,t.computed)(()=>s.value.isComplete(l.value)),h=(0,t.computed)(()=>l.value.length===0),g=(0,t.computed)(()=>!h.value&&!m.value),_=(0,t.computed)(()=>({full:f.value,fullFormatted:p.value,digits:l.value}));return(0,t.watchEffect)(()=>{(0,t.toValue)(r)!==l.value&&i(l.value)}),(0,t.watchEffect)(()=>{a?.(_.value)}),(0,t.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 e=null,n=()=>{e&&=(clearTimeout(e),null)};return(0,t.onUnmounted)(n),{set:(t,r)=>{n(),e=setTimeout(t,r)},clear:n}}function a(){let e=(0,t.ref)(!1),n=i();return{showValidationHint:e,clearValidationHint:(t=!0)=>{t&&(e.value=!1),n.clear()},scheduleValidationHint:t=>{e.value=!1,n.set(()=>{e.value=!0},t)}}}var o=500,s=300;function c(n){let{formatter:r,digits:i,inactive:a,onChange:c,scheduleValidationHint:l}=n,u=(n,i)=>{(0,t.nextTick)(()=>{n&&(0,e.setCaret)(n,(0,t.toValue)(r).getCaretPosition(i))})};return{handleBeforeInput:t=>{(0,e.processBeforeInput)(t)},handleInput:n=>{if((0,t.toValue)(a))return;let i=(0,e.processInput)(n,{formatter:(0,t.toValue)(r)});i&&(c?.(i.newDigits),u(n.target,i.caretDigitIndex),l?.(o))},handleKeydown:n=>{if((0,t.toValue)(a))return;let o=(0,e.processKeydown)(n,{digits:(0,t.toValue)(i),formatter:(0,t.toValue)(r)});o&&(c?.(o.newDigits),u(n.target,o.caretDigitIndex),l?.(s))},handlePaste:n=>{if((0,t.toValue)(a))return;let o=(0,e.processPaste)(n,{digits:(0,t.toValue)(i),formatter:(0,t.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,t.ref)(``),f=(0,t.ref)(!1),p=(0,t.shallowRef)({}),m=(0,t.ref)(0),h=(0,t.computed)(()=>(0,e.MasksFull)((0,t.toValue)(o))),g=(0,t.computed)(()=>(0,e.filterCountries)(h.value,d.value)),_=(0,t.computed)(()=>!(0,t.toValue)(s)&&h.value.length>1),v=e=>{m.value=e},y=()=>{(0,t.nextTick)(()=>i.value?.focus({preventScroll:!0}))},b=()=>{f.value=!1},x=()=>{f.value=!0,v(0),y()},ee=()=>{(0,t.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,t.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,t.watch)(_,e=>{!e&&f.value&&b()}),(0,t.watch)(f,e=>{if(!e){E();return}w(),globalThis.addEventListener(`resize`,w),globalThis.addEventListener(`scroll`,w,!0),globalThis.addEventListener(`click`,C,!0)}),(0,t.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(e=1800){let n=(0,t.ref)(!1),r=(0,t.ref)(!1),a=i();return{copied:n,isCopying:r,copy:async t=>{if(r.value)return!1;let i=t.trim();if(!i)return!1;r.value=!0;try{return await navigator.clipboard.writeText(i),n.value=!0,a.set(()=>{n.value=!1},e),!0}catch(e){return console.warn(`Copy failed`,e),!1}finally{r.value=!1}}}}var d=1800;function f({liveRef:e,fullFormatted:n,onCopy:r}){let a=i(),{copied:o,copy:s}=u(d),c=(0,t.computed)(()=>o.value?`Copied`:`Copy ${n.value}`),l=(0,t.computed)(()=>o.value?`Copied`:`Copy phone number`),f=t=>{e?.value&&(e.value.textContent=t,a.set(()=>{e.value&&(e.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:e}){let n=(0,t.ref)(!1),r=(0,t.computed)(()=>{let r=(0,t.toValue)(e);return r===`auto`?n.value?`theme-dark`:`theme-light`:`theme-${r}`}),i=null,a=e=>{n.value=e.matches};return(0,t.onBeforeMount)(()=>{i=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null,i&&(n.value=i.matches,i.addEventListener(`change`,a))}),(0,t.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=[`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,t.defineComponent)({__name:`PhoneInput`,props:(0,t.mergeModels)({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,t.mergeModels)([`change`,`country-change`,`validation-change`,`focus`,`blur`,`copy`,`clear`],[`update:modelValue`]),setup(e,{expose:i,emit:o}){let s=e,u=(0,t.useSlots)(),d=o,D=(0,t.useModel)(e,`modelValue`),O=e=>{D.value=e},{country:k,setCountry:A,locale:ae}=n({country:()=>s.country,locale:()=>s.locale,detect:()=>s.detect,onCountryChange:e=>d(`country-change`,e)}),{digits:j,formatter:oe,displayPlaceholder:M,displayValue:N,full:se,fullFormatted:P,isComplete:F,isEmpty:I,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,t.useTemplateRef)(`rootRef`),z=(0,t.useTemplateRef)(`telRef`),B=(0,t.useTemplateRef)(`liveRef`),V=(0,t.useTemplateRef)(`dropdownRef`),H=(0,t.useTemplateRef)(`searchRef`),U=(0,t.useTemplateRef)(`selectorRef`),W=(0,t.getCurrentInstance)()?.uid??0,G=`pi-options-${W}`,de=e=>`pi-option-${W}-${e}`,K=(0,t.computed)(()=>s.disabled||s.readonly),fe=(0,t.computed)(()=>le.value&&ce.value),pe=(0,t.computed)(()=>s.showCopy&&!I.value&&!s.disabled),me=(0,t.computed)(()=>s.showClear&&!I.value&&!K.value),{copied:q,copyAriaLabel:he,copyButtonTitle:ge,onCopyClick:_e}=f({liveRef:B,fullFormatted:P,onCopy:e=>d(`copy`,e)}),J=()=>(0,t.nextTick)(()=>z.value?.focus()),{dropdownOpen:Y,search:ve,focusedIndex:X,dropdownStyle:ye,filteredCountries:Z,hasDropdown:Q,closeDropdown:be,toggleDropdown:xe,selectCountry:Se,setFocusedIndex:Ce,handleSearchChange:$,handleSearchKeydown:we}=l({rootRef:R,dropdownRef:V,searchRef:H,selectorRef:U,locale:ae,countryOption:()=>s.country,inactive:K,onSelectCountry:A,onAfterSelect:J}),Te=(0,t.computed)(()=>Y.value&&Z.value[X.value]?de(X.value):void 0),{handleBeforeInput:Ee,handleInput:De,handleKeydown:Oe,handlePaste:ke}=c({formatter:oe,digits:j,inactive:K,onChange:O,scheduleValidationHint:ue}),Ae=e=>{L(!1),be(),d(`focus`,e)},je=e=>d(`blur`,e),Me=()=>{O(``),L(),d(`clear`)},Ne=()=>{Me(),J()};i({focus:J,blur:()=>z.value?.blur(),clear:Me,selectCountry:Se,getFullNumber:()=>se.value,getFullFormattedNumber:()=>P.value,getDigits:()=>j.value,isValid:()=>F.value,isComplete:()=>F.value});let{themeClass:Pe}=p({theme:()=>s.theme}),Fe=(0,t.computed)(()=>[`phone-input`,`size-${s.size}`,Pe.value,{"is-disabled":s.disabled,"is-readonly":s.readonly,"is-unstyled":s.disableDefaultStyles,"is-incomplete":s.withValidity&&fe.value,"is-complete":s.withValidity&&F.value}]),Ie=(0,t.computed)(()=>({"--pi-actions-count":+pe.value+ +me.value+(u[`actions-before`]?1:0)}));return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootRef`,ref:R,"aria-label":`Phone input with country selector`,role:`group`,class:(0,t.normalizeClass)(Fe.value),style:(0,t.normalizeStyle)(Ie.value)},[(0,t.createElementVNode)(`div`,{ref_key:`selectorRef`,ref:U,class:`pi-selector`},[(0,t.createElementVNode)(`button`,{type:`button`,class:(0,t.normalizeClass)([`pi-selector-btn`,{"no-dropdown":!(0,t.unref)(Q)||e.readonly}]),disabled:e.disabled,tabindex:K.value||!(0,t.unref)(Q)?-1:void 0,"aria-label":`Selected country: ${(0,t.unref)(k).name}`,"aria-expanded":(0,t.unref)(Y),"aria-haspopup":(0,t.unref)(Q)?`listbox`:void 0,onClick:r[0]||=(...e)=>(0,t.unref)(xe)&&(0,t.unref)(xe)(...e)},[(0,t.createElementVNode)(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${(0,t.unref)(k).name} flag`},[(0,t.renderSlot)(n.$slots,`flag`,{country:(0,t.unref)(k)},()=>[(0,t.createTextVNode)((0,t.toDisplayString)((0,t.unref)(k).flag),1)],!0)],8,h),(0,t.createElementVNode)(`span`,g,(0,t.toDisplayString)((0,t.unref)(k).code),1),!K.value&&(0,t.unref)(Q)?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,{key:0,class:(0,t.normalizeClass)([`pi-chevron`,{"is-open":(0,t.unref)(Y)}]),width:`12`,height:`12`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`},[...r[8]||=[(0,t.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,t.createCommentVNode)(``,!0)],10,m)],512),(0,t.createElementVNode)(`div`,_,[(0,t.createElementVNode)(`input`,{ref_key:`telRef`,ref:z,type:`tel`,inputmode:`tel`,autocomplete:`tel-national`,autocorrect:`off`,autocapitalize:`off`,spellcheck:`false`,class:`pi-input`,placeholder:(0,t.unref)(M),value:(0,t.unref)(N),disabled:e.disabled,readonly:e.readonly,"aria-invalid":fe.value,onBeforeinput:r[1]||=(...e)=>(0,t.unref)(Ee)&&(0,t.unref)(Ee)(...e),onInput:r[2]||=(...e)=>(0,t.unref)(De)&&(0,t.unref)(De)(...e),onKeydown:r[3]||=(...e)=>(0,t.unref)(Oe)&&(0,t.unref)(Oe)(...e),onPaste:r[4]||=(...e)=>(0,t.unref)(ke)&&(0,t.unref)(ke)(...e),onFocus:Ae,onBlur:je},null,40,v),(0,t.createElementVNode)(`div`,y,[(0,t.createVNode)(t.Transition,{name:`fade-scale`},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(n.$slots,`actions-before`,{},void 0,!0)]),_:3}),(0,t.createVNode)(t.Transition,{name:`fade-scale`},{default:(0,t.withCtx)(()=>[pe.value?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,type:`button`,class:(0,t.normalizeClass)([`pi-btn`,`pi-btn-copy`,{"is-copied":(0,t.unref)(q)}]),"aria-label":(0,t.unref)(he),title:(0,t.unref)(ge),onClick:r[5]||=(...e)=>(0,t.unref)(_e)&&(0,t.unref)(_e)(...e)},[u[`copy-svg`]?(0,t.renderSlot)(n.$slots,`copy-svg`,{key:0,copied:(0,t.unref)(q)},void 0,!0):(0,t.unref)(q)?((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,ee,[...r[10]||=[(0,t.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,t.openBlock)(),(0,t.createElementBlock)(`svg`,x,[...r[9]||=[(0,t.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,t.createCommentVNode)(``,!0)]),_:3}),(0,t.createVNode)(t.Transition,{name:`fade-scale`},{default:(0,t.withCtx)(()=>[me.value?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,type:`button`,class:`pi-btn pi-btn-clear`,"aria-label":e.clearButtonLabel,title:e.clearButtonLabel,onClick:Ne},[u[`clear-svg`]?(0,t.renderSlot)(n.$slots,`clear-svg`,{key:1},void 0,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,te,[...r[11]||=[(0,t.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,t.createCommentVNode)(``,!0)]),_:3})])]),((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[(0,t.createVNode)(t.Transition,{name:`dropdown`},{default:(0,t.withCtx)(()=>[(0,t.unref)(Y)?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref_key:`dropdownRef`,ref:V,class:(0,t.normalizeClass)([`phone-dropdown`,[e.dropdownClass,(0,t.unref)(Pe)]]),role:`dialog`,"aria-modal":`false`,"aria-label":`Select country`,style:(0,t.normalizeStyle)((0,t.unref)(ye))},[(0,t.createElementVNode)(`div`,C,[(0,t.createElementVNode)(`input`,{ref_key:`searchRef`,ref:H,value:(0,t.unref)(ve),type:`search`,class:`pi-search`,"aria-label":`Search countries`,"aria-controls":G,"aria-activedescendant":Te.value,placeholder:e.searchPlaceholder,onKeydown:r[6]||=(...e)=>(0,t.unref)(we)&&(0,t.unref)(we)(...e),onInput:r[7]||=(...e)=>(0,t.unref)($)&&(0,t.unref)($)(...e)},null,40,w)]),(0,t.createElementVNode)(`ul`,{id:G,class:`pi-options`,role:`listbox`,tabindex:`-1`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(Z),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{id:de(r),key:e.id,role:`option`,class:(0,t.normalizeClass)([`pi-option`,{"is-focused":r===(0,t.unref)(X),"is-selected":e.id===(0,t.unref)(k).id}]),"aria-selected":e.id===(0,t.unref)(k).id,title:e.name,onClick:n=>(0,t.unref)(Se)(e.id),onMouseenter:e=>(0,t.unref)(Ce)(r)},[(0,t.createElementVNode)(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${e.name} flag`},[(0,t.renderSlot)(n.$slots,`flag`,{country:e},()=>[(0,t.createTextVNode)((0,t.toDisplayString)(e.flag),1)],!0)],8,ne),(0,t.createElementVNode)(`span`,E,(0,t.toDisplayString)(e.name),1),(0,t.createElementVNode)(`span`,re,(0,t.toDisplayString)(e.code),1)],42,T))),128)),(0,t.unref)(Z).length===0?((0,t.openBlock)(),(0,t.createElementBlock)(`li`,ie,(0,t.toDisplayString)(e.noResultsText),1)):(0,t.createCommentVNode)(``,!0)])],6)):(0,t.createCommentVNode)(``,!0)]),_:3})])),(0,t.createElementVNode)(`div`,{ref_key:`liveRef`,ref:B,class:`sr-only`,role:`status`,"aria-live":`polite`,"aria-atomic":`true`},null,512)],6))}}),[[`__scopeId`,`data-v-d730aa54`]]);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(t,n){let r=n.formatter.getMaxDigits(),i=(0,e.extractDigits)(t.value,r),a=n.formatter.formatDisplay(i);(i!==n.digits||t.value!==a)&&k(t,n,i)}function ae(t,n){let r=n.country.id,i=(0,e.parseCountryCode)(n.options.country);i&&i!==r&&M(t,n,i)}function j(n,r,i){return a=>{let o=i(a,r);o&&(k(n,r,o.newDigits),(0,t.nextTick)(()=>{(0,e.setCaret)(n,r.formatter.getCaretPosition(o.caretDigitIndex))}))}}async function oe(t){let n=(0,e.parseCountryCode)(t.country);if(n)return n;if(t.detect){let t=(0,e.parseCountryCode)(await(0,e.detectByGeoIp)());if(t)return t;let n=(0,e.parseCountryCode)((0,e.detectCountryFromLocale)());if(n)return n}return`US`}function M(t,n,r){let i=(0,e.parseCountryCode)(r);if(!i)return;let a=(0,e.getCountry)(i,n.locale);n.country=a,n.options.onCountryChange?.(a),n.formatter=(0,e.createPhoneFormatter)(a),t.placeholder=n.formatter.getPlaceholder(),A(t,n)}var N={mounted(t,n){if(t.tagName!==`INPUT`){console.warn(`[v-phone-mask] Directive can only be used on input elements`);return}t.setAttribute(`type`,`tel`),t.setAttribute(`inputmode`,`tel`),t.setAttribute(`placeholder`,``);let r=O(n.value),i=r.locale||(0,e.getNavigatorLang)(),a=(0,e.getCountry)((0,e.parseCountryCode)(r.country,`US`),i),o={country:a,formatter:(0,e.createPhoneFormatter)(a),digits:``,locale:i,options:r};t.__phoneMaskState=o,o.inputHandler=j(t,o,e.processInput),o.keydownHandler=j(t,o,e.processKeydown),o.pasteHandler=j(t,o,e.processPaste),o.beforeInputHandler=e.processBeforeInput,t.addEventListener(`beforeinput`,o.beforeInputHandler),t.addEventListener(`input`,o.inputHandler),t.addEventListener(`keydown`,o.keydownHandler),t.addEventListener(`paste`,o.pasteHandler),oe(r).then(e=>{t.__phoneMaskState===o&&M(t,o,e)})},updated(e,t){let n=e.__phoneMaskState;n&&(n.options=O(t.value),ae(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 se(e){let i=(0,t.shallowRef)(null),{country:a,setCountry:o}=n({country:e.country,locale:e.locale,detect:e.detect,onCountryChange:e.onCountryChange}),{digits:s,formatter:l,displayPlaceholder:u,displayValue:d,full:f,fullFormatted:p,isComplete:m,isEmpty:h,shouldShowWarn:g}=r({country:a,value:e.value,onChange:e.onChange,onPhoneChange:e.onPhoneChange}),{handleBeforeInput:_,handleInput:v,handleKeydown:y,handlePaste:b}=c({formatter:l,digits:s,onChange:e.onChange});return(0,t.onMounted)(()=>{let e=i.value;e&&(e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`))}),(0,t.watchEffect)(()=>{let e=i.value;e&&(e.value=d.value,e.setAttribute(`placeholder`,u.value))},{flush:`post`}),(0,t.onMounted)(()=>{let e=i.value;e&&(e.addEventListener(`beforeinput`,_),e.addEventListener(`input`,v),e.addEventListener(`keydown`,y),e.addEventListener(`paste`,b))}),(0,t.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:()=>{e.onChange(``)}}}function P(e){e.component(`PhoneInput`,D),e.directive(`phone-mask`,N)}var F={install:P},I={getFlagEmoji:e.getFlagEmoji,countPlaceholders:e.countPlaceholders,formatDigitsWithMap:e.formatDigitsWithMap,pickMaskVariant:e.pickMaskVariant,removeCountryCodePrefix:e.removeCountryCodePrefix};exports.PMaskHelpers=I,exports.PhoneInput=D,exports.default=F,exports.install=P,exports.usePhoneMask=se,exports.vPhoneMask=N,exports.vPhoneMaskSetCountry=M;
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- import{MasksFull as e,countPlaceholders as t,createPhoneFormatter as n,detectByGeoIp as r,detectCountryFromLocale as i,extractDigits as a,filterCountries as o,formatDigitsWithMap as s,getCountry as c,getFlagEmoji as l,getNavigatorLang as u,parseCountryCode as d,pickMaskVariant as f,processBeforeInput as p,processInput as m,processKeydown as h,processPaste as g,removeCountryCodePrefix as _,setCaret as v,toArray as ee}from"@desource/phone-mask";import{Fragment as y,Teleport as te,Transition as b,computed as x,createBlock as ne,createCommentVNode as S,createElementBlock as C,createElementVNode as w,createTextVNode as T,createVNode as E,defineComponent as D,getCurrentInstance as re,mergeModels as O,nextTick as k,normalizeClass as A,normalizeStyle as ie,onBeforeMount as ae,onBeforeUnmount as j,onMounted as M,onUnmounted as N,openBlock as P,ref as F,renderList as oe,renderSlot as I,shallowRef as se,toDisplayString as L,toValue as R,unref as z,useModel as ce,useSlots as le,useTemplateRef as B,watch as V,watchEffect as H,withCtx as U}from"vue";function ue({country:e,locale:t,detect:n,onCountryChange:a}={}){let o=x(()=>R(t)||u()),s=F(d(R(e),`US`)),l=x(()=>c(s.value,o.value)),f=e=>{let t=d(e);return t?(s.value=t,!0):!1},p=async()=>{f(await r())||f(i())};return H(()=>{let t=R(e);t&&t!==s.value&&f(t)}),H(()=>{R(n)&&!R(e)&&p()}),H(()=>{a?.(l.value)}),{country:l,setCountry:f,locale:o}}function de({country:e,value:t,onChange:r,onPhoneChange:i,onValidationChange:o}){let s=x(()=>n(R(e))),c=x(()=>s.value.getMaxDigits()),l=x(()=>a(R(t),c.value)),u=x(()=>s.value.getPlaceholder()),d=x(()=>s.value.formatDisplay(l.value)),f=x(()=>l.value?`${R(e).code}${l.value}`:``),p=x(()=>d.value?`${R(e).code} ${d.value}`:``),m=x(()=>s.value.isComplete(l.value)),h=x(()=>l.value.length===0),g=x(()=>!h.value&&!m.value),_=x(()=>({full:f.value,fullFormatted:p.value,digits:l.value}));return H(()=>{R(t)!==l.value&&r(l.value)}),H(()=>{i?.(_.value)}),H(()=>{o?.(m.value)}),{digits:l,formatter:s,displayPlaceholder:u,displayValue:d,full:f,fullFormatted:p,isComplete:m,isEmpty:h,shouldShowWarn:g}}function W(){let e=null,t=()=>{e&&=(clearTimeout(e),null)};return N(t),{set:(n,r)=>{t(),e=setTimeout(n,r)},clear:t}}function fe(){let e=F(!1),t=W();return{showValidationHint:e,clearValidationHint:(n=!0)=>{n&&(e.value=!1),t.clear()},scheduleValidationHint:n=>{e.value=!1,t.set(()=>{e.value=!0},n)}}}var G=500,K=300;function pe(e){let{formatter:t,digits:n,inactive:r,onChange:i,scheduleValidationHint:a}=e,o=(e,n)=>{k(()=>{e&&v(e,R(t).getCaretPosition(n))})};return{handleBeforeInput:e=>{p(e)},handleInput:e=>{if(R(r))return;let n=m(e,{formatter:R(t)});n&&(i?.(n.newDigits),o(e.target,n.caretDigitIndex),a?.(G))},handleKeydown:e=>{if(R(r))return;let s=h(e,{digits:R(n),formatter:R(t)});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(K))},handlePaste:e=>{if(R(r))return;let s=g(e,{digits:R(n),formatter:R(t)});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(K))}}}function me({rootRef:t,dropdownRef:n,searchRef:r,selectorRef:i,locale:a,countryOption:s,inactive:c,onSelectCountry:l,onAfterSelect:u}){let d=F(``),f=F(!1),p=se({}),m=F(0),h=x(()=>e(R(a))),g=x(()=>o(h.value,d.value)),_=x(()=>!R(s)&&h.value.length>1),v=e=>{m.value=e},ee=()=>{k(()=>r.value?.focus({preventScroll:!0}))},y=()=>{f.value=!1},te=()=>{f.value=!0,v(0),ee()},b=()=>{R(c)||!_.value||(f.value?y():te())},ne=e=>{l(e),y(),d.value=``,v(0),u?.()},S=e=>{d.value=e.target.value,v(0)},C=e=>{let t=e.target,r=n.value,a=i.value;t&&(r?.contains(t)||a?.contains(t)||y())},w=e=>{if(e?.type===`scroll`&&e.target&&n.value?.contains(e.target)||!t.value)return;let r=t.value.getBoundingClientRect();p.value={top:`${r.bottom+globalThis.scrollY+8}px`,left:`${r.left+globalThis.scrollX}px`,width:`${r.width}px`}},T=()=>{k(()=>{let e=n.value?.lastElementChild,t=e?.children[m.value];if(!e||!t)return;let r=e.getBoundingClientRect(),i=t.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`})})},E=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(),ne(g.value[m.value].id)):e.key===`Escape`&&y()},D=()=>{globalThis.removeEventListener(`resize`,w),globalThis.removeEventListener(`scroll`,w,!0),globalThis.removeEventListener(`click`,C,!0)};return V(_,e=>{!e&&f.value&&y()}),V(f,e=>{if(!e){D();return}w(),globalThis.addEventListener(`resize`,w),globalThis.addEventListener(`scroll`,w,!0),globalThis.addEventListener(`click`,C,!0)}),j(D),{dropdownOpen:f,search:d,focusedIndex:m,dropdownStyle:p,filteredCountries:g,hasDropdown:_,openDropdown:te,closeDropdown:y,toggleDropdown:b,selectCountry:ne,setFocusedIndex:v,handleSearchChange:S,handleSearchKeydown:E}}function he(e=1800){let t=F(!1),n=F(!1),r=W();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 q=1800;function ge({liveRef:e,fullFormatted:t,onCopy:n}){let r=W(),{copied:i,copy:a}=he(q),o=x(()=>i.value?`Copied`:`Copy ${t.value}`),s=x(()=>i.value?`Copied`:`Copy phone number`),c=t=>{e?.value&&(e.value.textContent=t,r.set(()=>{e.value&&(e.value.textContent=``)},q))};return{copied:i,copyAriaLabel:o,copyButtonTitle:s,onCopyClick:async()=>{let e=t.value.trim();await a(e)&&(n?.(e),c(`Phone number copied to clipboard`))}}}function _e({theme:e}){let t=F(!1),n=x(()=>{let n=R(e);return n===`auto`?t.value?`theme-dark`:`theme-light`:`theme-${n}`}),r=null,i=e=>{t.value=e.matches};return ae(()=>{r=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null,r&&(t.value=r.matches,r.addEventListener(`change`,i))}),j(()=>{r?.removeEventListener(`change`,i)}),{themeClass:n}}var ve=[`disabled`,`tabindex`,`aria-label`,`aria-expanded`,`aria-haspopup`],ye=[`aria-label`],be={class:`pi-code`},xe={class:`pi-input-wrap`},Se=[`placeholder`,`value`,`disabled`,`readonly`,`aria-invalid`],Ce={class:`pi-actions`,role:`toolbar`,"aria-label":`Phone input actions`},we=[`aria-label`,`title`],Te={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`},De=[`aria-label`,`title`],Oe={key:0,width:`11`,height:`11`,viewBox:`0 0 14 14`,fill:`none`,"aria-hidden":`true`},ke={class:`pi-search-wrap`},Ae=[`value`,`aria-activedescendant`,`placeholder`],je=[`id`,`aria-selected`,`title`,`onClick`,`onMouseenter`],Me=[`aria-label`],Ne={class:`pi-opt-name`},Pe={class:`pi-opt-code`},Fe={key:0,class:`pi-empty`},J=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})(D({__name:`PhoneInput`,props:O({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:O([`change`,`country-change`,`validation-change`,`focus`,`blur`,`copy`,`clear`],[`update:modelValue`]),setup(e,{expose:t,emit:n}){let r=e,i=le(),a=n,o=ce(e,`modelValue`),s=e=>{o.value=e},{country:c,setCountry:l,locale:u}=ue({country:()=>r.country,locale:()=>r.locale,detect:()=>r.detect,onCountryChange:e=>a(`country-change`,e)}),{digits:d,formatter:f,displayPlaceholder:p,displayValue:m,full:h,fullFormatted:g,isComplete:_,isEmpty:v,shouldShowWarn:ee}=de({country:c,value:o,onChange:s,onPhoneChange:e=>a(`change`,e),onValidationChange:e=>a(`validation-change`,e)}),{showValidationHint:D,clearValidationHint:O,scheduleValidationHint:ae}=fe(),j=B(`rootRef`),M=B(`telRef`),N=B(`liveRef`),F=B(`dropdownRef`),se=B(`searchRef`),R=B(`selectorRef`),V=re()?.uid??0,H=`pi-options-${V}`,W=e=>`pi-option-${V}-${e}`,G=x(()=>r.disabled||r.readonly),K=x(()=>D.value&&ee.value),he=x(()=>r.showCopy&&!v.value&&!r.disabled),q=x(()=>r.showClear&&!v.value&&!G.value),{copied:J,copyAriaLabel:Ie,copyButtonTitle:Le,onCopyClick:Y}=ge({liveRef:N,fullFormatted:g,onCopy:e=>a(`copy`,e)}),X=()=>k(()=>M.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}=me({rootRef:j,dropdownRef:F,searchRef:se,selectorRef:R,locale:u,countryOption:()=>r.country,inactive:G,onSelectCountry:l,onAfterSelect:X}),qe=x(()=>Z.value&&Be.value[Q.value]?W(Q.value):void 0),{handleBeforeInput:Je,handleInput:Ye,handleKeydown:Xe,handlePaste:Ze}=pe({formatter:f,digits:d,inactive:G,onChange:s,scheduleValidationHint:ae}),Qe=e=>{O(!1),Ve(),a(`focus`,e)},$e=e=>a(`blur`,e),et=()=>{s(``),O(),a(`clear`)},tt=()=>{et(),X()};t({focus:X,blur:()=>M.value?.blur(),clear:et,selectCountry:Ue,getFullNumber:()=>h.value,getFullFormattedNumber:()=>g.value,getDigits:()=>d.value,isValid:()=>_.value,isComplete:()=>_.value});let{themeClass:nt}=_e({theme:()=>r.theme}),rt=x(()=>[`phone-input`,`size-${r.size}`,nt.value,{"is-disabled":r.disabled,"is-readonly":r.readonly,"is-unstyled":r.disableDefaultStyles,"is-incomplete":r.withValidity&&K.value,"is-complete":r.withValidity&&_.value}]),it=x(()=>({"--pi-actions-count":+he.value+ +q.value+(i[`actions-before`]?1:0)}));return(t,n)=>(P(),C(`div`,{ref_key:`rootRef`,ref:j,"aria-label":`Phone input with country selector`,role:`group`,class:A(rt.value),style:ie(it.value)},[w(`div`,{ref_key:`selectorRef`,ref:R,class:`pi-selector`},[w(`button`,{type:`button`,class:A([`pi-selector-btn`,{"no-dropdown":!z($)||e.readonly}]),disabled:e.disabled,tabindex:G.value||!z($)?-1:void 0,"aria-label":`Selected country: ${z(c).name}`,"aria-expanded":z(Z),"aria-haspopup":z($)?`listbox`:void 0,onClick:n[0]||=(...e)=>z(He)&&z(He)(...e)},[w(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${z(c).name} flag`},[I(t.$slots,`flag`,{country:z(c)},()=>[T(L(z(c).flag),1)],!0)],8,ye),w(`span`,be,L(z(c).code),1),!G.value&&z($)?(P(),C(`svg`,{key:0,class:A([`pi-chevron`,{"is-open":z(Z)}]),width:`12`,height:`12`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`},[...n[8]||=[w(`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)):S(``,!0)],10,ve)],512),w(`div`,xe,[w(`input`,{ref_key:`telRef`,ref:M,type:`tel`,inputmode:`tel`,autocomplete:`tel-national`,autocorrect:`off`,autocapitalize:`off`,spellcheck:`false`,class:`pi-input`,placeholder:z(p),value:z(m),disabled:e.disabled,readonly:e.readonly,"aria-invalid":K.value,onBeforeinput:n[1]||=(...e)=>z(Je)&&z(Je)(...e),onInput:n[2]||=(...e)=>z(Ye)&&z(Ye)(...e),onKeydown:n[3]||=(...e)=>z(Xe)&&z(Xe)(...e),onPaste:n[4]||=(...e)=>z(Ze)&&z(Ze)(...e),onFocus:Qe,onBlur:$e},null,40,Se),w(`div`,Ce,[E(b,{name:`fade-scale`},{default:U(()=>[I(t.$slots,`actions-before`,{},void 0,!0)]),_:3}),E(b,{name:`fade-scale`},{default:U(()=>[he.value?(P(),C(`button`,{key:0,type:`button`,class:A([`pi-btn`,`pi-btn-copy`,{"is-copied":z(J)}]),"aria-label":z(Ie),title:z(Le),onClick:n[5]||=(...e)=>z(Y)&&z(Y)(...e)},[i[`copy-svg`]?I(t.$slots,`copy-svg`,{key:0,copied:z(J)},void 0,!0):z(J)?(P(),C(`svg`,Ee,[...n[10]||=[w(`path`,{d:`M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z`,fill:`currentColor`},null,-1)]])):(P(),C(`svg`,Te,[...n[9]||=[w(`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,we)):S(``,!0)]),_:3}),E(b,{name:`fade-scale`},{default:U(()=>[q.value?(P(),C(`button`,{key:0,type:`button`,class:`pi-btn pi-btn-clear`,"aria-label":e.clearButtonLabel,title:e.clearButtonLabel,onClick:tt},[i[`clear-svg`]?I(t.$slots,`clear-svg`,{key:1},void 0,!0):(P(),C(`svg`,Oe,[...n[11]||=[w(`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,De)):S(``,!0)]),_:3})])]),(P(),ne(te,{to:`body`},[E(b,{name:`dropdown`},{default:U(()=>[z(Z)?(P(),C(`div`,{key:0,ref_key:`dropdownRef`,ref:F,class:A([`phone-dropdown`,[e.dropdownClass,z(nt)]]),role:`dialog`,"aria-modal":`false`,"aria-label":`Select country`,style:ie(z(ze))},[w(`div`,ke,[w(`input`,{ref_key:`searchRef`,ref:se,value:z(Re),type:`search`,class:`pi-search`,"aria-label":`Search countries`,"aria-controls":H,"aria-activedescendant":qe.value,placeholder:e.searchPlaceholder,onKeydown:n[6]||=(...e)=>z(Ke)&&z(Ke)(...e),onInput:n[7]||=(...e)=>z(Ge)&&z(Ge)(...e)},null,40,Ae)]),w(`ul`,{id:H,class:`pi-options`,role:`listbox`,tabindex:`-1`},[(P(!0),C(y,null,oe(z(Be),(e,n)=>(P(),C(`li`,{id:W(n),key:e.id,role:`option`,class:A([`pi-option`,{"is-focused":n===z(Q),"is-selected":e.id===z(c).id}]),"aria-selected":e.id===z(c).id,title:e.name,onClick:t=>z(Ue)(e.id),onMouseenter:e=>z(We)(n)},[w(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${e.name} flag`},[I(t.$slots,`flag`,{country:e},()=>[T(L(e.flag),1)],!0)],8,Me),w(`span`,Ne,L(e.name),1),w(`span`,Pe,L(e.code),1)],42,je))),128)),z(Be).length===0?(P(),C(`li`,Fe,L(e.noResultsText),1)):S(``,!0)])],6)):S(``,!0)]),_:3})])),w(`div`,{ref_key:`liveRef`,ref:N,class:`sr-only`,role:`status`,"aria-live":`polite`,"aria-atomic":`true`},null,512)],6))}}),[[`__scopeId`,`data-v-d730aa54`]]);function Ie(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function Le(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 Y(e,t){let n=t.formatter.getMaxDigits(),r=a(e.value,n),i=t.formatter.formatDisplay(r);(r!==t.digits||e.value!==i)&&Le(e,t,r)}function X(e,t){let n=t.country.id,r=d(t.options.country);r&&r!==n&&Q(e,t,r)}function Z(e,t,n){return r=>{let i=n(r,t);i&&(Le(e,t,i.newDigits),k(()=>{v(e,t.formatter.getCaretPosition(i.caretDigitIndex))}))}}async function Re(e){let t=d(e.country);if(t)return t;if(e.detect){let e=d(await r());if(e)return e;let t=d(i());if(t)return t}return`US`}function Q(e,t,r){let i=d(r);if(!i)return;let a=c(i,t.locale);t.country=a,t.options.onCountryChange?.(a),t.formatter=n(a),e.placeholder=t.formatter.getPlaceholder(),Y(e,t)}var ze={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 r=Ie(t.value),i=r.locale||u(),a=c(d(r.country,`US`),i),o={country:a,formatter:n(a),digits:``,locale:i,options:r};e.__phoneMaskState=o,o.inputHandler=Z(e,o,m),o.keydownHandler=Z(e,o,h),o.pasteHandler=Z(e,o,g),o.beforeInputHandler=p,e.addEventListener(`beforeinput`,o.beforeInputHandler),e.addEventListener(`input`,o.inputHandler),e.addEventListener(`keydown`,o.keydownHandler),e.addEventListener(`paste`,o.pasteHandler),Re(r).then(t=>{e.__phoneMaskState===o&&Q(e,o,t)})},updated(e,t){let n=e.__phoneMaskState;n&&(n.options=Ie(t.value),X(e,n),Y(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 Be(e){let t=se(null),{country:n,setCountry:r}=ue({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}=de({country:n,value:e.value,onChange:e.onChange,onPhoneChange:e.onPhoneChange}),{handleBeforeInput:p,handleInput:m,handleKeydown:h,handlePaste:g}=pe({formatter:a,digits:i,onChange:e.onChange});return M(()=>{let e=t.value;e&&(e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`))}),H(()=>{let e=t.value;e&&(e.value=s.value,e.setAttribute(`placeholder`,o.value))},{flush:`post`}),M(()=>{let e=t.value;e&&(e.addEventListener(`beforeinput`,p),e.addEventListener(`input`,m),e.addEventListener(`keydown`,h),e.addEventListener(`paste`,g))}),N(()=>{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 $(e){e.component(`PhoneInput`,J),e.directive(`phone-mask`,ze)}var Ve={install:$},He={getFlagEmoji:l,countPlaceholders:t,formatDigitsWithMap:s,pickMaskVariant:f,removeCountryCodePrefix:_,toArray:ee};export{He as PMaskHelpers,J as PhoneInput,Ve as default,$ as install,Be as usePhoneMask,ze as vPhoneMask,Q as vPhoneMaskSetCountry};
1
+ import{MasksFull as e,countPlaceholders as t,createPhoneFormatter as n,detectByGeoIp as r,detectCountryFromLocale as i,extractDigits as a,filterCountries as o,formatDigitsWithMap as s,getCountry as c,getFlagEmoji as l,getNavigatorLang as u,parseCountryCode as d,pickMaskVariant as f,processBeforeInput as p,processInput as m,processKeydown as h,processPaste as g,removeCountryCodePrefix as _,setCaret as v}from"@desource/phone-mask";import{Fragment as ee,Teleport as y,Transition as b,computed as x,createBlock as te,createCommentVNode as S,createElementBlock as C,createElementVNode as w,createTextVNode as T,createVNode as E,defineComponent as ne,getCurrentInstance as re,mergeModels as ie,nextTick as D,normalizeClass as O,normalizeStyle as ae,onBeforeMount as oe,onBeforeUnmount as se,onMounted as k,onUnmounted as A,openBlock as j,ref as M,renderList as ce,renderSlot as N,shallowRef as P,toDisplayString as F,toValue as I,unref as L,useModel as le,useSlots as ue,useTemplateRef as R,watch as z,watchEffect as B,withCtx as V}from"vue";function de({country:e,locale:t,detect:n,onCountryChange:a}={}){let o=x(()=>I(t)||u()),s=M(d(I(e),`US`)),l=x(()=>c(s.value,o.value)),f=e=>{let t=d(e);return t?(s.value=t,!0):!1},p=async()=>{f(await r())||f(i())};return B(()=>{let t=I(e);t&&t!==s.value&&f(t)}),B(()=>{I(n)&&!I(e)&&p()}),B(()=>{a?.(l.value)}),{country:l,setCountry:f,locale:o}}function fe({country:e,value:t,onChange:r,onPhoneChange:i,onValidationChange:o}){let s=x(()=>n(I(e))),c=x(()=>s.value.getMaxDigits()),l=x(()=>a(I(t),c.value)),u=x(()=>s.value.getPlaceholder()),d=x(()=>s.value.formatDisplay(l.value)),f=x(()=>l.value?`${I(e).code}${l.value}`:``),p=x(()=>d.value?`${I(e).code} ${d.value}`:``),m=x(()=>s.value.isComplete(l.value)),h=x(()=>l.value.length===0),g=x(()=>!h.value&&!m.value),_=x(()=>({full:f.value,fullFormatted:p.value,digits:l.value}));return B(()=>{I(t)!==l.value&&r(l.value)}),B(()=>{i?.(_.value)}),B(()=>{o?.(m.value)}),{digits:l,formatter:s,displayPlaceholder:u,displayValue:d,full:f,fullFormatted:p,isComplete:m,isEmpty:h,shouldShowWarn:g}}function H(){let e=null,t=()=>{e&&=(clearTimeout(e),null)};return A(t),{set:(n,r)=>{t(),e=setTimeout(n,r)},clear:t}}function pe(){let e=M(!1),t=H();return{showValidationHint:e,clearValidationHint:(n=!0)=>{n&&(e.value=!1),t.clear()},scheduleValidationHint:n=>{e.value=!1,t.set(()=>{e.value=!0},n)}}}var me=500,U=300;function he(e){let{formatter:t,digits:n,inactive:r,onChange:i,scheduleValidationHint:a}=e,o=(e,n)=>{D(()=>{e&&v(e,I(t).getCaretPosition(n))})};return{handleBeforeInput:e=>{p(e)},handleInput:e=>{if(I(r))return;let n=m(e,{formatter:I(t)});n&&(i?.(n.newDigits),o(e.target,n.caretDigitIndex),a?.(me))},handleKeydown:e=>{if(I(r))return;let s=h(e,{digits:I(n),formatter:I(t)});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(U))},handlePaste:e=>{if(I(r))return;let s=g(e,{digits:I(n),formatter:I(t)});s&&(i?.(s.newDigits),o(e.target,s.caretDigitIndex),a?.(U))}}}function ge({rootRef:t,dropdownRef:n,searchRef:r,selectorRef:i,locale:a,countryOption:s,inactive:c,onSelectCountry:l,onAfterSelect:u}){let d=M(``),f=M(!1),p=P({}),m=M(0),h=x(()=>e(I(a))),g=x(()=>o(h.value,d.value)),_=x(()=>!I(s)&&h.value.length>1),v=e=>{m.value=e},ee=()=>{D(()=>r.value?.focus({preventScroll:!0}))},y=()=>{f.value=!1},b=()=>{f.value=!0,v(0),ee()},te=()=>{I(c)||!_.value||(f.value?y():b())},S=e=>{l(e),y(),d.value=``,v(0),u?.()},C=e=>{d.value=e.target.value,v(0)},w=e=>{let t=e.target,r=n.value,a=i.value;t&&(r?.contains(t)||a?.contains(t)||y())},T=e=>{if(e?.type===`scroll`&&e.target&&n.value?.contains(e.target)||!t.value)return;let r=t.value.getBoundingClientRect();p.value={top:`${r.bottom+globalThis.scrollY+8}px`,left:`${r.left+globalThis.scrollX}px`,width:`${r.width}px`}},E=()=>{D(()=>{let e=n.value?.lastElementChild,t=e?.children[m.value];if(!e||!t)return;let r=e.getBoundingClientRect(),i=t.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`})})},ne=e=>{e.key===`ArrowDown`?(e.preventDefault(),v(Math.min(m.value+1,g.value.length-1)),E()):e.key===`ArrowUp`?(e.preventDefault(),v(Math.max(m.value-1,0)),E()):e.key===`Enter`&&g.value[m.value]?(e.preventDefault(),S(g.value[m.value].id)):e.key===`Escape`&&y()},re=()=>{globalThis.removeEventListener(`resize`,T),globalThis.removeEventListener(`scroll`,T,!0),globalThis.removeEventListener(`click`,w,!0)};return z(_,e=>{!e&&f.value&&y()}),z(f,e=>{if(!e){re();return}T(),globalThis.addEventListener(`resize`,T),globalThis.addEventListener(`scroll`,T,!0),globalThis.addEventListener(`click`,w,!0)}),se(re),{dropdownOpen:f,search:d,focusedIndex:m,dropdownStyle:p,filteredCountries:g,hasDropdown:_,openDropdown:b,closeDropdown:y,toggleDropdown:te,selectCountry:S,setFocusedIndex:v,handleSearchChange:C,handleSearchKeydown:ne}}function W(e=1800){let t=M(!1),n=M(!1),r=H();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 G=1800;function _e({liveRef:e,fullFormatted:t,onCopy:n}){let r=H(),{copied:i,copy:a}=W(G),o=x(()=>i.value?`Copied`:`Copy ${t.value}`),s=x(()=>i.value?`Copied`:`Copy phone number`),c=t=>{e?.value&&(e.value.textContent=t,r.set(()=>{e.value&&(e.value.textContent=``)},G))};return{copied:i,copyAriaLabel:o,copyButtonTitle:s,onCopyClick:async()=>{let e=t.value.trim();await a(e)&&(n?.(e),c(`Phone number copied to clipboard`))}}}function ve({theme:e}){let t=M(!1),n=x(()=>{let n=I(e);return n===`auto`?t.value?`theme-dark`:`theme-light`:`theme-${n}`}),r=null,i=e=>{t.value=e.matches};return oe(()=>{r=globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)??null,r&&(t.value=r.matches,r.addEventListener(`change`,i))}),se(()=>{r?.removeEventListener(`change`,i)}),{themeClass:n}}var ye=[`disabled`,`tabindex`,`aria-label`,`aria-expanded`,`aria-haspopup`],be=[`aria-label`],xe={class:`pi-code`},Se={class:`pi-input-wrap`},Ce=[`placeholder`,`value`,`disabled`,`readonly`,`aria-invalid`],we={class:`pi-actions`,role:`toolbar`,"aria-label":`Phone input actions`},Te=[`aria-label`,`title`],Ee={key:1,width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},De={key:2,width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`},Oe=[`aria-label`,`title`],ke={key:0,width:`11`,height:`11`,viewBox:`0 0 14 14`,fill:`none`,"aria-hidden":`true`},Ae={class:`pi-search-wrap`},je=[`value`,`aria-activedescendant`,`placeholder`],Me=[`id`,`aria-selected`,`title`,`onClick`,`onMouseenter`],Ne=[`aria-label`],Pe={class:`pi-opt-name`},Fe={class:`pi-opt-code`},Ie={key:0,class:`pi-empty`},K=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})(ne({__name:`PhoneInput`,props:ie({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:ie([`change`,`country-change`,`validation-change`,`focus`,`blur`,`copy`,`clear`],[`update:modelValue`]),setup(e,{expose:t,emit:n}){let r=e,i=ue(),a=n,o=le(e,`modelValue`),s=e=>{o.value=e},{country:c,setCountry:l,locale:u}=de({country:()=>r.country,locale:()=>r.locale,detect:()=>r.detect,onCountryChange:e=>a(`country-change`,e)}),{digits:d,formatter:f,displayPlaceholder:p,displayValue:m,full:h,fullFormatted:g,isComplete:_,isEmpty:v,shouldShowWarn:ne}=fe({country:c,value:o,onChange:s,onPhoneChange:e=>a(`change`,e),onValidationChange:e=>a(`validation-change`,e)}),{showValidationHint:ie,clearValidationHint:oe,scheduleValidationHint:se}=pe(),k=R(`rootRef`),A=R(`telRef`),M=R(`liveRef`),P=R(`dropdownRef`),I=R(`searchRef`),z=R(`selectorRef`),B=re()?.uid??0,H=`pi-options-${B}`,me=e=>`pi-option-${B}-${e}`,U=x(()=>r.disabled||r.readonly),W=x(()=>ie.value&&ne.value),G=x(()=>r.showCopy&&!v.value&&!r.disabled),K=x(()=>r.showClear&&!v.value&&!U.value),{copied:q,copyAriaLabel:Le,copyButtonTitle:Re,onCopyClick:ze}=_e({liveRef:M,fullFormatted:g,onCopy:e=>a(`copy`,e)}),J=()=>D(()=>A.value?.focus()),{dropdownOpen:Y,search:X,focusedIndex:Z,dropdownStyle:Be,filteredCountries:Q,hasDropdown:$,closeDropdown:Ve,toggleDropdown:He,selectCountry:Ue,setFocusedIndex:We,handleSearchChange:Ge,handleSearchKeydown:Ke}=ge({rootRef:k,dropdownRef:P,searchRef:I,selectorRef:z,locale:u,countryOption:()=>r.country,inactive:U,onSelectCountry:l,onAfterSelect:J}),qe=x(()=>Y.value&&Q.value[Z.value]?me(Z.value):void 0),{handleBeforeInput:Je,handleInput:Ye,handleKeydown:Xe,handlePaste:Ze}=he({formatter:f,digits:d,inactive:U,onChange:s,scheduleValidationHint:se}),Qe=e=>{oe(!1),Ve(),a(`focus`,e)},$e=e=>a(`blur`,e),et=()=>{s(``),oe(),a(`clear`)},tt=()=>{et(),J()};t({focus:J,blur:()=>A.value?.blur(),clear:et,selectCountry:Ue,getFullNumber:()=>h.value,getFullFormattedNumber:()=>g.value,getDigits:()=>d.value,isValid:()=>_.value,isComplete:()=>_.value});let{themeClass:nt}=ve({theme:()=>r.theme}),rt=x(()=>[`phone-input`,`size-${r.size}`,nt.value,{"is-disabled":r.disabled,"is-readonly":r.readonly,"is-unstyled":r.disableDefaultStyles,"is-incomplete":r.withValidity&&W.value,"is-complete":r.withValidity&&_.value}]),it=x(()=>({"--pi-actions-count":+G.value+ +K.value+(i[`actions-before`]?1:0)}));return(t,n)=>(j(),C(`div`,{ref_key:`rootRef`,ref:k,"aria-label":`Phone input with country selector`,role:`group`,class:O(rt.value),style:ae(it.value)},[w(`div`,{ref_key:`selectorRef`,ref:z,class:`pi-selector`},[w(`button`,{type:`button`,class:O([`pi-selector-btn`,{"no-dropdown":!L($)||e.readonly}]),disabled:e.disabled,tabindex:U.value||!L($)?-1:void 0,"aria-label":`Selected country: ${L(c).name}`,"aria-expanded":L(Y),"aria-haspopup":L($)?`listbox`:void 0,onClick:n[0]||=(...e)=>L(He)&&L(He)(...e)},[w(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${L(c).name} flag`},[N(t.$slots,`flag`,{country:L(c)},()=>[T(F(L(c).flag),1)],!0)],8,be),w(`span`,xe,F(L(c).code),1),!U.value&&L($)?(j(),C(`svg`,{key:0,class:O([`pi-chevron`,{"is-open":L(Y)}]),width:`12`,height:`12`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`},[...n[8]||=[w(`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)):S(``,!0)],10,ye)],512),w(`div`,Se,[w(`input`,{ref_key:`telRef`,ref:A,type:`tel`,inputmode:`tel`,autocomplete:`tel-national`,autocorrect:`off`,autocapitalize:`off`,spellcheck:`false`,class:`pi-input`,placeholder:L(p),value:L(m),disabled:e.disabled,readonly:e.readonly,"aria-invalid":W.value,onBeforeinput:n[1]||=(...e)=>L(Je)&&L(Je)(...e),onInput:n[2]||=(...e)=>L(Ye)&&L(Ye)(...e),onKeydown:n[3]||=(...e)=>L(Xe)&&L(Xe)(...e),onPaste:n[4]||=(...e)=>L(Ze)&&L(Ze)(...e),onFocus:Qe,onBlur:$e},null,40,Ce),w(`div`,we,[E(b,{name:`fade-scale`},{default:V(()=>[N(t.$slots,`actions-before`,{},void 0,!0)]),_:3}),E(b,{name:`fade-scale`},{default:V(()=>[G.value?(j(),C(`button`,{key:0,type:`button`,class:O([`pi-btn`,`pi-btn-copy`,{"is-copied":L(q)}]),"aria-label":L(Le),title:L(Re),onClick:n[5]||=(...e)=>L(ze)&&L(ze)(...e)},[i[`copy-svg`]?N(t.$slots,`copy-svg`,{key:0,copied:L(q)},void 0,!0):L(q)?(j(),C(`svg`,De,[...n[10]||=[w(`path`,{d:`M6.5 11.5L3 8L4.06 6.94L6.5 9.38L11.94 3.94L13 5L6.5 11.5Z`,fill:`currentColor`},null,-1)]])):(j(),C(`svg`,Ee,[...n[9]||=[w(`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,Te)):S(``,!0)]),_:3}),E(b,{name:`fade-scale`},{default:V(()=>[K.value?(j(),C(`button`,{key:0,type:`button`,class:`pi-btn pi-btn-clear`,"aria-label":e.clearButtonLabel,title:e.clearButtonLabel,onClick:tt},[i[`clear-svg`]?N(t.$slots,`clear-svg`,{key:1},void 0,!0):(j(),C(`svg`,ke,[...n[11]||=[w(`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,Oe)):S(``,!0)]),_:3})])]),(j(),te(y,{to:`body`},[E(b,{name:`dropdown`},{default:V(()=>[L(Y)?(j(),C(`div`,{key:0,ref_key:`dropdownRef`,ref:P,class:O([`phone-dropdown`,[e.dropdownClass,L(nt)]]),role:`dialog`,"aria-modal":`false`,"aria-label":`Select country`,style:ae(L(Be))},[w(`div`,Ae,[w(`input`,{ref_key:`searchRef`,ref:I,value:L(X),type:`search`,class:`pi-search`,"aria-label":`Search countries`,"aria-controls":H,"aria-activedescendant":qe.value,placeholder:e.searchPlaceholder,onKeydown:n[6]||=(...e)=>L(Ke)&&L(Ke)(...e),onInput:n[7]||=(...e)=>L(Ge)&&L(Ge)(...e)},null,40,je)]),w(`ul`,{id:H,class:`pi-options`,role:`listbox`,tabindex:`-1`},[(j(!0),C(ee,null,ce(L(Q),(e,n)=>(j(),C(`li`,{id:me(n),key:e.id,role:`option`,class:O([`pi-option`,{"is-focused":n===L(Z),"is-selected":e.id===L(c).id}]),"aria-selected":e.id===L(c).id,title:e.name,onClick:t=>L(Ue)(e.id),onMouseenter:e=>L(We)(n)},[w(`span`,{class:`pi-flag`,role:`img`,"aria-label":`${e.name} flag`},[N(t.$slots,`flag`,{country:e},()=>[T(F(e.flag),1)],!0)],8,Ne),w(`span`,Pe,F(e.name),1),w(`span`,Fe,F(e.code),1)],42,Me))),128)),L(Q).length===0?(j(),C(`li`,Ie,F(e.noResultsText),1)):S(``,!0)])],6)):S(``,!0)]),_:3})])),w(`div`,{ref_key:`liveRef`,ref:M,class:`sr-only`,role:`status`,"aria-live":`polite`,"aria-atomic":`true`},null,512)],6))}}),[[`__scopeId`,`data-v-d730aa54`]]);function q(e){return typeof e==`string`?{country:e}:e&&typeof e==`object`?e:{}}function Le(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 Re(e,t){let n=t.formatter.getMaxDigits(),r=a(e.value,n),i=t.formatter.formatDisplay(r);(r!==t.digits||e.value!==i)&&Le(e,t,r)}function ze(e,t){let n=t.country.id,r=d(t.options.country);r&&r!==n&&X(e,t,r)}function J(e,t,n){return r=>{let i=n(r,t);i&&(Le(e,t,i.newDigits),D(()=>{v(e,t.formatter.getCaretPosition(i.caretDigitIndex))}))}}async function Y(e){let t=d(e.country);if(t)return t;if(e.detect){let e=d(await r());if(e)return e;let t=d(i());if(t)return t}return`US`}function X(e,t,r){let i=d(r);if(!i)return;let a=c(i,t.locale);t.country=a,t.options.onCountryChange?.(a),t.formatter=n(a),e.placeholder=t.formatter.getPlaceholder(),Re(e,t)}var Z={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 r=q(t.value),i=r.locale||u(),a=c(d(r.country,`US`),i),o={country:a,formatter:n(a),digits:``,locale:i,options:r};e.__phoneMaskState=o,o.inputHandler=J(e,o,m),o.keydownHandler=J(e,o,h),o.pasteHandler=J(e,o,g),o.beforeInputHandler=p,e.addEventListener(`beforeinput`,o.beforeInputHandler),e.addEventListener(`input`,o.inputHandler),e.addEventListener(`keydown`,o.keydownHandler),e.addEventListener(`paste`,o.pasteHandler),Y(r).then(t=>{e.__phoneMaskState===o&&X(e,o,t)})},updated(e,t){let n=e.__phoneMaskState;n&&(n.options=q(t.value),ze(e,n),Re(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 Be(e){let t=P(null),{country:n,setCountry:r}=de({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}=fe({country:n,value:e.value,onChange:e.onChange,onPhoneChange:e.onPhoneChange}),{handleBeforeInput:p,handleInput:m,handleKeydown:h,handlePaste:g}=he({formatter:a,digits:i,onChange:e.onChange});return k(()=>{let e=t.value;e&&(e.setAttribute(`type`,`tel`),e.setAttribute(`inputmode`,`tel`))}),B(()=>{let e=t.value;e&&(e.value=s.value,e.setAttribute(`placeholder`,o.value))},{flush:`post`}),k(()=>{let e=t.value;e&&(e.addEventListener(`beforeinput`,p),e.addEventListener(`input`,m),e.addEventListener(`keydown`,h),e.addEventListener(`paste`,g))}),A(()=>{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`,K),e.directive(`phone-mask`,Z)}var $={install:Q},Ve={getFlagEmoji:l,countPlaceholders:t,formatDigitsWithMap:s,pickMaskVariant:f,removeCountryCodePrefix:_};export{Ve as PMaskHelpers,K as PhoneInput,$ as default,Q as install,Be as usePhoneMask,Z as vPhoneMask,X as vPhoneMaskSetCountry};
@@ -1,4 +1,4 @@
1
- import { countPlaceholders, formatDigitsWithMap, pickMaskVariant, removeCountryCodePrefix, toArray } from '@desource/phone-mask';
1
+ import { countPlaceholders, formatDigitsWithMap, pickMaskVariant, removeCountryCodePrefix } from '@desource/phone-mask';
2
2
  import type { App } from 'vue';
3
3
  import PhoneInput from './components/PhoneInput.vue';
4
4
  import { vPhoneMask as phoneMaskDirective, setCountry as setPhoneMaskCountry } from './directives/vPhoneMask';
@@ -21,6 +21,5 @@ export declare const PMaskHelpers: {
21
21
  formatDigitsWithMap: typeof formatDigitsWithMap;
22
22
  pickMaskVariant: typeof pickMaskVariant;
23
23
  removeCountryCodePrefix: typeof removeCountryCodePrefix;
24
- toArray: typeof toArray;
25
24
  };
26
25
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,uBAAuB,EACvB,OAAO,EACR,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9G,KAAK,oBAAoB,GAAG,OAAO,UAAU,CAAC;AAC9C,KAAK,mBAAmB,GAAG,OAAO,kBAAkB,CAAC;AACrD,KAAK,wBAAwB,GAAG,OAAO,mBAAmB,CAAC;AAE3D,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CAG/B;AAED,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,CAAC;AAEnH,OAAO,EAAE,UAAU,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEzF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,YAAY,EACV,WAAW,IAAI,gBAAgB,EAC/B,IAAI,IAAI,cAAc,EACtB,KAAK,IAAI,eAAe,EACxB,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,SAAS,CAAC;;;;AAEjB,wBAEE;AAEF,YAAY,EACV,UAAU,IAAI,WAAW,EACzB,QAAQ,IAAI,SAAS,EACrB,WAAW,IAAI,YAAY,EAC3B,IAAI,IAAI,KAAK,EACb,OAAO,IAAI,QAAQ,EACnB,YAAY,IAAI,aAAa,EAC7B,eAAe,IAAI,gBAAgB,EACnC,QAAQ,IAAI,SAAS,EACrB,WAAW,IAAI,YAAY,EAC5B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9G,KAAK,oBAAoB,GAAG,OAAO,UAAU,CAAC;AAC9C,KAAK,mBAAmB,GAAG,OAAO,kBAAkB,CAAC;AACrD,KAAK,wBAAwB,GAAG,OAAO,mBAAmB,CAAC;AAE3D,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CAG/B;AAED,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,CAAC;AAEnH,OAAO,EAAE,UAAU,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEzF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,YAAY,EACV,WAAW,IAAI,gBAAgB,EAC/B,IAAI,IAAI,cAAc,EACtB,KAAK,IAAI,eAAe,EACxB,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,SAAS,CAAC;;;;AAEjB,wBAEE;AAEF,YAAY,EACV,UAAU,IAAI,WAAW,EACzB,QAAQ,IAAI,SAAS,EACrB,WAAW,IAAI,YAAY,EAC3B,IAAI,IAAI,KAAK,EACb,OAAO,IAAI,QAAQ,EACnB,YAAY,IAAI,aAAa,EAC7B,eAAe,IAAI,gBAAgB,EACnC,QAAQ,IAAI,SAAS,EACrB,WAAW,IAAI,YAAY,EAC5B,MAAM,sBAAsB,CAAC;AAE9B,eAAO,MAAM,YAAY;;;;;;CAMxB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@desource/phone-mask-vue",
3
- "version": "1.1.2",
3
+ "version": "1.2.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",
@@ -56,7 +56,7 @@
56
56
  "vue": "^3.4.33"
57
57
  },
58
58
  "dependencies": {
59
- "@desource/phone-mask": "1.1.2"
59
+ "@desource/phone-mask": "1.2.0"
60
60
  },
61
61
  "devDependencies": {
62
62
  "@testing-library/vue": "^8.1.0",