@fifteen/design-system-vue
Version:
Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System
2 lines (1 loc) • 7.2 kB
JavaScript
;const J=require("./FField.js");;/* empty css */const G=require("../FMenu.js");;/* empty css */const Q=require("../FDivider.js");;/* empty css */const X=require("../FIcon.js");;/* empty css */const Y=require("../FFlagIcon.js");;/* empty css */const e=require("vue"),l=require("libphonenumber-js"),_=require("../../vendor/libphonenumber-js/examples.mobile.json.js"),y=require("../../vendor/@fifteen/shared-lib/dist/es/composables/useVModelProxy.js");require("../../vendor/countup.js/dist/countUp.min.js");require("@vueuse/core");require("../../vendor/@fifteen/shared-lib/dist/es/composables/useLocaleFormat.js");require("../../vendor/@fifteen/shared-lib/dist/es/helpers/consoleWatch.js");require("../../vendor/@fifteen/shared-lib/dist/es/utils/text.js");const Z=require("./FInput.js");;/* empty css */const b=require("../../utils/getCssColor.js"),ee=require("../../.generated/icons.js"),oe=require("../../.generated/flags.js"),F=require("../../composables/useIcon.js"),re=require("../../composables/useFieldWithValidation.js"),ne=require("../../composables/useInputEventBindings.js"),te={class:"FPhoneInput__prefix"},le=["aria-checked","onKeydown","onClick","onBlur"],ue=["aria-checked","onKeydown","onClick","onBlur"],ae=e.defineComponent({__name:"FPhoneInput",props:{phoneNumber:{default:""},countryCode:{default:"FR"},outlineColor:{default:"neutral--light-3"},textPhonePrefixColor:{default:"neutral--dark-3"},placeholderTextColor:{default:"neutral--dark-2"},focusColor:{default:"neutral--light-5"},focusBorderColor:{default:"secondary"},optionsMenuColor:{default:"neutral--light-3"},optionTextColor:{default:"neutral--dark-3"},validationTrigger:{default:"change"},fieldset:{type:Boolean},name:{default:""},label:{},labelTextColor:{},hint:{},hintTextColor:{},hideHint:{type:Boolean},hintIcon:{},modelValue:{},disabled:{type:Boolean},loading:{type:Boolean},color:{default:"neutral--light-3"},textColor:{default:"neutral--dark-4"},errorColor:{default:"danger"},rules:{type:[Function,Array],default:()=>[]},errorMessage:{default:""},validateOnMount:{type:Boolean,default:!1},borderColor:{default:"secondary"}},emits:["update:modelValue","update:phoneNumber","update:countryCode","input","change","focus","blur"],setup(P,{expose:I,emit:N}){const r=P,V=N;I({focus:L}),F.registerIcons("icons",{chevronDown:ee.chevronDown}),F.registerIcons("flags",oe);const t=y.useVModelProxy({props:r,propName:"countryCode"}),{isValid:d,hint:x,validate:f,value:q}=re.useFieldWithValidation(r,{validateOnMount:r?.validateOnMount,rules:[o=>g(o)||C(o),...Array.isArray(r.rules)?r.rules:[r.rules]]}),{handleBlur:w,handleChange:k,handleFocus:T,handleInput:B}=ne.useInputEventBindings(()=>f(h.value),r.validationTrigger,V),M=e.computed(()=>({"FPhoneInput--disabled":r.disabled,"FPhoneInput--loading":r.loading})),E=e.computed(()=>({"--fphoneinput--textColor":b.getCssColor(r.textColor),"--fphoneinput--textPhonePrefixColor":b.getCssColor(r.textPhonePrefixColor)})),A=e.computed(()=>l.getExampleNumber(t.value,_)?.format("INTERNATIONAL").replace(`+${l.getCountryCallingCode(t.value)} `,"")),c=e.computed(()=>`+${l.getCountryCallingCode(t.value)}`),u=y.useVModelProxy({props:r,propName:"phoneNumber"}),h=e.computed(()=>{const o=u.value!==""?c.value+u.value:"";return!C(o)&&g(o)?l.parsePhoneNumber(o).number:o});e.watch([c,u],()=>{f(h.value,!1)});const O=l.getCountries().map(o=>({label:o,value:o})),R=e.computed(()=>({"FPhoneInput__icon--flipped":s.value})),D=e.computed(()=>{const o=l.getExampleNumber(t.value,_),n=o?.format("NATIONAL",{nationalPrefix:!1})?.replace(/[0-9]/g,"#")??"",a=o?.format("INTERNATIONAL").replace(`+${l.getCountryCallingCode(t.value)} `,"").replace(/[0-9]/g,"#")??"";return[n,a]});function C(o){if(typeof o!="string")return!1;const n=`+${l.getCountryCallingCode(t.value)}`;return o===""||o===n}function g(o){return typeof o!="string"?!1:l.isValidPhoneNumber(o)}const s=e.ref(!1),K=e.computed(()=>r.disabled?"neutral--dark-1":d.value?r.hintTextColor:r.errorColor);function $(o){return o.value}const p=e.ref();function H(){p.value?.forceValidation()}e.watch(d,H);function L(){p.value?.ref?.focus()}return e.watch(q,o=>{const n=String(o);if(n===""&&(u.value=""),!l.isValidPhoneNumber(n))return;const a=l.parsePhoneNumber(n);u.value=a.nationalNumber,a.country&&(t.value=a.country)},{immediate:!0}),(o,n)=>{const a=Y,U=X,W=Q,z=G,S=J;return e.openBlock(),e.createBlock(S,e.mergeProps({class:["FPhoneInput",e.unref(M)],style:e.unref(E)},{name:o.name,label:o.label,labelTextColor:o.labelTextColor,hint:e.unref(x),hideHint:o.hideHint,hintTextColor:e.unref(K),hintIcon:o.hintIcon}),{default:e.withCtx(()=>[e.createVNode(z,{modelValue:e.unref(s),"onUpdate:modelValue":n[1]||(n[1]=i=>e.isRef(s)?s.value=i:null),"selected-option":e.unref(t),"onUpdate:selectedOption":n[2]||(n[2]=i=>e.isRef(t)?t.value=i:null),options:e.unref(O),color:o.optionsMenuColor,"text-color":o.optionTextColor,disabled:o.disabled,width:"100","option-height":"48","prevent-activation":""},{activator:e.withCtx(({toggleMenu:i,openMenu:m,closeMenu:v})=>[e.createVNode(Z,{ref_key:"inputRef",ref:p,modelValue:e.unref(u),"onUpdate:modelValue":n[0]||(n[0]=j=>e.isRef(u)?u.value=j:null),color:o.color,"text-color":o.textColor,"error-message":o.errorMessage,placeholder:e.unref(A),"placeholder-text-color":o.placeholderTextColor,"validate-on-mount":o.validateOnMount,"validation-trigger":o.validationTrigger,disabled:o.disabled,rules:[()=>e.unref(d)],"outline-color":o.outlineColor,"focus-color":o.focusColor,"border-color":o.borderColor,"focus-border-color":o.focusBorderColor,"error-color":o.errorColor,"hide-hint":"",mask:e.unref(D),loading:o.loading,onFocus:e.unref(T),onBlur:e.unref(w),onChange:e.unref(k),onInput:e.unref(B)},{prefix:e.withCtx(()=>[e.createElementVNode("div",te,[e.createElementVNode("div",{class:"FPhoneInput__selectedValue",role:"switch","aria-checked":e.unref(s),tabindex:"0",onKeydown:e.withKeys(m,["enter"]),onClick:e.withModifiers(i,["stop"]),onBlur:v},[e.createVNode(a,{class:"FPhoneInput__selectedFlag","flag-code":e.unref(t)},null,8,["flag-code"]),e.createVNode(U,{class:e.normalizeClass(["FPhoneInput__icon",e.unref(R)]),name:"chevronDown",color:"transparent",size:12,"stroke-color":o.textPhonePrefixColor,"stroke-width":2},null,8,["class","stroke-color"])],40,le),e.createVNode(W,{vertical:"",height:"24",margins:!1,color:"neutral--light-5"}),e.createElementVNode("span",{class:"FPhoneInput__phonePrefix",role:"switch","aria-checked":e.unref(s),tabindex:"-1",onKeydown:e.withKeys(m,["enter"]),onClick:e.withModifiers(i,["stop"]),onBlur:v},e.toDisplayString(e.unref(c)),41,ue)])]),_:2},1032,["modelValue","color","text-color","error-message","placeholder","placeholder-text-color","validate-on-mount","validation-trigger","disabled","rules","outline-color","focus-color","border-color","focus-border-color","error-color","mask","loading","onFocus","onBlur","onChange","onInput"])]),"option-prefix":e.withCtx(({option:i})=>[e.createVNode(a,{class:"FPhoneInput__optionPrefix","flag-code":$(i)},null,8,["flag-code"])]),_:1},8,["modelValue","selected-option","options","color","text-color","disabled"])]),_:1},16,["class","style"])}}});module.exports=ae;