@progress/kendo-vue-buttons
Version:
287 lines (286 loc) • 9.79 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* 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 { Button as p } from "../Button.mjs";
import { canUseDOM as y, Keys as i, getDefaultSlots as I, guid as a, validatePackage as O, classNames as S, kendoThemeMaps as x, templateRendering as c, getListeners as h } from "@progress/kendo-vue-common";
import { ButtonItem as D } from "./ButtonItem.mjs";
import w 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 { caretAltDownIcon as K } from "@progress/kendo-svg-icons";
import { packageMetadata as v } from "../package-metadata.mjs";
const N = /* @__PURE__ */ C({
name: "KendoSplitButton",
emits: {
focus: null,
blur: null,
buttonclick: null,
itemclick: null,
open: null,
close: null
},
props: {
accessKey: String,
ariaLabel: String,
text: String,
items: {
type: Array,
default: function() {
return [];
}
},
textField: String,
tabIndex: Number,
disabled: Boolean,
icon: String,
svgIcon: Object,
size: {
type: String,
default: "medium"
},
rounded: {
type: String,
default: "medium"
},
fillMode: {
type: String,
default: "solid",
validator: function(e) {
return [null, "flat", "link", "outline", "solid"].includes(e);
}
},
themeColor: {
type: String,
default: "base",
validator: function(e) {
return [null, "base", "dark", "error", "info", "inverse", "inverse", "light", "primary", "secondary", "success", "tertiary", "warning"].includes(e);
}
},
opened: {
type: Boolean,
default: void 0
},
iconClass: String,
imageUrl: String,
popupSettings: Object,
itemRender: [String, Function, Object],
item: [String, Function, Object],
className: String,
buttonClass: String,
dir: String
},
data() {
return {
focused: !1,
focusedIndex: -1,
currentOpened: !1
};
},
created() {
this._blurTimeout = null, this._anchor = a(), this.mainButton = null, this.guid = a(), this.buttonsData = [], O(v);
},
mounted() {
this.mainButton = this.$refs[this._anchor], (this.$props.dir === void 0 && this.isRtl() || this.computedOpened) && this.$forceUpdate();
},
updated() {
this.focused && this.element() && (this.mainButton = this.$refs[this._anchor], this.mainButton.focus());
},
computed: {
computedOpened() {
return this.$props.opened === void 0 ? this.currentOpened : this.$props.opened;
},
wrapperClass() {
return {
"k-split-button": !0,
"k-button-group": !0,
"k-focus": this.focused
};
}
},
setup() {
return {
kendoAnchorRef: k(null)
};
},
render() {
this.buttonsData = this.$props.items;
const e = this.isRtl(), t = e ? "rtl" : void 0, {
tabIndex: s,
disabled: r
} = this.$props, f = I(this), m = function() {
const {
item: n,
itemRender: d,
textField: b
} = this.$props;
return this.buttonsData.length > 0 ? this.buttonsData.map(function(u, l) {
const $ = typeof u != "string" ? {
...u,
render: c.call(this, u.render, h.call(this))
} : u;
return o(D, {
class: "k-menu-item",
role: "menuitem",
dataItem: $,
textField: b,
focused: this.focusedIndex === l,
onClick: this.onItemClick,
onDown: this.onItemDown,
render: c.call(this, d, h.call(this)),
item: n,
key: l,
index: l,
id: `${this.guid}-${l}`
}, null);
}, this) : null;
}, g = function() {
const {
popupSettings: n = {},
size: d
} = this.$props;
return o(P, {
anchor: this._anchor,
show: this.computedOpened,
animate: n.animate,
popupClass: S("k-menu-popup", n.popupClass),
anchorAlign: n.anchorAlign || E(e),
popupAlign: n.popupAlign || B(e),
style: e ? {
direction: "rtl"
} : void 0
}, {
default: () => [o("ul", {
class: `k-group k-menu-group k-reset k-menu-group-${x.sizeMap[d] || d}`,
role: "menu",
id: this.guid,
"aria-labelledby": this._anchor
}, [m.call(this)])]
});
};
return o("div", {
class: this.wrapperClass,
onKeydown: this.onKeyDown,
onFocusin: this.onFocus,
onFocusout: this.onBlur,
dir: t
}, [o(p, {
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,
tabIndex: s,
accessKey: this.$props.accessKey,
class: this.$props.buttonClass,
icon: this.$props.icon,
svgIcon: this.$props.svgIcon,
iconClass: this.$props.iconClass,
imageUrl: this.$props.imageUrl,
dir: t,
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(p, {
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,
tabIndex: -1,
onClick: this.onSplitPartClick,
onMousedown: this.onDownSplitPart,
onPointerdown: this.onDownSplitPart,
dir: t,
"aria-label": "menu toggling button"
}, null), g.call(this)]);
},
methods: {
element() {
return this.mainButton;
},
onKeyDown(e) {
if (e.altKey) {
!this.computedOpened && e.keyCode === i.down ? (this.dispatchPopupEvent(e, !0), this.focusedIndex = 0, this.currentOpened = !0) : this.computedOpened && e.keyCode === i.up && (this.dispatchPopupEvent(e, !1), this.focusedIndex = -1, this.currentOpened = !1);
return;
}
let t;
if (e.keyCode === i.enter || e.keyCode === i.space ? (e.preventDefault(), this.dispatchClickEvent(e, this.focusedIndex), this.focusedIndex !== void 0 && this.focusedIndex >= 0 && (t = {
focusedIndex: this.computedOpened ? -1 : 0,
currentOpened: !this.computedOpened
}, this.dispatchPopupEvent(e, t.currentOpened))) : this.computedOpened && e.keyCode === i.esc && (t = {
focusedIndex: -1,
currentOpened: !1
}, this.dispatchPopupEvent(e, t.currentOpened)), this.computedOpened) {
const s = w(this.focusedIndex, e.keyCode, e.altKey, this.buttonsData.length);
s !== this.focusedIndex && (t = t || {}, t.focusedIndex = s);
const r = e.keyCode === i.up || e.keyCode === i.down || e.keyCode === i.left || e.keyCode === i.right;
!e.altKey && r && e.preventDefault();
}
t && (this.focusedIndex = t.focusedIndex, this.focused = t.focused, t.currentOpened !== void 0 && (this.currentOpened = t.currentOpened));
},
onFocus(e) {
this.focused || (this.$emit("focus", e, this, void 0), this.focused = !0), this.focusedIndex = -1, clearTimeout(this._blurTimeout);
},
onItemClick(e, t) {
const s = this.computedOpened;
s && (this.focusedIndex = 0, this.currentOpened = !1), this.dispatchClickEvent(e, t), s && this.dispatchPopupEvent(e, !1);
},
onBlur(e) {
clearTimeout(this._blurTimeout), this.createBlurTimeout(e);
},
createBlurTimeout(e) {
const t = this;
this._blurTimeout = setTimeout(() => {
y && document.activeElement !== t.mainButton && (t.focused = !1, t.focusedIndex = -1, t.$emit("blur", e, this, void 0), t.computedOpened && (t.currentOpened = !1, t.dispatchPopupEvent(e, !1)));
}, 200);
},
dispatchClickEvent(e, t) {
this.isItemDisabled(t) || (t === -1 ? this.$emit("buttonclick", e, this, void 0) : this.$emit("itemclick", {
event: e,
component: this,
item: this.buttonsData[t],
itemIndex: t
}));
},
onSplitPartClick(e) {
if (this.buttonsData.length) {
const t = !this.computedOpened;
this.dispatchPopupEvent(e, t), this.focusedIndex = t ? 0 : -1, this.currentOpened = t, this.focused = !0;
}
},
onDownSplitPart(e) {
e.preventDefault(), this.element() && document.activeElement !== this.element() && this.element().focus();
},
onItemDown(e) {
document.activeElement === this.element() && e.preventDefault();
},
dispatchPopupEvent(e, t) {
this.$emit(t ? "open" : "close", e, this, void 0);
},
isItemDisabled(e) {
return this.buttonsData[e] ? this.buttonsData[e].disabled : this.$props.disabled;
},
isRtl() {
return this.$props.dir !== void 0 ? this.$props.dir === "rtl" : !!this.$el && getComputedStyle(this.$el).direction === "rtl";
}
}
});
export {
N as SplitButton
};