@progress/kendo-vue-grid
Version:
144 lines (143 loc) • 4.25 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 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 r, h as m } from "vue";
import { noop as u, Icon as h, getTemplate as g, Keys as f } from "@progress/kendo-vue-common";
import { KEYBOARD_NAV_DATA_ID as y, KEYBOARD_NAV_DATA_LEVEL as I, DETAIL_EXPAND_ACTION as b } from "@progress/kendo-vue-data-tools";
import { provideLocalizationService as S } from "@progress/kendo-vue-intl";
import { collapseDetailAriaLabel as s, messages as d, expandDetailAriaLabel as p } from "../messages/main.mjs";
import { minusIcon as $, plusIcon as k } from "@progress/kendo-svg-icons";
const K = /* @__PURE__ */ c({
name: "KendoGridHierarchyCell",
inheritAttrs: !1,
props: {
id: String,
field: String,
dataItem: Object,
format: String,
type: String,
className: String,
colSpan: Number,
columnIndex: Number,
columnsCount: Number,
rowType: String,
level: Number,
expanded: Boolean,
editor: String,
isSelected: Boolean,
dataIndex: Number,
ariaColumnIndex: Number,
render: [String, Function, Object],
isRtl: Boolean
},
emits: {
change: null,
cellkeydown: null
},
inject: {
kendo: {
default: null
},
kendoIntlService: {
default: null
},
kendoLocalizationService: {
default: null
},
getKeyboardNavigationAttributes: {
default: u
}
},
methods: {
triggerStateChange() {
const e = this.kendo;
e.dataItemKey && this.$props.dataItem[e.dataItemKey] !== void 0 && (e == null || e.dispatchDetailExpand({
type: b.TOGGLE,
id: this.$props.dataItem[e.dataItemKey]
}));
},
triggerKeydown(e, t) {
this.$emit("cellkeydown", {
event: e,
dataItem: this.$props.dataItem,
field: this.$props.field,
expanded: t
}), !e.defaultPrevented && e.keyCode === f.enter && (e.preventDefault(), this.$emit("change", {
dataItem: this.$props.dataItem,
dataIndex: this.$props.dataIndex,
event: e,
field: this.$props.field,
value: !t
}), this.triggerStateChange());
},
clickHandler(e, t, i) {
e.preventDefault(), this.$emit("change", {
dataItem: t,
event: e,
field: void 0,
value: !i
}), this.triggerStateChange();
}
},
computed: {
wrapperClass() {
return {
"k-table-td": !0,
"k-hierarchy-cell": !0,
[this.className || ""]: this.className
};
}
},
render() {
let e = null;
const t = this.getKeyboardNavigationAttributes(this.$props.id), i = S(this), l = i.toLanguageString(s, d[s]), o = i.toLanguageString(p, d[p]);
if (this.$props.rowType === "groupFooter")
e = r("td", {
class: this.wrapperClass
}, null);
else if (this.$props.rowType !== "groupHeader") {
const a = this.$props.expanded;
e = r("td", {
style: this.$attrs.style,
onKeydown: (n) => {
this.triggerKeydown(n, a);
},
class: this.wrapperClass,
"aria-expanded": a ? "true" : "false",
role: "gridcell",
"aria-colindex": this.$props.ariaColumnIndex,
tabindex: t.tabIndex,
"data-keyboardnavlevel": t[I],
"data-keyboardnavid": t[y]
}, [r("a", {
onClick: (n) => {
this.clickHandler(n, this.$props.dataItem, a);
},
href: "#",
tabindex: -1,
title: a ? l : o,
"aria-label": a ? l : o
}, [r(h, {
name: a ? "minus" : "plus",
icon: a ? $ : k
}, null)])]);
}
return g.call(this, {
h: m,
template: this.$props.render,
defaultRendering: e,
additionalProps: this.$props,
additionalListeners: {
keydown: this.triggerKeydown,
click: this.clickHandler
}
});
}
});
export {
K as GridHierarchyCell
};