@coders-tm/vue-number-format - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8

dist/index.cjs.js

 /**
- * Vue Number Format 1.0.0
+ * Vue Currency Input 1.0.0
  * (c) 2018-2021 Dipak Sarkar <[e-mail]> (https://dipaksarkar.in/)
  * @license MIT
  */
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var options = {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+var Options = {
   prefix: '',
@@ -17,11 +23,10 @@ suffix: '',
   nullValue: ''
-};/**
+};
+
+/**
  * Number format function
  * @param {Object} options
  */
-function NumberFormat(config) {
-  var this$1$1 = this;
-  if ( config === void 0 ) config = options;
-
-  this.options = Object.assign(options, config);
+function NumberFormat(config = Options) {
+  this.options = Object.assign(Options, config);
   this.input = '';
@@ -31,17 +36,11 @@ this.number = '';
 
-  this.isNull = function (input) {
-    if ( input === void 0 ) input = this$1$1.input;
+  this.isNull = (input = this.input) => !this.numberOnly(input, new RegExp('[^0-9]+', 'gi'));
 
-    return !this$1$1.numberOnly(input, new RegExp('[^0-9]+', 'gi'));
+  this.clean = (clean = false) => {
+    this.isClean = clean;
+    return this
   };
 
-  this.clean = function (clean) {
-    if ( clean === void 0 ) clean = false;
-
-    this$1$1.isClean = clean;
-    return this$1$1
-  };
-
-  this.sign = function () {
-    var sign = (this$1$1.input.toString().indexOf('-') >= 0 && this$1$1.realNumber() > 0) ? '-' : '';
+  this.sign = () => {
+    const sign = (this.input.toString().indexOf('-') >= 0 && this.realNumber() > 0) ? '-' : '';
     return sign
@@ -66,43 +65,40 @@ };
 
-  this.toNumber = function (string) { return Number(string); };
+  this.toNumber = (string) => Number(string);
 
-  this.numberOnly = function (string, regExp) { return string.toString().replace(regExp, ''); };
+  this.numberOnly = (string, regExp) => string.toString().replace(regExp, '');
 
   this.isNegative = this.sign() === '-';
 
-  this.numbers = function () {
-    if (this$1$1.options.reverseFill) {
-      this$1$1.number = toFixed(this$1$1.numberOnly(this$1$1.input, /\D+/g), this$1$1.options.precision).replace('.', this$1$1.options.decimal);
-    } else if (typeof this$1$1.input === 'number') {
-      if (this$1$1.isClean) {
-        this$1$1.number = this$1$1.toNumber(this$1$1.input.toFixed(this$1$1.options.precision)).toString().replace('-', '').replace('.', this$1$1.options.decimal);
+  this.numbers = () => {
+    if (this.options.reverseFill) {
+      this.number = toFixed(this.numberOnly(this.input, /\D+/g), this.options.precision).replace('.', this.options.decimal);
+    } else if (typeof this.input === 'number') {
+      if (this.isClean) {
+        this.number = this.toNumber(this.input.toFixed(this.options.precision)).toString().replace('-', '').replace('.', this.options.decimal);
       } else {
-        this$1$1.number = this$1$1.toNumber(this$1$1.input).toString().replace('-', '').replace('.', this$1$1.options.decimal);
+        this.number = this.toNumber(this.input).toString().replace('-', '').replace('.', this.options.decimal);
       }
     } else {
-      this$1$1.number = this$1$1.numberOnly(this$1$1.input, new RegExp(("[^0-9\\" + (this$1$1.options.decimal) + "]+"), 'gi'));
-      this$1$1.number = this$1$1.parts(this$1$1.number).join(this$1$1.options.decimal);
+      this.number = this.numberOnly(this.input, new RegExp(`[^0-9\\${this.options.decimal}]+`, 'gi'));
+      this.number = this.parts(this.number).join(this.options.decimal);
     }
-    return this$1$1.number
+    return this.number
   };
 
-  this.realNumber = function () {
-    var number = this$1$1.numbers().toString().replace(this$1$1.options.decimal, '.');
-    if (this$1$1.options.reverseFill) {
+  this.realNumber = () => {
+    const number = this.numbers().toString().replace(this.options.decimal, '.');
+    if (this.options.reverseFill) {
       return number
     }
-    return this$1$1.toNumber(number)
+    return this.toNumber(number)
   };
 
-  this.parts = function (number, decimal) {
-    if ( number === void 0 ) number = '';
-    if ( decimal === void 0 ) decimal = this$1$1.options.decimal;
-
+  this.parts = (number = '', decimal = this.options.decimal) => {
     var parts = number.toString().split(decimal);
-    parts[0] = this$1$1.toNumber(parts[0]) || 0;
+    parts[0] = this.toNumber(parts[0]) || 0;
     if (parts.length > 1) {
       parts[1] = parts.slice(1, parts.length).join('');
       parts = parts.slice(0, 2);
-      if (this$1$1.isClean && parts[1].length > this$1$1.options.precision) {
-        parts[1] = this$1$1.toNumber(("." + (parts[1]))).toFixed(this$1$1.options.precision).toString().replace('0.', '');
+      if (this.isClean && parts[1].length) {
+        parts[1] = this.toNumber(`.${parts[1]}`).toFixed(this.options.precision).toString().replace('0.', '');
       }
@@ -113,10 +109,10 @@ }
 
-  this.addSeparator = function () {
-    var parts = this$1$1.numbers().split(this$1$1.options.decimal);
-    parts[0] = parts[0].toString().replace(/(\d)(?=(?:\d{3})+\b)/gm, ("$1" + (this$1$1.options.separator)));
-    if (this$1$1.isClean) {
-      parts[1] = this$1$1.toNumber(("." + (parts[1]))).toString().replace('0.', '');
-      return parts[1] && parts[1] > 0 ? parts.join(this$1$1.options.decimal) : parts[0]
+  this.addSeparator = () => {
+    var parts = this.numbers().split(this.options.decimal);
+    parts[0] = parts[0].toString().replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${this.options.separator}`);
+    if (this.isClean) {
+      parts[1] = this.toNumber(`.${parts[1]}`).toString().replace('0.', '');
+      return parts[1] && parts[1] > 0 ? parts.join(this.options.decimal) : parts[0]
     }
-    return parts.join(this$1$1.options.decimal)
+    return parts.join(this.options.decimal)
   };
@@ -129,7 +125,7 @@
    */
-  this.format = function (input) {
-    if (input === '') { return this$1$1.options.nullValue }
-    this$1$1.input = input || this$1$1.options.nullValue;
-    if (this$1$1.isNull()) { return this$1$1.options.nullValue }
-    return this$1$1.sign() + this$1$1.options.prefix + this$1$1.addSeparator() + this$1$1.options.suffix
+  this.format = (input) => {
+    if (input === '') return this.options.nullValue
+    this.input = input || this.options.nullValue;
+    if (this.isNull()) return this.options.nullValue
+    return this.sign() + this.options.prefix + this.addSeparator() + this.options.suffix
   };
@@ -142,11 +138,11 @@
    */
-  this.unformat = function (input) {
-    if (input === '') { return this$1$1.options.nullValue }
-    this$1$1.input = input || this$1$1.options.nullValue;
-    if (this$1$1.isNull()) { return this$1$1.options.nullValue }
-    return this$1$1.sign() + this$1$1.realNumber()
+  this.unformat = (input) => {
+    if (input === '') return this.options.nullValue
+    this.input = input || this.options.nullValue;
+    if (this.isNull()) return this.options.nullValue
+    return this.sign() + this.realNumber()
   };
-}// import options from './options'
+}
 
-var CONFIG_KEY$1 = '__input-facade__';
+const CONFIG_KEY$1 = '__input-facade__';
 
@@ -172,3 +168,3 @@ /**
 function getInputElement(el) {
-  var inputElement = el instanceof HTMLInputElement ? el : el.querySelector('input');
+  const inputElement = el instanceof HTMLInputElement ? el : el.querySelector('input');
 
@@ -189,6 +185,6 @@ /* istanbul ignore next */
 function updateCursor(el, position) {
-  var setSelectionRange = function () { el.setSelectionRange(position, position); };
+  const setSelectionRange = () => { el.setSelectionRange(position, position); };
   setSelectionRange();
   // Android Fix
-  setTimeout(setSelectionRange(), 0);
+  setTimeout(setSelectionRange(), 1);
 }
@@ -204,21 +200,13 @@
  */
-function updateValue(el, vnode, ref) {
-  if ( ref === void 0 ) ref = {};
-  var emit = ref.emit; if ( emit === void 0 ) emit = true;
-  var force = ref.force; if ( force === void 0 ) force = false;
-  var clean = ref.clean; if ( clean === void 0 ) clean = false;
+function updateValue(el, vnode, { emit = true, force = false, clean = false } = {}) {
+  const { config } = el[CONFIG_KEY$1];
+  let { oldValue } = el[CONFIG_KEY$1];
+  let currentValue = vnode && vnode.props ? vnode.props.value : el.value;
 
-  var ref$1 = el[CONFIG_KEY$1];
-  var config = ref$1.config;
-  var ref$2 = el[CONFIG_KEY$1];
-  var oldValue = ref$2.oldValue;
-
-  var currentValue = vnode && vnode.data.model ? vnode.data.model.value : el.value;
-
   oldValue = oldValue || '';
   currentValue = currentValue || '';
 
-  var number = new NumberFormat(config).clean(clean && !config.reverseFill);
-  var masked = number.format(currentValue);
-  var unmasked = number.clean(!config.reverseFill).unformat(currentValue);
+  const number = new NumberFormat(config).clean(clean && !config.reverseFill);
+  let masked = number.format(currentValue);
+  let unmasked = number.clean(!config.reverseFill).unformat(currentValue);
 
@@ -256,4 +244,3 @@ // check value with in range max and min value
 function inputHandler(event) {
-  var target = event.target;
-  var detail = event.detail;
+  const { target, detail } = event;
   // We dont need to run this method on the event we emit (prevent event loop)
@@ -268,6 +255,4 @@ if (detail && detail.facade) {
 
-  var positionFromEnd = target.value.length - target.selectionEnd;
-  var ref = target[CONFIG_KEY$1];
-  var oldValue = ref.oldValue;
-  var config = ref.config;
+  let positionFromEnd = target.value.length - target.selectionEnd;
+  const { oldValue, config } = target[CONFIG_KEY$1];
 
@@ -292,4 +277,3 @@ updateValue(target, null, { emit: false });
 function blurHandler(event) {
-  var target = event.target;
-  var detail = event.detail;
+  const { target, detail } = event;
   // We dont need to run this method on the event we emit (prevent event loop)
@@ -300,4 +284,3 @@ if (detail && detail.facade) {
 
-  var ref = target[CONFIG_KEY$1];
-  var oldValue = ref.oldValue;
+  const { oldValue } = target[CONFIG_KEY$1];
 
@@ -309,14 +292,13 @@ updateValue(target, null, { force: true, clean: true });
   }
-}/* eslint-disable prefer-object-spread */
+}
 
-var CONFIG_KEY = CONFIG_KEY$1;
+/* eslint-disable prefer-object-spread */
 
-var vNumber = {
-  bind: function (el, ref, vnode) {
-    var value = ref.value;
-    var modifiers = ref.modifiers;
+const CONFIG_KEY = CONFIG_KEY$1;
 
+var VNumber = {
+  beforeMount: (el, { value, modifiers }, vnode) => {
     el = getInputElement(el);
-    var config = Object.assign({}, options, value, modifiers);
-    el[CONFIG_KEY] = { config: config };
+    const config = Object.assign({}, Options, value, modifiers);
+    el[CONFIG_KEY] = { config };
     // set initial value
@@ -326,20 +308,20 @@ updateValue(el, vnode, { force: config.prefill, clean: true });
 
-  inserted: function (el) {
+  mounted: (el) => {
     el = getInputElement(el);
-    var option = el[CONFIG_KEY];
-    var config = option.config;
+    const option = el[CONFIG_KEY];
+    const { config } = option;
     // prefer adding event listener to parent element to avoid Firefox bug which does not
     // execute `useCapture: true` event handlers before non-capturing event handlers
-    var handlerOwner = el.parentElement || el;
+    const handlerOwner = el.parentElement || el;
 
     // use anonymous event handler to avoid inadvertently removing masking for all inputs within a container
-    var oninput = function (e) { return inputHandler(e); };
+    const oninput = (e) => inputHandler(e);
 
     handlerOwner.addEventListener('input', oninput, true);
 
-    el.onblur = function (e) { return blurHandler(e); };
+    el.onblur = (e) => blurHandler(e);
 
     // check decimal key and insert to current element
     // updated cursor position after format the value
-    el.onkeydown = function (e) {
+    el.onkeydown = (e) => {
       if (([110, 190].includes(e.keyCode) || e.key === config.decimal) && !el.value.includes(config.decimal)) {
@@ -355,14 +337,9 @@ e.preventDefault();
 
-    option.cleanup = function () { return handlerOwner.removeEventListener('input', oninput, true); };
+    option.cleanup = () => handlerOwner.removeEventListener('input', oninput, true);
   },
 
-  update: function (el, ref, vnode) {
-    var value = ref.value;
-    var oldValue = ref.oldValue;
-    var modifiers = ref.modifiers;
-
+  updated: (el, { value, oldValue, modifiers }, vnode) => {
     el = getInputElement(el);
     if (value !== oldValue) {
-      var ref$1 = el[CONFIG_KEY];
-      var config = ref$1.config;
+      const { config } = el[CONFIG_KEY];
       el[CONFIG_KEY].config = Object.assign({}, config, value, modifiers);
@@ -375,16 +352,15 @@ updateValue(el, vnode, { force: true, clean: true });
 
-  unbind: function (el) {
+  unmounted: (el) => {
     getInputElement(el)[CONFIG_KEY].cleanup();
   }
-};//
+};
 
 var script = {
   props: {
-    value: {
-      required: true,
-      type: [Number, String]
+    modelValue: {
+      required: true
     },
     nullValue: {
       type: [Number, String],
-      default: function () { return options.nullValue; }
+      default: () => Options.nullValue
     },
@@ -397,31 +373,32 @@ masked: {
       type: Boolean,
-      default: options.reverseFill
+      default: Options.reverseFill
     },
     precision: {
       type: Number,
-      default: function () { return options.precision; }
+      default: () => Options.precision
     },
     decimal: {
       type: String,
-      default: function () { return options.decimal; }
+      default: () => Options.decimal
     },
     separator: {
       type: String,
-      default: function () { return options.separator; }
+      default: () => Options.separator
     },
     prefix: {
       type: String,
-      default: function () { return options.prefix; }
+      default: () => Options.prefix
     },
     suffix: {
       type: String,
-      default: function () { return options.suffix; }
+      default: () => Options.suffix
     }
   },
   directives: {
-    number: vNumber
+    number: VNumber
   },
-  data: function data() {
+  emits: ['update:modelValue'],
+  data() {
     return {
-      maskedValue: this.value,
+      maskedValue: this.modelValue,
       unmaskedValue: null
@@ -431,134 +408,55 @@ }
   methods: {
-    input: function input(ref) {
-      var target = ref.target;
-
+    input({ target }) {
       this.maskedValue = target.value;
       this.unmaskedValue = target.unmaskedValue;
-      this.$emit('input', this.emittedValue);
+      this.$emit('update:modelValue', this.emittedValue);
     },
-    change: function change() {
-      this.$emit('change', this.emittedValue);
+    change() {
+      this.$emit('update:modelValue', this.emittedValue);
     }
   },
   computed: {
-    emittedValue: function emittedValue() {
+    emittedValue() {
       return this.masked ? this.maskedValue : this.unmaskedValue
     },
-    config: function config() {
+    config() {
       return this.$props
     }
   }
-};function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-    if (typeof shadowMode !== 'boolean') {
-        createInjectorSSR = createInjector;
-        createInjector = shadowMode;
-        shadowMode = false;
-    }
-    // Vue.extend constructor export interop.
-    var options = typeof script === 'function' ? script.options : script;
-    // render functions
-    if (template && template.render) {
-        options.render = template.render;
-        options.staticRenderFns = template.staticRenderFns;
-        options._compiled = true;
-        // functional template
-        if (isFunctionalTemplate) {
-            options.functional = true;
-        }
-    }
-    // scopedId
-    if (scopeId) {
-        options._scopeId = scopeId;
-    }
-    var hook;
-    if (moduleIdentifier) {
-        // server build
-        hook = function (context) {
-            // 2.3 injection
-            context =
-                context || // cached call
-                    (this.$vnode && this.$vnode.ssrContext) || // stateful
-                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
-            // 2.2 with runInNewContext: true
-            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-                context = __VUE_SSR_CONTEXT__;
-            }
-            // inject component styles
-            if (style) {
-                style.call(this, createInjectorSSR(context));
-            }
-            // register component module identifier for async chunk inference
-            if (context && context._registeredComponents) {
-                context._registeredComponents.add(moduleIdentifier);
-            }
-        };
-        // used by ssr in case component is cached and beforeCreate
-        // never gets called
-        options._ssrRegister = hook;
-    }
-    else if (style) {
-        hook = shadowMode
-            ? function (context) {
-                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-            }
-            : function (context) {
-                style.call(this, createInjector(context));
-            };
-    }
-    if (hook) {
-        if (options.functional) {
-            // register for functional component in vue file
-            var originalRender = options.render;
-            options.render = function renderWithStyleInjection(h, context) {
-                hook.call(context);
-                return originalRender(h, context);
-            };
-        }
-        else {
-            // inject component registration as beforeCreate hook
-            var existing = options.beforeCreate;
-            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-        }
-    }
-    return script;
-}/* script */
-var __vue_script__ = script;
+};
 
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',{directives:[{name:"number",rawName:"v-number",value:(_vm.config),expression:"config"}],staticClass:"v-number",attrs:{"type":"text","autocomplete":"off"},domProps:{"value":_vm.maskedValue},on:{"change":_vm.change,"input":_vm.input}},[])};
-var __vue_staticRenderFns__ = [];
+const _hoisted_1 = ["value"];
 
-  /* style */
-  var __vue_inject_styles__ = undefined;
-  /* scoped */
-  var __vue_scope_id__ = undefined;
-  /* module identifier */
-  var __vue_module_identifier__ = "data-v-3b4a95ee";
-  /* functional template */
-  var __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _directive_number = vue.resolveDirective("number");
 
-  
-  var __vue_component__ = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );function install(Vue, globalOptions) {
-  if (globalOptions) {
-    Object.assign(options, globalOptions);
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+    type: "text",
+    autocomplete: "off",
+    value: $data.maskedValue,
+    onChange: _cache[0] || (_cache[0] = (...args) => ($options.change && $options.change(...args))),
+    onInput: _cache[1] || (_cache[1] = (...args) => ($options.input && $options.input(...args))),
+    class: "v-number"
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1)), [
+    [_directive_number, $options.config]
+  ])
+}
+
+script.render = render;
+script.__file = "src/component.vue";
+
+var index = {
+  install(app, config) {
+    if (config) {
+      Object.assign(Options, config);
+    }
+    app.directive('number', VNumber);
+    app.component('number', script);
   }
-  Vue.directive('number', vNumber);
-  Vue.component('number', __vue_component__);
-}exports.NumberFormat=NumberFormat;exports['default']=install;exports.number=__vue_component__;exports.options=options;exports.vNumber=vNumber;//# sourceMappingURL=index.cjs.js.map
+};
+
+exports.Number = script;
+exports.NumberFormat = NumberFormat;
+exports.Options = Options;
+exports.VNumber = VNumber;
+exports['default'] = index;

dist/index.esm.js

 /**
- * Vue Number Format 1.0.0
+ * Vue Currency Input 1.0.0
  * (c) 2018-2021 Dipak Sarkar <[e-mail]> (https://dipaksarkar.in/)
  * @license MIT
  */
-var e={prefix:"",suffix:"",separator:",",decimal:".",precision:2,prefill:!0,reverseFill:!1,min:!1,max:!1,nullValue:""};function n(n){var t=this;function i(e){return n=0,t=e,i=20,Math.max(n,Math.min(t,i));var n,t,i}void 0===n&&(n=e),this.options=Object.assign(e,n),this.input="",this.number="",this.isClean=!1,this.isNull=function(e){return void 0===e&&(e=t.input),!t.numberOnly(e,new RegExp("[^0-9]+","gi"))},this.clean=function(e){return void 0===e&&(e=!1),t.isClean=e,t},this.sign=function(){return t.input.toString().indexOf("-")>=0&&t.realNumber()>0?"-":""},this.toNumber=function(e){return Number(e)},this.numberOnly=function(e,n){return e.toString().replace(n,"")},this.isNegative="-"===this.sign(),this.numbers=function(){var e,n,r;return t.options.reverseFill?t.number=(e=t.numberOnly(t.input,/\D+/g),n=t.options.precision,r=Math.pow(10,n),(parseFloat(e)/r).toFixed(i(n))).replace(".",t.options.decimal):"number"==typeof t.input?t.isClean?t.number=t.toNumber(t.input.toFixed(t.options.precision)).toString().replace("-","").replace(".",t.options.decimal):t.number=t.toNumber(t.input).toString().replace("-","").replace(".",t.options.decimal):(t.number=t.numberOnly(t.input,new RegExp("[^0-9\\"+t.options.decimal+"]+","gi")),t.number=t.parts(t.number).join(t.options.decimal)),t.number},this.realNumber=function(){var e=t.numbers().toString().replace(t.options.decimal,".");return t.options.reverseFill?e:t.toNumber(e)},this.parts=function(e,n){void 0===e&&(e=""),void 0===n&&(n=t.options.decimal);var i=e.toString().split(n);return i[0]=t.toNumber(i[0])||0,i.length>1&&(i[1]=i.slice(1,i.length).join(""),i=i.slice(0,2),t.isClean&&i[1].length>t.options.precision&&(i[1]=t.toNumber("."+i[1]).toFixed(t.options.precision).toString().replace("0.",""))),i.slice(0,2)},this.addSeparator=function(){var e=t.numbers().split(t.options.decimal);return e[0]=e[0].toString().replace(/(\d)(?=(?:\d{3})+\b)/gm,"$1"+t.options.separator),t.isClean?(e[1]=t.toNumber("."+e[1]).toString().replace("0.",""),e[1]&&e[1]>0?e.join(t.options.decimal):e[0]):e.join(t.options.decimal)},this.format=function(e){return""===e?t.options.nullValue:(t.input=e||t.options.nullValue,t.isNull()?t.options.nullValue:t.sign()+t.options.prefix+t.addSeparator()+t.options.suffix)},this.unformat=function(e){return""===e?t.options.nullValue:(t.input=e||t.options.nullValue,t.isNull()?t.options.nullValue:t.sign()+t.realNumber())}}var t="__input-facade__";function i(){return new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{facade:!0}})}function r(e){var n=e instanceof HTMLInputElement?e:e.querySelector("input");if(!n)throw new Error("facade directive requires an input element");return n}function a(e,n){var t=function(){e.setSelectionRange(n,n)};t(),setTimeout(t(),0)}function o(e,r,a){void 0===a&&(a={});var o=a.emit;void 0===o&&(o=!0);var u=a.force;void 0===u&&(u=!1);var l=a.clean;void 0===l&&(l=!1);var s=e[t].config,c=e[t].oldValue,d=r&&r.data.model?r.data.model.value:e.value;c=c||"",d=d||"";var p=new n(s).clean(l&&!s.reverseFill),f=p.format(d),m=p.clean(!s.reverseFill).unformat(d);if(l&&(s.max&&m>s.max?(f=p.format(s.max),m=p.unformat(s.max)):s.min&&m<s.min&&(f=p.format(s.min),m=p.unformat(s.min))),u||c!==d)return e[t].oldValue=f,e.unmaskedValue=m,e.value!==f&&(e.value=f),o&&e.dispatchEvent(i())}var u=t,l={bind:function(n,t,i){var a=t.value,l=t.modifiers;n=r(n);var s=Object.assign({},e,a,l);n[u]={config:s},o(n,i,{force:s.prefill,clean:!0})},inserted:function(e){var n=(e=r(e))[u],l=n.config,s=e.parentElement||e,c=function(e){return function(e){var n=e.target,r=e.detail;if(r&&r.facade)return!1;e.stopPropagation();var u=n.value.length-n.selectionEnd,l=n[t],s=l.oldValue,c=l.config;o(n,null,{emit:!1}),u=Math.max(u,c.suffix.length),u=n.value.length-u,a(n,u=Math.max(u,c.prefix.length+1)),s!==n.value&&n.dispatchEvent(i())}(e)};s.addEventListener("input",c,!0),e.onblur=function(e){return function(e){var n=e.target,r=e.detail;if(r&&r.facade)return!1;var a=n[t].oldValue;o(n,null,{force:!0,clean:!0}),a!==n.value&&n.dispatchEvent(i())}(e)},e.onkeydown=function(n){![110,190].includes(n.keyCode)&&n.key!==l.decimal||e.value.includes(l.decimal)?([110,190].includes(n.keyCode)||n.key===l.decimal)&&e.value.includes(l.decimal)&&n.preventDefault():(n.preventDefault(),e.setRangeText(l.decimal),e.dispatchEvent(new Event("input")),a(e,e.value.indexOf(l.decimal)+1))},n.cleanup=function(){return s.removeEventListener("input",c,!0)}},update:function(e,n,t){var i=n.value,a=n.oldValue,l=n.modifiers;if(e=r(e),i!==a){var s=e[u].config;e[u].config=Object.assign({},s,i,l),o(e,t,{force:!0,clean:!0})}else o(e,t)},unbind:function(e){r(e)[u].cleanup()}};function s(e,n,t,i,r,a,o,u,l,s){"boolean"!=typeof o&&(l=u,u=o,o=!1);var c,d="function"==typeof t?t.options:t;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,r&&(d.functional=!0)),i&&(d._scopeId=i),a?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},d._ssrRegister=c):n&&(c=o?function(e){n.call(this,s(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,u(e))}),c)if(d.functional){var p=d.render;d.render=function(e,n){return c.call(n),p(e,n)}}else{var f=d.beforeCreate;d.beforeCreate=f?[].concat(f,c):[c]}return t}var c=s({render:function(){var e=this.$createElement;return(this._self._c||e)("input",{directives:[{name:"number",rawName:"v-number",value:this.config,expression:"config"}],staticClass:"v-number",attrs:{type:"text",autocomplete:"off"},domProps:{value:this.maskedValue},on:{change:this.change,input:this.input}})},staticRenderFns:[]},void 0,{props:{value:{required:!0,type:[Number,String]},nullValue:{type:[Number,String],default:function(){return e.nullValue}},masked:{type:Boolean,default:!1},reverseFill:{type:Boolean,default:e.reverseFill},precision:{type:Number,default:function(){return e.precision}},decimal:{type:String,default:function(){return e.decimal}},separator:{type:String,default:function(){return e.separator}},prefix:{type:String,default:function(){return e.prefix}},suffix:{type:String,default:function(){return e.suffix}}},directives:{number:l},data:function(){return{maskedValue:this.value,unmaskedValue:null}},methods:{input:function(e){var n=e.target;this.maskedValue=n.value,this.unmaskedValue=n.unmaskedValue,this.$emit("input",this.emittedValue)},change:function(){this.$emit("change",this.emittedValue)}},computed:{emittedValue:function(){return this.masked?this.maskedValue:this.unmaskedValue},config:function(){return this.$props}}},void 0,!1,void 0,!1,void 0,void 0,void 0);function d(n,t){t&&Object.assign(e,t),n.directive("number",l),n.component("number",c)}export{n as NumberFormat,d as default,c as number,e as options,l as vNumber};
-//# sourceMappingURL=index.esm.js.map
+import { resolveDirective, withDirectives, openBlock, createElementBlock } from 'vue';
+
+var Options = {
+  prefix: '',
+  suffix: '',
+  separator: ',',
+  decimal: '.',
+  precision: 2,
+  prefill: true,
+  reverseFill: false,
+  min: false,
+  max: false,
+  nullValue: ''
+};
+
+/**
+ * Number format function
+ * @param {Object} options
+ */
+function NumberFormat(config = Options) {
+  this.options = Object.assign(Options, config);
+  this.input = '';
+  this.number = '';
+  this.isClean = false;
+
+  this.isNull = (input = this.input) => !this.numberOnly(input, new RegExp('[^0-9]+', 'gi'));
+
+  this.clean = (clean = false) => {
+    this.isClean = clean;
+    return this
+  };
+
+  this.sign = () => {
+    const sign = (this.input.toString().indexOf('-') >= 0 && this.realNumber() > 0) ? '-' : '';
+    return sign
+  };
+
+  function between(min, n, max) {
+    return Math.max(min, Math.min(n, max))
+  }
+
+  // Uncaught RangeError: toFixed() digits argument must be between 0 and 20 at Number.toFixed
+  function fixed(precision) {
+    return between(0, precision, 20)
+  }
+
+  function toFixed(numbers, precision) {
+    // eslint-disable-next-line no-restricted-properties
+    var exp = Math.pow(10, precision);
+    var float = parseFloat(numbers) / exp;
+    return float.toFixed(fixed(precision))
+  }
+
+  this.toNumber = (string) => Number(string);
+
+  this.numberOnly = (string, regExp) => string.toString().replace(regExp, '');
+
+  this.isNegative = this.sign() === '-';
+
+  this.numbers = () => {
+    if (this.options.reverseFill) {
+      this.number = toFixed(this.numberOnly(this.input, /\D+/g), this.options.precision).replace('.', this.options.decimal);
+    } else if (typeof this.input === 'number') {
+      if (this.isClean) {
+        this.number = this.toNumber(this.input.toFixed(this.options.precision)).toString().replace('-', '').replace('.', this.options.decimal);
+      } else {
+        this.number = this.toNumber(this.input).toString().replace('-', '').replace('.', this.options.decimal);
+      }
+    } else {
+      this.number = this.numberOnly(this.input, new RegExp(`[^0-9\\${this.options.decimal}]+`, 'gi'));
+      this.number = this.parts(this.number).join(this.options.decimal);
+    }
+    return this.number
+  };
+
+  this.realNumber = () => {
+    const number = this.numbers().toString().replace(this.options.decimal, '.');
+    if (this.options.reverseFill) {
+      return number
+    }
+    return this.toNumber(number)
+  };
+
+  this.parts = (number = '', decimal = this.options.decimal) => {
+    var parts = number.toString().split(decimal);
+    parts[0] = this.toNumber(parts[0]) || 0;
+    if (parts.length > 1) {
+      parts[1] = parts.slice(1, parts.length).join('');
+      parts = parts.slice(0, 2);
+      if (this.isClean && parts[1].length) {
+        parts[1] = this.toNumber(`.${parts[1]}`).toFixed(this.options.precision).toString().replace('0.', '');
+      }
+    }
+    return parts.slice(0, 2)
+  };
+
+  this.addSeparator = () => {
+    var parts = this.numbers().split(this.options.decimal);
+    parts[0] = parts[0].toString().replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${this.options.separator}`);
+    if (this.isClean) {
+      parts[1] = this.toNumber(`.${parts[1]}`).toString().replace('0.', '');
+      return parts[1] && parts[1] > 0 ? parts.join(this.options.decimal) : parts[0]
+    }
+    return parts.join(this.options.decimal)
+  };
+
+  /**
+   * Format the input with default config if there is no constructor config
+   * @param {Number, String} input
+   * @return {String}
+   */
+  this.format = (input) => {
+    if (input === '') return this.options.nullValue
+    this.input = input || this.options.nullValue;
+    if (this.isNull()) return this.options.nullValue
+    return this.sign() + this.options.prefix + this.addSeparator() + this.options.suffix
+  };
+
+  /**
+   * Unformat the input with default config if there is no constructor config
+   * @param {Number, String} input
+   * @return {String}
+   */
+  this.unformat = (input) => {
+    if (input === '') return this.options.nullValue
+    this.input = input || this.options.nullValue;
+    if (this.isNull()) return this.options.nullValue
+    return this.sign() + this.realNumber()
+  };
+}
+
+const CONFIG_KEY$1 = '__input-facade__';
+
+/**
+ * Creates a CustomEvent('input') with detail = { facade: true }
+ * used as a way to identify our own input event
+ */
+function FacadeInputEvent() {
+  return new CustomEvent('input', {
+    bubbles: true,
+    cancelable: true,
+    detail: { facade: true }
+  })
+}
+
+/**
+ * ensure that the element we're attaching to is an input element
+ * if not try to find an input element in this elements childrens
+ *
+ * @param {HTMLInputElement} el
+ */
+function getInputElement(el) {
+  const inputElement = el instanceof HTMLInputElement ? el : el.querySelector('input');
+
+  /* istanbul ignore next */
+  if (!inputElement) {
+    throw new Error('facade directive requires an input element')
+  }
+
+  return inputElement
+}
+
+/**
+ * Updates the cursor position to the right place after the masking rule was applied
+ * @param {HTMLElement} el
+ * @param {Number} position
+ */
+function updateCursor(el, position) {
+  const setSelectionRange = () => { el.setSelectionRange(position, position); };
+  setSelectionRange();
+  // Android Fix
+  setTimeout(setSelectionRange(), 1);
+}
+
+/**
+ * Updates the element's value and unmasked value based on the masking config rules
+ *
+ * @param {HTMLInputElement} el The input element to update
+ * @param {object} [options]
+ * @param {Boolean} options.emit Wether to dispatch a new InputEvent or not
+ * @param {Boolean} options.force Forces the update even if the old value and the new value are the same
+ */
+function updateValue(el, vnode, { emit = true, force = false, clean = false } = {}) {
+  const { config } = el[CONFIG_KEY$1];
+  let { oldValue } = el[CONFIG_KEY$1];
+  let currentValue = vnode && vnode.props ? vnode.props.value : el.value;
+
+  oldValue = oldValue || '';
+  currentValue = currentValue || '';
+
+  const number = new NumberFormat(config).clean(clean && !config.reverseFill);
+  let masked = number.format(currentValue);
+  let unmasked = number.clean(!config.reverseFill).unformat(currentValue);
+
+  // check value with in range max and min value
+  if (clean) {
+    if (config.max && unmasked > config.max) {
+      masked = number.format(config.max);
+      unmasked = number.unformat(config.max);
+    } else if (config.min && unmasked < config.min) {
+      masked = number.format(config.min);
+      unmasked = number.unformat(config.min);
+    }
+  }
+
+  if (force || oldValue !== currentValue) {
+    el[CONFIG_KEY$1].oldValue = masked;
+    el.unmaskedValue = unmasked;
+    // safari makes the cursor jump to the end if el.value gets assign even if to the same value
+    if (el.value !== masked) {
+      el.value = masked;
+    }
+
+    // this part needs to be outside the above IF statement for vuetify in firefox
+    // drawback is that we endup with two's input events in firefox
+    return emit && el.dispatchEvent(FacadeInputEvent())
+  }
+}
+
+/**
+ * Input event handler
+ *
+ * @param {Event} event The event object
+ */
+function inputHandler(event) {
+  const { target, detail } = event;
+  // We dont need to run this method on the event we emit (prevent event loop)
+  if (detail && detail.facade) {
+    return false
+  }
+
+  // since we will be emitting our own custom input event
+  // we can stop propagation of this native event
+  event.stopPropagation();
+
+  let positionFromEnd = target.value.length - target.selectionEnd;
+  const { oldValue, config } = target[CONFIG_KEY$1];
+
+  updateValue(target, null, { emit: false });
+  // updated cursor position
+  positionFromEnd = Math.max(positionFromEnd, config.suffix.length);
+  positionFromEnd = target.value.length - positionFromEnd;
+  positionFromEnd = Math.max(positionFromEnd, config.prefix.length + 1);
+  updateCursor(target, positionFromEnd);
+
+  if (oldValue !== target.value) {
+    target.dispatchEvent(FacadeInputEvent());
+  }
+}
+
+/**
+ * Blur event handler
+ *
+ * @param {Event} event The event object
+ */
+function blurHandler(event) {
+  const { target, detail } = event;
+  // We dont need to run this method on the event we emit (prevent event loop)
+  if (detail && detail.facade) {
+    return false
+  }
+
+  const { oldValue } = target[CONFIG_KEY$1];
+
+  updateValue(target, null, { force: true, clean: true });
+
+  if (oldValue !== target.value) {
+    target.dispatchEvent(FacadeInputEvent());
+  }
+}
+
+/* eslint-disable prefer-object-spread */
+
+const CONFIG_KEY = CONFIG_KEY$1;
+
+var VNumber = {
+  beforeMount: (el, { value, modifiers }, vnode) => {
+    el = getInputElement(el);
+    const config = Object.assign({}, Options, value, modifiers);
+    el[CONFIG_KEY] = { config };
+    // set initial value
+    updateValue(el, vnode, { force: config.prefill, clean: true });
+  },
+
+  mounted: (el) => {
+    el = getInputElement(el);
+    const option = el[CONFIG_KEY];
+    const { config } = option;
+    // prefer adding event listener to parent element to avoid Firefox bug which does not
+    // execute `useCapture: true` event handlers before non-capturing event handlers
+    const handlerOwner = el.parentElement || el;
+
+    // use anonymous event handler to avoid inadvertently removing masking for all inputs within a container
+    const oninput = (e) => inputHandler(e);
+
+    handlerOwner.addEventListener('input', oninput, true);
+
+    el.onblur = (e) => blurHandler(e);
+
+    // check decimal key and insert to current element
+    // updated cursor position after format the value
+    el.onkeydown = (e) => {
+      if (([110, 190].includes(e.keyCode) || e.key === config.decimal) && !el.value.includes(config.decimal)) {
+        e.preventDefault();
+        el.setRangeText(config.decimal);
+        el.dispatchEvent(new Event('input'));
+        updateCursor(el, el.value.indexOf(config.decimal) + 1);
+      } else if (([110, 190].includes(e.keyCode) || e.key === config.decimal) && el.value.includes(config.decimal)) {
+        e.preventDefault();
+      }
+    };
+
+    option.cleanup = () => handlerOwner.removeEventListener('input', oninput, true);
+  },
+
+  updated: (el, { value, oldValue, modifiers }, vnode) => {
+    el = getInputElement(el);
+    if (value !== oldValue) {
+      const { config } = el[CONFIG_KEY];
+      el[CONFIG_KEY].config = Object.assign({}, config, value, modifiers);
+      updateValue(el, vnode, { force: true, clean: true });
+    } else {
+      updateValue(el, vnode);
+    }
+  },
+
+  unmounted: (el) => {
+    getInputElement(el)[CONFIG_KEY].cleanup();
+  }
+};
+
+var script = {
+  props: {
+    modelValue: {
+      required: true
+    },
+    nullValue: {
+      type: [Number, String],
+      default: () => Options.nullValue
+    },
+    masked: {
+      type: Boolean,
+      default: false
+    },
+    reverseFill: {
+      type: Boolean,
+      default: Options.reverseFill
+    },
+    precision: {
+      type: Number,
+      default: () => Options.precision
+    },
+    decimal: {
+      type: String,
+      default: () => Options.decimal
+    },
+    separator: {
+      type: String,
+      default: () => Options.separator
+    },
+    prefix: {
+      type: String,
+      default: () => Options.prefix
+    },
+    suffix: {
+      type: String,
+      default: () => Options.suffix
+    }
+  },
+  directives: {
+    number: VNumber
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      maskedValue: this.modelValue,
+      unmaskedValue: null
+    }
+  },
+  methods: {
+    input({ target }) {
+      this.maskedValue = target.value;
+      this.unmaskedValue = target.unmaskedValue;
+      this.$emit('update:modelValue', this.emittedValue);
+    },
+    change() {
+      this.$emit('update:modelValue', this.emittedValue);
+    }
+  },
+  computed: {
+    emittedValue() {
+      return this.masked ? this.maskedValue : this.unmaskedValue
+    },
+    config() {
+      return this.$props
+    }
+  }
+};
+
+const _hoisted_1 = ["value"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _directive_number = resolveDirective("number");
+
+  return withDirectives((openBlock(), createElementBlock("input", {
+    type: "text",
+    autocomplete: "off",
+    value: $data.maskedValue,
+    onChange: _cache[0] || (_cache[0] = (...args) => ($options.change && $options.change(...args))),
+    onInput: _cache[1] || (_cache[1] = (...args) => ($options.input && $options.input(...args))),
+    class: "v-number"
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1)), [
+    [_directive_number, $options.config]
+  ])
+}
+
+script.render = render;
+script.__file = "src/component.vue";
+
+var index = {
+  install(app, config) {
+    if (config) {
+      Object.assign(Options, config);
+    }
+    app.directive('number', VNumber);
+    app.component('number', script);
+  }
+};
+
+export { script as Number, NumberFormat, Options, VNumber, index as default };

package.json

 {
   "name": "@coders-tm/vue-number-format",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "private": false,
@@ -18,4 +18,4 @@ "description": "Easy formatted numbers, currency and percentage with input/directive mask for Vue.js",
     "build": "rollup --c rollup.config.js",
-    "docs:build": "vuepress build docs",
-    "docs:dev": "vuepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:dev": "vitepress dev docs",
     "test": "jest tests/*",
@@ -25,41 +25,2 @@ "lint": "eslint 'src/**/*.{js,vue}'",
   },
-  "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
-    "@vue/cli-plugin-unit-jest": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/test-utils": "^1.2.2",
-    "@vuedoc/md": "^1.6.0",
-    "@vuepress/plugin-back-to-top": "^1.8.2",
-    "@vuepress/plugin-google-analytics": "^1.8.2",
-    "@vuepress/plugin-medium-zoom": "^1.8.2",
-    "@vuepress/plugin-register-components": "^1.4.1",
-    "babel-core": "^6.26.3",
-    "babel-jest": "^25.3.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-vue": "^2.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.1.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "jest": "^25.3.0",
-    "node-fetch": "^2.6.0",
-    "npm-run-all": "^4.1.5",
-    "postcss": "6.0",
-    "quasar": "^1.11.3",
-    "rollup": "^2.6.1",
-    "rollup-plugin-buble": "^0.19.8",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-css-only": "^2.0.0",
-    "rollup-plugin-filesize": "^9.1.1",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-vue": "^5.1.6",
-    "vue": "^2.6.11",
-    "vue-jest": "^3.0.5",
-    "vue-template-compiler": "^2.6.11",
-    "vuepress": "^1.8.2",
-    "vuepress-plugin-demo-code": "^0.5.0"
-  },
   "bugs": {
@@ -88,3 +49,24 @@ "url": "https://github.com/coders-tm/vue-number-format/issues"
     "@coders-tm:registry": "https://npm.pkg.github.com"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@vue/cli": "^4.5.13",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.2.0",
+    "core-js": "^3.6.5",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-vue": "^7.18.0",
+    "jest": "^27.2.0",
+    "rollup": "^2.56.3",
+    "rollup-plugin-filesize": "^9.1.1",
+    "rollup-plugin-vue": "^6.0.0",
+    "vitepress": "^0.18.1",
+    "vue": "^3.0.0"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

19

decreased by-48.65%

Lines of code

764

increased by39.42%

Worsened metrics

Total package byte prevSize

31906

decreased by-73.34%

Number of package files

6

decreased by-40%

No dependency changes