@fifteen/design-system-vue/dist/cjs/components/form/FDigitsInput.js

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

"use strict";const T=require("./FField.js");;/* empty css         */const I=require("../FLoader.js");;/* empty css           */const o=require("vue"),q=require("./FInput.js");;/* empty css         */const D=require("../../composables/useFieldWithValidation.js"),w={class:"FDigitsInput__input"},M=o.defineComponent({__name:"FDigitsInput",props:{digits:{default:4},outlineColor:{default:"neutral--light-3"},placeholderTextColor:{default:"neutral--dark-2"},focusColor:{default:"neutral--light-5"},focusBorderColor:{default:"secondary"},fieldset:{type:Boolean},name:{default:""},label:{},labelTextColor:{},hint:{},hintTextColor:{},hideHint:{type:Boolean},hintIcon:{},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},borderColor:{default:"secondary"}},emits:["update:modelValue","input","change","focus","blur","digit-input","complete"],setup(s,{expose:c,emit:d}){const l=s,f=d;c({focus:F});const p=o.computed(()=>({"FDigitsInput--loading":l.loading})),{isValid:u,hint:h,value:g,validate:i}=D.useFieldWithValidation(l,{validateOnMount:l.validateOnMount}),t=o.ref([]),r=o.computed(()=>(g.value??"").split("")),v=o.computed(()=>l.disabled?"neutral--dark-1":u.value?l.hintTextColor:l.errorColor);o.watch(r,()=>{r.value.length===l.digits&&!r.value.some(e=>e==="")&&(i(r.value.join("")),f("complete"))});function m(e){setTimeout(()=>{e>0?(t.value[e-1].ref?.focus(),t.value[e-1].ref?.select()):t.value[e].ref?.blur()},0)}async function C(e){await o.nextTick(),/[0-9]/.test(r.value[e])&&(e+1<l.digits?(t.value[e+1].ref?.focus(),t.value[e+1].ref?.select()):t.value[e].ref?.blur())}function _(e){t.value[e].ref?.select()}function b(){t.value.forEach(e=>e?.forceValidation())}o.watch(u,b);function y(){i(r.value.join(""))}function F(){t.value[0]?.ref?.focus()}const k={inputmode:"numeric",pattern:"[0-9]*"};return(e,O)=>{const B=I,V=T;return o.openBlock(),o.createBlock(V,o.mergeProps({class:"FDigitsInput"},{name:e.name,label:e.label,labelTextColor:e.labelTextColor,hint:o.unref(h),hideHint:e.hideHint,hintTextColor:o.unref(v),hintIcon:e.hintIcon},{class:o.unref(p)}),{default:o.withCtx(()=>[o.createElementVNode("div",w,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.digits,(E,n)=>(o.openBlock(),o.createBlock(q,{key:n,ref_for:!0,ref_key:"digitRefs",ref:t,modelValue:o.unref(r)[n],"onUpdate:modelValue":a=>o.unref(r)[n]=a,"text-align":"center","validation-trigger":"input","hide-hint":"",mask:"#",type:"text",attrs:k,rules:[()=>o.unref(u)],"validate-on-mount":e.validateOnMount,"hide-error-icon":"",disabled:e.disabled,color:e.color,"text-color":e.textColor,"outline-color":e.outlineColor,"placeholder-text-color":e.placeholderTextColor,"focus-color":e.focusColor,"border-color":e.borderColor,"focus-border-color":e.focusBorderColor,"error-color":e.errorColor,onChange:y,onFocus:a=>_(n),onInput:a=>C(n),onKeydown:o.withKeys(a=>m(n),["delete"])},null,8,["modelValue","onUpdate:modelValue","rules","validate-on-mount","disabled","color","text-color","outline-color","placeholder-text-color","focus-color","border-color","focus-border-color","error-color","onFocus","onInput","onKeydown"]))),128)),e.loading?(o.openBlock(),o.createBlock(B,{key:0,color:e.placeholderTextColor,height:"32"},null,8,["color"])):o.createCommentVNode("",!0)])]),_:1},16,["class"])}}});module.exports=M;