@a-vision-software/vue-input-components 1.4.10 → 1.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@a-vision-software/vue-input-components",
-    "version": "1.4.10",
+    "version": "1.4.11",
     "description": "A collection of reusable Vue 3 input components with TypeScript support",
     "author": "A-Vision Software",
     "license": "MIT",

package/src/components/Dropdown.vue

@@ -121,7 +121,7 @@ const filterInput = ref<HTMLInputElement | null>(null)
 
 const selectedOptions = computed(() => {
   if (Array.isArray(props.modelValue)) {
-    return props.options.filter((option) => props.modelValue.includes(option.id))
+    return props.options.filter((option) => props.modelValue?.includes(option.id))
   }
   return props.options.filter((option) => option.id === props.modelValue)
 })

package/src/components/TextInput.vue

@@ -272,7 +272,7 @@ watch(
   () => props.modelValue,
   (newValue) => {
     if (props.type === 'date' && newValue) {
-      dateValue.value = parseDateFromModel(newValue)
+      dateValue.value = parseDateFromModel(newValue as string)
     }
   },
 )

package/src/types/dropdown.ts

@@ -6,7 +6,7 @@ export interface DropdownOption {
 
 export interface DropdownProps {
   options: DropdownOption[]
-  modelValue: string | string[]
+  modelValue: string | string[] | null
   multiple?: boolean
   placeholder?: string
   filterable?: boolean

package/src/types/navigation.ts

@@ -1,6 +1,6 @@
 export interface NavigationItem {
   id: string
-  label: string
+  label?: string
   url?: string
   icon?: string
   disabled?: boolean

package/src/types/textinput.ts

@@ -1,7 +1,6 @@
-export interface TextInputProps {
-  modelValue: string
+export type TextInputProps =
+{
   required?: boolean
-  type?: 'text' | 'textarea' | 'password' | 'email' | 'tel' | 'url' | 'date' | 'number'
   placeholder?: string
   label?: string
   labelPosition?: 'top' | 'left'
@@ -19,7 +18,16 @@ export interface TextInputProps {
   bgColor?: string
   autosave?: (value: string) => Promise<void>
   error?: string
-}
+} & (
+  | {
+      modelValue: string
+      type?: 'text' | 'textarea' | 'password' | 'email' | 'tel' | 'url' | 'date'
+    }
+  | {
+      modelValue: number
+      type: 'number'
+    }
+)
 
 export interface TextInputEmits {
   (e: 'update:modelValue', value: string): void

package/src/views/TextInputTestView.vue

@@ -48,6 +48,8 @@
             label-position="top" label-align="left" />
           <TextInput v-model="comment" label="Comment" type="text" placeholder="Your comment" label-position="top"
             label-align="left" />
+          <TextInput v-model="age" type="number" label="Age" placeholder="Enter your age" label-position="top"
+            label-align="left" />
         </div>
       </div>
     </div>
@@ -66,6 +68,7 @@ const postalCode = ref('')
 const country = ref('')
 const birthDate = ref('1967-08-22')
 const comment = ref('')
+const age = ref(0)
 const bio = ref('')
 const feedback = ref('')