@progress/kendo-vue-buttons 8.0.3-develop.2 → 8.0.3-develop.4
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/Button.d.ts +273 -0
- package/ButtonGroup.d.ts +58 -0
- package/ButtonGroupInterface.d.ts +37 -0
- package/ButtonInterface.d.ts +57 -0
- package/ButtonWrap.d.ts +12 -0
- package/Chip/Chip.d.ts +351 -0
- package/Chip/ChipList.d.ts +278 -0
- package/Chip/ChipList.mjs +4 -4
- package/Chip/data-reducer.d.ts +28 -0
- package/Chip/data-reducer.js +1 -1
- package/Chip/data-reducer.mjs +2 -2
- package/Chip/focus-reducer.d.ts +31 -0
- package/Chip/focus-reducer.js +1 -1
- package/Chip/focus-reducer.mjs +2 -2
- package/Chip/selection-reducer.d.ts +36 -0
- package/Chip/selection-reducer.js +1 -1
- package/Chip/selection-reducer.mjs +3 -3
- package/FloatingActionButton/FloatingActionButton.d.ts +151 -0
- package/FloatingActionButton/FloatingActionButtonItem.d.ts +134 -0
- package/FloatingActionButton/interfaces/FloatingActionButtonHandle.d.ts +20 -0
- package/FloatingActionButton/interfaces/FloatingActionButtonPopupSettings.d.ts +31 -0
- package/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts +240 -0
- package/FloatingActionButton/models/align-offset.d.ts +27 -0
- package/FloatingActionButton/models/align.d.ts +34 -0
- package/FloatingActionButton/models/events.d.ts +29 -0
- package/FloatingActionButton/models/position-mode.d.ts +16 -0
- package/FloatingActionButton/models/size.d.ts +17 -0
- package/FloatingActionButton/models/theme-color.d.ts +24 -0
- package/FloatingActionButton/utils.d.ts +34 -0
- package/ListButton/ButtonItem.d.ts +57 -0
- package/ListButton/DropDownButton.d.ts +168 -0
- package/ListButton/SplitButton.d.ts +174 -0
- package/ListButton/models/ButtonItemInterface.d.ts +36 -0
- package/ListButton/models/ListButtonProps.d.ts +311 -0
- package/ListButton/models/PopupSettings.d.ts +31 -0
- package/ListButton/models/events.d.ts +118 -0
- package/ListButton/utils/navigation.d.ts +12 -0
- package/ListButton/utils/popup.d.ts +16 -0
- package/SpeechToText/SpeechToTextButton.d.ts +242 -0
- package/SpeechToText/SpeechToTextButton.js +1 -1
- package/SpeechToText/SpeechToTextButton.mjs +2 -2
- package/dist/cdn/js/kendo-vue-buttons.js +1 -1
- package/index.d.mts +31 -2942
- package/index.d.ts +31 -2942
- package/models/ButtonBlurEvent.d.ts +16 -0
- package/models/ButtonFocusEvent.d.ts +16 -0
- package/models/events.d.ts +96 -0
- package/package-metadata.d.ts +12 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +13 -7
- package/toolbar/Toolbar.d.ts +170 -0
- package/toolbar/interfaces/ToolbarOverflowProps.d.ts +48 -0
- package/toolbar/interfaces/ToolbarProps.d.ts +93 -0
- package/toolbar/messages/index.d.ts +27 -0
- package/toolbar/tools/ToolbarItem.d.ts +14 -0
- package/toolbar/tools/ToolbarOverflowSection.d.ts +50 -0
- package/toolbar/tools/ToolbarScrollButton.d.ts +47 -0
- package/toolbar/tools/ToolbarScrollable.d.ts +58 -0
- package/toolbar/tools/ToolbarSeparator.d.ts +34 -0
- package/toolbar/tools/ToolbarSpacer.d.ts +48 -0
- package/util.d.ts +37 -0
package/index.d.ts
CHANGED
|
@@ -5,2945 +5,34 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
type
|
|
39
|
-
default: boolean;
|
|
40
|
-
};
|
|
41
|
-
icon: {
|
|
42
|
-
type: PropType<string>;
|
|
43
|
-
default: () => any;
|
|
44
|
-
};
|
|
45
|
-
svgIcon: PropType<SVGIcon>;
|
|
46
|
-
iconSize: {
|
|
47
|
-
type: PropType<string>;
|
|
48
|
-
};
|
|
49
|
-
iconClass: {
|
|
50
|
-
type: PropType<string>;
|
|
51
|
-
default: () => any;
|
|
52
|
-
};
|
|
53
|
-
imageUrl: {
|
|
54
|
-
type: PropType<string>;
|
|
55
|
-
default: () => any;
|
|
56
|
-
};
|
|
57
|
-
imageAlt: PropType<string>;
|
|
58
|
-
disabled: {
|
|
59
|
-
type: PropType<boolean>;
|
|
60
|
-
default: any;
|
|
61
|
-
};
|
|
62
|
-
size: PropType<"small" | "medium" | "large">;
|
|
63
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
64
|
-
fillMode: PropType<"flat" | "link" | "solid" | "outline">;
|
|
65
|
-
themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
|
|
66
|
-
tabIndex: PropType<number>;
|
|
67
|
-
accessKey: PropType<string>;
|
|
68
|
-
id: PropType<string>;
|
|
69
|
-
type: PropType<string>;
|
|
70
|
-
role: PropType<string>;
|
|
71
|
-
}>, {}, {
|
|
72
|
-
currentActive: any;
|
|
73
|
-
}, {
|
|
74
|
-
computedSelected(): boolean;
|
|
75
|
-
buttonClasses(): {
|
|
76
|
-
[x: string]: any;
|
|
77
|
-
'k-icon-button': boolean;
|
|
78
|
-
'k-disabled': any;
|
|
79
|
-
'k-selected': any;
|
|
80
|
-
'k-rtl': boolean;
|
|
81
|
-
};
|
|
82
|
-
}, {
|
|
83
|
-
focus(e: any): void;
|
|
84
|
-
toggleIfApplicable(): void;
|
|
85
|
-
handleClick(event: any): void;
|
|
86
|
-
handleMouseDown(event: any): void;
|
|
87
|
-
handlePointerDown(event: any): void;
|
|
88
|
-
handleMouseUp(event: any): void;
|
|
89
|
-
handlePointerUp(event: any): void;
|
|
90
|
-
handleFocus(event: FocusEvent): void;
|
|
91
|
-
handleBlur(event: FocusEvent): void;
|
|
92
|
-
handleKeypress(event: any): void;
|
|
93
|
-
handleKeydown(event: any): void;
|
|
94
|
-
handleContextmenu(event: any): void;
|
|
95
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
96
|
-
click: (event: Event) => true;
|
|
97
|
-
mousedown: (event: MouseEvent) => true;
|
|
98
|
-
mouseup: (event: MouseEvent) => true;
|
|
99
|
-
pointerdown: (event: PointerEvent) => true;
|
|
100
|
-
pointerup: (event: PointerEvent) => true;
|
|
101
|
-
focus: (event: ButtonFocusEvent) => true;
|
|
102
|
-
blur: (event: ButtonBlurEvent) => true;
|
|
103
|
-
keypress: (event: KeyboardEvent) => true;
|
|
104
|
-
keydown: (event: KeyboardEvent) => true;
|
|
105
|
-
contextmenu: (event: MouseEvent) => true;
|
|
106
|
-
}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
107
|
-
ariaLabel: PropType<string>;
|
|
108
|
-
ariaPressed: PropType<boolean>;
|
|
109
|
-
title: PropType<string>;
|
|
110
|
-
dir: PropType<string>;
|
|
111
|
-
selected: {
|
|
112
|
-
type: PropType<boolean>;
|
|
113
|
-
default: any;
|
|
114
|
-
};
|
|
115
|
-
togglable: {
|
|
116
|
-
type: PropType<boolean>;
|
|
117
|
-
default: boolean;
|
|
118
|
-
};
|
|
119
|
-
icon: {
|
|
120
|
-
type: PropType<string>;
|
|
121
|
-
default: () => any;
|
|
122
|
-
};
|
|
123
|
-
svgIcon: PropType<SVGIcon>;
|
|
124
|
-
iconSize: {
|
|
125
|
-
type: PropType<string>;
|
|
126
|
-
};
|
|
127
|
-
iconClass: {
|
|
128
|
-
type: PropType<string>;
|
|
129
|
-
default: () => any;
|
|
130
|
-
};
|
|
131
|
-
imageUrl: {
|
|
132
|
-
type: PropType<string>;
|
|
133
|
-
default: () => any;
|
|
134
|
-
};
|
|
135
|
-
imageAlt: PropType<string>;
|
|
136
|
-
disabled: {
|
|
137
|
-
type: PropType<boolean>;
|
|
138
|
-
default: any;
|
|
139
|
-
};
|
|
140
|
-
size: PropType<"small" | "medium" | "large">;
|
|
141
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
142
|
-
fillMode: PropType<"flat" | "link" | "solid" | "outline">;
|
|
143
|
-
themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
|
|
144
|
-
tabIndex: PropType<number>;
|
|
145
|
-
accessKey: PropType<string>;
|
|
146
|
-
id: PropType<string>;
|
|
147
|
-
type: PropType<string>;
|
|
148
|
-
role: PropType<string>;
|
|
149
|
-
}>> & Readonly<{
|
|
150
|
-
onClick?: (event: Event) => any;
|
|
151
|
-
onBlur?: (event: ButtonBlurEvent) => any;
|
|
152
|
-
onContextmenu?: (event: MouseEvent) => any;
|
|
153
|
-
onFocus?: (event: ButtonFocusEvent) => any;
|
|
154
|
-
onKeydown?: (event: KeyboardEvent) => any;
|
|
155
|
-
onKeypress?: (event: KeyboardEvent) => any;
|
|
156
|
-
onMousedown?: (event: MouseEvent) => any;
|
|
157
|
-
onMouseup?: (event: MouseEvent) => any;
|
|
158
|
-
onPointerdown?: (event: PointerEvent) => any;
|
|
159
|
-
onPointerup?: (event: PointerEvent) => any;
|
|
160
|
-
}>, {
|
|
161
|
-
icon: string;
|
|
162
|
-
selected: boolean;
|
|
163
|
-
disabled: boolean;
|
|
164
|
-
togglable: boolean;
|
|
165
|
-
iconClass: string;
|
|
166
|
-
imageUrl: string;
|
|
167
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
168
|
-
|
|
169
|
-
/**
|
|
170
|
-
* The arguments for the `onBlur` event of the Button.
|
|
171
|
-
*/
|
|
172
|
-
export declare interface ButtonBlurEvent {
|
|
173
|
-
/**
|
|
174
|
-
* The native browser blur event.
|
|
175
|
-
*/
|
|
176
|
-
event: FocusEvent;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
/**
|
|
180
|
-
* @hidden
|
|
181
|
-
*/
|
|
182
|
-
export declare interface ButtonComputed {
|
|
183
|
-
[key: string]: any;
|
|
184
|
-
buttonClasses: object;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
/**
|
|
188
|
-
* @hidden
|
|
189
|
-
*/
|
|
190
|
-
export declare interface ButtonData {
|
|
191
|
-
currentActive: boolean;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
/**
|
|
195
|
-
* The arguments for the `onFocus` event of the Button.
|
|
196
|
-
*/
|
|
197
|
-
export declare interface ButtonFocusEvent {
|
|
198
|
-
/**
|
|
199
|
-
* The native browser focus event.
|
|
200
|
-
*/
|
|
201
|
-
event: FocusEvent;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
/**
|
|
205
|
-
* @hidden
|
|
206
|
-
*/
|
|
207
|
-
export declare const ButtonGroup: DefineComponent<ExtractPropTypes< {
|
|
208
|
-
disabled: {
|
|
209
|
-
type: PropType<boolean>;
|
|
210
|
-
default: any;
|
|
211
|
-
};
|
|
212
|
-
width: PropType<string>;
|
|
213
|
-
dir: {
|
|
214
|
-
type: PropType<string>;
|
|
215
|
-
default: () => any;
|
|
216
|
-
};
|
|
217
|
-
}>, {}, {}, {}, {
|
|
218
|
-
isValidButton(child: any): any;
|
|
219
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
220
|
-
disabled: {
|
|
221
|
-
type: PropType<boolean>;
|
|
222
|
-
default: any;
|
|
223
|
-
};
|
|
224
|
-
width: PropType<string>;
|
|
225
|
-
dir: {
|
|
226
|
-
type: PropType<string>;
|
|
227
|
-
default: () => any;
|
|
228
|
-
};
|
|
229
|
-
}>> & Readonly<{}>, {
|
|
230
|
-
disabled: boolean;
|
|
231
|
-
dir: string;
|
|
232
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
233
|
-
|
|
234
|
-
/**
|
|
235
|
-
* Represents the properties which can be set to a ButtonGroup.
|
|
236
|
-
*/
|
|
237
|
-
declare interface ButtonGroupInterface {
|
|
238
|
-
/**
|
|
239
|
-
* By default, the ButtonGroup is enabled ([see example]({% slug disabledstate_buttongroup %})). To disable the whole group of buttons,
|
|
240
|
-
* set its `disabled` attribute to `true`. To disable a specific button, set its own `disabled` attribute to `true` and leave the `disabled` attribute of the ButtonGroup undefined.
|
|
241
|
-
*
|
|
242
|
-
* If you define the `disabled` attribute of the ButtonGroup, it will take precedence over the `disabled` attributes
|
|
243
|
-
* of the underlying buttons and they will be ignored.
|
|
244
|
-
*/
|
|
245
|
-
disabled?: boolean;
|
|
246
|
-
/**
|
|
247
|
-
* Sets the width of the ButtonGroup.
|
|
248
|
-
*
|
|
249
|
-
* If the width of the ButtonGroup is set:
|
|
250
|
-
* - The buttons resize automatically to fill the full width of the group wrapper.
|
|
251
|
-
* - The buttons acquire the same width.
|
|
252
|
-
*/
|
|
253
|
-
width?: string;
|
|
254
|
-
/**
|
|
255
|
-
* Sets the direction of the ButtonGroup ([more information](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)).
|
|
256
|
-
*
|
|
257
|
-
* The available options are:
|
|
258
|
-
* * `rtl`
|
|
259
|
-
* * `ltr`
|
|
260
|
-
* * `auto`
|
|
261
|
-
*/
|
|
262
|
-
dir?: string;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
/**
|
|
266
|
-
* Represents the props of the [Kendo UI for Vue ButtonGroup component]({% slug overview_buttongroup %}).
|
|
267
|
-
*/
|
|
268
|
-
export declare interface ButtonGroupProps extends ButtonGroupInterface, ButtonProps {
|
|
269
|
-
/**
|
|
270
|
-
* Sets the `className` of the ButtonGroup component.
|
|
271
|
-
*/
|
|
272
|
-
className?: string;
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
/**
|
|
276
|
-
* Inherits the native HTML Button. Represents the properties which can be set to a Button.
|
|
277
|
-
*/
|
|
278
|
-
declare interface ButtonInterface {
|
|
279
|
-
/**
|
|
280
|
-
* Specifies if the Button is disabled ([see example]({% slug disabled_button %})). Defaults to `false`.
|
|
281
|
-
*/
|
|
282
|
-
disabled?: boolean;
|
|
283
|
-
/**
|
|
284
|
-
* Sets the aria-label of the Button.
|
|
285
|
-
*/
|
|
286
|
-
ariaLabel?: string;
|
|
287
|
-
/**
|
|
288
|
-
* Sets the `title` HTML attribute of the Button.
|
|
289
|
-
*/
|
|
290
|
-
title?: string;
|
|
291
|
-
/**
|
|
292
|
-
* Sets the direction of the Button.
|
|
293
|
-
*/
|
|
294
|
-
dir?: string;
|
|
295
|
-
/**
|
|
296
|
-
* Sets the selected state of the Button. Can be used for controlled mode.
|
|
297
|
-
*/
|
|
298
|
-
selected?: boolean;
|
|
299
|
-
/**
|
|
300
|
-
* Provides visual styling that indicates if the Button is selected ([see example]({% slug toggleable_button %})). Defaults to `false`.
|
|
301
|
-
*/
|
|
302
|
-
togglable?: boolean;
|
|
303
|
-
/**
|
|
304
|
-
* Defines the name for an existing icon in a Kendo UI for Vue theme ([see example]({% slug icons_button %})). The icon is rendered inside the Button by a `span.k-icon` element.
|
|
305
|
-
*/
|
|
306
|
-
icon?: string;
|
|
307
|
-
/**
|
|
308
|
-
* Defines an SVGIcon to be rendered within the button.
|
|
309
|
-
*/
|
|
310
|
-
svgIcon?: SVGIcon;
|
|
311
|
-
/**
|
|
312
|
-
* Defines a CSS class—or multiple classes separated by spaces—which are applied to a `span` element inside the Button ([see example]({% slug icons_button %})). Allows the usage of custom icons.
|
|
313
|
-
*/
|
|
314
|
-
iconClass?: string;
|
|
315
|
-
/**
|
|
316
|
-
* Defines a URL which is used as an `img` element inside the Button ([see example]({% slug icons_button %})). The URL can be relative or absolute. If relative, it is evaluated with relation to the URL of the web page.
|
|
317
|
-
*/
|
|
318
|
-
imageUrl?: string;
|
|
319
|
-
/**
|
|
320
|
-
* Defines the alternative text of the image rendered inside the Button component.
|
|
321
|
-
*/
|
|
322
|
-
imageAlt?: string;
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
/**
|
|
326
|
-
* @hidden
|
|
327
|
-
*/
|
|
328
|
-
export declare const ButtonItem: DefineComponent<ExtractPropTypes< {
|
|
329
|
-
focused: PropType<boolean>;
|
|
330
|
-
index: PropType<number>;
|
|
331
|
-
item: PropType<any>;
|
|
332
|
-
render: PropType<any>;
|
|
333
|
-
dataItem: PropType<any>;
|
|
334
|
-
id: PropType<string>;
|
|
335
|
-
textField: PropType<string>;
|
|
336
|
-
role: PropType<string>;
|
|
337
|
-
}>, {}, {}, {
|
|
338
|
-
wrapperClass(): object;
|
|
339
|
-
innerClass(): object;
|
|
340
|
-
}, {
|
|
341
|
-
onClick(event: any): void;
|
|
342
|
-
onDown(event: any): void;
|
|
343
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
344
|
-
click: (event: any, index: number) => true;
|
|
345
|
-
down: (event: any, index: number) => true;
|
|
346
|
-
}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
347
|
-
focused: PropType<boolean>;
|
|
348
|
-
index: PropType<number>;
|
|
349
|
-
item: PropType<any>;
|
|
350
|
-
render: PropType<any>;
|
|
351
|
-
dataItem: PropType<any>;
|
|
352
|
-
id: PropType<string>;
|
|
353
|
-
textField: PropType<string>;
|
|
354
|
-
role: PropType<string>;
|
|
355
|
-
}>> & Readonly<{
|
|
356
|
-
onClick?: (event: any, index: number) => any;
|
|
357
|
-
onDown?: (event: any, index: number) => any;
|
|
358
|
-
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
359
|
-
|
|
360
|
-
/**
|
|
361
|
-
* The interface for describing items that can be passed to the `items` property of the SplitButton or the DropDownButton as an alternative to passing them as children.
|
|
362
|
-
*/
|
|
363
|
-
export declare interface ButtonItemInterface {
|
|
364
|
-
/**
|
|
365
|
-
* Specifies the text of the item.
|
|
366
|
-
*/
|
|
367
|
-
text: string;
|
|
368
|
-
/**
|
|
369
|
-
* Defines an icon that will be rendered next to the item text.
|
|
370
|
-
*/
|
|
371
|
-
icon?: string;
|
|
372
|
-
/**
|
|
373
|
-
* Defines an icon with a custom CSS class that will be rendered next to the item text.
|
|
374
|
-
*/
|
|
375
|
-
iconClass?: string;
|
|
376
|
-
/**
|
|
377
|
-
* Defines the location of an image that will be displayed next to the item text.
|
|
378
|
-
*/
|
|
379
|
-
imageUrl?: string;
|
|
380
|
-
/**
|
|
381
|
-
* Determines whether the item is disabled.
|
|
382
|
-
*/
|
|
383
|
-
disabled?: boolean;
|
|
384
|
-
/**
|
|
385
|
-
* Defines a named slot `string`, functional or class component for rendering the item. The default rendering includes an icon, an image, and text.
|
|
386
|
-
*/
|
|
387
|
-
render?: any;
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
/**
|
|
391
|
-
* The props of the ButtonItem component.
|
|
392
|
-
* The ButtonItem component renders each list item in the dropdown buttons list.
|
|
393
|
-
*/
|
|
394
|
-
export declare interface ButtonItemProps {
|
|
395
|
-
focused?: boolean;
|
|
396
|
-
index?: number;
|
|
397
|
-
item?: any;
|
|
398
|
-
render?: any;
|
|
399
|
-
dataItem: any;
|
|
400
|
-
id?: string;
|
|
401
|
-
textField?: string;
|
|
402
|
-
role?: string;
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
/**
|
|
406
|
-
* @hidden
|
|
407
|
-
*/
|
|
408
|
-
export declare interface ButtonMethods {
|
|
409
|
-
[key: string]: any;
|
|
410
|
-
focus: (e: any) => void;
|
|
411
|
-
toggleIfApplicable: () => void;
|
|
412
|
-
handleClick: (event: any) => void;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
/**
|
|
416
|
-
* Represents the props of the [Kendo UI for Vue Button component]({% slug overview_button %}).
|
|
417
|
-
* Extends the [native button props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement).
|
|
418
|
-
*/
|
|
419
|
-
export declare interface ButtonProps extends ButtonInterface {
|
|
420
|
-
/**
|
|
421
|
-
* Configures the `size` of the Button.
|
|
422
|
-
*
|
|
423
|
-
* The available options are:
|
|
424
|
-
* - small
|
|
425
|
-
* - medium
|
|
426
|
-
* - large
|
|
427
|
-
*
|
|
428
|
-
* @default `undefined`
|
|
429
|
-
*/
|
|
430
|
-
size?: 'small' | 'medium' | 'large';
|
|
431
|
-
/**
|
|
432
|
-
* Configures the `roundness` of the Button.
|
|
433
|
-
*
|
|
434
|
-
* The available options are:
|
|
435
|
-
* - none
|
|
436
|
-
* - small
|
|
437
|
-
* - medium
|
|
438
|
-
* - large
|
|
439
|
-
* - circle
|
|
440
|
-
* - full
|
|
441
|
-
*
|
|
442
|
-
* @default `undefined`
|
|
443
|
-
*/
|
|
444
|
-
rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
|
|
445
|
-
/**
|
|
446
|
-
* Configures the `fillMode` of the Button.
|
|
447
|
-
*
|
|
448
|
-
* The available options are:
|
|
449
|
-
* - solid
|
|
450
|
-
* - outline
|
|
451
|
-
* - flat
|
|
452
|
-
* - link
|
|
453
|
-
*
|
|
454
|
-
* @default `undefined`
|
|
455
|
-
*/
|
|
456
|
-
fillMode?: 'solid' | 'outline' | 'flat' | 'link';
|
|
457
|
-
/**
|
|
458
|
-
* Configures the `themeColor` of the Button.
|
|
459
|
-
*
|
|
460
|
-
* The available options are:
|
|
461
|
-
* - base
|
|
462
|
-
* - primary
|
|
463
|
-
* - secondary
|
|
464
|
-
* - tertiary
|
|
465
|
-
* - info
|
|
466
|
-
* - success
|
|
467
|
-
* - warning
|
|
468
|
-
* - dark
|
|
469
|
-
* - light
|
|
470
|
-
* - inverse
|
|
471
|
-
*
|
|
472
|
-
* @default `undefined`
|
|
473
|
-
*/
|
|
474
|
-
themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse';
|
|
475
|
-
/**
|
|
476
|
-
* Sets the `tabIndex` property of the Button.
|
|
477
|
-
*/
|
|
478
|
-
tabIndex?: number;
|
|
479
|
-
/**
|
|
480
|
-
* Sets the `accessKey` property of the Button.
|
|
481
|
-
*/
|
|
482
|
-
accessKey?: string;
|
|
483
|
-
/**
|
|
484
|
-
* Sets the `id` property of the Button.
|
|
485
|
-
*/
|
|
486
|
-
id?: string;
|
|
487
|
-
/**
|
|
488
|
-
* Sets the `type` property of the Button.
|
|
489
|
-
*/
|
|
490
|
-
type?: string;
|
|
491
|
-
/**
|
|
492
|
-
* Sets the `role` attribute of the Button.
|
|
493
|
-
*/
|
|
494
|
-
role?: string;
|
|
495
|
-
/**
|
|
496
|
-
* Sets the `aria-pressed` attribute of the Button.
|
|
497
|
-
*/
|
|
498
|
-
ariaPressed?: boolean;
|
|
499
|
-
/**
|
|
500
|
-
* defines the size of the SVG icon displayed inside the Button.
|
|
501
|
-
*/
|
|
502
|
-
iconSize?: SvgIconProps['size'];
|
|
503
|
-
}
|
|
504
|
-
|
|
505
|
-
/**
|
|
506
|
-
* The settings of the popup container.
|
|
507
|
-
*/
|
|
508
|
-
export declare interface ButtonsPopupSettings {
|
|
509
|
-
/**
|
|
510
|
-
* Controls the popup animation. By default, the open and close animations are enabled.
|
|
511
|
-
*/
|
|
512
|
-
animate?: boolean | PopupAnimation;
|
|
513
|
-
/**
|
|
514
|
-
* Specifies a list of CSS classes that are used for styling the popup.
|
|
515
|
-
*/
|
|
516
|
-
popupClass?: string;
|
|
517
|
-
/**
|
|
518
|
-
* Specifies the pivot point of the anchor
|
|
519
|
-
* ([see example]({% slug alignmentpositioning_popup %})).
|
|
520
|
-
*/
|
|
521
|
-
anchorAlign?: Align;
|
|
522
|
-
/**
|
|
523
|
-
* Specifies the pivot point of the Popup
|
|
524
|
-
* ([see example]({% slug alignmentpositioning_popup %})).
|
|
525
|
-
*/
|
|
526
|
-
popupAlign?: Align;
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
/**
|
|
530
|
-
* @hidden
|
|
531
|
-
*/
|
|
532
|
-
export declare const Chip: DefineComponent<ExtractPropTypes< {
|
|
533
|
-
id: PropType<string>;
|
|
534
|
-
text: PropType<string>;
|
|
535
|
-
avatar: {
|
|
536
|
-
type: PropType<string | Object | Function>;
|
|
537
|
-
default: () => any;
|
|
538
|
-
};
|
|
539
|
-
value: PropType<any>;
|
|
540
|
-
dir: {
|
|
541
|
-
type: PropType<string>;
|
|
542
|
-
default: () => string;
|
|
543
|
-
};
|
|
544
|
-
removable: {
|
|
545
|
-
type: PropType<boolean>;
|
|
546
|
-
default: boolean;
|
|
547
|
-
};
|
|
548
|
-
removeIcon: {
|
|
549
|
-
type: PropType<string>;
|
|
550
|
-
default: () => string;
|
|
551
|
-
};
|
|
552
|
-
removeSvgIcon: {
|
|
553
|
-
type: PropType<SVGIcon>;
|
|
554
|
-
default: () => SVGIcon_2;
|
|
555
|
-
};
|
|
556
|
-
disabled: {
|
|
557
|
-
type: PropType<boolean>;
|
|
558
|
-
default: boolean;
|
|
559
|
-
};
|
|
560
|
-
icon: PropType<string>;
|
|
561
|
-
svgIcon: PropType<SVGIcon>;
|
|
562
|
-
selectedIcon: {
|
|
563
|
-
type: PropType<string>;
|
|
564
|
-
default: () => string;
|
|
565
|
-
};
|
|
566
|
-
selectedSvgIcon: {
|
|
567
|
-
type: PropType<SVGIcon>;
|
|
568
|
-
default: () => SVGIcon_2;
|
|
569
|
-
};
|
|
570
|
-
size: PropType<"small" | "medium" | "large">;
|
|
571
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
572
|
-
fillMode: {
|
|
573
|
-
type: PropType<"flat" | "solid" | "outline">;
|
|
574
|
-
validator: (value: string) => boolean;
|
|
575
|
-
};
|
|
576
|
-
themeColor: {
|
|
577
|
-
type: PropType<"base" | "info" | "success" | "warning" | "error">;
|
|
578
|
-
validator: (value: string) => boolean;
|
|
579
|
-
};
|
|
580
|
-
dataItem: PropType<any>;
|
|
581
|
-
selected: PropType<boolean>;
|
|
582
|
-
ariaDescribedBy: PropType<string>;
|
|
583
|
-
role: {
|
|
584
|
-
type: PropType<string>;
|
|
585
|
-
default: string;
|
|
586
|
-
};
|
|
587
|
-
tabIndex: PropType<number>;
|
|
588
|
-
onMousedown: PropType<(event: any) => void>;
|
|
589
|
-
}>, {
|
|
590
|
-
chipRef: Ref<any, any>;
|
|
591
|
-
}, {}, {
|
|
592
|
-
currentSelected(): any;
|
|
593
|
-
chipLabelClass(): {
|
|
594
|
-
'k-chip-label': boolean;
|
|
595
|
-
};
|
|
596
|
-
}, {
|
|
597
|
-
computedFocused(): boolean;
|
|
598
|
-
handleMouseDown(event: any): void;
|
|
599
|
-
handleClick(event: any): void;
|
|
600
|
-
handleRemove(event: any): void;
|
|
601
|
-
handleKeyDown(event: any): void;
|
|
602
|
-
handleFocus(event: FocusEvent): void;
|
|
603
|
-
handleBlur(event: FocusEvent): void;
|
|
604
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
605
|
-
click: (event: ChipMouseEvent) => true;
|
|
606
|
-
keydown: (event: ChipKeyboardEvent) => true;
|
|
607
|
-
blur: (event: ChipFocusEvent) => true;
|
|
608
|
-
focus: (event: ChipFocusEvent) => true;
|
|
609
|
-
remove: (event: ChipRemoveEvent) => true;
|
|
610
|
-
}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
611
|
-
id: PropType<string>;
|
|
612
|
-
text: PropType<string>;
|
|
613
|
-
avatar: {
|
|
614
|
-
type: PropType<string | Object | Function>;
|
|
615
|
-
default: () => any;
|
|
616
|
-
};
|
|
617
|
-
value: PropType<any>;
|
|
618
|
-
dir: {
|
|
619
|
-
type: PropType<string>;
|
|
620
|
-
default: () => string;
|
|
621
|
-
};
|
|
622
|
-
removable: {
|
|
623
|
-
type: PropType<boolean>;
|
|
624
|
-
default: boolean;
|
|
625
|
-
};
|
|
626
|
-
removeIcon: {
|
|
627
|
-
type: PropType<string>;
|
|
628
|
-
default: () => string;
|
|
629
|
-
};
|
|
630
|
-
removeSvgIcon: {
|
|
631
|
-
type: PropType<SVGIcon>;
|
|
632
|
-
default: () => SVGIcon_2;
|
|
633
|
-
};
|
|
634
|
-
disabled: {
|
|
635
|
-
type: PropType<boolean>;
|
|
636
|
-
default: boolean;
|
|
637
|
-
};
|
|
638
|
-
icon: PropType<string>;
|
|
639
|
-
svgIcon: PropType<SVGIcon>;
|
|
640
|
-
selectedIcon: {
|
|
641
|
-
type: PropType<string>;
|
|
642
|
-
default: () => string;
|
|
643
|
-
};
|
|
644
|
-
selectedSvgIcon: {
|
|
645
|
-
type: PropType<SVGIcon>;
|
|
646
|
-
default: () => SVGIcon_2;
|
|
647
|
-
};
|
|
648
|
-
size: PropType<"small" | "medium" | "large">;
|
|
649
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
650
|
-
fillMode: {
|
|
651
|
-
type: PropType<"flat" | "solid" | "outline">;
|
|
652
|
-
validator: (value: string) => boolean;
|
|
653
|
-
};
|
|
654
|
-
themeColor: {
|
|
655
|
-
type: PropType<"base" | "info" | "success" | "warning" | "error">;
|
|
656
|
-
validator: (value: string) => boolean;
|
|
657
|
-
};
|
|
658
|
-
dataItem: PropType<any>;
|
|
659
|
-
selected: PropType<boolean>;
|
|
660
|
-
ariaDescribedBy: PropType<string>;
|
|
661
|
-
role: {
|
|
662
|
-
type: PropType<string>;
|
|
663
|
-
default: string;
|
|
664
|
-
};
|
|
665
|
-
tabIndex: PropType<number>;
|
|
666
|
-
onMousedown: PropType<(event: any) => void>;
|
|
667
|
-
}>> & Readonly<{
|
|
668
|
-
onClick?: (event: ChipMouseEvent) => any;
|
|
669
|
-
onBlur?: (event: ChipFocusEvent) => any;
|
|
670
|
-
onFocus?: (event: ChipFocusEvent) => any;
|
|
671
|
-
onKeydown?: (event: ChipKeyboardEvent) => any;
|
|
672
|
-
onRemove?: (event: ChipRemoveEvent) => any;
|
|
673
|
-
}>, {
|
|
674
|
-
role: string;
|
|
675
|
-
disabled: boolean;
|
|
676
|
-
dir: string;
|
|
677
|
-
avatar: string | Object | Function;
|
|
678
|
-
removable: boolean;
|
|
679
|
-
removeIcon: string;
|
|
680
|
-
removeSvgIcon: SVGIcon;
|
|
681
|
-
selectedIcon: string;
|
|
682
|
-
selectedSvgIcon: SVGIcon;
|
|
683
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
684
|
-
|
|
685
|
-
/**
|
|
686
|
-
* Represents the return type of the ChipFocusEvent.
|
|
687
|
-
*/
|
|
688
|
-
export declare interface ChipFocusEvent {
|
|
689
|
-
/**
|
|
690
|
-
* The target of the ChipFocusEvent from ChipHandle.
|
|
691
|
-
*/
|
|
692
|
-
target: ChipHandle;
|
|
693
|
-
/**
|
|
694
|
-
* The native browser focus event.
|
|
695
|
-
*/
|
|
696
|
-
event: FocusEvent;
|
|
697
|
-
}
|
|
698
|
-
|
|
699
|
-
/**
|
|
700
|
-
* Represents the target(element and props) of the ChipRemoveEvent.
|
|
701
|
-
*/
|
|
702
|
-
export declare interface ChipHandle {
|
|
703
|
-
/**
|
|
704
|
-
* The current element or `null` if there is no one.
|
|
705
|
-
*/
|
|
706
|
-
element: HTMLDivElement | null;
|
|
707
|
-
/**
|
|
708
|
-
* The props values of the Chip.
|
|
709
|
-
*/
|
|
710
|
-
props: ChipProps;
|
|
711
|
-
}
|
|
712
|
-
|
|
713
|
-
/**
|
|
714
|
-
* Represents the return type of the ChipKeyboardEvent.
|
|
715
|
-
*/
|
|
716
|
-
export declare interface ChipKeyboardEvent {
|
|
717
|
-
/**
|
|
718
|
-
* The target of the ChipKeyboardEvent from ChipHandle.
|
|
719
|
-
*/
|
|
720
|
-
target: ChipHandle;
|
|
721
|
-
/**
|
|
722
|
-
* The event of the ChipKeyboardEvent.
|
|
723
|
-
*/
|
|
724
|
-
event: any;
|
|
725
|
-
}
|
|
726
|
-
|
|
727
|
-
/**
|
|
728
|
-
* @hidden
|
|
729
|
-
*/
|
|
730
|
-
export declare const ChipList: DefineComponent<ExtractPropTypes< {
|
|
731
|
-
id: StringConstructor;
|
|
732
|
-
tabIndex: NumberConstructor;
|
|
733
|
-
dataItems: ArrayConstructor;
|
|
734
|
-
defaultDataItems: {
|
|
735
|
-
type: ArrayConstructor;
|
|
736
|
-
default: () => any[];
|
|
737
|
-
};
|
|
738
|
-
value: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
|
|
739
|
-
defaultValue: {
|
|
740
|
-
type: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
|
|
741
|
-
default: () => any;
|
|
742
|
-
};
|
|
743
|
-
size: StringConstructor;
|
|
744
|
-
rounded: StringConstructor;
|
|
745
|
-
fillMode: {
|
|
746
|
-
type: StringConstructor;
|
|
747
|
-
validator: (value: string) => boolean;
|
|
748
|
-
};
|
|
749
|
-
selection: {
|
|
750
|
-
type: StringConstructor;
|
|
751
|
-
default: () => "none";
|
|
752
|
-
};
|
|
753
|
-
textField: {
|
|
754
|
-
type: StringConstructor;
|
|
755
|
-
default: () => "text";
|
|
756
|
-
};
|
|
757
|
-
valueField: {
|
|
758
|
-
type: StringConstructor;
|
|
759
|
-
default: () => "value";
|
|
760
|
-
};
|
|
761
|
-
avatarField: {
|
|
762
|
-
type: StringConstructor;
|
|
763
|
-
default: () => "avatar";
|
|
764
|
-
};
|
|
765
|
-
disabled: {
|
|
766
|
-
type: BooleanConstructor;
|
|
767
|
-
default: boolean;
|
|
768
|
-
};
|
|
769
|
-
dir: {
|
|
770
|
-
type: StringConstructor;
|
|
771
|
-
default: () => "ltr";
|
|
772
|
-
};
|
|
773
|
-
chip: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
|
|
774
|
-
ariaLabelledBy: StringConstructor;
|
|
775
|
-
ariaDescribedBy: StringConstructor;
|
|
776
|
-
}>, {
|
|
777
|
-
chipListRef: Ref<any, any>;
|
|
778
|
-
}, {
|
|
779
|
-
currentDataItems: any[];
|
|
780
|
-
currentDir: string;
|
|
781
|
-
isRtl: boolean;
|
|
782
|
-
currentFocused: {
|
|
783
|
-
value: boolean;
|
|
784
|
-
};
|
|
785
|
-
currentValue: {
|
|
786
|
-
value: any;
|
|
787
|
-
};
|
|
788
|
-
}, {
|
|
789
|
-
computedDataItems(): any;
|
|
790
|
-
computedValue(): any;
|
|
791
|
-
items(): any;
|
|
792
|
-
}, {
|
|
793
|
-
handleDispatchSelection(action: any): void;
|
|
794
|
-
handleDispatchFocus(action: any): void;
|
|
795
|
-
handleDispatchDataItems(action: any): void;
|
|
796
|
-
handleChange(newValue: any, event: any): void;
|
|
797
|
-
handleDataChange(newData: any, event: any): void;
|
|
798
|
-
itemsReducer(acc: any, current: any): any;
|
|
799
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
800
|
-
change: (event: ChipListChangeEvent) => true;
|
|
801
|
-
datachange: (event: ChipListDataChangeEvent) => true;
|
|
802
|
-
}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
803
|
-
id: StringConstructor;
|
|
804
|
-
tabIndex: NumberConstructor;
|
|
805
|
-
dataItems: ArrayConstructor;
|
|
806
|
-
defaultDataItems: {
|
|
807
|
-
type: ArrayConstructor;
|
|
808
|
-
default: () => any[];
|
|
809
|
-
};
|
|
810
|
-
value: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
|
|
811
|
-
defaultValue: {
|
|
812
|
-
type: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
|
|
813
|
-
default: () => any;
|
|
814
|
-
};
|
|
815
|
-
size: StringConstructor;
|
|
816
|
-
rounded: StringConstructor;
|
|
817
|
-
fillMode: {
|
|
818
|
-
type: StringConstructor;
|
|
819
|
-
validator: (value: string) => boolean;
|
|
820
|
-
};
|
|
821
|
-
selection: {
|
|
822
|
-
type: StringConstructor;
|
|
823
|
-
default: () => "none";
|
|
824
|
-
};
|
|
825
|
-
textField: {
|
|
826
|
-
type: StringConstructor;
|
|
827
|
-
default: () => "text";
|
|
828
|
-
};
|
|
829
|
-
valueField: {
|
|
830
|
-
type: StringConstructor;
|
|
831
|
-
default: () => "value";
|
|
832
|
-
};
|
|
833
|
-
avatarField: {
|
|
834
|
-
type: StringConstructor;
|
|
835
|
-
default: () => "avatar";
|
|
836
|
-
};
|
|
837
|
-
disabled: {
|
|
838
|
-
type: BooleanConstructor;
|
|
839
|
-
default: boolean;
|
|
840
|
-
};
|
|
841
|
-
dir: {
|
|
842
|
-
type: StringConstructor;
|
|
843
|
-
default: () => "ltr";
|
|
844
|
-
};
|
|
845
|
-
chip: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
|
|
846
|
-
ariaLabelledBy: StringConstructor;
|
|
847
|
-
ariaDescribedBy: StringConstructor;
|
|
848
|
-
}>> & Readonly<{
|
|
849
|
-
onChange?: (event: ChipListChangeEvent) => any;
|
|
850
|
-
onDatachange?: (event: ChipListDataChangeEvent) => any;
|
|
851
|
-
}>, {
|
|
852
|
-
disabled: boolean;
|
|
853
|
-
dir: string;
|
|
854
|
-
defaultDataItems: unknown[];
|
|
855
|
-
defaultValue: string | number | Record<string, any> | unknown[];
|
|
856
|
-
selection: string;
|
|
857
|
-
textField: string;
|
|
858
|
-
valueField: string;
|
|
859
|
-
avatarField: string;
|
|
860
|
-
}, {}, {}, {}, string, () => {
|
|
861
|
-
kendoSelection: any;
|
|
862
|
-
kendoFocused: any;
|
|
863
|
-
kendoDataItems: any;
|
|
864
|
-
handleDispatchDataItems: any;
|
|
865
|
-
handleDispatchSelection: any;
|
|
866
|
-
handleDispatchFocus: any;
|
|
867
|
-
}, true, {}, any>;
|
|
868
|
-
|
|
869
|
-
/**
|
|
870
|
-
* Represents the return type of the ChipListChangeEvent.
|
|
871
|
-
*/
|
|
872
|
-
export declare interface ChipListChangeEvent {
|
|
873
|
-
/**
|
|
874
|
-
* Represents the new state value.
|
|
875
|
-
*/
|
|
876
|
-
value: any | any[];
|
|
877
|
-
/**
|
|
878
|
-
* The target of the ChipListChangeEvent from ChipListHandle.
|
|
879
|
-
*/
|
|
880
|
-
target: any;
|
|
881
|
-
/**
|
|
882
|
-
* The event of the ChipListChangeEvent.
|
|
883
|
-
*/
|
|
884
|
-
event: any;
|
|
885
|
-
}
|
|
886
|
-
|
|
887
|
-
/**
|
|
888
|
-
* Represents the return type of the ChipListDataChangeEvent.
|
|
889
|
-
*/
|
|
890
|
-
export declare interface ChipListDataChangeEvent {
|
|
891
|
-
/**
|
|
892
|
-
* Represents the new data state value.
|
|
893
|
-
*/
|
|
894
|
-
value: any | any[];
|
|
895
|
-
/**
|
|
896
|
-
* The target of the ChipListChangeEvent from ChipListHandle.
|
|
897
|
-
*/
|
|
898
|
-
target: any;
|
|
899
|
-
/**
|
|
900
|
-
* The event of the ChipListChangeEvent.
|
|
901
|
-
*/
|
|
902
|
-
event: any;
|
|
903
|
-
}
|
|
904
|
-
|
|
905
|
-
/**
|
|
906
|
-
* Represents the target(element and props) of the ChipListChangeEvent.
|
|
907
|
-
*/
|
|
908
|
-
export declare interface ChipListHandle {
|
|
909
|
-
/**
|
|
910
|
-
* The current element or `null` if there is no one.
|
|
911
|
-
*/
|
|
912
|
-
element: HTMLDivElement | null;
|
|
913
|
-
/**
|
|
914
|
-
* The props values of the ChipList.
|
|
915
|
-
*/
|
|
916
|
-
props: ChipListProps;
|
|
917
|
-
}
|
|
918
|
-
|
|
919
|
-
/**
|
|
920
|
-
* Represents the properties of [ChipList]({% slug overview_chiplist %}) component.
|
|
921
|
-
*/
|
|
922
|
-
export declare interface ChipListProps extends FormComponentProps, ChipProps {
|
|
923
|
-
/**
|
|
924
|
-
* Sets the `id` property of the top div element of the ChipList.
|
|
925
|
-
*/
|
|
926
|
-
id?: string;
|
|
927
|
-
/**
|
|
928
|
-
* Sets additional classes to the ChipList.
|
|
929
|
-
*/
|
|
930
|
-
className?: string;
|
|
931
|
-
/**
|
|
932
|
-
* Sets the `tabIndex` attribute.
|
|
933
|
-
*/
|
|
934
|
-
tabIndex?: number;
|
|
935
|
-
/**
|
|
936
|
-
* Represents Chip component.
|
|
937
|
-
*/
|
|
938
|
-
chip?: any;
|
|
939
|
-
/**
|
|
940
|
-
* Represents the data about the child Chips.
|
|
941
|
-
*/
|
|
942
|
-
dataItems?: any;
|
|
943
|
-
/**
|
|
944
|
-
* Represents the default data about the child Chips.
|
|
945
|
-
*/
|
|
946
|
-
defaultDataItems?: any[];
|
|
947
|
-
/**
|
|
948
|
-
* Triggered after Chip data change.
|
|
949
|
-
*/
|
|
950
|
-
onDatachange?: (event: ChipListDataChangeEvent) => void;
|
|
951
|
-
/**
|
|
952
|
-
* Represents the selection state of Chip component.
|
|
953
|
-
*/
|
|
954
|
-
value?: any | any[];
|
|
955
|
-
/**
|
|
956
|
-
* Represents the default value of the selection state of Chip component.
|
|
957
|
-
*/
|
|
958
|
-
defaultValue?: any | any[];
|
|
959
|
-
/**
|
|
960
|
-
* Triggered after value change.
|
|
961
|
-
*/
|
|
962
|
-
onChange?: (event: ChipListChangeEvent) => void;
|
|
963
|
-
/**
|
|
964
|
-
* Configures the `size` of the Chip.
|
|
965
|
-
*
|
|
966
|
-
* The available options are:
|
|
967
|
-
* - small
|
|
968
|
-
* - medium
|
|
969
|
-
* - large
|
|
970
|
-
*
|
|
971
|
-
* @default `undefined`
|
|
972
|
-
*/
|
|
973
|
-
size?: 'small' | 'medium' | 'large';
|
|
974
|
-
/**
|
|
975
|
-
* Configures the `roundness` of the Chip.
|
|
976
|
-
*
|
|
977
|
-
* The available options are:
|
|
978
|
-
* - none
|
|
979
|
-
* - small
|
|
980
|
-
* - medium
|
|
981
|
-
* - large
|
|
982
|
-
* - full
|
|
983
|
-
*
|
|
984
|
-
* @default `undefined`
|
|
985
|
-
*/
|
|
986
|
-
rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
|
|
987
|
-
/**
|
|
988
|
-
* Configures the `fillMode` of the Chip.
|
|
989
|
-
*
|
|
990
|
-
* The available options are:
|
|
991
|
-
* - solid
|
|
992
|
-
* - outline
|
|
993
|
-
* - flat
|
|
994
|
-
*
|
|
995
|
-
* @default `undefined`
|
|
996
|
-
*/
|
|
997
|
-
fillMode?: 'solid' | 'outline' | 'flat';
|
|
998
|
-
/**
|
|
999
|
-
* Represents the selection state of Chip component.
|
|
1000
|
-
*/
|
|
1001
|
-
selection?: string;
|
|
1002
|
-
/**
|
|
1003
|
-
* Represents the `text` field of Chip, defaults to 'text'.
|
|
1004
|
-
*/
|
|
1005
|
-
textField?: string;
|
|
1006
|
-
/**
|
|
1007
|
-
* Represents the `value` field of the Chip, defaults to 'value'.
|
|
1008
|
-
*/
|
|
1009
|
-
valueField?: string;
|
|
1010
|
-
/**
|
|
1011
|
-
* Represents the 'avatar' field in the Chip, defaults to 'avatar'.
|
|
1012
|
-
*/
|
|
1013
|
-
avatarField?: object;
|
|
1014
|
-
/**
|
|
1015
|
-
* Determines of ChipList is disabled.
|
|
1016
|
-
*/
|
|
1017
|
-
disabled?: boolean;
|
|
1018
|
-
/**
|
|
1019
|
-
* The ChipList direction 'ltr' as default or 'rtl'.
|
|
1020
|
-
*/
|
|
1021
|
-
dir?: string;
|
|
1022
|
-
/**
|
|
1023
|
-
* Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute.
|
|
1024
|
-
* For example these elements could contain error or hint message.
|
|
1025
|
-
*/
|
|
1026
|
-
ariaDescribedBy?: string;
|
|
1027
|
-
/**
|
|
1028
|
-
* Identifies the element(s) which will label the component.
|
|
1029
|
-
*/
|
|
1030
|
-
ariaLabelledBy?: string;
|
|
1031
|
-
}
|
|
1032
|
-
|
|
1033
|
-
/**
|
|
1034
|
-
* Represents the return type of the ChipMouseEvent.
|
|
1035
|
-
*/
|
|
1036
|
-
export declare interface ChipMouseEvent {
|
|
1037
|
-
/**
|
|
1038
|
-
* The target of the ChipMouseEvent from ChipHandle.
|
|
1039
|
-
*/
|
|
1040
|
-
target: ChipHandle;
|
|
1041
|
-
/**
|
|
1042
|
-
* The event of the ChipMouseEvent.
|
|
1043
|
-
*/
|
|
1044
|
-
event: any;
|
|
1045
|
-
}
|
|
1046
|
-
|
|
1047
|
-
/**
|
|
1048
|
-
* Represents the properties of [Chip]({% slug overview_chip %}) component.
|
|
1049
|
-
*/
|
|
1050
|
-
export declare interface ChipProps {
|
|
1051
|
-
/**
|
|
1052
|
-
* Sets the `id` property of the top div element of the Chip.
|
|
1053
|
-
*/
|
|
1054
|
-
id?: string;
|
|
1055
|
-
/**
|
|
1056
|
-
* Sets the `tabIndex` attribute.
|
|
1057
|
-
*/
|
|
1058
|
-
tabIndex?: number;
|
|
1059
|
-
/**
|
|
1060
|
-
* Sets the label text of the Chip.
|
|
1061
|
-
*/
|
|
1062
|
-
text?: string;
|
|
1063
|
-
/**
|
|
1064
|
-
* Sets the `id` value of the Chip.
|
|
1065
|
-
*/
|
|
1066
|
-
value?: any;
|
|
1067
|
-
/**
|
|
1068
|
-
* The Chip direction 'ltr' as default or 'rtl'.
|
|
1069
|
-
*/
|
|
1070
|
-
dir?: string;
|
|
1071
|
-
/**
|
|
1072
|
-
* Determines if the Chip could be removed.
|
|
1073
|
-
*/
|
|
1074
|
-
removable?: boolean;
|
|
1075
|
-
/**
|
|
1076
|
-
* Determines if the Chip has custom `removeIcon`.
|
|
1077
|
-
*/
|
|
1078
|
-
removeIcon?: string;
|
|
1079
|
-
/**
|
|
1080
|
-
* Defines an remove SVGIcon to be rendered within the chip.
|
|
1081
|
-
*/
|
|
1082
|
-
removeSvgIcon?: SVGIcon;
|
|
1083
|
-
/**
|
|
1084
|
-
* Determines if the Chip is disabled.
|
|
1085
|
-
*/
|
|
1086
|
-
disabled?: boolean;
|
|
1087
|
-
/**
|
|
1088
|
-
* Determines if the Chip has an `icon`.
|
|
1089
|
-
*/
|
|
1090
|
-
icon?: string;
|
|
1091
|
-
/**
|
|
1092
|
-
* Defines an SVGIcon to be rendered within the chip.
|
|
1093
|
-
*/
|
|
1094
|
-
svgIcon?: SVGIcon;
|
|
1095
|
-
/**
|
|
1096
|
-
* Determines if the Chip has custom selection `icon`.
|
|
1097
|
-
*/
|
|
1098
|
-
selectedIcon?: string;
|
|
1099
|
-
/**
|
|
1100
|
-
* Defines an selection SVGIcon to be rendered within the chip.
|
|
1101
|
-
*/
|
|
1102
|
-
selectedSvgIcon?: SVGIcon;
|
|
1103
|
-
/**
|
|
1104
|
-
* If set to object of type ChipAvatarProps with image and imageAlt it renders a default Avatar. If set to string or a `render` function it
|
|
1105
|
-
* defines the avatar template that will be shown.
|
|
1106
|
-
*/
|
|
1107
|
-
avatar?: string | Function | Object;
|
|
1108
|
-
/**
|
|
1109
|
-
* Configures the `size` of the Chip.
|
|
1110
|
-
*
|
|
1111
|
-
* The available options are:
|
|
1112
|
-
* - small
|
|
1113
|
-
* - medium
|
|
1114
|
-
* - large
|
|
1115
|
-
*
|
|
1116
|
-
* @default `undefined`
|
|
1117
|
-
*/
|
|
1118
|
-
size?: 'small' | 'medium' | 'large';
|
|
1119
|
-
/**
|
|
1120
|
-
* Configures the `roundness` of the Chip.
|
|
1121
|
-
*
|
|
1122
|
-
* The available options are:
|
|
1123
|
-
* - none
|
|
1124
|
-
* - small
|
|
1125
|
-
* - medium
|
|
1126
|
-
* - large
|
|
1127
|
-
* - full
|
|
1128
|
-
*
|
|
1129
|
-
* @default `undefined`
|
|
1130
|
-
*/
|
|
1131
|
-
rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
|
|
1132
|
-
/**
|
|
1133
|
-
* Configures the `fillMode` of the Chip.
|
|
1134
|
-
*
|
|
1135
|
-
* The available options are:
|
|
1136
|
-
* - solid
|
|
1137
|
-
* - outline
|
|
1138
|
-
* - flat
|
|
1139
|
-
*
|
|
1140
|
-
* @default `undefined`
|
|
1141
|
-
*/
|
|
1142
|
-
fillMode?: 'solid' | 'outline' | 'flat';
|
|
1143
|
-
/**
|
|
1144
|
-
* Configures the `themeColor` of the Chip.
|
|
1145
|
-
*
|
|
1146
|
-
* The available options are:
|
|
1147
|
-
* - base
|
|
1148
|
-
* - info
|
|
1149
|
-
* - success
|
|
1150
|
-
* - warning
|
|
1151
|
-
* - error
|
|
1152
|
-
*
|
|
1153
|
-
* @default `undefined`
|
|
1154
|
-
*/
|
|
1155
|
-
themeColor?: 'base' | 'info' | 'success' | 'warning' | 'error';
|
|
1156
|
-
/**
|
|
1157
|
-
* Triggered on Chip removing.
|
|
1158
|
-
*/
|
|
1159
|
-
onRemove?: (event: ChipRemoveEvent) => void;
|
|
1160
|
-
/**
|
|
1161
|
-
* Triggered on onClick event.
|
|
1162
|
-
*/
|
|
1163
|
-
onClick?: (event: ChipMouseEvent) => void;
|
|
1164
|
-
/**
|
|
1165
|
-
* Triggered on onKeyDown event.
|
|
1166
|
-
*/
|
|
1167
|
-
onKeydown?: (event: ChipKeyboardEvent) => void;
|
|
1168
|
-
/**
|
|
1169
|
-
* Triggered on onFocus event.
|
|
1170
|
-
*/
|
|
1171
|
-
onFocus?: (event: ChipFocusEvent) => void;
|
|
1172
|
-
/**
|
|
1173
|
-
* Triggered on onBlur event.
|
|
1174
|
-
*/
|
|
1175
|
-
onBlur?: (event: ChipFocusEvent) => void;
|
|
1176
|
-
/**
|
|
1177
|
-
* Represents the item data, coming from the `ChipList` component.
|
|
1178
|
-
*/
|
|
1179
|
-
dataItem?: any;
|
|
1180
|
-
/**
|
|
1181
|
-
* Determines if the Chip is selected.
|
|
1182
|
-
*/
|
|
1183
|
-
selected?: boolean;
|
|
1184
|
-
/**
|
|
1185
|
-
* Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute.
|
|
1186
|
-
* For example these elements could contain error or hint message.
|
|
1187
|
-
*/
|
|
1188
|
-
ariaDescribedBy?: string;
|
|
1189
|
-
/**
|
|
1190
|
-
* @hidden
|
|
1191
|
-
*/
|
|
1192
|
-
role?: string;
|
|
1193
|
-
/**
|
|
1194
|
-
* @hidden
|
|
1195
|
-
*/
|
|
1196
|
-
onMousedown?: (event: any) => void;
|
|
1197
|
-
}
|
|
1198
|
-
|
|
1199
|
-
/**
|
|
1200
|
-
* Represents the return type of the ChipRemoveEvent.
|
|
1201
|
-
*/
|
|
1202
|
-
export declare interface ChipRemoveEvent {
|
|
1203
|
-
/**
|
|
1204
|
-
* The target of the ChipRemoveEvent from ChipHandle.
|
|
1205
|
-
*/
|
|
1206
|
-
target: ChipHandle;
|
|
1207
|
-
/**
|
|
1208
|
-
* The event of the ChipRemoveEvent.
|
|
1209
|
-
*/
|
|
1210
|
-
event: any;
|
|
1211
|
-
}
|
|
1212
|
-
|
|
1213
|
-
/**
|
|
1214
|
-
* @hidden
|
|
1215
|
-
*/
|
|
1216
|
-
export declare const DropDownButton: DefineComponent<ExtractPropTypes< {
|
|
1217
|
-
accessKey: PropType<string>;
|
|
1218
|
-
items: {
|
|
1219
|
-
type: PropType<any[]>;
|
|
1220
|
-
default: () => any[];
|
|
1221
|
-
};
|
|
1222
|
-
ariaLabel: PropType<string>;
|
|
1223
|
-
text: PropType<any>;
|
|
1224
|
-
textField: PropType<string>;
|
|
1225
|
-
tabIndex: PropType<number>;
|
|
1226
|
-
disabled: PropType<boolean>;
|
|
1227
|
-
icon: PropType<string>;
|
|
1228
|
-
svgIcon: PropType<SVGIcon>;
|
|
1229
|
-
iconClass: PropType<string>;
|
|
1230
|
-
imageUrl: PropType<string>;
|
|
1231
|
-
popupSettings: PropType<ButtonsPopupSettings_2>;
|
|
1232
|
-
itemRender: PropType<any>;
|
|
1233
|
-
item: PropType<any>;
|
|
1234
|
-
size: PropType<"small" | "medium" | "large">;
|
|
1235
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
1236
|
-
fillMode: {
|
|
1237
|
-
type: PropType<"flat" | "link" | "solid" | "outline">;
|
|
1238
|
-
validator: (value: string) => boolean;
|
|
1239
|
-
};
|
|
1240
|
-
themeColor: {
|
|
1241
|
-
type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
|
|
1242
|
-
validator: (value: string) => boolean;
|
|
1243
|
-
};
|
|
1244
|
-
opened: {
|
|
1245
|
-
type: PropType<boolean>;
|
|
1246
|
-
default: any;
|
|
1247
|
-
};
|
|
1248
|
-
buttonClass: PropType<string>;
|
|
1249
|
-
dir: PropType<string>;
|
|
1250
|
-
}>, {
|
|
1251
|
-
kendoAnchorRef: Ref<any, any>;
|
|
1252
|
-
}, {
|
|
1253
|
-
currentOpened: boolean;
|
|
1254
|
-
focused: boolean;
|
|
1255
|
-
focusedIndex: number;
|
|
1256
|
-
}, {
|
|
1257
|
-
computedOpened(): boolean;
|
|
1258
|
-
wrapperClass(): {
|
|
1259
|
-
'k-dropdown-button': boolean;
|
|
1260
|
-
'k-focus': any;
|
|
1261
|
-
};
|
|
1262
|
-
}, {
|
|
1263
|
-
element(): HTMLButtonElement | null;
|
|
1264
|
-
onKeyDown(event: any): void;
|
|
1265
|
-
onFocus(event: FocusEvent): void;
|
|
1266
|
-
onBlur(event: FocusEvent): void;
|
|
1267
|
-
createBlurTimeout(event: FocusEvent): void;
|
|
1268
|
-
onItemClick(event: any, clickedItemIndex: number): void;
|
|
1269
|
-
onItemDown(event: any): void;
|
|
1270
|
-
mouseDown(event: any): void;
|
|
1271
|
-
dispatchClickEvent(dispatchedEvent: any, index: number): void;
|
|
1272
|
-
onClickMainButton(event: any): void;
|
|
1273
|
-
dispatchPopupEvent(dispatchedEvent: any, open: boolean): void;
|
|
1274
|
-
isItemDisabled(index: number): any;
|
|
1275
|
-
isRtl(): boolean;
|
|
1276
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
1277
|
-
focus: (event: DropDownButtonFocusEvent) => true;
|
|
1278
|
-
blur: (event: DropDownButtonBlurEvent) => true;
|
|
1279
|
-
itemclick: (event: DropDownButtonItemClickEvent) => true;
|
|
1280
|
-
open: (event: DropDownButtonOpenEvent) => true;
|
|
1281
|
-
close: (event: DropDownButtonCloseEvent) => true;
|
|
1282
|
-
}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
1283
|
-
accessKey: PropType<string>;
|
|
1284
|
-
items: {
|
|
1285
|
-
type: PropType<any[]>;
|
|
1286
|
-
default: () => any[];
|
|
1287
|
-
};
|
|
1288
|
-
ariaLabel: PropType<string>;
|
|
1289
|
-
text: PropType<any>;
|
|
1290
|
-
textField: PropType<string>;
|
|
1291
|
-
tabIndex: PropType<number>;
|
|
1292
|
-
disabled: PropType<boolean>;
|
|
1293
|
-
icon: PropType<string>;
|
|
1294
|
-
svgIcon: PropType<SVGIcon>;
|
|
1295
|
-
iconClass: PropType<string>;
|
|
1296
|
-
imageUrl: PropType<string>;
|
|
1297
|
-
popupSettings: PropType<ButtonsPopupSettings_2>;
|
|
1298
|
-
itemRender: PropType<any>;
|
|
1299
|
-
item: PropType<any>;
|
|
1300
|
-
size: PropType<"small" | "medium" | "large">;
|
|
1301
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
1302
|
-
fillMode: {
|
|
1303
|
-
type: PropType<"flat" | "link" | "solid" | "outline">;
|
|
1304
|
-
validator: (value: string) => boolean;
|
|
1305
|
-
};
|
|
1306
|
-
themeColor: {
|
|
1307
|
-
type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
|
|
1308
|
-
validator: (value: string) => boolean;
|
|
1309
|
-
};
|
|
1310
|
-
opened: {
|
|
1311
|
-
type: PropType<boolean>;
|
|
1312
|
-
default: any;
|
|
1313
|
-
};
|
|
1314
|
-
buttonClass: PropType<string>;
|
|
1315
|
-
dir: PropType<string>;
|
|
1316
|
-
}>> & Readonly<{
|
|
1317
|
-
onBlur?: (event: DropDownButtonBlurEvent) => any;
|
|
1318
|
-
onClose?: (event: DropDownButtonCloseEvent) => any;
|
|
1319
|
-
onFocus?: (event: DropDownButtonFocusEvent) => any;
|
|
1320
|
-
onOpen?: (event: DropDownButtonOpenEvent) => any;
|
|
1321
|
-
onItemclick?: (event: DropDownButtonItemClickEvent) => any;
|
|
1322
|
-
}>, {
|
|
1323
|
-
items: any[];
|
|
1324
|
-
opened: boolean;
|
|
1325
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
1326
|
-
|
|
1327
|
-
/**
|
|
1328
|
-
* The arguments for the `blur` event.
|
|
1329
|
-
*/
|
|
1330
|
-
export declare interface DropDownButtonBlurEvent {
|
|
1331
|
-
/**
|
|
1332
|
-
* The native browser blur event (FocusEvent).
|
|
1333
|
-
*/
|
|
1334
|
-
event: FocusEvent;
|
|
1335
|
-
}
|
|
1336
|
-
|
|
1337
|
-
/**
|
|
1338
|
-
* The arguments for the `close` event.
|
|
1339
|
-
*/
|
|
1340
|
-
export declare interface DropDownButtonCloseEvent {
|
|
1341
|
-
/**
|
|
1342
|
-
* The native browser event.
|
|
1343
|
-
*/
|
|
1344
|
-
event: any;
|
|
1345
|
-
}
|
|
1346
|
-
|
|
1347
|
-
/**
|
|
1348
|
-
* The arguments for the `focus` event.
|
|
1349
|
-
*/
|
|
1350
|
-
export declare interface DropDownButtonFocusEvent {
|
|
1351
|
-
/**
|
|
1352
|
-
* The native browser focus event.
|
|
1353
|
-
*/
|
|
1354
|
-
event: FocusEvent;
|
|
1355
|
-
}
|
|
1356
|
-
|
|
1357
|
-
/**
|
|
1358
|
-
* The arguments for the `itemClick` event.
|
|
1359
|
-
*/
|
|
1360
|
-
export declare interface DropDownButtonItemClickEvent {
|
|
1361
|
-
/**
|
|
1362
|
-
* The clicked item.
|
|
1363
|
-
*/
|
|
1364
|
-
item: any;
|
|
1365
|
-
/**
|
|
1366
|
-
* The zero-based index of the clicked item.
|
|
1367
|
-
*/
|
|
1368
|
-
itemIndex: number;
|
|
1369
|
-
/**
|
|
1370
|
-
* The native browser event.
|
|
1371
|
-
*/
|
|
1372
|
-
event: any;
|
|
1373
|
-
}
|
|
1374
|
-
|
|
1375
|
-
/**
|
|
1376
|
-
* The arguments for the `open` event.
|
|
1377
|
-
*/
|
|
1378
|
-
export declare interface DropDownButtonOpenEvent {
|
|
1379
|
-
/**
|
|
1380
|
-
* The native browser event.
|
|
1381
|
-
*/
|
|
1382
|
-
event: any;
|
|
1383
|
-
}
|
|
1384
|
-
|
|
1385
|
-
export declare interface DropDownButtonProps {
|
|
1386
|
-
/**
|
|
1387
|
-
* Specifies the `accessKey` of the main button.
|
|
1388
|
-
*/
|
|
1389
|
-
accessKey?: string;
|
|
1390
|
-
/**
|
|
1391
|
-
* Specifies the `ariaLabel` of the main button. By default it is set to the text of the DropDownButton and 'dropdownbutton'.
|
|
1392
|
-
*/
|
|
1393
|
-
ariaLabel?: string;
|
|
1394
|
-
/**
|
|
1395
|
-
* Specifies the text of the main button ([see example]({% slug overview_dropdownbutton %})).
|
|
1396
|
-
*/
|
|
1397
|
-
text?: any;
|
|
1398
|
-
/**
|
|
1399
|
-
* Specifies the list items ([see example]({% slug binding_dropdownbutton %}#toc-arrays-of-objects)).
|
|
1400
|
-
*/
|
|
1401
|
-
items?: any[];
|
|
1402
|
-
/**
|
|
1403
|
-
* Configures the field that will be used for the text of the `items`. `textField` has to be used together with the `items` prop ([see example]({% slug binding_dropdownbutton %}#toc-arrays-of-objects)).
|
|
1404
|
-
*/
|
|
1405
|
-
textField?: string;
|
|
1406
|
-
/**
|
|
1407
|
-
* Specifies the `tabIndex` of the main button.
|
|
1408
|
-
*/
|
|
1409
|
-
tabIndex?: number;
|
|
1410
|
-
/**
|
|
1411
|
-
* Determines whether the component is disabled ([see example]({% slug disabled_dropdownbutton %})).
|
|
1412
|
-
*/
|
|
1413
|
-
disabled?: boolean;
|
|
1414
|
-
/**
|
|
1415
|
-
* Opens the popup of the DropDownButton if set to `true`.
|
|
1416
|
-
*/
|
|
1417
|
-
opened?: boolean;
|
|
1418
|
-
/**
|
|
1419
|
-
* Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
|
|
1420
|
-
*/
|
|
1421
|
-
icon?: string;
|
|
1422
|
-
/**
|
|
1423
|
-
* Defines an SVGIcon to be rendered within the DropDownButton.
|
|
1424
|
-
*/
|
|
1425
|
-
svgIcon?: SVGIcon;
|
|
1426
|
-
/**
|
|
1427
|
-
* Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
|
|
1428
|
-
*/
|
|
1429
|
-
iconClass?: string;
|
|
1430
|
-
/**
|
|
1431
|
-
* Defines the location of an image that will be displayed next to the main button text ([see example]({% slug icons_dropdownbutton %})).
|
|
1432
|
-
*/
|
|
1433
|
-
imageUrl?: string;
|
|
1434
|
-
/**
|
|
1435
|
-
* Configures the popup
|
|
1436
|
-
* ([see example]({% slug customization_dropdownbutton %}#toc-popup)).
|
|
1437
|
-
*/
|
|
1438
|
-
popupSettings?: ButtonsPopupSettings;
|
|
1439
|
-
/**
|
|
1440
|
-
* Defines a named slot `string`, functional or class component which is used for rendering items ([see example]({% slug customization_dropdownbutton %}#toc-items-rendering)). The default rendering includes an icon, an image, and text.
|
|
1441
|
-
*/
|
|
1442
|
-
item?: null | any;
|
|
1443
|
-
/**
|
|
1444
|
-
* Fires when a dropdown list button item is about to be rendered. Use it to override the default appearance of the list items.
|
|
1445
|
-
* if `item` prop is not declared, `itemRender` behaves like `item`, for backward compatibility with versions before 4.2.0
|
|
1446
|
-
*/
|
|
1447
|
-
itemRender?: any;
|
|
1448
|
-
/**
|
|
1449
|
-
* Sets the `className` of the main button.
|
|
1450
|
-
*/
|
|
1451
|
-
buttonClass?: string;
|
|
1452
|
-
/**
|
|
1453
|
-
* Sets the direction of the component.
|
|
1454
|
-
*/
|
|
1455
|
-
dir?: string;
|
|
1456
|
-
/**
|
|
1457
|
-
* Configures the `size` of the Button.
|
|
1458
|
-
*
|
|
1459
|
-
* The available options are:
|
|
1460
|
-
* - small
|
|
1461
|
-
* - medium
|
|
1462
|
-
* - large
|
|
1463
|
-
*
|
|
1464
|
-
* @default `undefined`
|
|
1465
|
-
*/
|
|
1466
|
-
size?: 'small' | 'medium' | 'large';
|
|
1467
|
-
/**
|
|
1468
|
-
* Configures the `roundness` of the Button.
|
|
1469
|
-
*
|
|
1470
|
-
* The available options are:
|
|
1471
|
-
* - none
|
|
1472
|
-
* - small
|
|
1473
|
-
* - medium
|
|
1474
|
-
* - large
|
|
1475
|
-
* - circle
|
|
1476
|
-
* - full
|
|
1477
|
-
*
|
|
1478
|
-
* @default `undefined`
|
|
1479
|
-
*/
|
|
1480
|
-
rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
|
|
1481
|
-
/**
|
|
1482
|
-
* Configures the `fillMode` of the Button.
|
|
1483
|
-
*
|
|
1484
|
-
* The available options are:
|
|
1485
|
-
* - solid
|
|
1486
|
-
* - outline
|
|
1487
|
-
* - flat
|
|
1488
|
-
* - link
|
|
1489
|
-
*
|
|
1490
|
-
* @default `undefined`
|
|
1491
|
-
*/
|
|
1492
|
-
fillMode?: 'solid' | 'outline' | 'flat' | 'link';
|
|
1493
|
-
/**
|
|
1494
|
-
* Configures the `themeColor` of the Button.
|
|
1495
|
-
*
|
|
1496
|
-
* The available options are:
|
|
1497
|
-
* - base
|
|
1498
|
-
* - primary
|
|
1499
|
-
* - secondary
|
|
1500
|
-
* - tertiary
|
|
1501
|
-
* - info
|
|
1502
|
-
* - success
|
|
1503
|
-
* - warning
|
|
1504
|
-
* - dark
|
|
1505
|
-
* - light
|
|
1506
|
-
* - inverse
|
|
1507
|
-
*
|
|
1508
|
-
* @default `undefined`
|
|
1509
|
-
*/
|
|
1510
|
-
themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse';
|
|
1511
|
-
/**
|
|
1512
|
-
* Fires when the component is focused ([see example]({% slug events_dropdownbutton %})).
|
|
1513
|
-
*/
|
|
1514
|
-
onFocus?: (event: DropDownButtonFocusEvent) => void;
|
|
1515
|
-
/**
|
|
1516
|
-
* Fires when the component is blurred ([see example]({% slug events_dropdownbutton %})).
|
|
1517
|
-
*/
|
|
1518
|
-
onBlur?: (event: DropDownButtonBlurEvent) => void;
|
|
1519
|
-
/**
|
|
1520
|
-
* Fires when an item is clicked ([see example]({% slug events_dropdownbutton %})).
|
|
1521
|
-
*/
|
|
1522
|
-
onItemclick?: (event: DropDownButtonItemClickEvent) => void;
|
|
1523
|
-
/**
|
|
1524
|
-
* Fires when the popup which contains the items is opened ([see example]({% slug events_dropdownbutton %})).
|
|
1525
|
-
*/
|
|
1526
|
-
onOpen?: (event: DropDownButtonOpenEvent) => void;
|
|
1527
|
-
/**
|
|
1528
|
-
* Fires when the popup which contains the items is closed ([see example]({% slug events_dropdownbutton %})).
|
|
1529
|
-
*/
|
|
1530
|
-
onClose?: (event: DropDownButtonCloseEvent) => void;
|
|
1531
|
-
}
|
|
1532
|
-
|
|
1533
|
-
/**
|
|
1534
|
-
* @hidden
|
|
1535
|
-
*/
|
|
1536
|
-
export declare const FloatingActionButton: DefineComponent<ExtractPropTypes< {
|
|
1537
|
-
id: PropType<string>;
|
|
1538
|
-
dir: PropType<string>;
|
|
1539
|
-
tabIndex: PropType<number>;
|
|
1540
|
-
accessKey: PropType<string>;
|
|
1541
|
-
disabled: {
|
|
1542
|
-
type: PropType<boolean>;
|
|
1543
|
-
default: boolean;
|
|
1544
|
-
};
|
|
1545
|
-
icon: PropType<string>;
|
|
1546
|
-
svgIcon: PropType<SVGIcon>;
|
|
1547
|
-
iconClass: PropType<string>;
|
|
1548
|
-
items: PropType<any>;
|
|
1549
|
-
item: PropType<any>;
|
|
1550
|
-
text: PropType<string>;
|
|
1551
|
-
alignOffset: PropType<FloatingActionButtonAlignOffset_2>;
|
|
1552
|
-
opened: {
|
|
1553
|
-
type: PropType<boolean>;
|
|
1554
|
-
default: any;
|
|
1555
|
-
};
|
|
1556
|
-
align: {
|
|
1557
|
-
type: PropType<FloatingActionButtonAlign>;
|
|
1558
|
-
default: () => FloatingActionButtonAlign;
|
|
1559
|
-
};
|
|
1560
|
-
positionMode: {
|
|
1561
|
-
type: PropType<FloatingActionButtonPositionMode>;
|
|
1562
|
-
default: () => FloatingActionButtonPositionMode;
|
|
1563
|
-
};
|
|
1564
|
-
popupSettings: {
|
|
1565
|
-
type: PropType<FloatingActionButtonPopupSettings_2>;
|
|
1566
|
-
default: () => {};
|
|
1567
|
-
};
|
|
1568
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
1569
|
-
fillMode: {
|
|
1570
|
-
type: PropType<"flat" | "link" | "solid" | "outline">;
|
|
1571
|
-
validator: (value: string) => boolean;
|
|
1572
|
-
};
|
|
1573
|
-
size: PropType<FloatingActionButtonSize>;
|
|
1574
|
-
themeColor: PropType<FloatingActionButtonThemeColor>;
|
|
1575
|
-
}>, {
|
|
1576
|
-
chipRef: Ref<any, any>;
|
|
1577
|
-
kendoAnchorRef: Ref<any, any>;
|
|
1578
|
-
}, {
|
|
1579
|
-
currentOpened: boolean;
|
|
1580
|
-
currentFocused: boolean;
|
|
1581
|
-
focusedIndex: number;
|
|
1582
|
-
currentDir: string;
|
|
1583
|
-
isRtl: boolean;
|
|
1584
|
-
}, {
|
|
1585
|
-
buttonClassNames(): {
|
|
1586
|
-
[x: string]: any;
|
|
1587
|
-
'k-fab': boolean;
|
|
1588
|
-
'k-disabled': any;
|
|
1589
|
-
'k-focus': any;
|
|
1590
|
-
};
|
|
1591
|
-
computedOpened(): any;
|
|
1592
|
-
rootClassNames(): string;
|
|
1593
|
-
}, {
|
|
1594
|
-
dispatchPopupEvent(dispatchedEvent: any, isOpen?: boolean): void;
|
|
1595
|
-
handleClick(event: any): void;
|
|
1596
|
-
handleFocus(event: FocusEvent): void;
|
|
1597
|
-
handleBlur(event: FocusEvent): void;
|
|
1598
|
-
handleMouseDown(event: any): void;
|
|
1599
|
-
handleMouseUp(event: any): void;
|
|
1600
|
-
dispatchItemClickEvent(dispatchedEvent: any, index: number): void;
|
|
1601
|
-
handleItemClick(event: any, clickedItemIndex: number): void;
|
|
1602
|
-
handleItemDown(event: any): void;
|
|
1603
|
-
handleKeyDown(event: any): void;
|
|
1604
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
1605
|
-
click: (event: FloatingActionButtonEvent) => true;
|
|
1606
|
-
mousedown: (event: FloatingActionButtonEvent) => true;
|
|
1607
|
-
mouseup: (event: FloatingActionButtonEvent) => true;
|
|
1608
|
-
open: (event: FloatingActionButtonEvent) => true;
|
|
1609
|
-
close: (event: FloatingActionButtonEvent) => true;
|
|
1610
|
-
itemclick: (event: FloatingActionButtonItemEvent) => true;
|
|
1611
|
-
focus: (event: FloatingActionButtonEvent) => true;
|
|
1612
|
-
blur: (event: FloatingActionButtonEvent) => true;
|
|
1613
|
-
keydown: (event: FloatingActionButtonEvent) => true;
|
|
1614
|
-
}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
1615
|
-
id: PropType<string>;
|
|
1616
|
-
dir: PropType<string>;
|
|
1617
|
-
tabIndex: PropType<number>;
|
|
1618
|
-
accessKey: PropType<string>;
|
|
1619
|
-
disabled: {
|
|
1620
|
-
type: PropType<boolean>;
|
|
1621
|
-
default: boolean;
|
|
1622
|
-
};
|
|
1623
|
-
icon: PropType<string>;
|
|
1624
|
-
svgIcon: PropType<SVGIcon>;
|
|
1625
|
-
iconClass: PropType<string>;
|
|
1626
|
-
items: PropType<any>;
|
|
1627
|
-
item: PropType<any>;
|
|
1628
|
-
text: PropType<string>;
|
|
1629
|
-
alignOffset: PropType<FloatingActionButtonAlignOffset_2>;
|
|
1630
|
-
opened: {
|
|
1631
|
-
type: PropType<boolean>;
|
|
1632
|
-
default: any;
|
|
1633
|
-
};
|
|
1634
|
-
align: {
|
|
1635
|
-
type: PropType<FloatingActionButtonAlign>;
|
|
1636
|
-
default: () => FloatingActionButtonAlign;
|
|
1637
|
-
};
|
|
1638
|
-
positionMode: {
|
|
1639
|
-
type: PropType<FloatingActionButtonPositionMode>;
|
|
1640
|
-
default: () => FloatingActionButtonPositionMode;
|
|
1641
|
-
};
|
|
1642
|
-
popupSettings: {
|
|
1643
|
-
type: PropType<FloatingActionButtonPopupSettings_2>;
|
|
1644
|
-
default: () => {};
|
|
1645
|
-
};
|
|
1646
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
1647
|
-
fillMode: {
|
|
1648
|
-
type: PropType<"flat" | "link" | "solid" | "outline">;
|
|
1649
|
-
validator: (value: string) => boolean;
|
|
1650
|
-
};
|
|
1651
|
-
size: PropType<FloatingActionButtonSize>;
|
|
1652
|
-
themeColor: PropType<FloatingActionButtonThemeColor>;
|
|
1653
|
-
}>> & Readonly<{
|
|
1654
|
-
onClick?: (event: FloatingActionButtonEvent) => any;
|
|
1655
|
-
onBlur?: (event: FloatingActionButtonEvent) => any;
|
|
1656
|
-
onClose?: (event: FloatingActionButtonEvent) => any;
|
|
1657
|
-
onFocus?: (event: FloatingActionButtonEvent) => any;
|
|
1658
|
-
onKeydown?: (event: FloatingActionButtonEvent) => any;
|
|
1659
|
-
onMousedown?: (event: FloatingActionButtonEvent) => any;
|
|
1660
|
-
onMouseup?: (event: FloatingActionButtonEvent) => any;
|
|
1661
|
-
onOpen?: (event: FloatingActionButtonEvent) => any;
|
|
1662
|
-
onItemclick?: (event: FloatingActionButtonItemEvent) => any;
|
|
1663
|
-
}>, {
|
|
1664
|
-
disabled: boolean;
|
|
1665
|
-
opened: boolean;
|
|
1666
|
-
align: FloatingActionButtonAlign;
|
|
1667
|
-
positionMode: FloatingActionButtonPositionMode;
|
|
1668
|
-
popupSettings: FloatingActionButtonPopupSettings_2;
|
|
1669
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
1670
|
-
|
|
1671
|
-
/**
|
|
1672
|
-
* Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container.
|
|
1673
|
-
*
|
|
1674
|
-
* > Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case.
|
|
1675
|
-
* Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and
|
|
1676
|
-
* vertical: "middle" at the same time is not supported.
|
|
1677
|
-
*/
|
|
1678
|
-
export declare interface FloatingActionButtonAlign {
|
|
1679
|
-
/**
|
|
1680
|
-
* Defines the possible horizontal alignment of the Floating Action Button.
|
|
1681
|
-
*
|
|
1682
|
-
* The available values are:
|
|
1683
|
-
* - `start`—Uses the start point of the container.
|
|
1684
|
-
* - `center`—Uses the center point of the container.
|
|
1685
|
-
* - `end`(Default)—Uses the end point of the container.
|
|
1686
|
-
*/
|
|
1687
|
-
horizontal?: 'start' | 'center' | 'end';
|
|
1688
|
-
/**
|
|
1689
|
-
* Defines the possible vertical alignment of the Floating Action Button.
|
|
1690
|
-
*
|
|
1691
|
-
* The available values are:
|
|
1692
|
-
* - `top`—Uses the top point of the container.
|
|
1693
|
-
* - `middle`—Uses the middle point of the container.
|
|
1694
|
-
* - `bottom`(Default)—Uses the bottom point of the container.
|
|
1695
|
-
*/
|
|
1696
|
-
vertical?: 'top' | 'middle' | 'bottom';
|
|
1697
|
-
}
|
|
1698
|
-
|
|
1699
|
-
/**
|
|
1700
|
-
* Specifies the horizontal and vertical offset applied to the Floating Action Button.
|
|
1701
|
-
*
|
|
1702
|
-
* Normally, the floating button is positioned next to the boundaries of its container with a default offset of `16px`.
|
|
1703
|
-
*
|
|
1704
|
-
* Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
|
|
1705
|
-
* not in a corner, can be moved along the container's boundary or towards the center of the container.
|
|
1706
|
-
*
|
|
1707
|
-
* A negative offset can be used to force a button to overflow the boundaries of its container.
|
|
1708
|
-
*/
|
|
1709
|
-
export declare interface FloatingActionButtonAlignOffset {
|
|
1710
|
-
/**
|
|
1711
|
-
* Sets the horizontal offset of the Floating Action Button.
|
|
1712
|
-
*/
|
|
1713
|
-
x?: number | string;
|
|
1714
|
-
/**
|
|
1715
|
-
* Sets the vertical offset of the Floating Action Button.
|
|
1716
|
-
*/
|
|
1717
|
-
y?: number | string;
|
|
1718
|
-
}
|
|
1719
|
-
|
|
1720
|
-
/**
|
|
1721
|
-
* Represents the return type of the FloatingActionButton events.
|
|
1722
|
-
*/
|
|
1723
|
-
export declare interface FloatingActionButtonEvent {
|
|
1724
|
-
/**
|
|
1725
|
-
* The native browser event.
|
|
1726
|
-
*/
|
|
1727
|
-
event: Event | FocusEvent;
|
|
1728
|
-
}
|
|
1729
|
-
|
|
1730
|
-
/**
|
|
1731
|
-
* The FloatingActionButton ref.
|
|
1732
|
-
*/
|
|
1733
|
-
export declare interface FloatingActionButtonHandle {
|
|
1734
|
-
/**
|
|
1735
|
-
* The FloatingActionButton element.
|
|
1736
|
-
*/
|
|
1737
|
-
element: HTMLButtonElement | null;
|
|
1738
|
-
/**
|
|
1739
|
-
* Focus the FloatingActionButton.
|
|
1740
|
-
*/
|
|
1741
|
-
focus: () => void;
|
|
1742
|
-
}
|
|
1743
|
-
|
|
1744
|
-
/**
|
|
1745
|
-
* @hidden
|
|
1746
|
-
*/
|
|
1747
|
-
export declare const FloatingActionButtonItem: DefineComponent<ExtractPropTypes< {
|
|
1748
|
-
id: PropType<string>;
|
|
1749
|
-
disabled: PropType<boolean>;
|
|
1750
|
-
focused: PropType<boolean>;
|
|
1751
|
-
index: PropType<number>;
|
|
1752
|
-
icon: PropType<string>;
|
|
1753
|
-
item: PropType<any>;
|
|
1754
|
-
dataItem: PropType<any>;
|
|
1755
|
-
text: PropType<string>;
|
|
1756
|
-
tabIndex: PropType<number>;
|
|
1757
|
-
customProp: PropType<any>;
|
|
1758
|
-
class: PropType<string>;
|
|
1759
|
-
}>, {
|
|
1760
|
-
elementRef: Ref<any, any>;
|
|
1761
|
-
}, {}, {
|
|
1762
|
-
itemClassNames(): string;
|
|
1763
|
-
}, {
|
|
1764
|
-
handleClick(event: any): void;
|
|
1765
|
-
focusElement(): void;
|
|
1766
|
-
onMouseDown(event: any): void;
|
|
1767
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
1768
|
-
click: (event: any, index: number) => true;
|
|
1769
|
-
down: (event: any) => true;
|
|
1770
|
-
}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
1771
|
-
id: PropType<string>;
|
|
1772
|
-
disabled: PropType<boolean>;
|
|
1773
|
-
focused: PropType<boolean>;
|
|
1774
|
-
index: PropType<number>;
|
|
1775
|
-
icon: PropType<string>;
|
|
1776
|
-
item: PropType<any>;
|
|
1777
|
-
dataItem: PropType<any>;
|
|
1778
|
-
text: PropType<string>;
|
|
1779
|
-
tabIndex: PropType<number>;
|
|
1780
|
-
customProp: PropType<any>;
|
|
1781
|
-
class: PropType<string>;
|
|
1782
|
-
}>> & Readonly<{
|
|
1783
|
-
onClick?: (event: any, index: number) => any;
|
|
1784
|
-
onDown?: (event: any) => any;
|
|
1785
|
-
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
1786
|
-
|
|
1787
|
-
/**
|
|
1788
|
-
* Represents the return type of the FloatingActionButtonItemEvent.
|
|
1789
|
-
*/
|
|
1790
|
-
export declare interface FloatingActionButtonItemEvent {
|
|
1791
|
-
/**
|
|
1792
|
-
* The clicked item props.
|
|
1793
|
-
*/
|
|
1794
|
-
itemProps?: any;
|
|
1795
|
-
/**
|
|
1796
|
-
* The zero-based index of the clicked item.
|
|
1797
|
-
*/
|
|
1798
|
-
itemIndex: number;
|
|
1799
|
-
}
|
|
1800
|
-
|
|
1801
|
-
/**
|
|
1802
|
-
* The FloatingActionButtonItemHandle ref.
|
|
1803
|
-
*/
|
|
1804
|
-
export declare interface FloatingActionButtonItemHandle {
|
|
1805
|
-
/**
|
|
1806
|
-
* The FloatingActionButtonItemHandle element.
|
|
1807
|
-
*/
|
|
1808
|
-
element: HTMLLIElement | null;
|
|
1809
|
-
/**
|
|
1810
|
-
* Focus the FloatingActionButtonItem.
|
|
1811
|
-
*/
|
|
1812
|
-
focus: () => void;
|
|
1813
|
-
}
|
|
1814
|
-
|
|
1815
|
-
/**
|
|
1816
|
-
* Represents the props of the
|
|
1817
|
-
* [Kendo UI for Vue FloatingActionButtonItem component]({% slug overview_floatingactionbutton %}).
|
|
1818
|
-
*/
|
|
1819
|
-
export declare interface FloatingActionButtonItemProps {
|
|
1820
|
-
/**
|
|
1821
|
-
* Specifies if the Floating Action Button Item
|
|
1822
|
-
* is disabled [see example]({% slug disabled_floatingactionbuttonitem %}).
|
|
1823
|
-
* Defaults to `false`.
|
|
1824
|
-
*/
|
|
1825
|
-
disabled?: boolean;
|
|
1826
|
-
/**
|
|
1827
|
-
* Sets the index of the Floating Action Button Item that is used to identify it.
|
|
1828
|
-
*/
|
|
1829
|
-
index?: number;
|
|
1830
|
-
/**
|
|
1831
|
-
* Defines the icon rendered in the FloatingActionButtonItem
|
|
1832
|
-
* [see example]({% slug databinding_floatingactionbutton %}).
|
|
1833
|
-
*/
|
|
1834
|
-
icon?: string;
|
|
1835
|
-
/**
|
|
1836
|
-
* Defines the svg icon in a Kendo UI for Vue theme.
|
|
1837
|
-
*/
|
|
1838
|
-
svgIcon?: SVGIcon;
|
|
1839
|
-
/**
|
|
1840
|
-
* Specifies the text of the FloatingActionButtonItem
|
|
1841
|
-
* [see example]({% slug databinding_floatingactionbutton %}).
|
|
1842
|
-
*/
|
|
1843
|
-
text?: string;
|
|
1844
|
-
/**
|
|
1845
|
-
* Sets the `tabIndex` property of the FloatingActionButtonItem..
|
|
1846
|
-
* Defaults to `0`.
|
|
1847
|
-
*/
|
|
1848
|
-
tabIndex?: number;
|
|
1849
|
-
/**
|
|
1850
|
-
* Sets a custom property. Contained in the FloatingActionButtonItem props that are
|
|
1851
|
-
* returned from the `onItemClick` FloatingActionButton event
|
|
1852
|
-
* [see example]({% slug customization_floatingactionbutton %}#toc-items-rendering).
|
|
1853
|
-
*/
|
|
1854
|
-
[customProp: string]: any;
|
|
1855
|
-
/**
|
|
1856
|
-
* @hidden
|
|
1857
|
-
*/
|
|
1858
|
-
id?: string;
|
|
1859
|
-
/**
|
|
1860
|
-
* @hidden
|
|
1861
|
-
*/
|
|
1862
|
-
class?: string;
|
|
1863
|
-
/**
|
|
1864
|
-
* @hidden
|
|
1865
|
-
*/
|
|
1866
|
-
dataItem?: any;
|
|
1867
|
-
/**
|
|
1868
|
-
* @hidden
|
|
1869
|
-
*/
|
|
1870
|
-
item?: any;
|
|
1871
|
-
/**
|
|
1872
|
-
* @hidden
|
|
1873
|
-
*/
|
|
1874
|
-
focused?: boolean;
|
|
1875
|
-
/**
|
|
1876
|
-
* @hidden
|
|
1877
|
-
*/
|
|
1878
|
-
onDown?: (event: any) => void;
|
|
1879
|
-
/**
|
|
1880
|
-
* @hidden
|
|
1881
|
-
*/
|
|
1882
|
-
onClick?: (event: any, index: number) => void;
|
|
1883
|
-
}
|
|
1884
|
-
|
|
1885
|
-
/**
|
|
1886
|
-
* Represents the settings that can be passed to the Popup inside the FloatingActionButtonPopupSettings.
|
|
1887
|
-
*/
|
|
1888
|
-
export declare interface FloatingActionButtonPopupSettings {
|
|
1889
|
-
/**
|
|
1890
|
-
* Controls the popup animation. By default, the open and close animations are enabled
|
|
1891
|
-
* [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
|
|
1892
|
-
*/
|
|
1893
|
-
animate?: boolean | PopupAnimation;
|
|
1894
|
-
/**
|
|
1895
|
-
* Specifies a list of CSS classes that are used for styling the popup
|
|
1896
|
-
* [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
|
|
1897
|
-
*/
|
|
1898
|
-
popupClass?: string;
|
|
1899
|
-
/**
|
|
1900
|
-
* @hidden
|
|
1901
|
-
*/
|
|
1902
|
-
anchorAlign?: Align;
|
|
1903
|
-
/**
|
|
1904
|
-
* @hidden
|
|
1905
|
-
*/
|
|
1906
|
-
popupAlign?: Align;
|
|
1907
|
-
}
|
|
1908
|
-
|
|
1909
|
-
/**
|
|
1910
|
-
* Specifies the position mode of the Floating Action Button. It is based on the
|
|
1911
|
-
* [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
|
|
1912
|
-
*
|
|
1913
|
-
* * The possible values are:
|
|
1914
|
-
* * 'absolute' (Default)
|
|
1915
|
-
* * 'fixed'
|
|
1916
|
-
*/
|
|
1917
|
-
export declare type FloatingActionButtonPositionMode = 'absolute' | 'fixed';
|
|
1918
|
-
|
|
1919
|
-
/**
|
|
1920
|
-
* Represents the props of the [Kendo UI for Vue
|
|
1921
|
-
* FloatingActionButton component]({% slug overview_floatingactionbutton %}).
|
|
1922
|
-
*/
|
|
1923
|
-
export declare interface FloatingActionButtonProps extends Omit_2<any, 'onBlur' | 'onFocus' | 'onKeyDown' | 'onClick'> {
|
|
1924
|
-
/**
|
|
1925
|
-
* Specifies a list of CSS classes that will be added to the Floating Action Button.
|
|
1926
|
-
*/
|
|
1927
|
-
className?: string;
|
|
1928
|
-
/**
|
|
1929
|
-
* Represents the `dir` HTML attribute. This is used to
|
|
1930
|
-
* switch from LTR to RTL [see example]({% slug rtl_buttons %}).
|
|
1931
|
-
*/
|
|
1932
|
-
dir?: string;
|
|
1933
|
-
/**
|
|
1934
|
-
* Sets the `id` property of the root HTML element.
|
|
1935
|
-
*/
|
|
1936
|
-
id?: string;
|
|
1937
|
-
/**
|
|
1938
|
-
* Specifies if the Floating Action Button is
|
|
1939
|
-
* disabled [see example]({% slug disabled_floatingactionbutton %}). Defaults to `false`.
|
|
1940
|
-
*/
|
|
1941
|
-
disabled?: boolean;
|
|
1942
|
-
/**
|
|
1943
|
-
* If defined it specifies if the Floating Action Button is opened.
|
|
1944
|
-
*/
|
|
1945
|
-
opened?: boolean;
|
|
1946
|
-
/**
|
|
1947
|
-
* Defines the icon rendered in the Floating Action
|
|
1948
|
-
* Button [see example]({% slug contenttypes_floatingactionbutton %}).
|
|
1949
|
-
*/
|
|
1950
|
-
icon?: string;
|
|
1951
|
-
/**
|
|
1952
|
-
* Defines the svg icon in a Kendo UI for Vue theme.
|
|
1953
|
-
*/
|
|
1954
|
-
svgIcon?: SVGIcon;
|
|
1955
|
-
/**
|
|
1956
|
-
* Defines a CSS class or multiple classes separated by spaces which are applied
|
|
1957
|
-
* to a `span` element inside the Floating Action Button. Allows the usage of custom icons.
|
|
1958
|
-
*/
|
|
1959
|
-
iconClass?: string;
|
|
1960
|
-
/**
|
|
1961
|
-
* Specifies the text of the Floating Action
|
|
1962
|
-
* Button [see example]({% slug contenttypes_floatingactionbutton %}).
|
|
1963
|
-
*/
|
|
1964
|
-
text?: string;
|
|
1965
|
-
/**
|
|
1966
|
-
* Specifies the horizontal and vertical offset applied to the Floating Action Button
|
|
1967
|
-
* [see example]({% slug positioning_floatingactionbutton %}).
|
|
1968
|
-
*
|
|
1969
|
-
* Normally, the floating button is positioned next to the boundaries of its container
|
|
1970
|
-
* with a default offset of `16px`.
|
|
1971
|
-
*
|
|
1972
|
-
* Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
|
|
1973
|
-
* not in a corner, can be moved along the container's boundary or towards the center of the container.
|
|
1974
|
-
*
|
|
1975
|
-
* A negative offset can be used to force a button to overflow the boundaries of its container.
|
|
1976
|
-
*
|
|
1977
|
-
* The possible keys are:
|
|
1978
|
-
* * `x`—Sets the horizontal offset of the Floating Action Button.
|
|
1979
|
-
* * `y`—Sets the vertical offset of the Floating Action Button.
|
|
1980
|
-
*
|
|
1981
|
-
*/
|
|
1982
|
-
alignOffset?: FloatingActionButtonAlignOffset;
|
|
1983
|
-
/**
|
|
1984
|
-
* Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container
|
|
1985
|
-
* [see example]({% slug positioning_floatingactionbutton %}).
|
|
1986
|
-
*
|
|
1987
|
-
* > Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case.
|
|
1988
|
-
* Still, it is possible to achieve such a layout with appropriate offsets.
|
|
1989
|
-
* Setting horizontal: "center" and vertical: "middle"
|
|
1990
|
-
* at the same time is not supported.
|
|
1991
|
-
*
|
|
1992
|
-
* The possible keys are:
|
|
1993
|
-
* * `horizontal`— Defines the possible horizontal alignment of the Floating Action Button..
|
|
1994
|
-
* * `start`—Uses the start point of the container.
|
|
1995
|
-
* * `center`—Uses the center point of the container.
|
|
1996
|
-
* * `end`(Default)—Uses the end point of the container
|
|
1997
|
-
* * `vertical`— Defines the possible vertical alignment of the Floating Action Button..
|
|
1998
|
-
* * `top`—Uses the top point of the container.
|
|
1999
|
-
* * `middle`—Uses the middle point of the container.
|
|
2000
|
-
* * `bottom`(Default)—Uses the bottom point of the container.
|
|
2001
|
-
*
|
|
2002
|
-
*/
|
|
2003
|
-
align?: FloatingActionButtonAlign;
|
|
2004
|
-
/**
|
|
2005
|
-
* Specifies the position mode of the Floating Action Button
|
|
2006
|
-
* [see example]({% slug positioning_floatingactionbutton %}). It is based on the
|
|
2007
|
-
* [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
|
|
2008
|
-
*
|
|
2009
|
-
* * The possible values are:
|
|
2010
|
-
* * 'fixed' (Default)
|
|
2011
|
-
* * 'absolute'
|
|
2012
|
-
*/
|
|
2013
|
-
positionMode?: FloatingActionButtonPositionMode;
|
|
2014
|
-
/**
|
|
2015
|
-
* Configures the `roundness` of the Floating Action Button.
|
|
2016
|
-
*
|
|
2017
|
-
* The available options are:
|
|
2018
|
-
* - none
|
|
2019
|
-
* - small
|
|
2020
|
-
* - medium
|
|
2021
|
-
* - large
|
|
2022
|
-
* - circle
|
|
2023
|
-
* - full
|
|
2024
|
-
*
|
|
2025
|
-
* @default `undefined`
|
|
2026
|
-
*/
|
|
2027
|
-
rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
|
|
2028
|
-
/**
|
|
2029
|
-
* Configures the `fillMode` of the Floating Action Button.
|
|
2030
|
-
*
|
|
2031
|
-
* The available options are:
|
|
2032
|
-
* - solid
|
|
2033
|
-
* - outline
|
|
2034
|
-
* - flat
|
|
2035
|
-
* - link
|
|
2036
|
-
*
|
|
2037
|
-
* @default `undefined`
|
|
2038
|
-
*/
|
|
2039
|
-
fillMode?: 'solid' | 'outline' | 'flat' | 'link';
|
|
2040
|
-
/**
|
|
2041
|
-
* Specifies the size of the Floating Action Button
|
|
2042
|
-
* [see example]({% slug appearance_floatingactionbutton %}).
|
|
2043
|
-
*
|
|
2044
|
-
* The possible values are:
|
|
2045
|
-
* * `small`—Applies half of the default padding, e.g. `8px`.
|
|
2046
|
-
* * `medium` (Default)—Applies the default padding, e.g. `16px`.
|
|
2047
|
-
* * `large`—Applies one and one half of the default padding, e.g. `24px`.
|
|
2048
|
-
*
|
|
2049
|
-
*/
|
|
2050
|
-
size?: FloatingActionButtonSize;
|
|
2051
|
-
/**
|
|
2052
|
-
* Specifies the theme color of the Floating Action Button
|
|
2053
|
-
* [see example]({% slug appearance_floatingactionbutton %}).
|
|
2054
|
-
*
|
|
2055
|
-
* The possible values are:
|
|
2056
|
-
* * `primary` (Default)—Applies coloring based on the primary theme color.
|
|
2057
|
-
* * `secondary`—Applies coloring based on the secondary theme color.
|
|
2058
|
-
* * `tertiary`— Applies coloring based on the tertiary theme color.
|
|
2059
|
-
* * `info`—Applies coloring based on the info theme color.
|
|
2060
|
-
* * `success`— Applies coloring based on the success theme color.
|
|
2061
|
-
* * `warning`— Applies coloring based on the warning theme color.
|
|
2062
|
-
* * `error`— Applies coloring based on the error theme color.
|
|
2063
|
-
* * `dark`— Applies coloring based on the dark theme color.
|
|
2064
|
-
* * `light`— Applies coloring based on the light theme color.
|
|
2065
|
-
* * `inverse`— Applies coloring based on the inverse theme color.
|
|
2066
|
-
*
|
|
2067
|
-
*/
|
|
2068
|
-
themeColor?: FloatingActionButtonThemeColor;
|
|
2069
|
-
/**
|
|
2070
|
-
* The collection of items that will be rendered in the Floating Action Button
|
|
2071
|
-
* [see example]({% slug databinding_floatingactionbutton %}).
|
|
2072
|
-
*/
|
|
2073
|
-
items?: any;
|
|
2074
|
-
/**
|
|
2075
|
-
* Overrides the default component responsible for visualizing a single item
|
|
2076
|
-
* [see example]({% slug customization_floatingactionbutton %}#toc-items-rendering).
|
|
2077
|
-
*
|
|
2078
|
-
* The default Component is: [FloatingActionButtonItem]({% slug api_buttons_floatingactionbuttonitemprops %}).
|
|
2079
|
-
*/
|
|
2080
|
-
item?: any;
|
|
2081
|
-
/**
|
|
2082
|
-
* Represents the additional props that will be passed to the Popup inside the Floating Action Button
|
|
2083
|
-
* [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
|
|
2084
|
-
*/
|
|
2085
|
-
popupSettings?: FloatingActionButtonPopupSettings;
|
|
2086
|
-
/**
|
|
2087
|
-
* Specifies the `tabIndex` of the main button.
|
|
2088
|
-
*/
|
|
2089
|
-
tabIndex?: number;
|
|
2090
|
-
/**
|
|
2091
|
-
* Specifies the `accessKey` of the main button.
|
|
2092
|
-
*/
|
|
2093
|
-
accessKey?: string;
|
|
2094
|
-
/**
|
|
2095
|
-
* Fires when the Floating Action Button is focused
|
|
2096
|
-
* [see example]({% slug overview_floatingactionbutton %}#toc-events).
|
|
2097
|
-
*/
|
|
2098
|
-
onFocus?: (event: FloatingActionButtonEvent) => void;
|
|
2099
|
-
/**
|
|
2100
|
-
* Fires when the Floating Action Button is blurred
|
|
2101
|
-
* [see example]({% slug overview_floatingactionbutton %}#toc-events).
|
|
2102
|
-
*/
|
|
2103
|
-
onBlur?: (event: FloatingActionButtonEvent) => void;
|
|
2104
|
-
/**
|
|
2105
|
-
* Fires when the Floating Action Button is clicked.
|
|
2106
|
-
*/
|
|
2107
|
-
onClick?: (event: FloatingActionButtonEvent) => void;
|
|
2108
|
-
/**
|
|
2109
|
-
* Fires when the Floating Action Button Item is clicked
|
|
2110
|
-
* [see example]({% slug overview_floatingactionbutton %}#toc-events).
|
|
2111
|
-
*/
|
|
2112
|
-
onItemclick?: (event: FloatingActionButtonItemEvent) => void;
|
|
2113
|
-
/**
|
|
2114
|
-
* Triggers onKeyDown event
|
|
2115
|
-
* [see example]({% slug overview_floatingactionbutton %}#toc-events).
|
|
2116
|
-
*/
|
|
2117
|
-
onKeydown?: (event: FloatingActionButtonEvent) => void;
|
|
2118
|
-
/**
|
|
2119
|
-
* Triggers onMousedown event
|
|
2120
|
-
* [see example]({% slug overview_floatingactionbutton %}#toc-events).
|
|
2121
|
-
*/
|
|
2122
|
-
onMousedown?: (event: FloatingActionButtonEvent) => void;
|
|
2123
|
-
/**
|
|
2124
|
-
* Triggers onMouseup event
|
|
2125
|
-
* [see example]({% slug overview_floatingactionbutton %}#toc-events).
|
|
2126
|
-
*/
|
|
2127
|
-
onMouseup?: (event: FloatingActionButtonEvent) => void;
|
|
2128
|
-
/**
|
|
2129
|
-
* Fires when the popup which contains the items is opened
|
|
2130
|
-
* [see example]({% slug overview_floatingactionbutton %}#toc-events).
|
|
2131
|
-
*/
|
|
2132
|
-
onOpen?: (event: FloatingActionButtonEvent) => void;
|
|
2133
|
-
/**
|
|
2134
|
-
* Fires when the popup which contains the items is closed
|
|
2135
|
-
* [see example]({% slug overview_floatingactionbutton %}#toc-events).
|
|
2136
|
-
*/
|
|
2137
|
-
onClose?: (event: FloatingActionButtonEvent) => void;
|
|
2138
|
-
}
|
|
2139
|
-
|
|
2140
|
-
/**
|
|
2141
|
-
* Specifies the size of the Floating Action Button.
|
|
2142
|
-
*
|
|
2143
|
-
* The possible values are:
|
|
2144
|
-
* * `small`—Applies half of the default padding, e.g. `8px`.
|
|
2145
|
-
* * `medium` (Default)—Applies the default padding, e.g. `16px`.
|
|
2146
|
-
* * `large`—Applies one and one half of the default padding, e.g. `24px`.
|
|
2147
|
-
*
|
|
2148
|
-
*/
|
|
2149
|
-
export declare type FloatingActionButtonSize = 'small' | 'medium' | 'large';
|
|
2150
|
-
|
|
2151
|
-
/**
|
|
2152
|
-
* Specifies the theme color of the Floating Action Button..
|
|
2153
|
-
*
|
|
2154
|
-
* The possible values are:
|
|
2155
|
-
* * `primary` (Default)—Applies coloring based on the primary theme color.
|
|
2156
|
-
* * `secondary`—Applies coloring based on the secondary theme color.
|
|
2157
|
-
* * `tertiary`— Applies coloring based on the tertiary theme color.
|
|
2158
|
-
* * `info`—Applies coloring based on the info theme color.
|
|
2159
|
-
* * `success`— Applies coloring based on the success theme color.
|
|
2160
|
-
* * `warning`— Applies coloring based on the warning theme color.
|
|
2161
|
-
* * `error`— Applies coloring based on the error theme color.
|
|
2162
|
-
* * `dark`— Applies coloring based on the dark theme color.
|
|
2163
|
-
* * `light`— Applies coloring based on the light theme color.
|
|
2164
|
-
* * `inverse`— Applies coloring based on the inverse theme color.
|
|
2165
|
-
*
|
|
2166
|
-
*/
|
|
2167
|
-
export declare type FloatingActionButtonThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
|
|
2168
|
-
|
|
2169
|
-
/**
|
|
2170
|
-
* @hidden
|
|
2171
|
-
*/
|
|
2172
|
-
declare type Omit_2<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
|
2173
|
-
|
|
2174
|
-
/**
|
|
2175
|
-
* Represents a single recognition alternative from the speech engine.
|
|
2176
|
-
*/
|
|
2177
|
-
declare interface SpeechRecognitionAlternative_2 {
|
|
2178
|
-
/**
|
|
2179
|
-
* The transcript of the recognized speech.
|
|
2180
|
-
*/
|
|
2181
|
-
transcript: string;
|
|
2182
|
-
/**
|
|
2183
|
-
* A confidence score for the transcript, where 0 indicates no confidence and 1 indicates complete confidence.
|
|
2184
|
-
*/
|
|
2185
|
-
confidence: number;
|
|
2186
|
-
}
|
|
2187
|
-
export { SpeechRecognitionAlternative_2 as SpeechRecognitionAlternative }
|
|
2188
|
-
|
|
2189
|
-
/**
|
|
2190
|
-
* @hidden
|
|
2191
|
-
*/
|
|
2192
|
-
export declare const SpeechToTextButton: DefineComponent<ExtractPropTypes< {
|
|
2193
|
-
lang: {
|
|
2194
|
-
type: PropType<string>;
|
|
2195
|
-
default: string;
|
|
2196
|
-
};
|
|
2197
|
-
continuous: {
|
|
2198
|
-
type: PropType<boolean>;
|
|
2199
|
-
default: boolean;
|
|
2200
|
-
};
|
|
2201
|
-
interimResults: {
|
|
2202
|
-
type: PropType<boolean>;
|
|
2203
|
-
default: boolean;
|
|
2204
|
-
};
|
|
2205
|
-
maxAlternatives: {
|
|
2206
|
-
type: PropType<number>;
|
|
2207
|
-
default: number;
|
|
2208
|
-
};
|
|
2209
|
-
integrationMode: {
|
|
2210
|
-
type: PropType<"WebSpeech" | "None">;
|
|
2211
|
-
default: SpeechToTextButtonMode;
|
|
2212
|
-
};
|
|
2213
|
-
onStart: {
|
|
2214
|
-
type: PropType<() => void>;
|
|
2215
|
-
};
|
|
2216
|
-
onResult: {
|
|
2217
|
-
type: PropType<(event: SpeechToTextResultEvent) => void>;
|
|
2218
|
-
};
|
|
2219
|
-
onEnd: {
|
|
2220
|
-
type: PropType<() => void>;
|
|
2221
|
-
};
|
|
2222
|
-
onError: {
|
|
2223
|
-
type: PropType<(event: SpeechToTextErrorEvent) => void>;
|
|
2224
|
-
};
|
|
2225
|
-
svgIcon: {
|
|
2226
|
-
type: PropType<SVGIcon>;
|
|
2227
|
-
default: SVGIcon_2;
|
|
2228
|
-
};
|
|
2229
|
-
iconSize: {
|
|
2230
|
-
type: PropType<string>;
|
|
2231
|
-
};
|
|
2232
|
-
disabled: {
|
|
2233
|
-
type: PropType<boolean>;
|
|
2234
|
-
default: any;
|
|
2235
|
-
};
|
|
2236
|
-
size: PropType<"small" | "medium" | "large">;
|
|
2237
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
2238
|
-
fillMode: PropType<"flat" | "link" | "solid" | "outline">;
|
|
2239
|
-
themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
|
|
2240
|
-
title: {
|
|
2241
|
-
type: PropType<string>;
|
|
2242
|
-
default: string;
|
|
2243
|
-
};
|
|
2244
|
-
ariaLabel: {
|
|
2245
|
-
type: PropType<string>;
|
|
2246
|
-
default: string;
|
|
2247
|
-
};
|
|
2248
|
-
}>, {
|
|
2249
|
-
clickHandler: () => void;
|
|
2250
|
-
isInActiveState: Ref<boolean, boolean>;
|
|
2251
|
-
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
2252
|
-
lang: {
|
|
2253
|
-
type: PropType<string>;
|
|
2254
|
-
default: string;
|
|
2255
|
-
};
|
|
2256
|
-
continuous: {
|
|
2257
|
-
type: PropType<boolean>;
|
|
2258
|
-
default: boolean;
|
|
2259
|
-
};
|
|
2260
|
-
interimResults: {
|
|
2261
|
-
type: PropType<boolean>;
|
|
2262
|
-
default: boolean;
|
|
2263
|
-
};
|
|
2264
|
-
maxAlternatives: {
|
|
2265
|
-
type: PropType<number>;
|
|
2266
|
-
default: number;
|
|
2267
|
-
};
|
|
2268
|
-
integrationMode: {
|
|
2269
|
-
type: PropType<"WebSpeech" | "None">;
|
|
2270
|
-
default: SpeechToTextButtonMode;
|
|
2271
|
-
};
|
|
2272
|
-
onStart: {
|
|
2273
|
-
type: PropType<() => void>;
|
|
2274
|
-
};
|
|
2275
|
-
onResult: {
|
|
2276
|
-
type: PropType<(event: SpeechToTextResultEvent) => void>;
|
|
2277
|
-
};
|
|
2278
|
-
onEnd: {
|
|
2279
|
-
type: PropType<() => void>;
|
|
2280
|
-
};
|
|
2281
|
-
onError: {
|
|
2282
|
-
type: PropType<(event: SpeechToTextErrorEvent) => void>;
|
|
2283
|
-
};
|
|
2284
|
-
svgIcon: {
|
|
2285
|
-
type: PropType<SVGIcon>;
|
|
2286
|
-
default: SVGIcon_2;
|
|
2287
|
-
};
|
|
2288
|
-
iconSize: {
|
|
2289
|
-
type: PropType<string>;
|
|
2290
|
-
};
|
|
2291
|
-
disabled: {
|
|
2292
|
-
type: PropType<boolean>;
|
|
2293
|
-
default: any;
|
|
2294
|
-
};
|
|
2295
|
-
size: PropType<"small" | "medium" | "large">;
|
|
2296
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
2297
|
-
fillMode: PropType<"flat" | "link" | "solid" | "outline">;
|
|
2298
|
-
themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
|
|
2299
|
-
title: {
|
|
2300
|
-
type: PropType<string>;
|
|
2301
|
-
default: string;
|
|
2302
|
-
};
|
|
2303
|
-
ariaLabel: {
|
|
2304
|
-
type: PropType<string>;
|
|
2305
|
-
default: string;
|
|
2306
|
-
};
|
|
2307
|
-
}>> & Readonly<{}>, {
|
|
2308
|
-
title: string;
|
|
2309
|
-
ariaLabel: string;
|
|
2310
|
-
disabled: boolean;
|
|
2311
|
-
svgIcon: SVGIcon;
|
|
2312
|
-
lang: string;
|
|
2313
|
-
continuous: boolean;
|
|
2314
|
-
interimResults: boolean;
|
|
2315
|
-
maxAlternatives: number;
|
|
2316
|
-
integrationMode: "WebSpeech" | "None";
|
|
2317
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
2318
|
-
|
|
2319
|
-
export declare enum SpeechToTextButtonMode {
|
|
2320
|
-
WebSpeech = "WebSpeech",
|
|
2321
|
-
None = "None"
|
|
2322
|
-
}
|
|
2323
|
-
|
|
2324
|
-
export declare interface SpeechToTextButtonProps extends ButtonProps {
|
|
2325
|
-
/**
|
|
2326
|
-
* The valid BCP 47 language tag to use for speech recognition. Defaults to `en-US`.
|
|
2327
|
-
*/
|
|
2328
|
-
lang?: string;
|
|
2329
|
-
/**
|
|
2330
|
-
* Specifies whether the speech recognition should continue until explicitly stopped. Defaults to `true`.
|
|
2331
|
-
*/
|
|
2332
|
-
continuous?: boolean;
|
|
2333
|
-
/**
|
|
2334
|
-
* Specifies whether to return interim results. Defaults to `false`.
|
|
2335
|
-
*/
|
|
2336
|
-
interimResults?: boolean;
|
|
2337
|
-
/**
|
|
2338
|
-
* Specifies the maximum number of alternative transcriptions to return. Defaults to `1`.
|
|
2339
|
-
*/
|
|
2340
|
-
maxAlternatives?: number;
|
|
2341
|
-
/**
|
|
2342
|
-
* Specifies which speech recognition engine or integration the component should use.
|
|
2343
|
-
* This allows the component to operate in different environments or use alternative implementations.
|
|
2344
|
-
*/
|
|
2345
|
-
integrationMode?: 'WebSpeech' | 'None';
|
|
2346
|
-
/**
|
|
2347
|
-
* Callback function that is called when speech recognition starts.
|
|
2348
|
-
*/
|
|
2349
|
-
onStart?: () => void;
|
|
2350
|
-
/**
|
|
2351
|
-
* Callback function that is called when a speech recognition result is available.
|
|
2352
|
-
* The event contains the `isFinal` flag and an array of alternatives.
|
|
2353
|
-
*/
|
|
2354
|
-
onResult?: (event: SpeechToTextResultEvent) => void;
|
|
2355
|
-
/**
|
|
2356
|
-
* Callback function that is called when speech recognition ends.
|
|
2357
|
-
*/
|
|
2358
|
-
onEnd?: () => void;
|
|
2359
|
-
/**
|
|
2360
|
-
* Callback function that is called when an error occurs during speech recognition.
|
|
2361
|
-
*/
|
|
2362
|
-
onError?: (event: SpeechToTextErrorEvent) => void;
|
|
2363
|
-
/**
|
|
2364
|
-
* The `start` event callback that starts the speech recognition service listening to incoming audio with intent to recognize grammars.
|
|
2365
|
-
*
|
|
2366
|
-
* @memberof SpeechToTextButtonProps
|
|
2367
|
-
*/
|
|
2368
|
-
start(): void;
|
|
2369
|
-
/**
|
|
2370
|
-
* The `stop` event callback that stops the speech recognition service from listening to incoming audio, and attempts to return a result using the audio captured so far.
|
|
2371
|
-
*
|
|
2372
|
-
* @memberof SpeechToTextButtonProps
|
|
2373
|
-
*/
|
|
2374
|
-
stop(): void;
|
|
2375
|
-
/**
|
|
2376
|
-
* The `abort` event callback that stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a result.
|
|
2377
|
-
*
|
|
2378
|
-
* @memberof SpeechToTextButtonProps
|
|
2379
|
-
*/
|
|
2380
|
-
abort(): void;
|
|
2381
|
-
/**
|
|
2382
|
-
* The `isActive` event callback that returns a boolean value if the SpeechToTextButton is in an active state.
|
|
2383
|
-
*
|
|
2384
|
-
* @returns `true` if the speech recognition is active, otherwise `false`.
|
|
2385
|
-
*/
|
|
2386
|
-
isActive(): boolean;
|
|
2387
|
-
}
|
|
2388
|
-
|
|
2389
|
-
/**
|
|
2390
|
-
* The event argument for the `error` event of the SpeechToTextButton.
|
|
2391
|
-
*/
|
|
2392
|
-
export declare interface SpeechToTextErrorEvent {
|
|
2393
|
-
/**
|
|
2394
|
-
* Message detailing the cause of the speech recognition error. Use this message for debugging or user feedback.
|
|
2395
|
-
*/
|
|
2396
|
-
errorMessage: string;
|
|
2397
|
-
}
|
|
2398
|
-
|
|
2399
|
-
/**
|
|
2400
|
-
* The event argument for the `result` event of the SpeechToTextButton.
|
|
2401
|
-
*/
|
|
2402
|
-
export declare interface SpeechToTextResultEvent {
|
|
2403
|
-
/**
|
|
2404
|
-
* Indicates whether the speech recognition result is final (`true`) or interim (`false`).
|
|
2405
|
-
*/
|
|
2406
|
-
isFinal: boolean;
|
|
2407
|
-
/**
|
|
2408
|
-
* An array of possible recognition alternatives returned by the speech engine.
|
|
2409
|
-
*/
|
|
2410
|
-
alternatives: SpeechRecognitionAlternative_2[];
|
|
2411
|
-
}
|
|
2412
|
-
|
|
2413
|
-
/**
|
|
2414
|
-
* @hidden
|
|
2415
|
-
*/
|
|
2416
|
-
export declare const SplitButton: DefineComponent<ExtractPropTypes< {
|
|
2417
|
-
accessKey: PropType<string>;
|
|
2418
|
-
ariaLabel: PropType<string>;
|
|
2419
|
-
text: PropType<string>;
|
|
2420
|
-
items: {
|
|
2421
|
-
type: PropType<any[]>;
|
|
2422
|
-
default: () => any[];
|
|
2423
|
-
};
|
|
2424
|
-
textField: PropType<string>;
|
|
2425
|
-
tabIndex: PropType<number>;
|
|
2426
|
-
disabled: PropType<boolean>;
|
|
2427
|
-
icon: PropType<string>;
|
|
2428
|
-
svgIcon: PropType<SVGIcon>;
|
|
2429
|
-
size: PropType<"small" | "medium" | "large">;
|
|
2430
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
2431
|
-
fillMode: {
|
|
2432
|
-
type: PropType<"flat" | "link" | "solid" | "outline">;
|
|
2433
|
-
validator: (value: string) => boolean;
|
|
2434
|
-
};
|
|
2435
|
-
themeColor: {
|
|
2436
|
-
type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
|
|
2437
|
-
validator: (value: string) => boolean;
|
|
2438
|
-
};
|
|
2439
|
-
opened: {
|
|
2440
|
-
type: PropType<boolean>;
|
|
2441
|
-
default: any;
|
|
2442
|
-
};
|
|
2443
|
-
iconClass: PropType<string>;
|
|
2444
|
-
imageUrl: PropType<string>;
|
|
2445
|
-
popupSettings: PropType<ButtonsPopupSettings_2>;
|
|
2446
|
-
itemRender: PropType<any>;
|
|
2447
|
-
item: PropType<any>;
|
|
2448
|
-
className: PropType<string>;
|
|
2449
|
-
buttonClass: PropType<string>;
|
|
2450
|
-
dir: PropType<string>;
|
|
2451
|
-
}>, {
|
|
2452
|
-
kendoAnchorRef: Ref<any, any>;
|
|
2453
|
-
}, {
|
|
2454
|
-
focused: boolean;
|
|
2455
|
-
focusedIndex: number;
|
|
2456
|
-
currentOpened: boolean;
|
|
2457
|
-
}, {
|
|
2458
|
-
computedOpened(): boolean;
|
|
2459
|
-
wrapperClass(): {
|
|
2460
|
-
'k-split-button': boolean;
|
|
2461
|
-
'k-button-group': boolean;
|
|
2462
|
-
'k-focus': any;
|
|
2463
|
-
};
|
|
2464
|
-
}, {
|
|
2465
|
-
element(): HTMLButtonElement | null;
|
|
2466
|
-
onKeyDown(event: any): void;
|
|
2467
|
-
onFocus(event: FocusEvent): void;
|
|
2468
|
-
onItemClick(event: any, clickedItemIndex: number): void;
|
|
2469
|
-
onBlur(event: FocusEvent): void;
|
|
2470
|
-
createBlurTimeout(event: FocusEvent): void;
|
|
2471
|
-
dispatchClickEvent(dispatchedEvent: any, clickedItemIndex: number): void;
|
|
2472
|
-
onSplitPartClick(event: any): void;
|
|
2473
|
-
onDownSplitPart(event: any): void;
|
|
2474
|
-
onItemDown(event: any): void;
|
|
2475
|
-
dispatchPopupEvent(dispatchedEvent: any, open?: boolean): void;
|
|
2476
|
-
isItemDisabled(index: number): any;
|
|
2477
|
-
isRtl(): boolean;
|
|
2478
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
2479
|
-
focus: (event: SplitButtonFocusEvent) => true;
|
|
2480
|
-
blur: (event: SplitButtonBlurEvent) => true;
|
|
2481
|
-
buttonclick: (event: SplitButtonClickEvent) => true;
|
|
2482
|
-
itemclick: (event: SplitButtonItemClickEvent) => true;
|
|
2483
|
-
open: (event: SplitButtonOpenEvent) => true;
|
|
2484
|
-
close: (event: SplitButtonCloseEvent) => true;
|
|
2485
|
-
}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
2486
|
-
accessKey: PropType<string>;
|
|
2487
|
-
ariaLabel: PropType<string>;
|
|
2488
|
-
text: PropType<string>;
|
|
2489
|
-
items: {
|
|
2490
|
-
type: PropType<any[]>;
|
|
2491
|
-
default: () => any[];
|
|
2492
|
-
};
|
|
2493
|
-
textField: PropType<string>;
|
|
2494
|
-
tabIndex: PropType<number>;
|
|
2495
|
-
disabled: PropType<boolean>;
|
|
2496
|
-
icon: PropType<string>;
|
|
2497
|
-
svgIcon: PropType<SVGIcon>;
|
|
2498
|
-
size: PropType<"small" | "medium" | "large">;
|
|
2499
|
-
rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
|
|
2500
|
-
fillMode: {
|
|
2501
|
-
type: PropType<"flat" | "link" | "solid" | "outline">;
|
|
2502
|
-
validator: (value: string) => boolean;
|
|
2503
|
-
};
|
|
2504
|
-
themeColor: {
|
|
2505
|
-
type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
|
|
2506
|
-
validator: (value: string) => boolean;
|
|
2507
|
-
};
|
|
2508
|
-
opened: {
|
|
2509
|
-
type: PropType<boolean>;
|
|
2510
|
-
default: any;
|
|
2511
|
-
};
|
|
2512
|
-
iconClass: PropType<string>;
|
|
2513
|
-
imageUrl: PropType<string>;
|
|
2514
|
-
popupSettings: PropType<ButtonsPopupSettings_2>;
|
|
2515
|
-
itemRender: PropType<any>;
|
|
2516
|
-
item: PropType<any>;
|
|
2517
|
-
className: PropType<string>;
|
|
2518
|
-
buttonClass: PropType<string>;
|
|
2519
|
-
dir: PropType<string>;
|
|
2520
|
-
}>> & Readonly<{
|
|
2521
|
-
onBlur?: (event: SplitButtonBlurEvent) => any;
|
|
2522
|
-
onClose?: (event: SplitButtonCloseEvent) => any;
|
|
2523
|
-
onFocus?: (event: SplitButtonFocusEvent) => any;
|
|
2524
|
-
onOpen?: (event: SplitButtonOpenEvent) => any;
|
|
2525
|
-
onItemclick?: (event: SplitButtonItemClickEvent) => any;
|
|
2526
|
-
onButtonclick?: (event: SplitButtonClickEvent) => any;
|
|
2527
|
-
}>, {
|
|
2528
|
-
items: any[];
|
|
2529
|
-
opened: boolean;
|
|
2530
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
2531
|
-
|
|
2532
|
-
/**
|
|
2533
|
-
* The arguments for the `blur` event.
|
|
2534
|
-
*/
|
|
2535
|
-
export declare interface SplitButtonBlurEvent {
|
|
2536
|
-
/**
|
|
2537
|
-
* The native browser blur event (FocusEvent).
|
|
2538
|
-
*/
|
|
2539
|
-
event: FocusEvent;
|
|
2540
|
-
}
|
|
2541
|
-
|
|
2542
|
-
/**
|
|
2543
|
-
* The arguments for the `buttonclick` event.
|
|
2544
|
-
*/
|
|
2545
|
-
export declare interface SplitButtonClickEvent {
|
|
2546
|
-
/**
|
|
2547
|
-
* The native browser event.
|
|
2548
|
-
*/
|
|
2549
|
-
event: any;
|
|
2550
|
-
}
|
|
2551
|
-
|
|
2552
|
-
/**
|
|
2553
|
-
* The arguments for the `close` event.
|
|
2554
|
-
*/
|
|
2555
|
-
export declare interface SplitButtonCloseEvent {
|
|
2556
|
-
/**
|
|
2557
|
-
* The native browser event.
|
|
2558
|
-
*/
|
|
2559
|
-
event: any;
|
|
2560
|
-
}
|
|
2561
|
-
|
|
2562
|
-
/**
|
|
2563
|
-
* The arguments for the `focus` event.
|
|
2564
|
-
*/
|
|
2565
|
-
export declare interface SplitButtonFocusEvent {
|
|
2566
|
-
/**
|
|
2567
|
-
* The native browser focus event.
|
|
2568
|
-
*/
|
|
2569
|
-
event: FocusEvent;
|
|
2570
|
-
}
|
|
2571
|
-
|
|
2572
|
-
/**
|
|
2573
|
-
* The arguments for the `itemClick` event.
|
|
2574
|
-
*/
|
|
2575
|
-
export declare interface SplitButtonItemClickEvent {
|
|
2576
|
-
/**
|
|
2577
|
-
* The clicked item.
|
|
2578
|
-
*/
|
|
2579
|
-
item: any;
|
|
2580
|
-
/**
|
|
2581
|
-
* The zero-based index of the clicked item.
|
|
2582
|
-
*/
|
|
2583
|
-
itemIndex: number;
|
|
2584
|
-
}
|
|
2585
|
-
|
|
2586
|
-
/**
|
|
2587
|
-
* The arguments for the `open` event.
|
|
2588
|
-
*/
|
|
2589
|
-
export declare interface SplitButtonOpenEvent {
|
|
2590
|
-
/**
|
|
2591
|
-
* The native browser event.
|
|
2592
|
-
*/
|
|
2593
|
-
event: any;
|
|
2594
|
-
}
|
|
2595
|
-
|
|
2596
|
-
/**
|
|
2597
|
-
* @hidden
|
|
2598
|
-
*/
|
|
2599
|
-
export declare const Toolbar: DefineComponent<ExtractPropTypes< {
|
|
2600
|
-
tabIndex: {
|
|
2601
|
-
type: PropType<number>;
|
|
2602
|
-
default: number;
|
|
2603
|
-
};
|
|
2604
|
-
dir: {
|
|
2605
|
-
type: PropType<string>;
|
|
2606
|
-
validator: (value: any) => any;
|
|
2607
|
-
default: string;
|
|
2608
|
-
};
|
|
2609
|
-
keyboardNavigation: {
|
|
2610
|
-
type: PropType<boolean>;
|
|
2611
|
-
default: boolean;
|
|
2612
|
-
};
|
|
2613
|
-
buttons: {
|
|
2614
|
-
type: PropType<string[]>;
|
|
2615
|
-
default: () => any;
|
|
2616
|
-
};
|
|
2617
|
-
size: {
|
|
2618
|
-
type: PropType<"small" | "medium" | "large">;
|
|
2619
|
-
validator: (value: string) => boolean;
|
|
2620
|
-
};
|
|
2621
|
-
fillMode: {
|
|
2622
|
-
type: PropType<"flat" | "solid" | "outline">;
|
|
2623
|
-
validator: (value: string) => boolean;
|
|
2624
|
-
};
|
|
2625
|
-
ariaLabel: PropType<string>;
|
|
2626
|
-
overflow: {
|
|
2627
|
-
type: PropType<"none" | "section" | "scroll">;
|
|
2628
|
-
default: string;
|
|
2629
|
-
validator: (value: any) => any;
|
|
2630
|
-
};
|
|
2631
|
-
scrollButtons: {
|
|
2632
|
-
type: PropType<"hidden" | "auto" | "visible">;
|
|
2633
|
-
default: string;
|
|
2634
|
-
validator: (value: any) => any;
|
|
2635
|
-
};
|
|
2636
|
-
scrollButtonsPosition: {
|
|
2637
|
-
type: PropType<"split" | "start" | "end">;
|
|
2638
|
-
default: string;
|
|
2639
|
-
validator: (value: any) => any;
|
|
2640
|
-
};
|
|
2641
|
-
buttonScrollSpeed: {
|
|
2642
|
-
type: PropType<number>;
|
|
2643
|
-
default: number;
|
|
2644
|
-
};
|
|
2645
|
-
}>, {}, {
|
|
2646
|
-
defaultSlot: any;
|
|
2647
|
-
offsetWidth: number;
|
|
2648
|
-
offsetHeight: number;
|
|
2649
|
-
currentButtons: HTMLElement[];
|
|
2650
|
-
focusedSelector: string;
|
|
2651
|
-
isScrollStartPosition: boolean;
|
|
2652
|
-
isScrollEndPosition: boolean;
|
|
2653
|
-
focusableButtons: any[];
|
|
2654
|
-
isOverflowing: boolean;
|
|
2655
|
-
scrollContentRef: any;
|
|
2656
|
-
lastToolbarWidthRef: number;
|
|
2657
|
-
overFlowToolsRef: any[];
|
|
2658
|
-
overFlowOpened: boolean;
|
|
2659
|
-
visibleToolsRef: any;
|
|
2660
|
-
}, {
|
|
2661
|
-
selectors(): ToolbarComputed['selectors'];
|
|
2662
|
-
wrapperClass(): ToolbarComputed['wrapperClass'];
|
|
2663
|
-
}, {
|
|
2664
|
-
getCurrentButtons(): HTMLElement[];
|
|
2665
|
-
getInternalButtons(): HTMLElement[];
|
|
2666
|
-
focusedIndex(): number;
|
|
2667
|
-
setTabIndex(focusedIndex: number): void;
|
|
2668
|
-
onKeyDown(event: any): void;
|
|
2669
|
-
focusButton(prevIndex: number, index: number): void;
|
|
2670
|
-
initOverflow(toolbarRef: any, totalInnerWidth: any): void;
|
|
2671
|
-
checkOverflow(): void;
|
|
2672
|
-
onWindowResize(event: any): void;
|
|
2673
|
-
onContentScroll(buttonClicked: any): void;
|
|
2674
|
-
onToggleoverflow(opened: boolean): void;
|
|
2675
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
2676
|
-
resize: (event: ToolbarResizeEvent) => true;
|
|
2677
|
-
}, string, PublicProps, Readonly<ExtractPropTypes< {
|
|
2678
|
-
tabIndex: {
|
|
2679
|
-
type: PropType<number>;
|
|
2680
|
-
default: number;
|
|
2681
|
-
};
|
|
2682
|
-
dir: {
|
|
2683
|
-
type: PropType<string>;
|
|
2684
|
-
validator: (value: any) => any;
|
|
2685
|
-
default: string;
|
|
2686
|
-
};
|
|
2687
|
-
keyboardNavigation: {
|
|
2688
|
-
type: PropType<boolean>;
|
|
2689
|
-
default: boolean;
|
|
2690
|
-
};
|
|
2691
|
-
buttons: {
|
|
2692
|
-
type: PropType<string[]>;
|
|
2693
|
-
default: () => any;
|
|
2694
|
-
};
|
|
2695
|
-
size: {
|
|
2696
|
-
type: PropType<"small" | "medium" | "large">;
|
|
2697
|
-
validator: (value: string) => boolean;
|
|
2698
|
-
};
|
|
2699
|
-
fillMode: {
|
|
2700
|
-
type: PropType<"flat" | "solid" | "outline">;
|
|
2701
|
-
validator: (value: string) => boolean;
|
|
2702
|
-
};
|
|
2703
|
-
ariaLabel: PropType<string>;
|
|
2704
|
-
overflow: {
|
|
2705
|
-
type: PropType<"none" | "section" | "scroll">;
|
|
2706
|
-
default: string;
|
|
2707
|
-
validator: (value: any) => any;
|
|
2708
|
-
};
|
|
2709
|
-
scrollButtons: {
|
|
2710
|
-
type: PropType<"hidden" | "auto" | "visible">;
|
|
2711
|
-
default: string;
|
|
2712
|
-
validator: (value: any) => any;
|
|
2713
|
-
};
|
|
2714
|
-
scrollButtonsPosition: {
|
|
2715
|
-
type: PropType<"split" | "start" | "end">;
|
|
2716
|
-
default: string;
|
|
2717
|
-
validator: (value: any) => any;
|
|
2718
|
-
};
|
|
2719
|
-
buttonScrollSpeed: {
|
|
2720
|
-
type: PropType<number>;
|
|
2721
|
-
default: number;
|
|
2722
|
-
};
|
|
2723
|
-
}>> & Readonly<{
|
|
2724
|
-
onResize?: (event: ToolbarResizeEvent) => any;
|
|
2725
|
-
}>, {
|
|
2726
|
-
tabIndex: number;
|
|
2727
|
-
overflow: "none" | "section" | "scroll";
|
|
2728
|
-
dir: string;
|
|
2729
|
-
keyboardNavigation: boolean;
|
|
2730
|
-
buttons: string[];
|
|
2731
|
-
buttonScrollSpeed: number;
|
|
2732
|
-
scrollButtons: "hidden" | "auto" | "visible";
|
|
2733
|
-
scrollButtonsPosition: "split" | "start" | "end";
|
|
2734
|
-
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
2735
|
-
|
|
2736
|
-
/**
|
|
2737
|
-
* @hidden
|
|
2738
|
-
*/
|
|
2739
|
-
declare interface ToolbarComputed {
|
|
2740
|
-
[key: string]: any;
|
|
2741
|
-
selectors: string[];
|
|
2742
|
-
wrapperClass: object;
|
|
2743
|
-
}
|
|
2744
|
-
|
|
2745
|
-
/**
|
|
2746
|
-
* @hidden
|
|
2747
|
-
*/
|
|
2748
|
-
export declare const ToolbarItem: DefineComponent< {}, {}, {}, {}, {
|
|
2749
|
-
element(): any;
|
|
2750
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
2751
|
-
|
|
2752
|
-
/**
|
|
2753
|
-
* @hidden
|
|
2754
|
-
*/
|
|
2755
|
-
declare interface ToolbarOverflowProps {
|
|
2756
|
-
/**
|
|
2757
|
-
* Represents the possible overflow mode options of the Toolbar.
|
|
2758
|
-
* Applicable when there is not enough space to render all tools.
|
|
2759
|
-
*
|
|
2760
|
-
* @default `section`
|
|
2761
|
-
*/
|
|
2762
|
-
overflow?: 'none' | 'section' | 'scroll';
|
|
2763
|
-
/**
|
|
2764
|
-
* Determines the Toolbar scroll buttons visibility.
|
|
2765
|
-
* Applicable when the overflow property is set to `scroll`.
|
|
2766
|
-
*
|
|
2767
|
-
* @default `auto`
|
|
2768
|
-
*/
|
|
2769
|
-
scrollButtons?: 'hidden' | 'visible' | 'auto';
|
|
2770
|
-
/**
|
|
2771
|
-
* Determines the Toolbar scroll buttons position.
|
|
2772
|
-
* Applicable when the overflow property is set to `scroll`.
|
|
2773
|
-
*
|
|
2774
|
-
* @default `split`
|
|
2775
|
-
*/
|
|
2776
|
-
scrollButtonsPosition?: 'start' | 'end' | 'split';
|
|
2777
|
-
/**
|
|
2778
|
-
* Sets the Toolbar scroll speed in pixels when scrolling via clicking the previous or next button.
|
|
2779
|
-
* Applicable when the overflow property is set to `scroll`.
|
|
2780
|
-
*
|
|
2781
|
-
* @default 100
|
|
2782
|
-
*/
|
|
2783
|
-
buttonScrollSpeed?: number;
|
|
2784
|
-
/**
|
|
2785
|
-
* Defines the custom component that will be rendered as a previous button.
|
|
2786
|
-
*/
|
|
2787
|
-
prevButton?: any;
|
|
2788
|
-
/**
|
|
2789
|
-
* Defines the custom component that will be rendered as a next button.
|
|
2790
|
-
*/
|
|
2791
|
-
nextButton?: any;
|
|
2792
|
-
}
|
|
2793
|
-
|
|
2794
|
-
/**
|
|
2795
|
-
* Represents the props of the [Kendo UI for Vue Toolbar component]({% slug overview_toolbar %}).
|
|
2796
|
-
*/
|
|
2797
|
-
export declare interface ToolbarProps extends ToolbarOverflowProps {
|
|
2798
|
-
/**
|
|
2799
|
-
* Sets additional classes to the Toolbar.
|
|
2800
|
-
*/
|
|
2801
|
-
className?: string;
|
|
2802
|
-
/**
|
|
2803
|
-
* Represents the `dir` HTML attribute.
|
|
2804
|
-
*/
|
|
2805
|
-
dir?: string | undefined;
|
|
2806
|
-
/**
|
|
2807
|
-
* Specifies the `tabIndex` of the Toolbar.
|
|
2808
|
-
*/
|
|
2809
|
-
tabIndex?: number;
|
|
2810
|
-
/**
|
|
2811
|
-
* The `resize` event of the Toolbar.
|
|
2812
|
-
*/
|
|
2813
|
-
onResize?: (event: ToolbarResizeEvent) => void;
|
|
2814
|
-
/**
|
|
2815
|
-
* If set to `false`, it will turn off the built-in keyboard navigation.
|
|
2816
|
-
*/
|
|
2817
|
-
keyboardNavigation?: boolean;
|
|
2818
|
-
/**
|
|
2819
|
-
* @hidden
|
|
2820
|
-
*
|
|
2821
|
-
* The CSS selectors of the toolbar HTML elements used by built-in keyboard navigation.
|
|
2822
|
-
* Each selector needs to point to a focusable element.
|
|
2823
|
-
* Defaults to [
|
|
2824
|
-
* 'button',
|
|
2825
|
-
* '.k-button-group > button',
|
|
2826
|
-
* '.k-dropdown > .k-dropdown-wrap',
|
|
2827
|
-
* '.k-colorpicker > .k-picker-wrap'
|
|
2828
|
-
* ].
|
|
2829
|
-
*/
|
|
2830
|
-
buttons?: string[];
|
|
2831
|
-
/**
|
|
2832
|
-
* Configures the `size` of the Toolbar.
|
|
2833
|
-
*
|
|
2834
|
-
* The available options are:
|
|
2835
|
-
* - `small`—sets the padding of the component to 4px 4px
|
|
2836
|
-
* - `medium`—sets the padding of the component to 8px 8px
|
|
2837
|
-
* - `large`—sets the padding of the component to 10px 10px
|
|
2838
|
-
*
|
|
2839
|
-
* @default `undefined`
|
|
2840
|
-
*/
|
|
2841
|
-
size?: 'small' | 'medium' | 'large';
|
|
2842
|
-
/**
|
|
2843
|
-
* Configures the `fillMode` of the Toolbar.
|
|
2844
|
-
*
|
|
2845
|
-
* The available options are:
|
|
2846
|
-
* - solid—Applies a `background` color and `solid borders`.
|
|
2847
|
-
* - flat—Sets a `transparent background` and `solid bottom border`.
|
|
2848
|
-
* - outline—Sets a `transparent background` and `solid borders`.
|
|
2849
|
-
*
|
|
2850
|
-
* @default `undefined`
|
|
2851
|
-
*/
|
|
2852
|
-
fillMode?: 'solid' | 'flat' | 'outline';
|
|
2853
|
-
/**
|
|
2854
|
-
* Defines the `aria-label` HTML attribute of the Toolbar.
|
|
2855
|
-
*/
|
|
2856
|
-
ariaLabel?: string;
|
|
2857
|
-
}
|
|
2858
|
-
|
|
2859
|
-
/**
|
|
2860
|
-
* Represents the `resize` event of the Toolbar.
|
|
2861
|
-
*/
|
|
2862
|
-
export declare interface ToolbarResizeEvent {
|
|
2863
|
-
/**
|
|
2864
|
-
* An event target.
|
|
2865
|
-
*/
|
|
2866
|
-
target: any;
|
|
2867
|
-
/**
|
|
2868
|
-
* The `offsetWidth` event of the Toolbar.
|
|
2869
|
-
*/
|
|
2870
|
-
offsetWidth: number;
|
|
2871
|
-
/**
|
|
2872
|
-
* The `offsetHeight` event of the Toolbar.
|
|
2873
|
-
*/
|
|
2874
|
-
offsetHeight: number;
|
|
2875
|
-
/**
|
|
2876
|
-
* A native DOM event.
|
|
2877
|
-
*/
|
|
2878
|
-
nativeEvent: any;
|
|
2879
|
-
}
|
|
2880
|
-
|
|
2881
|
-
/**
|
|
2882
|
-
* Represents the [Kendo UI for Vue ToolbarSeparator component]({% slug overview_toolbar %}). A separator element for the sub-elements of the Toolbar.
|
|
2883
|
-
*
|
|
2884
|
-
* ```jsx
|
|
2885
|
-
* <template>
|
|
2886
|
-
* <div>
|
|
2887
|
-
* <Toolbar>
|
|
2888
|
-
* <SplitButton
|
|
2889
|
-
* :class="'k-toolbar-split-button'"
|
|
2890
|
-
* :text="'Insert'"
|
|
2891
|
-
* :items="splitItems"
|
|
2892
|
-
* >
|
|
2893
|
-
* </SplitButton>
|
|
2894
|
-
* <ToolbarSeparator />
|
|
2895
|
-
* <DropDownButton
|
|
2896
|
-
* :text="'Paste'"
|
|
2897
|
-
* :svg-icon="clipboardIcon"
|
|
2898
|
-
* :items="ddItems"
|
|
2899
|
-
* >
|
|
2900
|
-
* </DropDownButton>
|
|
2901
|
-
* </Toolbar>
|
|
2902
|
-
* </div>
|
|
2903
|
-
* </template>
|
|
2904
|
-
* ```
|
|
2905
|
-
*/
|
|
2906
|
-
export declare const ToolbarSeparator: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
2907
|
-
|
|
2908
|
-
/**
|
|
2909
|
-
* Represents the [Kendo UI for Vue ToolbarSpacer component]({% slug overview_toolbar %}). A spacer element for the sub-elements of the Toolbar.
|
|
2910
|
-
*
|
|
2911
|
-
* ```jsx
|
|
2912
|
-
* <template>
|
|
2913
|
-
* <div>
|
|
2914
|
-
* <Toolbar>
|
|
2915
|
-
* <ButtonGroup :class="'k-toolbar-button-group'">
|
|
2916
|
-
* <Button
|
|
2917
|
-
* :class="'k-toolbar-button'"
|
|
2918
|
-
* :svg-icon="boldIcon"
|
|
2919
|
-
* :title="'Bold'"
|
|
2920
|
-
* :togglable="true"
|
|
2921
|
-
* />
|
|
2922
|
-
* <Button
|
|
2923
|
-
* :class="'k-toolbar-button'"
|
|
2924
|
-
* :svg-icon="italicIcon"
|
|
2925
|
-
* :title="'Italic'"
|
|
2926
|
-
* :togglable="true"
|
|
2927
|
-
* />
|
|
2928
|
-
* <Button
|
|
2929
|
-
* :class="'k-toolbar-button'"
|
|
2930
|
-
* :svg-icon="underlineIcon"
|
|
2931
|
-
* :title="'Underline'"
|
|
2932
|
-
* :togglable="true"
|
|
2933
|
-
* />
|
|
2934
|
-
* </ButtonGroup>
|
|
2935
|
-
* <ToolbarSpacer />
|
|
2936
|
-
* <Button :class="'k-toolbar-button'" :svg-icon="cutIcon" :title="'Cut'">
|
|
2937
|
-
* Cut
|
|
2938
|
-
* </Button>
|
|
2939
|
-
* <Button :class="'k-toolbar-button'" :svg-icon="copyIcon" :title="'Copy'">
|
|
2940
|
-
* Copy
|
|
2941
|
-
* </Button>
|
|
2942
|
-
* </Toolbar>
|
|
2943
|
-
* </div>
|
|
2944
|
-
* </template>
|
|
2945
|
-
* ```
|
|
2946
|
-
*/
|
|
2947
|
-
export declare const ToolbarSpacer: DefineComponent< {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
2948
|
-
|
|
2949
|
-
export { }
|
|
8
|
+
import { Button, ButtonProps } from './Button';
|
|
9
|
+
import { ButtonFocusEvent, ButtonBlurEvent, ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipListChangeEvent, ChipListDataChangeEvent } from './models/events';
|
|
10
|
+
import { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
|
|
11
|
+
import { Chip, ChipProps, ChipHandle } from './Chip/Chip';
|
|
12
|
+
import { ChipList, ChipListProps, ChipListHandle } from './Chip/ChipList';
|
|
13
|
+
import { FloatingActionButton } from './FloatingActionButton/FloatingActionButton';
|
|
14
|
+
import { FloatingActionButtonHandle } from './FloatingActionButton/interfaces/FloatingActionButtonHandle';
|
|
15
|
+
import { FloatingActionButtonProps } from './FloatingActionButton/interfaces/FloatingActionButtonProps';
|
|
16
|
+
import { FloatingActionButtonItem, FloatingActionButtonItemHandle, FloatingActionButtonItemProps } from './FloatingActionButton/FloatingActionButtonItem';
|
|
17
|
+
import { FloatingActionButtonPopupSettings } from './FloatingActionButton/interfaces/FloatingActionButtonPopupSettings';
|
|
18
|
+
import { FloatingActionButtonAlign } from './FloatingActionButton/models/align';
|
|
19
|
+
import { FloatingActionButtonAlignOffset } from './FloatingActionButton/models/align-offset';
|
|
20
|
+
import { FloatingActionButtonPositionMode } from './FloatingActionButton/models/position-mode';
|
|
21
|
+
import { FloatingActionButtonSize } from './FloatingActionButton/models/size';
|
|
22
|
+
import { FloatingActionButtonThemeColor } from './FloatingActionButton/models/theme-color';
|
|
23
|
+
import { SplitButton } from './ListButton/SplitButton';
|
|
24
|
+
import { DropDownButton } from './ListButton/DropDownButton';
|
|
25
|
+
import { DropDownButtonProps } from './ListButton/models/ListButtonProps';
|
|
26
|
+
import { SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent } from './ListButton/models/events';
|
|
27
|
+
import { ButtonItemInterface } from './ListButton/models/ButtonItemInterface';
|
|
28
|
+
import { ButtonItem, ButtonItemProps } from './ListButton/ButtonItem';
|
|
29
|
+
import { ButtonsPopupSettings } from './ListButton/models/PopupSettings';
|
|
30
|
+
import { Toolbar } from './toolbar/Toolbar';
|
|
31
|
+
import { ToolbarProps, ToolbarResizeEvent } from './toolbar/interfaces/ToolbarProps';
|
|
32
|
+
import { ToolbarItem } from './toolbar/tools/ToolbarItem';
|
|
33
|
+
import { ToolbarSeparator } from './toolbar/tools/ToolbarSeparator';
|
|
34
|
+
import { ToolbarSpacer } from './toolbar/tools/ToolbarSpacer';
|
|
35
|
+
export * from './FloatingActionButton/models/events';
|
|
36
|
+
export * from './SpeechToText/SpeechToTextButton';
|
|
37
|
+
export type { ButtonData, ButtonComputed, ButtonMethods } from './Button';
|
|
38
|
+
export { Toolbar, type ToolbarProps, ToolbarItem, ToolbarSeparator, type ToolbarResizeEvent, ToolbarSpacer, Button, type ButtonProps, ButtonGroup, type ButtonGroupProps, type ButtonFocusEvent, type ButtonBlurEvent, SplitButton, DropDownButton, type DropDownButtonProps, type ButtonItemInterface, ButtonItem, type ButtonItemProps, type SplitButtonFocusEvent, type SplitButtonBlurEvent, type SplitButtonClickEvent, type SplitButtonOpenEvent, type SplitButtonCloseEvent, type SplitButtonItemClickEvent, type DropDownButtonFocusEvent, type DropDownButtonBlurEvent, type DropDownButtonOpenEvent, type DropDownButtonCloseEvent, type DropDownButtonItemClickEvent, type ButtonsPopupSettings, Chip, type ChipProps, type ChipHandle, type ChipRemoveEvent, type ChipMouseEvent, type ChipKeyboardEvent, type ChipFocusEvent, ChipList, type ChipListProps, type ChipListHandle, type ChipListDataChangeEvent, type ChipListChangeEvent, FloatingActionButton, type FloatingActionButtonProps, type FloatingActionButtonHandle, FloatingActionButtonItem, type FloatingActionButtonItemHandle, type FloatingActionButtonItemProps, type FloatingActionButtonPopupSettings, type FloatingActionButtonAlign, type FloatingActionButtonAlignOffset, type FloatingActionButtonPositionMode, type FloatingActionButtonSize, type FloatingActionButtonThemeColor };
|