@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
3 lines (2 loc) • 3.09 kB
JavaScript
"use strict";const n=require("vue"),a=require("../../../common/enums/NeonInputType.cjs.js"),o=require("../../../common/enums/NeonState.cjs.js"),x=require("../../../common/enums/NeonSize.cjs.js"),c=require("../../../common/enums/NeonFunctionalColor.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),q=require("../../../common/utils/NeonDebounceUtils.cjs.js"),F=require("../../../common/enums/NeonInputMode.cjs.js"),T=n.defineComponent({name:"NeonInput",components:{NeonIcon:B},props:{id:{type:String,default:null},modelValue:{type:String,default:null},type:{type:String,default:a.NeonInputType.Text},placeholder:{type:String,default:null},size:{type:String,default:x.NeonSize.Medium},color:{type:String,default:c.NeonFunctionalColor.LowContrast},inputmode:{type:String,default:F.NeonInputMode.Text},state:{type:String,default:o.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},debounce:{type:Number,default:void 0}},emits:["focus","blur","icon-click","update:modelValue"],setup(e,{emit:l}){const m=n.useAttrs(),i=n.ref(null),r=n.ref(!1),N=n.computed(()=>{const{onBlur:t,onFocus:u,onIconClick:d,...w}=m;return w}),s=q.NeonDebounceUtils.debounce(t=>{l("update:modelValue",t)},e.debounce),f=n.computed(()=>{switch(e.state){case o.NeonState.Loading:return"loading";case o.NeonState.Success:return e.stateIcon?"check":void 0;case o.NeonState.Error:return e.stateIcon?"times":void 0;default:return e.icon?e.icon:e.modelValue&&e.modelValue.length>0?"times":void 0}}),g=n.computed(()=>f.value&&!e.hideIcon&&(e.state!=="ready"||e.icon||e.modelValue&&!e.disabled&&e.modelValue.length>0)),y=n.computed(()=>{switch(e.state){case o.NeonState.Success:return c.NeonFunctionalColor.Success;case o.NeonState.Error:return c.NeonFunctionalColor.Error;case o.NeonState.Loading:return e.color;default:return c.NeonFunctionalColor.LowContrast}}),h=()=>{var t;(t=i.value)==null||t.focus()},S=()=>{var t;(t=i.value)==null||t.click()},b=()=>{r.value=!0,l("focus")},I=()=>{r.value=!1,l("blur")},v=t=>{e.disabled||(e.icon?l("icon-click"):s(""),t.preventDefault(),t.stopPropagation())},V=t=>{const u=t.target.value,d=e.maxlength&&u.length>e.maxlength?u.substring(0,e.maxlength):u;e.modelValue!==d&&s(d)},C=t=>{t.key!=="Backspace"&&e.maxlength&&e.modelValue&&e.modelValue.length>=e.maxlength&&t.preventDefault()},k=n.computed(()=>{if(e.placeholder)return e.placeholder;switch(e.type){case a.NeonInputType.Email:return"gbelson@hooli.com";case a.NeonInputType.Tel:return"+41785551234";case a.NeonInputType.Url:return"http://www.getskeleton.com";default:return""}});return{neonInput:i,focused:r,sanitizedAttributes:N,iconVisible:g,iconName:f,iconColor:y,computedPlaceholder:k,focus:h,click:S,onFocus:b,onBlur:I,iconClicked:v,changeValue:V,onKeyDown:C}}});module.exports=T;
//# sourceMappingURL=NeonInput.cjs.js.map