fix(input): add null to modelValue prop type declaration (#4297)

* fix(input): add null to modelValue prop type declaration * fix(input): do not convert 0 to empty string --------- Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com>
epicmaxco · Jun 3, 2024 · b80e5ed · b80e5ed
1 parent 5f6bda5
commit b80e5ed
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/packages/ui/src/components/va-input/VaInput.vue b/packages/ui/src/components/va-input/VaInput.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import { computed, InputHTMLAttributes, nextTick, shallowRef, toRefs, useAttrs, useSlots, watch } from 'vue'
+import { computed, InputHTMLAttributes, shallowRef, toRefs, useAttrs, useSlots, watch, PropType } from 'vue'
 import omit from 'lodash/omit.js'
 import pick from 'lodash/pick.js'
 
@@ -107,7 +107,7 @@ const props = defineProps({
     // input
   placeholder: { type: String, default: '' },
   tabindex: { type: [String, Number], default: 0 },
-  modelValue: { type: [Number, String], default: '' },
+  modelValue: { type: [Number, String, null] as PropType<number | string | null>, default: '' },
   type: { type: String as AnyStringPropType<'text' | 'password'>, default: 'text' },
   inputClass: { type: String, default: '' },
   pattern: { type: String },

diff --git a/packages/ui/src/components/va-input/hooks/useCleave.ts b/packages/ui/src/components/va-input/hooks/useCleave.ts
@@ -29,7 +29,7 @@ export const useCleaveProps = {
 export const useCleave = (
   element: Ref<HTMLInputElement | undefined>,
   props: ExtractPropTypes<typeof useCleaveProps>,
-  syncValue: WritableComputedRef<string | number>,
+  syncValue: WritableComputedRef<string | number | null>,
 ) => {
   const cleave = ref<Cleave>()
 
@@ -78,7 +78,7 @@ export const useCleave = (
       }
     }
 
-    return syncValue.value
+    return syncValue.value ?? ''
   })
 
   const onInput = (event: Event) => {