wave-ui 3.27.2 → 4.0.0
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/dist/types/types/$waveui.d.ts +21 -1
- package/dist/types/types/colors.d.ts +2 -0
- package/dist/types/types/components/WAccordion.d.ts +99 -6
- package/dist/types/types/components/WAutocomplete.d.ts +437 -0
- package/dist/types/types/components/WBreadcrumbs.d.ts +7 -0
- package/dist/types/types/components/WButton.d.ts +7 -0
- package/dist/types/types/components/WCheckbox.d.ts +34 -0
- package/dist/types/types/components/WCheckboxes.d.ts +30 -0
- package/dist/types/types/components/WInput.d.ts +34 -0
- package/dist/types/types/components/WList.d.ts +7 -0
- package/dist/types/types/components/WMenu.d.ts +12 -6
- package/dist/types/types/components/WRadio.d.ts +34 -0
- package/dist/types/types/components/WRadios.d.ts +30 -0
- package/dist/types/types/components/WScrollable.d.ts +143 -0
- package/dist/types/types/components/WScrollable.js +2 -0
- package/dist/types/types/components/WSelect.d.ts +34 -0
- package/dist/types/types/components/WSwitch.d.ts +34 -0
- package/dist/types/types/components/WTable.d.ts +7 -0
- package/dist/types/types/components/WTabs.d.ts +7 -0
- package/dist/types/types/components/WTag.d.ts +7 -0
- package/dist/types/types/components/WTooltip.d.ts +20 -7
- package/dist/types/types/components/WTransitions.d.ts +104 -0
- package/dist/types/types/components/WTransitions.js +2 -0
- package/dist/types/types/components/WTree.d.ts +7 -0
- package/dist/types/types/components/index.d.ts +3 -1
- package/dist/wave-ui.cjs.js +3 -3
- package/dist/wave-ui.css +1 -1
- package/dist/wave-ui.esm.js +2190 -1350
- package/dist/wave-ui.umd.js +3 -3
- package/package.json +6 -6
- package/src/wave-ui/components/index.js +0 -1
- package/src/wave-ui/components/transitions/w-transition-bounce.vue +2 -1
- package/src/wave-ui/components/transitions/w-transition-expand.vue +3 -2
- package/src/wave-ui/components/transitions/w-transition-fade.vue +2 -1
- package/src/wave-ui/components/transitions/w-transition-scale-fade.vue +2 -1
- package/src/wave-ui/components/transitions/w-transition-scale.vue +2 -1
- package/src/wave-ui/components/transitions/w-transition-slide-fade.vue +2 -1
- package/src/wave-ui/components/transitions/w-transition-slide.vue +2 -1
- package/src/wave-ui/components/transitions/w-transition-twist.vue +2 -1
- package/src/wave-ui/components/w-accordion/index.vue +15 -6
- package/src/wave-ui/components/w-accordion/item.vue +71 -26
- package/src/wave-ui/components/w-alert.vue +27 -29
- package/src/wave-ui/components/w-autocomplete.vue +626 -192
- package/src/wave-ui/components/w-badge.vue +54 -53
- package/src/wave-ui/components/w-breadcrumbs.vue +20 -11
- package/src/wave-ui/components/w-button/button.vue +36 -24
- package/src/wave-ui/components/w-button/index.vue +6 -5
- package/src/wave-ui/components/w-card.vue +8 -7
- package/src/wave-ui/components/w-checkbox.vue +31 -11
- package/src/wave-ui/components/w-checkboxes.vue +21 -3
- package/src/wave-ui/components/w-confirm.vue +22 -22
- package/src/wave-ui/components/w-dialog.vue +1 -1
- package/src/wave-ui/components/w-divider.vue +5 -5
- package/src/wave-ui/components/w-drawer.vue +3 -3
- package/src/wave-ui/components/w-form-element.vue +2 -2
- package/src/wave-ui/components/w-icon.vue +12 -14
- package/src/wave-ui/components/w-image.vue +1 -1
- package/src/wave-ui/components/w-input.vue +43 -25
- package/src/wave-ui/components/w-list.vue +23 -12
- package/src/wave-ui/components/w-menu.vue +57 -55
- package/src/wave-ui/components/w-notification.vue +4 -4
- package/src/wave-ui/components/w-progress.vue +6 -7
- package/src/wave-ui/components/w-radio.vue +32 -7
- package/src/wave-ui/components/w-radios.vue +28 -3
- package/src/wave-ui/components/w-rating.vue +7 -9
- package/src/wave-ui/components/w-scrollable.vue +670 -97
- package/src/wave-ui/components/w-select.vue +119 -101
- package/src/wave-ui/components/w-slider.vue +26 -26
- package/src/wave-ui/components/w-spinner.vue +5 -7
- package/src/wave-ui/components/w-switch.vue +71 -47
- package/src/wave-ui/components/w-table.vue +69 -36
- package/src/wave-ui/components/w-tabs/index.vue +31 -24
- package/src/wave-ui/components/w-tag.vue +49 -38
- package/src/wave-ui/components/w-textarea.vue +22 -22
- package/src/wave-ui/components/w-timeline.vue +6 -6
- package/src/wave-ui/components/w-toolbar.vue +8 -8
- package/src/wave-ui/components/w-tooltip.vue +30 -25
- package/src/wave-ui/components/w-tree.vue +35 -16
- package/src/wave-ui/core.js +11 -1
- package/src/wave-ui/mixins/detachable.js +98 -43
- package/src/wave-ui/mixins/ripple.js +39 -0
- package/src/wave-ui/scss/_base.scss +82 -17
- package/src/wave-ui/scss/_colors.scss +6 -75
- package/src/wave-ui/scss/_layout.scss +39 -47
- package/src/wave-ui/scss/_ripple.scss +37 -0
- package/src/wave-ui/scss/_transitions.scss +19 -19
- package/src/wave-ui/scss/_typography.scss +8 -9
- package/src/wave-ui/scss/index.scss +1 -0
- package/src/wave-ui/scss/variables/_mixins.scss +24 -25
- package/src/wave-ui/scss/variables/_variables.scss +4 -151
- package/src/wave-ui/utils/colors.js +7 -4
- package/src/wave-ui/utils/config.js +5 -4
- package/src/wave-ui/utils/dynamic-css.js +42 -20
- package/src/wave-ui/utils/ripple.js +72 -0
- package/src/wave-ui/utils/wave-ripple-directive.js +40 -0
- package/dist/types/types/components/WApp.d.ts +0 -83
- package/src/wave-ui/components/w-app.vue +0 -24
- /package/dist/types/types/components/{WApp.js → WAutocomplete.js} +0 -0
|
@@ -56,7 +56,7 @@ export interface $waveui {
|
|
|
56
56
|
css: {
|
|
57
57
|
/**
|
|
58
58
|
* Generate shades for custom colors and status colors.
|
|
59
|
-
* NOTE: the color palette shades
|
|
59
|
+
* NOTE: the built-in color palette shades always expose CSS variables.
|
|
60
60
|
* @property {boolean} colorShades - Default: true
|
|
61
61
|
*/
|
|
62
62
|
colorShades: boolean;
|
|
@@ -66,6 +66,13 @@ export interface $waveui {
|
|
|
66
66
|
* @property {boolean} colorShadeCssVariables - Default: false
|
|
67
67
|
*/
|
|
68
68
|
colorShadeCssVariables: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Custom CSS classes to add to the .w-app element.
|
|
71
|
+
* Accepts a space-separated string or an array of class names.
|
|
72
|
+
* @property {string|string[]} appClasses - Default: ""
|
|
73
|
+
* @example "row" or ["row", "my-custom-class"]
|
|
74
|
+
*/
|
|
75
|
+
appClasses: string | string[];
|
|
69
76
|
/**
|
|
70
77
|
* Generate margin and padding utility classes for each breakpoint. E.g. `sm-ma2`
|
|
71
78
|
* @property {boolean} breakpointSpaces - Default: false
|
|
@@ -202,6 +209,12 @@ export interface $waveui {
|
|
|
202
209
|
*/
|
|
203
210
|
transition: false | 'default' | 'bounce' | 'scale' | 'twist' | 'fade' | 'slide-fade-left' | 'slide-fade-right' | 'slide-fade-up' | 'slide-fade-down';
|
|
204
211
|
};
|
|
212
|
+
/**
|
|
213
|
+
* Default pointer ripple for supported components and for `v-wave-ripple` when the binding is not `false`.
|
|
214
|
+
* @property {boolean} ripple - Default: true
|
|
215
|
+
* @see https://antoniandre.github.io/wave-ui/options-presets-and-waveui
|
|
216
|
+
*/
|
|
217
|
+
ripple: boolean;
|
|
205
218
|
/**
|
|
206
219
|
* Component presets
|
|
207
220
|
* @property presets
|
|
@@ -224,4 +237,11 @@ export interface $waveui {
|
|
|
224
237
|
timeout: number;
|
|
225
238
|
} & WaveAlertProps): void;
|
|
226
239
|
switchTheme(theme: string, skipFlatten: boolean): void;
|
|
240
|
+
/**
|
|
241
|
+
* Set custom classes on the .w-app element.
|
|
242
|
+
* @param {...string} classes - Class names to add to the .w-app element. Pass no arguments to remove all custom classes.
|
|
243
|
+
* @example $waveui.setAppClasses('class1', 'class2')
|
|
244
|
+
* @example $waveui.setAppClasses() // Remove all custom classes
|
|
245
|
+
*/
|
|
246
|
+
setAppClasses(...classes: string[]): void;
|
|
227
247
|
}
|
|
@@ -7,6 +7,8 @@ export interface ColorShadeInfo {
|
|
|
7
7
|
}
|
|
8
8
|
export type WaveStatusColors = 'primary' | 'success' | 'error' | 'warning' | 'info';
|
|
9
9
|
export type PaletteColors = 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'red' | 'brown' | 'blue-grey' | 'grey';
|
|
10
|
+
export type WaveColorCssVariable = `--w-${WaveColor}-color`;
|
|
11
|
+
export type WaveDesignTokenCssVariable = '--w-base-font-size' | '--w-base-increment' | '--w-layout-padding' | '--w-border-radius' | '--w-border-width' | '--w-border-color' | '--w-border' | '--w-transition-duration' | '--w-transition-duration-fast' | '--w-box-shadow' | '--w-form-field-height' | '--w-small-form-el-size' | '--w-scrollbar-size' | '--w-base-bg-color' | '--w-base-color' | '--w-contrast-bg-color' | '--w-contrast-color' | '--w-caption-color' | '--w-disabled-color' | '--w-surface-hover-color' | '--w-surface-active-color' | '--w-surface-selected-color' | WaveColorCssVariable;
|
|
10
12
|
export type WaveColorShades = 'black' | 'white' | 'transparent' | 'inherit' | 'primary-light3' | 'primary-light2' | 'primary-light1' | 'primary-dark1' | 'primary-dark2' | 'primary-dark3' | 'success-light3' | 'success-light2' | 'success-light1' | 'success-dark1' | 'success-dark2' | 'success-dark3' | 'error-light3' | 'error-light2' | 'error-light1' | 'error-dark1' | 'error-dark2' | 'error-dark3' | 'warning-light3' | 'warning-light2' | 'warning-light1' | 'warning-dark1' | 'warning-dark2' | 'warning-dark3' | 'info-light3' | 'info-light2' | 'info-light1' | 'info-dark1' | 'info-dark2' | 'info-dark3' |
|
|
11
13
|
/** #fdebf1 */
|
|
12
14
|
'pink-light6' |
|
|
@@ -52,22 +52,28 @@ export interface WaveAccordionProps {
|
|
|
52
52
|
itemContentKey?: string;
|
|
53
53
|
/**
|
|
54
54
|
* Applies a custom CSS class (or space separated classes) on every item container (which includes both the title and the content of the item).
|
|
55
|
-
* @property {string} itemClass
|
|
55
|
+
* @property {string, array, object} itemClass
|
|
56
56
|
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
57
57
|
*/
|
|
58
|
-
itemClass?: string;
|
|
58
|
+
itemClass?: string | Array<string> | object;
|
|
59
59
|
/**
|
|
60
60
|
* Applies a custom CSS class (or space separated classes) on every title container.
|
|
61
|
-
* @property {string} titleClass
|
|
61
|
+
* @property {string, array, object} titleClass
|
|
62
62
|
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
63
63
|
*/
|
|
64
|
-
titleClass?: string;
|
|
64
|
+
titleClass?: string | Array<string> | object;
|
|
65
65
|
/**
|
|
66
66
|
* Applies a custom CSS class (or space separated classes) on every content container.
|
|
67
|
-
* @property {string} contentClass
|
|
67
|
+
* @property {string, array, object} contentClass
|
|
68
68
|
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
69
69
|
*/
|
|
70
|
-
contentClass?: string;
|
|
70
|
+
contentClass?: string | Array<string> | object;
|
|
71
|
+
/**
|
|
72
|
+
* Applies a custom CSS class (or space separated classes) on every expanded item container.
|
|
73
|
+
* @property {string, array, object} expandedClass
|
|
74
|
+
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
75
|
+
*/
|
|
76
|
+
expandedClass?: string | Array<string> | object;
|
|
71
77
|
/**
|
|
72
78
|
* Specifies the name of the icon to display in the toggle button. If set to false or empty string, the button will be removed.
|
|
73
79
|
* @property {string|boolean} expandIcon - Default: 'wi-triangle-down'
|
|
@@ -146,6 +152,13 @@ export interface WaveAccordionProps {
|
|
|
146
152
|
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
147
153
|
*/
|
|
148
154
|
keepInDom?: boolean;
|
|
155
|
+
/**
|
|
156
|
+
* When `true`, disables the accordion title pointer ripple for all items.
|
|
157
|
+
* Global default still follows `$waveui.config.ripple`. Per-item override: set `no-ripple` on `w-accordion-item`.
|
|
158
|
+
* @property {boolean} noRipple
|
|
159
|
+
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
160
|
+
*/
|
|
161
|
+
noRipple?: boolean;
|
|
149
162
|
}
|
|
150
163
|
export interface WaveAccordionEmits {
|
|
151
164
|
/**
|
|
@@ -237,4 +250,84 @@ export type WaveAccordionSlots = SlotsType<{
|
|
|
237
250
|
expanded: any;
|
|
238
251
|
}) => any;
|
|
239
252
|
}>;
|
|
253
|
+
export type WaveAccordionItemSlots = SlotsType<{
|
|
254
|
+
/**
|
|
255
|
+
* Provide a custom title for the accordion item (you could use the title prop instead).
|
|
256
|
+
* @param {any} item The current item object.
|
|
257
|
+
* @param {any} index The item index in the array of items. Starts at 1.
|
|
258
|
+
* @param {any} expanded A boolean representing the expanded state of the accordion item.
|
|
259
|
+
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
260
|
+
*/
|
|
261
|
+
'title': (_: {
|
|
262
|
+
item: any;
|
|
263
|
+
index: any;
|
|
264
|
+
expanded: any;
|
|
265
|
+
}) => any;
|
|
266
|
+
/**
|
|
267
|
+
* Provide a custom content for the accordion item (you could use the content prop instead).
|
|
268
|
+
* @param {any} item The current item object.
|
|
269
|
+
* @param {any} index The item index in the array of items. Starts at 1.
|
|
270
|
+
* @param {any} expanded A boolean representing the expanded state of the accordion item.
|
|
271
|
+
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
272
|
+
*/
|
|
273
|
+
'content': (_: {
|
|
274
|
+
item: any;
|
|
275
|
+
index: any;
|
|
276
|
+
expanded: any;
|
|
277
|
+
}) => any;
|
|
278
|
+
/**
|
|
279
|
+
* Fallback slot for the content when the `content` slot is not used. Use this to provide custom content for the item.
|
|
280
|
+
* You could also use the `content` prop or the `content` slot instead.
|
|
281
|
+
* @param {any} item The current item object.
|
|
282
|
+
* @param {any} index The item index in the array of items. Starts at 1.
|
|
283
|
+
* @param {any} expanded A boolean representing the expanded state of the accordion item.
|
|
284
|
+
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
285
|
+
*/
|
|
286
|
+
'default': (_: {
|
|
287
|
+
item: any;
|
|
288
|
+
index: any;
|
|
289
|
+
expanded: any;
|
|
290
|
+
}) => any;
|
|
291
|
+
}>;
|
|
240
292
|
export type WAccordion = DefineComponent<WaveAccordionProps, {}, {}, WaveAccordionComputeds, WaveAccordionMethods, {}, {}, WaveAccordionEmits & EmitsOptions, string, PublicProps, ResolveProps<WaveAccordionProps & WaveAccordionEmits, EmitsOptions>, ExtractDefaultPropTypes<WaveAccordionProps>, WaveAccordionSlots>;
|
|
293
|
+
export interface WaveAccordionItemProps {
|
|
294
|
+
/**
|
|
295
|
+
* The title of the accordion item.
|
|
296
|
+
* @property {string} title
|
|
297
|
+
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
298
|
+
*/
|
|
299
|
+
title?: string;
|
|
300
|
+
/**
|
|
301
|
+
* The content of the accordion item.
|
|
302
|
+
* @property {string} content
|
|
303
|
+
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
304
|
+
*/
|
|
305
|
+
content?: string;
|
|
306
|
+
/**
|
|
307
|
+
* Whether this item starts expanded.
|
|
308
|
+
* @property {boolean} expanded
|
|
309
|
+
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
310
|
+
*/
|
|
311
|
+
expanded?: boolean;
|
|
312
|
+
/**
|
|
313
|
+
* Disables interaction with this item.
|
|
314
|
+
* @property {boolean} disabled
|
|
315
|
+
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
316
|
+
*/
|
|
317
|
+
disabled?: boolean;
|
|
318
|
+
/**
|
|
319
|
+
* When <code>true</code>, disables the pointer ripple for this item title only. When omitted, it follows the parent accordion then <code>$waveui.config.ripple</code>.
|
|
320
|
+
* @property {boolean} noRipple
|
|
321
|
+
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
322
|
+
*/
|
|
323
|
+
noRipple?: boolean;
|
|
324
|
+
}
|
|
325
|
+
export interface WaveAccordionItemEmits {
|
|
326
|
+
/**
|
|
327
|
+
* Emitted on accordion item title focus.
|
|
328
|
+
* @param {any} item - The focused accordion item object.
|
|
329
|
+
* @see https://antoniandre.github.io/wave-ui/w-accordion
|
|
330
|
+
*/
|
|
331
|
+
'onFocus'?: (item: any) => void;
|
|
332
|
+
}
|
|
333
|
+
export type WAccordionItem = DefineComponent<WaveAccordionItemProps, {}, {}, {}, {}, {}, {}, WaveAccordionItemEmits & EmitsOptions, string, PublicProps, ResolveProps<WaveAccordionItemProps & WaveAccordionItemEmits, EmitsOptions>, ExtractDefaultPropTypes<WaveAccordionItemProps>, WaveAccordionItemSlots>;
|
|
@@ -0,0 +1,437 @@
|
|
|
1
|
+
import type { ComputedGetter, ComputedOptions, DefineComponent, EmitsOptions, ExtractDefaultPropTypes, MethodOptions, SlotsType } from 'vue';
|
|
2
|
+
import type { PublicProps, ResolveProps } from '../extra-vue-types';
|
|
3
|
+
export interface WAutocompleteItem {
|
|
4
|
+
/**
|
|
5
|
+
* The *default* key to access the label of the item.
|
|
6
|
+
* This can be overridden using the `item-label-key` property.
|
|
7
|
+
* @property {string} label
|
|
8
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete#item-label-key-prop
|
|
9
|
+
*/
|
|
10
|
+
label?: string;
|
|
11
|
+
/**
|
|
12
|
+
* The *default* key to access the value of the item.
|
|
13
|
+
* This can be overridden using the `item-value-key` property.
|
|
14
|
+
* @property {string|number} value
|
|
15
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete#item-value-key-prop
|
|
16
|
+
*/
|
|
17
|
+
value?: string | number;
|
|
18
|
+
/**
|
|
19
|
+
* The *default* key to access the searchable string of the item.
|
|
20
|
+
* This can be an aggregation of multiple fields for richer search.
|
|
21
|
+
* @property {string} searchable
|
|
22
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete#item-searchable-key-prop
|
|
23
|
+
*/
|
|
24
|
+
searchable?: string;
|
|
25
|
+
/**
|
|
26
|
+
* You can also have any additional data attached to the item.
|
|
27
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete#items-prop
|
|
28
|
+
*/
|
|
29
|
+
[key: string]: any;
|
|
30
|
+
}
|
|
31
|
+
export interface WaveAutocompleteProps {
|
|
32
|
+
/**
|
|
33
|
+
* Expecting an array of objects. Each object being an autocomplete option, it should
|
|
34
|
+
* include at least a `label` attribute (or the property specified by `item-label-key`).
|
|
35
|
+
* @property {Array<WAutocompleteItem>} items
|
|
36
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
37
|
+
*/
|
|
38
|
+
items: Array<WAutocompleteItem>;
|
|
39
|
+
/**
|
|
40
|
+
* `value` in Vue 2.
|
|
41
|
+
* The current selection. A single value when not using `multiple`, or an array of values otherwise.
|
|
42
|
+
* Gets updated on item selection/unselection.
|
|
43
|
+
* @property {string|number|Array<string|number>} modelValue
|
|
44
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
45
|
+
*/
|
|
46
|
+
modelValue?: string | number | Array<string | number>;
|
|
47
|
+
/**
|
|
48
|
+
* Provide a placeholder to display when there is no selection and no keyword typed.
|
|
49
|
+
* If a floating label is present, it will be moved above the field when needed.
|
|
50
|
+
* @property {string} placeholder
|
|
51
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
52
|
+
*/
|
|
53
|
+
placeholder?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Sets a visible label for the autocomplete field.
|
|
56
|
+
* @property {string} label
|
|
57
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
58
|
+
*/
|
|
59
|
+
label?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Sets the position of the label. One of: `'inside'`, `'left'`, `'right'`.
|
|
62
|
+
* @property {string} labelPosition - Default: 'inside'
|
|
63
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
64
|
+
*/
|
|
65
|
+
labelPosition?: string;
|
|
66
|
+
/**
|
|
67
|
+
* Prevents moving the label above the field when `labelPosition` is `'inside'`.
|
|
68
|
+
* When a selection is made the static label is replaced by the chip(s).
|
|
69
|
+
* @property {boolean} staticLabel
|
|
70
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
71
|
+
*/
|
|
72
|
+
staticLabel?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Adds an icon on the left inside the autocomplete field.
|
|
75
|
+
* Accepts an icon string: e.g. `mdi mdi-magnify`.
|
|
76
|
+
* @property {string} innerIconLeft
|
|
77
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
78
|
+
*/
|
|
79
|
+
innerIconLeft?: string;
|
|
80
|
+
/**
|
|
81
|
+
* Adds an icon on the right inside the autocomplete field.
|
|
82
|
+
* Accepts an icon string: e.g. `mdi mdi-chevron-down`.
|
|
83
|
+
* @property {string} innerIconRight
|
|
84
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
85
|
+
*/
|
|
86
|
+
innerIconRight?: string;
|
|
87
|
+
/**
|
|
88
|
+
* When set, the dropdown menu only opens when the user starts typing (on keydown),
|
|
89
|
+
* rather than on focus/click.
|
|
90
|
+
* @property {boolean} openOnKeydown
|
|
91
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
92
|
+
*/
|
|
93
|
+
openOnKeydown?: boolean;
|
|
94
|
+
/**
|
|
95
|
+
* Allows multiple items to be selected. The selected items are displayed as chips.
|
|
96
|
+
* @property {boolean} multiple
|
|
97
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
98
|
+
*/
|
|
99
|
+
multiple?: boolean;
|
|
100
|
+
/**
|
|
101
|
+
* When `multiple` is enabled, allows the same item to be selected more than once.
|
|
102
|
+
* @property {boolean} allowDuplicates
|
|
103
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
104
|
+
*/
|
|
105
|
+
allowDuplicates?: boolean;
|
|
106
|
+
/**
|
|
107
|
+
* A string to display in the dropdown when no item matches the current keyword.
|
|
108
|
+
* Defaults to `'No match.'`.
|
|
109
|
+
* @property {string} noMatch
|
|
110
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
111
|
+
*/
|
|
112
|
+
noMatch?: string;
|
|
113
|
+
/**
|
|
114
|
+
* The property name in each item object where to find the item's unique value.
|
|
115
|
+
* @property {string} itemValueKey - Default: 'value'
|
|
116
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
117
|
+
*/
|
|
118
|
+
itemValueKey?: string;
|
|
119
|
+
/**
|
|
120
|
+
* The property name in each item object where to find the item's display label.
|
|
121
|
+
* @property {string} itemLabelKey - Default: 'label'
|
|
122
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
123
|
+
*/
|
|
124
|
+
itemLabelKey?: string;
|
|
125
|
+
/**
|
|
126
|
+
* The property name in each item object where to find the item's searchable string.
|
|
127
|
+
* This may be an aggregation of multiple fields for richer matching (e.g. symbol + name + number).
|
|
128
|
+
* Falls back to `item-label-key` when the property is absent.
|
|
129
|
+
* @property {string} itemSearchableKey - Default: 'searchable'
|
|
130
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
131
|
+
*/
|
|
132
|
+
itemSearchableKey?: string;
|
|
133
|
+
/**
|
|
134
|
+
* Applies a color to the autocomplete field's text and focus indicator.
|
|
135
|
+
* Accepts all Wave UI color names, status colors, or custom colors.
|
|
136
|
+
* @property {string} color - Default: 'primary'
|
|
137
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
138
|
+
* @see https://antoniandre.github.io/wave-ui/colors
|
|
139
|
+
*/
|
|
140
|
+
color?: string;
|
|
141
|
+
/**
|
|
142
|
+
* Applies a color to the autocomplete field's background.
|
|
143
|
+
* Accepts all Wave UI color names, status colors, or custom colors.
|
|
144
|
+
* @property {string} bgColor
|
|
145
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
146
|
+
* @see https://antoniandre.github.io/wave-ui/colors
|
|
147
|
+
*/
|
|
148
|
+
bgColor?: string;
|
|
149
|
+
/**
|
|
150
|
+
* Applies a specific color to the autocomplete field's label.
|
|
151
|
+
* Note that on validation failure, the validation-color takes precedence.
|
|
152
|
+
* @property {string} labelColor - Default: 'primary'
|
|
153
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
154
|
+
* @see https://antoniandre.github.io/wave-ui/colors
|
|
155
|
+
*/
|
|
156
|
+
labelColor?: string;
|
|
157
|
+
/**
|
|
158
|
+
* Applies the outline style: uses the `color` for text and border, no background fill.
|
|
159
|
+
* @property {boolean} outline
|
|
160
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
161
|
+
*/
|
|
162
|
+
outline?: boolean;
|
|
163
|
+
/**
|
|
164
|
+
* Sets a maximum border-radius on the field, giving it a pill/round look.
|
|
165
|
+
* @property {boolean} round
|
|
166
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
167
|
+
*/
|
|
168
|
+
round?: boolean;
|
|
169
|
+
/**
|
|
170
|
+
* Applies a drop shadow to the autocomplete field.
|
|
171
|
+
* @property {boolean} shadow
|
|
172
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
173
|
+
*/
|
|
174
|
+
shadow?: boolean;
|
|
175
|
+
/**
|
|
176
|
+
* Removes the default border-radius, giving the field sharp edges.
|
|
177
|
+
* @property {boolean} tile
|
|
178
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
179
|
+
*/
|
|
180
|
+
tile?: boolean;
|
|
181
|
+
/**
|
|
182
|
+
* Extra-small size preset.
|
|
183
|
+
* @property {boolean} xs
|
|
184
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
185
|
+
*/
|
|
186
|
+
xs?: boolean;
|
|
187
|
+
/**
|
|
188
|
+
* Small size preset.
|
|
189
|
+
* @property {boolean} sm
|
|
190
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
191
|
+
*/
|
|
192
|
+
sm?: boolean;
|
|
193
|
+
/**
|
|
194
|
+
* Medium size preset (default).
|
|
195
|
+
* @property {boolean} md
|
|
196
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
197
|
+
*/
|
|
198
|
+
md?: boolean;
|
|
199
|
+
/**
|
|
200
|
+
* Large size preset.
|
|
201
|
+
* @property {boolean} lg
|
|
202
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
203
|
+
*/
|
|
204
|
+
lg?: boolean;
|
|
205
|
+
/**
|
|
206
|
+
* Extra-large size preset.
|
|
207
|
+
* @property {boolean} xl
|
|
208
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
209
|
+
*/
|
|
210
|
+
xl?: boolean;
|
|
211
|
+
/**
|
|
212
|
+
* Forces dark text and border colors regardless of the application theme.
|
|
213
|
+
* @property {boolean} dark
|
|
214
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
215
|
+
*/
|
|
216
|
+
dark?: boolean;
|
|
217
|
+
/**
|
|
218
|
+
* Forces light text and border colors regardless of the application theme.
|
|
219
|
+
* @property {boolean} light
|
|
220
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
221
|
+
*/
|
|
222
|
+
light?: boolean;
|
|
223
|
+
/**
|
|
224
|
+
* Fits the autocomplete field width to its content rather than growing to fill the container.
|
|
225
|
+
* @property {boolean} fitToContent
|
|
226
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
227
|
+
*/
|
|
228
|
+
fitToContent?: boolean;
|
|
229
|
+
/**
|
|
230
|
+
* Applies a custom CSS class to the floating dropdown menu element.
|
|
231
|
+
* @property {string} menuClass
|
|
232
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
233
|
+
*/
|
|
234
|
+
menuClass?: string;
|
|
235
|
+
/**
|
|
236
|
+
* Passes additional props down to the internal `w-menu` component.
|
|
237
|
+
* For example: `:menu-props="{ appendTo: '.my-scroll-container' }"`.
|
|
238
|
+
* @property {Object} menuProps
|
|
239
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
240
|
+
*/
|
|
241
|
+
menuProps?: Record<string, any>;
|
|
242
|
+
/**
|
|
243
|
+
* Sets an explicit DOM `id` on the input. If omitted, a stable id is auto-generated.
|
|
244
|
+
* @property {string} id
|
|
245
|
+
*/
|
|
246
|
+
id?: string;
|
|
247
|
+
/**
|
|
248
|
+
* Provides a native HTML `name` attribute to the field.
|
|
249
|
+
* @property {string} name
|
|
250
|
+
*/
|
|
251
|
+
name?: string;
|
|
252
|
+
/**
|
|
253
|
+
* Disables the autocomplete field, making it unreactive to user interactions.
|
|
254
|
+
* @property {boolean} disabled
|
|
255
|
+
*/
|
|
256
|
+
disabled?: boolean;
|
|
257
|
+
/**
|
|
258
|
+
* Makes the autocomplete field read-only: its value cannot be changed by user interaction.
|
|
259
|
+
* @property {boolean} readonly
|
|
260
|
+
*/
|
|
261
|
+
readonly?: boolean;
|
|
262
|
+
/**
|
|
263
|
+
* Applies the native HTML `required` attribute.
|
|
264
|
+
* @property {boolean} required
|
|
265
|
+
*/
|
|
266
|
+
required?: boolean;
|
|
267
|
+
/**
|
|
268
|
+
* Sets the `tabindex` on the underlying input element.
|
|
269
|
+
* @property {string} tabindex
|
|
270
|
+
*/
|
|
271
|
+
tabindex?: string;
|
|
272
|
+
/**
|
|
273
|
+
* An array of validator functions for use when the field is inside a `w-form`.
|
|
274
|
+
* Each function receives the current value and should return `true` when valid,
|
|
275
|
+
* or an error string when invalid.
|
|
276
|
+
* @property {Array<Function>} validators
|
|
277
|
+
*/
|
|
278
|
+
validators?: Array<(value: any) => true | string>;
|
|
279
|
+
/**
|
|
280
|
+
* Per-field blur validation override.
|
|
281
|
+
* `true` skips blur validation, `false` forces it even if the parent `w-form` has `no-blur-validation`.
|
|
282
|
+
* When unset, inherits the form's setting.
|
|
283
|
+
* @property {boolean} noBlurValidation
|
|
284
|
+
*/
|
|
285
|
+
noBlurValidation?: boolean;
|
|
286
|
+
}
|
|
287
|
+
export interface WaveAutocompleteEmits {
|
|
288
|
+
/**
|
|
289
|
+
* Emitted each time the selection changes. Updates the v-model value in Vue 2.x only.
|
|
290
|
+
* @param {string|number|Array<string|number>|null} value
|
|
291
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
292
|
+
*/
|
|
293
|
+
'onInput'?: (value: string | number | Array<string | number> | null) => void;
|
|
294
|
+
/**
|
|
295
|
+
* Emitted each time the selection changes. Updates the v-model value in Vue 3.
|
|
296
|
+
* @param {string|number|Array<string|number>|null} value
|
|
297
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
298
|
+
*/
|
|
299
|
+
'onUpdate:modelValue'?: (value: string | number | Array<string | number> | null) => void;
|
|
300
|
+
/**
|
|
301
|
+
* Emitted on input focus.
|
|
302
|
+
* @param {FocusEvent} e
|
|
303
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
304
|
+
*/
|
|
305
|
+
'onFocus'?: (e: FocusEvent) => void;
|
|
306
|
+
/**
|
|
307
|
+
* Emitted on input blur.
|
|
308
|
+
* @param {FocusEvent} e
|
|
309
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
310
|
+
*/
|
|
311
|
+
'onBlur'?: (e: FocusEvent) => void;
|
|
312
|
+
/**
|
|
313
|
+
* Emitted on every keydown event in the input field.
|
|
314
|
+
* @param {KeyboardEvent} e
|
|
315
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
316
|
+
*/
|
|
317
|
+
'onKeydown'?: (e: KeyboardEvent) => void;
|
|
318
|
+
/**
|
|
319
|
+
* Emitted on a dropdown list item click (mouse).
|
|
320
|
+
* @param {WAutocompleteItem} item
|
|
321
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
322
|
+
*/
|
|
323
|
+
'onItemClick'?: (item: WAutocompleteItem) => void;
|
|
324
|
+
/**
|
|
325
|
+
* Emitted when an item is selected (via click or Enter key).
|
|
326
|
+
* @param {WAutocompleteItem} item
|
|
327
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
328
|
+
*/
|
|
329
|
+
'onItemSelect'?: (item: WAutocompleteItem) => void;
|
|
330
|
+
/**
|
|
331
|
+
* Emitted when the extra-item slot entry is selected.
|
|
332
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
333
|
+
*/
|
|
334
|
+
'onExtraItemSelect'?: () => void;
|
|
335
|
+
/**
|
|
336
|
+
* Emitted on click of the left inner icon.
|
|
337
|
+
* @param {MouseEvent} e
|
|
338
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
339
|
+
*/
|
|
340
|
+
'onClick:innerIconLeft'?: (e: MouseEvent) => void;
|
|
341
|
+
/**
|
|
342
|
+
* Emitted on click of the right inner icon.
|
|
343
|
+
* @param {MouseEvent} e
|
|
344
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
345
|
+
*/
|
|
346
|
+
'onClick:innerIconRight'?: (e: MouseEvent) => void;
|
|
347
|
+
}
|
|
348
|
+
export interface WaveAutocompleteComputeds extends ComputedOptions {
|
|
349
|
+
normalizedKeywords: ComputedGetter<string>;
|
|
350
|
+
optimizedItemsForSearch: ComputedGetter<Array<WAutocompleteItem & {
|
|
351
|
+
uid: number;
|
|
352
|
+
searchable: string;
|
|
353
|
+
}>>;
|
|
354
|
+
filteredItems: ComputedGetter<Array<WAutocompleteItem & {
|
|
355
|
+
uid: number;
|
|
356
|
+
}>>;
|
|
357
|
+
highlightedItemIndex: ComputedGetter<number>;
|
|
358
|
+
hasValue: ComputedGetter<boolean>;
|
|
359
|
+
hasLabel: ComputedGetter<boolean>;
|
|
360
|
+
showFloatingLabel: ComputedGetter<boolean>;
|
|
361
|
+
showLabelInside: ComputedGetter<boolean>;
|
|
362
|
+
selectionValue: ComputedGetter<string | number | Array<string | number> | null>;
|
|
363
|
+
presetSize: ComputedGetter<string | null>;
|
|
364
|
+
classes: ComputedGetter<Record<string, boolean>>;
|
|
365
|
+
inputWrapClasses: ComputedGetter<Record<string, boolean>>;
|
|
366
|
+
inputAttrs: ComputedGetter<Record<string, any>>;
|
|
367
|
+
inputEventListeners: ComputedGetter<Record<string, any>>;
|
|
368
|
+
}
|
|
369
|
+
export interface WaveAutocompleteMethods extends MethodOptions {
|
|
370
|
+
/** Normalizes a string for accent-insensitive search. */
|
|
371
|
+
normalize(string: string): string;
|
|
372
|
+
/** Finds an item in the list by value (loose comparison). */
|
|
373
|
+
findItemByValue(value: string | number): WAutocompleteItem | undefined;
|
|
374
|
+
/** Selects an item, updates v-model, and closes the menu on single-select. */
|
|
375
|
+
selectItem(item: WAutocompleteItem & {
|
|
376
|
+
uid: number;
|
|
377
|
+
}): void;
|
|
378
|
+
/** Removes a chip at index `i` (or the last chip when `i` is omitted). */
|
|
379
|
+
unselectItem(i?: number): void;
|
|
380
|
+
/** Selects the extra-item slot entry. */
|
|
381
|
+
selectExtraItem(): void;
|
|
382
|
+
/** Opens the dropdown menu. */
|
|
383
|
+
openMenu(): void;
|
|
384
|
+
/** Closes the dropdown menu. */
|
|
385
|
+
closeMenu(): void;
|
|
386
|
+
/** Validates the field (when inside a w-form). */
|
|
387
|
+
validate(): void;
|
|
388
|
+
}
|
|
389
|
+
export type WaveAutocompleteSlots = SlotsType<{
|
|
390
|
+
/**
|
|
391
|
+
* The label content, when the `label` prop is not flexible enough.
|
|
392
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
393
|
+
*/
|
|
394
|
+
'default': () => any;
|
|
395
|
+
/**
|
|
396
|
+
* Provide a custom template for each selected chip.
|
|
397
|
+
* @param {WAutocompleteItem} item The selected item object.
|
|
398
|
+
* @param {() => void} unselect Call this to remove the chip.
|
|
399
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
400
|
+
*/
|
|
401
|
+
'selection': (_: {
|
|
402
|
+
item: WAutocompleteItem;
|
|
403
|
+
unselect: () => void;
|
|
404
|
+
}) => any;
|
|
405
|
+
/**
|
|
406
|
+
* Provide a custom template for each item in the dropdown list.
|
|
407
|
+
* @param {WAutocompleteItem} item The current item object.
|
|
408
|
+
* @param {boolean} highlighted Whether this item is currently keyboard-highlighted.
|
|
409
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
410
|
+
*/
|
|
411
|
+
'item': (_: {
|
|
412
|
+
item: WAutocompleteItem;
|
|
413
|
+
highlighted: boolean;
|
|
414
|
+
}) => any;
|
|
415
|
+
/**
|
|
416
|
+
* Provide a custom "No match" message displayed when the keyword has no results.
|
|
417
|
+
* Default message: `No match.`
|
|
418
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
419
|
+
*/
|
|
420
|
+
'no-match': () => any;
|
|
421
|
+
/**
|
|
422
|
+
* Provide an extra entry appended at the bottom of the dropdown list (e.g. "Add new…").
|
|
423
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
424
|
+
*/
|
|
425
|
+
'extra-item': () => any;
|
|
426
|
+
/**
|
|
427
|
+
* The left icon content, when the `innerIconLeft` prop is not flexible enough.
|
|
428
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
429
|
+
*/
|
|
430
|
+
'icon-left': () => any;
|
|
431
|
+
/**
|
|
432
|
+
* The right icon content, when the `innerIconRight` prop is not flexible enough.
|
|
433
|
+
* @see https://antoniandre.github.io/wave-ui/w-autocomplete
|
|
434
|
+
*/
|
|
435
|
+
'icon-right': () => any;
|
|
436
|
+
}>;
|
|
437
|
+
export type WAutocomplete = DefineComponent<WaveAutocompleteProps, {}, {}, WaveAutocompleteComputeds, WaveAutocompleteMethods, {}, {}, WaveAutocompleteEmits & EmitsOptions, string, PublicProps, ResolveProps<WaveAutocompleteProps & WaveAutocompleteEmits, EmitsOptions>, ExtractDefaultPropTypes<WaveAutocompleteProps>, WaveAutocompleteSlots>;
|
|
@@ -80,6 +80,13 @@ export interface WaveBreadcrumbsProps {
|
|
|
80
80
|
* @see https://antoniandre.github.io/wave-ui/w-breadcrumbs
|
|
81
81
|
*/
|
|
82
82
|
xl?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* When `true`, disables the pointer ripple on link items for this breadcrumbs only.
|
|
85
|
+
* Global default still follows `$waveui.config.ripple`.
|
|
86
|
+
* @property {boolean} noRipple
|
|
87
|
+
* @see https://antoniandre.github.io/wave-ui/w-breadcrumbs
|
|
88
|
+
*/
|
|
89
|
+
noRipple?: boolean;
|
|
83
90
|
}
|
|
84
91
|
export type WaveBreadcrumbsEmits = {};
|
|
85
92
|
export interface WaveBreadcrumbsComputeds extends ComputedOptions {
|
|
@@ -196,6 +196,13 @@ export interface WaveButtonProps {
|
|
|
196
196
|
* @see https://antoniandre.github.io/wave-ui/w-button
|
|
197
197
|
*/
|
|
198
198
|
xl?: boolean;
|
|
199
|
+
/**
|
|
200
|
+
* When `true`, disables the pointer ripple on this button only.
|
|
201
|
+
* Global default still follows `$waveui.config.ripple`.
|
|
202
|
+
* @property {boolean} noRipple
|
|
203
|
+
* @see https://antoniandre.github.io/wave-ui/w-button
|
|
204
|
+
*/
|
|
205
|
+
noRipple?: boolean;
|
|
199
206
|
}
|
|
200
207
|
export type WaveButtonEmits = {};
|
|
201
208
|
export interface WaveButtonComputeds extends ComputedOptions {
|