@progress/kendo-vue-grid
Version:
157 lines (156 loc) • 4.42 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 l, createVNode as a, h as d, inject as p } from "vue";
import { getNestedValue as c, parsers as h } from "../utils/main.mjs";
import { provideIntlService as g } from "@progress/kendo-vue-intl";
import { noop as m, getTemplate as u } from "@progress/kendo-vue-common";
import { KEYBOARD_NAV_DATA_ID as $, KEYBOARD_NAV_DATA_LEVEL as f } from "@progress/kendo-vue-data-tools";
const I = /* @__PURE__ */ l({
name: "GridCell",
inheritAttrs: !1,
emits: {
cellclick: null,
cellkeydown: null
},
props: {
id: String,
field: String,
dataItem: Object,
format: String,
readFormat: String,
className: String,
colSpan: Number,
columnIndex: Number,
columnsCount: Number,
dataIndex: Number,
rowType: String,
level: Number,
expanded: Boolean,
type: String,
editor: String,
rowSpan: [Number, Object],
isSelected: Boolean,
isHighlighted: Boolean,
ariaColumnIndex: Number,
render: [String, Function, Object],
isRtl: Boolean,
onEdit: Function,
onSave: Function,
onRemove: Function,
onCancel: Function,
onChange: Function,
onSelectionchange: Function
},
inject: {
kendoIntlService: {
default: null
},
getKeyboardNavigationAttributes: {
default: m
}
},
methods: {
triggerClick() {
this.$emit("cellclick", {
dataItem: this.$props.dataItem,
field: this.$props.field
});
},
triggerKeydown(t) {
this.$emit("cellkeydown", {
event: t,
dataItem: this.$props.dataItem,
field: this.$props.field
});
},
triggerEdit(t) {
this.$emit("edit", t);
},
triggerAdd(t) {
this.$emit("add", t);
},
triggerCancel(t) {
this.$emit("cancel", t);
},
triggerSave(t) {
this.$emit("save", t);
},
triggerRemove(t) {
this.$emit("remove", t);
}
},
created() {
this._intl = g(this);
},
computed: {
tdClass() {
const {
className: t,
isHighlighted: e
} = this.$props;
return {
"k-table-td": !0,
"k-highlighted": e,
[t]: t
};
}
},
setup() {
return {
kendoIntlService: p("kendoIntlService", {})
};
},
render() {
var r, n, o;
let t = null;
const e = this.getKeyboardNavigationAttributes(this.$props.id);
if (((r = this.$props.rowSpan) == null ? void 0 : r.count) === null)
return null;
if (this.$props.rowType === "groupFooter")
t = a("td", {
class: this.tdClass
}, null);
else if (this.$props.field !== void 0 && this.$props.rowType !== "groupHeader") {
const i = c(this.$props.field, this.$props.dataItem);
let s = "";
i != null && (s = this.$props.format ? this.$props.type ? this._intl.format(this.$props.format, h[this.$props.type](i, this._intl, this.$props.readFormat)) : this._intl.format(this.$props.format, i) : i.toString()), t = a("td", {
style: this.$attrs.style,
colspan: this.$props.colSpan,
rowspan: (o = (n = this.$props.rowSpan) == null ? void 0 : n.count) != null ? o : void 0,
class: this.tdClass,
onKeydown: this.triggerKeydown,
onClick: this.triggerClick,
role: "gridcell",
"aria-colindex": this.$props.ariaColumnIndex,
"aria-selected": this.$props.isSelected,
"data-grid-col-index": this.$props.columnIndex,
tabindex: e.tabIndex,
"data-keyboardnavlevel": e[f],
"data-keyboardnavid": e[$]
}, [s]);
}
return u.call(this, {
h: d,
template: this.$props.render,
defaultRendering: t,
additionalProps: this.$props,
additionalListeners: {
click: this.triggerClick,
keydown: this.triggerKeydown,
edit: this.triggerEdit,
add: this.triggerAdd,
cancel: this.triggerCancel,
save: this.triggerSave,
remove: this.triggerRemove
}
});
}
});
export {
I as GridCell
};