@progress/kendo-vue-buttons 6.1.0-develop.9 → 6.1.1-develop.1

package/index.d.mts

@@ -113,6 +113,7 @@ focus: any;
 blur: any;
 keypress: any;
 keydown: any;
+contextmenu: any;
 }, string, PublicProps, Readonly<ExtractPropTypes<    {
 ariaLabel: PropType<string>;
 ariaPressed: PropType<boolean>;
@@ -171,6 +172,7 @@ 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;
@@ -281,14 +283,6 @@ export declare interface ButtonGroupProps extends ButtonGroupInterface, ButtonPr
  * Inherits the native HTML Button. Represents the properties which can be set to a Button.
  */
 declare interface ButtonInterface {
-    /**
-     * **Deprecated**. Use [`fillMode`]({% slug api_buttons_buttonprops %}#toc-fillmode) prop instead.
-     *
-     * The available values are:
-     * `flat` | `outline`
-     * * `clear`
-     */
-    look?: string;
     /**
      * 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.
@@ -422,20 +416,6 @@ export declare interface ButtonItemProps {
     role?: string;
 }
 
-/**
- * Enables the modification of the Button appearance.
- *
- * The available styling options are:
- * - `default`
- * - `flat`
- * - `outline`
- *
- * @example
- * ```ts-no-run
- * ```
- */
-export declare type ButtonLook = 'default' | 'flat' | 'outline';
-
 /**
  * @hidden
  */
@@ -610,10 +590,6 @@ selectedSvgIcon: {
 type: PropType<SVGIcon>;
 default: () => SVGIcon_2;
 };
-look: {
-type: PropType<string>;
-default: () => string;
-};
 size: {
 type: PropType<string>;
 default: string;
@@ -701,10 +677,6 @@ selectedSvgIcon: {
 type: PropType<SVGIcon>;
 default: () => SVGIcon_2;
 };
-look: {
-type: PropType<string>;
-default: () => string;
-};
 size: {
 type: PropType<string>;
 default: string;
@@ -752,7 +724,6 @@ removeIcon: string;
 removeSvgIcon: SVGIcon;
 selectedIcon: string;
 selectedSvgIcon: SVGIcon;
-look: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -1001,7 +972,7 @@ export declare interface ChipListHandle {
 }
 
 /**
- * Represents the properties of [ChipList]({% slug api_buttons_chiplist %}) component.
+ * Represents the properties of [ChipList]({% slug overview_chiplist %}) component.
  */
 export declare interface ChipListProps extends FormComponentProps, ChipProps {
     /**
@@ -1131,7 +1102,7 @@ export declare interface ChipMouseEvent {
 }
 
 /**
- * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
+ * Represents the properties of [Chip]({% slug overview_chip %}) component.
  */
 export declare interface ChipProps {
     /**
@@ -1186,10 +1157,6 @@ export declare interface ChipProps {
      * Defines an selection SVGIcon to be rendered within the chip.
      */
     selectedSvgIcon?: SVGIcon;
-    /**
-     * Determines if the Chip style is `filled` or `outlined`.
-     */
-    look?: string;
     /**
      * 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.
@@ -1488,15 +1455,15 @@ export declare interface DropDownButtonProps {
      */
     ariaLabel?: string;
     /**
-     * Specifies the text of the main button ([see example]({% slug overview_dropdownbutton %}#toc-basic-usage)).
+     * Specifies the text of the main button ([see example]({% slug overview_dropdownbutton %})).
      */
     text?: any;
     /**
-     * Specifies the list items ([see example]({% slug binding_dropdownbutton %}#toc-array-of-objects)).
+     * 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-array-of-objects)).
+     * 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;
     /**
@@ -1533,7 +1500,7 @@ export declare interface DropDownButtonProps {
      */
     popupSettings?: ButtonsPopupSettings;
     /**
-     * Defines a named slot `string`, functional or class component which is used for rendering items ([see example]({% slug customization_dropdownbutton %}#toc-item-render)). The default rendering includes an icon, an image, and text.
+     * 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;
     /**
@@ -1619,23 +1586,23 @@ export declare interface DropDownButtonProps {
      */
     themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse' | string;
     /**
-     * Fires when the component is focused ([see example]({% slug overview_dropdownbutton %}#toc-events)).
+     * Fires when the component is focused ([see example]({% slug events_dropdownbutton %})).
      */
     onFocus?: (event: DropDownButtonFocusEvent) => void;
     /**
-     * Fires when the component is blurred ([see example]({% slug overview_dropdownbutton %}#toc-events)).
+     * Fires when the component is blurred ([see example]({% slug events_dropdownbutton %})).
      */
     onBlur?: (event: DropDownButtonBlurEvent) => void;
     /**
-     * Fires when an item is clicked ([see example]({% slug overview_dropdownbutton %}#toc-events)).
+     * 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 overview_dropdownbutton %}#toc-events)).
+     * 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 overview_dropdownbutton %}#toc-events)).
+     * Fires when the popup which contains the items is closed ([see example]({% slug events_dropdownbutton %})).
      */
     onClose?: (event: DropDownButtonCloseEvent) => void;
 }
@@ -1894,6 +1861,7 @@ dataItem: PropType<any>;
 text: PropType<string>;
 tabIndex: PropType<number>;
 customProp: PropType<any>;
+class: PropType<string>;
 }>, {
 elementRef: Ref<any, any>;
 }, {}, {
@@ -1916,6 +1884,7 @@ 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;
@@ -1993,6 +1962,10 @@ export declare interface FloatingActionButtonItemProps {
      * @hidden
      */
     id?: string;
+    /**
+     * @hidden
+     */
+    class?: string;
     /**
      * @hidden
      */
@@ -2509,7 +2482,11 @@ tabIndex: {
 type: PropType<number>;
 default: number;
 };
-dir: StringConstructor;
+dir: {
+type: PropType<string>;
+validator: (value: any) => any;
+default: string;
+};
 keyboardNavigation: {
 type: PropType<boolean>;
 default: boolean;
@@ -2529,7 +2506,41 @@ default: string;
 validator: (value: any) => any;
 };
 ariaLabel: PropType<string>;
-}>, {}, {}, {
+overflow: {
+type: PropType<"section" | "scroll" | "none">;
+default: string;
+validator: (value: any) => any;
+};
+scrollButtons: {
+type: PropType<"auto" | "hidden" | "visible">;
+default: string;
+validator: (value: any) => any;
+};
+scrollButtonsPosition: {
+type: PropType<"split" | "end" | "start">;
+default: string;
+validator: (value: any) => any;
+};
+buttonScrollSpeed: {
+type: PropType<number>;
+default: number;
+};
+}>, {}, {
+defaultSlot: any;
+offsetWidth: number;
+offsetHeight: number;
+currentButtons: HTMLElement[];
+focusedSelector: string;
+isScrollStartPosition: boolean;
+isScrollEndPosition: boolean;
+focusableButtons: any[];
+isOverflowing: boolean;
+scrollContentRef: any;
+lastToolbarWidthRef: number;
+overFlowToolsRef: any[];
+overFlowOpened: boolean;
+visibleToolsRef: any;
+}, {
 selectors(): ToolbarComputed['selectors'];
 wrapperClass(): ToolbarComputed['wrapperClass'];
 }, {
@@ -2539,13 +2550,21 @@ focusedIndex(): number;
 setTabIndex(focusedIndex: number): void;
 onKeyDown(event: any): void;
 focusButton(prevIndex: number, index: number): void;
+initOverflow(toolbarRef: any, totalInnerWidth: any): void;
+checkOverflow(): void;
 onWindowResize(event: any): void;
+onContentScroll(buttonClicked: any): void;
+onToggleoverflow(opened: boolean): void;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
 tabIndex: {
 type: PropType<number>;
 default: number;
 };
-dir: StringConstructor;
+dir: {
+type: PropType<string>;
+validator: (value: any) => any;
+default: string;
+};
 keyboardNavigation: {
 type: PropType<boolean>;
 default: boolean;
@@ -2565,12 +2584,36 @@ default: string;
 validator: (value: any) => any;
 };
 ariaLabel: PropType<string>;
+overflow: {
+type: PropType<"section" | "scroll" | "none">;
+default: string;
+validator: (value: any) => any;
+};
+scrollButtons: {
+type: PropType<"auto" | "hidden" | "visible">;
+default: string;
+validator: (value: any) => any;
+};
+scrollButtonsPosition: {
+type: PropType<"split" | "end" | "start">;
+default: string;
+validator: (value: any) => any;
+};
+buttonScrollSpeed: {
+type: PropType<number>;
+default: number;
+};
 }>> & Readonly<{}>, {
 tabIndex: number;
 size: string;
 fillMode: string;
+dir: string;
 keyboardNavigation: boolean;
 buttons: string[];
+buttonScrollSpeed: number;
+scrollButtons: "auto" | "hidden" | "visible";
+scrollButtonsPosition: "split" | "end" | "start";
+overflow: "section" | "scroll" | "none";
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -2589,10 +2632,52 @@ export declare const ToolbarItem: DefineComponent<    {}, {}, {}, {}, {
 element(): any;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
+/**
+ * @hidden
+ */
+declare interface ToolbarOverflowProps {
+    /**
+     * Represents the possible overflow mode options of the Toolbar.
+     * Applicable when there is not enough space to render all tools.
+     *
+     * @default `section`
+     */
+    overflow?: 'none' | 'section' | 'scroll';
+    /**
+     * Determines the Toolbar scroll buttons visibility.
+     * Applicable when the overflow property is set to `scroll`.
+     *
+     * @default `auto`
+     */
+    scrollButtons?: 'hidden' | 'visible' | 'auto';
+    /**
+     * Determines the Toolbar scroll buttons position.
+     * Applicable when the overflow property is set to `scroll`.
+     *
+     * @default `split`
+     */
+    scrollButtonsPosition?: 'start' | 'end' | 'split';
+    /**
+     * Sets the Toolbar scroll speed in pixels when scrolling via clicking the previous or next button.
+     * Applicable when the overflow property is set to `scroll`.
+     *
+     * @default 100
+     */
+    buttonScrollSpeed?: number;
+    /**
+     * Defines the custom component that will be rendered as a previous button.
+     */
+    prevButton?: any;
+    /**
+     * Defines the custom component that will be rendered as a next button.
+     */
+    nextButton?: any;
+}
+
 /**
  * Represents the props of the [Kendo UI for Vue Toolbar component]({% slug overview_toolbar %}).
  */
-export declare interface ToolbarProps {
+export declare interface ToolbarProps extends ToolbarOverflowProps {
     /**
      * Sets additional classes to the Toolbar.
      */
@@ -2679,12 +2764,70 @@ export declare interface ToolbarResizeEvent {
 }
 
 /**
- * @hidden
+ * Represents the [Kendo UI for Vue ToolbarSeparator component]({% slug overview_toolbar %}).  A separator element for the sub-elements of the Toolbar.
+ *
+ * ```jsx
+ * <template>
+ *   <div>
+ *     <Toolbar>
+ *       <SplitButton
+ *         :class="'k-toolbar-split-button'"
+ *         :text="'Insert'"
+ *         :items="splitItems"
+ *       >
+ *       </SplitButton>
+ *       <ToolbarSeparator />
+ *       <DropDownButton
+ *         :text="'Paste'"
+ *         :svg-icon="clipboardIcon"
+ *         :items="ddItems"
+ *       >
+ *       </DropDownButton>
+ *     </Toolbar>
+ *   </div>
+ * </template>
+ * ```
  */
 export declare const ToolbarSeparator: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
- * @hidden
+ * Represents the [Kendo UI for Vue ToolbarSpacer component]({% slug overview_toolbar %}).  A spacer element for the sub-elements of the Toolbar.
+ *
+ * ```jsx
+ * <template>
+ *  <div>
+ *    <Toolbar>
+ *      <ButtonGroup :class="'k-toolbar-button-group'">
+ *        <Button
+ *          :class="'k-toolbar-button'"
+ *          :svg-icon="boldIcon"
+ *          :title="'Bold'"
+ *          :togglable="true"
+ *        />
+ *        <Button
+ *          :class="'k-toolbar-button'"
+ *          :svg-icon="italicIcon"
+ *          :title="'Italic'"
+ *          :togglable="true"
+ *        />
+ *        <Button
+ *          :class="'k-toolbar-button'"
+ *          :svg-icon="underlineIcon"
+ *          :title="'Underline'"
+ *          :togglable="true"
+ *        />
+ *      </ButtonGroup>
+ *      <ToolbarSpacer />
+ *      <Button :class="'k-toolbar-button'" :svg-icon="cutIcon" :title="'Cut'">
+ *        Cut
+ *      </Button>
+ *      <Button :class="'k-toolbar-button'" :svg-icon="copyIcon" :title="'Copy'">
+ *        Copy
+ *      </Button>
+ *    </Toolbar>
+ *  </div>
+ * </template>
+ * ```
  */
 export declare const ToolbarSpacer: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;