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

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

"use strict";const w=require("./FField.js");;/* empty css         */const N=require("../FLoader.js");;/* empty css           */const $=require("../FIcon.js");;/* empty css         */const e=require("vue"),A=require("../../vendor/maska/dist/maska.js"),r=require("../../utils/getCssColor.js"),g=require("../../.generated/icons.js"),O=require("../../composables/useIcon.js"),H=require("../../composables/useFieldWithValidation.js"),K=require("../../composables/useInputEventBindings.js"),R={key:0,class:"FInput__input__prefix"},z=["name","type","placeholder","disabled","aria-label"],D={key:1,class:"FInput__input__suffix"},L=e.defineComponent({__name:"FInput",props:{placeholder:{default:""},type:{default:"text"},attrs:{default:()=>({})},outlineColor:{default:"neutral--light-3"},placeholderTextColor:{default:"neutral--dark-2"},focusColor:{default:"neutral--light-5"},focusBorderColor:{default:"secondary"},hideErrorIcon:{type:Boolean,default:!1},textAlign:{default:"left"},mask:{default:""},clearable:{type:Boolean,default:!1},fieldset:{type:Boolean},name:{default:""},label:{default:""},labelTextColor:{default:"neutral--dark-4"},hint:{default:""},hintTextColor:{default:"neutral--dark-4"},hideHint:{type:Boolean,default:!1},hintIcon:{default:null},modelValue:{default:void 0},disabled:{type:Boolean,default:!1},loading:{type:Boolean},color:{default:"neutral--light-3"},textColor:{default:"neutral--dark-4"},errorColor:{default:"danger"},validationTrigger:{default:"blur"},rules:{type:[Function,Array],default:()=>[]},errorMessage:{default:""},validateOnMount:{type:Boolean},borderColor:{default:"secondary"}},emits:["update:modelValue","input","change","focus","blur","clear"],setup(v,{expose:y,emit:b}){const t=v,i=b,u=e.ref();y({ref:u,forceValidation:V,focus:m}),O.registerIcons("icons",{close:g.close,exclamationCircle:g.exclamationCircle});const{isValid:s,hint:k,value:a,validate:d}=H.useFieldWithValidation(t,{validateOnMount:t.validateOnMount}),{handleBlur:c,handleChange:p,handleInput:_,handleFocus:f}=K.useInputEventBindings(d,t.validationTrigger,i),I=e.computed(()=>({mask:t.mask})),B=e.computed(()=>({"--finput--color":r.getCssColor(t.color),"--finput--text-color":r.getCssColor(t.textColor),"--finput--placeholder-text-color":r.getCssColor(t.placeholderTextColor),"--finput--border-color":r.getCssColor(t.borderColor),"--finput--outline-color":r.getCssColor(`${t.outlineColor}--rgb`),"--finput--focus-color":r.getCssColor(t.focusColor),"--finput--focus-border-color":r.getCssColor(t.focusBorderColor),"--finput--error-color":r.getCssColor(t.errorColor),"--finput--text-align":t.textAlign})),F=e.computed(()=>({"FInput--error":!s.value,"FInput--disabled":t.disabled,"FInput--loading":t.loading})),x=e.computed(()=>t.disabled?"neutral--dark-1":s.value?t.hintTextColor:t.errorColor);function C(){a.value="",i("clear")}function V(){d(a.value)}function m(){u.value?.focus()}function q(o){o instanceof InputEvent&&_(o)}const T=e.computed(()=>({...t.attrs,...t.type==="number"?{pattern:"[0-9]*"}:{}}));return(o,l)=>{const h=$,E=N,M=w;return e.openBlock(),e.createBlock(M,e.mergeProps({class:["FInput",e.unref(F)],style:e.unref(B)},{name:o.name,label:o.label,labelTextColor:o.labelTextColor,hint:e.unref(k),hideHint:o.hideHint,hintTextColor:e.unref(x),hintIcon:o.hintIcon}),{default:e.withCtx(()=>[e.createElementVNode("div",{class:"FInput__input",role:"textbox",tabindex:"-1",onFocus:m},[o.$slots.prefix?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(o.$slots,"prefix")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({ref_key:"inputRef",ref:u},e.unref(T),{"onUpdate:modelValue":l[0]||(l[0]=n=>e.isRef(a)?a.value=n:null),name:o.name,type:o.type,placeholder:o.placeholder,disabled:o.disabled,"aria-label":o.label,onBlur:l[1]||(l[1]=(...n)=>e.unref(c)&&e.unref(c)(...n)),onChange:l[2]||(l[2]=(...n)=>e.unref(p)&&e.unref(p)(...n)),onFocus:l[3]||(l[3]=(...n)=>e.unref(f)&&e.unref(f)(...n)),onInput:q}),null,16,z),[[e.vModelDynamic,e.unref(a)],[e.unref(A.vMaska),void 0,e.unref(I)]]),o.$slots.suffix||o.loading||o.clearable?(e.openBlock(),e.createElementBlock("div",D,[e.renderSlot(o.$slots,"suffix",{},()=>[o.clearable&&e.unref(a)?(e.openBlock(),e.createBlock(h,{key:0,class:"FInput__input__suffix__clearableIcon",name:"close",tabindex:"0",size:24,color:o.textColor,onClick:e.withModifiers(C,["stop"]),onKeydown:e.withKeys(e.withModifiers(C,["stop"]),["enter","space"])},null,8,["color","onKeydown"])):e.createCommentVNode("",!0),o.loading?(e.openBlock(),e.createBlock(E,{key:1,color:o.placeholderTextColor,height:"24"},null,8,["color"])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0),!e.unref(s)&&!o.hideErrorIcon&&!o.loading?(e.openBlock(),e.createBlock(h,{key:2,class:"FInput__errorIcon",name:"exclamationCircle",color:o.errorColor,size:"16"},null,8,["color"])):e.createCommentVNode("",!0)],32)]),_:3},16,["style","class"])}}});module.exports=L;