Merge pull request #88 from marcosgomesneto/fix/directive

Adding Lazy option and fix directives

.gitignore

@@ -1,4 +1,5 @@
 .idea/
+.devcontainer/
 node_modules/
 dist/
 coverage/

src/Utils.ts

@@ -134,3 +134,17 @@ export function event(name: string): Event {
 export function debug({ debug = false }: VMoneyOptions | ExtractPropTypes<never>, ...args: any): void {
  if (debug) console.log(...args);
 }
+
+export const getInputElement = (el: HTMLInputElement): HTMLInputElement => {
+ // v-money3 used on a component that's not a input
+ if (el.tagName.toLocaleUpperCase() !== "INPUT") {
+ const els = el.getElementsByTagName("input");
+ if (els.length !== 1) {
+ // throw new Error("v-money3 requires 1 input, found " + els.length)
+ } else {
+ // eslint-disable-next-line prefer-destructuring
+ return els[0];
+ }
+ }
+ return el;
+}; 

src/directive.ts

@@ -7,6 +7,7 @@ import {
  setCursor,
  validateRestrictedOptions,
  event,
+ getInputElement,
 } from './Utils';
 import format from './format';
 import unformat from './unformat';
@@ -26,15 +27,19 @@ const setValue = (el: HTMLInputElement, opt: VMoneyOptions | ExtractPropTypes<ne
 
  let positionFromEnd = el.value.length - (el.selectionEnd || 0);
 
- el.value = format(el.value, opt, caller);
+ const formatted = format(el.value, opt, caller);
+
+ if(formatted === el.value) return; //prevent unnecessary updates
+
+ el.value = formatted;
 
  positionFromEnd = Math.max(positionFromEnd, opt.suffix.length); // right
  positionFromEnd = el.value.length - positionFromEnd;
  positionFromEnd = Math.max(positionFromEnd, opt.prefix.length); // left
 
  setCursor(el, positionFromEnd);
 
- el.dispatchEvent(event('change')); // v-model.lazy
+ el.dispatchEvent(event( opt.lazy ? 'change' : 'input')); // v-model.lazy or not
 };
 
 const onKeyDown = (e: KeyboardEvent, opt: VMoneyOptions | ExtractPropTypes<never>) => {
@@ -98,16 +103,7 @@ export default {
 
  debug(opt, 'directive mounted() - opt', opt);
 
- // v-money3 used on a component that's not a input
- if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
- const els = el.getElementsByTagName('input');
- if (els.length !== 1) {
- // throw new Error("v-money3 requires 1 input, found " + els.length)
- } else {
- // eslint-disable-next-line prefer-destructuring
- el = els[0];
- }
- }
+ el = getInputElement(el)
 
  el.onkeydown = (e: KeyboardEvent) => {
  onKeyDown(e, opt);
@@ -130,6 +126,8 @@ export default {
  }
  const opt = filterOptRestrictions({ ...defaults, ...binding.value });
 
+ el = getInputElement(el)
+
  el.onkeydown = (e: KeyboardEvent) => {
  onKeyDown(e, opt);
  };

src/options.ts

@@ -16,6 +16,7 @@ export interface VMoneyOptions {
  modelModifiers: any;
  shouldRound: boolean;
  focusOnRight: boolean;
+ lazy: boolean;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  [key: string]: any;
 }
@@ -39,4 +40,5 @@ export default {
  },
  shouldRound: true,
  focusOnRight: false,
+ lazy: true,
 } as VMoneyOptions;