3f72514f58c79ca895b0d7ff54464fcc79bae62bbb1f4847b5d3fd621b3a98a9a06912e39d49a21f25d7d3a45eedacef4ec84c55551ae5b91f30245db59fd1 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import { defineComponent, getCurrentInstance, inject, ref, computed, openBlock, createBlock, unref, normalizeClass, withCtx, createElementBlock, Fragment, renderList, createVNode, createTextVNode, toDisplayString, renderSlot, createCommentVNode } from 'vue';
  2. import { ElScrollbar } from '../../scrollbar/index.mjs';
  3. import { Loading } from '@element-plus/icons-vue';
  4. import { ElIcon } from '../../icon/index.mjs';
  5. import ElCascaderNode from './node2.mjs';
  6. import { CASCADER_PANEL_INJECTION_KEY } from './types.mjs';
  7. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  8. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  9. import { useLocale } from '../../../hooks/use-locale/index.mjs';
  10. import { useId } from '../../../hooks/use-id/index.mjs';
  11. const __default__ = defineComponent({
  12. name: "ElCascaderMenu"
  13. });
  14. const _sfc_main = /* @__PURE__ */ defineComponent({
  15. ...__default__,
  16. props: {
  17. nodes: {
  18. type: Array,
  19. required: true
  20. },
  21. index: {
  22. type: Number,
  23. required: true
  24. }
  25. },
  26. setup(__props) {
  27. const props = __props;
  28. const instance = getCurrentInstance();
  29. const ns = useNamespace("cascader-menu");
  30. const { t } = useLocale();
  31. const id = useId();
  32. let activeNode;
  33. let hoverTimer;
  34. const panel = inject(CASCADER_PANEL_INJECTION_KEY);
  35. const hoverZone = ref();
  36. const isEmpty = computed(() => !props.nodes.length);
  37. const isLoading = computed(() => !panel.initialLoaded);
  38. const menuId = computed(() => `${id.value}-${props.index}`);
  39. const handleExpand = (e) => {
  40. activeNode = e.target;
  41. };
  42. const handleMouseMove = (e) => {
  43. if (!panel.isHoverMenu || !activeNode || !hoverZone.value)
  44. return;
  45. if (activeNode.contains(e.target)) {
  46. clearHoverTimer();
  47. const el = instance.vnode.el;
  48. const { left } = el.getBoundingClientRect();
  49. const { offsetWidth, offsetHeight } = el;
  50. const startX = e.clientX - left;
  51. const top = activeNode.offsetTop;
  52. const bottom = top + activeNode.offsetHeight;
  53. hoverZone.value.innerHTML = `
  54. <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${top} L${offsetWidth} 0 V${top} Z" />
  55. <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" />
  56. `;
  57. } else if (!hoverTimer) {
  58. hoverTimer = window.setTimeout(clearHoverZone, panel.config.hoverThreshold);
  59. }
  60. };
  61. const clearHoverTimer = () => {
  62. if (!hoverTimer)
  63. return;
  64. clearTimeout(hoverTimer);
  65. hoverTimer = void 0;
  66. };
  67. const clearHoverZone = () => {
  68. if (!hoverZone.value)
  69. return;
  70. hoverZone.value.innerHTML = "";
  71. clearHoverTimer();
  72. };
  73. return (_ctx, _cache) => {
  74. return openBlock(), createBlock(unref(ElScrollbar), {
  75. key: unref(menuId),
  76. tag: "ul",
  77. role: "menu",
  78. class: normalizeClass(unref(ns).b()),
  79. "wrap-class": unref(ns).e("wrap"),
  80. "view-class": [unref(ns).e("list"), unref(ns).is("empty", unref(isEmpty))],
  81. onMousemove: handleMouseMove,
  82. onMouseleave: clearHoverZone
  83. }, {
  84. default: withCtx(() => {
  85. var _a;
  86. return [
  87. (openBlock(true), createElementBlock(Fragment, null, renderList(__props.nodes, (node) => {
  88. return openBlock(), createBlock(ElCascaderNode, {
  89. key: node.uid,
  90. node,
  91. "menu-id": unref(menuId),
  92. onExpand: handleExpand
  93. }, null, 8, ["node", "menu-id"]);
  94. }), 128)),
  95. unref(isLoading) ? (openBlock(), createElementBlock("div", {
  96. key: 0,
  97. class: normalizeClass(unref(ns).e("empty-text"))
  98. }, [
  99. createVNode(unref(ElIcon), {
  100. size: "14",
  101. class: normalizeClass(unref(ns).is("loading"))
  102. }, {
  103. default: withCtx(() => [
  104. createVNode(unref(Loading))
  105. ]),
  106. _: 1
  107. }, 8, ["class"]),
  108. createTextVNode(" " + toDisplayString(unref(t)("el.cascader.loading")), 1)
  109. ], 2)) : unref(isEmpty) ? (openBlock(), createElementBlock("div", {
  110. key: 1,
  111. class: normalizeClass(unref(ns).e("empty-text"))
  112. }, [
  113. renderSlot(_ctx.$slots, "empty", {}, () => [
  114. createTextVNode(toDisplayString(unref(t)("el.cascader.noData")), 1)
  115. ])
  116. ], 2)) : ((_a = unref(panel)) == null ? void 0 : _a.isHoverMenu) ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
  117. createCommentVNode(" eslint-disable-next-line vue/html-self-closing "),
  118. (openBlock(), createElementBlock("svg", {
  119. ref_key: "hoverZone",
  120. ref: hoverZone,
  121. class: normalizeClass(unref(ns).e("hover-zone"))
  122. }, null, 2))
  123. ], 2112)) : createCommentVNode("v-if", true)
  124. ];
  125. }),
  126. _: 3
  127. }, 8, ["class", "wrap-class", "view-class"]);
  128. };
  129. }
  130. });
  131. var ElCascaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "menu.vue"]]);
  132. export { ElCascaderMenu as default };
  133. //# sourceMappingURL=menu.mjs.map