@progress/kendo-vue-buttons
Version:
1,917 lines (1,878 loc) • 85.9 kB
text/typescript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { Align } from '@progress/kendo-vue-popup';
import { ButtonsPopupSettings as ButtonsPopupSettings_2 } from '..';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { FloatingActionButtonAlignOffset as FloatingActionButtonAlignOffset_2 } from '..';
import { FloatingActionButtonPopupSettings as FloatingActionButtonPopupSettings_2 } from '..';
import { FormComponentProps } from '@progress/kendo-vue-common';
import { PopupAnimation } from '@progress/kendo-vue-popup';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { Ref } from 'vue';
import { SVGIcon } from '@progress/kendo-vue-common';
import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
import { SvgIconProps } from '@progress/kendo-vue-common';
/**
* @hidden
*/
export declare const Button: DefineComponent<ExtractPropTypes< {
ariaLabel: PropType<string>;
ariaPressed: PropType<boolean>;
title: PropType<string>;
dir: PropType<string>;
selected: {
type: PropType<boolean>;
default: any;
};
togglable: {
type: PropType<boolean>;
default: boolean;
};
icon: {
type: PropType<string>;
default: () => any;
};
svgIcon: PropType<SVGIcon>;
iconSize: {
type: PropType<string>;
default: string;
};
iconClass: {
type: PropType<string>;
default: () => any;
};
imageUrl: {
type: PropType<string>;
default: () => any;
};
imageAlt: PropType<string>;
disabled: {
type: PropType<boolean>;
default: any;
};
size: {
type: PropType<string>;
default: string;
};
shape: {
type: PropType<string>;
};
rounded: {
type: PropType<string>;
default: string;
};
fillMode: {
type: PropType<string>;
default: string;
};
themeColor: {
type: PropType<string>;
default: string;
};
tabIndex: PropType<number>;
accessKey: PropType<string>;
id: PropType<string>;
type: PropType<string>;
role: PropType<string>;
}>, {}, {
currentActive: any;
}, {
computedSelected(): boolean;
buttonClasses(): {
[x: string]: any;
'k-icon-button': boolean;
'k-disabled': any;
'k-selected': any;
'k-rtl': boolean;
};
}, {
focus(e: any): void;
toggleIfApplicable(): void;
handleClick(event: any): void;
handleMouseDown(event: any): void;
handlePointerDown(event: any): void;
handleMouseUp(event: any): void;
handlePointerUp(event: any): void;
handleFocus(event: any): void;
handleBlur(event: any): void;
handleKeypress(event: any): void;
handleKeydown(event: any): void;
handleContextmenu(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
mousedown: any;
mouseup: any;
pointerdown: any;
pointerup: any;
focus: any;
blur: any;
keypress: any;
keydown: any;
contextmenu: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
ariaLabel: PropType<string>;
ariaPressed: PropType<boolean>;
title: PropType<string>;
dir: PropType<string>;
selected: {
type: PropType<boolean>;
default: any;
};
togglable: {
type: PropType<boolean>;
default: boolean;
};
icon: {
type: PropType<string>;
default: () => any;
};
svgIcon: PropType<SVGIcon>;
iconSize: {
type: PropType<string>;
default: string;
};
iconClass: {
type: PropType<string>;
default: () => any;
};
imageUrl: {
type: PropType<string>;
default: () => any;
};
imageAlt: PropType<string>;
disabled: {
type: PropType<boolean>;
default: any;
};
size: {
type: PropType<string>;
default: string;
};
shape: {
type: PropType<string>;
};
rounded: {
type: PropType<string>;
default: string;
};
fillMode: {
type: PropType<string>;
default: string;
};
themeColor: {
type: PropType<string>;
default: string;
};
tabIndex: PropType<number>;
accessKey: PropType<string>;
id: PropType<string>;
type: PropType<string>;
role: PropType<string>;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
onBlur?: (...args: any[] | unknown[]) => any;
onContextmenu?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onKeypress?: (...args: any[] | unknown[]) => any;
onMousedown?: (...args: any[] | unknown[]) => any;
onMouseup?: (...args: any[] | unknown[]) => any;
onPointerdown?: (...args: any[] | unknown[]) => any;
onPointerup?: (...args: any[] | unknown[]) => any;
}>, {
themeColor: string;
size: string;
icon: string;
rounded: string;
fillMode: string;
iconSize: string;
selected: boolean;
togglable: boolean;
iconClass: string;
imageUrl: string;
disabled: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface ButtonComputed {
[key: string]: any;
buttonClasses: object;
}
/**
* @hidden
*/
export declare interface ButtonData {
currentActive: boolean;
}
/**
* @hidden
*/
export declare const ButtonGroup: DefineComponent<ExtractPropTypes< {
disabled: {
type: PropType<boolean>;
default: any;
};
width: PropType<string>;
dir: {
type: PropType<string>;
default: () => any;
};
}>, {}, {}, {}, {
isValidButton(child: any): any;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
disabled: {
type: PropType<boolean>;
default: any;
};
width: PropType<string>;
dir: {
type: PropType<string>;
default: () => any;
};
}>> & Readonly<{}>, {
dir: string;
disabled: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the properties which can be set to a ButtonGroup.
*/
declare interface ButtonGroupInterface {
/**
* By default, the ButtonGroup is enabled ([see example]({% slug disabledstate_buttongroup %})). To disable the whole group of buttons,
* 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.
*
* If you define the `disabled` attribute of the ButtonGroup, it will take precedence over the `disabled` attributes
* of the underlying buttons and they will be ignored.
*/
disabled?: boolean;
/**
* Sets the width of the ButtonGroup.
*
* If the width of the ButtonGroup is set:
* - The buttons resize automatically to fill the full width of the group wrapper.
* - The buttons acquire the same width.
*/
width?: string;
/**
* Sets the direction of the ButtonGroup ([more information](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)).
*
* The available options are:
* * `rtl`
* * `ltr`
* * `auto`
*/
dir?: string;
}
/**
* Represents the props of the [Kendo UI for Vue ButtonGroup component]({% slug overview_buttongroup %}).
*/
export declare interface ButtonGroupProps extends ButtonGroupInterface, ButtonProps {
/**
* Sets the `className` of the ButtonGroup component.
*/
className?: string;
}
/**
* Inherits the native HTML Button. Represents the properties which can be set to a Button.
*/
declare interface ButtonInterface {
/**
* Adds visual weight to the Button and makes it primary ([see example]({% slug primary_button %})).
* **Deprecated**. Use [`themeColor`]({% slug api_buttons_buttonprops %}#toc-themecolor) prop instead.
*
* @deprecated
*/
primary?: boolean;
/**
* Specifies if the Button is disabled ([see example]({% slug disabled_button %})). Defaults to `false`.
*/
disabled?: boolean;
/**
* Sets the aria-label of the Button.
*/
ariaLabel?: string;
/**
* Sets the `title` HTML attribute of the Button.
*/
title?: string;
/**
* Sets the direction of the Button.
*/
dir?: string;
/**
* Sets the selected state of the Button. Can be used for controlled mode.
*/
selected?: boolean;
/**
* Provides visual styling that indicates if the Button is selected ([see example]({% slug toggleable_button %})). Defaults to `false`.
*/
togglable?: boolean;
/**
* 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.
*/
icon?: string;
/**
* Defines an SVGIcon to be rendered within the button.
*/
svgIcon?: SVGIcon;
/**
* 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.
*/
iconClass?: string;
/**
* 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.
*/
imageUrl?: string;
/**
* Defines the alternative text of the image rendered inside the Button component.
*/
imageAlt?: string;
}
/**
* @hidden
*/
export declare const ButtonItem: DefineComponent<ExtractPropTypes< {
focused: PropType<boolean>;
index: PropType<number>;
item: PropType<any>;
render: PropType<any>;
dataItem: PropType<any>;
id: PropType<string>;
textField: PropType<string>;
role: PropType<string>;
}>, {}, {}, {
wrapperClass(): object;
innerClass(): object;
}, {
onClick(event: any): void;
onDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
down: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
focused: PropType<boolean>;
index: PropType<number>;
item: PropType<any>;
render: PropType<any>;
dataItem: PropType<any>;
id: PropType<string>;
textField: PropType<string>;
role: PropType<string>;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
onDown?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* 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.
*/
export declare interface ButtonItemInterface {
/**
* Specifies the text of the item.
*/
text: string;
/**
* Defines an icon that will be rendered next to the item text.
*/
icon?: string;
/**
* Defines an icon with a custom CSS class that will be rendered next to the item text.
*/
iconClass?: string;
/**
* Defines the location of an image that will be displayed next to the item text.
*/
imageUrl?: string;
/**
* Determines whether the item is disabled.
*/
disabled?: boolean;
/**
* Defines a named slot `string`, functional or class component for rendering the item. The default rendering includes an icon, an image, and text.
*/
render?: any;
}
/**
* The props of the ButtonItem component.
* The ButtonItem component renders each list item in the dropdown buttons list.
*/
export declare interface ButtonItemProps {
focused?: boolean;
index?: number;
item?: any;
render?: any;
dataItem: any;
id?: string;
textField?: string;
role?: string;
}
/**
* @hidden
*/
export declare interface ButtonMethods {
[key: string]: any;
focus: (e: any) => void;
toggleIfApplicable: () => void;
handleClick: (event: any) => void;
}
/**
* Represents the props of the [Kendo UI for Vue Button component]({% slug overview_button %}).
* Extends the [native button props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement).
*/
export declare interface ButtonProps extends ButtonInterface {
/**
* Configures the `size` of the Button.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `shape` of the Button.
*
* The available options are:
* - rectangle
* - square
* - null—Does not set a shape `class`.
*
*/
shape?: null | 'rectangle' | 'square' | string;
/**
* Configures the `roundness` of the Button.
*
* The available options are:
* - small
* - medium
* - large
* - circle
* - full
* - null—Does not set a rounded `className`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Configures the `fillMode` of the Button.
*
* The available options are:
* - solid
* - outline
* - flat
* - link
* - null—Does not set a fillMode `className`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | string;
/**
* Configures the `themeColor` of the Button.
*
* The available options are:
* - base
* - primary
* - secondary
* - tertiary
* - info
* - success
* - warning
* - dark
* - light
* - inverse
* - null—Does not set a themeColor `className`.
*
* @default `base`
*/
themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse' | string;
/**
* Sets the `tabIndex` property of the Button.
*/
tabIndex?: number;
/**
* Sets the `accessKey` property of the Button.
*/
accessKey?: string;
/**
* Sets the `id` property of the Button.
*/
id?: string;
/**
* Sets the `type` property of the Button.
*/
type?: string;
/**
* Sets the `role` attribute of the Button.
*/
role?: string;
/**
* Sets the `aria-pressed` attribute of the Button.
*/
ariaPressed?: boolean;
/**
* defines the size of the SVG icon displayed inside the Button.
*/
iconSize?: SvgIconProps['size'];
}
/**
* The settings of the popup container.
*/
export declare interface ButtonsPopupSettings {
/**
* Controls the popup animation. By default, the open and close animations are enabled.
*/
animate?: boolean | PopupAnimation;
/**
* Specifies a list of CSS classes that are used for styling the popup.
*/
popupClass?: string;
/**
* Specifies the pivot point of the anchor
* ([see example]({% slug alignmentpositioning_popup %})).
*/
anchorAlign?: Align;
/**
* Specifies the pivot point of the Popup
* ([see example]({% slug alignmentpositioning_popup %})).
*/
popupAlign?: Align;
}
/**
* @hidden
*/
export declare const Chip: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
text: PropType<string>;
avatar: {
type: PropType<string | Object | Function>;
default: () => any;
};
value: PropType<any>;
dir: {
type: PropType<string>;
default: () => string;
};
removable: {
type: PropType<boolean>;
default: boolean;
};
removeIcon: {
type: PropType<string>;
default: () => string;
};
removeSvgIcon: {
type: PropType<SVGIcon>;
default: () => SVGIcon_2;
};
disabled: {
type: PropType<boolean>;
default: boolean;
};
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
selectedIcon: {
type: PropType<string>;
default: () => string;
};
selectedSvgIcon: {
type: PropType<SVGIcon>;
default: () => SVGIcon_2;
};
size: {
type: PropType<string>;
default: string;
};
rounded: {
type: PropType<string>;
default: string;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
dataItem: PropType<any>;
selected: PropType<boolean>;
ariaDescribedBy: PropType<string>;
role: {
type: PropType<string>;
default: string;
};
tabIndex: PropType<number>;
onMousedown: PropType<(event: any) => void>;
}>, {
chipRef: Ref<any, any>;
}, {}, {
currentSelected(): any;
chipLabelClass(): {
'k-chip-label': boolean;
};
}, {
computedFocused(): boolean;
handleMouseDown(event: any): void;
handleClick(event: any): void;
handleRemove(event: any): void;
handleKeyDown(event: any): void;
handleFocus(event: any): void;
handleBlur(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
keydown: any;
blur: any;
focus: any;
remove: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
text: PropType<string>;
avatar: {
type: PropType<string | Object | Function>;
default: () => any;
};
value: PropType<any>;
dir: {
type: PropType<string>;
default: () => string;
};
removable: {
type: PropType<boolean>;
default: boolean;
};
removeIcon: {
type: PropType<string>;
default: () => string;
};
removeSvgIcon: {
type: PropType<SVGIcon>;
default: () => SVGIcon_2;
};
disabled: {
type: PropType<boolean>;
default: boolean;
};
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
selectedIcon: {
type: PropType<string>;
default: () => string;
};
selectedSvgIcon: {
type: PropType<SVGIcon>;
default: () => SVGIcon_2;
};
size: {
type: PropType<string>;
default: string;
};
rounded: {
type: PropType<string>;
default: string;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
dataItem: PropType<any>;
selected: PropType<boolean>;
ariaDescribedBy: PropType<string>;
role: {
type: PropType<string>;
default: string;
};
tabIndex: PropType<number>;
onMousedown: PropType<(event: any) => void>;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
onBlur?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onRemove?: (...args: any[] | unknown[]) => any;
}>, {
themeColor: string;
size: string;
role: string;
rounded: string;
fillMode: string;
dir: string;
disabled: boolean;
avatar: string | Object | Function;
removable: boolean;
removeIcon: string;
removeSvgIcon: SVGIcon;
selectedIcon: string;
selectedSvgIcon: SVGIcon;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the return type of the ChipFocusEvent.
*/
export declare interface ChipFocusEvent {
/**
* The target of the ChipFocusEvent from ChipHandle.
*/
target: ChipHandle;
/**
* The event of the ChipFocusEvent.
*/
event: any;
}
/**
* Represents the target(element and props) of the ChipRemoveEvent.
*/
export declare interface ChipHandle {
/**
* The current element or `null` if there is no one.
*/
element: HTMLDivElement | null;
/**
* The props values of the Chip.
*/
props: ChipProps;
}
/**
* Represents the return type of the ChipKeyboardEvent.
*/
export declare interface ChipKeyboardEvent {
/**
* The target of the ChipKeyboardEvent from ChipHandle.
*/
target: ChipHandle;
/**
* The event of the ChipKeyboardEvent.
*/
event: any;
}
/**
* @hidden
*/
export declare const ChipList: DefineComponent<ExtractPropTypes< {
id: StringConstructor;
tabIndex: NumberConstructor;
dataItems: ArrayConstructor;
defaultDataItems: {
type: ArrayConstructor;
default: () => any[];
};
value: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
defaultValue: {
type: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
default: () => any;
};
size: {
type: StringConstructor;
default: string;
};
rounded: {
type: StringConstructor;
default: string;
};
fillMode: {
type: StringConstructor;
default: string;
validator: (value: any) => any;
};
selection: {
type: StringConstructor;
default: () => "none";
};
textField: {
type: StringConstructor;
default: () => "text";
};
valueField: {
type: StringConstructor;
default: () => "value";
};
avatarField: {
type: StringConstructor;
default: () => "avatar";
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
dir: {
type: StringConstructor;
default: () => "ltr";
};
chip: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
ariaLabelledBy: StringConstructor;
ariaDescribedBy: StringConstructor;
}>, {
chipListRef: Ref<any, any>;
}, {
currentDataItems: any[];
currentDir: string;
isRtl: boolean;
currentFocused: {
value: boolean;
};
currentValue: {
value: any;
};
}, {
computedDataItems(): any;
computedValue(): any;
items(): any;
}, {
handleDispatchSelection(action: any): void;
handleDispatchFocus(action: any): void;
handleDispatchDataItems(action: any): void;
handleChange(newValue: any, event: any): void;
handleDataChange(newData: any, event: any): void;
itemsReducer(acc: any, current: any): any;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
id: StringConstructor;
tabIndex: NumberConstructor;
dataItems: ArrayConstructor;
defaultDataItems: {
type: ArrayConstructor;
default: () => any[];
};
value: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
defaultValue: {
type: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
default: () => any;
};
size: {
type: StringConstructor;
default: string;
};
rounded: {
type: StringConstructor;
default: string;
};
fillMode: {
type: StringConstructor;
default: string;
validator: (value: any) => any;
};
selection: {
type: StringConstructor;
default: () => "none";
};
textField: {
type: StringConstructor;
default: () => "text";
};
valueField: {
type: StringConstructor;
default: () => "value";
};
avatarField: {
type: StringConstructor;
default: () => "avatar";
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
dir: {
type: StringConstructor;
default: () => "ltr";
};
chip: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
ariaLabelledBy: StringConstructor;
ariaDescribedBy: StringConstructor;
}>> & Readonly<{}>, {
size: string;
rounded: string;
fillMode: string;
dir: string;
disabled: boolean;
defaultDataItems: unknown[];
defaultValue: string | number | Record<string, any> | unknown[];
selection: string;
textField: string;
valueField: string;
avatarField: string;
}, {}, {}, {}, string, () => {
kendoSelection: any;
kendoFocused: any;
kendoDataItems: any;
handleDispatchDataItems: any;
handleDispatchSelection: any;
handleDispatchFocus: any;
}, true, {}, any>;
/**
* Represents the return type of the ChipListChangeEvent.
*/
export declare interface ChipListChangeEvent {
/**
* Represents the new state value.
*/
value: any | any[];
/**
* The target of the ChipListChangeEvent from ChipListHandle.
*/
target: any;
/**
* The event of the ChipListChangeEvent.
*/
event: any;
}
/**
* Represents the return type of the ChipListDataChangeEvent.
*/
export declare interface ChipListDataChangeEvent {
/**
* Represents the new data state value.
*/
value: any | any[];
/**
* The target of the ChipListChangeEvent from ChipListHandle.
*/
target: any;
/**
* The event of the ChipListChangeEvent.
*/
event: any;
}
/**
* Represents the target(element and props) of the ChipListChangeEvent.
*/
export declare interface ChipListHandle {
/**
* The current element or `null` if there is no one.
*/
element: HTMLDivElement | null;
/**
* The props values of the ChipList.
*/
props: ChipListProps;
}
/**
* Represents the properties of [ChipList]({% slug overview_chiplist %}) component.
*/
export declare interface ChipListProps extends FormComponentProps, ChipProps {
/**
* Sets the `id` property of the top div element of the ChipList.
*/
id?: string;
/**
* Sets additional classes to the ChipList.
*/
className?: string;
/**
* Sets the `tabIndex` attribute.
*/
tabIndex?: number;
/**
* Represents Chip component.
*/
chip?: any;
/**
* Represents the data about the child Chips.
*/
dataItems?: any;
/**
* Represents the default data about the child Chips.
*/
defaultDataItems?: any[];
/**
* Triggered after Chip data change.
*/
onDatachange?: (event: ChipListDataChangeEvent) => void;
/**
* Represents the selection state of Chip component.
*/
value?: any | any[];
/**
* Represents the default value of the selection state of Chip component.
*/
defaultValue?: any | any[];
/**
* Triggered after value change.
*/
onChange?: (event: ChipListChangeEvent) => void;
/**
* Configures the `size` of the Chip.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `class`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `roundness` of the Chip.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `class`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Configures the `fillMode` of the Chip.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `class`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'outline' | 'flat' | string;
/**
* Represents the selection state of Chip component.
*/
selection?: string;
/**
* Represents the `text` field of Chip, defaults to 'text'.
*/
textField?: string;
/**
* Represents the `value` field of the Chip, defaults to 'value'.
*/
valueField?: string;
/**
* Represents the 'avatar' field in the Chip, defaults to 'avatar'.
*/
avatarField?: object;
/**
* Determines of ChipList is disabled.
*/
disabled?: boolean;
/**
* The ChipList direction 'ltr' as default or 'rtl'.
*/
dir?: string;
/**
* Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute.
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*/
ariaLabelledBy?: string;
}
/**
* Represents the return type of the ChipMouseEvent.
*/
export declare interface ChipMouseEvent {
/**
* The target of the ChipMouseEvent from ChipHandle.
*/
target: ChipHandle;
/**
* The event of the ChipMouseEvent.
*/
event: any;
}
/**
* Represents the properties of [Chip]({% slug overview_chip %}) component.
*/
export declare interface ChipProps {
/**
* Sets the `id` property of the top div element of the Chip.
*/
id?: string;
/**
* Sets the `tabIndex` attribute.
*/
tabIndex?: number;
/**
* Sets the label text of the Chip.
*/
text?: string;
/**
* Sets the `id` value of the Chip.
*/
value?: any;
/**
* The Chip direction 'ltr' as default or 'rtl'.
*/
dir?: string;
/**
* Determines if the Chip could be removed.
*/
removable?: boolean;
/**
* Determines if the Chip has custom `removeIcon`.
*/
removeIcon?: string;
/**
* Defines an remove SVGIcon to be rendered within the chip.
*/
removeSvgIcon?: SVGIcon;
/**
* Determines if the Chip is disabled.
*/
disabled?: boolean;
/**
* Determines if the Chip has an `icon`.
*/
icon?: string;
/**
* Defines an SVGIcon to be rendered within the chip.
*/
svgIcon?: SVGIcon;
/**
* Determines if the Chip has custom selection `icon`.
*/
selectedIcon?: string;
/**
* Defines an selection SVGIcon to be rendered within the chip.
*/
selectedSvgIcon?: SVGIcon;
/**
* 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
* defines the avatar template that will be shown.
*/
avatar?: string | Function | Object;
/**
* Configures the `size` of the Chip.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `class`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `roundness` of the Chip.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `class`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Configures the `fillMode` of the Chip.
*
* The available options are:
* - solid
* - outline
* - flat
* - null—Does not set a fillMode `class`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'outline' | 'flat' | string;
/**
* Configures the `themeColor` of the Chip.
*
* The available options are:
* - base
* - info
* - success
* - warning
* - error
* - null—Does not set a themeColor `class`.
*
* @default `base`
*/
themeColor?: null | 'base' | 'info' | 'success' | 'warning' | 'error' | string;
/**
* Triggered on Chip removing.
*/
onRemove?: (event: ChipRemoveEvent) => void;
/**
* Triggered on onClick event.
*/
onClick?: (event: ChipMouseEvent) => void;
/**
* Triggered on onKeyDown event.
*/
onKeydown?: (event: ChipKeyboardEvent) => void;
/**
* Triggered on onFocus event.
*/
onFocus?: (event: ChipFocusEvent) => void;
/**
* Triggered on onBlur event.
*/
onBlur?: (event: ChipFocusEvent) => void;
/**
* Represents the item data, coming from the `ChipList` component.
*/
dataItem?: any;
/**
* Determines if the Chip is selected.
*/
selected?: boolean;
/**
* Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute.
* For example these elements could contain error or hint message.
*/
ariaDescribedBy?: string;
/**
* @hidden
*/
role?: string;
/**
* @hidden
*/
onMousedown?: (event: any) => void;
}
/**
* Represents the return type of the ChipRemoveEvent.
*/
export declare interface ChipRemoveEvent {
/**
* The target of the ChipRemoveEvent from ChipHandle.
*/
target: ChipHandle;
/**
* The event of the ChipRemoveEvent.
*/
event: any;
}
/**
* @hidden
*/
export declare const DropDownButton: DefineComponent<ExtractPropTypes< {
accessKey: PropType<string>;
items: {
type: PropType<any[]>;
default: () => any[];
};
ariaLabel: PropType<string>;
text: PropType<any>;
textField: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconClass: PropType<string>;
imageUrl: PropType<string>;
popupSettings: PropType<ButtonsPopupSettings_2>;
itemRender: PropType<any>;
item: PropType<any>;
size: {
type: PropType<string>;
default: string;
};
shape: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
opened: {
type: PropType<boolean>;
default: any;
};
buttonClass: PropType<string>;
dir: PropType<string>;
}>, {
kendoAnchorRef: Ref<any, any>;
}, {
currentOpened: boolean;
focused: boolean;
focusedIndex: number;
}, {
computedOpened(): boolean;
wrapperClass(): {
'k-dropdown-button': boolean;
'k-focus': any;
};
}, {
element(): HTMLButtonElement | null;
onKeyDown(event: any): void;
onFocus(event: any): void;
onBlur(event: any): void;
createBlurTimeout(event: any): void;
onItemClick(event: any, clickedItemIndex: number): void;
onItemDown(event: any): void;
mouseDown(event: any): void;
dispatchClickEvent(dispatchedEvent: any, index: number): void;
onClickMainButton(event: any): void;
dispatchPopupEvent(dispatchedEvent: any, open: boolean): void;
isItemDisabled(index: number): any;
isRtl(): boolean;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
focus: any;
blur: any;
itemclick: any;
open: any;
close: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
accessKey: PropType<string>;
items: {
type: PropType<any[]>;
default: () => any[];
};
ariaLabel: PropType<string>;
text: PropType<any>;
textField: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconClass: PropType<string>;
imageUrl: PropType<string>;
popupSettings: PropType<ButtonsPopupSettings_2>;
itemRender: PropType<any>;
item: PropType<any>;
size: {
type: PropType<string>;
default: string;
};
shape: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
rounded: {
type: PropType<string>;
default: string;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
opened: {
type: PropType<boolean>;
default: any;
};
buttonClass: PropType<string>;
dir: PropType<string>;
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onClose?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onOpen?: (...args: any[] | unknown[]) => any;
onItemclick?: (...args: any[] | unknown[]) => any;
}>, {
themeColor: string;
size: string;
shape: string;
rounded: string;
fillMode: string;
items: any[];
opened: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
export declare interface DropDownButtonBlurEvent {
}
export declare interface DropDownButtonCloseEvent {
}
export declare interface DropDownButtonFocusEvent {
}
/**
* The arguments for the `itemClick` event.
*/
export declare interface DropDownButtonItemClickEvent {
/**
* The clicked item.
*/
item: any;
/**
* The zero-based index of the clicked item.
*/
itemIndex: number;
/**
* The native browser event.
*/
event: any;
}
export declare interface DropDownButtonOpenEvent {
}
export declare interface DropDownButtonProps {
/**
* Specifies the `accessKey` of the main button.
*/
accessKey?: string;
/**
* Specifies the `ariaLabel` of the main button. By default it is set to the text of the DropDownButton and 'dropdownbutton'.
*/
ariaLabel?: string;
/**
* Specifies the text of the main button ([see example]({% slug overview_dropdownbutton %})).
*/
text?: any;
/**
* Specifies the list items ([see example]({% slug binding_dropdownbutton %}#toc-arrays-of-objects)).
*/
items?: any[];
/**
* 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)).
*/
textField?: string;
/**
* Specifies the `tabIndex` of the main button.
*/
tabIndex?: number;
/**
* Determines whether the component is disabled ([see example]({% slug disabled_dropdownbutton %})).
*/
disabled?: boolean;
/**
* Opens the popup of the DropDownButton if set to `true`.
*/
opened?: boolean;
/**
* Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
*/
icon?: string;
/**
* Defines an SVGIcon to be rendered within the DropDownButton.
*/
svgIcon?: SVGIcon;
/**
* Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
*/
iconClass?: string;
/**
* Defines the location of an image that will be displayed next to the main button text ([see example]({% slug icons_dropdownbutton %})).
*/
imageUrl?: string;
/**
* Configures the popup
* ([see example]({% slug customization_dropdownbutton %}#toc-popup)).
*/
popupSettings?: ButtonsPopupSettings;
/**
* 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.
*/
item?: null | any;
/**
* Fires when a dropdown list button item is about to be rendered. Use it to override the default appearance of the list items.
* if `item` prop is not declared, `itemRender` behaves like `item`, for backward compatibility with versions before 4.2.0
*/
itemRender?: any;
/**
* Sets the `className` of the main button.
*/
buttonClass?: string;
/**
* Sets the direction of the component.
*/
dir?: string;
/**
* Configures the `size` of the Button.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
/**
* Configures the `shape` of the Button.
*
* The available options are:
* - rectangle
* - square
* - null—Does not set a shape `className`.
*
* @default `rectangle`
*/
shape?: null | 'rectangle' | 'square' | string;
/**
* Configures the `roundness` of the Button.
*
* The available options are:
* - small
* - medium
* - large
* - circle
* - full
* - null—Does not set a rounded `className`.
*
* @default `medium`
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
/**
* Configures the `fillMode` of the Button.
*
* The available options are:
* - solid
* - outline
* - flat
* - link
* - null—Does not set a fillMode `className`.
*
* @default `solid`
*/
fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | string;
/**
* Configures the `themeColor` of the Button.
*
* The available options are:
* - base
* - primary
* - secondary
* - tertiary
* - info
* - success
* - warning
* - dark
* - light
* - inverse
* - null—Does not set a themeColor `className`.
*
* @default `base`
*/
themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse' | string;
/**
* Fires when the component is focused ([see example]({% slug events_dropdownbutton %})).
*/
onFocus?: (event: DropDownButtonFocusEvent) => void;
/**
* Fires when the component is blurred ([see example]({% slug events_dropdownbutton %})).
*/
onBlur?: (event: DropDownButtonBlurEvent) => void;
/**
* Fires when an item is clicked ([see example]({% slug events_dropdownbutton %})).
*/
onItemclick?: (event: DropDownButtonItemClickEvent) => void;
/**
* Fires when the popup which contains the items is opened ([see example]({% slug events_dropdownbutton %})).
*/
onOpen?: (event: DropDownButtonOpenEvent) => void;
/**
* Fires when the popup which contains the items is closed ([see example]({% slug events_dropdownbutton %})).
*/
onClose?: (event: DropDownButtonCloseEvent) => void;
}
/**
* @hidden
*/
export declare const FloatingActionButton: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
dir: PropType<string>;
tabIndex: PropType<number>;
accessKey: PropType<string>;
disabled: {
type: PropType<boolean>;
default: boolean;
};
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconClass: PropType<string>;
items: PropType<any>;
item: PropType<any>;
text: PropType<string>;
alignOffset: PropType<FloatingActionButtonAlignOffset_2>;
opened: {
type: PropType<boolean>;
default: any;
};
align: {
type: PropType<FloatingActionButtonAlign>;
default: () => FloatingActionButtonAlign;
};
positionMode: {
type: PropType<FloatingActionButtonPositionMode>;
default: () => FloatingActionButtonPositionMode;
};
popupSettings: {
type: PropType<FloatingActionButtonPopupSettings_2>;
default: () => {};
};
shape: {
type: PropType<string>;
default: () => FloatingActionButtonShape;
};
rounded: {
type: PropType<string>;
default: string;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
size: {
type: PropType<FloatingActionButtonSize>;
default: () => FloatingActionButtonSize;
};
themeColor: {
type: PropType<FloatingActionButtonThemeColor>;
default: () => FloatingActionButtonThemeColor;
};
}>, {
chipRef: Ref<any, any>;
kendoAnchorRef: Ref<any, any>;
}, {
currentOpened: boolean;
currentFocused: boolean;
focusedIndex: number;
currentDir: string;
isRtl: boolean;
}, {
buttonClassNames(): {
[x: string]: any;
'k-fab': boolean;
'k-disabled': any;
'k-focus': any;
};
computedOpened(): any;
rootClassNames(): string;
}, {
dispatchPopupEvent(dispatchedEvent: any, isOpen?: boolean): void;
handleClick(event: any): void;
handleFocus(event: any): void;
handleBlur(event: any): void;
handleMouseDown(event: any): void;
handleMouseUp(event: any): void;
dispatchItemClickEvent(dispatchedEvent: any, index: number): void;
handleItemClick(event: any, clickedItemIndex: number): void;
handleItemDown(event: any): void;
handleKeyDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
mousedown: any;
mouseup: any;
open: any;
close: any;
itemclick: any;
focus: any;
blur: any;
keydown: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
dir: PropType<string>;
tabIndex: PropType<number>;
accessKey: PropType<string>;
disabled: {
type: PropType<boolean>;
default: boolean;
};
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconClass: PropType<string>;
items: PropType<any>;
item: PropType<any>;
text: PropType<string>;
alignOffset: PropType<FloatingActionButtonAlignOffset_2>;
opened: {
type: PropType<boolean>;
default: any;
};
align: {
type: PropType<FloatingActionButtonAlign>;
default: () => FloatingActionButtonAlign;
};
positionMode: {
type: PropType<FloatingActionButtonPositionMode>;
default: () => FloatingActionButtonPositionMode;
};
popupSettings: {
type: PropType<FloatingActionButtonPopupSettings_2>;
default: () => {};
};
shape: {
type: PropType<string>;
default: () => FloatingActionButtonShape;
};
rounded: {
type: PropType<string>;
default: string;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
size: {
type: PropType<FloatingActionButtonSize>;
default: () => FloatingActionButtonSize;
};
themeColor: {
type: PropType<FloatingActionButtonThemeColor>;
default: () => FloatingActionButtonThemeColor;
};
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
onBlur?: (...args: any[] | unknown[]) => any;
onClose?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onMousedown?: (...args: any[] | unknown[]) => any;
onMouseup?: (...args: any[] | unknown[]) => any;
onOpen?: (...args: any[] | unknown[]) => any;
onItemclick?: (...args: any[] | unknown[]) => any;
}>, {
themeColor: FloatingActionButtonThemeColor;
size: FloatingActionButtonSize;
shape: string;
rounded: string;
fillMode: string;
disabled: boolean;
opened: boolean;
align: FloatingActionButtonAlign;
positionMode: FloatingActionButtonPositionMode;
popupSettings: FloatingActionButtonPopupSettings_2;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container.
*
* > Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case.
* Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and
* vertical: "middle" at the same time is not supported.
*/
export declare interface FloatingActionButtonAlign {
/**
* Defines the possible horizontal alignment of the Floating Action Button.
*
* The available values are:
* - `start`—Uses the start point of the container.
* - `center`—Uses the center point of the container.
* - `end`(Default)—Uses the end point of the container.
*/
horizontal?: 'start' | 'center' | 'end';
/**
* Defines the possible vertical alignment of the Floating Action Button.
*
* The available values are:
* - `top`—Uses the top point of the container.
* - `middle`—Uses the middle point of the container.
* - `bottom`(Default)—Uses the bottom point of the container.
*/
vertical?: 'top' | 'middle' | 'bottom';
}
/**
* Specifies the horizontal and vertical offset applied to the Floating Action Button.
*
* Normally, the floating button is positioned next to the boundaries of its container with a default offset of `16px`.
*
* Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
* not in a corner, can be moved along the container's boundary or towards the center of the container.
*
* A negative offset can be used to force a button to overflow the boundaries of its container.
*/
export declare interface FloatingActionButtonAlignOffset {
/**
* Sets the horizontal offset of the Floating Action Button.
*/
x?: number | string;
/**
* Sets the vertical offset of the Floating Action Button.
*/
y?: number | string;
}
/**
* Represents the return type of the FloatingActionButton events.
*/
export declare interface FloatingActionButtonEvent {
}
/**
* The FloatingActionButton ref.
*/
export declare interface FloatingActionButtonHandle {
/**
* The FloatingActionButton element.
*/
element: HTMLButtonElement | null;
/**
* Focus the FloatingActionButton.
*/
focus: () => void;
}
/**
* @hidden
*/
export declare const FloatingActionButtonItem: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
disabled: PropType<boolean>;
focused: PropType<boolean>;
index: PropType<number>;
icon: PropType<string>;
item: PropType<any>;
dataItem: PropType<any>;
text: PropType<string>;
tabIndex: PropType<number>;
customProp: PropType<any>;
class: PropType<string>;
}>, {
elementRef: Ref<any, any>;
}, {}, {
itemClassNames(): string;
}, {
handleClick(event: any): void;
focusElement(): void;
onMouseDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
down: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
disabled: PropType<boolean>;
focused: PropType<boolean>;
index: PropType<number>;
icon: PropType<string>;
item: PropType<any>;
dataItem: PropType<any>;
text: PropType<string>;
tabIndex: PropType<number>;
customProp: PropType<any>;
class: PropType<string>;
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
onDown?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the return type of the FloatingActionButtonItemEvent.
*/
export declare interface FloatingActionButtonItemEvent {
/**
* The clicked item props.
*/
itemProps?: any;
/**
* The zero-based index of the clicked item.
*/
itemInd