@progress/kendo-vue-buttons 8.0.3-develop.2 → 8.0.3-develop.4

package/ListButton/SplitButton.d.ts

@@ -0,0 +1,174 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+import { SplitButtonClickEvent, SplitButtonItemClickEvent, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonOpenEvent, SplitButtonCloseEvent } from './models/events';
+/**
+ * @hidden
+ */
+export interface SplitButtonData {
+    focusedIndex?: number;
+    focused?: boolean;
+    currentOpened: boolean;
+}
+/**
+ * @hidden
+ */
+export interface SplitButtonComputed {
+    [key: string]: any;
+    computedOpened: boolean;
+    wrapperClass: object;
+}
+/**
+ * @hidden
+ */
+export interface SplitButtonMethods {
+    [key: string]: any;
+    element: () => HTMLButtonElement | null;
+    onKeyDown: (event: any) => void;
+    onFocus: (event: any) => void;
+    onBlur: (event: any) => void;
+    onItemClick: (event: any, clickedItemIndex: number) => void;
+    onItemDown: (event: any) => void;
+    mouseDown: (event: any) => void;
+    dispatchClickEvent: (dispatchedEvent: any, index: number) => void;
+    onClickMainButton: () => void;
+    onDownSplitPart: () => void;
+    onSplitPartClick: (event: any) => void;
+    dispatchPopupEvent: (dispatchedEvent: any, open: boolean) => void;
+    isItemDisabled: (index: number) => boolean;
+    isRtl: () => boolean;
+}
+/**
+ * @hidden
+ */
+export interface SplitButtonState {
+    mainButton: any;
+    guid: string;
+    buttonsData: Array<any>;
+    _anchor: string;
+    kendoAnchorRef: any;
+}
+/**
+ * @hidden
+ */
+declare const SplitButton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    accessKey: PropType<string>;
+    ariaLabel: PropType<string>;
+    text: PropType<string>;
+    items: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    textField: PropType<string>;
+    tabIndex: PropType<number>;
+    disabled: PropType<boolean>;
+    icon: PropType<string>;
+    svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
+    size: PropType<"small" | "medium" | "large">;
+    rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
+    fillMode: {
+        type: PropType<"flat" | "link" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    themeColor: {
+        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+        validator: (value: string) => boolean;
+    };
+    opened: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    iconClass: PropType<string>;
+    imageUrl: PropType<string>;
+    popupSettings: PropType<import('..').ButtonsPopupSettings>;
+    itemRender: PropType<any>;
+    item: PropType<any>;
+    className: PropType<string>;
+    buttonClass: PropType<string>;
+    dir: PropType<string>;
+}>, {
+    kendoAnchorRef: import('vue').Ref<any, any>;
+}, {
+    focused: boolean;
+    focusedIndex: number;
+    currentOpened: boolean;
+}, {
+    computedOpened(): boolean;
+    wrapperClass(): {
+        'k-split-button': boolean;
+        'k-button-group': boolean;
+        'k-focus': any;
+    };
+}, {
+    element(): HTMLButtonElement | null;
+    onKeyDown(event: any): void;
+    onFocus(event: FocusEvent): void;
+    onItemClick(event: any, clickedItemIndex: number): void;
+    onBlur(event: FocusEvent): void;
+    createBlurTimeout(event: FocusEvent): void;
+    dispatchClickEvent(dispatchedEvent: any, clickedItemIndex: number): void;
+    onSplitPartClick(event: any): void;
+    onDownSplitPart(event: any): void;
+    onItemDown(event: any): void;
+    dispatchPopupEvent(dispatchedEvent: any, open?: boolean): void;
+    isItemDisabled(index: number): any;
+    isRtl(): boolean;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    focus: (event: SplitButtonFocusEvent) => true;
+    blur: (event: SplitButtonBlurEvent) => true;
+    buttonclick: (event: SplitButtonClickEvent) => true;
+    itemclick: (event: SplitButtonItemClickEvent) => true;
+    open: (event: SplitButtonOpenEvent) => true;
+    close: (event: SplitButtonCloseEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    accessKey: PropType<string>;
+    ariaLabel: PropType<string>;
+    text: PropType<string>;
+    items: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    textField: PropType<string>;
+    tabIndex: PropType<number>;
+    disabled: PropType<boolean>;
+    icon: PropType<string>;
+    svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
+    size: PropType<"small" | "medium" | "large">;
+    rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
+    fillMode: {
+        type: PropType<"flat" | "link" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    themeColor: {
+        type: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
+        validator: (value: string) => boolean;
+    };
+    opened: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    iconClass: PropType<string>;
+    imageUrl: PropType<string>;
+    popupSettings: PropType<import('..').ButtonsPopupSettings>;
+    itemRender: PropType<any>;
+    item: PropType<any>;
+    className: PropType<string>;
+    buttonClass: PropType<string>;
+    dir: PropType<string>;
+}>> & Readonly<{
+    onBlur?: (event: SplitButtonBlurEvent) => any;
+    onClose?: (event: SplitButtonCloseEvent) => any;
+    onFocus?: (event: SplitButtonFocusEvent) => any;
+    onOpen?: (event: SplitButtonOpenEvent) => any;
+    onItemclick?: (event: SplitButtonItemClickEvent) => any;
+    onButtonclick?: (event: SplitButtonClickEvent) => any;
+}>, {
+    items: any[];
+    opened: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { SplitButton };

package/ListButton/models/ButtonItemInterface.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * 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 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;
+}

package/ListButton/models/ListButtonProps.d.ts

@@ -0,0 +1,311 @@
+/**
+ * @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;
+}

package/ListButton/models/PopupSettings.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PopupAnimation, Align } from '@progress/kendo-vue-popup';
+/**
+ * The settings of the popup container.
+ */
+export 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;
+}

package/ListButton/models/events.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `focus` event.
+ */
+export interface SplitButtonFocusEvent {
+    /**
+     * The native browser focus event.
+     */
+    event: FocusEvent;
+}
+/**
+ * The arguments for the `blur` event.
+ */
+export interface SplitButtonBlurEvent {
+    /**
+     * The native browser blur event (FocusEvent).
+     */
+    event: FocusEvent;
+}
+/**
+ * The arguments for the `buttonclick` event.
+ */
+export interface SplitButtonClickEvent {
+    /**
+     * The native browser event.
+     */
+    event: any;
+}
+/**
+ * The arguments for the `open` event.
+ */
+export interface SplitButtonOpenEvent {
+    /**
+     * The native browser event.
+     */
+    event: any;
+}
+/**
+ * The arguments for the `close` event.
+ */
+export interface SplitButtonCloseEvent {
+    /**
+     * The native browser event.
+     */
+    event: any;
+}
+/**
+ * The arguments for the `itemClick` event.
+ */
+export interface SplitButtonItemClickEvent {
+    /**
+     * The clicked item.
+     */
+    item: any;
+    /**
+     * The zero-based index of the clicked item.
+     */
+    itemIndex: number;
+}
+/**
+ * The arguments for the `focus` event.
+ */
+export interface DropDownButtonFocusEvent {
+    /**
+     * The native browser focus event.
+     */
+    event: FocusEvent;
+}
+/**
+ * The arguments for the `blur` event.
+ */
+export interface DropDownButtonBlurEvent {
+    /**
+     * The native browser blur event (FocusEvent).
+     */
+    event: FocusEvent;
+}
+/**
+ * The arguments for the `open` event.
+ */
+export interface DropDownButtonOpenEvent {
+    /**
+     * The native browser event.
+     */
+    event: any;
+}
+/**
+ * The arguments for the `close` event.
+ */
+export interface DropDownButtonCloseEvent {
+    /**
+     * The native browser event.
+     */
+    event: any;
+}
+/**
+ * The arguments for the `itemClick` event.
+ */
+export interface DropDownButtonItemClickEvent {
+    /**
+     * The clicked item.
+     */
+    item: any;
+    /**
+     * The zero-based index of the clicked item.
+     */
+    itemIndex: number;
+    /**
+     * The native browser event.
+     */
+    event: any;
+}

package/ListButton/utils/navigation.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+declare const navigate: (focusedIndex: number, keyCode: number, altKey: boolean, total: number) => number;
+export default navigate;

package/ListButton/utils/popup.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 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';
+/**
+ * @hidden
+ */
+export declare function getAnchorAlign(isDirectionRightToLeft?: boolean): Align;
+/**
+ * @hidden
+ */
+export declare function getPopupAlign(isDirectionRightToLeft?: boolean): Align;