@progress/kendo-vue-data-tools
Version:
92 lines (91 loc) • 2.57 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 d, createVNode as s, ref as a } from "vue";
import { setRef as l, getRef as o, BrowserSupportService as h, isRtl as n, kendoThemeMaps as c } from "@progress/kendo-vue-common";
const f = /* @__PURE__ */ d({
name: "KendoHeader",
props: {
staticHeaders: Boolean,
headerRow: Object,
columnResize: Object,
cols: Array,
draggable: Boolean,
size: String
},
data() {
return {
divStyle: {},
element: null,
headerWrap: null,
table: null
};
},
computed: {
wrapperClass() {
return {
"k-grid-header": !0,
"k-grid-draggable-header": this.$props.draggable
};
},
tableClass() {
const {
size: e
} = this.$props;
return {
"k-table": !0,
"k-grid-header-table": !0,
[`k-table-${c.sizeMap[e] || e}`]: e
};
}
},
mounted() {
this.headerWrap = o(this, "headerWrap"), this.table = o(this, "table"), this.$props.columnResize.colGroupHeader = o(this, "colGroupHeader");
const e = new h().scrollbarWidth, t = n(this.$el);
this.$props.columnResize && this.$props.columnResize.setIsRtl(t);
const r = Math.max(0, e) + "px", i = t ? 0 : r, p = t ? r : 0;
this.divStyle = {
padding: `0 ${i} 0 ${p}`
};
},
methods: {
setScrollLeft(e) {
this.headerWrap && (this.headerWrap.scrollLeft = e);
},
setWidth(e) {
this.table && (this.table.style.width = e + "px");
}
},
setup() {
const e = a(null), t = a(null), r = a(null);
return {
headerWrapRef: e,
tableRef: t,
colGroupHeaderRef: r
};
},
render() {
return this.$props.staticHeaders ? s("div", {
class: this.wrapperClass,
style: this.divStyle,
role: "presentation"
}, [s("div", {
ref: l(this, "headerWrap"),
class: "k-grid-header-wrap",
role: "presentation"
}, [s("table", {
class: this.tableClass,
ref: l(this, "table"),
role: "presentation"
}, [s("colgroup", {
ref: l(this, "colGroupHeader")
}, [this.$props.cols]), this.$props.headerRow])])]) : this.$props.headerRow;
}
});
export {
f as Header
};