@robin-rossow/vue-input-number 2.0.1 → 3.0.0

package/README.md

@@ -1,6 +1,8 @@
 # Vue Input Number
 Input field component to display a formatted number value. It is meant to be used with Vue 3.
 
+[Demo](https://robinrossow.github.io/vue-input-number/)
+
 ## Installation
 
 ### Install via NPM
@@ -21,18 +23,14 @@ import { VueInputNumber } from '@robin-rossow/vue-input-number'
 ```
 
 ### Props
-| Props                  | Required | Type                                  | Default                 |
-|------------------------|----------|---------------------------------------|-------------------------|
-| v-model                | ✅        | string | number | undefined | -                       |
-| outputType             | ❌        | 'Number' | 'String'              | 'Number'                |
-| min                    | ❌        | number                                | Number.MIN_SAFE_INTEGER |
-| max                    | ❌        | number                                | Number.MAX_SAFE_INTEGER |
-| precision              | ❌        | number                                | 0                       |
-| thousandSeparator      | ❌        | string | undefined               | ','                     |
-| decimalSeparator       | ❌        | string | undefined               | ','                     |
-| currency               | ❌        | string                                | ''                      |
-| currencySymbolPosition | ❌        | 'prefix' |' suffix'              | 'prefix'                |
-| emptyValue             | ❌        | number | ''                      | ''                      |
+| Props                  | Required | Type                                       | Default  |
+|------------------------|---------|--------------------------------------------|----------|
+| v-model                | ✅        | Ref<string &#124; number &#124; undefined> | -        |
+| outputType             | ❌       | 'Number' &#124; 'String'                   | 'Number' |
+| precision              | ❌       | number                                     | 0        |
+| thousandSeparator      | ❌       | string                                     | ','      |
+| decimalSeparator       | ❌       | string                                     | '.'      |
+| emptyValue             | ❌       |   ''         &#124;    0                   | ''       |
 
 ## License
 vue-number-input is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT)

package/dist/components/VueInputNumber.vue.d.ts

@@ -1,14 +1,10 @@
 export interface Props {
     modelValue: string | number | undefined;
     outputType?: 'Number' | 'String';
-    min?: number;
-    max?: number;
     precision?: number;
-    thousandSeparator?: string | undefined;
-    decimalSeparator?: string | undefined;
-    currency?: string;
-    currencySymbolPosition?: 'prefix' | 'suffix';
-    emptyValue?: number | '';
+    thousandSeparator?: string;
+    decimalSeparator?: string;
+    emptyValue?: '' | 0;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
@@ -20,14 +16,10 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     onFocus?: ((...args: any[]) => any) | undefined;
 }>, {
     outputType: "Number" | "String";
-    min: number;
-    max: number;
     precision: number;
     thousandSeparator: string;
     decimalSeparator: string;
-    currency: string;
-    currencySymbolPosition: "prefix" | "suffix";
-    emptyValue: number | "";
+    emptyValue: "" | 0;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/vue-input-number.js

@@ -1,113 +1,96 @@
-import { defineComponent as I, ref as y, computed as m, onMounted as _, watch as F, withDirectives as $, openBlock as w, createElementBlock as k, mergeProps as B, vModelDynamic as P } from "vue";
-var l = { symbol: "$", format: "%s%v", decimal: ".", thousand: ",", precision: 2, grouping: 3, stripZeros: !1, fallback: 0, round: 0 };
-function g(u, t = l.decimal, e = l.fallback) {
-  let n = new RegExp(`[^0-9-(-)-${t}]`, "g"), a = ("" + u).replace(n, "").replace(t, ".").replace(/\(([-]*\d*[^)]?\d+)\)/g, "-$1").replace(/\((.*)\)/, ""), r = (a.match(/-/g) || "").length % 2, i = parseFloat(a.replace(/-/g, "")) * (r ? -1 : 1);
-  return isNaN(i) ? e : i;
+import { defineComponent as w, useTemplateRef as I, ref as b, computed as h, onMounted as S, watch as $, withDirectives as T, openBlock as k, createElementBlock as B, mergeProps as C, vModelDynamic as F } from "vue";
+var i = { symbol: "$", format: "%s%v", decimal: ".", thousand: ",", precision: 2, grouping: 3, stripZeros: !1, fallback: 0, round: 0 };
+function g(n, t = i.decimal, e = i.fallback) {
+  let u = new RegExp(`[^0-9-(-)-${t}]`, "g"), a = ("" + n).replace(u, "").replace(t, ".").replace(/\(([-]*\d*[^)]?\d+)\)/g, "-$1").replace(/\((.*)\)/, ""), r = (a.match(/-/g) || "").length % 2, l = parseFloat(a.replace(/-/g, "")) * (r ? -1 : 1);
+  return isNaN(l) ? e : l;
 }
-function h(u, t, e) {
-  t ??= l.precision, e ??= l.round;
-  let n = Math.pow(10, t), a;
-  return e > 0 ? a = Math.ceil : e < 0 ? a = Math.floor : a = Math.round, (a((u + 1e-8) * n) / n).toFixed(t);
+function c(n, t, e) {
+  t ??= i.precision, e ??= i.round;
+  let u = Math.pow(10, t), a;
+  return e > 0 ? a = Math.ceil : e < 0 ? a = Math.floor : a = Math.round, (a((n + 1e-8) * u) / u).toFixed(t);
 }
-function T(u, t) {
-  let e = u.split(t), n = "";
-  if (e[0] !== void 0 && (n = e[0]), e[1] !== void 0) {
+function x(n, t) {
+  let e = n.split(t), u = "";
+  if (e[0] !== void 0 && (u = e[0]), e[1] !== void 0) {
     let a = e[1].replace(/0+$/, "");
-    a.length > 0 && (n = n + t + a);
+    a.length > 0 && (u = u + t + a);
   }
-  return n;
+  return u;
 }
-function A(u, t = {}) {
-  t = Object.assign({}, l, t);
-  let e = u < 0 ? "-" : "", n = parseInt(h(Math.abs(u), t.precision, t.round), 10) + "", a = n.length > 3 ? n.length % 3 : 0, r = e + (a ? n.substr(0, a) + t.thousand : "") + n.substr(a).replace(/(\d{3})(?=\d)/g, "$1" + t.thousand) + (t.precision > 0 ? t.decimal + h(Math.abs(u), t.precision).split(".")[1] : "");
-  return t.stripZeros ? T(r, t.decimal) : r;
+function D(n, t = {}) {
+  t = Object.assign({}, i, t);
+  let e = n < 0 ? "-" : "", u = parseInt(c(Math.abs(n), t.precision, t.round), 10) + "", a = u.length > 3 ? u.length % 3 : 0, r = e + (a ? u.substr(0, a) + t.thousand : "") + u.substr(a).replace(/(\d{3})(?=\d)/g, "$1" + t.thousand) + (t.precision > 0 ? t.decimal + c(Math.abs(n), t.precision).split(".")[1] : "");
+  return t.stripZeros ? x(r, t.decimal) : r;
 }
-function D(u) {
-  return typeof u == "string" && u.match("%v") ? { pos: u, neg: u.replace("-", "").replace("%v", "-%v"), zero: u } : u;
-}
-function N(u, t = {}) {
-  t = Object.assign({}, l, t);
-  let e = D(t.format), n;
-  return u > 0 ? n = e.pos : u < 0 ? n = e.neg : n = e.zero, n.replace("%s", t.symbol).replace("%v", A(Math.abs(u), t));
-}
-const R = /* @__PURE__ */ I({
+const L = /* @__PURE__ */ w({
   __name: "VueInputNumber",
   props: {
     modelValue: {},
     outputType: { default: "Number" },
-    min: { default: Number.MIN_SAFE_INTEGER },
-    max: { default: Number.MAX_SAFE_INTEGER },
     precision: { default: 0 },
     thousandSeparator: { default: "," },
     decimalSeparator: { default: "." },
-    currency: { default: "" },
-    currencySymbolPosition: { default: "prefix" },
     emptyValue: { default: "" }
   },
   emits: ["update:modelValue", "blur", "focus"],
-  setup(u, { emit: t }) {
-    const e = u, n = t, a = y(""), r = y(!1), i = m(() => e.currency ? e.currencySymbolPosition === "suffix" ? "%v %s" : "%s %v" : "%v"), s = m(() => c(g(a.value, e.decimalSeparator)) || 0);
-    function d(o) {
-      return N(o, {
-        symbol: e.currency,
-        format: i.value,
+  setup(n, { emit: t }) {
+    const e = n, u = t, a = I("number-input"), r = b(""), l = b(!1);
+    function p(o) {
+      return D(o, {
         thousand: e.thousandSeparator,
         decimal: e.decimalSeparator,
         precision: Number(e.precision)
       });
     }
-    const M = m(() => d(s.value)), f = m(() => N(s.value, {
-      symbol: "",
-      format: "%v",
-      thousand: e.thousandSeparator,
-      decimal: e.decimalSeparator,
-      precision: Number(e.precision)
-    }));
-    function S(o) {
-      r.value = !1, a.value = M.value, p(), n("blur", o);
-    }
+    const d = h(() => Number(c(g(r.value, e.decimalSeparator), e.precision)) || 0), v = h(() => p(d.value));
     function V(o) {
-      r.value = !0, a.value = f.value, n("focus", o);
+      s(a.value.value), u("blur", o);
     }
-    function x() {
-      r.value || p();
+    function y(o) {
+      l.value = !0, u("focus", o);
     }
-    function c(o) {
-      return o < e.min ? e.min : o > e.max ? e.max : o;
+    function N() {
+      m();
     }
-    function b(o) {
-      if (!o) {
-        a.value = e.emptyValue === "" ? "" : String(c(e.emptyValue));
+    function s(o) {
+      if (typeof o > "u" || o === "") {
+        r.value = e.emptyValue === 0 ? p(0) : "";
         return;
       }
-      if (typeof o == "string") {
-        a.value = d(c(g(o, e.decimalSeparator)));
+      if (typeof o == "number") {
+        r.value = p(o);
         return;
       }
-      a.value = d(c(o));
+      r.value = p(g(o, e.decimalSeparator));
     }
-    function p() {
-      if (!s.value) {
-        n("update:modelValue", e.emptyValue);
-        return;
+    function m() {
+      if (!a.value.value) {
+        if (e.outputType.toLowerCase() === "string") {
+          e.emptyValue === 0 ? u("update:modelValue", p(0)) : u("update:modelValue", e.emptyValue);
+          return;
+        }
+        if (e.outputType.toLowerCase() === "number") {
+          e.emptyValue === 0 ? u("update:modelValue", 0) : u("update:modelValue", "");
+          return;
+        }
       }
-      const o = e.outputType.toLowerCase() === "string" ? f.value : s.value;
-      n("update:modelValue", o);
+      const o = e.outputType.toLowerCase() === "string" ? v.value : d.value;
+      u("update:modelValue", o);
     }
-    return _(() => {
-      b(e.modelValue), p();
-    }), F(e, () => {
-      r.value || (b(e.modelValue), p());
-    }), (o, v) => $((w(), k("input", B(o.$attrs, {
-      "onUpdate:modelValue": v[0] || (v[0] = (E) => a.value = E),
-      onBlur: S,
-      onInput: x,
-      onFocus: V
+    return S(() => {
+      s(e.modelValue);
+    }), $(e, () => {
+      l.value || (s(e.modelValue), m());
+    }), (o, f) => T((k(), B("input", C({ ref: "number-input" }, o.$attrs, {
+      "onUpdate:modelValue": f[0] || (f[0] = (M) => r.value = M),
+      onBlur: V,
+      onInput: N,
+      onFocus: y
     }), null, 16)), [
-      [P, a.value]
+      [F, r.value]
     ]);
   }
 });
 export {
-  R as VueInputNumber
+  L as VueInputNumber
 };

package/dist/vue-input-number.umd.cjs

@@ -1 +1 @@
-(function(i,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(i=typeof globalThis<"u"?globalThis:i||self,r(i.VueInputNumber={},i.Vue))})(this,(function(i,r){"use strict";var s={symbol:"$",format:"%s%v",decimal:".",thousand:",",precision:2,grouping:3,stripZeros:!1,fallback:0,round:0};function b(u,t=s.decimal,e=s.fallback){let n=new RegExp(`[^0-9-(-)-${t}]`,"g"),o=(""+u).replace(n,"").replace(t,".").replace(/\(([-]*\d*[^)]?\d+)\)/g,"-$1").replace(/\((.*)\)/,""),l=(o.match(/-/g)||"").length%2,c=parseFloat(o.replace(/-/g,""))*(l?-1:1);return isNaN(c)?e:c}function y(u,t,e){t??=s.precision,e??=s.round;let n=Math.pow(10,t),o;return e>0?o=Math.ceil:e<0?o=Math.floor:o=Math.round,(o((u+1e-8)*n)/n).toFixed(t)}function S(u,t){let e=u.split(t),n="";if(e[0]!==void 0&&(n=e[0]),e[1]!==void 0){let o=e[1].replace(/0+$/,"");o.length>0&&(n=n+t+o)}return n}function V(u,t={}){t=Object.assign({},s,t);let e=u<0?"-":"",n=parseInt(y(Math.abs(u),t.precision,t.round),10)+"",o=n.length>3?n.length%3:0,l=e+(o?n.substr(0,o)+t.thousand:"")+n.substr(o).replace(/(\d{3})(?=\d)/g,"$1"+t.thousand)+(t.precision>0?t.decimal+y(Math.abs(u),t.precision).split(".")[1]:"");return t.stripZeros?S(l,t.decimal):l}function M(u){return typeof u=="string"&&u.match("%v")?{pos:u,neg:u.replace("-","").replace("%v","-%v"),zero:u}:u}function h(u,t={}){t=Object.assign({},s,t);let e=M(t.format),n;return u>0?n=e.pos:u<0?n=e.neg:n=e.zero,n.replace("%s",t.symbol).replace("%v",V(Math.abs(u),t))}const x=r.defineComponent({__name:"VueInputNumber",props:{modelValue:{},outputType:{default:"Number"},min:{default:Number.MIN_SAFE_INTEGER},max:{default:Number.MAX_SAFE_INTEGER},precision:{default:0},thousandSeparator:{default:","},decimalSeparator:{default:"."},currency:{default:""},currencySymbolPosition:{default:"prefix"},emptyValue:{default:""}},emits:["update:modelValue","blur","focus"],setup(u,{emit:t}){const e=u,n=t,o=r.ref(""),l=r.ref(!1),c=r.computed(()=>e.currency?e.currencySymbolPosition==="suffix"?"%v %s":"%s %v":"%v"),p=r.computed(()=>d(b(o.value,e.decimalSeparator))||0);function f(a){return h(a,{symbol:e.currency,format:c.value,thousand:e.thousandSeparator,decimal:e.decimalSeparator,precision:Number(e.precision)})}const I=r.computed(()=>f(p.value)),g=r.computed(()=>h(p.value,{symbol:"",format:"%v",thousand:e.thousandSeparator,decimal:e.decimalSeparator,precision:Number(e.precision)}));function E(a){l.value=!1,o.value=I.value,m(),n("blur",a)}function T(a){l.value=!0,o.value=g.value,n("focus",a)}function _(){l.value||m()}function d(a){return a<e.min?e.min:a>e.max?e.max:a}function v(a){if(!a){o.value=e.emptyValue===""?"":String(d(e.emptyValue));return}if(typeof a=="string"){o.value=f(d(b(a,e.decimalSeparator)));return}o.value=f(d(a))}function m(){if(!p.value){n("update:modelValue",e.emptyValue);return}const a=e.outputType.toLowerCase()==="string"?g.value:p.value;n("update:modelValue",a)}return r.onMounted(()=>{v(e.modelValue),m()}),r.watch(e,()=>{l.value||(v(e.modelValue),m())}),(a,N)=>r.withDirectives((r.openBlock(),r.createElementBlock("input",r.mergeProps(a.$attrs,{"onUpdate:modelValue":N[0]||(N[0]=F=>o.value=F),onBlur:E,onInput:_,onFocus:T}),null,16)),[[r.vModelDynamic,o.value]])}});i.VueInputNumber=x,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
+(function(i,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(i=typeof globalThis<"u"?globalThis:i||self,n(i.VueInputNumber={},i.Vue))})(this,(function(i,n){"use strict";var p={symbol:"$",format:"%s%v",decimal:".",thousand:",",precision:2,grouping:3,stripZeros:!1,fallback:0,round:0};function f(r,t=p.decimal,e=p.fallback){let u=new RegExp(`[^0-9-(-)-${t}]`,"g"),o=(""+r).replace(u,"").replace(t,".").replace(/\(([-]*\d*[^)]?\d+)\)/g,"-$1").replace(/\((.*)\)/,""),l=(o.match(/-/g)||"").length%2,s=parseFloat(o.replace(/-/g,""))*(l?-1:1);return isNaN(s)?e:s}function c(r,t,e){t??=p.precision,e??=p.round;let u=Math.pow(10,t),o;return e>0?o=Math.ceil:e<0?o=Math.floor:o=Math.round,(o((r+1e-8)*u)/u).toFixed(t)}function V(r,t){let e=r.split(t),u="";if(e[0]!==void 0&&(u=e[0]),e[1]!==void 0){let o=e[1].replace(/0+$/,"");o.length>0&&(u=u+t+o)}return u}function g(r,t={}){t=Object.assign({},p,t);let e=r<0?"-":"",u=parseInt(c(Math.abs(r),t.precision,t.round),10)+"",o=u.length>3?u.length%3:0,l=e+(o?u.substr(0,o)+t.thousand:"")+u.substr(o).replace(/(\d{3})(?=\d)/g,"$1"+t.thousand)+(t.precision>0?t.decimal+c(Math.abs(r),t.precision).split(".")[1]:"");return t.stripZeros?V(l,t.decimal):l}const N=n.defineComponent({__name:"VueInputNumber",props:{modelValue:{},outputType:{default:"Number"},precision:{default:0},thousandSeparator:{default:","},decimalSeparator:{default:"."},emptyValue:{default:""}},emits:["update:modelValue","blur","focus"],setup(r,{emit:t}){const e=r,u=t,o=n.useTemplateRef("number-input"),l=n.ref(""),s=n.ref(!1);function d(a){return g(a,{thousand:e.thousandSeparator,decimal:e.decimalSeparator,precision:Number(e.precision)})}const b=n.computed(()=>Number(c(f(l.value,e.decimalSeparator),e.precision))||0),M=n.computed(()=>d(b.value));function v(a){m(o.value.value),u("blur",a)}function S(a){s.value=!0,u("focus",a)}function T(){h()}function m(a){if(typeof a>"u"||a===""){l.value=e.emptyValue===0?d(0):"";return}if(typeof a=="number"){l.value=d(a);return}l.value=d(f(a,e.decimalSeparator))}function h(){if(!o.value.value){if(e.outputType.toLowerCase()==="string"){e.emptyValue===0?u("update:modelValue",d(0)):u("update:modelValue",e.emptyValue);return}if(e.outputType.toLowerCase()==="number"){e.emptyValue===0?u("update:modelValue",0):u("update:modelValue","");return}}const a=e.outputType.toLowerCase()==="string"?M.value:b.value;u("update:modelValue",a)}return n.onMounted(()=>{m(e.modelValue)}),n.watch(e,()=>{s.value||(m(e.modelValue),h())}),(a,y)=>n.withDirectives((n.openBlock(),n.createElementBlock("input",n.mergeProps({ref:"number-input"},a.$attrs,{"onUpdate:modelValue":y[0]||(y[0]=w=>l.value=w),onBlur:v,onInput:T,onFocus:S}),null,16)),[[n.vModelDynamic,l.value]])}});i.VueInputNumber=N,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,52 +1,56 @@
-{
-  "name": "@robin-rossow/vue-input-number",
-  "version": "2.0.1",
-  "keywords": [
-    "component",
-    "currency",
-    "input",
-    "text",
-    "number",
-    "numeric",
-    "vue3",
-    "vue",
-    "typescript"
-  ],
-  "type": "module",
-  "private": false,
-  "files": ["dist"],
-  "main": "./dist/vue-input-number.umd.cjs",
-  "module": "./dist/vue-input-number.js",
-  ".": {
-    "import": {
-      "types": "./dist/index.d.mts",
-      "default": "./dist/vue-input-number.js"
-    },
-    "require": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/vue-input-number.umd.cjs"
-    }
-  },
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "dev": "vite",
-    "test": "vitest",
-    "build": "vite build && vue-tsc --emitDeclarationOnly",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "accounting-js": "^2.0.3",
-    "vue": "^3.5.25"
-  },
-  "devDependencies": {
-    "@types/node": "^24.10.1",
-    "@vitejs/plugin-vue": "^6.0.2",
-    "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.8.1",
-    "happy-dom": "^20.6.1",
-    "typescript": "~5.9.3",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18",
-    "vue-tsc": "^3.2.4"
-  }
-}
+{
+  "name": "@robin-rossow/vue-input-number",
+  "version": "3.0.0",
+  "keywords": [
+    "component",
+    "currency",
+    "input",
+    "text",
+    "number",
+    "numeric",
+    "vue3",
+    "vue",
+    "typescript"
+  ],
+  "type": "module",
+  "private": false,
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vue-input-number.umd.cjs",
+  "module": "./dist/vue-input-number.js",
+  ".": {
+    "import": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/vue-input-number.js"
+    },
+    "require": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/vue-input-number.umd.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "test": "vitest run --coverage",
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "build-gh-pages": "vite build --config vite-gh-pages.config.ts",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "accounting-js": "^2.0.3",
+    "vue": "^3.5.25"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.8.1",
+    "happy-dom": "^20.6.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "vue-tsc": "^3.2.4"
+  }
+}