vue-currency-input - npm Package Compare versions

Comparing version 1.16.1 to 1.17.0

dist/vue-currency-input.esm.js

 /**
- * Vue Currency Input 1.16.1
+ * Vue Currency Input 1.17.0
  * (c) 2020 Matthias Stiller
@@ -295,2 +295,5 @@ * @license MIT
     options.distractionFree.hideNegligibleDecimalDigits = false;
+    inputElement.setAttribute('inputmode', 'numeric');
+  } else {
+    inputElement.setAttribute('inputmode', 'decimal');
   }
@@ -324,3 +327,2 @@ var currencyFormat = createCurrencyFormat$1(options);
   var minimumFractionDigits = ref$1.minimumFractionDigits;
-  var oldValue = el.$ci.numberValue;
   if (value != null) {
@@ -331,7 +333,4 @@ value = validateValueRange(value, valueRange);
   format(el, value);
-  var newValue = el.$ci.numberValue;
-  if (oldValue !== newValue || forcedChange) {
-    var numberValue = toInteger(newValue, valueAsInteger, maximumFractionDigits);
-    dispatchEvent(el, 'input', { numberValue: numberValue });
-    dispatchEvent(el, 'change', { numberValue: numberValue });
+  if (forcedChange) {
+    dispatchEvent(el, 'change', { numberValue: toInteger(el.$ci.numberValue, valueAsInteger, maximumFractionDigits) });
   }
@@ -381,4 +380,5 @@ };
 };
-var format = function (el, value) {
-  updateInputValue(el, value);
+var format = function (el, value, hideNegligibleDecimalDigits) {
+  if ( hideNegligibleDecimalDigits === void 0 ) hideNegligibleDecimalDigits = false;
+  updateInputValue(el, value, hideNegligibleDecimalDigits);
   var ref = el.$ci;
@@ -389,3 +389,3 @@ var numberValue = ref.numberValue;
   numberValue = toInteger(numberValue, options.valueAsInteger, currencyFormat.maximumFractionDigits);
-  dispatchEvent(el, 'format-complete', { numberValue: numberValue });
+  dispatchEvent(el, 'input', { numberValue: numberValue });
 };
@@ -428,3 +428,3 @@ var addEventListener = function (el) {
         var selectionEnd = el.selectionEnd;
-        updateInputValue(el, el.value, hideNegligibleDecimalDigits);
+        format(el, el.value, hideNegligibleDecimalDigits);
         if (Math.abs(selectionStart - selectionEnd) > 0) {
@@ -470,5 +470,5 @@ el.setSelectionRange(0, el.value.length);
 
-function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
 var component = {
   render: function render (h) {
+    var this$1 = this;
     return h('input', {
@@ -482,3 +482,5 @@ domProps: {
       }],
-      on: this.listeners()
+      on: Object.assign({}, this.$listeners,
+        {change: function (e) { return this$1.emit('change', e); },
+        input: function (e) { return this$1.emit('input', e); }})
     })
@@ -552,23 +554,8 @@ },
     },
-    listeners: function listeners () {
-      var this$1 = this;
-      var ref = this.$listeners;
-      var input = ref.input;
-      var rest = objectWithoutProperties( ref, ["input"] );
-      var listeners = rest;
-      return Object.assign({}, listeners,
-        {change: function (ref) {
-          var detail = ref.detail;
-          if (detail) {
-            this$1.$emit('change', detail.numberValue);
-          }
-          this$1.formattedValue = this$1.$el.value;
-        },
-        'format-complete': function (ref) {
-          var detail = ref.detail;
-          if (this$1.value !== detail.numberValue) {
-            this$1.$emit('input', detail.numberValue);
-          }
-          this$1.formattedValue = this$1.$el.value;
-        }})
+    emit: function emit (event, ref) {
+      var detail = ref.detail;
+      if (detail && this.value !== detail.numberValue) {
+        this.$emit(event, detail.numberValue);
+      }
+      this.formattedValue = this.$el.value;
     }
@@ -575,0 +562,0 @@ }

dist/vue-currency-input.umd.js

 /**
- * Vue Currency Input 1.16.1
+ * Vue Currency Input 1.17.0
  * (c) 2020 Matthias Stiller
@@ -301,2 +301,5 @@ * @license MIT
       options.distractionFree.hideNegligibleDecimalDigits = false;
+      inputElement.setAttribute('inputmode', 'numeric');
+    } else {
+      inputElement.setAttribute('inputmode', 'decimal');
     }
@@ -330,3 +333,2 @@ var currencyFormat = createCurrencyFormat$1(options);
     var minimumFractionDigits = ref$1.minimumFractionDigits;
-    var oldValue = el.$ci.numberValue;
     if (value != null) {
@@ -337,7 +339,4 @@ value = validateValueRange(value, valueRange);
     format(el, value);
-    var newValue = el.$ci.numberValue;
-    if (oldValue !== newValue || forcedChange) {
-      var numberValue = toInteger(newValue, valueAsInteger, maximumFractionDigits);
-      dispatchEvent(el, 'input', { numberValue: numberValue });
-      dispatchEvent(el, 'change', { numberValue: numberValue });
+    if (forcedChange) {
+      dispatchEvent(el, 'change', { numberValue: toInteger(el.$ci.numberValue, valueAsInteger, maximumFractionDigits) });
     }
@@ -387,4 +386,5 @@ };
   };
-  var format = function (el, value) {
-    updateInputValue(el, value);
+  var format = function (el, value, hideNegligibleDecimalDigits) {
+    if ( hideNegligibleDecimalDigits === void 0 ) hideNegligibleDecimalDigits = false;
+    updateInputValue(el, value, hideNegligibleDecimalDigits);
     var ref = el.$ci;
@@ -395,3 +395,3 @@ var numberValue = ref.numberValue;
     numberValue = toInteger(numberValue, options.valueAsInteger, currencyFormat.maximumFractionDigits);
-    dispatchEvent(el, 'format-complete', { numberValue: numberValue });
+    dispatchEvent(el, 'input', { numberValue: numberValue });
   };
@@ -434,3 +434,3 @@ var addEventListener = function (el) {
           var selectionEnd = el.selectionEnd;
-          updateInputValue(el, el.value, hideNegligibleDecimalDigits);
+          format(el, el.value, hideNegligibleDecimalDigits);
           if (Math.abs(selectionStart - selectionEnd) > 0) {
@@ -476,5 +476,5 @@ el.setSelectionRange(0, el.value.length);
 
-  function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
   var component = {
     render: function render (h) {
+      var this$1 = this;
       return h('input', {
@@ -488,3 +488,5 @@ domProps: {
         }],
-        on: this.listeners()
+        on: Object.assign({}, this.$listeners,
+          {change: function (e) { return this$1.emit('change', e); },
+          input: function (e) { return this$1.emit('input', e); }})
       })
@@ -558,23 +560,8 @@ },
       },
-      listeners: function listeners () {
-        var this$1 = this;
-        var ref = this.$listeners;
-        var input = ref.input;
-        var rest = objectWithoutProperties( ref, ["input"] );
-        var listeners = rest;
-        return Object.assign({}, listeners,
-          {change: function (ref) {
-            var detail = ref.detail;
-            if (detail) {
-              this$1.$emit('change', detail.numberValue);
-            }
-            this$1.formattedValue = this$1.$el.value;
-          },
-          'format-complete': function (ref) {
-            var detail = ref.detail;
-            if (this$1.value !== detail.numberValue) {
-              this$1.$emit('input', detail.numberValue);
-            }
-            this$1.formattedValue = this$1.$el.value;
-          }})
+      emit: function emit (event, ref) {
+        var detail = ref.detail;
+        if (detail && this.value !== detail.numberValue) {
+          this.$emit(event, detail.numberValue);
+        }
+        this.formattedValue = this.$el.value;
       }
@@ -581,0 +568,0 @@ }

nuxt/index.js

@@ -0,0 +0,0 @@ const { resolve } = require('path')

nuxt/plugin.js

@@ -0,0 +0,0 @@ import Vue from 'vue'

package.json

 {
   "name": "vue-currency-input",
   "description": "Easy input of currency formatted numbers for Vue.js.",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "unpkg": "dist/vue-currency-input.umd.js",

README.md

@@ -13,4 +13,47 @@ [![Build Status](https://travis-ci.com/dm4t2/vue-currency-input.svg?branch=master)](https://travis-ci.com/dm4t2/vue-currency-input)
 
-[Read the guide](https://dm4t2.github.io/vue-currency-input/guide/) to getting started or check out the [playground](https://dm4t2.github.io/vue-currency-input/playground/) to see it in action.
+## Features
+* [Tiny bundle size](https://bundlephobia.com/result?p=vue-currency-input) and zero dependencies
+* Format as you type
+* Locale dependent, ISO-compliant currency formatting
+* Distraction free (hides the formatting on focus for easier input)
+* Customizable currency symbols and precision ranges
+* Built-in value range validation
+* Works with input components of popular frameworks like [Vuetify](https://vuetifyjs.com/en/components/text-fields) or [Element](https://element.eleme.io/#/en-US/component/input))
+* Supports IE 11 (sadly it's not a feature 🤮)
 
+## Live Demo
+Check out the [playground](https://dm4t2.github.io/vue-currency-input/playground/) to see it in action.
+
+## Quick Start
+Install the npm package:
+``` bash
+npm install vue-currency-input 
+# OR 
+yarn add vue-currency-input
+```
+
+Add the Vue plugin in your `main.js`:
+``` js
+import Vue from 'vue'
+import VueCurrencyInput from 'vue-currency-input'
+
+Vue.use(VueCurrencyInput)
+```
+
+Use the `<currency-input`> component:
+``` vue
+<template>
+  <currency-input v-model="value" />
+</template>
+
+<script>
+export default {
+  data: () => ({ value: 1000 })
+}
+</script>
+```
+
+## Documentation
+Please refer to the [project home page](https://dm4t2.github.io/vue-currency-input) for a detailed documentation.
+
 ## Support me
@@ -17,0 +60,0 @@ If you find this plugin helpful or you want to support the development, buy me a coffee:

src/component.js

@@ -14,3 +14,7 @@ import { DEFAULT_OPTIONS, setValue } from './api'
       }],
-      on: this.listeners()
+      on: {
+        ...this.$listeners,
+        change: e => this.emit('change', e),
+        input: e => this.emit('input', e)
+      }
     })
@@ -83,21 +87,9 @@ },
     },
-    listeners () {
-      const { input, ...listeners } = this.$listeners // all but input event
-      return {
-        ...listeners,
-        change: ({ detail }) => {
-          if (detail) {
-            this.$emit('change', detail.numberValue)
-          }
-          this.formattedValue = this.$el.value
-        },
-        'format-complete': ({ detail }) => {
-          if (this.value !== detail.numberValue) {
-            this.$emit('input', detail.numberValue)
-          }
-          this.formattedValue = this.$el.value
-        }
+    emit (event, { detail }) {
+      if (detail && this.value !== detail.numberValue) {
+        this.$emit(event, detail.numberValue)
       }
+      this.formattedValue = this.$el.value
     }
   }
 }

src/directive.js

@@ -28,2 +28,5 @@ import Vue from 'vue'
     options.distractionFree.hideNegligibleDecimalDigits = false
+    inputElement.setAttribute('inputmode', 'numeric')
+  } else {
+    inputElement.setAttribute('inputmode', 'decimal')
   }
@@ -55,3 +58,2 @@ const currencyFormat = createCurrencyFormat(options)
   const { maximumFractionDigits, minimumFractionDigits } = el.$ci.currencyFormat
-  const oldValue = el.$ci.numberValue
   if (value != null) {
@@ -62,7 +64,4 @@ value = validateValueRange(value, valueRange)
   format(el, value)
-  const newValue = el.$ci.numberValue
-  if (oldValue !== newValue || forcedChange) {
-    const numberValue = toInteger(newValue, valueAsInteger, maximumFractionDigits)
-    dispatchEvent(el, 'input', { numberValue })
-    dispatchEvent(el, 'change', { numberValue })
+  if (forcedChange) {
+    dispatchEvent(el, 'change', { numberValue: toInteger(el.$ci.numberValue, valueAsInteger, maximumFractionDigits) })
   }
@@ -102,7 +101,7 @@ }
 
-const format = (el, value) => {
-  updateInputValue(el, value)
+const format = (el, value, hideNegligibleDecimalDigits = false) => {
+  updateInputValue(el, value, hideNegligibleDecimalDigits)
   let { numberValue, currencyFormat, options } = el.$ci
   numberValue = toInteger(numberValue, options.valueAsInteger, currencyFormat.maximumFractionDigits)
-  dispatchEvent(el, 'format-complete', { numberValue })
+  dispatchEvent(el, 'input', { numberValue })
 }
@@ -136,3 +135,3 @@
         const { value, selectionStart, selectionEnd } = el
-        updateInputValue(el, el.value, hideNegligibleDecimalDigits)
+        format(el, el.value, hideNegligibleDecimalDigits)
         if (Math.abs(selectionStart - selectionEnd) > 0) {
@@ -139,0 +138,0 @@ el.setSelectionRange(0, el.value.length)

src/index.d.ts

@@ -26,3 +26,3 @@ import { Component, DirectiveOptions, PluginFunction } from 'vue'
   autoDecimalMode?: boolean,
-  valueRange?: | NumberRange,
+  valueRange?: NumberRange,
   allowNegative?: boolean
@@ -29,0 +29,0 @@ }

No alert changes

Improved metrics

Number of lines in readme file

62

increased by226.32%

Worsened metrics

Total package byte prevSize

75947

decreased by-0.24%

Lines of code

1727

decreased by-1.99%

No dependency changes