@progress/kendo-vue-layout
Version:
1,695 lines (1,644 loc) • 144 kB
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 { BottomNavigationItemProps as BottomNavigationItemProps_2 } from './BottomNavigationItemProps';
import { BreadcrumbDataModel as BreadcrumbDataModel_2 } from './interfaces/BreadcrumbProps';
import { BreadcrumbDelimiterProps as BreadcrumbDelimiterProps_2 } from '..';
import { BreadcrumbLinkMouseEvent as BreadcrumbLinkMouseEvent_2 } from './interfaces/BreadcrumbProps';
import { BreadcrumbLinkProps as BreadcrumbLinkProps_2 } from '..';
import { BreadcrumbListItemProps as BreadcrumbListItemProps_2 } from '..';
import { BreadcrumbOrderedListProps as BreadcrumbOrderedListProps_2 } from '..';
import { Component } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { DrawerAnimation as DrawerAnimation_2 } from '..';
import { DrawerItemProps as DrawerItemProps_2 } from '..';
import { DrawerSelectEvent as DrawerSelectEvent_2 } from '..';
import { ExtractPropTypes } from 'vue';
import { GridLayoutColumnProps as GridLayoutColumnProps_2 } from '..';
import { GridLayoutGap as GridLayoutGap_2 } from './interfaces/GridLayoutProps';
import { GridLayoutRowProps as GridLayoutRowProps_2 } from '..';
import { MenuItemModel as MenuItemModel_2 } from '../..';
import { MenuSelectEvent as MenuSelectEvent_2 } from '../events';
import { Navigation } from '@progress/kendo-vue-common';
import { PanelBarExpandMode as PanelBarExpandMode_2 } from './interfaces/PanelBarProps';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { Ref } from 'vue';
import { RendererElement } from 'vue';
import { RendererNode } from 'vue';
import { StepProps as StepProps_2 } from '..';
import { SVGIcon } from '@progress/kendo-vue-common';
import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
import { VNode } from 'vue';
/**
* @hidden
*/
export declare const ActionSheet: DefineComponent<ExtractPropTypes< {
expand: PropType<boolean>;
animation: {
type: PropType<boolean>;
default: boolean;
};
animationDuration: {
type: PropType<number>;
default: number;
};
animationStyles: PropType<any>;
tabIndex: PropType<number>;
items: PropType<ActionSheetItemProps[]>;
subTitle: PropType<string>;
title: PropType<string>;
className: PropType<string>;
headerClassName: {
type: PropType<string>;
default: any;
};
contentClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
footerClassName: {
type: PropType<string>;
default: any;
};
header: PropType<string | Function>;
content: PropType<string | Function>;
footer: PropType<string | Function>;
item: PropType<string | Function>;
navigatable: {
type: PropType<boolean>;
default: boolean;
};
navigatableElements: {
type: PropType<string[]>;
default: () => any[];
};
actions: PropType<any>;
onClose: PropType<(event: any) => void>;
}>, {}, {
show: boolean;
slide: boolean;
}, {
topGroupItems(): Array<ActionSheetItemProps> | undefined;
bottomGroupItems(): Array<ActionSheetItemProps> | undefined;
shouldRenderSeparator(): boolean;
}, {
handleKeyDown(e: any): void;
onTab(target: HTMLElement, nav: Navigation, ev: any): void;
handleOverlayClick(ev: any): void;
handleItemClick(ev: {
syntheticEvent: any;
title?: string;
item?: any;
}): void;
onEnter(target: HTMLElement, nav: Navigation, ev: any): void;
onEscape(_target: HTMLElement, _nav: Navigation, ev: any): void;
hideActionSheet(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
expand: PropType<boolean>;
animation: {
type: PropType<boolean>;
default: boolean;
};
animationDuration: {
type: PropType<number>;
default: number;
};
animationStyles: PropType<any>;
tabIndex: PropType<number>;
items: PropType<ActionSheetItemProps[]>;
subTitle: PropType<string>;
title: PropType<string>;
className: PropType<string>;
headerClassName: {
type: PropType<string>;
default: any;
};
contentClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
footerClassName: {
type: PropType<string>;
default: any;
};
header: PropType<string | Function>;
content: PropType<string | Function>;
footer: PropType<string | Function>;
item: PropType<string | Function>;
navigatable: {
type: PropType<boolean>;
default: boolean;
};
navigatableElements: {
type: PropType<string[]>;
default: () => any[];
};
actions: PropType<any>;
onClose: PropType<(event: any) => void>;
}>> & Readonly<{}>, {
animation: boolean;
contentClassName: string;
animationDuration: number;
headerClassName: string;
headerStyle: string;
footerClassName: string;
navigatable: boolean;
navigatableElements: string[];
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const ActionSheetContent: DefineComponent<ExtractPropTypes< {
contentClassName: {
type: PropType<string>;
default: any;
};
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
contentClassName: {
type: PropType<string>;
default: any;
};
}>> & Readonly<{}>, {
contentClassName: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const ActionSheetFooter: DefineComponent<ExtractPropTypes< {
footerClassName: {
type: PropType<string>;
default: any;
};
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
footerClassName: {
type: PropType<string>;
default: any;
};
}>> & Readonly<{}>, {
footerClassName: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const ActionSheetHeader: DefineComponent<ExtractPropTypes< {
headerClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
headerClassName: {
type: PropType<string>;
default: any;
};
headerStyle: {
type: PropType<string>;
default: any;
};
}>> & Readonly<{}>, {
headerClassName: string;
headerStyle: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare const ActionSheetItem: DefineComponent<ExtractPropTypes< {
id: PropType<number>;
description: PropType<string>;
disabled: PropType<boolean>;
group: {
type: PropType<string>;
validator: (value?: string) => any;
};
item: PropType<object>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconColor: PropType<string>;
iconSize: PropType<string>;
content: PropType<string | Function>;
title: PropType<string>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>, {}, {}, {
wrapperClass(): {
'k-actionsheet-item': boolean;
'k-cursor-pointer': boolean;
'k-disabled': any;
};
}, {
onClick(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
click: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<number>;
description: PropType<string>;
disabled: PropType<boolean>;
group: {
type: PropType<string>;
validator: (value?: string) => any;
};
item: PropType<object>;
icon: PropType<string>;
svgIcon: PropType<SVGIcon>;
iconColor: PropType<string>;
iconSize: PropType<string>;
content: PropType<string | Function>;
title: PropType<string>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>> & Readonly<{
onClick?: (...args: any[] | unknown[]) => any;
}>, {
tabIndex: number;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the props of the Kendo UI for Vue ActionSheetItem.
*/
export declare interface ActionSheetItemProps {
/**
* Sets additional CSS classes to the ActionSheetItem.
*/
class?: string;
/**
* Sets additional CSS styles to the ActionSheetItem.
*/
style?: object;
/**
* Specifies additional text rendered under the item's title.
*/
description?: string;
/**
* Specifies if the ActionSheet item is initially disabled.
*/
disabled?: boolean;
/**
* Defines the group of the item. Items can be segregated in two groups - `top` and `bottom`.
* Each specifying whether the ActionSheet item will be rendered over the separator or under it.
*/
group?: 'top' | 'bottom' | string;
/**
* Defines the icon rendered inside the ActionSheet item.
*/
icon?: string;
/**
* Defines an SVGIcon to be rendered inside the ActionSheet item.
*/
svgIcon?: SVGIcon;
/**
* Defines an size of the icon or SVGIcon that is rendered inside the ActionSheet item.
*/
iconSize?: string;
/**
* Defines the color of the icon or SVGIcon that is rendered inside the ActionSheet item.
*/
iconColor?: string;
/**
* Specifies the text content of the ActionSheet item.
*/
title?: string;
/**
* @hidden
*/
item?: object;
/**
* Sets the content of the ActionSheetItem either as string that is pointing to a slot template of as render function.
*/
content?: string | Function;
/**
* @hidden
*/
onClick?: (event: {
event: any;
title?: string;
}) => void;
/**
* @hidden
*/
onKeydown?: (event: any, title: string | undefined, id: number | undefined) => void;
/**
* @hidden
*/
id?: number;
/**
* The tabIndex of the ActionSheetItem.
*/
tabIndex?: number;
}
/**
* The props of the ActionSheet component.
*/
export declare interface ActionSheetProps {
/**
* The collection of items that will be rendered in the ActionSheet.
*/
items?: ActionSheetItemProps[];
/**
* Specifies the text that is rendered under the title.
*/
subTitle?: string;
/**
* Specifies the text that is rendered as title.
*/
title?: string;
/**
* Fires when the modal overlay is clicked.
*/
onClose?: (event: any) => void;
/**
* Fires when an ActionSheet item is clicked.
*/
onItemselect?: (event: {
syntheticEvent: any;
title?: string;
item?: any;
}) => void;
/**
* Specifies the `tabIndex` of the ActionSheet.
*/
tabIndex?: number;
/**
* Specifies if the ActionSheet can be navigatable with keyboard.
* Defaults to `true`.
*/
navigatable?: boolean;
/**
* Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
*/
navigatableElements?: string[];
/**
* Controls the popup animation. By default, the animation is enabled.
*/
animation?: boolean;
/**
* @hidden
*/
animationStyles?: any;
/**
* @hidden
* Used to render the close button in the header of the ActionSheet.
*/
actions?: any;
/**
* Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
*/
animationDuration?: number;
/**
* The CSS classes that will be rendered on the inner ActionSheet element.
*/
className?: string;
/**
* The CSS classes that will be rendered on the DOM element that wraps the header section of the ActionSheet element.
*/
headerClassName?: string;
/**
* The CSS classes that will be rendered on the DOM element that wraps the footer section of the ActionSheet element.
*/
footerClassName?: string;
/**
* The CSS classes that will be rendered on the DOM element that wraps the content section of the ActionSheet element.
*/
contentClassName?: string;
/**
* The custom Styles that will be applied on the DOM element that wraps the header section of the ActionSheet element.
*/
headerStyle?: string;
/**
* Sets the header content of the ActionSheet either as string that is pointing to a slot template of as render function.
*/
header?: string | Function;
/**
* Sets the content content of the ActionSheet either as string that is pointing to a slot template of as render function.
*/
content?: string | Function;
/**
* Sets the footer content of the ActionSheet either as string that is pointing to a slot template of as render function.
*/
footer?: string | Function;
/**
* Sets the item content of the ActionSheet either as string that is pointing to a slot template of as render function.
*/
item?: string | Function;
/**
* Specifies the state of the ActionSheet.
*/
expand?: boolean;
}
/**
* @hidden
*/
export declare const AppBar: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): AppBarComputed['wrapperClass'];
}, {
focus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
};
position: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
themeColor: string;
position: string;
positionMode: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface AppBarComputed {
[key: string]: any;
wrapperClass: object;
}
/**
* Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
*
* * The possible values are:
* * 'top' (Default)
* * 'bottom'
*
*/
export declare type AppBarPosition = 'top' | 'bottom';
/**
* Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-position-mode)).
*
* * The possible values are:
* * 'static' (Default)
* * 'sticky'
* * 'fixed'
*/
export declare type AppBarPositionMode = 'static' | 'sticky' | 'fixed';
/**
* Represents the props of the [Kendo UI for Vue AppBar component]({% slug overview_appbar %}).
* Used to display information, actions, branding titles and additional navigation on the current screen.
*/
export declare interface AppBarProps {
/**
* Sets the `id` property of the root AppBar element.
*/
id?: string;
/**
* Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
*
* * The possible values are:
* * 'top' (Default)
* * 'bottom'
*
*/
position?: AppBarPosition | string;
/**
* Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-position-mode)).
*
* * The possible values are:
* * 'static' (Default)
* * 'sticky'
* * 'fixed'
*/
positionMode?: AppBarPositionMode | string;
/**
* Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
*
* * The possible values are:
* * `light` (Default)
* * 'primary'
* * 'dark'
* * 'inherit'
*
*/
themeColor?: AppBarThemeColor | string;
}
/**
* @hidden
*/
export declare const AppBarSection: DefineComponent< {}, {}, {}, {}, {
focus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface AppBarSectionComputed {
[key: string]: any;
wrapperClass: object;
}
/**
* @hidden
*/
export declare const AppBarSpacer: DefineComponent<ExtractPropTypes< {
width: PropType<string | number>;
}>, {}, {}, {
spacerClasses(): AppBarSpacerComputed['spacerClasses'];
spacerStyles(): AppBarSpacerComputed['spacerStyles'];
}, {
focus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
width: PropType<string | number>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface AppBarSpacerComputed {
[key: string]: any;
spacerClasses: object;
spacerStyles: object;
}
/**
* Represents the props of the [Kendo UI for Vue AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-defining-spacings).
* Used to give additional white space between the AppBar sections and provides a way for customizing its width.
*/
export declare interface AppBarSpacerProps {
width?: string | number;
}
/**
* Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
*
* * The possible values are:
* * `inherit`
* * `light` (Default)
* * `dark`
*
*/
export declare type AppBarThemeColor = 'light' | 'dark' | 'inherit';
/**
* @hidden
*/
export declare const Avatar: DefineComponent<ExtractPropTypes< {
type: {
type: PropType<string>;
default: avatarType;
validator: (value: string) => any;
};
border: PropType<boolean>;
rounded: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): AvatarComputed['wrapperClass'];
innerClass(): AvatarComputed['innerClass'];
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
type: {
type: PropType<string>;
default: avatarType;
validator: (value: string) => any;
};
border: PropType<boolean>;
rounded: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
size: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {
type: string;
themeColor: string;
size: string;
rounded: string;
fillMode: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface AvatarComputed {
[key: string]: any;
wrapperClass: object;
innerClass: object;
}
declare enum avatarType {
TEXT = "text",
IMAGE = "image",
ICON = "icon"
}
/**
* An interface which holds the shared properties of the MenuItemModel and the MenuItem components.
*/
declare interface BaseMenuItem {
/**
* Specifies the item text ([see example]({% slug itemproperties_menu %}#toc-text)).
*/
text?: string;
/**
* Specifies a URL which is rendered as a `href` attribute on the item link ([see example]({% slug itemproperties_menu %}#toc-url)).
*/
url?: string;
/**
* Specifies the name of the [FontIcon]({% slug overview_icon %}) that will be rendered for the item).
*/
icon?: string;
/**
* Specifies the name of the [SVGIcon]({% slug overview_svgicon %}) that will be rendered for the item).
*/
svgIcon?: SVGIcon_2;
/**
* Specifies if the item is disabled ([see example]({% slug itemproperties_menu %}#toc-disabled-items)).
*/
disabled?: boolean;
/**
* The additional CSS classes that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
*/
cssClass?: string;
/**
* The additional CSS classes that will be rendered on the item's popup.
*/
popupClass?: string;
/**
* The CSS styles that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
*/
cssStyle?: any;
/**
* A Vue functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
*/
render?: any;
/**
* A Vue functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
*/
linkRender?: any;
/**
* A Vue functional or class component which is used for rendering content instead of the item children ([see example]({% slug rendering_menu %}#toc-content)).
*/
contentRender?: any;
/**
* Represents any additional data that is associated with the Menu item.
*/
data?: any;
/**
* Specifies if this is a separator item. If set to true only the `cssClass` and `cssStyle` props should be rendered along.
*/
separator?: boolean;
}
/**
* @hidden
*/
export declare const BottomNavigation: DefineComponent<ExtractPropTypes< {
dir: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fill: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
item: PropType<any>;
items: PropType<BottomNavigationItemProps_2[]>;
itemFlow: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
border: {
type: PropType<boolean>;
default: boolean;
};
disabled: PropType<boolean>;
selected: PropType<number>;
}>, {}, {}, {
navClasses(): {
[x: string]: any;
[x: number]: boolean;
'k-bottom-nav': boolean;
'k-bottom-nav-border': any;
'k-disabled': any;
};
}, {
focus(): void;
dispatchSelectEvent(dispatchedEvent: any, index: number): void;
handleSelect(event: any, clickedItemIndex: number): void;
handleKeyDown(event: any, clickedItemIndex: number): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
keydown: any;
select: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
dir: PropType<string>;
themeColor: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fill: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
fillMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
item: PropType<any>;
items: PropType<BottomNavigationItemProps_2[]>;
itemFlow: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
positionMode: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
border: {
type: PropType<boolean>;
default: boolean;
};
disabled: PropType<boolean>;
selected: PropType<number>;
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
}>, {
fill: string;
themeColor: string;
border: boolean;
fillMode: string;
positionMode: string;
itemFlow: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface BottomNavigationComputed {
[key: string]: any;
navClasses: object;
}
/**
* Represents the return type of the BottomNavigation events.
*/
export declare interface BottomNavigationEvent {
}
/**
* The fill style of the BottomNavigation
* ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
*
* The possible values are:
* * `flat`(Default) — Sets the theme color as the text color. The background will be white.
* * `solid` — Sets the theme color as a background color.
*
*/
export declare type BottomNavigationFill = 'solid' | 'flat';
/**
* @hidden
*/
export declare const BottomNavigationItem: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
disabled: PropType<boolean>;
selected: PropType<boolean>;
icon: PropType<any>;
item: PropType<any>;
text: PropType<any>;
dataItem: PropType<any>;
index: PropType<number>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>, {}, {}, {
itemClasses(): BottomNavigationItemComputed['itemClasses'];
}, {
handleClick(event: any): void;
handleKeyDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
keydown: any;
select: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
disabled: PropType<boolean>;
selected: PropType<boolean>;
icon: PropType<any>;
item: PropType<any>;
text: PropType<any>;
dataItem: PropType<any>;
index: PropType<number>;
tabIndex: {
type: PropType<number>;
default: number;
};
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
}>, {
tabIndex: number;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface BottomNavigationItemComputed {
[key: string]: any;
itemClasses: object;
}
/**
* Specifies how the icon and text label are positioned in each item of the BottomNavigation
* ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
*
* The possible values are:
* * `vertical`(Default) — Renders the text below the icon.
* * `horizontal` — Renders the text and the icon on the same line.
*/
export declare type BottomNavigationItemFlow = 'vertical' | 'horizontal';
/**
* The interface for describing items that can be passed to the `items` property of the BottomNavigation component.
*/
export declare interface BottomNavigationItemProps {
/**
* Style the BottomNavigation item.
*/
style?: object;
/**
* Class the BottomNavigation item.
*/
class?: string;
/**
* Disables the BottomNavigation item.
*/
disabled?: boolean;
/**
* Specifies if the BottomNavigation item is selected.
*/
selected?: boolean;
/**
* Defines the name for an existing icon in a Kendo UI for Vue theme.
* The icon is rendered inside the BottomNavigation item by a `span.k-icon` element.
*/
icon?: any;
/**
* Specifies the text content of the BottomNavigation item.
*/
text?: any;
/**
* Sets the `tabIndex` property of the BottomNavigation item. Defaults to `0`.
*/
tabIndex?: number;
/**
* Sets a custom property. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
*/
[customProp: string]: any;
/**
* @hidden
*/
index?: number;
/**
* @hidden
*/
item?: any;
/**
* @hidden
*/
dataItem?: any;
/**
* @hidden
*/
id?: string;
}
/**
* Specifies the position and behavior of the BottomNavigation when the page is scrolled
* ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
*
* The possible values are:
* * `fixed`(Default) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
* * `sticky` — Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between
* static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
* It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
*/
export declare type BottomNavigationPositionMode = 'sticky' | 'fixed';
/**
* Represents the props of the [Kendo UI for Vue BottomNavigation component]({% slug overview_bottomnavigation %}).
*/
export declare interface BottomNavigationProps {
/**
* Sets the `id` property of the root BottomNavigation element.
*/
id?: string;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Specifies the theme color of the BottomNavigation
* ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
*
* The possible values are:
* * `primary` (Default) — Applies coloring based on the primary theme color.
* * `secondary` — Applies coloring based on the secondary theme color.
* * `tertiary` — Applies coloring based on the tertiary theme color.
* * `info` — Applies coloring based on the info theme color.
* * `success` — Applies coloring based on the success theme color.
* * `warning` — Applies coloring based on the warning theme color.
* * `error` — Applies coloring based on the error theme color.
* * `dark` — Applies coloring based on the dark theme color.
* * `light` — Applies coloring based on the light theme color.
* * `inverse` — Applies coloring based on the inverted theme color.
*/
themeColor?: BottomNavigationThemeColor | string;
/**
* The fill style of the BottomNavigation
* ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
*
* The possible values are:
* * `flat`(Default) — Sets the theme color as the text color. The background will be white.
* * `solid` — Sets the theme color as a background color.
*/
fillMode?: BottomNavigationFill | string;
/**
* @hidden
*/
fill?: BottomNavigationFill | string;
/**
* Specifies the position and behavior of the BottomNavigation when the page is scrolled
* ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
*
* The possible values are:
* * `fixed`(Default) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
* * `sticky` — Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static
* and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
* It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
*/
positionMode?: BottomNavigationPositionMode | string;
/**
* Specifies how the icon and text label are positioned in each item of the BottomNavigation
* ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
*
* The possible values are:
* * `vertical`(Default) — Renders the text below the icon.
* * `horizontal` — Renders the text and the icon on the same line.
*/
itemFlow?: BottomNavigationItemFlow | string;
/**
* Sets a border to the BottomNavigation.
*/
border?: boolean;
/**
* Disables the whole BottomNavigation.
*/
disabled?: boolean;
/**
* The index of the selected BottomNavigationItem.
*/
selected?: number;
/**
* The collection of items that will be rendered in the BottomNavigation ([see example]({% slug overview_bottomnavigation %})).
*/
items?: Array<BottomNavigationItemProps>;
/**
* Overrides the default component's content responsible for visualizing a single item
* ([see example]({% slug custom_rendering_bottomnavigation %}#toc-custom-rendering)).
*/
item?: any;
/**
* Fires when a BottomNavigation item is about to be rendered
* ([see example]({% slug custom_rendering_bottomnavigation %}#toc-item-render-property)).
* Used to override the default appearance of the items.
*/
itemRender?: any;
/**
* Fires when a BottomNavigation item is selected.
*/
onSelect?: (event: BottomNavigationSelectEvent) => void;
/**
* Triggered on `onKeyDown` event.
*/
onKeyDown?: (event: BottomNavigationEvent) => void;
}
/**
* The arguments for the `onSelect` BottomNavigation event.
*/
export declare interface BottomNavigationSelectEvent {
/**
* A BottomNavigation item event target.
*/
itemTarget: any;
/**
* The index of the selected BottomNavigation item.
*/
itemIndex: number;
}
/**
* Specifies the theme color of the BottomNavigationThemeColor.
* ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
*
* The possible values are:
* * `primary` (Default) — Applies coloring based on the primary theme color.
* * `secondary` — Applies coloring based on the secondary theme color.
* * `tertiary` — Applies coloring based on the tertiary theme color.
* * `info` — Applies coloring based on the info theme color.
* * `success` — Applies coloring based on the success theme color.
* * `warning` — Applies coloring based on the warning theme color.
* * `error` — Applies coloring based on the error theme color.
* * `dark` — Applies coloring based on the dark theme color.
* * `light` — Applies coloring based on the light theme color.
* * `inverse` — Applies coloring based on the inverted theme color.
*/
export declare type BottomNavigationThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
/**
* Represents the Breadcrumb component.
*/
export declare const Breadcrumb: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
collapseMode: {
type: PropType<"none" | "auto" | "wrap">;
default: string;
validator: (value: string) => any;
};
ariaLabel: {
type: PropType<string>;
default: string;
};
breadcrumbOrderedList: PropType<Component<BreadcrumbOrderedListProps_2>>;
breadcrumbListItem: PropType<Component<BreadcrumbListItemProps_2>>;
breadcrumbDelimiter: PropType<Component<BreadcrumbDelimiterProps_2>>;
breadcrumbLink: PropType<Component<BreadcrumbLinkProps_2>>;
dataItems: {
type: PropType<BreadcrumbDataModel_2[]>;
default: any[];
};
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
dir: {
type: PropType<"rtl" | "ltr">;
default: any;
};
valueField: {
type: PropType<string>;
default: string;
};
textField: {
type: PropType<string>;
default: string;
};
svgIconField: {
type: PropType<string>;
default: string;
};
iconField: {
type: PropType<string>;
default: string;
};
onSelect: PropType<(event: BreadcrumbLinkMouseEvent_2) => void>;
onKeydown: PropType<(event: any) => void>;
}>, {
breadcrumbRef: Ref<any, any>;
}, {
currentDir: string;
localData: BreadcrumbDataModel_2[];
listItems: any[];
itemsData: any[];
addDelimiter: boolean;
}, {
itemClasses(): BreadcrumbComputed['itemClasses'];
}, {
getLastHiddenItemWidth(): any[];
calculateMedia(): void;
handleSelect(event: any): void;
handleKeyDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
select: any;
keydown: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
collapseMode: {
type: PropType<"none" | "auto" | "wrap">;
default: string;
validator: (value: string) => any;
};
ariaLabel: {
type: PropType<string>;
default: string;
};
breadcrumbOrderedList: PropType<Component<BreadcrumbOrderedListProps_2>>;
breadcrumbListItem: PropType<Component<BreadcrumbListItemProps_2>>;
breadcrumbDelimiter: PropType<Component<BreadcrumbDelimiterProps_2>>;
breadcrumbLink: PropType<Component<BreadcrumbLinkProps_2>>;
dataItems: {
type: PropType<BreadcrumbDataModel_2[]>;
default: any[];
};
size: {
type: PropType<"small" | "medium" | "large">;
default: string;
};
dir: {
type: PropType<"rtl" | "ltr">;
default: any;
};
valueField: {
type: PropType<string>;
default: string;
};
textField: {
type: PropType<string>;
default: string;
};
svgIconField: {
type: PropType<string>;
default: string;
};
iconField: {
type: PropType<string>;
default: string;
};
onSelect: PropType<(event: BreadcrumbLinkMouseEvent_2) => void>;
onKeydown: PropType<(event: any) => void>;
}>> & Readonly<{
onSelect?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
}>, {
ariaLabel: string;
size: "small" | "medium" | "large";
dir: "rtl" | "ltr";
collapseMode: "none" | "auto" | "wrap";
dataItems: BreadcrumbDataModel_2[];
valueField: string;
textField: string;
svgIconField: string;
iconField: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface BreadcrumbComputed {
[key: string]: any;
itemClasses: object;
}
/**
* Represents the BreadcrumbDataModel object type.
*/
export declare interface BreadcrumbDataModel {
/**
* Represents the `id` of the dataItems object.
* Used for setting the `key` of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
*/
id?: string;
/**
* Represents the `text` used inside the BreadcrumbLink component.
*/
text?: string;
/**
* Represents the `svgIcon` used inside the BreadcrumbLink component.
*/
svgIcon?: VNode;
/**
* Represents the `icon` used inside the BreadcrumbLink component.
*/
icon?: VNode;
/**
* @hidden
*/
disabled?: boolean;
}
/**
* Represents the BreadcrumbDelimiter component.
*/
export declare const BreadcrumbDelimiter: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
dir: PropType<string>;
tabIndex: PropType<number>;
}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
dir: PropType<string>;
tabIndex: PropType<number>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the properties of BreadcrumbDelimiter component.
*/
export declare interface BreadcrumbDelimiterProps {
/**
* Sets the `id` property of the BreadcrumbDelimiter component.
*/
id?: string;
/**
* Sets the `tabIndex` attribute to the BreadcrumbDelimiter.
*/
tabIndex?: number;
/**
* @hidden
*/
dir?: string;
}
/**
* Represents the BreadcrumbLink component.
*/
export declare const BreadcrumbLink: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
tabIndex: PropType<number>;
dir: PropType<string>;
disabled: PropType<boolean>;
text: PropType<string>;
svgIcon: PropType<VNode<RendererNode, RendererElement, {
[key: string]: any;
}>>;
icon: PropType<VNode<RendererNode, RendererElement, {
[key: string]: any;
}>>;
ariaCurrent: PropType<boolean>;
isLast: PropType<boolean>;
isFirst: PropType<boolean>;
onSelect: PropType<(event: any) => void>;
}>, {
linkRef: Ref<any, any>;
}, {}, {
itemClasses(): BreadcrumbLinkComputed['itemClasses'];
}, {
focus(): void;
handleSelect(event: any): void;
handleKeyDown(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, ("select" | "keydown")[], "select" | "keydown", PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
tabIndex: PropType<number>;
dir: PropType<string>;
disabled: PropType<boolean>;
text: PropType<string>;
svgIcon: PropType<VNode<RendererNode, RendererElement, {
[key: string]: any;
}>>;
icon: PropType<VNode<RendererNode, RendererElement, {
[key: string]: any;
}>>;
ariaCurrent: PropType<boolean>;
isLast: PropType<boolean>;
isFirst: PropType<boolean>;
onSelect: PropType<(event: any) => void>;
}>> & Readonly<{
onKeydown?: (...args: any[]) => any;
onSelect?: (...args: any[]) => any;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface BreadcrumbLinkComputed {
[key: string]: any;
itemClasses: object;
}
/**
* Represents the `BreadcrumbLinkMouseEvent`.
*/
export declare interface BreadcrumbLinkMouseEvent {
/**
* Represents the `id` of the `BreadcrumbLinkMouseEvent`.
*/
id?: string;
/**
* A Vue native DOM event.
*/
nativeEvent: any;
}
/**
* Represents the properties of BreadcrumbLink component.
*/
export declare interface BreadcrumbLinkProps {
/**
* Sets the `id` property of the top `div` element of the BreadcrumbLink.
*/
id?: string;
/**
* Sets the `tabIndex` attribute to the BreadcrumbLink.
*/
tabIndex?: number;
/**
* The Breadcrumb direction `ltr` or `rtl`.
*/
dir?: string;
/**
* Determines the `disabled` mode of the BreadcrumbLink. If `true`, the component is disabled.
*/
disabled?: boolean;
/**
* Represents the `text` of the BreadcrumbLink component.
*/
text?: string;
/**
* Represents the `svgIcon` of the BreadcrumbLink component.
*/
svgIcon?: VNode;
/**
* Represents the `icon` of the BreadcrumbLink component.
*/
icon?: VNode;
/**
* Represents the `onSelect` event. Triggered after click on the BreadcrumbLink item.
*/
onSelect?: (event: any) => void;
/**
* Represents the `onKeydown` event. Triggered after key down on the BreadcrumbLink item.
*/
onKeydown?: (event: any) => void;
/**
* Sets the `aria-current` value.
*/
ariaCurrent?: boolean;
/**
* @hidden
*/
isLast?: boolean;
/**
* @hidden
*/
isFirst?: boolean;
}
/**
* @hidden
*/
export declare const BreadcrumbListItem: DefineComponent<ExtractPropTypes< {
id: PropType<string>;
isFirstItem: PropType<boolean>;
isLastItem: PropType<boolean>;
}>, {}, {}, {
itemClasses(): BreadcrumbListItemComputed['itemClasses'];
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
id: PropType<string>;
isFirstItem: PropType<boolean>;
isLastItem: PropType<boolean>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface BreadcrumbListItemComputed {
[key: string]: any;
itemClasses: object;
}
/**
* @hidden
*/
export declare interface BreadcrumbListItemProps {
/**
* Sets the `id` property of the top `div` element of the BreadcrumbListItem.
*/
id?: string;
/**
* @hidden
*/
isFirstItem: boolean;
/**
* @hidden
*/
isLastItem: boolean;
}
/**
* @hidden
*/
export declare const BreadcrumbOrderedList: DefineComponent<ExtractPropTypes< {
rootItem: PropType<boolean>;
id: PropType<string>;
dir: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
collapseMode: {
type: PropType<"none" | "auto" | "wrap">;
validator: (value: string) => any;
};
}>, {}, {}, {
itemClasses(): BreadcrumbOrderedListComputed['itemClasses'];
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
rootItem: PropType<boolean>;
id: PropType<string>;
dir: PropType<string>;
tabIndex: PropType<number>;
disabled: PropType<boolean>;
collapseMode: {
type: PropType<"none" | "auto" | "wrap">;
validator: (value: string) => any;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* @hidden
*/
export declare interface BreadcrumbOrderedListComputed {
[key: string]: any;
itemClasses: object;
}
/**
* @hidden
*/
export declare interface BreadcrumbOrderedListProps {
/**
* Sets the `id` property of the top `div` element of the BreadcrumbOrderedList.
*/
id?: string;
/**
* Sets the `tabIndex` attribute to the BreadcrumbOrderedList.
*/
tabIndex?: number;
/**
* The BreadcrumbOrderedList direction `ltr` or `rtl`.
*/
dir?: string;
/**
* Sets the Collapse mode of the Breadcrumb.
* The available values are:
* - `auto`(default)—Items are automatically collapsed based on the width of the Breadcrumb. First and last item always remain visible.
* - `wrap`—Items are wrapped on multiple rows when their total width is bigger than the width of the BreadCrumb.
* - `none`—All items are expanded on the same row. This scenario is useful when the Breadcrumb needs to be scrolled.
*
* For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
*/
collapseMode?: 'auto' | 'wrap' | 'none';
/**
* Determines the `disabled` mode of the BreadcrumbOrderedList. If `true`, the component is disabled.
*/
disabled?: boolean;
/**
* @hidden
*/
rootItem?: boolean;
}
export declare interface BreadcrumbProps {
/**
* Sets the `id` property of the top `div` element of the Breadcrumb.
*/
id?: string;
/**
* Represents the Breadcrumb ordered list component.
*/
breadcrumbOrderedList?: Component<BreadcrumbOrderedListProps>;
/**
* Represents the Breadcrumb list item component.
*/
breadcrumbListItem?: Component<BreadcrumbListItemProps>;
/**
* Represents the Breadcrumb delimiter component.
*/
breadcrumbDelimiter?: Component<BreadcrumbDelimiterProps>;
/**
* Represents the Breadcrumb link component.
*/
breadcrumbLink?: Component<BreadcrumbLinkProps>;
/**
* Represents the dataItems of the Breadcrumb from type BreadcrumbDataModel.
*/
dataItems: BreadcrumbDataModel[];
/**
* Specifies the padding of all Breadcrumb elements.
*
* The possible values are:
* * `small`
* * `medium`
* * `large`
*
* @default `medium`
*/
size?: 'small' | 'medium' | 'large';
/**
* The Breadcrumb direction `ltr` or `rtl`.
*/
dir?: 'ltr' | 'rtl';
/**
* Sets the `tabIndex` attribute to the Breadcrumb.
*/
tabIndex?: number;
/**
* Sets the Collapse mode of the Breadcrumb.
* The available values are:
* - `auto`(default)—Items are automatically collapsed based on the width of the Breadcrumb. First and last item always remain visible.
* - `wrap`—Items are wrapped on multiple rows when their total width is bigger than the width of the BreadCrumb.
* - `none`—All items are expanded on the same row. This scenario is useful when the Breadcrumb needs to be scrolled.
*
* For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
*/
collapseMode?: 'auto' | 'wrap' | 'none';
/**
* Determines the `disabled` mode of the Breadcrumb. If `true`, the component is disabled.
*/
disabled?: boolean;
/**
* Represents the `value` field. Used for setting the key of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
*/
valueField?: string;
/**
* Represents the `text` field. Used for setting the `text` inside the BreadcrumbLink component.
*/
textField?: string;
/**
* Represents the `svgIcon` field. Used for setting the `svgIcon` inside the BreadcrumbLink component.
*/
svgIconField?: string;
/**
* Represents the `icon` field. Used for setting the `icon` inside the BreadcrumbLink component.
*/
iconField?: string;
/**
* Represents the `onSelect` event. Triggered after click on the Breadcrumb.
*/
onSelect?: (event: BreadcrumbLinkMouseEvent) => void;
/**
* Triggered on onKeydown event.
*/
onKeydown?: (event: any) => void;
/**
* Represents the label of the Breadcrumb component.
*/
ariaLabel?: string;
}
/**
* @hidden
*/
export declare const Card: DefineComponent<ExtractPropTypes< {
dir: PropType<string>;
type: {
type: PropType<string>;
default: cardType;
validator: (value: string) => any;
};
orientation: {
type: PropType<string>;
default: cardOrientation;
validator: (value: string) => any;
};
}>, {}, {}, {
wrapperClass(): CardComputed['wrapperClass'];
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
dir: PropType<string>;
type: {
type: PropType<string>;
default: cardType;
val