maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 4.11 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"../../chunks/_plugin-vue_export-helper.ChmETRGw.js";import{useInjectStrict}from"../../composables/useInjectStrict.js";import{t as MazInput_default}from"../../chunks/MazInput.C8eCMnat.js";import{n as useLibphonenumber,t as useMazInputPhoneNumber}from"../../chunks/useMazInputPhoneNumber.CSCkr_Vt.js";import{computed,createBlock,defineComponent,mergeModels,mergeProps,onMounted,openBlock,ref,unref,useModel,useTemplateRef}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import '../../assets/PhoneInput.Cr63JIn7.css';var PhoneInput_default=_plugin_vue_export_helper_default(defineComponent({__name:`PhoneInput`,props:mergeModels({style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},placeholder:{},label:{},topLabel:{},assistiveText:{},color:{},type:{},required:{type:Boolean},disabled:{type:Boolean},readonly:{type:Boolean},id:{},error:{type:Boolean},success:{type:Boolean},warning:{type:Boolean},hint:{},inputClasses:{},border:{type:Boolean},inputmode:{},size:{},debounce:{type:[Boolean,Number]},autoFocus:{type:Boolean},borderActive:{type:Boolean},leftIcon:{type:[String,Function,Object]},rightIcon:{type:[String,Function,Object]},roundedSize:{},block:{type:Boolean},name:{},autocomplete:{},loading:{type:Boolean},locales:{},example:{type:Boolean},hasRadius:{type:Boolean},autoFormat:{type:[String,Boolean]}},{modelValue:{},modelModifiers:{}}),emits:[`update:modelValue`],setup(__props,{expose:__expose}){let{getPhoneNumberExample,getAsYouTypeFormat,loadExamples}=useLibphonenumber();let{sanitizePhoneNumber}=useMazInputPhoneNumber();let{results,selectedCountry}=useInjectStrict(`mazInputPhoneNumberData`);let modelValue=useModel(__props,`modelValue`);let inputFocused=ref(!1);let asYouTypeFormatted=computed(()=>{let phoneNumberToFormat=results.value.isValid?results.value.formatNational:modelValue.value;return getAsYouTypeFormat(selectedCountry.value,phoneNumberToFormat)||phoneNumberToFormat});let displayedPhoneNumber=computed({get:()=>!inputFocused.value&&__props.autoFormat===`blur`||__props.autoFormat===`typing`?asYouTypeFormatted.value:modelValue.value,set:value=>{modelValue.value=sanitizePhoneNumber(value)}});let{t}=useTranslations();function getCountryPhoneNumberExample(selectedCountry){let example=getPhoneNumberExample(selectedCountry);if(example)return __props.locales.example?__props.locales.example.replace(`{example}`,example):t(`inputPhoneNumber.phoneInput.example`,{example})}let inputLabelOrPlaceholder=computed(()=>{if(__props.label||__props.placeholder)return __props.label||__props.placeholder;let defaultPlaceholder=__props.locales.placeholder;if(!__props.example||!inputFocused.value)return defaultPlaceholder;{let phoneExample=getCountryPhoneNumberExample(selectedCountry.value);return results.value?.isValid||!phoneExample?defaultPlaceholder:phoneExample}});let inputProps=computed(()=>__props.placeholder?{placeholder:inputLabelOrPlaceholder.value}:{label:inputLabelOrPlaceholder.value});onMounted(()=>{__props.example&&loadExamples()});let inputRef=useTemplateRef(`input`);return __expose({focus:()=>{inputRef.value?.$el.querySelector(`input`)?.focus()}}),(_ctx,_cache)=>(openBlock(),createBlock(MazInput_default,mergeProps({id:__props.id},{..._ctx.$attrs,...inputProps.value},{ref:`input`,modelValue:displayedPhoneNumber.value,"onUpdate:modelValue":_cache[0]||=$event=>displayedPhoneNumber.value=$event,disabled:__props.disabled,color:__props.color,error:__props.error,size:__props.size,success:__props.success,block:``,name:__props.name,inputmode:__props.inputmode,autocomplete:__props.autocomplete,class:[`m-phone-input`,[{"--border-radius":__props.hasRadius,"--error":__props.error||!unref(results).isValid,"--focused":inputFocused.value}]],onFocus:_cache[1]||=$event=>inputFocused.value=!0,onBlur:_cache[2]||=$event=>inputFocused.value=!1}),null,16,[`id`,`modelValue`,`disabled`,`color`,`error`,`size`,`success`,`name`,`inputmode`,`autocomplete`,`class`]))}}),[[`__scopeId`,`data-v-3c3b2d61`]]);export{PhoneInput_default as default};