@a-vision-software/vue-input-components 1.0.0 → 1.0.1
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 +59 -158
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ A collection of reusable Vue 3 input components with TypeScript support.
|
|
|
6
6
|
|
|
7
7
|
### TextInput Component
|
|
8
8
|
|
|
9
|
-
- Customizable label position (top, left
|
|
9
|
+
- Customizable label position (top, left)
|
|
10
10
|
- Label alignment options (left, right, center)
|
|
11
11
|
- Icon support with click-to-focus functionality
|
|
12
12
|
- Error and success states with messages
|
|
@@ -35,107 +35,26 @@ A collection of reusable Vue 3 input components with TypeScript support.
|
|
|
35
35
|
## Installation
|
|
36
36
|
|
|
37
37
|
```bash
|
|
38
|
-
npm install
|
|
38
|
+
npm install @a-vision-software/vue-input-components
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
##
|
|
42
|
-
|
|
43
|
-
```bash
|
|
44
|
-
npm run dev
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
## Build
|
|
48
|
-
|
|
49
|
-
```bash
|
|
50
|
-
npm run build
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## Installation in Other Projects
|
|
54
|
-
|
|
55
|
-
### Option 1: Copy Components Directly
|
|
56
|
-
|
|
57
|
-
1. Copy the following files to your project:
|
|
58
|
-
|
|
59
|
-
- `src/components/TextInput.vue`
|
|
60
|
-
- `src/components/FileUpload.vue`
|
|
61
|
-
- `src/assets/colors.css`
|
|
62
|
-
|
|
63
|
-
2. Install required dependencies in your project:
|
|
64
|
-
|
|
65
|
-
```bash
|
|
66
|
-
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
3. Import the color variables in your main CSS file:
|
|
70
|
-
|
|
71
|
-
```css
|
|
72
|
-
@import './assets/colors.css';
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
4. Import and register Font Awesome in your main.js or main.ts:
|
|
76
|
-
|
|
77
|
-
```typescript
|
|
78
|
-
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
79
|
-
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
|
80
|
-
import { faUser, faUpload, faImage, faFile, faHome } from '@fortawesome/free-solid-svg-icons'
|
|
81
|
-
|
|
82
|
-
library.add(faUser, faUpload, faImage, faFile, faHome)
|
|
83
|
-
app.component('font-awesome-icon', FontAwesomeIcon)
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
### Option 2: Create a Package
|
|
87
|
-
|
|
88
|
-
1. Create a new package.json with the following structure:
|
|
89
|
-
|
|
90
|
-
```json
|
|
91
|
-
{
|
|
92
|
-
"name": "vue-input-components",
|
|
93
|
-
"version": "1.0.0",
|
|
94
|
-
"main": "dist/index.js",
|
|
95
|
-
"types": "dist/index.d.ts",
|
|
96
|
-
"files": ["dist"],
|
|
97
|
-
"dependencies": {
|
|
98
|
-
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
|
99
|
-
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
|
100
|
-
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
|
101
|
-
"@fortawesome/vue-fontawesome": "^3.0.8",
|
|
102
|
-
"vue": "^3.5.13"
|
|
103
|
-
},
|
|
104
|
-
"peerDependencies": {
|
|
105
|
-
"vue": "^3.5.13"
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
2. Build the components for distribution:
|
|
111
|
-
|
|
112
|
-
```bash
|
|
113
|
-
npm run build
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
3. Publish to npm:
|
|
117
|
-
|
|
118
|
-
```bash
|
|
119
|
-
npm publish
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
4. Install in other projects:
|
|
123
|
-
```bash
|
|
124
|
-
npm install vue-input-components
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
### Usage in Other Projects
|
|
41
|
+
## Quick Start
|
|
128
42
|
|
|
129
|
-
1. Import the components:
|
|
43
|
+
1. Import the components in your Vue application:
|
|
130
44
|
|
|
131
45
|
```vue
|
|
132
46
|
<script setup>
|
|
133
|
-
import { TextInput, FileUpload } from 'vue-input-components'
|
|
47
|
+
import { TextInput, FileUpload } from '@a-vision-software/vue-input-components'
|
|
134
48
|
</script>
|
|
135
49
|
```
|
|
136
50
|
|
|
137
|
-
2.
|
|
51
|
+
2. Import the color variables in your main CSS file:
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
@import '@a-vision-software/vue-input-components/dist/colors.css';
|
|
55
|
+
```
|
|
138
56
|
|
|
57
|
+
3. Use the components in your template:
|
|
139
58
|
```vue
|
|
140
59
|
<template>
|
|
141
60
|
<TextInput v-model="username" label="Username" icon="user" :required="true" />
|
|
@@ -148,51 +67,17 @@ npm run build
|
|
|
148
67
|
</template>
|
|
149
68
|
```
|
|
150
69
|
|
|
151
|
-
|
|
152
|
-
```css
|
|
153
|
-
@import 'vue-input-components/dist/colors.css';
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### Customization
|
|
157
|
-
|
|
158
|
-
1. Override color variables in your project:
|
|
159
|
-
|
|
160
|
-
```css
|
|
161
|
-
:root {
|
|
162
|
-
--primary-color: #your-color;
|
|
163
|
-
--text-color: #your-color;
|
|
164
|
-
/* Override other variables as needed */
|
|
165
|
-
}
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
2. Customize component styles:
|
|
169
|
-
|
|
170
|
-
```css
|
|
171
|
-
.text-input {
|
|
172
|
-
/* Your custom styles */
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.file-upload {
|
|
176
|
-
/* Your custom styles */
|
|
177
|
-
}
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
### Requirements
|
|
181
|
-
|
|
182
|
-
- Vue 3.x
|
|
183
|
-
- TypeScript (optional but recommended)
|
|
184
|
-
- Font Awesome (for icons)
|
|
70
|
+
## Development
|
|
185
71
|
|
|
186
|
-
|
|
72
|
+
```bash
|
|
73
|
+
npm run dev
|
|
74
|
+
```
|
|
187
75
|
|
|
188
|
-
|
|
76
|
+
## Build
|
|
189
77
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
- Drag and Drop API (for FileUpload)
|
|
194
|
-
- FormData (for FileUpload)
|
|
195
|
-
- XMLHttpRequest (for FileUpload)
|
|
78
|
+
```bash
|
|
79
|
+
npm run build
|
|
80
|
+
```
|
|
196
81
|
|
|
197
82
|
## Components
|
|
198
83
|
|
|
@@ -202,26 +87,26 @@ Basic text input component with advanced features, including textarea support.
|
|
|
202
87
|
|
|
203
88
|
#### Props
|
|
204
89
|
|
|
205
|
-
| Prop | Type
|
|
206
|
-
| ------------- |
|
|
207
|
-
| modelValue | string
|
|
208
|
-
| label | string
|
|
209
|
-
| type | string
|
|
210
|
-
| icon | string
|
|
211
|
-
| placeholder | string
|
|
212
|
-
| required | boolean
|
|
213
|
-
| disabled | boolean
|
|
214
|
-
| error | string
|
|
215
|
-
| success | string
|
|
216
|
-
| labelPosition | 'top' \| 'left'
|
|
217
|
-
| labelAlign | 'left' \| 'right' \| 'center'
|
|
218
|
-
| totalWidth | string
|
|
219
|
-
| inputWidth | string
|
|
220
|
-
| labelWidth | string
|
|
221
|
-
| autosave | (value: string) => Promise<void>
|
|
222
|
-
| isTextarea | boolean
|
|
223
|
-
| maxHeight | string
|
|
224
|
-
| height | string
|
|
90
|
+
| Prop | Type | Default | Description |
|
|
91
|
+
| ------------- | -------------------------------- | --------- | ------------------------------------------ |
|
|
92
|
+
| modelValue | string | required | The input value (v-model) |
|
|
93
|
+
| label | string | undefined | Input label |
|
|
94
|
+
| type | string | 'text' | Input type (text, password, email, etc.) |
|
|
95
|
+
| icon | string | undefined | Font Awesome icon name |
|
|
96
|
+
| placeholder | string | undefined | Input placeholder |
|
|
97
|
+
| required | boolean | false | Whether the field is required |
|
|
98
|
+
| disabled | boolean | false | Whether the field is disabled |
|
|
99
|
+
| error | string | undefined | Error message |
|
|
100
|
+
| success | string | undefined | Success message |
|
|
101
|
+
| labelPosition | 'top' \| 'left' | 'top' | Label position |
|
|
102
|
+
| labelAlign | 'left' \| 'right' \| 'center' | 'left' | Label text alignment |
|
|
103
|
+
| totalWidth | string | '100%' | Total width of the component |
|
|
104
|
+
| inputWidth | string | undefined | Width of the input field |
|
|
105
|
+
| labelWidth | string | undefined | Width of the label (when position is left) |
|
|
106
|
+
| autosave | (value: string) => Promise<void> | undefined | Autosave callback function |
|
|
107
|
+
| isTextarea | boolean | false | Whether to render as a textarea |
|
|
108
|
+
| maxHeight | string | '14rem' | Maximum height for textarea |
|
|
109
|
+
| height | string | '5.5rem' | Initial height for textarea |
|
|
225
110
|
|
|
226
111
|
#### Events
|
|
227
112
|
|
|
@@ -253,7 +138,7 @@ Basic text input component with advanced features, including textarea support.
|
|
|
253
138
|
|
|
254
139
|
<script setup lang="ts">
|
|
255
140
|
import { ref } from 'vue'
|
|
256
|
-
import TextInput from '
|
|
141
|
+
import { TextInput } from '@a-vision-software/vue-input-components'
|
|
257
142
|
|
|
258
143
|
const username = ref('')
|
|
259
144
|
const usernameError = ref('')
|
|
@@ -284,7 +169,7 @@ const handleUsernameAutosave = async (value: string) => {
|
|
|
284
169
|
|
|
285
170
|
<script setup lang="ts">
|
|
286
171
|
import { ref } from 'vue'
|
|
287
|
-
import TextInput from '
|
|
172
|
+
import { TextInput } from '@a-vision-software/vue-input-components'
|
|
288
173
|
|
|
289
174
|
const description = ref('')
|
|
290
175
|
const descriptionError = ref('')
|
|
@@ -330,7 +215,7 @@ Flexible file upload component with drag and drop support.
|
|
|
330
215
|
</template>
|
|
331
216
|
|
|
332
217
|
<script setup>
|
|
333
|
-
import FileUpload from '
|
|
218
|
+
import { FileUpload } from '@a-vision-software/vue-input-components'
|
|
334
219
|
|
|
335
220
|
const handleUploadComplete = (files) => {
|
|
336
221
|
console.log('Uploaded files:', files)
|
|
@@ -354,7 +239,7 @@ const handleUploadError = (error) => {
|
|
|
354
239
|
</template>
|
|
355
240
|
|
|
356
241
|
<script setup>
|
|
357
|
-
import FileUpload from '
|
|
242
|
+
import { FileUpload } from '@a-vision-software/vue-input-components'
|
|
358
243
|
|
|
359
244
|
const handleFilesSelected = (files) => {
|
|
360
245
|
console.log('Selected files:', files)
|
|
@@ -400,6 +285,11 @@ All components use CSS variables for theming. You can customize the colors by ov
|
|
|
400
285
|
--card-bg: #ffffff;
|
|
401
286
|
--background-color: #f8f9fa;
|
|
402
287
|
|
|
288
|
+
/* Input colors */
|
|
289
|
+
--input-bg-color: rgba(255, 255, 255, 0.8);
|
|
290
|
+
--input-bg-hover: rgba(0, 0, 0, 0.05);
|
|
291
|
+
--input-bg-disabled: rgba(0, 0, 0, 0.05);
|
|
292
|
+
|
|
403
293
|
/* File Upload specific colors */
|
|
404
294
|
--upload-border-color: var(--border-color);
|
|
405
295
|
--upload-bg-color: var(--background-color);
|
|
@@ -414,6 +304,17 @@ All components use CSS variables for theming. You can customize the colors by ov
|
|
|
414
304
|
}
|
|
415
305
|
```
|
|
416
306
|
|
|
307
|
+
## Browser Support
|
|
308
|
+
|
|
309
|
+
All components use modern browser features and should work in all modern browsers that support:
|
|
310
|
+
|
|
311
|
+
- CSS Variables
|
|
312
|
+
- Flexbox
|
|
313
|
+
- File API (for FileUpload)
|
|
314
|
+
- Drag and Drop API (for FileUpload)
|
|
315
|
+
- FormData (for FileUpload)
|
|
316
|
+
- XMLHttpRequest (for FileUpload)
|
|
317
|
+
|
|
417
318
|
## License
|
|
418
319
|
|
|
419
320
|
MIT
|
package/package.json
CHANGED