@progress/kendo-vue-grid
Version:
158 lines (157 loc) • 4.25 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 s, inject as l, createVNode as o } from "vue";
import { SvgIcon as c, guid as u, setRef as a, Icon as i } from "@progress/kendo-vue-common";
import { Popup as h } from "@progress/kendo-vue-popup";
import { moreVerticalIcon as m } from "@progress/kendo-svg-icons";
import { ColumnMenuContent as p } from "./ColumnMenuContent.mjs";
import { tableKeyboardNavigationTools as f } from "@progress/kendo-vue-data-tools";
import { provideLocalizationService as d } from "@progress/kendo-vue-intl";
import { columnMenu as r, messages as b } from "../messages/main.mjs";
const S = /* @__PURE__ */ s({
name: "KendoColumnMenu",
props: {
animate: {
type: [Boolean, Object],
default: function() {
return !0;
}
},
column: Object,
sortable: [Boolean, Object],
sort: {
type: Array
},
opened: Boolean,
filter: Object,
filterable: Boolean,
filterOperators: Object,
render: [Boolean, String, Function, Object],
columnMenuIcon: c,
onClose: Function,
onSortchange: Function,
onFilterchange: Function
},
inject: {
kendoIntlService: {
default: null
},
kendoLocalizationService: {
default: null
}
},
data() {
return {
show: !1,
blurTimeout: void 0
};
},
created() {
this._anchor = u();
},
computed: {
currentOpen() {
return this.show || this.$props.opened;
}
},
watch: {
currentOpen: function(e) {
this.$nextTick(function() {
if (this._content = this.$refs.content, e && this._content) {
const t = f.getFocusableElements(this._content, {
focusable: !0
});
t.length ? t[0].focus() : this._content.focus();
}
});
}
},
methods: {
blur() {
clearTimeout(this.blurTimeout), this.blurTimeout = setTimeout(() => {
this.closeMenu();
}, 200);
},
focus() {
clearTimeout(this.blurTimeout);
},
handleFocus(e) {
clearTimeout(this.blurTimeout);
},
anchorClick(e) {
e.preventDefault(), this.show = !this.show;
},
closeMenu() {
this.$emit("close"), this.show = !1;
},
sortChange(e, t) {
this.$emit("sortchange", e, t);
},
filterChange(e, t) {
this.$emit("filterchange", e, t);
}
},
setup() {
return {
kendoLocalizationService: l("kendoLocalizationService", {})
};
},
render() {
const e = this.$props.render, t = d(this), {
columnMenuIcon: n
} = this.$props;
return o("div", {
style: {
display: "inline"
}
}, [o("a", {
class: "k-grid-header-menu k-grid-column-menu",
title: `${this.$props.column.field} ${t.toLanguageString(r, b[r])}`,
ref: a(this, "kendoAnchor"),
onClick: this.anchorClick,
href: "#"
}, [n ? o(i, {
name: n.name,
icon: n
}, null) : o(i, {
name: "more-vertical",
icon: m
}, null)]), o(h, {
animate: this.$props.animate,
anchor: this._anchor,
show: this.currentOpen
}, {
default: () => [o("div", {
ref: "content",
class: "k-column-menu k-grid-columnmenu-popup",
tabindex: 0,
onFocusout: this.blur,
onFocusin: this.focus,
style: {
outline: "none",
width: "230px"
}
}, [o(p, {
column: this.$props.column,
sortable: this.$props.sortable,
sort: this.$props.sort,
filter: this.$props.filter,
filterable: this.$props.filterable,
filterOperators: this.$props.filterOperators,
render: e,
onContentfocus: this.handleFocus,
onClosemenu: this.closeMenu,
onSortchange: this.sortChange,
onFilterchange: this.filterChange
}, null)])]
})]);
}
});
export {
S as ColumnMenu
};