From 81e4565d9190b6e6d938c3582cfcd76d257fcafc 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: Mon, 11 Mar 2024 11:55:00 +0300
Subject: [PATCH] fix #1008

---
 packages/vue-imask/example.html               | 21 +++++++++++--------
 .../vue-imask/src/component3-composition.ts   |  9 +++++---
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/vue-imask/example.html b/packages/vue-imask/example.html
index 7a8ba22d..4e8b9cd8 100644
--- a/packages/vue-imask/example.html
+++ b/packages/vue-imask/example.html
@@ -19,12 +19,13 @@ <h1>Vue IMask Plugin Demo</h1>
     <label>
       Component
       <imask-input
-        v-model="numberValue"
-        :mask="numberMask"
-        :unmask="numberUnmask"
-        @focus="onFocusNumber"
-        @accept="onAcceptNumber"
-        @complete="onCompleteNumber">
+        v-model:typed="numberModel"
+        :mask="Number"
+        radix="."
+        @accept:masked="onAcceptNumberMasked"
+        @accept:unmasked="onAcceptNumberUnmasked"
+        placeholder="Enter number here"
+      >
     </label>
     {{numberValue}}
     <button
@@ -34,7 +35,6 @@ <h1>Vue IMask Plugin Demo</h1>
 
   <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>
   <script type="text/javascript">
@@ -55,7 +55,7 @@ <h1>Vue IMask Plugin Demo</h1>
 
         numberMask: testNumberMask,
         numberUnmask: 'typed',
-        // numberValue: 0,
+        numberValue: 0,
       }),
       methods: {
         onAcceptDate: function (e) {
@@ -69,7 +69,10 @@ <h1>Vue IMask Plugin Demo</h1>
         onFocusNumber: function () {
           console.log('focus num');
         },
-        onAcceptNumber: function (value, e) {
+        onAcceptNumberMasked: function (value, e) {
+          console.log('accept num', value, typeof value);
+        },
+        onAcceptNumberUnmasked: function (value, e) {
           console.log('accept num', value, typeof value);
         },
         onCompleteNumber: function (value) {
diff --git a/packages/vue-imask/src/component3-composition.ts b/packages/vue-imask/src/component3-composition.ts
index 7cf8ba5f..1592dfd5 100644
--- a/packages/vue-imask/src/component3-composition.ts
+++ b/packages/vue-imask/src/component3-composition.ts
@@ -26,7 +26,7 @@ export default defineComponent<MaskProps>({
     modelValue: String,
     value: String,
     unmasked: String,
-    typed: Object as PropType<any>,
+    typed: { validator: () => true } as unknown as PropType<any>,
 
     ...props,
   },
@@ -50,7 +50,7 @@ export default defineComponent<MaskProps>({
   ],
 
   setup (props, { attrs, emit }) {
-    const { el, masked, unmasked, typed } = useIMask(extractOptionsFromProps(props as MaskProps, VALUE_PROPS) as FactoryOpts, {
+    const { el, mask, masked, unmasked, typed } = useIMask(extractOptionsFromProps(props as MaskProps, VALUE_PROPS) as FactoryOpts, {
       emit,
       onAccept: (event?: InputEvent) => {
         // emit more events
@@ -86,7 +86,10 @@ export default defineComponent<MaskProps>({
       // TODO type?
       const data: Record<string, any> = {
         ...attrs,
-        value: props.value != null ? props.value : props.modelValue,
+        value: props.value != null ? props.value :
+          props.modelValue != null ? props.modelValue :
+          mask.value ? mask.value.displayValue :
+          '',
         ref: el,
       };