@progress/kendo-vue-grid
Version:
292 lines (291 loc) • 10.9 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 _, createVNode as r, isVNode as P } from "vue";
import { normalize as q } from "../interfaces/GridSortSettings.mjs";
import { ColumnResizer as E } from "../drag/ColumnResizer.mjs";
import { ColumnDraggable as G } from "../drag/ColumnDraggable.mjs";
import { GridHeaderCell as U } from "./GridHeaderCell.mjs";
import { ColumnMenu as J } from "../columnMenu/ColumnMenu.mjs";
import { noop as Q, templateRendering as W, getListeners as X, Keys as M, hasListener as Y, Icon as Z } from "@progress/kendo-vue-common";
import { HeaderThElement as ee } from "@progress/kendo-vue-data-tools";
import { sortableColumnAriaLabel as O, messages as k, sortableColumnAscendingAriaLabel as I, sortableColumnDescendingAriaLabel as z } from "../messages/main.mjs";
import { provideLocalizationService as ne } from "@progress/kendo-vue-intl";
import { sortAscSmallIcon as te, sortDescSmallIcon as le } from "@progress/kendo-svg-icons";
import { getVirtualHeaderCellsToRender as re } from "../utils/virtualColumns.mjs";
function H(n) {
return typeof n == "function" || Object.prototype.toString.call(n) === "[object Object]" && !P(n);
}
const S = {
none: "none",
asc: "ascending",
desc: "descending"
}, oe = {
true: {
asc: "desc",
desc: "",
"": "asc"
},
false: {
asc: "desc",
desc: "asc",
"": "asc"
}
}, $e = /* @__PURE__ */ _({
name: "KendoHeaderRow",
props: {
grid: Object,
cellRender: [String, Function, Object],
groupable: [Boolean, Object],
reorderable: Boolean,
sortable: [Boolean, Object],
sort: {
type: Array
},
filter: Object,
filterable: Boolean,
filterOperators: Object,
filterChange: Function,
filterRow: Object,
columns: Array,
cellsToRender: Array,
columnVirtualization: Boolean,
columnsMap: Array,
columnResize: Object,
columnMenu: [Boolean, String, Function, Object],
columnMenuAnimate: {
type: [Boolean, Object],
default: function() {
return !0;
}
},
columnMenuIcon: Object,
isRtl: Boolean,
isColCountDefined: Boolean,
// columnsInitial prop:
// Needed for hidden column scenarios. By this value we can define correct aria-colindex attribute
columnsInitial: Array,
onSortChange: Function,
onFilterChange: Function,
onSelectionchange: Function,
onPressHandler: Function,
onDragHandler: Function,
onReleaseHandler: Function
},
inject: {
onNavFocus: {
default: Q
},
kendoLocalizationService: {
default: null
}
},
data() {
return {
columnMenuOpened: {}
};
},
created() {
this.serviceIndex = 0, this.index = -1, this._element = null, this.cellClick = this.cellClick.bind(this);
},
methods: {
pressHandler(n, t) {
this.$emit("pressHandler", n, t);
},
dragHandler(n, t) {
this.$emit("dragHandler", n, t);
},
releaseHandler(n) {
this.$emit("releaseHandler", n);
},
selectionChangeHandler(n) {
this.$emit("selectionchange", n);
},
cellClick(n, t) {
if (n.preventDefault(), !Y.call(this, "sortChange"))
return;
const {
allowUnsort: u,
mode: h
} = q(this.$props.sortable || !1, t.sortable || !1), s = (this.$props.sort || []).filter((o) => o.field === t.field)[0], c = oe[u][s && s.dir || ""], f = h === "single" ? [] : (this.$props.sort || []).filter((o) => o.field !== t.field);
c !== "" && t.field && f.push({
field: t.field,
dir: c
}), this.sortChangeHandler(f, {
event: n,
field: t.field
});
},
sortChangeHandler(n, t) {
this.$emit("sortChange", n, t);
},
filterChangeHandler(n, t) {
this.$emit("filterChange", n, t);
},
cellClass(n, t, u) {
const h = t ? " " + t : "";
let s = "k-header" + (u ? " k-grid-header-sticky" : "") + h;
return this.$props.sort && this.$props.sort.filter((c) => c.field === n).length > 0 && (s += " k-sorted"), s;
},
cellKeyDown(n, t) {
n.defaultPrevented || (n.keyCode === M.enter && this.cellClick(n, t), n.altKey && n.keyCode === M.down && t.field && (n.preventDefault(), this.columnMenuOpened = {
[t.field]: !0
}));
},
getTemplate(n) {
return W.call(this.$props.grid, n, X.call(this.$props.grid));
},
columnMenuClose() {
this.onNavFocus({}), this.columnMenuOpened = {};
}
},
computed: {
element() {
return this._element;
},
theadClasses() {
return {
"k-table-thead": !0
};
}
},
render() {
const n = ne(this), t = n.toLanguageString(O, k[O]), u = n.toLanguageString(I, k[I]), h = n.toLanguageString(z, k[z]);
this.serviceIndex = 0, this.index = -1;
const s = this.$props.columnsMap && this.$props.columnsMap.length === 1, c = this.$props.columnVirtualization && s, f = function(o, m) {
const i = re({
cellsToRender: this.$props.cellsToRender || [],
columns: this.$props.columns,
rowIndex: m,
enableVirtualization: c
}), R = i.columnsToRender.length > 0, L = R ? i.columnsToRender : o, w = R ? i.colSpans : [];
return L.map(function(A, D) {
var y;
const e = this.$props.columns[A], g = this.$props.sortable && e.sortable, C = this.$props.sort ? this.$props.sort.findIndex((l) => l.field === e.field) : -1, $ = C >= 0 && this.$props.sort[C].dir || "none", d = function(l) {
if (!this.$props.sort)
return null;
const b = l >= 0 ? this.$props.sort[l].dir : "";
return l >= 0 && [r("span", {
key: 1,
class: "k-sort-icon"
}, [r(Z, {
name: "sort-" + b + "-small",
icon: b === "asc" ? te : le
}, null)]), this.$props.sort.length > 1 && r("span", {
key: 2,
class: "k-sort-icon"
}, [r("span", {
class: "k-sort-order"
}, [l + 1])])];
}.call(this, C), a = e.columnMenu || e.columnMenu === !1 ? e.columnMenu : this.$props.columnMenu, j = e.menuIcon || this.$props.columnMenuIcon, x = (e.kFirst ? "k-first " : "") + this.cellClass(e.field, e.headerClassName, e.locked) + (a ? " k-filterable" : ""), F = !a || typeof a == "boolean" ? !!a : this.getTemplate(a), v = e.locked && e.left !== void 0 ? this.$props.isRtl ? {
left: e.right + "px",
right: e.left + "px"
} : {
left: e.left + "px",
right: e.right + "px"
} : void 0, T = S[$] === "none" ? t : S[$] === "ascending" ? u : h;
let p = e.isAccessible ? {
ariaSort: S[$],
ariaLabel: T,
role: "columnheader",
ariaColumnIndex: this.$props.isColCountDefined ? this.$props.columnsInitial.findIndex((l) => l.field === e.field) + 1 : void 0,
ariaSelected: !1,
ariaHaspopup: a ? "menu" : this.$props.filterable && e.filterable ? "dialog" : void 0
} : {
role: "columnheader"
};
const V = e.declarationIndex >= 0 ? ++this.index : --this.serviceIndex, B = e.columnMenuOpened !== void 0 ? e.columnMenuOpened : this.columnMenuOpened[e.field], K = (y = w[D]) != null ? y : e.headerColSpan;
return r(ee, {
ariaSort: g ? p.ariaSort : void 0,
ariaLabel: g ? p.ariaLabel : void 0,
role: p.role,
ariaColumnIndex: p.ariaColumnIndex,
ariaSelected: p.ariaSelected,
ariaHaspopup: p.ariaHaspopup,
key: V,
colSpan: K,
rowSpan: e.rowSpan,
class: x,
style: v,
columnId: e.id,
navigatable: e.navigatable,
onKeydown: (l) => this.cellKeyDown(l, e)
}, {
default: () => [[e.children.length === 0 && a && r(J, {
key: 0,
column: {
field: e.field,
filter: e.filter
},
opened: B,
animate: this.$props.columnMenuAnimate,
sortable: g,
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: F,
columnMenuIcon: j
}, null), e.internalHeaderCell && r("span", {
class: "k-cell-inner"
}, [r(e.internalHeaderCell, {
key: 1,
field: e.field,
sortable: g,
onHeadercellclick: (l) => this.cellClick(l, e),
onSelectionchange: this.selectionChangeHandler,
selectionValue: e.headerSelectionValue,
title: e.title,
render: (e.headerCell || this.$props.cellRender) && this.getTemplate(e.headerCell || this.$props.cellRender)
}, H(d) ? d : {
default: () => [d]
})]) || r("span", {
class: "k-cell-inner"
}, [r(U, {
key: 1,
field: e.field,
sortable: g,
onHeadercellclick: (l) => this.cellClick(l, e),
selectionValue: e.headerSelectionValue,
title: e.title,
render: (e.headerCell || this.$props.cellRender) && this.getTemplate(e.headerCell || this.$props.cellRender)
}, H(d) ? d : {
default: () => [d]
})]), this.$props.columnResize && this.$props.columnResize.resizable && e.resizable && r(E, {
key: 2,
onResize: (l, b, N) => this.$props.columnResize && this.$props.columnResize.dragHandler(l, e, b, N)
}, null)]]
});
}, this);
};
return r("thead", {
role: "rowgroup",
class: this.theadClasses,
"data-keyboardnavheader": !0
}, [this.$props.columnsMap.map(function(o, m) {
let i;
return (this.$props.groupable || this.$props.reorderable) && r(G, {
key: m,
onPressHandler: this.pressHandler,
onDragHandler: this.dragHandler,
onReleaseHandler: this.releaseHandler
}, H(i = f.call(this, o, m)) ? i : {
default: () => [i]
}) || r("tr", {
class: "k-table-row",
role: "row",
"aria-rowindex": this.columnsMap.length
}, [f.call(this, o, m)]);
}, this), this.$props.filterRow]);
}
});
export {
$e as HeaderRow
};