/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { ButtonsPopupSettings } from './PopupSettings'; import { SplitButtonClickEvent, SplitButtonItemClickEvent, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, DropDownButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent } from './events'; import { SVGIcon } from '@progress/kendo-vue-common'; export 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 * * @default `undefined` */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the Button. * * The available options are: * - none * - small * - medium * - large * - circle * - full * * @default `undefined` */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the Button. * * The available options are: * - solid * - outline * - flat * - link * * @default `undefined` */ fillMode?: 'solid' | 'outline' | 'flat' | 'link'; /** * Configures the `themeColor` of the Button. * * The available options are: * - base * - primary * - secondary * - tertiary * - info * - success * - warning * - dark * - light * - inverse * * @default `undefined` */ themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse'; /** * 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; } export interface SplitButtonProps { /** * 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 SplitButton and 'splitbutton'. */ ariaLabel?: string; /** * Specifies the text of the main button ([see example]({% slug overview_splitbutton %})). */ text?: string; /** * Specifies the list items ([see example]({% slug binding_splitbutton %}#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_splitbutton %}#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_splitbutton %})). */ disabled?: boolean; /** * Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})). */ icon?: string; /** * Defines an SVGIcon to be rendered within the SplitButton. */ svgIcon?: SVGIcon; /** * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})). */ iconClass?: string; /** * Defines the location of an image that will be displayed next to the main button text ([see example]({% slug icons_splitbutton %})). */ imageUrl?: string; /** * Configures the popup ([see example]({% slug customization_splitbutton %}#toc-popup)). */ popupSettings?: ButtonsPopupSettings; /** * Opens the popup of the SplitButton if set to `true`. */ opened?: boolean; /** * 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 SplitButton component. */ className?: string; /** * 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 * * @default `undefined` */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the Button. * * The available options are: * - none * - small * - medium * - large * - circle * - full * * @default `undefined` */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the Button. * * The available options are: * - solid * - outline * - flat * - link * * @default `undefined` */ fillMode?: 'solid' | 'outline' | 'flat' | 'link'; /** * Configures the `themeColor` of the Button. * * The available options are: * - base * - primary * - secondary * - tertiary * - info * - success * - warning * - dark * - light * - inverse * * @default `undefined` */ themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse'; /** * Fires when the main button is clicked ([see example]({% slug events_splitbutton %})). */ onButtonclick?: (event: SplitButtonClickEvent) => void; /** * Fires when the component is focused ([see example]({% slug events_splitbutton %})). */ onFocus?: (event: SplitButtonFocusEvent) => void; /** * Fires when the component is blurred ([see example]({% slug events_splitbutton %})). */ onBlur?: (event: SplitButtonBlurEvent) => void; /** * Fires when an item is clicked ([see example]({% slug events_splitbutton %})). */ onItemclick?: (event: SplitButtonItemClickEvent) => void; /** * Fires when the popup which contains the items is opened ([see example]({% slug events_splitbutton %})). */ onOpen?: (event: SplitButtonOpenEvent) => void; /** * Fires when the popup which contains the items is closed ([see example]({% slug events_splitbutton %})). */ onClose?: (event: SplitButtonCloseEvent) => void; }