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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@a-vision-software/vue-input-components",
-    "version": "1.4.9",
+    "version": "1.4.11",
     "description": "A collection of reusable Vue 3 input components with TypeScript support",
     "author": "A-Vision Software",
     "license": "MIT",
@@ -37,6 +37,9 @@
             "import": "./dist/vue-input-components.es.js",
             "require": "./dist/vue-input-components.cjs.js"
         },
+        "./global": {
+            "types": "./dist/src/global.d.ts"
+        },
         "./dist/*": "./dist/*",
         "./styles.css": "./dist/vue-input-components.css",
         "./styles": "./dist/vue-input-components.css"

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

@@ -128,7 +128,7 @@ const props = withDefaults(defineProps<TextInputProps>(), {
   height: '5.5rem',
   maxHeight: '14rem',
   bgColor: 'var(--input-color, #ffffffee)',
-  width: (props) => (props.type === 'date' ? '10rem' : '100%'),
+  width: '100%',
 })
 
 const emit = defineEmits<{
@@ -272,7 +272,7 @@ watch(
   () => props.modelValue,
   (newValue) => {
     if (props.type === 'date' && newValue) {
-      dateValue.value = parseDateFromModel(newValue)
+      dateValue.value = parseDateFromModel(newValue as string)
     }
   },
 )
@@ -485,10 +485,6 @@ textarea {
   line-height: var(--line-height);
 }
 
-.text-input.label-left.text-input--date .text-input__wrapper {
-  width: 10rem;
-}
-
 :deep(.dp__input::placeholder) {
   color: var(--text-muted);
 }

package/src/global.ts

@@ -0,0 +1,23 @@
+import type TextInput from './components/TextInput.vue'
+import type FileUpload from './components/FileUpload.vue'
+import type Navigation from './components/Navigation.vue'
+import type Action from './components/Action.vue'
+import type Dropdown from './components/Dropdown.vue'
+import type Checkbox from './components/Checkbox.vue'
+import type List from './components/List.vue'
+import type Modal from './components/Modal.vue'
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    TextInput: typeof TextInput
+    FileUpload: typeof FileUpload
+    Navigation: typeof Navigation
+    Action: typeof Action
+    Dropdown: typeof Dropdown
+    Checkbox: typeof Checkbox
+    List: typeof List
+    Modal: typeof Modal
+  }
+}
+
+export {}

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('')