vexip-ui/lib/components/input/input.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const n=require("vue");require("../icon/index.cjs");require("../form/index.cjs");require("../renderer/index.cjs");const Se=require("@vexip-ui/hooks"),l=require("@vexip-ui/config"),f=require("@vexip-ui/utils"),Ae=require("./props.cjs"),Le=require("../form/helper.cjs"),x=require("../renderer/renderer.cjs"),C=require("../icon/icon.cjs");function Ie(s){return typeof s=="function"||Object.prototype.toString.call(s)==="[object Object]"&&!n.isVNode(s)}const qe=Object.freeze(["text","password","date","datetime","time"]);function w(s){return f.isNull(s)?"":String(s)}const Fe=n.defineComponent({name:"Input",props:Ae.inputProps,emits:["update:value"],setup(s,{slots:r,emit:E,expose:U}){const{idFor:P,labelId:k,state:_,disabled:R,loading:G,size:J,validateField:S,clearField:Q,getFieldValue:W,setFieldValue:A}=Le.useFieldStore(()=>{var t;return(t=c.value)==null?void 0:t.focus()}),e=l.useProps("input",s,{size:l.createSizeProp(J),state:l.createStateProp(_),locale:null,type:{default:"text",validator:t=>qe.includes(t)},prefix:l.createIconProp(),prefixColor:"",suffix:l.createIconProp(),suffixColor:"",formatter:{default:null,isFunc:!0},value:{default:()=>W(),static:!0},placeholder:null,autofocus:!1,spellcheck:!1,autocomplete:!1,readonly:!1,disabled:()=>R.value,controlClass:null,debounce:!1,delay:null,maxLength:0,hideCount:!1,before:"",after:"",plainPassword:!1,clearable:!1,loading:()=>G.value,loadingIcon:l.createIconProp(),loadingLock:!1,loadingEffect:null,transparent:!1,sync:!1,controlAttrs:null,name:{default:"",static:!0},slots:()=>({})}),L=w(e.value),a=l.useNameHelper("input"),v=l.useIcons(),d=n.ref(!1),u=n.ref(L),p=n.ref(!1),m=n.ref(L.length),I=n.ref(!1),q=n.ref(!1),b=n.ref(!1),c=n.ref(),{wrapper:X,isHover:Y}=Se.useHover(),F=l.useLocale("input",n.toRef(e,"locale"));let V=e.value;const h=n.computed(()=>!!(r.before||r.beforeAction||r["before-action"]||e.before||e.slots.before||e.slots.beforeAction)),g=n.computed(()=>!!(r.after||r.afterAction||r["after-action"]||e.after||e.slots.after||e.slots.afterAction)),K=n.computed(()=>({[a.bs("wrapper")]:!0,[a.bs("vars")]:!0,[a.bm("inherit")]:e.inherit,[a.bm(e.size)]:e.size!=="default"})),y=n.computed(()=>e.loading&&e.loadingLock||e.readonly),Z=n.computed(()=>[a.b(),a.bm(e.type),!h.value&&!g.value&&K.value,{[a.bm("focused")]:d.value,[a.bm("disabled")]:e.disabled,[a.bm("readonly")]:y.value,[a.bm("loading")]:e.loading,[a.bm(e.state)]:e.state!=="default",[a.bm("before")]:r.beforeAction||r["before-action"]||e.slots.before,[a.bm("after")]:r.afterAction||r["after-action"]||e.slots.after,[a.bm("transparent")]:e.transparent,[a.bm("plain-password")]:e.plainPassword}]),ee=n.computed(()=>({...K.value,[a.bm(`wrapper--${e.size}`)]:e.size!=="default",[a.bs("wrapper--before-only")]:h.value&&!g.value,[a.bs("wrapper--after-only")]:!h.value&&g.value,[a.bm("transparent")]:e.transparent})),te=n.computed(()=>!!(r.prefix||e.prefix||e.slots.prefix)),ne=n.computed(()=>!!(r.suffix||e.suffix||e.slots.suffix)),ae=n.computed(()=>{const t=e.type;return t==="password"?p.value?"text":"password":t==="datetime"?"datetime-local":t}),z=n.computed(()=>typeof e.formatter=="function"?w(e.formatter(u.value)):u.value),oe=n.computed(()=>p.value?v.value.plainText:v.value.cipherText),le=n.computed(()=>!(f.isNull(u.value)||u.value==="")),T=n.computed(()=>!e.disabled&&!y.value&&e.clearable&&le.value&&Y.value),re=n.computed(()=>typeof e.autocomplete=="boolean"?e.autocomplete?"on":"off":e.autocomplete);n.watch(()=>e.value,t=>{u.value=w(t),V=u.value,B()}),n.watch([z,c],()=>{c.value&&(c.value.value=z.value)},{immediate:!0,flush:"post"}),U({idFor:P,labelId:k,focused:d,currentValue:u,showPassword:p,currentLength:m,composing:b,input:c,copyValue:xe,focus:t=>{var o;(o=c.value)==null||o.focus(t)},blur:()=>{var t;(t=c.value)==null||t.blur()}});function $(){return typeof e.value=="number"?parseFloat(u.value):u.value}function ue(t){d.value||(d.value=!0,l.emitEvent(e.onFocus,t))}function ie(t){d.value&&(d.value=!1,setTimeout(()=>{d.value||(l.emitEvent(e.onBlur,t),V!==$()&&j("change"))},120))}function N(t){const o=t.type;if(b.value){if(o==="input")return;b.value=!1}u.value=t.target.value,B();const i=u.value;H(i,o)}function H(t,o,i=e.sync){u.value=t,j(o,i)}function j(t,o=e.sync){t=t==="input"?"input":"change";const i=$();t==="change"?(V=i,o||(E("update:value",i),A(i)),l.emitEvent(e.onChange,i),o||S()):(o&&(E("update:value",i),A(i)),l.emitEvent(e.onInput,i),o&&S())}function B(){let t=u.value;if(f.isNull(t)){m.value=0;return}const o=e.maxLength;o&&t.length>o&&(t=t.slice(0,o)),m.value=t.length,u.value=t}function ce(){e.disabled||(p.value=!p.value,n.nextTick(()=>{var t;(t=c.value)==null||t.focus()}))}function se(t){var o;e.disabled||y.value||(t.stopPropagation(),H("","change",!1),l.emitEvent(e.onClear),n.nextTick(()=>Q("")),m.value=0,(o=c.value)==null||o.focus())}function fe(){l.emitEvent(e.onEnter)}function de(t){l.emitEvent(e.onPrefixClick,t)}function pe(t){l.emitEvent(e.onSuffixClick,t)}function ve(t){l.emitEvent(e.onKeyDown,t)}function me(t){l.emitEvent(e.onKeyPress,t)}function be(t){t.key==="Enter"&&fe(),l.emitEvent(e.onKeyUp,t)}function he(t){b.value=!0,l.emitEvent(e.onCompositionStart,t)}function ge(t){b.value&&(b.value=!1,c.value&&c.value.dispatchEvent(new Event("input"))),l.emitEvent(e.onCompositionEnd,t)}function xe(){const t=document.createElement("input");t.style.height="0",t.setAttribute("readonly","readonly"),t.value=u.value,document.body.appendChild(t),t.select();const o=document.execCommand("copy");return document.body.removeChild(t),o}function Ce(t){t.preventDefault()}const D=f.toNumber(e.delay),ye=e.debounce?f.debounce(N,D||100):f.throttle(N,D||16);function Ve(){return n.createVNode("div",{class:[a.be("icon"),a.be("prefix")],style:{color:e.prefixColor},onClick:de},[n.renderSlot(r,"prefix",void 0,()=>[n.createVNode(x,{renderer:e.slots.prefix},{default:()=>[n.createVNode(C,{icon:e.prefix},null)]})])])}function Ne(){return ne.value?n.createVNode("div",{key:"suffix",class:[a.be("icon"),a.be("suffix")],style:{color:e.suffixColor,opacity:T.value||e.loading?"0%":""},onClick:pe},[n.renderSlot(r,"suffix",void 0,()=>[n.createVNode(x,{renderer:e.slots.suffix},{default:()=>[n.createVNode(C,{icon:e.suffix},null)]})])]):e.clearable||e.loading?n.createVNode("div",{key:"placeholder",class:[a.be("icon"),a.bem("icon","placeholder")]},null):null}function we(){return T.value?n.createVNode("button",{key:"clear",class:[a.be("icon"),a.be("clear")],type:"button",tabindex:-1,"aria-label":F.value.ariaLabel.clear,onClick:se},[n.createVNode(C,n.mergeProps(v.value.clear,{label:"clear"}),null)]):e.loading?n.createVNode("div",{key:"loading",class:[a.be("icon"),a.be("loading")]},[n.createVNode(C,n.mergeProps(v.value.loading,{effect:e.loadingEffect||v.value.loading.effect,icon:e.loadingIcon||v.value.loading.icon,label:"loading"}),null)]):null}function Ee(){let t;return n.createVNode("div",{class:a.be("suffix-wrapper")},[Ne(),n.createVNode(n.Transition,{name:a.ns("fade"),appear:!0},Ie(t=we())?t:{default:()=>[t]})])}function Pe(){return n.createVNode("div",{class:a.be("count")},[n.renderSlot(r,"count",{value:u.value},()=>[n.createVNode(x,{renderer:e.slots.count,data:{value:u.value}},{default:()=>[e.maxLength===1/0?m.value:`${m.value}/${e.maxLength}`]})])])}function ke(){return e.type==="password"&&e.plainPassword?n.createVNode("div",{key:"password",class:[a.be("icon"),a.be("password")],style:{color:e.suffixColor},onClick:ce},[n.renderSlot(r,"password",{plain:p.value},()=>[n.createVNode(x,{renderer:e.slots.password,data:{plain:p.value}},{default:()=>[n.createVNode(C,oe.value,null)]})])]):null}function O(){var t,o;return n.createVNode("div",{id:P.value,ref:X,class:Z.value,onClick:()=>{var i;return(i=c.value)==null?void 0:i.focus()}},[te.value&&Ve(),n.createVNode("input",n.mergeProps(e.controlAttrs,{ref:c,class:[a.be("control"),(t=e.controlAttrs)==null?void 0:t.class,e.controlClass],type:ae.value,autofocus:e.autofocus,autocomplete:re.value,spellcheck:e.spellcheck,disabled:e.disabled,readonly:y.value||void 0,placeholder:e.placeholder??F.value.placeholder,maxlength:e.maxLength>0?e.maxLength:void 0,name:e.name||((o=e.controlAttrs)==null?void 0:o.name),"aria-labelledby":k.value,onBlur:ie,onFocus:ue,onInput:ye,onChange:N,onKeypress:me,onKeydown:ve,onKeyup:be,onSubmit:Ce,onCompositionstart:he,onCompositionend:ge}),null),Ee(),e.maxLength>0&&!e.hideCount?Pe():null,ke()])}function M(t){const o=r[`${t}Action`]||r[`${t}-action`]||e.slots[`${t}Action`];return o?n.createVNode("div",{class:[a.be(t),a.bem(t,"action")],onMouseenter:()=>(t==="before"?I:q).value=!0,onMouseleave:()=>(t==="before"?I:q).value=!1},[o()]):n.createVNode("div",{class:a.be(t)},[r[t]?r[t]():n.createVNode(x,{renderer:e.slots[t]},{default:()=>[e[t]]})])}return()=>h.value||g.value?n.createVNode("div",{class:ee.value},[h.value&&M("before"),O(),g.value&&M("after")]):O()},methods:{focus:f.noop,blur:f.noop}});module.exports=Fe;
//# sourceMappingURL=input.cjs.map