From 67a8fd2d8d92527480e597dca0e2c3b79031df2d 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: Tue, 9 Apr 2024 12:54:09 +0300
Subject: [PATCH] provide default values for hooks

---
 .eslintrc.cjs                        |   3 +-
 packages/react-imask/src/hook.ts     | 116 +++++++++++++++++----------
 packages/vue-imask/example.html      |  18 ++++-
 packages/vue-imask/src/composable.ts |  74 +++++++++--------
 4 files changed, 133 insertions(+), 78 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 3a9fb2b6..9b351cd3 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -19,6 +19,7 @@ module.exports = {
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/ban-types': 'warn',
     '@typescript-eslint/no-empty-function': 'warn',
-    'no-empty': ["error", { "allowEmptyCatch": true }],
+    'no-empty': ['error', { allowEmptyCatch: true }],
+    'prefer-const': ['error', { destructuring: 'all' }],
   },
 };
diff --git a/packages/react-imask/src/hook.ts b/packages/react-imask/src/hook.ts
index 51dbe4df..5854375b 100644
--- a/packages/react-imask/src/hook.ts
+++ b/packages/react-imask/src/hook.ts
@@ -9,10 +9,20 @@ function useIMask<
   Opts extends FactoryOpts=FactoryOpts,
 >(
   opts: Opts,
-  { onAccept, onComplete, ref=useRef<MaskElement | null>(null) }: {
+  {
+    onAccept,
+    onComplete,
+    ref=useRef<MaskElement | null>(null),
+    defaultValue,
+    defaultUnmaskedValue,
+    defaultTypedValue,
+  }: {
     ref?: MutableRefObject<MaskElement | null>,
     onAccept?: (value: InputMask<Opts>['value'], maskRef: InputMask<Opts>, e?: InputEvent) => void;
     onComplete?: (value: InputMask<Opts>['value'], maskRef: InputMask<Opts>, e?: InputEvent) => void;
+    defaultValue?: InputMask<Opts>['value'],
+    defaultUnmaskedValue?: InputMask<Opts>['unmaskedValue'],
+    defaultTypedValue?: InputMask<Opts>['typedValue'],
   } = {}
 ): {
   ref: MutableRefObject<MaskElement | null>,
@@ -25,7 +35,6 @@ function useIMask<
   setTypedValue: Dispatch<InputMask<Opts>['typedValue']>,
 } {
   const maskRef = useRef<InputMask<Opts> | null>(null);
-  const [initialized, setInitialized] = useState<boolean>(false);
   const [lastAcceptState, setLastAcceptState] = useState<{
     value?: InputMask<Opts>['value'],
     unmaskedValue?: InputMask<Opts>['unmaskedValue'],
@@ -36,34 +45,79 @@ function useIMask<
   const [typedValue, setTypedValue] = useState<InputMask<Opts>['typedValue']>();
 
   const _destroyMask = useCallback(() => {
-    if (!initialized) return;
     maskRef.current?.destroy();
     maskRef.current = null;
   }, []);
 
+  const storeLastAcceptedValues = useCallback(() => {
+    const m = maskRef.current;
+    if (!m) return;
+
+    setLastAcceptState({
+      value: m.value,
+      unmaskedValue: m.unmaskedValue,
+      typedValue: m.typedValue,
+    });
+
+    setTypedValue(m.typedValue);
+    setUnmaskedValue(m.unmaskedValue);
+    setValue(m.value);
+  }, []);
+
   const _onAccept = useCallback(
     (event?: InputEvent) => {
       const m = maskRef.current;
       if (!m) return;
 
-      setLastAcceptState({
-        value: m.value,
-        unmaskedValue: m.unmaskedValue,
-        typedValue: m.typedValue,
-      });
-      setTypedValue(m.typedValue);
-      setUnmaskedValue(m.unmaskedValue);
-      setValue(m.value);
+      storeLastAcceptedValues();
+
       onAccept?.(m.value, m, event);
-    },
-    [onAccept],
-  );
+    }, [onAccept]);
 
   const _onComplete = useCallback(
     (event?: InputEvent) => maskRef.current && onComplete?.(maskRef.current.value, maskRef.current, event),
     [onComplete],
   );
 
+  useEffect(() => {
+    const { value: lastAcceptValue, ...state } = lastAcceptState;
+    const mask = maskRef.current;
+
+    if (!mask || value === undefined) return;
+
+    if (lastAcceptValue !== value) {
+      mask.value = value;
+      if (mask.value !== value) _onAccept();
+    }
+    setLastAcceptState(state);
+  }, [value]);
+
+  useEffect(() => {
+    const { unmaskedValue: lastAcceptUnmaskedValue, ...state } = lastAcceptState;
+    const mask = maskRef.current;
+
+    if (!mask || unmaskedValue === undefined) return;
+
+    if (lastAcceptUnmaskedValue !== unmaskedValue) {
+      mask.unmaskedValue = unmaskedValue;
+      if (mask.unmaskedValue !== unmaskedValue) _onAccept();
+    }
+    setLastAcceptState(state);
+  }, [unmaskedValue]);
+
+  useEffect(() => {
+    const { typedValue: lastAcceptTypedValue, ...state } = lastAcceptState;
+    const mask = maskRef.current;
+
+    if (!mask || typedValue === undefined) return;
+
+    if (lastAcceptTypedValue !== typedValue) {
+      mask.typedValue = typedValue;
+      if (!mask.masked.typedValueEquals(typedValue)) _onAccept();
+    }
+    setLastAcceptState(state);
+  }, [typedValue]);
+
   useEffect(() => {
     const el = ref.current;
 
@@ -74,12 +128,15 @@ function useIMask<
     if (!mask) {
       if (el && opts?.mask) {
         maskRef.current = IMask(el, opts);
-        _onAccept();
+        storeLastAcceptedValues();
+
+        if (defaultValue !== undefined) setValue(defaultValue);
+        if (defaultUnmaskedValue !== undefined) setUnmaskedValue(defaultUnmaskedValue);
+        if (defaultTypedValue !== undefined) setTypedValue(defaultTypedValue);
       }
     } else {
       mask?.updateOptions(opts as any); // TODO fix no idea
     }
-    setInitialized(Boolean(maskRef.current));
   }, [opts, _destroyMask, _onAccept]);
 
   useEffect(() => {
@@ -96,33 +153,6 @@ function useIMask<
     };
   }, [_onAccept, _onComplete]);
 
-  useEffect(() => {
-    const { value: lastAcceptValue, ...state } = lastAcceptState;
-    const mask = maskRef.current;
-    if (mask && initialized) {
-      if (lastAcceptValue !== value) mask.value = value;
-      setLastAcceptState(state);
-    }
-  }, [value]);
-
-  useEffect(() => {
-    const { unmaskedValue: lastAcceptUnmaskedValue, ...state } = lastAcceptState;
-    const mask = maskRef.current;
-    if (mask && initialized) {
-      if (lastAcceptUnmaskedValue !== unmaskedValue) mask.unmaskedValue = unmaskedValue;
-      setLastAcceptState(state);
-    }
-  }, [unmaskedValue]);
-
-  useEffect(() => {
-    const { typedValue: lastAcceptTypedValue, ...state } = lastAcceptState;
-    const mask = maskRef.current;
-    if (mask && initialized) {
-      if (lastAcceptTypedValue !== typedValue) mask.typedValue = typedValue;
-      setLastAcceptState(state);
-    }
-  }, [typedValue]);
-
   useEffect(() => _destroyMask, [_destroyMask]);
 
   return {
diff --git a/packages/vue-imask/example.html b/packages/vue-imask/example.html
index 4e8b9cd8..0536d978 100644
--- a/packages/vue-imask/example.html
+++ b/packages/vue-imask/example.html
@@ -19,7 +19,7 @@ <h1>Vue IMask Plugin Demo</h1>
     <label>
       Component
       <imask-input
-        v-model:typed="numberModel"
+        v-model:typed="numberValue"
         :mask="Number"
         radix="."
         @accept:masked="onAcceptNumberMasked"
@@ -31,6 +31,9 @@ <h1>Vue IMask Plugin Demo</h1>
     <button
       @click="toggleNumberMask"
       >{{numberMask ? 'Disable' : 'Enable'}} mask</button>
+
+    <br>
+    <input ref="el">
   </main>
 
   <script src="https://unpkg.com/vue"></script>
@@ -55,8 +58,19 @@ <h1>Vue IMask Plugin Demo</h1>
 
         numberMask: testNumberMask,
         numberUnmask: 'typed',
-        numberValue: 0,
+        numberValue: 10,
       }),
+      setup () {
+        const { el, typed } = VueIMask.useIMask({
+          mask: Number,
+          scale: 0,
+        }, {
+          defaultTypedValue: 500,
+          onAccept: () => console.log('accept composition value', typed.value),
+        });
+
+        return { el };
+      },
       methods: {
         onAcceptDate: function (e) {
           console.log('accept date', e.detail.value);
diff --git a/packages/vue-imask/src/composable.ts b/packages/vue-imask/src/composable.ts
index 7f314914..c55fd6cd 100644
--- a/packages/vue-imask/src/composable.ts
+++ b/packages/vue-imask/src/composable.ts
@@ -20,13 +20,18 @@ type ComposableParams<Opts extends FactoryOpts> = {
   emit?: <E extends ComposableEmitEvent>(eventName: E, value: ComposableEmitValue<E, Opts>, e?: InputEvent) => void,
   onAccept?: (e?: InputEvent) => void,
   onComplete?: (e?: InputEvent) => void,
+  defaultValue?: InputMask<Opts>['value'],
+  defaultUnmaskedValue?: InputMask<Opts>['unmaskedValue'],
+  defaultTypedValue?: InputMask<Opts>['typedValue'],
 }
 
 export default
 function useIMask<
   MaskElement extends InputMaskElement,
   Opts extends FactoryOpts
-> (props: Opts | Ref<Opts>, { emit, onAccept, onComplete }: ComposableParams<Opts>={}): {
+> (props: Opts | Ref<Opts>, {
+    emit, onAccept, onComplete, defaultValue, defaultUnmaskedValue, defaultTypedValue,
+  }: ComposableParams<Opts>={}): {
   el: Ref<MaskElement | undefined>,
   mask: DeepReadonly<Ref<InputMask<Opts> | undefined>>,
   masked: Ref<InputMask<Opts>['value']>,
@@ -59,7 +64,7 @@ function useIMask<
       emit('accept:typed', typed.value, event);
       emit('accept:unmasked', unmasked.value, event);
     }
-    if (onAccept) onAccept(event);
+    onAccept?.(event);
   }
 
   function _onComplete (event?: InputEvent) {
@@ -69,36 +74,11 @@ function useIMask<
       emit('complete:typed', (mask.value as InputMask<Opts>).typedValue, event);
       emit('complete:unmasked', (mask.value as InputMask<Opts>).unmaskedValue, event);
     }
-    if (onComplete) onComplete(event);
+    onComplete?.(event);
   }
 
-  function _initMask () {
-    $el = el.value;
-    const $props = _props.value;
-
-    if (!$el || !$props?.mask) return;
-
-    mask.value = IMask($el, $props)
-      .on('accept', _onAccept)
-      .on('complete', _onComplete);
-
-    updateUnmaskedValue();
-    updateMaskedValue();
-    updateTypedValue();
-
-    storeLastAcceptedValues();
-  }
-
-  function _destroyMask () {
-    mask.value?.destroy();
-    mask.value = undefined;
-  }
-
-  onMounted(_initMask);
-  onUnmounted(_destroyMask);
-
   const updateUnmaskedValue = () => {
-    if (!mask.value) return;
+    if (!mask.value || unmasked.value === undefined) return;
 
     if ($lastAcceptedUnmaskedValue !== unmasked.value) {
       mask.value.unmaskedValue = unmasked.value;
@@ -109,7 +89,7 @@ function useIMask<
   watch(unmasked, updateUnmaskedValue);
 
   const updateMaskedValue = () => {
-    if (!mask.value) return;
+    if (!mask.value || masked.value === undefined) return;
 
     if ($lastAcceptedValue !== masked.value) {
       mask.value.value = masked.value;
@@ -120,16 +100,46 @@ function useIMask<
   watch(masked, updateMaskedValue);
 
   const updateTypedValue = () => {
-    if (!mask.value) return;
+    if (!mask.value || typed.value === undefined) return;
 
     if ($lastAcceptedTypedValue !== typed.value) {
       mask.value.typedValue = typed.value;
-      if (mask.value.typedValue !== typed.value) _onAccept();
+      if (!mask.value.masked.typedValueEquals(typed.value)) _onAccept();
     }
     $lastAcceptedTypedValue = undefined;
   }
   watch(typed, updateTypedValue);
 
+
+  function _initMask () {
+    $el = el.value;
+    const $props = _props.value;
+
+    if (!$el || !$props?.mask) return;
+
+    mask.value = IMask($el, $props);
+
+    if (defaultValue !== undefined) masked.value = defaultValue;
+    if (defaultUnmaskedValue !== undefined) unmasked.value = defaultUnmaskedValue;
+    if (defaultTypedValue !== undefined) typed.value = defaultTypedValue;
+
+    updateUnmaskedValue();
+    updateMaskedValue();
+    updateTypedValue();
+
+    storeLastAcceptedValues();
+
+    mask.value.on('accept', _onAccept).on('complete', _onComplete);
+  }
+
+  function _destroyMask () {
+    mask.value?.destroy();
+    mask.value = undefined;
+  }
+
+  onMounted(_initMask);
+  onUnmounted(_destroyMask);
+
   watch([el, _props], () => {
     const $newEl = el.value;
     const $props = _props.value;