From 3a666d4fbabdff604130c8d565adc8ab55c8acd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B5=D0=B9=20=D0=9A=D1=80?=
 =?UTF-8?q?=D1=8F=D0=B6=D0=B5=D0=B2?= <ubivaza@gmail.com>
Date: Wed, 31 Jan 2024 09:47:09 +0300
Subject: [PATCH] fix #989

---
 docs/guide.html                               |  2 +-
 packages/react-imask/src/hook.ts              |  2 +-
 packages/vue-imask/example.html               | 14 ++--
 .../vue-imask/src/component3-composition.ts   | 18 ++---
 packages/vue-imask/src/composable.ts          | 67 +++++++++++--------
 5 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/docs/guide.html b/docs/guide.html
index c27b06c5..7d5ca8c3 100644
--- a/docs/guide.html
+++ b/docs/guide.html
@@ -783,7 +783,7 @@ <h4 id="autofix" class="section-h"><a href="#autofix">Autofix Mode</a></h4>
 
   <h4 id="repeat" class="section-h"><a href="#repeat">Repeat block (since 7.3.0)</a></h4>
   <div class="form-item">
-    <label>Repeat pattern block:</label>
+    <label>Repeat pattern digit:</label>
     <div class="input-select">
       <input id="repeat-mask" type="text" value="">
       <select id="select-repeat">
diff --git a/packages/react-imask/src/hook.ts b/packages/react-imask/src/hook.ts
index e26a793a..f128fe5c 100644
--- a/packages/react-imask/src/hook.ts
+++ b/packages/react-imask/src/hook.ts
@@ -60,7 +60,7 @@ function useIMask<
   );
 
   const _onComplete = useCallback(
-    () => maskRef.current && onComplete?.(maskRef.current.value, maskRef.current),
+    (event?: InputEvent) => maskRef.current && onComplete?.(maskRef.current.value, maskRef.current, event),
     [onComplete],
   );
 
diff --git a/packages/vue-imask/example.html b/packages/vue-imask/example.html
index 5abd2de4..7a8ba22d 100644
--- a/packages/vue-imask/example.html
+++ b/packages/vue-imask/example.html
@@ -33,6 +33,7 @@ <h1>Vue IMask Plugin Demo</h1>
   </main>
 
   <script src="https://unpkg.com/vue"></script>
+  <script src="https://unpkg.com/vue-demi"></script>
   <script src="https://unpkg.com/vue-types"></script>
   <script src="https://unpkg.com/imask"></script>
   <script src="dist/vue-imask.js"></script>
@@ -41,22 +42,21 @@ <h1>Vue IMask Plugin Demo</h1>
     var testDateMask = {
       mask: Date
     };
-    var app = new Vue({
-      el: '#app',
+    var app = Vue.createApp({
       directives: {
         imask: VueIMask.IMaskDirective
       },
       components: {
         'imask-input': VueIMask.IMaskComponent
       },
-      data: {
+      data: () => ({
         dateMask: testDateMask,
         dateValue: '12.12',
 
         numberMask: testNumberMask,
         numberUnmask: 'typed',
-        numberValue: 0
-      },
+        // numberValue: 0,
+      }),
       methods: {
         onAcceptDate: function (e) {
           console.log('accept date', e.detail.value);
@@ -69,7 +69,7 @@ <h1>Vue IMask Plugin Demo</h1>
         onFocusNumber: function () {
           console.log('focus num');
         },
-        onAcceptNumber: function (value) {
+        onAcceptNumber: function (value, e) {
           console.log('accept num', value, typeof value);
         },
         onCompleteNumber: function (value) {
@@ -84,7 +84,7 @@ <h1>Vue IMask Plugin Demo</h1>
           else app.dateMask = testDateMask;
         }
       }
-    });
+    }).mount('#app');
     // setTimeout(function () {
     //   app.numberUnmask = false;
     //   app.numberValue = '123';
diff --git a/packages/vue-imask/src/component3-composition.ts b/packages/vue-imask/src/component3-composition.ts
index 6820365d..7cf8ba5f 100644
--- a/packages/vue-imask/src/component3-composition.ts
+++ b/packages/vue-imask/src/component3-composition.ts
@@ -52,19 +52,19 @@ export default defineComponent<MaskProps>({
   setup (props, { attrs, emit }) {
     const { el, masked, unmasked, typed } = useIMask(extractOptionsFromProps(props as MaskProps, VALUE_PROPS) as FactoryOpts, {
       emit,
-      onAccept: () => {
+      onAccept: (event?: InputEvent) => {
         // emit more events
         const v = masked.value;
-        emit('accept:value', v);
-        emit('update:value', v);
-        emit('update:masked', v);
-        emit('update:modelValue', v);
+        emit('accept:value', v, event);
+        emit('update:value', v, event);
+        emit('update:masked', v, event);
+        emit('update:modelValue', v, event);
 
-        emit('update:unmasked', unmasked.value);
-        emit('update:typed', typed.value);
+        emit('update:unmasked', unmasked.value, event);
+        emit('update:typed', typed.value, event);
       },
-      onComplete: () => {
-        emit('complete:value', masked.value);
+      onComplete: (event?: InputEvent) => {
+        emit('complete:value', masked.value, event);
       },
     } as ComposableParams<MaskProps>);
 
diff --git a/packages/vue-imask/src/composable.ts b/packages/vue-imask/src/composable.ts
index 05e1452b..8f44207e 100644
--- a/packages/vue-imask/src/composable.ts
+++ b/packages/vue-imask/src/composable.ts
@@ -17,9 +17,9 @@ type ComposableEmitValue<E extends ComposableEmitEvent, Opts extends FactoryOpts
 
 export
 type ComposableParams<Opts extends FactoryOpts> = {
-  emit?: <E extends ComposableEmitEvent>(eventName: E, value: ComposableEmitValue<E, Opts>) => void,
-  onAccept?: () => void,
-  onComplete?: () => void,
+  emit?: <E extends ComposableEmitEvent>(eventName: E, value: ComposableEmitValue<E, Opts>, e?: InputEvent) => void,
+  onAccept?: (e?: InputEvent) => void,
+  onComplete?: (e?: InputEvent) => void,
 }
 
 export default
@@ -39,33 +39,34 @@ function useIMask<
   const masked: Ref<InputMask<Opts>['value']> = ref('');
   const unmasked: Ref<InputMask<Opts>['unmaskedValue']> = ref('');
   const typed: Ref<InputMask<Opts>['typedValue']> = ref(null);
+  const initialized = ref(false);
   let $el: MaskElement | undefined;
-  let $masked: InputMask<Opts>['value'];
-  let $unmasked: InputMask<Opts>['unmaskedValue'];
-  let $typed: InputMask<Opts>['typedValue'];
+  let $lastAcceptedValue: InputMask<Opts>['value'] | undefined;
+  let $lastAcceptedUnmaskedValue: InputMask<Opts>['unmaskedValue'] | undefined;
+  let $lastAcceptedTypedValue: InputMask<Opts>['typedValue'] | undefined;
 
-  function _onAccept () {
-    $typed = typed.value = (mask.value as InputMask<Opts>).typedValue;
-    $unmasked = unmasked.value = (mask.value as InputMask<Opts>).unmaskedValue;
-    $masked = masked.value = (mask.value as InputMask<Opts>).value;
+  function _onAccept (event?: InputEvent) {
+    $lastAcceptedTypedValue = typed.value = (mask.value as InputMask<Opts>).typedValue;
+    $lastAcceptedUnmaskedValue = unmasked.value = (mask.value as InputMask<Opts>).unmaskedValue;
+    $lastAcceptedValue = masked.value = (mask.value as InputMask<Opts>).value;
 
     if (emit) {
-      emit('accept', $masked);
-      emit('accept:masked', $masked);
-      emit('accept:typed', $typed);
-      emit('accept:unmasked', $unmasked);
+      emit('accept', masked.value, event);
+      emit('accept:masked', masked.value, event);
+      emit('accept:typed', typed.value, event);
+      emit('accept:unmasked', unmasked.value, event);
     }
-    if (onAccept) onAccept();
+    if (onAccept) onAccept(event);
   }
 
-  function _onComplete () {
+  function _onComplete (event?: InputEvent) {
     if (emit) {
-      emit('complete', $masked);
-      emit('complete:masked', $masked);
-      emit('complete:typed', $typed);
-      emit('complete:unmasked', $unmasked);
+      emit('complete', (mask.value as InputMask<Opts>).value, event);
+      emit('complete:masked', (mask.value as InputMask<Opts>).value, event);
+      emit('complete:typed', (mask.value as InputMask<Opts>).typedValue, event);
+      emit('complete:unmasked', (mask.value as InputMask<Opts>).unmaskedValue, event);
     }
-    if (onComplete) onComplete();
+    if (onComplete) onComplete(event);
   }
 
   function _initMask () {
@@ -79,28 +80,38 @@ function useIMask<
       .on('complete', _onComplete);
 
     _onAccept();
+
+    initialized.value = true;
   }
 
   function _destroyMask () {
-    if (mask.value) {
-      mask.value.destroy();
-      mask.value = undefined;
-    }
+    if (!initialized.value) return;
+    mask.value?.destroy();
+    mask.value = undefined;
   }
 
   onMounted(_initMask);
   onUnmounted(_destroyMask);
 
   watch(unmasked, () => {
-    if (mask.value) $unmasked = mask.value.unmaskedValue = unmasked.value;
+    if (mask.value && initialized.value) {
+      if ($lastAcceptedUnmaskedValue !== unmasked.value) mask.value.unmaskedValue = unmasked.value;
+      $lastAcceptedUnmaskedValue = undefined;
+    }
   });
 
   watch(masked, () => {
-    if (mask.value) $masked = mask.value.value = masked.value;
+    if (mask.value && initialized.value) {
+      if ($lastAcceptedValue !== masked.value) mask.value.value = masked.value;
+      $lastAcceptedValue = undefined;
+    }
   });
 
   watch(typed, () => {
-    if (mask.value) $typed = mask.value.typedValue = typed.value;
+    if (mask.value && initialized.value) {
+      if ($lastAcceptedTypedValue !== typed.value) mask.value.typedValue = typed.value;
+      $lastAcceptedTypedValue = undefined;
+    }
   });
 
   watch([el, _props], () => {