vue-integer-plusminus/dist/vue-integer-plusminus.umd.min.js

Integer input with increment and decrement buttons for vue 3

(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vue-integer-plusminus"]=t(require("vue")):e["vue-integer-plusminus"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(){var t={456:function(e,t,n){"use strict";n.r(t);var r=n(601),a=n.n(r),o=n(314),i=n.n(o),l=i()(a());l.push([e.id,":root{--ipm-border-color:#ccc;--ipm-background-color:transparent;--ipm-btn-color:inherit;--ipm-btn-background-color:#ddd;--ipm-btn-background-color-hover:#ccc;--ipm-btn-background-color-disabled:#eee;--ipm-btn-color-disabled:#777}.int-pm{display:flex;text-align:center}.int-pm .int-pm-value{border-width:1px 0;border-color:var(--ipm-border-color);border-style:solid;padding:0 10px;background-color:var(--ipm-background-color)}.int-pm .int-pm-btn{border:1px solid var(--ipm-border-color);background-color:var(--ipm-btn-background-color);cursor:pointer;padding:5px 10px;color:var(--ipm-btn-color)}.int-pm .int-pm-btn:hover{background-color:var(--ipm-btn-background-color-hover)}.int-pm .int-pm-btn.disabled{color:var(--ipm-btn-background-disabled);cursor:not-allowed}.int-pm .int-pm-btn.disabled,.int-pm .int-pm-btn.disabled:hover{background-color:var(--ipm-btn-background-color-disabled)}.int-pm.int-pm-vertical{flex-direction:column}.int-pm.int-pm-vertical .int-pm-value{border-width:0 1px;padding:5px 10px}",""]),t["default"]=l},314:function(e){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r="undefined"!==typeof t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,a,o){"string"===typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var l=0;l<this.length;l++){var u=this[l][0];null!=u&&(i[u]=!0)}for(var d=0;d<e.length;d++){var c=[].concat(e[d]);r&&i[c[0]]||("undefined"!==typeof o&&("undefined"===typeof c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=o),n&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=n):c[2]=n),a&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=a):c[4]="".concat(a)),t.push(c))}},t}},601:function(e){"use strict";e.exports=function(e){return e[1]}},827:function(e,t,n){var r=n(456);r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.id,r,""]]),r.locals&&(e.exports=r.locals);var a=n(548).A;a("3db8b41c",r,!0,{sourceMap:!1,shadowMode:!1})},548:function(e,t,n){"use strict";function r(e,t){for(var n=[],r={},a=0;a<t.length;a++){var o=t[a],i=o[0],l=o[1],u=o[2],d=o[3],c={id:e+":"+a,css:l,media:u,sourceMap:d};r[i]?r[i].parts.push(c):n.push(r[i]={id:i,parts:[c]})}return n}n.d(t,{A:function(){return f}});var a="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o={},i=a&&(document.head||document.getElementsByTagName("head")[0]),l=null,u=0,d=!1,c=function(){},s=null,p="data-vue-ssr-id",m="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function f(e,t,n,a){d=n,s=a||{};var i=r(e,t);return v(i),function(t){for(var n=[],a=0;a<i.length;a++){var l=i[a],u=o[l.id];u.refs--,n.push(u)}t?(i=r(e,t),v(i)):i=[];for(a=0;a<n.length;a++){u=n[a];if(0===u.refs){for(var d=0;d<u.parts.length;d++)u.parts[d]();delete o[u.id]}}}}function v(e){for(var t=0;t<e.length;t++){var n=e[t],r=o[n.id];if(r){r.refs++;for(var a=0;a<r.parts.length;a++)r.parts[a](n.parts[a]);for(;a<n.parts.length;a++)r.parts.push(g(n.parts[a]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{var i=[];for(a=0;a<n.parts.length;a++)i.push(g(n.parts[a]));o[n.id]={id:n.id,refs:1,parts:i}}}}function b(){var e=document.createElement("style");return e.type="text/css",i.appendChild(e),e}function g(e){var t,n,r=document.querySelector("style["+p+'~="'+e.id+'"]');if(r){if(d)return c;r.parentNode.removeChild(r)}if(m){var a=u++;r=l||(l=b()),t=h.bind(null,r,a,!1),n=h.bind(null,r,a,!0)}else r=b(),t=x.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}var y=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}();function h(e,t,n,r){var a=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=y(t,a);else{var o=document.createTextNode(a),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function x(e,t){var n=t.css,r=t.media,a=t.sourceMap;if(r&&e.setAttribute("media",r),s.ssrId&&e.setAttribute(p,t.id),a&&(n+="\n/*# sourceURL="+a.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{while(e.firstChild)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}},274:function(t){"use strict";t.exports=e}},n={};function r(e){var a=n[e];if(void 0!==a)return a.exports;var o=n[e]={id:e,exports:{}};return t[e](o,o.exports,r),o.exports}!function(){r.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(t,{a:t}),t}}(),function(){r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}}(),function(){r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){r.p=""}();var a={};return function(){"use strict";if(r.r(a),r.d(a,{IntegerPlusminus:function(){return s},default:function(){return f},install:function(){return p}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(r.p=t[1])}var n=r(274);const o=["aria-label","disabled"],i=["aria-valuenow","aria-valuemin","aria-valuemax","aria-label"],l=["name","value"],u=["aria-label","disabled"];var d={__name:"IntegerPlusminus",props:{modelValue:Number,initialValue:{type:Number,default:0},min:{type:Number,default:0},max:{type:Number,default:void 0},step:{type:Number,default:1},vertical:{type:Boolean,default:!1},incrementAriaLabel:{type:String,default:void 0},decrementAriaLabel:{type:String,default:void 0},spinButtonAriaLabel:{type:String,default:void 0},formName:{type:String,default:"integerPlusMinus"},disabled:{type:Boolean,default:!1}},emits:["update:modelValue","ipm-input","ipm-increment","ipm-decrement"],setup(e,{emit:t}){const r=e,a=(0,n.ref)(0),d=(0,n.ref)(null),c=t,s=(0,n.computed)((()=>!r.disabled&&(void 0===r.max||a.value+r.step<=r.max))),p=(0,n.computed)((()=>!r.disabled&&a.value-r.step>=r.min));(0,n.onMounted)((()=>{window.addEventListener("keydown",h),void 0===r.modelValue?a.value=r.initialValue:a.value=r.modelValue})),(0,n.watch)((()=>r.modelValue),((e,t)=>{e!==a.value&&(a.value=e)}));const m=()=>{void 0!==r.modelValue&&(c("update:modelValue",a.value),c("ipm-input",a.value))},f=()=>document.activeElement===d.value,v=()=>{r.disabled||(a.value=r.min,m())},b=()=>{r.disabled||(a.value=r.max,m())},g=()=>{s.value&&(a.value=a.value+r.step,c("ipm-increment",a.value),m())},y=()=>{p.value&&(a.value=a.value-r.step,c("ipm-decrement",a.value),m())},h=e=>{f()&&(33!==e.keyCode&&38!==e.keyCode||(g(),e.preventDefault()),34!==e.keyCode&&40!==e.keyCode||(y(),e.preventDefault()),36===e.keyCode&&(v(),e.preventDefault()),void 0!==r.max&&35===e.keyCode&&(b(),e.preventDefault()))},x=e=>{let t="int-pm-";return e&&!r.vertical||!e&&r.vertical?(t+="decrement",p.value||(t+=" disabled")):(t+="increment",s.value||(t+=" disabled")),t};return(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)("div",{class:(0,n.normalizeClass)(["int-pm",{"int-pm-vertical":e.vertical}])},[(0,n.createElementVNode)("button",{class:(0,n.normalizeClass)(["int-pm-btn",x(!0)]),onClick:r[0]||(r[0]=t=>e.vertical?g():y()),"aria-label":e.decrementAriaLabel,disabled:e.disabled},[(0,n.renderSlot)(t.$slots,e.vertical?"increment":"decrement",{},(()=>[(0,n.createTextVNode)((0,n.toDisplayString)(e.vertical?"+":"-"),1)]))],10,o),(0,n.createElementVNode)("div",{class:"int-pm-value",ref_key:"spinButton",ref:d,role:"spinbutton",tabindex:"0","aria-valuenow":a.value,"aria-valuemin":e.min,"aria-valuemax":e.max,"aria-label":e.spinButtonAriaLabel},[(0,n.renderSlot)(t.$slots,"default",{},(()=>[(0,n.createTextVNode)((0,n.toDisplayString)(a.value),1)]))],8,i),(0,n.createElementVNode)("input",{type:"hidden",name:e.formName,value:a.value},null,8,l),(0,n.createElementVNode)("button",{class:(0,n.normalizeClass)(["int-pm-btn",x(!1)]),onClick:r[1]||(r[1]=t=>e.vertical?y():g()),"aria-label":e.incrementAriaLabel,disabled:e.disabled},[(0,n.renderSlot)(t.$slots,e.vertical?"decrement":"increment",{},(()=>[(0,n.createTextVNode)((0,n.toDisplayString)(e.vertical?"-":"+"),1)]))],10,u)],2))}};const c=d;var s=c;r(827);const p=e=>{e.component("integer-plusminus",s)};var m=p,f=m}(),a}()}));