fix #1008

uNmAnNeR · Mar 11, 2024 · 81e4565 · 81e4565
1 parent 08b68c3
commit 81e4565
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git 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
@@ -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,
       };