@mgcodeur/vue-number-input
Version:
A customizable Vue 3 number input component with increment/decrement buttons and long-press adjustment.
2 lines (1 loc) • 4.33 kB
JavaScript
(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.VueNumberInput={},u.Vue))})(this,function(u,e){"use strict";const V=["width","height","stroke-width"],g=e.defineComponent({__name:"MinusIcon",props:{size:{default:24},color:{default:"currentColor"},strokeWidth:{default:2}},setup(h){return(i,o)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",width:i.size,height:i.size,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":i.strokeWidth,"stroke-linecap":"round","stroke-linejoin":"round",class:"icon icon-tabler icons-tabler-outline icon-tabler-minus"},o[0]||(o[0]=[e.createElementVNode("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"},null,-1),e.createElementVNode("path",{d:"M5 12l14 0"},null,-1)]),8,V))}}),N=["width","height","stroke-width"],y=e.defineComponent({__name:"PlusIcon",props:{size:{default:24},color:{default:"currentColor"},strokeWidth:{default:2}},setup(h){return(i,o)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",width:i.size,height:i.size,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":i.strokeWidth,"stroke-linecap":"round","stroke-linejoin":"round",class:"icon icon-tabler icons-tabler-outline icon-tabler-plus"},o[0]||(o[0]=[e.createElementVNode("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"},null,-1),e.createElementVNode("path",{d:"M12 5l0 14"},null,-1),e.createElementVNode("path",{d:"M5 12l14 0"},null,-1)]),8,N))}}),B={class:"v-number-input"},M={key:0},z=["step","min","max","placeholder"],E={key:0},$=e.defineComponent({__name:"NumberInput",props:{adjustmentSpeed:{default:100},inputPosition:{default:"center"},max:{default:1/0},min:{default:-1/0},modelValue:{default:0},placeholder:{default:"0"},step:{default:1},textAlign:{default:"center"}},emits:["update:modelValue"],setup(h,{emit:i}){const o=h,k=i,a=t=>Math.min(o.max,Math.max(o.min,t)),r=t=>Number(Number(t).toFixed(b())),c=t=>r(t).toFixed(b()),b=()=>{var t;return((t=o.step.toString().split(".")[1])==null?void 0:t.length)||0},l=e.ref(c(r(a(o.modelValue)))),p=e.ref(null),s=e.ref(r(a(o.modelValue))),w=e.computed(()=>({center:{input:1,minus:0,plus:2},left:{input:0,minus:1,plus:2},right:{input:2,minus:0,plus:1}})[o.inputPosition]);function v(t){const n=r(a((s.value??0)+(t==="increment"?o.step:-o.step)));s.value=n,l.value=c(n),k("update:modelValue",n)}function S(){const t=Number(l.value);l.value===""||isNaN(t)?s.value=r(Math.max(o.min,0)):s.value=r(a(t)),l.value=c(s.value),k("update:modelValue",s.value)}function _(t){l.value=t.target.value;const n=Number(l.value);l.value!==""&&!isNaN(n)&&(s.value=r(a(n)),k("update:modelValue",s.value))}function f(t){p.value||(v(t),p.value=window.setInterval(()=>v(t),o.adjustmentSpeed))}function d(){p.value&&clearInterval(p.value),p.value=null}return e.watch(()=>o.modelValue,t=>{const n=r(a(t));n!==s.value&&(s.value=n,l.value=c(n))},{immediate:!0}),(t,n)=>(e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("button",{class:"v-number-input__button",onMousedown:n[0]||(n[0]=m=>f("decrement")),onMouseup:d,onMouseleave:d,onTouchstart:n[1]||(n[1]=m=>f("decrement")),onTouchend:d,style:e.normalizeStyle({order:w.value.minus})},[t.$slots["minus-icon"]?(e.openBlock(),e.createElementBlock("span",M,[e.renderSlot(t.$slots,"minus-icon")])):(e.openBlock(),e.createBlock(g,{key:1,size:12,"stroke-width":1.5}))],36),e.withDirectives(e.createElementVNode("input",{type:"number","onUpdate:modelValue":n[2]||(n[2]=m=>l.value=m),step:t.step,min:t.min,max:t.max,placeholder:t.placeholder,class:"v-number-input__input",onInput:_,onBlur:S,style:e.normalizeStyle({textAlign:t.textAlign,order:w.value.input}),lang:"en"},null,44,z),[[e.vModelText,l.value]]),e.createElementVNode("button",{class:"v-number-input__button",onMousedown:n[3]||(n[3]=m=>f("increment")),onMouseup:d,onMouseleave:d,onTouchstart:n[4]||(n[4]=m=>f("increment")),onTouchend:d,style:e.normalizeStyle({order:w.value.plus})},[t.$slots["plus-icon"]?(e.openBlock(),e.createElementBlock("span",E,[e.renderSlot(t.$slots,"plus-icon")])):(e.openBlock(),e.createBlock(y,{key:1,size:12}))],36)]))}});u.VueNumberInput=$,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});