@progress/kendo-vue-grid
Version:
151 lines (150 loc) • 4.42 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 x, createVNode as i, h as b } from "vue";
import { noop as y, Keys as $, Icon as v, getTemplate as k } from "@progress/kendo-vue-common";
import { KEYBOARD_NAV_DATA_LEVEL as A, KEYBOARD_NAV_DATA_ID as C } from "@progress/kendo-vue-data-tools";
import { groupCaretAriaLabelCollapse as u, messages as m, groupCaretAriaLabelExpand as g } from "../messages/main.mjs";
import { provideLocalizationService as h } from "@progress/kendo-vue-intl";
import { caretAltDownIcon as S, caretAltRightIcon as N, caretAltLeftIcon as L } from "@progress/kendo-svg-icons";
const _ = /* @__PURE__ */ x({
name: "KendoGridGroupCell",
inheritAttrs: !1,
props: {
id: String,
field: String,
dataItem: Object,
format: String,
type: String,
colSpan: Number,
className: String,
columnIndex: Number,
columnsCount: Number,
rowType: String,
level: Number,
expanded: Boolean,
editor: String,
dataIndex: Number,
isSelected: Boolean,
isRtl: Boolean,
ariaColumnIndex: Number,
render: [String, Function, Object]
},
emits: {
change: null,
cellkeydown: null
},
inject: {
kendoIntlService: {
default: null
},
kendoLocalizationService: {
default: null
},
getKeyboardNavigationAttributes: {
default: y
}
},
computed: {
tdClass() {
const {
className: e
} = this.$props;
return {
"k-table-td": !0,
[e]: e
};
}
},
methods: {
triggerKeydown(e, t) {
this.$emit("cellkeydown", {
event: e,
dataItem: this.$props.dataItem,
dataIndex: this.$props.dataIndex,
field: this.$props.field,
expanded: this.$props.expanded
}), !e.defaultPrevented && e.keyCode === $.enter && (e.preventDefault(), this.$emit("change", {
dataItem: this.$props.dataItem,
dataIndex: this.$props.dataIndex,
event: e,
level: this.$props.level,
field: void 0,
value: !t
}));
},
clickHandler(e, t, n) {
e.preventDefault(), this.$emit("change", {
dataItem: t,
dataIndex: this.$props.dataIndex,
event: e,
level: this.$props.level,
field: void 0,
value: !n
});
}
},
render() {
let e = null;
const {
columnIndex: t,
level: n,
columnsCount: s,
rowType: f,
dataItem: r,
field: l,
expanded: a,
render: I
} = this.$props, d = this.getKeyboardNavigationAttributes(this.$props.id), p = h(this).toLanguageString(u, m[u]), c = h(this).toLanguageString(g, m[g]);
return t === void 0 || n === void 0 || t < n || s === void 0 || f !== "groupHeader" || r[l] === void 0 ? e = i("td", {
style: this.$attrs.style,
key: "g" + t,
class: "k-table-td k-group-cell"
}, null) : t <= n && (e = i("td", {
style: this.$attrs.style,
onKeydown: (o) => {
this.triggerKeydown(o, a);
},
key: "g-colspan",
class: this.tdClass,
colspan: s - t,
role: "gridcell",
"aria-colindex": this.$props.ariaColumnIndex,
"aria-selected": this.$props.isSelected,
"aria-expanded": a,
"data-grid-col-index": this.$props.columnIndex,
tabindex: d.tabIndex,
"data-keyboardnavlevel": d[A],
"data-keyboardnavid": d[C]
}, [i("p", {
class: "k-reset"
}, [i("a", {
onClick: (o) => {
this.clickHandler(o, r, a);
},
href: "#",
tabindex: -1,
title: a ? p : c,
"aria-label": a ? p : c
}, [i(v, {
name: a ? "caret-alt-down" : this.isRtl ? "caret-alt-left" : "caret-alt-right",
icon: a ? S : this.isRtl ? L : N
}, null)]), r[l] ? r[l].toString() : ""])])), k.call(this, {
h: b,
template: I,
defaultRendering: e,
additionalProps: this.$props,
additionalListeners: {
keydown: this.triggerKeydown,
click: this.clickHandler
}
});
}
});
export {
_ as GridGroupCell
};