vue-quest-ui 0.0.35 → 0.0.37
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 +122 -113
- package/dist/vue-quest-ui.css +1 -1
- package/dist/vue-quest-ui.js +1114 -1112
- package/dist/vue-quest-ui.umd.cjs +1 -1
- package/package.json +1 -1
- package/src/components/shared/ui/QstDropdown.vue +4 -0
package/README.md
CHANGED
|
@@ -1,98 +1,107 @@
|
|
|
1
|
-
# Vue Quest UI
|
|
2
|
-
|
|
3
|
-
Vue Quest UI is a collection of reusable Vue components that are designed to help you quickly build modern and responsive user interfaces for your Vue.js projects.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
You can easily install Vue Quest UI via npm:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm i vue-quest-ui
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## Usage
|
|
14
|
-
To use Vue Quest UI in your Vue.js project, you can register the components globally as an entire library or individually, or locally.
|
|
15
|
-
|
|
16
|
-
### 1. Global Registration:
|
|
17
|
-
In your main.js (or main.ts) file, use the <b>install</b> function to register all components globally. All the components in the library will be installed in your project. They can then be used as custom components in any part of your project.
|
|
18
|
-
|
|
19
|
-
```javascript
|
|
20
|
-
import { createApp } from 'vue';
|
|
21
|
-
import App from './App.vue';
|
|
22
|
-
import { install } from 'vue-quest-ui'; // Import the install function
|
|
23
|
-
|
|
24
|
-
const app = createApp(App);
|
|
25
|
-
|
|
26
|
-
app.use(install); // Register all components globally
|
|
27
|
-
|
|
28
|
-
app.mount('#app');
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
### 2. Selective Registration:
|
|
32
|
-
If you only want to import specific components instead of the entire library, you can use the <b>installGlobalComponents</b> function. Pass a string array of the component names you'd like to import, these components will then be globally imported.
|
|
33
|
-
|
|
34
|
-
```javascript
|
|
35
|
-
import { createApp } from 'vue';
|
|
36
|
-
import App from './App.vue';
|
|
37
|
-
import { installGlobalComponents } from 'vue-quest-ui';
|
|
38
|
-
|
|
39
|
-
const app = createApp(App);
|
|
40
|
-
|
|
41
|
-
installGlobalComponents(app, ['QstIcon']); // Register only the QstIcon component globally
|
|
42
|
-
|
|
43
|
-
app.mount('#app');
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
### 3. Manual Registration:
|
|
47
|
-
You can also import and register individual components manually globally, or locally in each file that they'll be used in.
|
|
48
|
-
|
|
49
|
-
```javascript
|
|
50
|
-
// main.js/main.ts
|
|
51
|
-
import { createApp } from 'vue';
|
|
52
|
-
import App from './App.vue';
|
|
53
|
-
import { QstIcon } from 'vue-quest-ui';
|
|
54
|
-
|
|
55
|
-
const app = createApp(App);
|
|
56
|
-
|
|
57
|
-
// Manually register the QstIcon component
|
|
58
|
-
app.component('QstIcon', QstIcon);
|
|
59
|
-
|
|
60
|
-
app.mount('#app');
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
```javascript
|
|
64
|
-
// file for a component or page where the component will be used
|
|
65
|
-
import { QstIcon } from 'vue-quest-ui';
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
```html
|
|
69
|
-
<div>
|
|
70
|
-
<qst-icon icon="clarity:email-solid" />
|
|
71
|
-
</div>
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
##
|
|
75
|
-
Vue Quest UI
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
1
|
+
# Vue Quest UI
|
|
2
|
+
|
|
3
|
+
Vue Quest UI is a collection of reusable Vue components that are designed to help you quickly build modern and responsive user interfaces for your Vue.js projects.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
You can easily install Vue Quest UI via npm:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm i vue-quest-ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
To use Vue Quest UI in your Vue.js project, you can register the components globally as an entire library or individually, or locally.
|
|
15
|
+
|
|
16
|
+
### 1. Global Registration:
|
|
17
|
+
In your main.js (or main.ts) file, use the <b>install</b> function to register all components globally. All the components in the library will be installed in your project. They can then be used as custom components in any part of your project.
|
|
18
|
+
|
|
19
|
+
```javascript
|
|
20
|
+
import { createApp } from 'vue';
|
|
21
|
+
import App from './App.vue';
|
|
22
|
+
import { install } from 'vue-quest-ui'; // Import the install function
|
|
23
|
+
|
|
24
|
+
const app = createApp(App);
|
|
25
|
+
|
|
26
|
+
app.use(install); // Register all components globally
|
|
27
|
+
|
|
28
|
+
app.mount('#app');
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### 2. Selective Registration:
|
|
32
|
+
If you only want to import specific components instead of the entire library, you can use the <b>installGlobalComponents</b> function. Pass a string array of the component names you'd like to import, these components will then be globally imported.
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
import { createApp } from 'vue';
|
|
36
|
+
import App from './App.vue';
|
|
37
|
+
import { installGlobalComponents } from 'vue-quest-ui';
|
|
38
|
+
|
|
39
|
+
const app = createApp(App);
|
|
40
|
+
|
|
41
|
+
installGlobalComponents(app, ['QstIcon']); // Register only the QstIcon component globally
|
|
42
|
+
|
|
43
|
+
app.mount('#app');
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### 3. Manual Registration:
|
|
47
|
+
You can also import and register individual components manually globally, or locally in each file that they'll be used in.
|
|
48
|
+
|
|
49
|
+
```javascript
|
|
50
|
+
// main.js/main.ts
|
|
51
|
+
import { createApp } from 'vue';
|
|
52
|
+
import App from './App.vue';
|
|
53
|
+
import { QstIcon } from 'vue-quest-ui';
|
|
54
|
+
|
|
55
|
+
const app = createApp(App);
|
|
56
|
+
|
|
57
|
+
// Manually register the QstIcon component
|
|
58
|
+
app.component('QstIcon', QstIcon);
|
|
59
|
+
|
|
60
|
+
app.mount('#app');
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
```javascript
|
|
64
|
+
// file for a component or page where the component will be used
|
|
65
|
+
import { QstIcon } from 'vue-quest-ui';
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<div>
|
|
70
|
+
<qst-icon icon="clarity:email-solid" />
|
|
71
|
+
</div>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Styles
|
|
75
|
+
All the necessary styles for Vue Quest UI can be imported in your main.js file. Some components also include a color prop, which allows you to choose an accent color. By default, this uses the primary-color CSS variable. If you define the primary-color variable in your project, it will automatically apply to all components that use the color prop, so you won’t need to set it individually for each one.
|
|
76
|
+
|
|
77
|
+
```javascript
|
|
78
|
+
import 'vue-quest-ui/dist/vue-quest-ui.css';
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Configuration
|
|
82
|
+
Vue Quest UI requires iconify for the icons throughout the project. If it's not already installed, it will be installed alongside vue-quest-ui as a dependency.
|
|
83
|
+
|
|
84
|
+
All components can be customized based on your needs by passing props to them. Review the props available for each component below.
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
96
105
|
|
|
97
106
|
## Components
|
|
98
107
|
* [QstIcon (v0.0.13)](#qsticon)
|
|
@@ -146,7 +155,7 @@ A customizable input element that supports the following types: text, password,
|
|
|
146
155
|
| type | string | false | text | The type of input. Can be set to any of the following types: text, password, email, number, phone, tel, textarea, datepicker, datetimepicker, timepicker, decimal, number-string, money. *(type="number" will be a number data type. to use number characters with a string data type (ex/ to start a number with 0) use type="number-string")* |
|
|
147
156
|
| width | string | false | null | The width of the input. |
|
|
148
157
|
| size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
149
|
-
| color | string | false |
|
|
158
|
+
| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
|
|
150
159
|
| placeholder | string, number | false | — | Placeholder for the input. The placeholder text will be shown as a label, in order to show an animation when focusing the input. |
|
|
151
160
|
| labelPosition | string | false | mid | The position of the label relative to the input when it has a value. |
|
|
152
161
|
| icon | string | false | — | Any Iconify value, the icon will be shown on the right side of the input. Input types such as "phone", "email", and "password" will show an icon by default. |
|
|
@@ -219,7 +228,7 @@ A simple, customizable button that triggers actions when clicked. It supports va
|
|
|
219
228
|
|
|
220
229
|
| Name | Type | Required | Default | Description |
|
|
221
230
|
|------|------|----------|---------|-------------|
|
|
222
|
-
| color | string | false |
|
|
231
|
+
| color | string | false | var(--primary-color) | The background color of the button. |
|
|
223
232
|
| fontColor | string | false | #fff | The color of the button text or icon. |
|
|
224
233
|
| size | string | false | — | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
225
234
|
| icon | string | false | null | Iconify value for the icon. |
|
|
@@ -246,7 +255,7 @@ A dropdown component that displays an interactive menu, which can be triggered b
|
|
|
246
255
|
| closeOnOutsideClick | boolean | false | true | Closes the dropdown menu when clicking outside of it. |
|
|
247
256
|
| position | string | false | bottom | The position that the dropdown will open relative to the trigger. |
|
|
248
257
|
| offset | object | false | {x:0,y:0} | Moves the dropdown from its default position. *(+X moves right, -X moves left, +Y moves down, -Y moves up)* |
|
|
249
|
-
| centerDropdown | boolean | false |
|
|
258
|
+
| centerDropdown | boolean | false | false | Centers the dropdown based on the trigger. Offset can be used to adjust it starting at the center position, the triangle will stay centered. |
|
|
250
259
|
| maxHeight | string | false | null | Max height for the dropdown, if exceeded the dropdown will start scrolling. |
|
|
251
260
|
| useTriangle | boolean | false | false | Shows a triangle relative to the position of the trigger. |
|
|
252
261
|
| offsetTriangle | boolean | false | false | When the offset is set, the triangle will remain anchored to the trigger by default. If true, the triangle will move with the rest of the offset. |
|
|
@@ -264,7 +273,7 @@ A loader component that visually indicates ongoing processes or background tasks
|
|
|
264
273
|
| Name | Type | Required | Default | Description |
|
|
265
274
|
|------|------|----------|---------|-------------|
|
|
266
275
|
| loaderSrc | string | false | null | The image/gif that will be used for the loader. |
|
|
267
|
-
| color | string | false |
|
|
276
|
+
| color | string | false | var(--primary-color) | The color when using the default loader icon. |
|
|
268
277
|
| subtext | string | false | null | Optional text to show below the loader. |
|
|
269
278
|
| size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
270
279
|
| center | boolean | false | true | Aligns the loader to be centered relative to its parent container. |
|
|
@@ -289,7 +298,7 @@ A reusable modal component that provides a flexible, customizable overlay for di
|
|
|
289
298
|
| width | string | false | 550px | The width of the modal, set in px. |
|
|
290
299
|
| height | string | false | 650px | The height of the modal, set in px. |
|
|
291
300
|
| size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
292
|
-
| color | string | false |
|
|
301
|
+
| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
|
|
293
302
|
| useLoader | boolean | false | false | When true, shows a loader in the modal. |
|
|
294
303
|
| hideTitle | boolean | false | false | Hides the modal title. |
|
|
295
304
|
| hideFooter | boolean | false | false | Hides the modal footer row. |
|
|
@@ -316,7 +325,7 @@ A custom designed switch component that allows users to toggle between two state
|
|
|
316
325
|
| modelValue | boolean | false | false | Used for v-model, will be set to whether the switch is active. |
|
|
317
326
|
| label | string | false | — | Label displayed to the right of the switch, clicking on the label will toggle the switch. |
|
|
318
327
|
| icon | string | false | — | Any Iconify value, the icon will be displayed to the right of the switch. |
|
|
319
|
-
| color | string | false |
|
|
328
|
+
| color | string | false | var(--primary-color) | The color of the switch when active. |
|
|
320
329
|
| size | string | false | 12px | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
321
330
|
| useEditMode | boolean | false | true | Whether the input should be editable or not. |
|
|
322
331
|
| showLabelOnEditMode | boolean | false | true | Shows the label when the input is in edit mode.' |
|
|
@@ -339,10 +348,10 @@ A scroll wrapper component that uses a slot to render content, with configurable
|
|
|
339
348
|
| useDots | boolean | false | false | If the container has overflow, shows dots per the number of slides. |
|
|
340
349
|
| useProgressBar | boolean | false | false | If the container has overflow, shows a progress bar that fills as the user scrolls towards the end of the container. |
|
|
341
350
|
| width | string | false | — | Width of the entire scroll container. |
|
|
342
|
-
| color | string | false |
|
|
351
|
+
| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
|
|
343
352
|
| size | string | false | 20px | Pixel value to resize the component, styles are adjusted when the size is updated. *(arrows, dots, icons)* |
|
|
344
353
|
| hideScroll | boolean | false | true | The scrollbar will be hidden. |
|
|
345
|
-
| slideWidth | string | false |
|
|
354
|
+
| slideWidth | string | false | — | The width of each slide, if not set use a min-width on scroll items. |
|
|
346
355
|
|
|
347
356
|
|
|
348
357
|
|
|
@@ -379,7 +388,7 @@ A component displayed as a small tag or flag, can be set as a link, tooltip, or
|
|
|
379
388
|
| Name | Type | Required | Default | Description |
|
|
380
389
|
|------|------|----------|---------|-------------|
|
|
381
390
|
| size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
382
|
-
| bgColor | string | false |
|
|
391
|
+
| bgColor | string | false | var(--primary-color) | The background color of the tag. |
|
|
383
392
|
| color | string | false | #fff | The font color of the tag. |
|
|
384
393
|
| useFade | boolean | false | false | Changes the style of the tag to use a faded color scheme. |
|
|
385
394
|
| bold | boolean | false | false | Bolds the text of the tag. |
|
|
@@ -406,10 +415,10 @@ A wrapper component containing a trigger and a content slot, clicking the trigge
|
|
|
406
415
|
|------|------|----------|---------|-------------|
|
|
407
416
|
| useDiv | boolean | false | true | The trigger and content slot elements will have a div parent element. |
|
|
408
417
|
| defaultOpen | boolean | false | false | The row will be intitially expanded by default. |
|
|
409
|
-
| useIcon | boolean | false | false | Shows an
|
|
418
|
+
| useIcon | boolean | false | false | Shows an icon at the end of the trigger row. |
|
|
410
419
|
| rowIndex | number | false | null | Index of the expanded row, used for dynamically selecting a row. *(ex/ when used in a table)* |
|
|
411
420
|
| useOpenBorder | boolean | false | false | Shows a border on the left of the row that expands with the container as it opens. |
|
|
412
|
-
| color | string | false |
|
|
421
|
+
| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
|
|
413
422
|
| icon | string | false | ep:arrow-down-bold | Any iconify value, the icon will show at the end of the trigger row. |
|
|
414
423
|
|
|
415
424
|
|
|
@@ -450,7 +459,7 @@ A customizable checkbox component for selecting true/false values.
|
|
|
450
459
|
| label | string | false | — | Label displayed to the right of the checkbox, clicking on the label will toggle the checkbox. |
|
|
451
460
|
| useLeftLabel | boolean | false | false | The label will be displayed on the left side of the checkbox. |
|
|
452
461
|
| size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
453
|
-
| color | string | false |
|
|
462
|
+
| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
|
|
454
463
|
|
|
455
464
|
|
|
456
465
|
|
|
@@ -472,7 +481,7 @@ A container component that manages a group of checkbox inputs for controlled sel
|
|
|
472
481
|
| disabled | boolean | false | false | Disables all checkboxes. |
|
|
473
482
|
| groupLabel | string | false | — | The label for the entire checkbox group. Displays above or next to the inputs if displayed in a row. |
|
|
474
483
|
| size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
475
|
-
| color | string | false |
|
|
484
|
+
| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
|
|
476
485
|
|
|
477
486
|
|
|
478
487
|
|
|
@@ -490,7 +499,7 @@ A single radio button component for exclusive option selection.
|
|
|
490
499
|
| radio | object | true | — | The details for the radio input. Id is optional, v-model will be set to the value property. *({id?: string, value: string, label: string})* |
|
|
491
500
|
| disabled | boolean | false | false | Disables the radio input. |
|
|
492
501
|
| size | string | false | 12px | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
493
|
-
| color | string | false |
|
|
502
|
+
| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
|
|
494
503
|
|
|
495
504
|
|
|
496
505
|
|
|
@@ -511,7 +520,7 @@ A container component that manages a group of radio buttons for controlled selec
|
|
|
511
520
|
| useRow | boolean | false | false | The inputs will be displayed in a row, instead of a column. |
|
|
512
521
|
| groupLabel | string | false | — | The label for the entire radio group. Displays above or next to the inputs if displayed in a row. |
|
|
513
522
|
| size | string | false | 12px | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
514
|
-
| color | string | false |
|
|
523
|
+
| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
|
|
515
524
|
|
|
516
525
|
|
|
517
526
|
|
|
@@ -533,7 +542,7 @@ An autocomplete input component, with functionality for single/multiselect, sear
|
|
|
533
542
|
| query | string, number | false | null | Used for v-model:query, value will be the searched text in the input. |
|
|
534
543
|
| size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
535
544
|
| dynamicSizes | object | false | null | Any screen size defined will target that screen size and below (ex/ {xl: '10px'} will change to 10px on max-width: 1549px). Screen sizes larger than what is defined will use the normal props.size. Use dynamicSizes when the dropdown is being teleported to update the dropdown's size as well. |
|
|
536
|
-
| color | string | false |
|
|
545
|
+
| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
|
|
537
546
|
| width | string | false | 100% | The width of the autocomplete. |
|
|
538
547
|
| useEditMode | boolean | false | true | Whether the input should be editable or not. |
|
|
539
548
|
| showLabelOnEditMode | boolean | false | true | Shows a label when in edit mode. |
|
|
@@ -580,7 +589,7 @@ A set of input fields designed for selecting an address. The first field feature
|
|
|
580
589
|
| useEditMode | boolean | false | true | Whether the input should be editable or not. |
|
|
581
590
|
| errors | object | false | {contact:'',address1:'',city:'',state:'',zip:'',country:''} | The errors for each of the address inputs. |
|
|
582
591
|
| size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |
|
|
583
|
-
| color | string | false |
|
|
592
|
+
| color | string | false | var(--primary-color) | The accent color, used for details within the component. |
|
|
584
593
|
| darkMode | boolean | false | false | Changes the styles to a dark theme. |
|
|
585
594
|
|
|
586
595
|
|
|
@@ -601,7 +610,7 @@ A select component, with functionality for single/multiselect, search, select al
|
|
|
601
610
|
| result | object, array|string|number | false | null | Used for v-model:result, value will be the *result* property of AutocompleteProp. |
|
|
602
611
|
| size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated.' |
|
|
603
612
|
| dynamicSizes | object | false | null | Any screen size defined will target that screen size and below (ex/ {xl: '10px'} will change to 10px on max-width: 1549px). Screen sizes larger than what is defined will use the normal props.size. Use dynamicSizes when the dropdown is being teleported to update dropdown's size as well. |
|
|
604
|
-
| color | string | false |
|
|
613
|
+
| color | string | false | var(--primary-color) | The accent color, used for details within the component.' |
|
|
605
614
|
| width | string | false | — | The width of the select and dropdown. If unset, the sizing will adjust to the size prop for single select or 100% for multiselect. |
|
|
606
615
|
| fullWidth | boolean | false | false | Sets the select to be full-width and take up 100% of its parent container. |
|
|
607
616
|
| useEditMode | boolean | false | true | Whether the input should be editable or not.' |
|