@progress/kendo-vue-buttons 7.0.1-develop.2 → 7.0.1-develop.3

package/index.d.ts

@@ -103,22 +103,22 @@ handleMouseDown(event: any): void;
 handlePointerDown(event: any): void;
 handleMouseUp(event: any): void;
 handlePointerUp(event: any): void;
-handleFocus(event: any): void;
-handleBlur(event: any): void;
+handleFocus(event: FocusEvent): void;
+handleBlur(event: FocusEvent): void;
 handleKeypress(event: any): void;
 handleKeydown(event: any): void;
 handleContextmenu(event: any): void;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {
-click: any;
-mousedown: any;
-mouseup: any;
-pointerdown: any;
-pointerup: any;
-focus: any;
-blur: any;
-keypress: any;
-keydown: any;
-contextmenu: any;
+click: (event: Event) => true;
+mousedown: (event: MouseEvent) => true;
+mouseup: (event: MouseEvent) => true;
+pointerdown: (event: PointerEvent) => true;
+pointerup: (event: PointerEvent) => true;
+focus: (event: ButtonFocusEvent) => true;
+blur: (event: ButtonBlurEvent) => true;
+keypress: (event: KeyboardEvent) => true;
+keydown: (event: KeyboardEvent) => true;
+contextmenu: (event: MouseEvent) => true;
 }, string, PublicProps, Readonly<ExtractPropTypes<    {
 ariaLabel: PropType<string>;
 ariaPressed: PropType<boolean>;
@@ -179,16 +179,16 @@ id: PropType<string>;
 type: PropType<string>;
 role: PropType<string>;
 }>> & Readonly<{
-onClick?: (...args: any[] | unknown[]) => any;
-onBlur?: (...args: any[] | unknown[]) => any;
-onContextmenu?: (...args: any[] | unknown[]) => any;
-onFocus?: (...args: any[] | unknown[]) => any;
-onKeydown?: (...args: any[] | unknown[]) => any;
-onKeypress?: (...args: any[] | unknown[]) => any;
-onMousedown?: (...args: any[] | unknown[]) => any;
-onMouseup?: (...args: any[] | unknown[]) => any;
-onPointerdown?: (...args: any[] | unknown[]) => any;
-onPointerup?: (...args: any[] | unknown[]) => any;
+onClick?: (event: Event) => any;
+onBlur?: (event: ButtonBlurEvent) => any;
+onContextmenu?: (event: MouseEvent) => any;
+onFocus?: (event: ButtonFocusEvent) => any;
+onKeydown?: (event: KeyboardEvent) => any;
+onKeypress?: (event: KeyboardEvent) => any;
+onMousedown?: (event: MouseEvent) => any;
+onMouseup?: (event: MouseEvent) => any;
+onPointerdown?: (event: PointerEvent) => any;
+onPointerup?: (event: PointerEvent) => any;
 }>, {
 themeColor: string;
 size: string;
@@ -203,6 +203,16 @@ imageUrl: string;
 disabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
+/**
+ * The arguments for the `onBlur` event of the Button.
+ */
+export declare interface ButtonBlurEvent {
+    /**
+     * The native browser blur event.
+     */
+    event: FocusEvent;
+}
+
 /**
  * @hidden
  */
@@ -218,6 +228,16 @@ export declare interface ButtonData {
     currentActive: boolean;
 }
 
+/**
+ * The arguments for the `onFocus` event of the Button.
+ */
+export declare interface ButtonFocusEvent {
+    /**
+     * The native browser focus event.
+     */
+    event: FocusEvent;
+}
+
 /**
  * @hidden
  */
@@ -365,8 +385,8 @@ innerClass(): object;
 onClick(event: any): void;
 onDown(event: any): void;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {
-click: any;
-down: any;
+click: (event: any, index: number) => true;
+down: (event: any, index: number) => true;
 }, string, PublicProps, Readonly<ExtractPropTypes<    {
 focused: PropType<boolean>;
 index: PropType<number>;
@@ -377,8 +397,8 @@ id: PropType<string>;
 textField: PropType<string>;
 role: PropType<string>;
 }>> & Readonly<{
-onClick?: (...args: any[] | unknown[]) => any;
-onDown?: (...args: any[] | unknown[]) => any;
+onClick?: (event: any, index: number) => any;
+onDown?: (event: any, index: number) => any;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -644,14 +664,14 @@ handleMouseDown(event: any): void;
 handleClick(event: any): void;
 handleRemove(event: any): void;
 handleKeyDown(event: any): void;
-handleFocus(event: any): void;
-handleBlur(event: any): void;
+handleFocus(event: FocusEvent): void;
+handleBlur(event: FocusEvent): void;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {
-click: any;
-keydown: any;
-blur: any;
-focus: any;
-remove: any;
+click: (event: ChipMouseEvent) => true;
+keydown: (event: ChipKeyboardEvent) => true;
+blur: (event: ChipFocusEvent) => true;
+focus: (event: ChipFocusEvent) => true;
+remove: (event: ChipRemoveEvent) => true;
 }, string, PublicProps, Readonly<ExtractPropTypes<    {
 id: PropType<string>;
 text: PropType<string>;
@@ -718,11 +738,11 @@ default: string;
 tabIndex: PropType<number>;
 onMousedown: PropType<(event: any) => void>;
 }>> & Readonly<{
-onClick?: (...args: any[] | unknown[]) => any;
-onBlur?: (...args: any[] | unknown[]) => any;
-onFocus?: (...args: any[] | unknown[]) => any;
-onKeydown?: (...args: any[] | unknown[]) => any;
-onRemove?: (...args: any[] | unknown[]) => any;
+onClick?: (event: ChipMouseEvent) => any;
+onBlur?: (event: ChipFocusEvent) => any;
+onFocus?: (event: ChipFocusEvent) => any;
+onKeydown?: (event: ChipKeyboardEvent) => any;
+onRemove?: (event: ChipRemoveEvent) => any;
 }>, {
 themeColor: string;
 size: string;
@@ -748,9 +768,9 @@ export declare interface ChipFocusEvent {
      */
     target: ChipHandle;
     /**
-     * The event of the ChipFocusEvent.
+     * The native browser focus event.
      */
-    event: any;
+    event: FocusEvent;
 }
 
 /**
@@ -860,7 +880,10 @@ handleDispatchDataItems(action: any): void;
 handleChange(newValue: any, event: any): void;
 handleDataChange(newData: any, event: any): void;
 itemsReducer(acc: any, current: any): any;
-}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+change: (event: ChipListChangeEvent) => true;
+datachange: (event: ChipListDataChangeEvent) => true;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
 id: StringConstructor;
 tabIndex: NumberConstructor;
 dataItems: ArrayConstructor;
@@ -913,7 +936,10 @@ default: () => "ltr";
 chip: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
 ariaLabelledBy: StringConstructor;
 ariaDescribedBy: StringConstructor;
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+onChange?: (event: ChipListChangeEvent) => any;
+onDatachange?: (event: ChipListDataChangeEvent) => any;
+}>, {
 size: string;
 rounded: string;
 fillMode: string;
@@ -1348,9 +1374,9 @@ wrapperClass(): {
 }, {
 element(): HTMLButtonElement | null;
 onKeyDown(event: any): void;
-onFocus(event: any): void;
-onBlur(event: any): void;
-createBlurTimeout(event: any): void;
+onFocus(event: FocusEvent): void;
+onBlur(event: FocusEvent): void;
+createBlurTimeout(event: FocusEvent): void;
 onItemClick(event: any, clickedItemIndex: number): void;
 onItemDown(event: any): void;
 mouseDown(event: any): void;
@@ -1360,11 +1386,11 @@ dispatchPopupEvent(dispatchedEvent: any, open: boolean): void;
 isItemDisabled(index: number): any;
 isRtl(): boolean;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {
-focus: any;
-blur: any;
-itemclick: any;
-open: any;
-close: any;
+focus: (event: DropDownButtonFocusEvent) => true;
+blur: (event: DropDownButtonBlurEvent) => true;
+itemclick: (event: DropDownButtonItemClickEvent) => true;
+open: (event: DropDownButtonOpenEvent) => true;
+close: (event: DropDownButtonCloseEvent) => true;
 }, string, PublicProps, Readonly<ExtractPropTypes<    {
 accessKey: PropType<string>;
 items: {
@@ -1413,11 +1439,11 @@ default: any;
 buttonClass: PropType<string>;
 dir: PropType<string>;
 }>> & Readonly<{
-onBlur?: (...args: any[] | unknown[]) => any;
-onClose?: (...args: any[] | unknown[]) => any;
-onFocus?: (...args: any[] | unknown[]) => any;
-onOpen?: (...args: any[] | unknown[]) => any;
-onItemclick?: (...args: any[] | unknown[]) => any;
+onBlur?: (event: DropDownButtonBlurEvent) => any;
+onClose?: (event: DropDownButtonCloseEvent) => any;
+onFocus?: (event: DropDownButtonFocusEvent) => any;
+onOpen?: (event: DropDownButtonOpenEvent) => any;
+onItemclick?: (event: DropDownButtonItemClickEvent) => any;
 }>, {
 themeColor: string;
 size: string;
@@ -1428,13 +1454,34 @@ items: any[];
 opened: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
+/**
+ * The arguments for the `blur` event.
+ */
 export declare interface DropDownButtonBlurEvent {
+    /**
+     * The native browser blur event (FocusEvent).
+     */
+    event: FocusEvent;
 }
 
+/**
+ * The arguments for the `close` event.
+ */
 export declare interface DropDownButtonCloseEvent {
+    /**
+     * The native browser event.
+     */
+    event: any;
 }
 
+/**
+ * The arguments for the `focus` event.
+ */
 export declare interface DropDownButtonFocusEvent {
+    /**
+     * The native browser focus event.
+     */
+    event: FocusEvent;
 }
 
 /**
@@ -1455,7 +1502,14 @@ export declare interface DropDownButtonItemClickEvent {
     event: any;
 }
 
+/**
+ * The arguments for the `open` event.
+ */
 export declare interface DropDownButtonOpenEvent {
+    /**
+     * The native browser event.
+     */
+    event: any;
 }
 
 export declare interface DropDownButtonProps {
@@ -1697,8 +1751,8 @@ rootClassNames(): string;
 }, {
 dispatchPopupEvent(dispatchedEvent: any, isOpen?: boolean): void;
 handleClick(event: any): void;
-handleFocus(event: any): void;
-handleBlur(event: any): void;
+handleFocus(event: FocusEvent): void;
+handleBlur(event: FocusEvent): void;
 handleMouseDown(event: any): void;
 handleMouseUp(event: any): void;
 dispatchItemClickEvent(dispatchedEvent: any, index: number): void;
@@ -1706,15 +1760,15 @@ handleItemClick(event: any, clickedItemIndex: number): void;
 handleItemDown(event: any): void;
 handleKeyDown(event: any): void;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {
-click: any;
-mousedown: any;
-mouseup: any;
-open: any;
-close: any;
-itemclick: any;
-focus: any;
-blur: any;
-keydown: any;
+click: (event: FloatingActionButtonEvent) => true;
+mousedown: (event: FloatingActionButtonEvent) => true;
+mouseup: (event: FloatingActionButtonEvent) => true;
+open: (event: FloatingActionButtonEvent) => true;
+close: (event: FloatingActionButtonEvent) => true;
+itemclick: (event: FloatingActionButtonItemEvent) => true;
+focus: (event: FloatingActionButtonEvent) => true;
+blur: (event: FloatingActionButtonEvent) => true;
+keydown: (event: FloatingActionButtonEvent) => true;
 }, string, PublicProps, Readonly<ExtractPropTypes<    {
 id: PropType<string>;
 dir: PropType<string>;
@@ -1769,15 +1823,15 @@ type: PropType<FloatingActionButtonThemeColor>;
 default: () => FloatingActionButtonThemeColor;
 };
 }>> & Readonly<{
-onClick?: (...args: any[] | unknown[]) => any;
-onBlur?: (...args: any[] | unknown[]) => any;
-onClose?: (...args: any[] | unknown[]) => any;
-onFocus?: (...args: any[] | unknown[]) => any;
-onKeydown?: (...args: any[] | unknown[]) => any;
-onMousedown?: (...args: any[] | unknown[]) => any;
-onMouseup?: (...args: any[] | unknown[]) => any;
-onOpen?: (...args: any[] | unknown[]) => any;
-onItemclick?: (...args: any[] | unknown[]) => any;
+onClick?: (event: FloatingActionButtonEvent) => any;
+onBlur?: (event: FloatingActionButtonEvent) => any;
+onClose?: (event: FloatingActionButtonEvent) => any;
+onFocus?: (event: FloatingActionButtonEvent) => any;
+onKeydown?: (event: FloatingActionButtonEvent) => any;
+onMousedown?: (event: FloatingActionButtonEvent) => any;
+onMouseup?: (event: FloatingActionButtonEvent) => any;
+onOpen?: (event: FloatingActionButtonEvent) => any;
+onItemclick?: (event: FloatingActionButtonItemEvent) => any;
 }>, {
 themeColor: FloatingActionButtonThemeColor;
 size: FloatingActionButtonSize;
@@ -1844,6 +1898,10 @@ export declare interface FloatingActionButtonAlignOffset {
  * Represents the return type of the FloatingActionButton events.
  */
 export declare interface FloatingActionButtonEvent {
+    /**
+     * The native browser event.
+     */
+    event: Event | FocusEvent;
 }
 
 /**
@@ -1884,8 +1942,8 @@ handleClick(event: any): void;
 focusElement(): void;
 onMouseDown(event: any): void;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {
-click: any;
-down: any;
+click: (event: any, index: number) => true;
+down: (event: any) => true;
 }, string, PublicProps, Readonly<ExtractPropTypes<    {
 id: PropType<string>;
 disabled: PropType<boolean>;
@@ -1899,8 +1957,8 @@ tabIndex: PropType<number>;
 customProp: PropType<any>;
 class: PropType<string>;
 }>> & Readonly<{
-onClick?: (...args: any[] | unknown[]) => any;
-onDown?: (...args: any[] | unknown[]) => any;
+onClick?: (event: any, index: number) => any;
+onDown?: (event: any) => any;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -2651,10 +2709,10 @@ wrapperClass(): {
 }, {
 element(): HTMLButtonElement | null;
 onKeyDown(event: any): void;
-onFocus(event: any): void;
+onFocus(event: FocusEvent): void;
 onItemClick(event: any, clickedItemIndex: number): void;
-onBlur(event: any): void;
-createBlurTimeout(event: any): void;
+onBlur(event: FocusEvent): void;
+createBlurTimeout(event: FocusEvent): void;
 dispatchClickEvent(dispatchedEvent: any, clickedItemIndex: number): void;
 onSplitPartClick(event: any): void;
 onDownSplitPart(event: any): void;
@@ -2663,12 +2721,12 @@ dispatchPopupEvent(dispatchedEvent: any, open?: boolean): void;
 isItemDisabled(index: number): any;
 isRtl(): boolean;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {
-focus: any;
-blur: any;
-buttonclick: any;
-itemclick: any;
-open: any;
-close: any;
+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, PublicProps, Readonly<ExtractPropTypes<    {
 accessKey: PropType<string>;
 ariaLabel: PropType<string>;
@@ -2713,12 +2771,12 @@ className: PropType<string>;
 buttonClass: PropType<string>;
 dir: PropType<string>;
 }>> & Readonly<{
-onBlur?: (...args: any[] | unknown[]) => any;
-onClose?: (...args: any[] | unknown[]) => any;
-onFocus?: (...args: any[] | unknown[]) => any;
-onOpen?: (...args: any[] | unknown[]) => any;
-onItemclick?: (...args: any[] | unknown[]) => any;
-onButtonclick?: (...args: any[] | unknown[]) => any;
+onBlur?: (event: SplitButtonBlurEvent) => any;
+onClose?: (event: SplitButtonCloseEvent) => any;
+onFocus?: (event: SplitButtonFocusEvent) => any;
+onOpen?: (event: SplitButtonOpenEvent) => any;
+onItemclick?: (event: SplitButtonItemClickEvent) => any;
+onButtonclick?: (event: SplitButtonClickEvent) => any;
 }>, {
 themeColor: string;
 size: string;
@@ -2728,16 +2786,44 @@ items: any[];
 opened: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
+/**
+ * The arguments for the `blur` event.
+ */
 export declare interface SplitButtonBlurEvent {
+    /**
+     * The native browser blur event (FocusEvent).
+     */
+    event: FocusEvent;
 }
 
+/**
+ * The arguments for the `buttonclick` event.
+ */
 export declare interface SplitButtonClickEvent {
+    /**
+     * The native browser event.
+     */
+    event: any;
 }
 
+/**
+ * The arguments for the `close` event.
+ */
 export declare interface SplitButtonCloseEvent {
+    /**
+     * The native browser event.
+     */
+    event: any;
 }
 
+/**
+ * The arguments for the `focus` event.
+ */
 export declare interface SplitButtonFocusEvent {
+    /**
+     * The native browser focus event.
+     */
+    event: FocusEvent;
 }
 
 /**
@@ -2754,7 +2840,14 @@ export declare interface SplitButtonItemClickEvent {
     itemIndex: number;
 }
 
+/**
+ * The arguments for the `open` event.
+ */
 export declare interface SplitButtonOpenEvent {
+    /**
+     * The native browser event.
+     */
+    event: any;
 }
 
 /**
@@ -2838,7 +2931,9 @@ checkOverflow(): void;
 onWindowResize(event: any): void;
 onContentScroll(buttonClicked: any): void;
 onToggleoverflow(opened: boolean): void;
-}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+}, ComponentOptionsMixin, ComponentOptionsMixin, {
+resize: (event: ToolbarResizeEvent) => true;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
 tabIndex: {
 type: PropType<number>;
 default: number;
@@ -2886,7 +2981,9 @@ buttonScrollSpeed: {
 type: PropType<number>;
 default: number;
 };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+onResize?: (event: ToolbarResizeEvent) => any;
+}>, {
 tabIndex: number;
 size: string;
 fillMode: string;

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-buttons",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1762519465,version:"7.0.1-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-buttons",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1762528498,version:"7.0.1-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "Kendo UI for Vue",
   productCode: "KENDOUIVUE",
   productCodes: ["KENDOUIVUE"],
-  publishDate: 1762519465,
-  version: "7.0.1-develop.2",
+  publishDate: 1762528498,
+  version: "7.0.1-develop.3",
   licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-buttons",
-  "version": "7.0.1-develop.2",
+  "version": "7.0.1-develop.3",
   "description": "TODO",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -19,9 +19,9 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-vue-common": "7.0.1-develop.2",
-    "@progress/kendo-vue-intl": "7.0.1-develop.2",
-    "@progress/kendo-vue-popup": "7.0.1-develop.2",
+    "@progress/kendo-vue-common": "7.0.1-develop.3",
+    "@progress/kendo-vue-intl": "7.0.1-develop.3",
+    "@progress/kendo-vue-popup": "7.0.1-develop.3",
     "@progress/kendo-webspeech-common": "^1.0.1",
     "@progress/kendo-svg-icons": "^4.4.0",
     "vue": "^3.0.2"
@@ -43,7 +43,7 @@
     "package": {
       "productName": "Kendo UI for Vue",
       "productCode": "KENDOUIVUE",
-      "publishDate": 1762519465,
+      "publishDate": 1762528498,
       "licensingDocsUrl": "https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
     }
   },

package/toolbar/Toolbar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),n=require("@progress/kendo-vue-common"),h=require("../util.js"),d=require("../package-metadata.js"),u=require("./tools/ToolbarScrollable.js"),b=require("./tools/ToolbarOverflowSection.js"),p=c.defineComponent({name:"KendoToolbar",props:{tabIndex:{type:Number,default:0},dir:{type:String,validator:function(t){return[null,"ltr","rtl"].includes(t)},default:"ltr"},keyboardNavigation:{type:Boolean,default:!0},buttons:{type:Array,default:function(){}},size:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large"].includes(t)}},fillMode:{type:String,default:"solid",validator:function(t){return[null,"solid","flat","outline"].includes(t)}},ariaLabel:String,overflow:{type:String,default:"section",validator:function(t){return[null,"none","section","scroll"].includes(t)}},scrollButtons:{type:String,default:"auto",validator:function(t){return[null,"hidden","visible","auto"].includes(t)}},scrollButtonsPosition:{type:String,default:"split",validator:function(t){return[null,"start","end","split"].includes(t)}},buttonScrollSpeed:{type:Number,default:100}},data(){return{defaultSlot:null,offsetWidth:0,offsetHeight:0,currentButtons:[],focusedSelector:"",isScrollStartPosition:!0,isScrollEndPosition:!1,focusableButtons:[],isOverflowing:!1,scrollContentRef:null,lastToolbarWidthRef:0,overFlowToolsRef:[],overFlowOpened:!1,visibleToolsRef:void 0}},created(){this.focusedSelector=this.selectors.map(t=>t+":focus").join(","),n.validatePackage(d.packageMetadata)},computed:{selectors(){return this.$props.buttons||h.toolbarButtons},wrapperClass(){const{size:t,fillMode:e,overflow:o,scrollButtons:s}=this.$props;return{"k-toolbar":!0,[`k-toolbar-${e}`]:e,[`k-toolbar-${n.kendoThemeMaps.sizeMap[t]||t}`]:t,"k-toolbar-scrollable":o==="scroll","k-toolbar-scrollable-overlay":o==="scroll"&&(s==="hidden"||s===void 0),"k-toolbar-scrollable-start":o==="scroll"&&s==="hidden"&&this.isScrollStartPosition,"k-toolbar-scrollable-end":o==="scroll"&&s==="hidden"&&this.isScrollEndPosition,"k-toolbar-section":o&&o==="section"}}},mounted(){n.canUseDOM&&window.ResizeObserver&&(this.observerResize=new window.ResizeObserver(this.onWindowResize),this.observerResize.observe(this.$el));const t=this.$el;t&&(this.offsetWidth=t.offsetWidth,this.offsetHeight=t.offsetHeight,this.$props.keyboardNavigation!==!1&&(this.currentButtons=this.getCurrentButtons(),this.setTabIndex(0))),this.scrollContentRef=this.$refs.toolbarScrollable&&this.$refs.toolbarScrollable.scrollContentRef,this.defaultSlot&&(this.visibleToolsRef=this.defaultSlot.filter(e=>e&&e.type).map((e,o)=>c.cloneVNode(e,{key:e.key||o})),this.$nextTick(()=>{this.checkOverflow(),this.initOverflow(this.$refs.toolbar)}))},updated(){!this.$el||this.$props.keyboardNavigation===!1||(this.currentButtons=this.getCurrentButtons(),this.setTabIndex(this.focusedIndex()))},unmounted(){n.canUseDOM&&this.observerResize&&this.observerResize.disconnect(),this.currentButtons.length=0},render(){const{overflow:t,scrollButtons:e,scrollButtonsPosition:o,prevButton:s,nextButton:l,buttonScrollSpeed:a,dir:f,fillMode:i,size:r}=this.$props;return this.defaultSlot=n.getDefaultSlots(this),c.createVNode("div",{ref:"toolbar",class:this.wrapperClass,role:"toolbar",dir:f,"aria-label":this.$props.ariaLabel,onKeydown:this.onKeyDown},[t==="scroll"&&c.createVNode(c.Fragment,null,[c.createVNode(u.ToolbarScrollable,{ref:"toolbarScrollable",scrollButtons:e,scrollButtonsPosition:o,prevButton:s,nextButton:l,isOverflowing:this.isOverflowing,buttonScrollSpeed:a,dir:f,isScrollStartPosition:this.isScrollStartPosition,isScrollEndPosition:this.isScrollEndPosition,toolbarItems:this.defaultSlot,onContentscroll:this.onContentScroll},null)]),t==="section"&&c.createVNode(b.ToolbarOverflowSection,{opened:this.overFlowOpened,toolbarRef:this.$refs.toolbar,toolbarWidth:this.offsetWidth,fillMode:i,size:r,visibleTools:this.visibleToolsRef,overFlowTools:this.overFlowToolsRef,onToggleoverflow:this.onToggleoverflow,allTools:this.defaultSlot},null),t==="none"&&this.defaultSlot])},methods:{getCurrentButtons(){return this.$el&&this.$el.querySelectorAll?Array.from(this.$el.querySelectorAll(this.selectors.join(","))):[]},getInternalButtons(){return this.$el&&this.$el.querySelectorAll?Array.from(this.$el.querySelectorAll(h.internalButtons)):[]},focusedIndex(){const t=this.$el&&this.$el.querySelector&&this.$el.querySelector(this.focusedSelector);return Math.max(0,this.currentButtons.findIndex(e=>e===t))},setTabIndex(t){const{tabIndex:e}=this.$props;this.currentButtons.forEach((o,s)=>{o.tabIndex=s===t?e:-1}),this.getInternalButtons().forEach(o=>{o.tabIndex=-1})},onKeyDown(t){if(this.$props.keyboardNavigation===!1)return;const e=t.target;if(!(t.keyCode===n.Keys.left||t.keyCode===n.Keys.right)||t.defaultPrevented||this.currentButtons.findIndex(l=>l===e)===-1)return;const s=this.focusedIndex();t.keyCode===n.Keys.left?this.focusButton(s,s-1):this.focusButton(s,s+1)},focusButton(t,e){const{tabIndex:o}=this.$props,s=this.currentButtons[e];if(s){s.tabIndex=o,s.focus();const l=this.currentButtons[t];l&&(l.tabIndex=-1)}},initOverflow(t,e){let o=200;const s=[],l=[];Array.from(t.children).forEach((a,f)=>{o+=Math.ceil(a.clientWidth),o<=this.$refs.toolbar.offsetWidth-50?s.push(this.visibleToolsRef[f]):l.push(this.visibleToolsRef[f])}),this.visibleToolsRef=s,this.overFlowToolsRef=l},checkOverflow(){if(this.$props.overflow==="scroll"){const t=this.scrollContentRef;t&&(this.isOverflowing=t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight,this.isOverflowing?this.onContentScroll():(this.isScrollStartPosition=!0,this.isScrollEndPosition=!0))}else if(this.$props.overflow==="section"||this.$props.overflow===void 0){const t=this.$refs.toolbar;let e=0;if(t){const o=t.offsetWidth,s=parseInt(window.getComputedStyle(t).gap||"0",10),l=Array.from(t.children).reduce((i,r)=>(i+=Math.ceil(r.clientWidth),i),0),a=Array.from(t.children).length,f=s*2;if(e=36+Number(l)+a*s+f,e>o){const i=[...this.visibleToolsRef],r=i.pop();this.visibleToolsRef=i,r&&(this.overFlowToolsRef=[r,...this.overFlowToolsRef]),this.lastToolbarWidthRef=o}else if(o>this.lastToolbarWidthRef+s*a/2.75){const i=[...this.overFlowToolsRef],r=i.shift();r&&this.lastToolbarWidthRef+s*a>30&&(this.overFlowToolsRef=i,this.visibleToolsRef=[...this.visibleToolsRef,r]),this.lastToolbarWidthRef=o}else this.$forceUpdate()}}},onWindowResize(t){window.requestAnimationFrame(()=>{const e=this.$el;if(this.overFlowOpened=!1,!e)return;const o=e.offsetWidth,s=e.offsetHeight;if(this.offsetWidth!==o||this.offsetHeight!==s){this.offsetWidth=o,this.offsetHeight=s;const l={offsetWidth:this.offsetWidth,offsetHeight:this.offsetHeight};this.$emit("resize",{target:this,...l,nativeEvent:t})}this.checkOverflow()})},onContentScroll(t){const e=this.scrollContentRef;if(t&&e){let o,s;t==="next"?o=!1:e.scrollLeft<=this.$props.buttonScrollSpeed?o=!0:o=e.scrollLeft===0,t==="prev"?s=!1:e.scrollLeft+e.clientWidth+this.$props.buttonScrollSpeed>=e.scrollWidth?s=!0:s=e.scrollLeft+e.clientWidth===e.scrollWidth,this.isScrollStartPosition=!!o,this.isScrollEndPosition=!!s}else this.isScrollStartPosition=!0,this.isScrollEndPosition=!1},onToggleoverflow(t){this.overFlowOpened=t}}});exports.Toolbar=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),n=require("@progress/kendo-vue-common"),h=require("../util.js"),d=require("../package-metadata.js"),u=require("./tools/ToolbarScrollable.js"),b=require("./tools/ToolbarOverflowSection.js"),p=c.defineComponent({name:"KendoToolbar",props:{tabIndex:{type:Number,default:0},dir:{type:String,validator:function(t){return[null,"ltr","rtl"].includes(t)},default:"ltr"},keyboardNavigation:{type:Boolean,default:!0},buttons:{type:Array,default:function(){}},size:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large"].includes(t)}},fillMode:{type:String,default:"solid",validator:function(t){return[null,"solid","flat","outline"].includes(t)}},ariaLabel:String,overflow:{type:String,default:"section",validator:function(t){return[null,"none","section","scroll"].includes(t)}},scrollButtons:{type:String,default:"auto",validator:function(t){return[null,"hidden","visible","auto"].includes(t)}},scrollButtonsPosition:{type:String,default:"split",validator:function(t){return[null,"start","end","split"].includes(t)}},buttonScrollSpeed:{type:Number,default:100}},emits:{resize:t=>!0},data(){return{defaultSlot:null,offsetWidth:0,offsetHeight:0,currentButtons:[],focusedSelector:"",isScrollStartPosition:!0,isScrollEndPosition:!1,focusableButtons:[],isOverflowing:!1,scrollContentRef:null,lastToolbarWidthRef:0,overFlowToolsRef:[],overFlowOpened:!1,visibleToolsRef:void 0}},created(){this.focusedSelector=this.selectors.map(t=>t+":focus").join(","),n.validatePackage(d.packageMetadata)},computed:{selectors(){return this.$props.buttons||h.toolbarButtons},wrapperClass(){const{size:t,fillMode:e,overflow:o,scrollButtons:s}=this.$props;return{"k-toolbar":!0,[`k-toolbar-${e}`]:e,[`k-toolbar-${n.kendoThemeMaps.sizeMap[t]||t}`]:t,"k-toolbar-scrollable":o==="scroll","k-toolbar-scrollable-overlay":o==="scroll"&&(s==="hidden"||s===void 0),"k-toolbar-scrollable-start":o==="scroll"&&s==="hidden"&&this.isScrollStartPosition,"k-toolbar-scrollable-end":o==="scroll"&&s==="hidden"&&this.isScrollEndPosition,"k-toolbar-section":o&&o==="section"}}},mounted(){n.canUseDOM&&window.ResizeObserver&&(this.observerResize=new window.ResizeObserver(this.onWindowResize),this.observerResize.observe(this.$el));const t=this.$el;t&&(this.offsetWidth=t.offsetWidth,this.offsetHeight=t.offsetHeight,this.$props.keyboardNavigation!==!1&&(this.currentButtons=this.getCurrentButtons(),this.setTabIndex(0))),this.scrollContentRef=this.$refs.toolbarScrollable&&this.$refs.toolbarScrollable.scrollContentRef,this.defaultSlot&&(this.visibleToolsRef=this.defaultSlot.filter(e=>e&&e.type).map((e,o)=>c.cloneVNode(e,{key:e.key||o})),this.$nextTick(()=>{this.checkOverflow(),this.initOverflow(this.$refs.toolbar)}))},updated(){!this.$el||this.$props.keyboardNavigation===!1||(this.currentButtons=this.getCurrentButtons(),this.setTabIndex(this.focusedIndex()))},unmounted(){n.canUseDOM&&this.observerResize&&this.observerResize.disconnect(),this.currentButtons.length=0},render(){const{overflow:t,scrollButtons:e,scrollButtonsPosition:o,prevButton:s,nextButton:l,buttonScrollSpeed:a,dir:f,fillMode:i,size:r}=this.$props;return this.defaultSlot=n.getDefaultSlots(this),c.createVNode("div",{ref:"toolbar",class:this.wrapperClass,role:"toolbar",dir:f,"aria-label":this.$props.ariaLabel,onKeydown:this.onKeyDown},[t==="scroll"&&c.createVNode(c.Fragment,null,[c.createVNode(u.ToolbarScrollable,{ref:"toolbarScrollable",scrollButtons:e,scrollButtonsPosition:o,prevButton:s,nextButton:l,isOverflowing:this.isOverflowing,buttonScrollSpeed:a,dir:f,isScrollStartPosition:this.isScrollStartPosition,isScrollEndPosition:this.isScrollEndPosition,toolbarItems:this.defaultSlot,onContentscroll:this.onContentScroll},null)]),t==="section"&&c.createVNode(b.ToolbarOverflowSection,{opened:this.overFlowOpened,toolbarRef:this.$refs.toolbar,toolbarWidth:this.offsetWidth,fillMode:i,size:r,visibleTools:this.visibleToolsRef,overFlowTools:this.overFlowToolsRef,onToggleoverflow:this.onToggleoverflow,allTools:this.defaultSlot},null),t==="none"&&this.defaultSlot])},methods:{getCurrentButtons(){return this.$el&&this.$el.querySelectorAll?Array.from(this.$el.querySelectorAll(this.selectors.join(","))):[]},getInternalButtons(){return this.$el&&this.$el.querySelectorAll?Array.from(this.$el.querySelectorAll(h.internalButtons)):[]},focusedIndex(){const t=this.$el&&this.$el.querySelector&&this.$el.querySelector(this.focusedSelector);return Math.max(0,this.currentButtons.findIndex(e=>e===t))},setTabIndex(t){const{tabIndex:e}=this.$props;this.currentButtons.forEach((o,s)=>{o.tabIndex=s===t?e:-1}),this.getInternalButtons().forEach(o=>{o.tabIndex=-1})},onKeyDown(t){if(this.$props.keyboardNavigation===!1)return;const e=t.target;if(!(t.keyCode===n.Keys.left||t.keyCode===n.Keys.right)||t.defaultPrevented||this.currentButtons.findIndex(l=>l===e)===-1)return;const s=this.focusedIndex();t.keyCode===n.Keys.left?this.focusButton(s,s-1):this.focusButton(s,s+1)},focusButton(t,e){const{tabIndex:o}=this.$props,s=this.currentButtons[e];if(s){s.tabIndex=o,s.focus();const l=this.currentButtons[t];l&&(l.tabIndex=-1)}},initOverflow(t,e){let o=200;const s=[],l=[];Array.from(t.children).forEach((a,f)=>{o+=Math.ceil(a.clientWidth),o<=this.$refs.toolbar.offsetWidth-50?s.push(this.visibleToolsRef[f]):l.push(this.visibleToolsRef[f])}),this.visibleToolsRef=s,this.overFlowToolsRef=l},checkOverflow(){if(this.$props.overflow==="scroll"){const t=this.scrollContentRef;t&&(this.isOverflowing=t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight,this.isOverflowing?this.onContentScroll():(this.isScrollStartPosition=!0,this.isScrollEndPosition=!0))}else if(this.$props.overflow==="section"||this.$props.overflow===void 0){const t=this.$refs.toolbar;let e=0;if(t){const o=t.offsetWidth,s=parseInt(window.getComputedStyle(t).gap||"0",10),l=Array.from(t.children).reduce((i,r)=>(i+=Math.ceil(r.clientWidth),i),0),a=Array.from(t.children).length,f=s*2;if(e=36+Number(l)+a*s+f,e>o){const i=[...this.visibleToolsRef],r=i.pop();this.visibleToolsRef=i,r&&(this.overFlowToolsRef=[r,...this.overFlowToolsRef]),this.lastToolbarWidthRef=o}else if(o>this.lastToolbarWidthRef+s*a/2.75){const i=[...this.overFlowToolsRef],r=i.shift();r&&this.lastToolbarWidthRef+s*a>30&&(this.overFlowToolsRef=i,this.visibleToolsRef=[...this.visibleToolsRef,r]),this.lastToolbarWidthRef=o}else this.$forceUpdate()}}},onWindowResize(t){window.requestAnimationFrame(()=>{const e=this.$el;if(this.overFlowOpened=!1,!e)return;const o=e.offsetWidth,s=e.offsetHeight;if(this.offsetWidth!==o||this.offsetHeight!==s){this.offsetWidth=o,this.offsetHeight=s;const l={offsetWidth:this.offsetWidth,offsetHeight:this.offsetHeight};this.$emit("resize",{target:this,...l,nativeEvent:t})}this.checkOverflow()})},onContentScroll(t){const e=this.scrollContentRef;if(t&&e){let o,s;t==="next"?o=!1:e.scrollLeft<=this.$props.buttonScrollSpeed?o=!0:o=e.scrollLeft===0,t==="prev"?s=!1:e.scrollLeft+e.clientWidth+this.$props.buttonScrollSpeed>=e.scrollWidth?s=!0:s=e.scrollLeft+e.clientWidth===e.scrollWidth,this.isScrollStartPosition=!!o,this.isScrollEndPosition=!!s}else this.isScrollStartPosition=!0,this.isScrollEndPosition=!1},onToggleoverflow(t){this.overFlowOpened=t}}});exports.Toolbar=p;

package/toolbar/Toolbar.mjs

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as d, createVNode as a, Fragment as u, cloneVNode as b } from "vue";
-import { Keys as h, getDefaultSlots as p, canUseDOM as c, kendoThemeMaps as S, validatePackage as v } from "@progress/kendo-vue-common";
+import { Keys as h, getDefaultSlots as p, canUseDOM as c, kendoThemeMaps as v, validatePackage as S } from "@progress/kendo-vue-common";
 import { internalButtons as w, toolbarButtons as g } from "../util.mjs";
 import { packageMetadata as m } from "../package-metadata.mjs";
 import { ToolbarScrollable as y } from "./tools/ToolbarScrollable.mjs";
@@ -75,6 +75,9 @@ const I = /* @__PURE__ */ d({
       default: 100
     }
   },
+  emits: {
+    resize: (t) => !0
+  },
   data() {
     return {
       defaultSlot: null,
@@ -94,7 +97,7 @@ const I = /* @__PURE__ */ d({
     };
   },
   created() {
-    this.focusedSelector = this.selectors.map((t) => t + ":focus").join(","), v(m);
+    this.focusedSelector = this.selectors.map((t) => t + ":focus").join(","), S(m);
   },
   computed: {
     selectors() {
@@ -110,7 +113,7 @@ const I = /* @__PURE__ */ d({
       return {
         "k-toolbar": !0,
         [`k-toolbar-${e}`]: e,
-        [`k-toolbar-${S.sizeMap[t] || t}`]: t,
+        [`k-toolbar-${v.sizeMap[t] || t}`]: t,
         "k-toolbar-scrollable": o === "scroll",
         "k-toolbar-scrollable-overlay": o === "scroll" && (s === "hidden" || s === void 0),
         "k-toolbar-scrollable-start": o === "scroll" && s === "hidden" && this.isScrollStartPosition,

package/toolbar/tools/ToolbarOverflowSection.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),c=require("@progress/kendo-vue-popup"),u=require("./ToolbarSeparator.js"),p=require("../../Button.js"),d=require("@progress/kendo-svg-icons"),b=require("@progress/kendo-vue-intl"),l=require("../messages/index.js"),g=require("@progress/kendo-vue-common"),h=o.defineComponent({name:"ToolbarOverflowSection",props:{toolbarRef:Object,toolbarWidth:Number,fillMode:String,size:String,visibleTools:Array,overFlowTools:Array,opened:Boolean,allTools:Array},emits:["toggleoverflow"],inject:{kendoLocalizationService:{default:null}},methods:{handleClick(){this.$emit("toggleoverflow",!this.$props.opened)}},render(){const{visibleTools:e,overFlowTools:n,allTools:t}=this.$props,{toolbarRef:i,toolbarWidth:r,fillMode:s,size:a}=this.$props;return o.createVNode(o.Fragment,null,[e&&[...t].splice(0,e.length),n.length>0&&o.createVNode(o.Fragment,null,[o.createVNode(u.ToolbarSeparator,{class:"k-toolbar-button-separator"},null),o.createVNode(p.Button,{ref:"buttonRef",class:"k-toolbar-overflow-button",fillMode:"flat",svgIcon:d.moreHorizontalIcon,title:b.provideLocalizationService(this).toLanguageString(l.moreButtonTitle,l.messages[l.moreButtonTitle]),onClick:this.handleClick},null),o.createVNode(c.Popup,{anchor:i,show:this.$props.opened,popupClass:"k-toolbar-popup",key:r,style:{width:r+"px"}},{default:()=>[o.createVNode("span",{class:`k-toolbar-items-list k-toolbar-items-list-${g.kendoThemeMaps.sizeMap[a]} k-toolbar-items-list-${s}`},[e&&[...t].splice(e.length,t.length)])]})])])}});exports.ToolbarOverflowSection=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),c=require("@progress/kendo-vue-popup"),u=require("./ToolbarSeparator.js"),p=require("../../Button.js"),d=require("@progress/kendo-svg-icons"),b=require("@progress/kendo-vue-intl"),l=require("../messages/index.js"),g=require("@progress/kendo-vue-common"),h=o.defineComponent({name:"ToolbarOverflowSection",props:{toolbarRef:Object,toolbarWidth:Number,fillMode:String,size:String,visibleTools:Array,overFlowTools:Array,opened:Boolean,allTools:Array},emits:{toggleoverflow:e=>!0},inject:{kendoLocalizationService:{default:null}},methods:{handleClick(){this.$emit("toggleoverflow",!this.$props.opened)}},render(){const{visibleTools:e,overFlowTools:n,allTools:t}=this.$props,{toolbarRef:i,toolbarWidth:r,fillMode:s,size:a}=this.$props;return o.createVNode(o.Fragment,null,[e&&[...t].splice(0,e.length),n.length>0&&o.createVNode(o.Fragment,null,[o.createVNode(u.ToolbarSeparator,{class:"k-toolbar-button-separator"},null),o.createVNode(p.Button,{ref:"buttonRef",class:"k-toolbar-overflow-button",fillMode:"flat",svgIcon:d.moreHorizontalIcon,title:b.provideLocalizationService(this).toLanguageString(l.moreButtonTitle,l.messages[l.moreButtonTitle]),onClick:this.handleClick},null),o.createVNode(c.Popup,{anchor:i,show:this.$props.opened,popupClass:"k-toolbar-popup",key:r,style:{width:r+"px"}},{default:()=>[o.createVNode("span",{class:`k-toolbar-items-list k-toolbar-items-list-${g.kendoThemeMaps.sizeMap[a]} k-toolbar-items-list-${s}`},[e&&[...t].splice(e.length,t.length)])]})])])}});exports.ToolbarOverflowSection=h;