maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 10.3 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{n as useLibphonenumber,t as useMazInputPhoneNumber}from"./useMazInputPhoneNumber.CSCkr_Vt.js";import{computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineAsyncComponent,defineComponent,mergeProps,nextTick,normalizeClass,normalizeStyle,onBeforeMount,onMounted,openBlock,provide,ref,renderSlot,toDisplayString,unref,watch,withCtx}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import '../assets/MazInputPhoneNumber.CW4VVpBq.css';var _hoisted_1=[`id`];var _hoisted_2={class:`m-input-phone-number__country-list-code`};var MazInputPhoneNumber_default=_plugin_vue_export_helper_default(defineComponent({name:`MazInputPhoneNumber`,inheritAttrs:!1,__name:`MazInputPhoneNumber`,props:{style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},modelValue:{},countryCode:{},id:{},placeholder:{},label:{},preferredCountries:{},ignoredCountries:{},onlyCountries:{},translations:{},listPosition:{default:`bottom-start`},color:{default:`primary`},size:{default:`md`},hideFlags:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},example:{type:Boolean,default:!0},search:{type:Boolean,default:!0},searchThreshold:{default:.75},useBrowserLocale:{type:Boolean,default:!0},fetchCountry:{type:Boolean},hideCountrySelect:{type:Boolean,default:!1},showCodeInList:{type:Boolean,default:!1},customCountriesList:{default:void 0},autoFormat:{type:[String,Boolean],default:`blur`},countryLocale:{default:void 0},validationError:{type:Boolean,default:!0},validationSuccess:{type:Boolean,default:!0},success:{type:Boolean},error:{type:Boolean},displayCountryName:{type:Boolean,default:!1},block:{type:Boolean},orientation:{default:`responsive`},countrySelectAttributes:{default:()=>({name:`country`,autocomplete:`off`,style:{width:`14rem`}})},phoneInputAttributes:{default:()=>({name:`phone`,autocomplete:`tel`,inputmode:`tel`})}},emits:[`update:model-value`,`country-code`,`update:country-code`,`data`],setup(__props,{emit:__emit}){let props=__props;let emits=__emit;let MazSelectCountry=defineAsyncComponent(()=>import(`../components/MazSelectCountry.js`));let PhoneInput=defineAsyncComponent(()=>import(`../components/MazInputPhoneNumber/PhoneInput.js`));let{fetchCountryCode,getBrowserLocale,getCountryList}=useMazInputPhoneNumber();let{isCountryAvailable,getPhoneNumberResults}=useLibphonenumber();let instanceId=useInstanceUniqId({componentName:`MazInputPhoneNumber`,providedId:props.id});let phoneNumber=ref();let selectedCountry=ref();let{t}=useTranslations();let messages=computed(()=>({countrySelect:{error:props.translations?.countrySelect?.error||t(`inputPhoneNumber.countrySelect.error`),placeholder:props.translations?.countrySelect?.placeholder||t(`inputPhoneNumber.countrySelect.placeholder`),searchPlaceholder:props.translations?.countrySelect?.searchPlaceholder||t(`inputPhoneNumber.countrySelect.searchPlaceholder`)},phoneInput:{placeholder:props.translations?.phoneInput?.placeholder||t(`inputPhoneNumber.phoneInput.placeholder`),example:props.translations?.phoneInput?.example}}));let isPhoneNumberInternalUpdate=ref(!1);let isCountryInternalUpdate=ref(!1);let results=ref({isValid:!1,countryCode:props.countryCode,phoneNumber:props.modelValue});let PhoneInputRef=ref();onBeforeMount(async()=>{if(props.countryCode&&!selectedCountry.value&&onCountryChanged({countryCode:props.countryCode}),props.fetchCountry&&!selectedCountry.value){let{data:countryCode,error}=await fetchCountryCode();if(error){console.error(`[MazInputPhoneNumber](onBeforeMount) Error while fetching country code - ${error.message}`);return}onCountryChanged({countryCode})}}),onMounted(()=>{if(!selectedCountry.value&&props.useBrowserLocale){let countryCode=getBrowserLocale()?.locale;countryCode&&isCountryAvailable(countryCode)&&onCountryChanged({countryCode})}});function updateTheResults({phone=phoneNumber.value||props.modelValue,countryCode=selectedCountry.value,checkCountryCode=!1}){results.value=getPhoneNumberResults({phoneNumber:phone,countryCode,checkCountryCode})}async function selectPhoneNumberInput(){await nextTick(),setTimeout(()=>{PhoneInputRef.value?.focus()},100)}function setSelectedCountry(countryCode){if(countryCode){if(!isCountryAvailable(countryCode)){console.warn(`[MazInputPhoneNumber] Country code not available: "${countryCode}"`),selectedCountry.value=void 0;return}selectedCountry.value=countryCode}}let isLetterRegex=/\D/g;function onPhoneNumberChanged({newPhoneNumber}){updateTheResults({phone:newPhoneNumber}),results.value.parsedCountryCode&&results.value.parsedCountryCode!==selectedCountry.value&&onCountryChanged({countryCode:results.value.parsedCountryCode,updateResults:!1}),results.value.isValid&&(props.autoFormat===`blur`||props.autoFormat===`typing`)?phoneNumber.value=results.value.formatNational?.trim().replaceAll(isLetterRegex,``):phoneNumber.value=newPhoneNumber,isPhoneNumberInternalUpdate.value=!0,results.value.e164?emits(`update:model-value`,results.value.e164):emits(`update:model-value`,results.value.phoneNumber),setTimeout(()=>{isPhoneNumberInternalUpdate.value=!1},0)}function onCountryChanged({countryCode,updateResults=!0,selectPhoneNumber=!1}){if(!countryCode){selectedCountry.value=void 0;return}isCountryInternalUpdate.value=!0,countryCode!==selectedCountry.value&&setSelectedCountry(countryCode),updateResults&&updateTheResults({countryCode:selectedCountry.value,checkCountryCode:!0});let code=selectedCountry.value;emits(`country-code`,code),emits(`update:country-code`,code),selectPhoneNumber&&!results.value.isValid&&selectPhoneNumberInput(),setTimeout(()=>{isCountryInternalUpdate.value=!1},0)}let countriesList=computed(()=>{let list=getCountryList(props.countryLocale,props.customCountriesList);return props.onlyCountries&&(list=list?.filter(country=>props.onlyCountries?.includes(country.code))),props.ignoredCountries&&(list=list?.filter(country=>!props.ignoredCountries?.includes(country.code))),props.preferredCountries&&(list=list?.sort((a,b)=>{let indexA=props.preferredCountries?.indexOf(a.code)??-1;let indexB=props.preferredCountries?.indexOf(b.code)??-1;return indexA>=0&&indexB>=0?indexA-indexB:indexA>=0?-1:+(indexB>=0)})),list??[]});return watch(()=>props.modelValue,(value,oldValue)=>{!isPhoneNumberInternalUpdate.value&&value!==oldValue&&value!==phoneNumber.value&&onPhoneNumberChanged({newPhoneNumber:value})},{immediate:!0}),watch(()=>props.countryCode,(value,oldValue)=>{!isCountryInternalUpdate.value&&value&&value!==oldValue&&value!==selectedCountry.value&&onCountryChanged({countryCode:value})},{immediate:!0}),watch(results,value=>emits(`data`,value),{immediate:!0}),provide(`mazInputPhoneNumberData`,{selectedCountry,phoneNumber,results}),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{id:unref(instanceId),class:normalizeClass([`m-input-phone-number m-reset-css`,[props.class,{"--block":__props.block},__props.orientation?`--${__props.orientation}`:void 0]]),style:normalizeStyle(__props.style)},[__props.hideCountrySelect?createCommentVNode(``,!0):(openBlock(),createBlock(unref(MazSelectCountry),mergeProps({key:0,id:`${unref(instanceId)}-country`,class:`m-input-phone-number__country-select`},__props.countrySelectAttributes,{"model-value":selectedCountry.value,"option-input-value-key":__props.displayCountryName?`name`:`dialCode`,color:__props.color,size:__props.size,locale:__props.countryLocale,"countries-list":__props.customCountriesList,"list-position":__props.listPosition,"hide-flags":__props.hideFlags,search:__props.search,block:__props.block,error:__props.error||(__props.validationError?!!phoneNumber.value&&!selectedCountry.value:!1),success:__props.success||(__props.validationSuccess?results.value?.isValid:!1),translations:messages.value.countrySelect,hint:phoneNumber.value&&!selectedCountry.value?messages.value.countrySelect.error:void 0,options:countriesList.value,disabled:__props.disabled,required:__props.required,"search-threshold":__props.searchThreshold,"format-input-value":__props.displayCountryName||!selectedCountry.value?void 0:value=>`+${value}`,"show-code-in-list":__props.showCodeInList,label:messages.value.countrySelect.placeholder,"onUpdate:modelValue":_cache[0]||=$event=>onCountryChanged({countryCode:$event,selectPhoneNumber:!0})}),{"no-results":withCtx(()=>[renderSlot(_ctx.$slots,`no-results`,{},void 0,!0)]),"selector-flag":withCtx(({countryCode:codeCountry})=>[renderSlot(_ctx.$slots,`selector-flag`,{countryCode:codeCountry},void 0,!0)]),"country-list-flag":withCtx(({isSelected,option})=>[renderSlot(_ctx.$slots,`country-list-flag`,{countryCode:option.code,option,isSelected},void 0,!0)]),"country-list-code":withCtx(({option})=>[createElementVNode(`span`,_hoisted_2,` +`+toDisplayString(option.dialCode),1)]),_:3},16,[`id`,`model-value`,`option-input-value-key`,`color`,`size`,`locale`,`countries-list`,`list-position`,`hide-flags`,`search`,`block`,`error`,`success`,`translations`,`hint`,`options`,`disabled`,`required`,`search-threshold`,`format-input-value`,`show-code-in-list`,`label`])),createVNode(unref(PhoneInput),mergeProps({id:`${unref(instanceId)}-phone`,ref_key:`PhoneInputRef`,ref:PhoneInputRef,class:`m-input-phone-number__phone-input`,"model-value":phoneNumber.value},{..._ctx.$attrs,...__props.phoneInputAttributes},{color:__props.color,size:__props.size,"auto-format":__props.autoFormat,example:__props.example,block:``,disabled:__props.disabled,required:__props.required,name:__props.phoneInputAttributes.name,"has-radius":!__props.hideCountrySelect,success:__props.success||(__props.validationSuccess?results.value.isValid:!1),error:__props.error||(__props.validationError?!!phoneNumber.value&&!results.value.isValid:!1),locales:messages.value.phoneInput,label:__props.label,placeholder:__props.placeholder,"onUpdate:modelValue":_cache[1]||=$event=>onPhoneNumberChanged({newPhoneNumber:$event})}),null,16,[`id`,`model-value`,`color`,`size`,`auto-format`,`example`,`disabled`,`required`,`name`,`has-radius`,`success`,`error`,`locales`,`label`,`placeholder`])],14,_hoisted_1))}}),[[`__scopeId`,`data-v-cc259039`]]);export{MazInputPhoneNumber_default as t};