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