wave-ui 3.11.0 → 3.13.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/dist/types/$waveui.d.ts +200 -2
- package/dist/types/components/WInput.d.ts +14 -0
- package/dist/types/components/WSelect.d.ts +80 -35
- package/dist/types/components/WTable.d.ts +130 -32
- package/dist/types/components/WTabs.d.ts +64 -22
- package/dist/types/components/WTextarea.d.ts +14 -0
- package/dist/types/components/index.d.ts +2 -2
- package/dist/wave-ui.cjs.js +1 -1
- package/dist/wave-ui.css +1 -1
- package/dist/wave-ui.es.js +1406 -1355
- package/dist/wave-ui.umd.js +1 -1
- package/package.json +17 -17
- package/src/wave-ui/components/w-alert.vue +1 -1
- package/src/wave-ui/components/w-autocomplete.vue +1 -8
- package/src/wave-ui/components/w-badge.vue +1 -1
- package/src/wave-ui/components/w-button/button.vue +8 -4
- package/src/wave-ui/components/w-icon.vue +0 -1
- package/src/wave-ui/components/w-input.vue +3 -1
- package/src/wave-ui/components/w-select.vue +10 -8
- package/src/wave-ui/components/w-switch.vue +9 -2
- package/src/wave-ui/components/w-table.vue +18 -1
- package/src/wave-ui/components/w-tag.vue +0 -1
- package/src/wave-ui/components/w-textarea.vue +14 -11
- package/src/wave-ui/core.js +1 -1
- package/src/wave-ui/utils/config.js +4 -0
- package/src/wave-ui/utils/dynamic-css.js +6 -3
package/dist/types/$waveui.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { WaveColor } from './colors';
|
|
1
2
|
import { WaveAlertProps } from './components/WAlert';
|
|
2
3
|
export type WaveNotificationType = 'info' | 'success' | 'warning' | 'error';
|
|
3
4
|
export interface $waveui {
|
|
@@ -10,8 +11,205 @@ export interface $waveui {
|
|
|
10
11
|
xl: boolean;
|
|
11
12
|
width: number | null;
|
|
12
13
|
};
|
|
13
|
-
config: {
|
|
14
|
-
|
|
14
|
+
config: {
|
|
15
|
+
/**
|
|
16
|
+
* From version 3.0. Sets the Wave UI root on a custom node (expects a valid CSS selector)
|
|
17
|
+
* @property {string} on - Default: '#app', if not found body will be used
|
|
18
|
+
* @see https://antoniandre.github.io/wave-ui/options-presets-and-waveui
|
|
19
|
+
*/
|
|
20
|
+
on: string;
|
|
21
|
+
/**
|
|
22
|
+
* Breakpoint settings
|
|
23
|
+
* @property breakpoints
|
|
24
|
+
* @see https://antoniandre.github.io/wave-ui/breakpoints#default-breakpoints
|
|
25
|
+
* @see https://antoniandre.github.io/wave-ui/options-presets-and-waveui
|
|
26
|
+
*/
|
|
27
|
+
breakpoints: {
|
|
28
|
+
/**
|
|
29
|
+
* @property {number} xs - Default: 600
|
|
30
|
+
*/
|
|
31
|
+
xs: number;
|
|
32
|
+
/**
|
|
33
|
+
* @property {number} sm - Default: 900
|
|
34
|
+
*/
|
|
35
|
+
sm: number;
|
|
36
|
+
/**
|
|
37
|
+
* @property {number} md - Default: 1200
|
|
38
|
+
*/
|
|
39
|
+
md: number;
|
|
40
|
+
/**
|
|
41
|
+
* @property {number} lg - Default: 1700
|
|
42
|
+
*/
|
|
43
|
+
lg: number;
|
|
44
|
+
/**
|
|
45
|
+
* Xl only needs a greater value than lg but starts from lg and goes to infinity.
|
|
46
|
+
* @property {number} xl - Default: 9999
|
|
47
|
+
*/
|
|
48
|
+
xl: number;
|
|
49
|
+
};
|
|
50
|
+
/**
|
|
51
|
+
* Css settings
|
|
52
|
+
* @property css
|
|
53
|
+
* @see https://antoniandre.github.io/wave-ui/colors
|
|
54
|
+
* @see https://antoniandre.github.io/wave-ui/options-presets-and-waveui
|
|
55
|
+
*/
|
|
56
|
+
css: {
|
|
57
|
+
/**
|
|
58
|
+
* Generate shades for custom colors and status colors.
|
|
59
|
+
* NOTE: the color palette shades are always generated separately from SCSS.
|
|
60
|
+
* @property {boolean} colorShades - Default: true
|
|
61
|
+
*/
|
|
62
|
+
colorShades: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Generate CSS variables for color shades.
|
|
65
|
+
* NOTE: the `colorShades` must be enabled for this to work.
|
|
66
|
+
* @property {boolean} colorShadeCssVariables - Default: false
|
|
67
|
+
*/
|
|
68
|
+
colorShadeCssVariables: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Generate margin and padding utility classes for each breakpoint. E.g. `sm-ma2`
|
|
71
|
+
* @property {boolean} breakpointSpaces - Default: false
|
|
72
|
+
*/
|
|
73
|
+
breakpointSpaces: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Generate helper classes for each breakpoint. E.g. `sm-text-left` `sm-hide`
|
|
76
|
+
* @property {boolean} breakpointLayoutClasses - Default: true
|
|
77
|
+
* @see https://antoniandre.github.io/wave-ui/breakpoints#breakpoint-specific-layout-classes
|
|
78
|
+
*/
|
|
79
|
+
breakpointLayoutClasses: boolean;
|
|
80
|
+
/**
|
|
81
|
+
* How many columns the flexbox based grid will use
|
|
82
|
+
* @property {number} grid - Default: 12
|
|
83
|
+
* @see https://antoniandre.github.io/wave-ui/layout--grid-system
|
|
84
|
+
*/
|
|
85
|
+
grid: number;
|
|
86
|
+
};
|
|
87
|
+
/**
|
|
88
|
+
* Color/Theme settings
|
|
89
|
+
* @property colors
|
|
90
|
+
* @see https://antoniandre.github.io/wave-ui/colors
|
|
91
|
+
* @see https://antoniandre.github.io/wave-ui/colors#defining-your-own-css-colors-in-the-wave-ui-configuration
|
|
92
|
+
*/
|
|
93
|
+
colors: {
|
|
94
|
+
/**
|
|
95
|
+
* The light theme default colors
|
|
96
|
+
* @property light
|
|
97
|
+
*/
|
|
98
|
+
light: {
|
|
99
|
+
/**
|
|
100
|
+
* @property {string} primary - Default: '#234781'
|
|
101
|
+
*/
|
|
102
|
+
primary: string;
|
|
103
|
+
/**
|
|
104
|
+
* @property {string} secondary - Default: '#d3ebff'
|
|
105
|
+
*/
|
|
106
|
+
secondary: string;
|
|
107
|
+
/**
|
|
108
|
+
* @property {string} info - Default: '#3d9ff5'
|
|
109
|
+
*/
|
|
110
|
+
info: string;
|
|
111
|
+
/**
|
|
112
|
+
* @property {string} warning - Default: '#ff8800'
|
|
113
|
+
*/
|
|
114
|
+
warning: string;
|
|
115
|
+
/**
|
|
116
|
+
* @property {string} success - Default: '#54b946'
|
|
117
|
+
*/
|
|
118
|
+
success: string;
|
|
119
|
+
/**
|
|
120
|
+
* @property {string} error - Default: '#f65555'
|
|
121
|
+
*/
|
|
122
|
+
error: string;
|
|
123
|
+
/**
|
|
124
|
+
* Here any additional colors can be defined by the user.
|
|
125
|
+
* @property {string} {string}
|
|
126
|
+
* @see https://antoniandre.github.io/wave-ui/colors#defining-your-own-css-colors-in-the-wave-ui-configuration
|
|
127
|
+
*/
|
|
128
|
+
[key: string]: string;
|
|
129
|
+
};
|
|
130
|
+
/**
|
|
131
|
+
* The dark theme default colors
|
|
132
|
+
* @property dark
|
|
133
|
+
*/
|
|
134
|
+
dark: {
|
|
135
|
+
/**
|
|
136
|
+
* @property {string} primary - Default: '#89b6d2'
|
|
137
|
+
*/
|
|
138
|
+
primary: string;
|
|
139
|
+
/**
|
|
140
|
+
* @property {string} secondary - Default: '#375b6a'
|
|
141
|
+
*/
|
|
142
|
+
secondary: string;
|
|
143
|
+
/**
|
|
144
|
+
* @property {string} info - Default: '#3d9ff5'
|
|
145
|
+
*/
|
|
146
|
+
info: string;
|
|
147
|
+
/**
|
|
148
|
+
* @property {string} warning - Default: '#ff8800'
|
|
149
|
+
*/
|
|
150
|
+
warning: string;
|
|
151
|
+
/**
|
|
152
|
+
* @property {string} success - Default: '#54b946'
|
|
153
|
+
*/
|
|
154
|
+
success: string;
|
|
155
|
+
/**
|
|
156
|
+
* @property {string} error - Default: '#f65555'
|
|
157
|
+
*/
|
|
158
|
+
error: string;
|
|
159
|
+
/**
|
|
160
|
+
* Here any additional colors can be defined by the user.
|
|
161
|
+
* @property {string} {string}
|
|
162
|
+
* @see https://antoniandre.github.io/wave-ui/colors#defining-your-own-css-colors-in-the-wave-ui-configuration
|
|
163
|
+
*/
|
|
164
|
+
[key: string]: string;
|
|
165
|
+
};
|
|
166
|
+
};
|
|
167
|
+
/**
|
|
168
|
+
* The initial theme to use
|
|
169
|
+
* To switch theme while running, call the $waveui.switchTheme('light'|'dark') method.
|
|
170
|
+
* @property {string} theme - Default: 'light'
|
|
171
|
+
* @see https://antoniandre.github.io/wave-ui/options-presets-and-waveui
|
|
172
|
+
*/
|
|
173
|
+
theme: 'light' | 'dark' | 'auto';
|
|
174
|
+
/**
|
|
175
|
+
* Not sure what this does.
|
|
176
|
+
* @property {array} icons - Default: '[]'
|
|
177
|
+
* @see https://antoniandre.github.io/wave-ui/w-icon
|
|
178
|
+
*/
|
|
179
|
+
icons: [];
|
|
180
|
+
/**
|
|
181
|
+
* Whether or not to use icon ligatures
|
|
182
|
+
* @property {boolean} iconsLigature - Default: 'false'
|
|
183
|
+
* @see https://antoniandre.github.io/wave-ui/w-icon
|
|
184
|
+
*/
|
|
185
|
+
iconsLigature: boolean;
|
|
186
|
+
/**
|
|
187
|
+
* Notification manager settings
|
|
188
|
+
* @property align
|
|
189
|
+
* @see https://antoniandre.github.io/wave-ui/w-notification
|
|
190
|
+
*/
|
|
191
|
+
notificationManager: {
|
|
192
|
+
/**
|
|
193
|
+
* Here any additional colors can be defined by the user.
|
|
194
|
+
* @property {string} align - Default: 'right'
|
|
195
|
+
* @see https://antoniandre.github.io/wave-ui/w-notification#align-to-the-left-or-right
|
|
196
|
+
*/
|
|
197
|
+
align: 'right' | 'left';
|
|
198
|
+
/**
|
|
199
|
+
* Here any additional colors can be defined by the user.
|
|
200
|
+
* @property {string|false} transition - Default: 'default'
|
|
201
|
+
* @see https://antoniandre.github.io/wave-ui/w-notification#different-transitions
|
|
202
|
+
*/
|
|
203
|
+
transition: false | 'default' | 'bounce' | 'scale' | 'twist' | 'fade' | 'slide-fade-left' | 'slide-fade-right' | 'slide-fade-up' | 'slide-fade-down';
|
|
204
|
+
};
|
|
205
|
+
/**
|
|
206
|
+
* Component presets
|
|
207
|
+
* @property presets
|
|
208
|
+
* @see https://antoniandre.github.io/wave-ui/options-presets-and-waveui
|
|
209
|
+
*/
|
|
210
|
+
presets: Record<string, Record<string, string | number | boolean>>;
|
|
211
|
+
};
|
|
212
|
+
colors: Record<WaveColor | string, string>;
|
|
15
213
|
preferredTheme: null;
|
|
16
214
|
theme: null;
|
|
17
215
|
_notificationManager: null;
|
|
@@ -334,5 +334,19 @@ export type WaveInputSlots = SlotsType<{
|
|
|
334
334
|
* @see https://antoniandre.github.io/wave-ui/w-input
|
|
335
335
|
*/
|
|
336
336
|
'no-file': () => any;
|
|
337
|
+
/**
|
|
338
|
+
* The left icon, if the `innerIconLeft` prop is not flexible enough.
|
|
339
|
+
* @see https://antoniandre.github.io/wave-ui/w-input
|
|
340
|
+
*/
|
|
341
|
+
'icon-left': (_: {
|
|
342
|
+
inputId: string;
|
|
343
|
+
}) => any;
|
|
344
|
+
/**
|
|
345
|
+
* The right icon, if the `innerIconRight` prop is not flexible enough.
|
|
346
|
+
* @see https://antoniandre.github.io/wave-ui/w-input
|
|
347
|
+
*/
|
|
348
|
+
'icon-right': (_: {
|
|
349
|
+
inputId: string;
|
|
350
|
+
}) => any;
|
|
337
351
|
}>;
|
|
338
352
|
export type WInput = DefineComponent<WaveInputProps, {}, {}, WaveInputComputeds, WaveInputMethods, {}, {}, WaveInputEmits & EmitsOptions, string, PublicProps, ResolveProps<WaveInputProps & WaveInputEmits, EmitsOptions>, ExtractDefaultPropTypes<WaveInputProps>, WaveInputSlots>;
|
|
@@ -1,12 +1,47 @@
|
|
|
1
1
|
import { ComputedGetter, ComputedOptions, DefineComponent, EmitsOptions, ExtractDefaultPropTypes, MethodOptions, SlotsType } from 'vue';
|
|
2
2
|
import { PublicProps, ResolveProps } from '../extra-vue-types';
|
|
3
|
+
export interface WSelectDropdownItem {
|
|
4
|
+
/**
|
|
5
|
+
* The *default* key to access the label of the item.
|
|
6
|
+
* This can be overriden using the `item-label-key` property.
|
|
7
|
+
* @property {string} label
|
|
8
|
+
* @see https://antoniandre.github.io/wave-ui/w-select#item-label-key-prop
|
|
9
|
+
*/
|
|
10
|
+
label?: string;
|
|
11
|
+
/**
|
|
12
|
+
* The *default* key to access the color of the item.
|
|
13
|
+
* This can be overriden using the `item-color-key` property.
|
|
14
|
+
* @property {string} color
|
|
15
|
+
* @see https://antoniandre.github.io/wave-ui/w-select#item-color-key-prop
|
|
16
|
+
*/
|
|
17
|
+
color?: string;
|
|
18
|
+
/**
|
|
19
|
+
* The *default* key to access the vlue of the item.
|
|
20
|
+
* This can be overriden using the `item-value-key` property.
|
|
21
|
+
* @property {string} value
|
|
22
|
+
* @see https://antoniandre.github.io/wave-ui/w-select#item-value-key-prop
|
|
23
|
+
*/
|
|
24
|
+
value?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Whether or not this list item is disabled.
|
|
27
|
+
* @property {boolean} disabled
|
|
28
|
+
* @see https://antoniandre.github.io/wave-ui/w-select#disabled-and-readonly
|
|
29
|
+
*/
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* You can also have any additional data attached to the item.
|
|
33
|
+
* It will not affect the default behavior of the select component.
|
|
34
|
+
* @see https://antoniandre.github.io/wave-ui/w-select#items-prop
|
|
35
|
+
*/
|
|
36
|
+
[key: string]: any;
|
|
37
|
+
}
|
|
3
38
|
export interface WaveSelectProps {
|
|
4
39
|
/**
|
|
5
40
|
* Expecting an array of objects. Each object being a select list item, it should include at least a `label` attribute.
|
|
6
|
-
* @property {Array<
|
|
41
|
+
* @property {Array<WSelectDropdownItem} [items]
|
|
7
42
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
8
43
|
*/
|
|
9
|
-
items: Array<
|
|
44
|
+
items: Array<WSelectDropdownItem>;
|
|
10
45
|
/**
|
|
11
46
|
* ``value` in Vue 2.`
|
|
12
47
|
* The current selection of the select field.
|
|
@@ -180,52 +215,52 @@ export interface WaveSelectProps {
|
|
|
180
215
|
export interface WaveSelectEmits {
|
|
181
216
|
/**
|
|
182
217
|
* Emitted each time the selected item(s) changes.<br>Updates the v-model value in Vue 2.x only.
|
|
183
|
-
* @param {any}
|
|
218
|
+
* @param {any} selectedValues - The new selected value(s). Array if <code>multiple</code> is set to <code>true</code>, single value otherwise.
|
|
184
219
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
185
220
|
*/
|
|
186
|
-
'onInput'?: (
|
|
221
|
+
'onInput'?: (selectedValues: any) => void;
|
|
187
222
|
/**
|
|
188
223
|
* Emitted each time the selected item(s) changes.<br>Updates the v-model value in Vue 3 only.
|
|
189
|
-
* @param {any}
|
|
224
|
+
* @param {any} selectedValues - The new selected value(s). Array if <code>multiple</code> is set to <code>true</code>, single value otherwise.
|
|
190
225
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
191
226
|
*/
|
|
192
|
-
'onUpdate:modelValue'?: (
|
|
227
|
+
'onUpdate:modelValue'?: (selectedValues: any) => void;
|
|
193
228
|
/**
|
|
194
229
|
* Emitted on select focus.
|
|
195
|
-
* @param {
|
|
230
|
+
* @param {Event} e - The associated focus DOM event.
|
|
196
231
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
197
232
|
*/
|
|
198
|
-
'onFocus'?: (
|
|
233
|
+
'onFocus'?: (e: Event) => void;
|
|
199
234
|
/**
|
|
200
235
|
* Emitted on select blur.
|
|
201
|
-
* @param {
|
|
236
|
+
* @param {Event} e - The associated blur DOM event.
|
|
202
237
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
203
238
|
*/
|
|
204
|
-
'onBlur'?: (
|
|
239
|
+
'onBlur'?: (e: Event) => void;
|
|
205
240
|
/**
|
|
206
241
|
* Emitted on select list item click.
|
|
207
|
-
* @param {
|
|
242
|
+
* @param {WSelectDropdownItem} item - The clicked item object.
|
|
208
243
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
209
244
|
*/
|
|
210
|
-
'onItemClick'?: (
|
|
245
|
+
'onItemClick'?: (item: WSelectDropdownItem) => void;
|
|
211
246
|
/**
|
|
212
247
|
* Emitted on list item select (click or <kbd>enter</kbd> keydown).
|
|
213
|
-
* @param {
|
|
248
|
+
* @param {WSelectDropdownItem} item - The selected item object.
|
|
214
249
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
215
250
|
*/
|
|
216
|
-
'onItemSelect'?: (
|
|
251
|
+
'onItemSelect'?: (item: WSelectDropdownItem) => void;
|
|
217
252
|
/**
|
|
218
253
|
* Emitted on click of the left inner icon, if any.
|
|
219
|
-
* @param {
|
|
254
|
+
* @param {Event} e - The associated click DOM event.
|
|
220
255
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
221
256
|
*/
|
|
222
|
-
'onClick:innerIconLeft'?: (
|
|
257
|
+
'onClick:innerIconLeft'?: (e: Event) => void;
|
|
223
258
|
/**
|
|
224
259
|
* Emitted on click of the right inner icon, if any.
|
|
225
|
-
* @param {
|
|
260
|
+
* @param {Event} e - The associated click DOM event.
|
|
226
261
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
227
262
|
*/
|
|
228
|
-
'onClick:innerIconRight'?: (
|
|
263
|
+
'onClick:innerIconRight'?: (e: Event) => void;
|
|
229
264
|
}
|
|
230
265
|
export interface WaveSelectComputeds extends ComputedOptions {
|
|
231
266
|
/**
|
|
@@ -330,42 +365,52 @@ export type WaveSelectSlots = SlotsType<{
|
|
|
330
365
|
'default': () => any;
|
|
331
366
|
/**
|
|
332
367
|
* Provide a custom template for the selection string.
|
|
333
|
-
* @param {
|
|
368
|
+
* @param {WSelectDropdownItem} item The selected item(s) object(s). May be an array if `multiple` is `true`, or a single object otherwise.
|
|
334
369
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
335
370
|
*/
|
|
336
371
|
'selection': (_: {
|
|
337
|
-
item:
|
|
372
|
+
item: WSelectDropdownItem;
|
|
338
373
|
}) => any;
|
|
339
374
|
/**
|
|
340
375
|
* `x` is an integer starting at `1`.
|
|
341
376
|
* Provide a custom content for a single select list item: the item at the index `x`.
|
|
342
|
-
* @param {
|
|
343
|
-
* @param {
|
|
344
|
-
* @param {
|
|
377
|
+
* @param {WSelectDropdownItem} item The current item object.
|
|
378
|
+
* @param {boolean} selected A Boolean representing the selected state of the list item.
|
|
379
|
+
* @param {number} index The index of the list item.
|
|
345
380
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
346
381
|
*/
|
|
347
382
|
'item.x': (_: {
|
|
348
|
-
item:
|
|
349
|
-
selected:
|
|
350
|
-
index:
|
|
383
|
+
item: WSelectDropdownItem;
|
|
384
|
+
selected: boolean;
|
|
385
|
+
index: number;
|
|
351
386
|
}) => any;
|
|
352
387
|
/**
|
|
353
388
|
* Provide a common custom template for all the select list items.
|
|
354
|
-
* @param {
|
|
355
|
-
* @param {
|
|
356
|
-
* @param {
|
|
389
|
+
* @param {WSelectDropdownItem} item The current item object.
|
|
390
|
+
* @param {boolean} selected A Boolean representing the selected state of the list item.
|
|
391
|
+
* @param {number} index The index of the list item.
|
|
357
392
|
* @see https://antoniandre.github.io/wave-ui/w-select
|
|
358
393
|
*/
|
|
359
394
|
'item': (_: {
|
|
360
|
-
item:
|
|
361
|
-
selected:
|
|
362
|
-
index:
|
|
395
|
+
item: WSelectDropdownItem;
|
|
396
|
+
selected: boolean;
|
|
397
|
+
index: number;
|
|
363
398
|
}) => any;
|
|
399
|
+
/**
|
|
400
|
+
* The left icon, if the `innerIconLeft` prop is not flexible enough.
|
|
401
|
+
* @see https://antoniandre.github.io/wave-ui/w-input
|
|
402
|
+
*/
|
|
403
|
+
'icon-left': () => any;
|
|
404
|
+
/**
|
|
405
|
+
* The right icon, if the `innerIconRight` prop is not flexible enough.
|
|
406
|
+
* @see https://antoniandre.github.io/wave-ui/w-input
|
|
407
|
+
*/
|
|
408
|
+
'icon-right': () => any;
|
|
364
409
|
} & {
|
|
365
410
|
[k in `item${number}`]: (_: {
|
|
366
|
-
item:
|
|
367
|
-
selected:
|
|
368
|
-
index:
|
|
411
|
+
item: WSelectDropdownItem;
|
|
412
|
+
selected: boolean;
|
|
413
|
+
index: number;
|
|
369
414
|
}) => any;
|
|
370
415
|
}>;
|
|
371
416
|
export type WSelect = DefineComponent<WaveSelectProps, {}, {}, WaveSelectComputeds, WaveSelectMethods, {}, {}, WaveSelectEmits & EmitsOptions, string, PublicProps, ResolveProps<WaveSelectProps & WaveSelectEmits, EmitsOptions>, ExtractDefaultPropTypes<WaveSelectProps>, WaveSelectSlots>;
|
|
@@ -1,5 +1,69 @@
|
|
|
1
1
|
import { ComputedGetter, ComputedOptions, DefineComponent, EmitsOptions, ExtractDefaultPropTypes, MethodOptions, SlotsType } from 'vue';
|
|
2
2
|
import { PublicProps, ResolveProps } from '../extra-vue-types';
|
|
3
|
+
export interface WTableHeader {
|
|
4
|
+
/**
|
|
5
|
+
* The label to display as the column header.
|
|
6
|
+
* @property {string} [label] - Default: ''
|
|
7
|
+
*/
|
|
8
|
+
label?: string;
|
|
9
|
+
/**
|
|
10
|
+
* A unique identifier that should be found in each row object, and that will be used for sorting.
|
|
11
|
+
* @property {string} key
|
|
12
|
+
*/
|
|
13
|
+
key: string;
|
|
14
|
+
/**
|
|
15
|
+
* Whether this column is sortable or not.
|
|
16
|
+
* @property {boolean} [sortable] - Default: true
|
|
17
|
+
*/
|
|
18
|
+
sortable?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Defines the width of the column in pixel if no unit is given, or in the unit you want (E.g. 30, 30px, 2em, 20%, etc.)
|
|
21
|
+
* @property {number | string} [width] - Default: ''
|
|
22
|
+
*/
|
|
23
|
+
width?: number | string;
|
|
24
|
+
/**
|
|
25
|
+
* A unique identifier that should be found in each row object, and that will be used for sorting.
|
|
26
|
+
* @property {string} [align] - Default: left
|
|
27
|
+
*/
|
|
28
|
+
align?: 'left' | 'center' | 'right';
|
|
29
|
+
/** If needed, you can also add any custom property. */
|
|
30
|
+
[key: string]: any;
|
|
31
|
+
}
|
|
32
|
+
export interface WTablePagination {
|
|
33
|
+
/**
|
|
34
|
+
* Number of rows to show per page
|
|
35
|
+
* @property {number} [itemsPerPage] - Default: 20
|
|
36
|
+
*/
|
|
37
|
+
itemsPerPage?: number;
|
|
38
|
+
/**
|
|
39
|
+
* An array of the options to list in the items per page select.
|
|
40
|
+
* @property {Array<number | { value: number, label: string }>} [itemsPerPageOptions] - Default: [20, 100, { label: 'All', value: 0 }]
|
|
41
|
+
*/
|
|
42
|
+
itemsPerPageOptions?: Array<number | {
|
|
43
|
+
value: number;
|
|
44
|
+
label: string;
|
|
45
|
+
}>;
|
|
46
|
+
/**
|
|
47
|
+
* The start of the results range
|
|
48
|
+
* @property {number} [start] - Default: 1
|
|
49
|
+
*/
|
|
50
|
+
start?: number;
|
|
51
|
+
/**
|
|
52
|
+
* The end of the results range
|
|
53
|
+
* @property {number} [end] - Default: start - 1 + total
|
|
54
|
+
*/
|
|
55
|
+
end?: number;
|
|
56
|
+
/**
|
|
57
|
+
* The current page to display [itemsPerPage] number of rows
|
|
58
|
+
* @property {number} [page]
|
|
59
|
+
*/
|
|
60
|
+
page?: number;
|
|
61
|
+
/**
|
|
62
|
+
* The total number of items available in the table
|
|
63
|
+
* @property {number} [total]
|
|
64
|
+
*/
|
|
65
|
+
total?: number;
|
|
66
|
+
}
|
|
3
67
|
export interface WaveTableProps {
|
|
4
68
|
/**
|
|
5
69
|
* An array of objects that defines the table data.
|
|
@@ -15,7 +79,7 @@ export interface WaveTableProps {
|
|
|
15
79
|
* @property {Array<any>} [headers]
|
|
16
80
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
17
81
|
*/
|
|
18
|
-
headers: Array<
|
|
82
|
+
headers: Array<WTableHeader>;
|
|
19
83
|
/**
|
|
20
84
|
* The table headings will be hidden. Only the table data will be visible.
|
|
21
85
|
* @property {boolean} noHeaders
|
|
@@ -71,19 +135,30 @@ export interface WaveTableProps {
|
|
|
71
135
|
*/
|
|
72
136
|
filter?: (item: any, index: number) => void;
|
|
73
137
|
/**
|
|
74
|
-
*
|
|
138
|
+
* Called to fetch data from the server for pagination
|
|
139
|
+
* The function receives 1 parameters:
|
|
140
|
+
* `Param 1:` the `iinfo` object for the current page, start, end, total, itemsPerPage, sorting.
|
|
75
141
|
* @property {} fetch
|
|
76
142
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
77
143
|
*/
|
|
78
|
-
fetch?: (
|
|
144
|
+
fetch?: (info: {
|
|
145
|
+
page: number;
|
|
146
|
+
start: number;
|
|
147
|
+
end: number;
|
|
148
|
+
total: number;
|
|
149
|
+
itemsPerPage: number;
|
|
150
|
+
sorting: Array<string>;
|
|
151
|
+
}) => void;
|
|
79
152
|
/**
|
|
80
|
-
* Expand some rows by default, on table load. You can provide the rows to expand in an array of `id`.
|
|
153
|
+
* Expand some rows by default, on table load. You can provide the rows to expand in an array of `id`.
|
|
154
|
+
* If you prefer another key than `id`, you can use the `uid-key` prop to set another key.
|
|
81
155
|
* @property {Array<any>} expandedRows
|
|
82
156
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
83
157
|
*/
|
|
84
158
|
expandedRows?: Array<any>;
|
|
85
159
|
/**
|
|
86
|
-
* Select some rows by default, on table load. You can provide the rows to select in an array of `id`.
|
|
160
|
+
* Select some rows by default, on table load. You can provide the rows to select in an array of `id`.
|
|
161
|
+
* If you prefer another key than `id`, you can use the `uid-key` prop to set another key.
|
|
87
162
|
* @property {Array<any>} selectedRows
|
|
88
163
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
89
164
|
*/
|
|
@@ -96,14 +171,16 @@ export interface WaveTableProps {
|
|
|
96
171
|
forceSelection?: boolean;
|
|
97
172
|
/**
|
|
98
173
|
* In order to keep the same row selected after sorting or filtering, each row is assigned a unique identifier.
|
|
99
|
-
* By default the expanded rows array will use an `id` key, if present in the item object, or will assign an
|
|
174
|
+
* By default the expanded rows array will use an `id` key, if present in the item object, or will assign an
|
|
175
|
+
* internal unique ID otherwise.
|
|
100
176
|
* If you want, you can override the default unique ID key (when internally needed) with this prop.
|
|
101
177
|
* @property {string} uidKey - Default: 'id'
|
|
102
178
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
103
179
|
*/
|
|
104
180
|
uidKey?: string;
|
|
105
181
|
/**
|
|
106
|
-
* When a number is given (in pixel), any device screen width under this number will display the table in mobile layout.
|
|
182
|
+
* When a number is given (in pixel), any device screen width under this number will display the table in mobile layout.
|
|
183
|
+
* Leave undefined to disable.
|
|
107
184
|
* @property {number} mobileBreakpoint - Default: 0
|
|
108
185
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
109
186
|
*/
|
|
@@ -132,58 +209,65 @@ export interface WaveTableProps {
|
|
|
132
209
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
133
210
|
*/
|
|
134
211
|
itemsPerPageOptions?: any;
|
|
212
|
+
/**
|
|
213
|
+
* Pagination options and configuration
|
|
214
|
+
* @property {WTablePagination} itemsPerPageOptions
|
|
215
|
+
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
216
|
+
* @see https://antoniandre.github.io/wave-ui/w-table#pagination-prop
|
|
217
|
+
*/
|
|
218
|
+
pagination?: WTablePagination;
|
|
135
219
|
}
|
|
136
220
|
export interface WaveTableEmits {
|
|
137
221
|
/**
|
|
138
|
-
*
|
|
139
|
-
* @param {any}
|
|
140
|
-
* @param {
|
|
141
|
-
* @param {
|
|
142
|
-
* @param {
|
|
222
|
+
* This event fires on both selecting and unselecting a row (so you need only one listener for both), and a boolean is returned to know the selected state.
|
|
223
|
+
* @param {any} item - The associated row item object.
|
|
224
|
+
* @param {number} index - The index of the row being selected (starts at 0) in the current filtering state.
|
|
225
|
+
* @param {boolean} selected - A boolean representing the selected state of the clicked row.
|
|
226
|
+
* @param {Array} selectedRows - An array containing all the expanded rows objects.
|
|
143
227
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
144
228
|
*/
|
|
145
|
-
'onRowSelect'?: (
|
|
229
|
+
'onRowSelect'?: (item: any, index: number, selected: boolean, selectedRows: Array<any>) => void;
|
|
146
230
|
/**
|
|
147
|
-
*
|
|
148
|
-
* @param {any}
|
|
149
|
-
* @param {
|
|
150
|
-
* @param {
|
|
151
|
-
* @param {
|
|
231
|
+
* This event fires on both expanding and collapsing a row (so you need only one listener for both), and a boolean is returned to know the expanded state.
|
|
232
|
+
* @param {any} item - The associated row item object.
|
|
233
|
+
* @param {number} index - The index of the row being expanded (starts at 0) in the current filtering state.
|
|
234
|
+
* @param {boolean} expanded - A boolean representing the expanded state of the clicked row.
|
|
235
|
+
* @param {Array} expandedRows - An array containing all the expanded rows objects.
|
|
152
236
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
153
237
|
*/
|
|
154
|
-
'onRowExpand'?: (
|
|
238
|
+
'onRowExpand'?: (item: any, index: number, expanded: boolean, expandedRows: Array<any>) => void;
|
|
155
239
|
/**
|
|
156
|
-
*
|
|
157
|
-
* @param {any}
|
|
158
|
-
* @param {
|
|
240
|
+
* This event fires when a row is clicked.
|
|
241
|
+
* @param {any} item - The associated row item object.
|
|
242
|
+
* @param {number} index - The index of the row being clicked (starts at 0) in the current filtering state.
|
|
159
243
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
160
244
|
*/
|
|
161
|
-
'onRowClick'?: (
|
|
245
|
+
'onRowClick'?: (item: any, index: number) => void;
|
|
162
246
|
/**
|
|
163
247
|
* Emitted every time the sorting string is updated by a user interaction.
|
|
164
|
-
* @param {
|
|
248
|
+
* @param {string} sortingString - The currently applied sorting on the table rows. E.g. <code>+firstName</code>
|
|
165
249
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
166
250
|
*/
|
|
167
|
-
'onUpdate:sort'?: (
|
|
251
|
+
'onUpdate:sort'?: (sortingString: string) => void;
|
|
168
252
|
/**
|
|
169
253
|
* Emitted every time the selected-rows array changes. To be used with <code>:selected-rows.sync</code> in Vue 2 or <code>v-model:selected-rows</code> in Vue 3.
|
|
170
|
-
* @param {
|
|
254
|
+
* @param {Array} selectedRows - The current array of selected rows.
|
|
171
255
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
172
256
|
*/
|
|
173
|
-
'onUpdate:selectedRows'?: (
|
|
257
|
+
'onUpdate:selectedRows'?: (selectedRows: Array<any>) => void;
|
|
174
258
|
/**
|
|
175
259
|
* Emitted every time the expanded-rows array changes. To be used with <code>:expanded-rows.sync</code> in Vue 2 or <code>v-model:expanded-rows</code> in Vue 3.
|
|
176
|
-
* @param {
|
|
260
|
+
* @param {Array} expandedRows - The current array of expanded rows.
|
|
177
261
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
178
262
|
*/
|
|
179
|
-
'onUpdate:expandedRows'?: (
|
|
263
|
+
'onUpdate:expandedRows'?: (expandedRows: Array<any>) => void;
|
|
180
264
|
/**
|
|
181
265
|
* Emitted on mouseup after a column has been resized.
|
|
182
|
-
* @param {
|
|
183
|
-
* @param {
|
|
266
|
+
* @param {number} index - The index (starting from 0) of the resizer that was moved (also the index of the column on the left of the resizer).
|
|
267
|
+
* @param {Array} widths - An array containing all the new widths of the columns after resizing.
|
|
184
268
|
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
185
269
|
*/
|
|
186
|
-
'onColumnResize'?: (
|
|
270
|
+
'onColumnResize'?: (index: number, widths: Array<any>) => void;
|
|
187
271
|
}
|
|
188
272
|
export interface WaveTableComputeds extends ComputedOptions {
|
|
189
273
|
/**
|
|
@@ -365,6 +449,20 @@ export type WaveTableSlots = SlotsType<{
|
|
|
365
449
|
label: any;
|
|
366
450
|
index: any;
|
|
367
451
|
}) => any;
|
|
452
|
+
/**
|
|
453
|
+
* Provide a custom item cell template for a given index or table header (each <td> of each item row).
|
|
454
|
+
* @param {any} item The full item object of the row being rendered.
|
|
455
|
+
* @param {any} header The related header object of the current column of the cell being rendered.
|
|
456
|
+
* @param {any} label The content of the cell being rendered.
|
|
457
|
+
* @param {any} index The index of the cell in the row being rendered. Starts at 1.
|
|
458
|
+
* @see https://antoniandre.github.io/wave-ui/w-table
|
|
459
|
+
*/
|
|
460
|
+
[key: `item-cell.${string | number}`]: (_: {
|
|
461
|
+
item: any;
|
|
462
|
+
header: any;
|
|
463
|
+
label: any;
|
|
464
|
+
index: any;
|
|
465
|
+
}) => any;
|
|
368
466
|
/**
|
|
369
467
|
* Provide a custom template for the row expansions (to display in an expanded row).
|
|
370
468
|
* @param {any} item The full item object of the row being rendered.
|