hongluan-ui/lib/components/cascader-panel/src/menu.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index = require('../../scrollbar/index.js');
var index$1 = require('../../spinner/index.js');
var node = require('./node.js');
require('../../../hooks/index.js');
var types = require('./types.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index$2 = require('../../../hooks/use-locale/index.js');
var index$3 = require('../../../hooks/use-id/index.js');

const _sfc_main = vue.defineComponent({
  name: "CascaderMenu",
  components: {
    HlScrollbar: index.HlScrollbar,
    HlCascaderNode: node["default"],
    HlSpinner: index$1.HlSpinner
  },
  props: {
    nodes: {
      type: Array,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    const { t } = index$2.useLocale();
    const instance = vue.getCurrentInstance();
    const id = index$3.useId();
    let activeNode = null;
    let hoverTimer = null;
    const panel = vue.inject(types.CASCADER_PANEL_INJECTION_KEY);
    const hoverZone = vue.ref(null);
    const isLoading = vue.computed(() => !panel.initialLoaded);
    const isEmpty = vue.computed(() => !props.nodes.length);
    const menuId = vue.computed(() => `${id.value}-${props.index}`);
    const handleExpand = (e) => {
      activeNode = e.target;
    };
    const handleMouseMove = (e) => {
      if (!panel.isHoverMenu || !activeNode || !hoverZone.value)
        return;
      if (activeNode.contains(e.target)) {
        clearHoverTimer();
        const el = instance.vnode.el;
        const { left } = el.getBoundingClientRect();
        const { offsetWidth, offsetHeight } = el;
        const startX = e.clientX - left;
        const top = activeNode.offsetTop;
        const bottom = top + activeNode.offsetHeight;
        hoverZone.value.innerHTML = `
          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${top} L${offsetWidth} 0 V${top} Z" />
          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" />
        `;
      } else if (!hoverTimer) {
        hoverTimer = window.setTimeout(clearHoverZone, panel.config.hoverThreshold);
      }
    };
    const clearHoverTimer = () => {
      if (!hoverTimer)
        return;
      clearTimeout(hoverTimer);
      hoverTimer = null;
    };
    const clearHoverZone = () => {
      if (!hoverZone.value)
        return;
      hoverZone.value.innerHTML = "";
      clearHoverTimer();
    };
    return {
      panel,
      hoverZone,
      isEmpty,
      isLoading,
      menuId,
      t,
      handleExpand,
      handleMouseMove,
      clearHoverZone
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hl_cascader_node = vue.resolveComponent("hl-cascader-node");
  const _component_hl_spinner = vue.resolveComponent("hl-spinner");
  const _component_hl_scrollbar = vue.resolveComponent("hl-scrollbar");
  return vue.openBlock(), vue.createBlock(_component_hl_scrollbar, {
    key: _ctx.menuId,
    tag: "ul",
    role: "menu",
    class: "cascader-menu",
    "wrap-class": "cascader-menu-wrap",
    "view-class": [
      "cascader-menu-list",
      _ctx.isEmpty && "is-empty"
    ],
    onMousemove: _ctx.handleMouseMove,
    onMouseleave: _ctx.clearHoverZone
  }, {
    default: vue.withCtx(() => {
      var _a;
      return [
        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.nodes, (node) => {
          return vue.openBlock(), vue.createBlock(_component_hl_cascader_node, {
            key: node.uid,
            node,
            "menu-id": _ctx.menuId,
            onExpand: _ctx.handleExpand
          }, null, 8, ["node", "menu-id", "onExpand"]);
        }), 128)),
        _ctx.isLoading ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 0,
          class: "cascader-menu-empty-text is-loading"
        }, [
          vue.createVNode(_component_hl_spinner),
          vue.createTextVNode(" " + vue.toDisplayString(_ctx.t("hl.cascader.loading")), 1)
        ])) : _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 1,
          class: "cascader-menu-empty-text"
        }, vue.toDisplayString(_ctx.t("hl.cascader.noData")), 1)) : ((_a = _ctx.panel) == null ? void 0 : _a.isHoverMenu) ? (vue.openBlock(), vue.createElementBlock("svg", {
          key: 2,
          ref: "hoverZone",
          class: "cascader-menu-hover-zone"
        }, null, 512)) : vue.createCommentVNode("v-if", true)
      ];
    }),
    _: 1
  }, 8, ["view-class", "onMousemove", "onMouseleave"]);
}
var HlCascaderMenu = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = HlCascaderMenu;
//# sourceMappingURL=menu.js.map