@a-vision-software/vue-input-components 1.2.11 → 1.2.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +121 -102
- package/dist/vue-input-components.cjs.js +1 -561
- package/dist/vue-input-components.css +1 -1
- package/dist/vue-input-components.es.js +4906 -8034
- package/dist/vue-input-components.umd.js +1 -561
- package/package.json +82 -86
- package/src/assets/colors.css +2 -1
- package/src/components/Dropdown.vue +400 -0
- package/src/components/Navigation.vue +98 -163
- package/src/main.ts +1 -1
- package/src/router/index.ts +7 -0
- package/src/types/dropdown.ts +25 -0
- package/src/views/DashboardView.vue +7 -0
- package/src/views/DropdownTestView.vue +191 -0
- package/src/views/NavigationTestView.vue +13 -54
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Vue Input Components
|
|
2
2
|
|
|
3
|
-
A collection of reusable Vue 3 input components with
|
|
3
|
+
A collection of reusable Vue 3 input components with consistent styling and behavior.
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
@@ -12,142 +12,161 @@ A collection of reusable Vue 3 input components with TypeScript support, designe
|
|
|
12
12
|
- 🔍 Accessible by default
|
|
13
13
|
- 📱 Responsive and mobile-friendly
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Components
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
npm install @a-vision-software/vue-input-components
|
|
19
|
-
```
|
|
17
|
+
### Text Input
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
A versatile text input component that supports:
|
|
22
20
|
|
|
23
|
-
|
|
21
|
+
- Icons (Font Awesome or images)
|
|
22
|
+
- Placeholder text
|
|
23
|
+
- Disabled state
|
|
24
|
+
- Custom styling (colors, border radius, padding)
|
|
25
|
+
- Clear button
|
|
26
|
+
- Password toggle
|
|
27
|
+
- Character counter
|
|
28
|
+
- Error messages
|
|
24
29
|
|
|
25
|
-
|
|
26
|
-
import '@a-vision-software/vue-input-components/styles.css'
|
|
27
|
-
```
|
|
30
|
+
### File Upload
|
|
28
31
|
|
|
29
|
-
|
|
32
|
+
A file upload component with:
|
|
30
33
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
+
- Drag and drop support
|
|
35
|
+
- Multiple file selection
|
|
36
|
+
- File type validation
|
|
37
|
+
- File size limits
|
|
38
|
+
- Preview support
|
|
39
|
+
- Custom styling
|
|
40
|
+
- Progress indicator
|
|
34
41
|
|
|
35
|
-
|
|
42
|
+
### Action
|
|
36
43
|
|
|
37
|
-
|
|
44
|
+
A flexible action component that can be used as:
|
|
38
45
|
|
|
39
|
-
|
|
46
|
+
- Button
|
|
47
|
+
- Link
|
|
48
|
+
- Icon button
|
|
49
|
+
- With various styles and states
|
|
40
50
|
|
|
41
|
-
|
|
42
|
-
<template>
|
|
43
|
-
<TextInput
|
|
44
|
-
v-model="value"
|
|
45
|
-
label="Username"
|
|
46
|
-
placeholder="Enter your username"
|
|
47
|
-
:error="error"
|
|
48
|
-
:disabled="false"
|
|
49
|
-
/>
|
|
50
|
-
</template>
|
|
51
|
+
### Navigation
|
|
51
52
|
|
|
52
|
-
|
|
53
|
-
import { ref } from 'vue'
|
|
54
|
-
import { TextInput } from '@a-vision-software/vue-input-components'
|
|
53
|
+
A navigation component with:
|
|
55
54
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
55
|
+
- Multiple styles (tiles, tabs, dropdowns)
|
|
56
|
+
- Icons support
|
|
57
|
+
- Sub-navigation items
|
|
58
|
+
- Custom styling
|
|
59
|
+
- Responsive design
|
|
60
|
+
- Keyboard navigation
|
|
60
61
|
|
|
61
|
-
|
|
62
|
+
### Dropdown
|
|
62
63
|
|
|
63
|
-
|
|
64
|
-
| ------------- | --------------------------------------------------------------- | -------- | ----------------------------- |
|
|
65
|
-
| `modelValue` | `string` | `''` | The input value |
|
|
66
|
-
| `label` | `string` | `''` | The input label |
|
|
67
|
-
| `placeholder` | `string` | `''` | The input placeholder |
|
|
68
|
-
| `error` | `string` | `''` | Error message to display |
|
|
69
|
-
| `disabled` | `boolean` | `false` | Whether the input is disabled |
|
|
70
|
-
| `required` | `boolean` | `false` | Whether the input is required |
|
|
71
|
-
| `type` | `'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url'` | `'text'` | The input type |
|
|
64
|
+
A dropdown component that supports:
|
|
72
65
|
|
|
73
|
-
|
|
66
|
+
- Single and multiple selection
|
|
67
|
+
- Icons (Font Awesome or images)
|
|
68
|
+
- Placeholder text
|
|
69
|
+
- Filtering of options
|
|
70
|
+
- Disabled state
|
|
71
|
+
- Custom styling (colors, border radius, padding)
|
|
72
|
+
- Clear selection button
|
|
73
|
+
- Tags for multiple selection
|
|
74
|
+
- Responsive design
|
|
74
75
|
|
|
75
|
-
|
|
76
|
+
## Installation
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
npm install vue-input-components
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Usage
|
|
76
83
|
|
|
77
84
|
```vue
|
|
78
85
|
<template>
|
|
79
|
-
<
|
|
80
|
-
v-model="files"
|
|
81
|
-
accept="image/*"
|
|
82
|
-
:multiple="true"
|
|
83
|
-
:max-size="5 * 1024 * 1024"
|
|
84
|
-
@error="handleError"
|
|
85
|
-
/>
|
|
86
|
-
</template>
|
|
86
|
+
<TextInput v-model="text" placeholder="Enter text" icon="user" :disabled="false" />
|
|
87
87
|
|
|
88
|
-
<
|
|
89
|
-
import { ref } from 'vue'
|
|
90
|
-
import { FileUpload } from '@a-vision-software/vue-input-components'
|
|
88
|
+
<FileUpload v-model="files" accept="image/*" :max-size="5 * 1024 * 1024" @upload="handleUpload" />
|
|
91
89
|
|
|
92
|
-
|
|
90
|
+
<Action type="button" label="Click me" icon="check" @click="handleClick" />
|
|
93
91
|
|
|
94
|
-
|
|
95
|
-
console.error(error)
|
|
96
|
-
}
|
|
97
|
-
</script>
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
#### Props
|
|
92
|
+
<Navigation :items="navigationItems" type="tiles" v-model:active-item="activeItem" />
|
|
101
93
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
94
|
+
<Dropdown
|
|
95
|
+
v-model="selected"
|
|
96
|
+
:options="options"
|
|
97
|
+
placeholder="Select an option"
|
|
98
|
+
icon="house"
|
|
99
|
+
:multiple="true"
|
|
100
|
+
:filterable="true"
|
|
101
|
+
/>
|
|
102
|
+
</template>
|
|
103
|
+
```
|
|
109
104
|
|
|
110
|
-
|
|
105
|
+
## Props
|
|
111
106
|
|
|
112
|
-
|
|
107
|
+
### Text Input
|
|
113
108
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
109
|
+
- `modelValue`: string - The input value
|
|
110
|
+
- `placeholder`: string - Placeholder text
|
|
111
|
+
- `icon`: string - Icon name or image URL (prefixed with 'img:')
|
|
112
|
+
- `iconSize`: 'normal' | 'large' - Icon size
|
|
113
|
+
- `disabled`: boolean - Whether the input is disabled
|
|
114
|
+
- `type`: 'text' | 'password' | 'email' | 'number' - Input type
|
|
115
|
+
- `showClear`: boolean - Whether to show the clear button
|
|
116
|
+
- `showCounter`: boolean - Whether to show the character counter
|
|
117
|
+
- `maxLength`: number - Maximum length of the input
|
|
118
|
+
- `error`: string - Error message to display
|
|
119
|
+
- Custom styling props (color, hoverColor, etc.)
|
|
118
120
|
|
|
119
|
-
|
|
120
|
-
import { Action } from '@a-vision-software/vue-input-components'
|
|
121
|
+
### File Upload
|
|
121
122
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
123
|
+
- `modelValue`: File[] - The selected files
|
|
124
|
+
- `accept`: string - Accepted file types
|
|
125
|
+
- `maxSize`: number - Maximum file size in bytes
|
|
126
|
+
- `multiple`: boolean - Whether to allow multiple files
|
|
127
|
+
- `disabled`: boolean - Whether the upload is disabled
|
|
128
|
+
- Custom styling props
|
|
127
129
|
|
|
128
|
-
|
|
130
|
+
### Action
|
|
129
131
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
132
|
+
- `type`: 'button' | 'link' - The type of action
|
|
133
|
+
- `label`: string - The action label
|
|
134
|
+
- `icon`: string - Icon name
|
|
135
|
+
- `to`: string - Route for link type
|
|
136
|
+
- `disabled`: boolean - Whether the action is disabled
|
|
137
|
+
- Custom styling props
|
|
138
|
+
|
|
139
|
+
### Navigation
|
|
140
|
+
|
|
141
|
+
- `items`: NavigationItem[] - The navigation items
|
|
142
|
+
- `type`: 'tiles' | 'tabs' | 'dropdowns' - The navigation style
|
|
143
|
+
- `orientation`: 'horizontal' | 'vertical' - The navigation orientation
|
|
144
|
+
- `activeItem`: string - The active item ID
|
|
145
|
+
- `iconSize`: 'normal' | 'large' - Icon size
|
|
146
|
+
- Custom styling props
|
|
147
|
+
|
|
148
|
+
### Dropdown
|
|
149
|
+
|
|
150
|
+
- `modelValue`: string | string[] - The selected value(s)
|
|
151
|
+
- `options`: DropdownOption[] - The available options
|
|
152
|
+
- `placeholder`: string - Placeholder text
|
|
153
|
+
- `icon`: string - Icon name or image URL (prefixed with 'img:')
|
|
154
|
+
- `iconSize`: 'normal' | 'large' - Icon size
|
|
155
|
+
- `multiple`: boolean - Whether to allow multiple selection
|
|
156
|
+
- `filterable`: boolean - Whether to allow filtering
|
|
157
|
+
- `disabled`: boolean - Whether the dropdown is disabled
|
|
158
|
+
- Custom styling props
|
|
138
159
|
|
|
139
160
|
## Styling
|
|
140
161
|
|
|
141
|
-
|
|
162
|
+
All components support custom styling through CSS variables and props:
|
|
142
163
|
|
|
143
164
|
```css
|
|
144
165
|
:root {
|
|
145
|
-
--primary
|
|
146
|
-
--text-primary:
|
|
147
|
-
--text-secondary:
|
|
148
|
-
--
|
|
149
|
-
--input-bg: #fff;
|
|
150
|
-
--error-color: #f44336;
|
|
166
|
+
--primary: #4a90e2;
|
|
167
|
+
--text-primary: rgba(0, 0, 0, 0.8);
|
|
168
|
+
--text-secondary: rgba(0, 0, 0, 0.6);
|
|
169
|
+
--text-disabled: rgba(0, 0, 0, 0.4);
|
|
151
170
|
}
|
|
152
171
|
```
|
|
153
172
|
|
|
@@ -171,4 +190,4 @@ npm run test
|
|
|
171
190
|
|
|
172
191
|
## License
|
|
173
192
|
|
|
174
|
-
MIT
|
|
193
|
+
MIT
|