@progress/kendo-vue-data-tools
Version:
275 lines (274 loc) • 9.61 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 H, createVNode as s, isVNode as y } from "vue";
import { normalize as R } from "../interfaces/SortSettings.mjs";
import { ColumnResizer as S } from "../drag/ColumnResizer.mjs";
import { ColumnDraggable as M } from "../drag/ColumnDraggable.mjs";
import { HeaderCell as O } from "./HeaderCell.mjs";
import { ColumnMenu as F } from "../columnmenu/ColumnMenu.mjs";
import { HeaderSelectionCell as j } from "./HeaderSelectionCell.mjs";
import { noop as x, templateRendering as w, getListeners as I, Keys as m, hasListener as D, Icon as z } from "@progress/kendo-vue-common";
import { sortAscSmallIcon as A, sortDescSmallIcon as V } from "@progress/kendo-svg-icons";
import { HeaderThElement as v } from "./HeaderThElement.mjs";
function f(t) {
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !y(t);
}
const B = {
none: "none",
asc: "ascending",
desc: "descending"
}, K = {
true: {
asc: "desc",
desc: "",
"": "asc"
},
false: {
asc: "desc",
desc: "asc",
"": "asc"
}
}, Q = /* @__PURE__ */ H({
name: "KendoHeaderRow",
props: {
grid: Object,
cellRender: [String, Function, Object],
groupable: [Boolean, Object],
reorderable: Boolean,
sortable: [Boolean, Object],
sort: {
type: Array
},
selectedField: String,
filter: Object,
filterable: Boolean,
filterOperators: Object,
onFilterChange: Function,
filterRow: Object,
columns: Array,
columnsMap: Array,
columnResize: Object,
columnMenu: [Boolean, String, Function, Object],
columnMenuAnimate: {
type: [Boolean, Object],
default: function() {
return !0;
}
},
size: String,
isRtl: Boolean,
onSortChange: Function,
onSelectionchange: Function,
onPressHandler: Function,
onDragHandler: Function,
onReleaseHandler: Function
},
inject: {
onNavFocus: {
default: x
}
},
data() {
return {
columnMenuOpened: {}
};
},
created() {
this.serviceIndex = 0, this.index = -1, this._element = null, this.cellClick = this.cellClick.bind(this);
},
methods: {
pressHandler(t, l) {
this.$emit("pressHandler", t, l);
},
dragHandler(t, l) {
this.$emit("dragHandler", t, l);
},
releaseHandler(t) {
this.$emit("releaseHandler", t);
},
selectionChangeHandler(t) {
this.$emit("selectionchange", t);
},
cellClick(t, l) {
if (t.preventDefault(), !D.call(this, "sortChange"))
return;
const {
allowUnsort: a,
mode: e
} = R(this.$props.sortable || !1, l.sortable || !1), n = (this.$props.sort || []).filter((p) => p.field === l.field)[0], i = K[a][n && n.dir || ""], d = e === "single" ? [] : (this.$props.sort || []).filter((p) => p.field !== l.field);
i !== "" && l.field && d.push({
field: l.field,
dir: i
}), this.sortChangeHandler(d, {
event: t,
field: l.field
});
},
sortChangeHandler(t, l) {
this.$emit("sortChange", t, l);
},
filterChangeHandler(t, l) {
this.$emit("filterChange", t, l);
},
cellClass(t, l, a) {
const e = l ? " " + l : "";
let n = "k-header" + (a ? " k-grid-header-sticky" : "") + e;
return this.$props.sort && this.$props.sort.filter((i) => i.field === t).length > 0 && (n += " k-sorted"), n;
},
cellKeyDown(t, l) {
t.defaultPrevented || (t.keyCode === m.enter && this.cellClick(t, l), t.altKey && t.keyCode === m.down && l.field && (t.preventDefault(), this.columnMenuOpened = {
[l.field]: !0
}));
},
getTemplate(t) {
return w.call(this.$props.grid, t, I.call(this.$props.grid));
},
columnMenuClose() {
this.onNavFocus({}), this.columnMenuOpened = {};
}
},
computed: {
element() {
return this._element;
},
theadClasses() {
return {
"k-table-thead": !0,
"k-grid-header": !0
};
}
},
render() {
this.serviceIndex = 0, this.index = -1;
const t = function(l) {
return l.map(function(a) {
const e = this.$props.columns[a], n = this.$props.sortable && e.sortable, i = this.$props.sort ? this.$props.sort.findIndex((r) => r.field === e.field) : -1, d = i >= 0 && this.$props.sort[i].dir || "none", o = function(r) {
if (!this.$props.sort)
return null;
const u = r >= 0 ? this.$props.sort[r].dir : "";
return r >= 0 && [s(z, {
key: 1,
name: `sort-${u}-small`,
icon: u === "asc" ? A : V
}, null), this.$props.sort.length > 1 && s("span", {
key: 2,
class: "k-sort-order"
}, [r + 1])];
}.call(this, i), c = e.columnMenu || e.columnMenu === !1 ? e.columnMenu : this.$props.columnMenu, g = (e.kFirst ? "k-first " : "") + this.cellClass(e.field, e.headerClassName, e.locked) + (c ? " k-filterable" : ""), C = !c || typeof c == "boolean" ? !!c : this.getTemplate(c), $ = e.left !== void 0 ? this.$props.isRtl ? {
left: e.right + "px",
right: e.left + "px"
} : {
left: e.left + "px",
right: e.right + "px"
} : {}, h = e.isAccessible ? {
ariaSort: B[d],
role: "columnheader",
ariaColumnIndex: e.ariaColumnIndex,
ariaSelected: !1
} : {
role: "presentation"
}, b = e.declarationIndex >= 0 ? ++this.index : --this.serviceIndex;
return s(v, {
ariaSort: h.ariaSort,
role: h.role,
ariaColumnIndex: h.ariaColumnIndex,
ariaSelected: h.ariaSelected,
key: b,
colSpan: e.colSpan,
rowSpan: e.rowSpan,
class: g,
style: $,
columnId: e.id,
navigatable: e.navigatable,
onKeydown: (r) => this.cellKeyDown(r, e)
}, {
default: () => [[e.children.length === 0 && c && s(F, {
key: 0,
column: {
field: e.field,
filter: e.filter
},
opened: this.columnMenuOpened[e.field],
animate: this.$props.columnMenuAnimate,
sortable: n,
sort: this.$props.sort,
onClose: this.columnMenuClose,
onSortchange: this.sortChangeHandler,
filter: this.$props.filter,
filterable: this.$props.filterable && e.filterable,
filterOperators: this.$props.filterOperators,
onFilterchange: this.filterChangeHandler,
render: C
}, null), e.internalHeaderCell && s("span", {
class: "k-cell-inner"
}, [s(e.internalHeaderCell, {
key: 1,
field: e.field,
sortable: n,
onHeadercellclick: (r) => this.cellClick(r, e),
onSelectionchange: this.selectionChangeHandler,
selectionValue: e.headerSelectionValue,
title: e.title,
render: (e.headerCell || this.$props.cellRender) && this.getTemplate(e.headerCell || this.$props.cellRender)
}, f(o) ? o : {
default: () => [o]
})]) || this.$props.selectedField && e.field === this.$props.selectedField && s("span", {
class: "k-cell-inner"
}, [s(j, {
key: 1,
field: e.field,
sortable: n,
onHeadercellclick: (r) => this.cellClick(r, e),
onSelectionchange: this.selectionChangeHandler,
selectionValue: e.headerSelectionValue,
title: e.title,
render: (e.headerCell || this.$props.cellRender) && this.getTemplate(e.headerCell || this.$props.cellRender)
}, f(o) ? o : {
default: () => [o]
})]) || s("span", {
class: "k-cell-inner"
}, [s(O, {
key: 1,
field: e.field,
sortable: n,
onHeadercellclick: (r) => this.cellClick(r, e),
selectionValue: e.headerSelectionValue,
title: e.title,
render: (e.headerCell || this.$props.cellRender) && this.getTemplate(e.headerCell || this.$props.cellRender)
}, f(o) ? o : {
default: () => [o]
})]), this.$props.columnResize && this.$props.columnResize.resizable && e.resizable && s(S, {
key: 2,
onResize: (r, u, k) => this.$props.columnResize && this.$props.columnResize.dragHandler(r, e, u, k)
}, null)]]
});
}, this);
};
return s("thead", {
role: "presentation",
class: this.theadClasses,
"data-keyboardnavheader": !0
}, [this.$props.columnsMap.map(function(l, a) {
let e;
return (this.$props.groupable || this.$props.reorderable) && s(M, {
key: a,
onPressHandler: this.pressHandler,
onDragHandler: this.dragHandler,
onReleaseHandler: this.releaseHandler
}, f(e = t.call(this, l)) ? e : {
default: () => [e]
}) || s("tr", {
class: "k-table-row",
role: "row"
}, [t.call(this, l)]);
}, this), this.$props.filterRow]);
}
});
export {
Q as HeaderRow
};