@fifteen/design-system-vue
Version:
Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System
2 lines (1 loc) • 4.46 kB
JavaScript
"use strict";const w=require("./FField.js");;/* empty css */const z=require("./FInput.js");;/* empty css */const H=require("../FLoader.js");;/* empty css */const N=require("../FCreditCardIcon.js");;/* empty css */const A=require("../FIcon.js");;/* empty css */const e=require("vue"),C=require("../../utils/credit-cards.js"),L=require("../../.generated/icons.js"),W=require("../../.generated/credit-cards.js"),g=require("../../composables/useIcon.js"),P=require("../../composables/useFieldWithValidation.js"),U=require("../../composables/useInputEventBindings.js"),m="#### #### #### ####",$=e.defineComponent({__name:"FCreditCardInput",props:{placeholder:{default:"4000 1234 5678 9012"},outlineColor:{default:"neutral--light-3"},placeholderTextColor:{default:"neutral--dark-2"},focusColor:{default:"neutral--light-5"},focusBorderColor:{default:"secondary"},optionsMenuColor:{default:"neutral--light-3"},optionTextColor:{default:"neutral--dark-3"},fieldset:{type:Boolean},name:{default:""},label:{default:""},labelTextColor:{default:"neutral--dark-4"},hint:{default:""},hintTextColor:{default:"neutral--dark-4"},hideHint:{type:Boolean},hintIcon:{default:null},modelValue:{default:void 0},disabled:{type:Boolean},loading:{type:Boolean},color:{default:"neutral--light-3"},textColor:{default:"neutral--dark-4"},errorColor:{default:"danger"},validationTrigger:{default:"change"},rules:{type:[Function,Array],default:()=>[]},errorMessage:{default:""},validateOnMount:{type:Boolean,default:!1},borderColor:{default:"secondary"}},emits:["update:modelValue","input","change","focus","blur","credit-card","complete"],setup(v,{expose:_,emit:k}){const l=v,u=k;_({focus:x}),g.registerIcons("icons",{checkmark:L.checkmark}),g.registerIcons("creditCards",W);const{isValid:i,hint:F,value:n,validate:p,resetValidation:f}=P.useFieldWithValidation(l,{validateOnMount:l?.validateOnMount,rules:[d]}),{handleBlur:I,handleChange:y,handleFocus:b,handleInput:B}=U.useInputEventBindings(p,l.validationTrigger,u),q=e.computed(()=>({"FCreditCardInput--disabled":l.disabled})),a=e.ref(null);e.watch(n,o=>{const r=(o??"").replace(/\s/g,""),t=C.getCardInfo(r);t?.lengths.every(c=>r.length>c)||(t&&t.lengths.includes(r.length)||!t&&r.length===m.split("#").length-1?p(o):f(),a.value=t,u("credit-card",t),d(o)&&u("complete"))},{immediate:!0});function d(o){if(typeof o!="string"||!a.value)return!1;const r=o.replace(/\s/g,"");return C.luhnCheck(r)&&a.value.lengths.includes(r.length)}function V(o){f(),b(o)}const T=e.computed(()=>l.disabled?"neutral--dark-1":i.value?l.hintTextColor:l.errorColor),s=e.ref();function M(){s.value.forceValidation()}e.watch(i,M);function x(){s.value?.ref?.focus()}return(o,r)=>{const t=A,h=N,c=H,E=z,O=w;return e.openBlock(),e.createBlock(O,e.mergeProps({class:["FCreditCardInput",e.unref(q)]},{name:o.name,label:o.label,labelTextColor:o.labelTextColor,hint:e.unref(F),hideHint:o.hideHint,hintTextColor:e.unref(T),hintIcon:o.hintIcon}),{default:e.withCtx(()=>[e.createVNode(E,{ref_key:"inputRef",ref:s,modelValue:e.unref(n),"onUpdate:modelValue":r[0]||(r[0]=R=>e.isRef(n)?n.value=R:null),color:o.color,"border-color":o.borderColor,"text-color":o.textColor,"error-message":o.errorMessage,placeholder:o.placeholder,"placeholder-text-color":o.placeholderTextColor,"outline-color":o.outlineColor,"focus-color":o.focusColor,"focus-border-color":o.focusBorderColor,"error-color":o.errorColor,"validate-on-mount":o.validateOnMount,"validation-trigger":o.validationTrigger,disabled:o.disabled,rules:[()=>e.unref(i)],"hide-error-icon":"","hide-hint":"",mask:e.unref(a)?.mask??m,loading:o.loading,onFocus:V,onBlur:e.unref(I),onChange:e.unref(y),onInput:e.unref(B)},{suffix:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["FCreditCardInput__suffix",{"FCreditCardInput__suffix--valid":d(e.unref(n))}])},[e.createVNode(t,{name:"checkmark",color:"success",size:16}),o.loading?(e.openBlock(),e.createBlock(c,{key:1,color:o.placeholderTextColor,height:"24"},null,8,["color"])):(e.openBlock(),e.createBlock(h,{key:0,"card-type":e.unref(a)?.type,size:"32"},null,8,["card-type"]))],2)]),_:1},8,["modelValue","color","border-color","text-color","error-message","placeholder","placeholder-text-color","outline-color","focus-color","focus-border-color","error-color","validate-on-mount","validation-trigger","disabled","rules","mask","loading","onBlur","onChange","onInput"])]),_:1},16,["class"])}}});module.exports=$;