@progress/kendo-vue-buttons 8.4.0-develop.1 → 8.4.0-develop.3

package/ListButton/SplitButton.mjs

@@ -5,24 +5,24 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as C, createVNode as o, ref as k } from "vue";
+import { defineComponent as y, createVNode as r, ref as O } from "vue";
 import { Button as a } from "../Button.mjs";
-import { canUseDOM as y, Keys as s, getDefaultSlots as I, guid as c, validatePackage as O, classNames as S, kendoThemeMaps as x, templateRendering as l, getListeners as h } from "@progress/kendo-vue-common";
-import { ButtonItem as D } from "./ButtonItem.mjs";
-import w from "./utils/navigation.mjs";
-import { Popup as v } from "@progress/kendo-vue-popup";
-import { getPopupAlign as P, getAnchorAlign as B } from "./utils/popup.mjs";
-import { caretAltDownIcon as E } from "@progress/kendo-svg-icons";
-import { packageMetadata as K } from "../package-metadata.mjs";
-const N = /* @__PURE__ */ C({
+import { canUseDOM as I, Keys as s, getDefaultSlots as S, guid as h, validatePackage as D, classNames as w, templateRendering as f, getListeners as m } from "@progress/kendo-vue-common";
+import { ButtonItem as x } from "./ButtonItem.mjs";
+import v from "./utils/navigation.mjs";
+import { Popup as P } from "@progress/kendo-vue-popup";
+import { getPopupAlign as B, getAnchorAlign as E } from "./utils/popup.mjs";
+import { chevronDownIcon as K } from "@progress/kendo-svg-icons";
+import { packageMetadata as A } from "../package-metadata.mjs";
+const L = /* @__PURE__ */ y({
   name: "KendoSplitButton",
   emits: {
-    focus: (e) => !0,
-    blur: (e) => !0,
-    buttonclick: (e) => !0,
-    itemclick: (e) => !0,
-    open: (e) => !0,
-    close: (e) => !0
+    focus: (t) => !0,
+    blur: (t) => !0,
+    buttonclick: (t) => !0,
+    itemclick: (t) => !0,
+    open: (t) => !0,
+    close: (t) => !0
   },
   props: {
     accessKey: String,
@@ -43,14 +43,14 @@ const N = /* @__PURE__ */ C({
     rounded: String,
     fillMode: {
       type: String,
-      validator: function(e) {
-        return ["flat", "link", "outline", "solid"].includes(e);
+      validator: function(t) {
+        return ["flat", "link", "outline", "solid"].includes(t);
       }
     },
     themeColor: {
       type: String,
-      validator: function(e) {
-        return ["base", "dark", "error", "info", "inverse", "light", "primary", "secondary", "success", "tertiary", "warning"].includes(e);
+      validator: function(t) {
+        return ["base", "dark", "error", "info", "inverse", "light", "primary", "secondary", "success", "tertiary", "warning"].includes(t);
       }
     },
     opened: {
@@ -74,7 +74,7 @@ const N = /* @__PURE__ */ C({
     };
   },
   created() {
-    this._blurTimeout = null, this._anchor = c(), this.mainButton = null, this.guid = c(), this.buttonsData = [], O(K);
+    this._blurTimeout = null, this._anchor = h(), this.mainButton = null, this.guid = h(), this.buttonsData = [], D(A);
   },
   mounted() {
     this.mainButton = this.$refs[this._anchor], (this.$props.dir === void 0 && this.isRtl() || this.computedOpened) && this.$forceUpdate();
@@ -96,77 +96,79 @@ const N = /* @__PURE__ */ C({
   },
   setup() {
     return {
-      kendoAnchorRef: k(null)
+      kendoAnchorRef: O(null)
     };
   },
   render() {
     this.buttonsData = this.$props.items;
-    const e = this.isRtl(), t = e ? "rtl" : void 0, {
+    const t = this.isRtl(), e = t ? "rtl" : void 0, {
       tabIndex: i,
-      disabled: r
-    } = this.$props, f = I(this), m = function() {
+      disabled: d
+    } = this.$props, p = S(this), g = function() {
       const {
         item: n,
-        itemRender: d,
-        textField: b
-      } = this.$props;
-      return this.buttonsData.length > 0 ? this.buttonsData.map(function(u, p) {
-        const $ = typeof u != "string" ? {
+        itemRender: c,
+        textField: C
+      } = this.$props, l = this.buttonsData.length;
+      return l > 0 ? this.buttonsData.map(function(u, o) {
+        const k = typeof u != "string" ? {
           ...u,
-          render: l.call(this, u.render, h.call(this))
+          render: f.call(this, u.render, m.call(this))
         } : u;
-        return o(D, {
-          class: "k-menu-item",
+        return r(x, {
           role: "menuitem",
-          dataItem: $,
-          textField: b,
-          focused: this.focusedIndex === p,
+          dataItem: k,
+          textField: C,
+          focused: this.focusedIndex === o,
           onClick: this.onItemClick,
           onDown: this.onItemDown,
-          render: l.call(this, d, h.call(this)),
+          render: f.call(this, c, m.call(this)),
           item: n,
-          key: p,
-          index: p,
-          id: `${this.guid}-${p}`
+          key: o,
+          index: o,
+          id: `${this.guid}-${o}`,
+          first: o === 0,
+          last: o === l - 1
         }, null);
       }, this) : null;
-    }, g = function() {
+    }, b = function() {
       const {
         popupSettings: n = {},
-        size: d
+        size: c
       } = this.$props;
-      return o(v, {
+      return r(P, {
         anchor: this._anchor,
         show: this.computedOpened,
         animate: n.animate,
-        popupClass: S("k-menu-popup", n.popupClass),
-        anchorAlign: n.anchorAlign || B(e),
-        popupAlign: n.popupAlign || P(e),
-        style: e ? {
+        popupClass: w("k-menu-popup", n.popupClass),
+        anchorAlign: n.anchorAlign || E(t),
+        popupAlign: n.popupAlign || B(t),
+        style: t ? {
           direction: "rtl"
         } : void 0
       }, {
-        default: () => [o("ul", {
-          class: `k-group k-menu-group k-reset k-menu-group-${x.sizeMap[d] || d}`,
+        default: () => [r("ul", {
+          class: "k-menu-group",
           role: "menu",
-          id: this.guid,
-          "aria-labelledby": this._anchor
-        }, [m.call(this)])]
+          id: this.guid
+        }, [g.call(this)])]
       });
-    };
-    return o("div", {
+    }, $ = this.$props.text || p ? {
+      default: () => [this.$props.text, p]
+    } : {};
+    return r("div", {
       class: this.wrapperClass,
       onKeydown: this.onKeyDown,
       onFocusin: this.onFocus,
       onFocusout: this.onBlur,
-      dir: t
-    }, [o(a, {
+      dir: e
+    }, [r(a, {
       size: this.$props.size,
       rounded: this.$props.rounded,
       fillMode: this.$props.fillMode,
       themeColor: this.$props.themeColor,
       onClick: (n) => this.onItemClick(n, -1),
-      disabled: r || void 0,
+      disabled: d || void 0,
       tabIndex: i,
       accessKey: this.$props.accessKey,
       class: this.$props.buttonClass,
@@ -174,108 +176,105 @@ const N = /* @__PURE__ */ C({
       svgIcon: this.$props.svgIcon,
       iconClass: this.$props.iconClass,
       imageUrl: this.$props.imageUrl,
-      dir: t,
+      dir: e,
       id: this._anchor,
       ref: this._anchor,
       type: "button",
-      "aria-disabled": r,
-      "aria-haspopup": "menu",
-      "aria-expanded": this.computedOpened,
-      "aria-label": this.$props.ariaLabel || `${this.$props.text || ""} splitbutton`,
-      "aria-controls": this.guid,
-      "aria-activedescendant": this.focusedIndex !== void 0 && this.focusedIndex >= 0 ? `${this.guid}-${this.focusedIndex}` : void 0
-    }, {
-      default: () => [this.$props.text, f]
-    }), o(a, {
-      svgIcon: E,
+      "aria-disabled": d || void 0,
+      "aria-label": this.$props.ariaLabel || (!this.$props.text && !p && (this.$props.svgIcon || this.$props.icon || this.$props.iconClass) ? "Action" : void 0)
+    }, $), r(a, {
+      svgIcon: K,
       size: this.$props.size,
       rounded: this.$props.rounded,
       fillMode: this.$props.fillMode,
       themeColor: this.$props.themeColor,
-      icon: "caret-alt-down",
-      disabled: r || void 0,
+      icon: "chevron-down",
+      class: "k-split-button-arrow",
+      disabled: d || void 0,
       tabIndex: -1,
       onClick: this.onSplitPartClick,
       onMousedown: this.onDownSplitPart,
       onPointerdown: this.onDownSplitPart,
-      dir: t,
-      "aria-label": "menu toggling button"
-    }, null), g.call(this)]);
+      dir: e,
+      "aria-label": "Toggle dropdown",
+      "aria-expanded": this.computedOpened,
+      "aria-controls": this.computedOpened ? this.guid : void 0
+    }, null), b.call(this)]);
   },
   methods: {
     element() {
       return this.mainButton;
     },
-    onKeyDown(e) {
-      if (e.altKey) {
-        !this.computedOpened && e.keyCode === s.down ? (this.dispatchPopupEvent(e, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && e.keyCode === s.up && (this.dispatchPopupEvent(e, !1), this.focusedIndex = -1, this.currentOpened = !1);
+    onKeyDown(t) {
+      if (t.altKey) {
+        !this.computedOpened && t.keyCode === s.down ? (this.dispatchPopupEvent(t, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && t.keyCode === s.up && (this.dispatchPopupEvent(t, !1), this.focusedIndex = -1, this.currentOpened = !1);
         return;
       }
-      let t;
-      if (e.keyCode === s.enter || e.keyCode === s.space ? (e.preventDefault(), this.dispatchClickEvent(e, this.focusedIndex), this.focusedIndex !== void 0 && this.focusedIndex >= 0 && (t = {
+      let e;
+      if (t.keyCode === s.enter || t.keyCode === s.space ? (t.preventDefault(), this.dispatchClickEvent(t, this.focusedIndex), this.focusedIndex !== void 0 && this.focusedIndex >= 0 && (e = {
         focusedIndex: this.computedOpened ? -1 : 0,
         currentOpened: !this.computedOpened
-      }, this.dispatchPopupEvent(e, t.currentOpened))) : this.computedOpened && e.keyCode === s.esc && (t = {
+      }, this.dispatchPopupEvent(t, e.currentOpened))) : this.computedOpened && t.keyCode === s.esc && (e = {
         focusedIndex: -1,
         currentOpened: !1
-      }, this.dispatchPopupEvent(e, t.currentOpened)), this.computedOpened) {
-        const i = w(this.focusedIndex, e.keyCode, e.altKey, this.buttonsData.length);
-        i !== this.focusedIndex && (t = t || {}, t.focusedIndex = i);
-        const r = e.keyCode === s.up || e.keyCode === s.down || e.keyCode === s.left || e.keyCode === s.right;
-        !e.altKey && r && e.preventDefault();
+      }, this.dispatchPopupEvent(t, e.currentOpened)), this.computedOpened) {
+        const i = v(this.focusedIndex, t.keyCode, t.altKey, this.buttonsData.length);
+        i !== this.focusedIndex && (e = e || {}, e.focusedIndex = i);
+        const d = t.keyCode === s.up || t.keyCode === s.down || t.keyCode === s.left || t.keyCode === s.right;
+        !t.altKey && d && t.preventDefault();
       }
-      t && (this.focusedIndex = t.focusedIndex, this.focused = t.focused, t.currentOpened !== void 0 && (this.currentOpened = t.currentOpened));
+      e && (this.focusedIndex = e.focusedIndex, this.focused = e.focused, e.currentOpened !== void 0 && (this.currentOpened = e.currentOpened));
     },
-    onFocus(e) {
+    onFocus(t) {
       this.focused || (this.$emit("focus", {
-        event: e
+        event: t
       }), this.focused = !0), this.focusedIndex = -1, clearTimeout(this._blurTimeout);
     },
-    onItemClick(e, t) {
+    onItemClick(t, e) {
       const i = this.computedOpened;
-      i && (this.focusedIndex = 0, this.currentOpened = !1), this.dispatchClickEvent(e, t), i && this.dispatchPopupEvent(e, !1);
+      i && (this.focusedIndex = 0, this.currentOpened = !1), this.dispatchClickEvent(t, e), i && this.dispatchPopupEvent(t, !1);
     },
-    onBlur(e) {
-      clearTimeout(this._blurTimeout), this.createBlurTimeout(e);
+    onBlur(t) {
+      clearTimeout(this._blurTimeout), this.createBlurTimeout(t);
     },
-    createBlurTimeout(e) {
-      const t = this;
+    createBlurTimeout(t) {
+      const e = this;
       this._blurTimeout = setTimeout(() => {
-        y && document.activeElement !== t.mainButton && (t.focused = !1, t.focusedIndex = -1, t.$emit("blur", {
-          event: e
-        }), t.computedOpened && (t.currentOpened = !1, t.dispatchPopupEvent(e, !1)));
+        I && document.activeElement !== e.mainButton && (e.focused = !1, e.focusedIndex = -1, e.$emit("blur", {
+          event: t
+        }), e.computedOpened && (e.currentOpened = !1, e.dispatchPopupEvent(t, !1)));
       }, 200);
     },
-    dispatchClickEvent(e, t) {
-      this.isItemDisabled(t) || (t === -1 ? this.$emit("buttonclick", {
-        event: e
+    dispatchClickEvent(t, e) {
+      this.isItemDisabled(e) || (e === -1 ? this.$emit("buttonclick", {
+        event: t
       }) : this.$emit("itemclick", {
-        event: e,
+        event: t,
         component: this,
-        item: this.buttonsData[t],
-        itemIndex: t
+        item: this.buttonsData[e],
+        itemIndex: e
       }));
     },
-    onSplitPartClick(e) {
+    onSplitPartClick(t) {
       if (this.buttonsData.length) {
-        const t = !this.computedOpened;
-        this.dispatchPopupEvent(e, t), this.focusedIndex = t ? 0 : -1, this.currentOpened = t, this.focused = !0;
+        const e = !this.computedOpened;
+        this.dispatchPopupEvent(t, e), this.focusedIndex = e ? 0 : -1, this.currentOpened = e, this.focused = !0;
       }
     },
-    onDownSplitPart(e) {
-      e.preventDefault(), this.element() && document.activeElement !== this.element() && this.element().focus();
+    onDownSplitPart(t) {
+      t.preventDefault(), this.element() && document.activeElement !== this.element() && this.element().focus();
     },
-    onItemDown(e) {
-      document.activeElement === this.element() && e.preventDefault();
+    onItemDown(t) {
+      document.activeElement === this.element() && t.preventDefault();
     },
-    dispatchPopupEvent(e, t) {
+    dispatchPopupEvent(t, e) {
       const i = {
-        event: e
+        event: t
       };
-      this.$emit(t ? "open" : "close", i);
+      this.$emit(e ? "open" : "close", i);
     },
-    isItemDisabled(e) {
-      return this.buttonsData[e] ? this.buttonsData[e].disabled : this.$props.disabled;
+    isItemDisabled(t) {
+      return this.buttonsData[t] ? this.buttonsData[t].disabled : this.$props.disabled;
     },
     isRtl() {
       return this.$props.dir !== void 0 ? this.$props.dir === "rtl" : !!this.$el && getComputedStyle(this.$el).direction === "rtl";
@@ -283,5 +282,5 @@ const N = /* @__PURE__ */ C({
   }
 });
 export {
-  N as SplitButton
+  L as SplitButton
 };

package/ListButton/messages/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const splitButtonToggleDropdown = "splitButton.toggleDropdown";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "splitButton.toggleDropdown": string;
+};

package/SegmentedControl/SegmentedControl.d.ts

@@ -19,7 +19,7 @@ declare const SegmentedControl: import('vue').DefineComponent<import('vue').Extr
         type: PropType<SegmentedItemProps[]>;
         default: () => any[];
     };
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xsmall" | "large">;
     layoutMode: {
         type: PropType<"stretch" | "compact">;
         default: string;
@@ -49,7 +49,7 @@ declare const SegmentedControl: import('vue').DefineComponent<import('vue').Extr
         type: PropType<SegmentedItemProps[]>;
         default: () => any[];
     };
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xsmall" | "large">;
     layoutMode: {
         type: PropType<"stretch" | "compact">;
         default: string;

package/SmartPasteButton/SmartPasteButton.d.ts

@@ -25,7 +25,7 @@ declare const SmartPasteButton: import('vue').DefineComponent<import('vue').Extr
         default: string;
     };
     size: {
-        type: PropType<"small" | "medium" | "large">;
+        type: PropType<"small" | "medium" | "xsmall" | "large">;
         default: string;
     };
     svgIcon: {
@@ -81,7 +81,7 @@ declare const SmartPasteButton: import('vue').DefineComponent<import('vue').Extr
         default: string;
     };
     size: {
-        type: PropType<"small" | "medium" | "large">;
+        type: PropType<"small" | "medium" | "xsmall" | "large">;
         default: string;
     };
     svgIcon: {
@@ -118,7 +118,7 @@ declare const SmartPasteButton: import('vue').DefineComponent<import('vue').Extr
     onClick?: (event: SmartPasteClickEvent) => any;
 }>, {
     type: string;
-    size: "small" | "medium" | "large";
+    size: "small" | "medium" | "xsmall" | "large";
     rounded: "small" | "medium" | "large" | "full" | "none";
     selected: boolean;
     disabled: boolean;

package/SpeechToText/SpeechToTextButton.d.ts

@@ -157,7 +157,7 @@ declare const SpeechToTextButton: import('vue').DefineComponent<import('vue').Ex
         type: PropType<boolean>;
         default: any;
     };
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xsmall" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: PropType<"flat" | "link" | "solid" | "outline">;
     themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;
@@ -216,7 +216,7 @@ declare const SpeechToTextButton: import('vue').DefineComponent<import('vue').Ex
         type: PropType<boolean>;
         default: any;
     };
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<"small" | "medium" | "xsmall" | "large">;
     rounded: PropType<"small" | "medium" | "large" | "full" | "none">;
     fillMode: PropType<"flat" | "link" | "solid" | "outline">;
     themeColor: PropType<"base" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "dark" | "light" | "inverse">;