@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
3 lines (2 loc) • 3.48 kB
JavaScript
"use strict";const o=require("vue"),q=require("../../../model/user-input/input/NeonInputType.cjs.js"),l=require("../../../model/common/state/NeonState.cjs.js"),F=require("../../../model/common/size/NeonSize.cjs.js"),i=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),w=require("../../presentation/icon/NeonIcon.vue.cjs.js"),L=require("../../../utils/common/debounce/NeonDebounceUtils.cjs.js"),z=require("../../../model/user-input/input/NeonInputMode.cjs.js"),D=o.defineComponent({name:"NeonInput",components:{NeonIcon:w},props:{id:{type:String,default:null},modelValue:{type:String,default:null},type:{type:String,default:q.NeonInputType.Text},placeholder:{type:String,default:null},size:{type:String,default:F.NeonSize.Medium},color:{type:String,default:i.NeonFunctionalColor.Primary},inputmode:{type:String,default:z.NeonInputMode.Text},autocomplete:{type:String,default:"on"},state:{type:String,default:l.NeonState.Ready},rows:{type:Number,default:null},icon:{type:String,default:null},iconReadonly:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},tabindex:{type:Number,default:0},disabled:{type:Boolean,default:!1},stateHighlight:{type:Boolean,default:!0},stateIcon:{type:Boolean,default:!0},maxlength:{type:Number,default:null},maxlengthLabel:{type:String,default:"No characters left | 1 character left | {count} characters left"},debounce:{type:Number,default:void 0}},emits:["focus","blur","icon-click","update:modelValue"],setup(e,{emit:u,expose:m}){const g=o.useAttrs(),c=o.ref(null),r=o.ref(!1),h=o.computed(()=>{const{onBlur:t,onFocus:n,onIconClick:a,...B}=g;return B}),d=L.NeonDebounceUtils.debounce(t=>{u("update:modelValue",t)},e.debounce),s=o.computed(()=>{var t;switch(e.state){case l.NeonState.Loading:return"loading";case l.NeonState.Success:return e.stateIcon?"check":void 0;case l.NeonState.Error:return e.stateIcon?"times":void 0;default:return e.icon?e.icon:e.modelValue&&(((t=e.modelValue)==null?void 0:t.length)||0)>0?"times":void 0}}),y=o.computed(()=>{var t;return s.value&&!e.hideIcon&&(e.state!=="ready"||e.icon||e.modelValue&&!e.disabled&&(((t=e.modelValue)==null?void 0:t.length)||0)>0)}),N=o.computed(()=>{switch(e.state){case l.NeonState.Success:return i.NeonFunctionalColor.Success;case l.NeonState.Error:return i.NeonFunctionalColor.Error;case l.NeonState.Loading:return e.color;default:return i.NeonFunctionalColor.LowContrast}}),S=o.computed(()=>{var t;if(e.maxlength&&e.maxlength>0){const n=e.maxlengthLabel.split(" | "),a=e.maxlength-(((t=e.modelValue)==null?void 0:t.length)||0);switch(a){case 0:return n[0];case 1:return n[1];default:return n[2].replace("{count}",`${a}`)}}return null}),f=()=>{var t;(t=c.value)==null||t.focus()},b=()=>{var t;(t=c.value)==null||t.click()},x=()=>{r.value=!0,u("focus")},V=()=>{r.value=!1,u("blur")},v=t=>{e.disabled||(e.icon?u("icon-click"):(d(""),setTimeout(f)),t.preventDefault(),t.stopPropagation())},I=t=>{const n=t.target.value,a=e.maxlength&&n.length>e.maxlength?n.substring(0,e.maxlength):n;e.modelValue!==a&&d(a)},C=t=>{var n;t.key!=="Backspace"&&e.maxlength&&e.modelValue&&(((n=e.modelValue)==null?void 0:n.length)||0)>=e.maxlength&&t.preventDefault()},k=o.computed(()=>e.placeholder||"");return m({neonInput:c}),{neonInput:c,focused:r,sanitizedAttributes:h,iconVisible:y,iconName:s,iconColor:N,computedPlaceholder:k,counterLabel:S,focus:f,click:b,onFocus:x,onBlur:V,iconClicked:v,changeValue:I,onKeyDown:C}}});module.exports=D;
//# sourceMappingURL=NeonInput.cjs.js.map