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

Comparing version 3.1.0 to 3.1.1

dist/index.cjs.js

@@ -198,14 +198,2 @@ /**
 /**
- * Creates a CustomEvent('blur') with detail = { facade: true }
- * used as a way to identify our own blur event
- */
-function FacadeBlurEvent() {
-  return new CustomEvent('blur', {
-    bubbles: true,
-    cancelable: true,
-    detail: { facade: true },
-  })
-}
-
-/**
  * ensure that the element we're attaching to is an input element
@@ -262,20 +250,21 @@ * if not try to find an input element in this elements childrens
 
-  const number = new NumberFormat(config).clean(clean && !config.reverseFill);
-  let masked = number.format(currentValue);
-  let unmasked = number.clean(!config.reverseFill).unformat(currentValue);
+  if (force || oldValue !== 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 (Number(config.max) && unmasked > Number(config.max)) {
-      masked = number.format(config.max);
-      unmasked = number.unformat(config.max);
-    } else if (Number(config.min) && unmasked < Number(config.min)) {
-      masked = number.format(config.min);
-      unmasked = number.unformat(config.min);
+    // check value with in range max and min value
+    if (clean) {
+      if (Number(config.max) && unmasked > Number(config.max)) {
+        masked = number.format(config.max);
+        unmasked = number.unformat(config.max);
+      } else if (Number(config.min) && unmasked < Number(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
@@ -288,7 +277,3 @@ if (el.value !== masked) {
     // drawback is that we endup with two's input events in firefox
-    return (
-      emit &&
-      el.dispatchEvent(FacadeInputEvent()) &&
-      el.dispatchEvent(FacadeChangeEvent())
-    )
+    return emit && el.dispatchEvent(FacadeInputEvent())
   }
@@ -304,4 +289,5 @@ }
   const { target, detail } = event;
+
   // We dont need to run this method on the event we emit (prevent event loop)
-  if (detail && detail.facade) {
+  if (detail?.facade) {
     return false
@@ -318,2 +304,3 @@ }
   updateValue(target, null, { emit: false });
+
   // updated cursor position
@@ -337,4 +324,5 @@ positionFromEnd = Math.max(positionFromEnd, config.suffix.length);
   const { target, detail } = event;
+
   // We dont need to run this method on the event we emit (prevent event loop)
-  if (detail && detail.facade) {
+  if (detail?.facade) {
     return false
@@ -345,6 +333,6 @@ }
 
-  updateValue(target, null, { force: true, clean: true });
+  updateValue(target, null, { force: true, emit: false, clean: true });
 
   if (oldValue !== target.value) {
-    target.dispatchEvent(FacadeBlurEvent());
+    target.dispatchEvent(FacadeChangeEvent());
   }
@@ -375,3 +363,8 @@ }
     // use anonymous event handler to avoid inadvertently removing masking for all inputs within a container
-    const oninput = (e) => inputHandler(e);
+    const oninput = (e) => {
+      if (e.target !== el) {
+        return
+      }
+      inputHandler(e);
+    };
 
@@ -385,3 +378,6 @@ handlerOwner.addEventListener('input', oninput, true);
     el.onkeydown = (e) => {
-      if (([110, 190].includes(e.keyCode) || e.key === config.decimal) && !el.value.includes(config.decimal)) {
+      if (
+        ([110, 190].includes(e.keyCode) || e.key === config.decimal) &&
+        !el.value.includes(config.decimal)
+      ) {
         e.preventDefault();
@@ -391,3 +387,6 @@ el.setRangeText(config.decimal);
         updateCursor(el, el.value.indexOf(config.decimal) + 1);
-      } else if (([110, 190].includes(e.keyCode) || e.key === config.decimal) && el.value.includes(config.decimal)) {
+      } else if (
+        ([110, 190].includes(e.keyCode) || e.key === config.decimal) &&
+        el.value.includes(config.decimal)
+      ) {
         e.preventDefault();
@@ -397,3 +396,4 @@ }
 
-    option.cleanup = () => handlerOwner.removeEventListener('input', oninput, true);
+    option.cleanup = () =>
+      handlerOwner.removeEventListener('input', oninput, true);
   },
@@ -414,6 +414,7 @@
     getInputElement(el)[CONFIG_KEY].cleanup();
-  }
+  },
 };
 
 var script = {
+  name: 'Number',
   props: {
@@ -536,3 +537,3 @@ modelValue: {
 var index = {
-  install(app, config) {
+  install(app, config = {}) {
     if (config) {
@@ -543,3 +544,3 @@ Object.assign(options, config);
     app.component('number', script);
-  }
+  },
 };
@@ -546,0 +547,0 @@

dist/index.esm.js

@@ -194,14 +194,2 @@ /**
 /**
- * Creates a CustomEvent('blur') with detail = { facade: true }
- * used as a way to identify our own blur event
- */
-function FacadeBlurEvent() {
-  return new CustomEvent('blur', {
-    bubbles: true,
-    cancelable: true,
-    detail: { facade: true },
-  })
-}
-
-/**
  * ensure that the element we're attaching to is an input element
@@ -258,20 +246,21 @@ * if not try to find an input element in this elements childrens
 
-  const number = new NumberFormat(config).clean(clean && !config.reverseFill);
-  let masked = number.format(currentValue);
-  let unmasked = number.clean(!config.reverseFill).unformat(currentValue);
+  if (force || oldValue !== 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 (Number(config.max) && unmasked > Number(config.max)) {
-      masked = number.format(config.max);
-      unmasked = number.unformat(config.max);
-    } else if (Number(config.min) && unmasked < Number(config.min)) {
-      masked = number.format(config.min);
-      unmasked = number.unformat(config.min);
+    // check value with in range max and min value
+    if (clean) {
+      if (Number(config.max) && unmasked > Number(config.max)) {
+        masked = number.format(config.max);
+        unmasked = number.unformat(config.max);
+      } else if (Number(config.min) && unmasked < Number(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
@@ -284,7 +273,3 @@ if (el.value !== masked) {
     // drawback is that we endup with two's input events in firefox
-    return (
-      emit &&
-      el.dispatchEvent(FacadeInputEvent()) &&
-      el.dispatchEvent(FacadeChangeEvent())
-    )
+    return emit && el.dispatchEvent(FacadeInputEvent())
   }
@@ -300,4 +285,5 @@ }
   const { target, detail } = event;
+
   // We dont need to run this method on the event we emit (prevent event loop)
-  if (detail && detail.facade) {
+  if (detail?.facade) {
     return false
@@ -314,2 +300,3 @@ }
   updateValue(target, null, { emit: false });
+
   // updated cursor position
@@ -333,4 +320,5 @@ positionFromEnd = Math.max(positionFromEnd, config.suffix.length);
   const { target, detail } = event;
+
   // We dont need to run this method on the event we emit (prevent event loop)
-  if (detail && detail.facade) {
+  if (detail?.facade) {
     return false
@@ -341,6 +329,6 @@ }
 
-  updateValue(target, null, { force: true, clean: true });
+  updateValue(target, null, { force: true, emit: false, clean: true });
 
   if (oldValue !== target.value) {
-    target.dispatchEvent(FacadeBlurEvent());
+    target.dispatchEvent(FacadeChangeEvent());
   }
@@ -371,3 +359,8 @@ }
     // use anonymous event handler to avoid inadvertently removing masking for all inputs within a container
-    const oninput = (e) => inputHandler(e);
+    const oninput = (e) => {
+      if (e.target !== el) {
+        return
+      }
+      inputHandler(e);
+    };
 
@@ -381,3 +374,6 @@ handlerOwner.addEventListener('input', oninput, true);
     el.onkeydown = (e) => {
-      if (([110, 190].includes(e.keyCode) || e.key === config.decimal) && !el.value.includes(config.decimal)) {
+      if (
+        ([110, 190].includes(e.keyCode) || e.key === config.decimal) &&
+        !el.value.includes(config.decimal)
+      ) {
         e.preventDefault();
@@ -387,3 +383,6 @@ el.setRangeText(config.decimal);
         updateCursor(el, el.value.indexOf(config.decimal) + 1);
-      } else if (([110, 190].includes(e.keyCode) || e.key === config.decimal) && el.value.includes(config.decimal)) {
+      } else if (
+        ([110, 190].includes(e.keyCode) || e.key === config.decimal) &&
+        el.value.includes(config.decimal)
+      ) {
         e.preventDefault();
@@ -393,3 +392,4 @@ }
 
-    option.cleanup = () => handlerOwner.removeEventListener('input', oninput, true);
+    option.cleanup = () =>
+      handlerOwner.removeEventListener('input', oninput, true);
   },
@@ -410,6 +410,7 @@
     getInputElement(el)[CONFIG_KEY].cleanup();
-  }
+  },
 };
 
 var script = {
+  name: 'Number',
   props: {
@@ -532,3 +533,3 @@ modelValue: {
 var index = {
-  install(app, config) {
+  install(app, config = {}) {
     if (config) {
@@ -539,5 +540,5 @@ Object.assign(options, config);
     app.component('number', script);
-  }
+  },
 };
 
 export { NumberFormat, index as default, script as number, options, vNumber };

package.json

 {
   "name": "@coders-tm/vue-number-format",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Easy formatted numbers, currency and percentage with input/directive mask for Vue.js",

No alert changes

Worsened metrics

Total package byte prevSize

36039

decreased by-0.81%

Lines of code

936

decreased by-0.43%

No dependency changes