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

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

"use strict";const e=require("vue");require("../icon/index.cjs");require("../renderer/index.cjs");require("../form/index.cjs");const U=require("@vexip-ui/hooks"),c=require("@vexip-ui/config"),s=require("@vexip-ui/utils"),we=require("./props.cjs"),Se=require("../form/helper.cjs"),ee=require("../renderer/renderer.cjs"),N=require("../icon/icon.cjs"),Ie=["id"],Pe=["id","autofocus","autocomplete","spellcheck","disabled","readonly","placeholder","name","title","aria-valuenow","aria-valuemin","aria-valuemax","aria-labelledby"],Be=["aria-label"],Fe=["aria-label","aria-labelledby","aria-controls"],Ke=["aria-label","aria-labelledby","aria-controls"],ze=e.defineComponent({name:"NumberInput",__name:"number-input",props:we.numberInputProps,emits:["update:value"],setup(ne,{expose:te,emit:le}){const S=t=>!t&&t!==0,g=t=>s.isNull(t)||Number.isNaN(t),{idFor:j,labelId:I,state:ae,disabled:re,loading:oe,size:ue,validateField:$,clearField:ie,getFieldValue:se,setFieldValue:_}=Se.useFieldStore(k),ce=ne,n=c.useProps("numberInput",ce,{size:c.createSizeProp(ue),state:c.createStateProp(ae),locale:null,prefix:c.createIconProp(),prefixColor:"",suffix:c.createIconProp(),suffixColor:"",formatter:{default:null,isFunc:!0},value:{default:()=>se(),static:!0},min:-1/0,max:1/0,placeholder:null,autofocus:!1,spellcheck:!1,autocomplete:!1,precision:-1,readonly:!1,step:1,ctrlStep:100,shiftStep:10,altStep:.1,disabled:()=>re.value,controlClass:null,debounce:!1,delay:null,clearable:!1,loading:()=>oe.value,loadingIcon:c.createIconProp(),loadingLock:!1,loadingEffect:null,sync:!1,syncStep:!1,controlType:"right",emptyType:"NaN",controlAttrs:null,name:{default:"",static:!0},slots:()=>({})}),P=le,W=e.useSlots(),a=c.useNameHelper("number-input"),x=c.useLocale("numberInput",e.toRef(n,"locale")),d=c.useIcons(),{timeout:B,interval:F}=U.useTimerRecord(),y=e.ref(!1),u=e.ref(S(n.value)?V():n.value),f=e.ref(!1),K=e.ref(!1),z=e.ref(!1),p=e.ref(),{wrapper:G,isHover:J}=U.useHover();U.useModifier({target:p,passive:!1,onKeyDown:(t,l)=>{if(c.emitEvent(n.onKeyDown,t),l.up||l.down){if(t.preventDefault(),t.stopPropagation(),l.up&&q.value||l.down&&L.value)return;O(l.up?"plus":"minus",t.ctrlKey?"ctrl":t.shiftKey?"shift":t.altKey?"alt":void 0),l.resetAll()}else l.enter&&(t.preventDefault(),t.stopPropagation(),H("change"),l.resetAll())},onKeyUp:t=>{c.emitEvent(n.onKeyUp,t),t.key==="Enter"&&ke()}});let h;const T=c.useId(),M=e.computed(()=>!g(u.value)&&(s.toNumber(u.value)>n.max||s.toNumber(u.value)<n.min)),m=e.computed(()=>n.loading&&n.loadingLock||n.readonly),q=e.computed(()=>n.disabled||m.value||!g(u.value)&&s.toNumber(u.value)>=n.max),L=e.computed(()=>n.disabled||m.value||!g(u.value)&&s.toNumber(u.value)<=n.min),fe=e.computed(()=>{const[t,l]=(n.controlType||"right").split("-");return[a.b(),a.bs("vars"),a.ns("input-vars"),{[a.bm("inherit")]:n.inherit,[a.bm("focused")]:f.value,[a.bm("disabled")]:n.disabled,[a.bm("readonly")]:m.value,[a.bm("loading")]:n.loading,[a.bm(n.size)]:n.size!=="default",[a.bm(n.state)]:n.state!=="default",[a.bm(`control-${t}`)]:t!=="right",[a.bm("control-fade")]:l,[a.bm("out-of-range")]:M.value}]}),de=e.computed(()=>!!(W.prefix||n.prefix||n.slots.prefix)),pe=e.computed(()=>!!(W.suffix||n.suffix||n.slots.suffix)),b=e.computed(()=>!f.value&&typeof u.value=="number"&&!Number.isNaN(u.value)&&n.precision>=0?s.toFixed(u.value,n.precision):u.value),E=e.computed(()=>g(b.value)||typeof b.value!="number"?b.value??"":!f.value&&typeof n.formatter=="function"?n.formatter(b.value):b.value.toString()),me=e.computed(()=>!!(u.value||u.value===0)),Q=e.computed(()=>!n.disabled&&!m.value&&n.clearable&&J.value&&me.value),ve=e.computed(()=>typeof n.autocomplete=="boolean"?n.autocomplete?"on":"off":n.autocomplete),X=s.toNumber(n.delay),Y=n.debounce?s.debounce(R,X||100):s.throttle(R,X||16);e.watch(()=>n.value,t=>{t!==h&&be()},{immediate:!0}),e.watch(f,t=>{t||w(f.value?u.value:E.value)}),e.onMounted(()=>{w(f.value?u.value:E.value)}),te({idFor:j,focused:y,isHover:J,outOfRange:M,preciseNumber:b,formattedValue:E,isReadonly:m,wrapper:G,input:p,focus:k,blur:()=>{var t;return(t=p.value)==null?void 0:t.blur()}});function w(t){p.value&&(p.value.value=g(t)?"":t.toString())}function D(t){return s.boundRange(t,n.min,n.max)}function be(){let t=n.value;t=f.value?t:s.isValidNumber(t,!0)?s.toNumber(t):V(),n.precision>=0&&!g(t)&&(t=s.toFixed(D(t),n.precision)),u.value=t,h=t,w(f.value?t:E.value)}function k(t){var l;(l=p.value)==null||l.focus(t)}function ge(t){y.value=!0,f.value=!0,c.emitEvent(n.onFocus,t)}function ye(t){y.value=!1,setTimeout(()=>{y.value||(f.value=!1,c.emitEvent(n.onBlur,t),H("change"))},120)}function Z(t,l){const o=t==="plus"?q:L,i=t==="plus"?he:Ne;l.button!==0||o.value||(i(l),document.addEventListener("pointerup",C),document.addEventListener("touchend",C),clearTimeout(B.step),clearInterval(F.step),(t==="plus"?K:z).value=!0,B.step=setTimeout(()=>{F.step=setInterval(()=>{o.value?C():i(l)},32)},500))}function C(){document.removeEventListener("pointerup",C),document.removeEventListener("touchend",C),clearTimeout(B.step),clearInterval(F.step),K.value=!1,z.value=!1}function he(t){!y.value&&k(),O("plus",t.ctrlKey?"ctrl":t.shiftKey?"shift":t.altKey?"alt":void 0)}function Ne(t){!y.value&&k(),O("minus",t.ctrlKey?"ctrl":t.shiftKey?"shift":t.altKey?"alt":void 0)}function O(t,l){if(n.disabled||m.value)return;let o=u.value||0,i;switch(l){case"ctrl":i=n.ctrlStep;break;case"shift":i=n.shiftStep;break;case"alt":i=n.altStep;break;default:i=n.step}const r=o.toString().trim();r.endsWith(".")&&(o=s.toNumber(r.slice(0,-1))),t==="plus"?o=s.plus(o,i):o=s.minus(o,i),A(o,n.syncStep&&!n.sync?"change":"input")}function R(t){const l=t.type,o=t.target.value;let i=o.trim();if(l==="change"&&o&&!s.isValidNumber(o,!0)){const r=parseFloat(o);Number.isNaN(r)?i="":i=r.toString()}f.value=l==="input",A(i,l)}function A(t,l,o=n.sync){l!=="input"?u.value=S(t)?V():s.toNumber(t):u.value=t,w(u.value),H(l,o)}function V(){switch(n.emptyType){case"undefined":return;case"null":return null;default:return NaN}}function H(t,l=n.sync){if(t=t==="input"?"input":"change",t==="change"){const o=S(u.value),i=o?V():s.toNumber(u.value);let r=o?i:D(s.toNumber(i));!o&&n.precision>=0&&(r=s.toFixed(r,n.precision));const v=!Object.is(r,i);if(o||(u.value=r),!l&&Object.is(h,r)){!Object.is(n.value,i)&&P("update:value",r);return}h=r,(!l||v)&&(P("update:value",r),_(r)),c.emitEvent(n.onChange,r),(!l||v)&&$()}else{const o=parseFloat(u.value),i=Number.isNaN(o);let r=i?V():D(s.toNumber(o));!i&&n.precision>=0&&(r=s.toFixed(r,n.precision));const v=l&&!Object.is(h,r);v&&(h=r,P("update:value",r),_(r)),c.emitEvent(n.onInput,o),v&&$()}}function xe(){n.disabled||m.value||(A(NaN,"change",!1),c.emitEvent(n.onClear),ie(NaN),k())}function ke(){c.emitEvent(n.onEnter)}function Ce(t){c.emitEvent(n.onPrefixClick,t)}function Ve(t){c.emitEvent(n.onSuffixClick,t)}function Ee(t){c.emitEvent(n.onKeyPress,t)}return(t,l)=>{var o,i;return e.openBlock(),e.createElementBlock("div",{id:e.unref(j),ref_key:"wrapper",ref:G,class:e.normalizeClass(fe.value),role:"group",onClick:l[8]||(l[8]=r=>{var v;return(v=p.value)==null?void 0:v.focus()})},[de.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(a).be("icon"),e.unref(a).be("prefix")]),style:e.normalizeStyle({color:e.unref(n).prefixColor}),onClick:Ce},[e.renderSlot(t.$slots,"prefix",{},()=>[e.createVNode(e.unref(ee),{renderer:e.unref(n).slots.prefix},{default:e.withCtx(()=>[e.createVNode(e.unref(N),{icon:e.unref(n).prefix},null,8,["icon"])]),_:1},8,["renderer"])])],6)):e.createCommentVNode("",!0),e.createElementVNode("input",e.mergeProps(e.unref(n).controlAttrs,{id:e.unref(T),ref_key:"control",ref:p,class:[e.unref(a).be("control"),(o=e.unref(n).controlAttrs)==null?void 0:o.class,e.unref(n).controlClass],type:"text",autofocus:e.unref(n).autofocus,autocomplete:ve.value,spellcheck:e.unref(n).spellcheck,disabled:e.unref(n).disabled,readonly:m.value,placeholder:e.unref(n).placeholder??e.unref(x).placeholder,name:e.unref(n).name||((i=e.unref(n).controlAttrs)==null?void 0:i.name),role:"spinbutton",title:M.value?e.unref(x).outOfRange:void 0,"aria-valuenow":b.value,"aria-valuemin":e.unref(n).min!==-1/0?e.unref(n).min:void 0,"aria-valuemax":e.unref(n).max!==1/0?e.unref(n).max:void 0,"aria-labelledby":e.unref(I),onSubmit:l[0]||(l[0]=e.withModifiers(()=>{},["prevent"])),onBlur:ye,onFocus:ge,onKeypress:Ee,onInput:l[1]||(l[1]=(...r)=>e.unref(Y)&&e.unref(Y)(...r)),onChange:R}),null,16,Pe),pe.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([e.unref(a).be("icon"),e.unref(a).be("suffix")]),style:e.normalizeStyle({color:e.unref(n).suffixColor,opacity:Q.value||e.unref(n).loading?"0%":""}),onClick:Ve},[e.renderSlot(t.$slots,"suffix",{},()=>[e.createVNode(e.unref(ee),{renderer:e.unref(n).slots.suffix},{default:e.withCtx(()=>[e.createVNode(e.unref(N),{icon:e.unref(n).suffix},null,8,["icon"])]),_:1},8,["renderer"])])],6)):e.unref(n).clearable||e.unref(n).loading?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass([e.unref(a).be("icon"),e.unref(a).bem("icon","placeholder"),e.unref(a).be("suffix")])},null,2)):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:e.unref(a).ns("fade"),appear:""},{default:e.withCtx(()=>[Q.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass([e.unref(a).be("icon"),e.unref(a).be("clear")]),type:"button",tabindex:"-1","aria-label":e.unref(x).ariaLabel.clear,onClick:e.withModifiers(xe,["stop"])},[e.createVNode(e.unref(N),e.mergeProps(e.unref(d).clear,{label:"clear"}),null,16)],10,Be)):e.unref(n).loading?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([e.unref(a).be("icon"),e.unref(a).be("loading")])},[e.createVNode(e.unref(N),e.mergeProps(e.unref(d).loading,{effect:e.unref(n).loadingEffect||e.unref(d).loading.effect,icon:e.unref(n).loadingIcon||e.unref(d).loading.icon,label:"loading"}),null,16,["effect","icon"])],2)):e.createCommentVNode("",!0)]),_:1},8,["name"]),e.unref(n).controlType!=="none"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createElementVNode("div",{class:e.normalizeClass({[e.unref(a).be("plus")]:!0,[e.unref(a).bem("plus","disabled")]:q.value,[e.unref(a).bem("plus","holding")]:K.value}),role:"button","aria-label":e.unref(x).ariaLabel.increase,"aria-labelledby":e.unref(I),"aria-controls":e.unref(T),onPointerdown:l[2]||(l[2]=e.withModifiers(r=>Z("plus",r),["prevent"])),onMousedown:l[3]||(l[3]=e.withModifiers(()=>{},["prevent"])),onTouchstart:l[4]||(l[4]=e.withModifiers(()=>{},["prevent"]))},[e.createVNode(e.unref(N),e.mergeProps(e.unref(d).angleUp,{scale:+(e.unref(d).angleUp.scale||1)*.8}),null,16,["scale"])],42,Fe),e.createElementVNode("div",{class:e.normalizeClass({[e.unref(a).be("minus")]:!0,[e.unref(a).bem("minus","disabled")]:L.value,[e.unref(a).bem("minus","holding")]:z.value}),"aria-label":e.unref(x).ariaLabel.decrease,"aria-labelledby":e.unref(I),"aria-controls":e.unref(T),onPointerdown:l[5]||(l[5]=e.withModifiers(r=>Z("minus",r),["prevent"])),onMousedown:l[6]||(l[6]=e.withModifiers(()=>{},["prevent"])),onTouchstart:l[7]||(l[7]=e.withModifiers(()=>{},["prevent"]))},[e.createVNode(e.unref(N),e.mergeProps(e.unref(d).angleDown,{scale:+(e.unref(d).angleDown.scale||1)*.8}),null,16,["scale"])],42,Ke)],64)):e.createCommentVNode("",!0)],10,Ie)}}});module.exports=ze;
//# sourceMappingURL=number-input.vue2.cjs.map