@progress/kendo-vue-data-tools/columnmenu/ColumnMenu.mjs

TODO

/**
 * @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 i, createVNode as o, inject as r } from "vue";
import { setRef as s, Icon as l, guid as c } from "@progress/kendo-vue-common";
import { Popup as u } from "@progress/kendo-vue-popup";
import { moreVerticalIcon as a } from "@progress/kendo-svg-icons";
import { ColumnMenuContent as h } from "./ColumnMenuContent.mjs";
import { tableKeyboardNavigationTools as m } from "../navigation/utils.mjs";
import { provideLocalizationService as p } from "@progress/kendo-vue-intl";
import { columnMenu as n, messages as f } from "../messages/main.mjs";
const T = /* @__PURE__ */ i({
  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],
    onClose: Function,
    onSortchange: Function,
    onFilterchange: Function
  },
  inject: {
    kendoIntlService: {
      default: null
    },
    kendoLocalizationService: {
      default: null
    }
  },
  data() {
    return {
      show: !1,
      blurTimeout: void 0
    };
  },
  created() {
    this._anchor = c();
  },
  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 = m.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: r("kendoLocalizationService", {})
    };
  },
  render() {
    const e = this.$props.render, t = p(this);
    return o("div", {
      style: {
        display: "inline"
      }
    }, [o("div", {
      class: "k-grid-column-menu k-grid-filter",
      tabindex: 0,
      title: `${this.$props.column.field} ${t.toLanguageString(n, f[n])}`,
      ref: s(this, "kendoAnchor"),
      onClick: this.anchorClick
    }, [o(l, {
      name: "more-vertical",
      icon: a
    }, null)]), o(u, {
      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(h, {
        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 {
  T as ColumnMenu
};