vexip-ui/es/components/menu/menu-rest.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as H, inject as L, ref as u, computed as m, reactive as U, provide as _, watch as D, nextTick as G, createVNode as a } from "vue";
import "../icon/index.mjs";
import "../menu-item/index.mjs";
import "../popper/index.mjs";
import { useNameHelper as O, useIcons as R, useHoverDelay as j } from "@vexip-ui/config";
import { useClickOutside as F, usePopper as V, useSetTimeout as q } from "@vexip-ui/hooks";
import { callIfFunc as z } from "@vexip-ui/utils";
import { MENU_STATE as B, MENU_ITEM_STATE as J } from "./symbol.mjs";
import K from "./menu-item.mjs";
import Q from "../icon/icon.mjs";
import W from "../popper/popper.vue.mjs";
const ue = /* @__PURE__ */ H({
  name: "MenuRest",
  props: {
    menus: {
      type: Array,
      default: () => []
    }
  },
  setup(h) {
    const t = L(B, null), l = O("menu"), k = R(), b = j(), e = u(!1), M = u(!1), n = u(!1), T = m(() => (t == null ? void 0 : t.transfer) ?? !1), s = m(() => (t == null ? void 0 : t.trigger) || "hover"), c = F(C), E = u(), {
      reference: I,
      transferTo: g,
      updatePopper: P
    } = V({
      placement: u("bottom"),
      transfer: T,
      wrapper: c,
      popper: m(() => {
        var r;
        return (r = E.value) == null ? void 0 : r.wrapper;
      })
    }), S = U({
      el: c,
      label: "",
      indent: 1,
      groupExpanded: e,
      showGroup: e,
      isUsePopper: !0,
      parentState: null,
      transfer: T,
      cachedExpanded: !1,
      updateSonSelected: w,
      toggleGroupExpanded: x,
      handleMouseEnter: v,
      handleMouseLeave: d
    });
    _(J, S), D(e, (r) => {
      r && (n.value = !0, P());
    });
    function w(r) {
      M.value = r;
    }
    function x(r) {
      e.value = r;
    }
    const {
      timer: p
    } = q();
    let i = !1, f = !1;
    function v() {
      if (clearTimeout(p.hover), !(i || s.value !== "hover")) {
        if (!e.value && n.value) {
          f = !0;
          return;
        }
        p.hover = setTimeout(() => {
          e.value = !0;
        }, b.value);
      }
    }
    function d() {
      clearTimeout(p.hover), !(i || !n.value || s.value !== "hover") && (p.hover = setTimeout(() => {
        e.value = !1;
      }, b.value));
    }
    function y() {
      s.value === "click" && (e.value = !0);
    }
    function C() {
      s.value === "click" && G(() => {
        e.value = !1;
      });
    }
    function A() {
      n.value = !1, e.value = !1, f && (f = !1, e.value = !0);
    }
    function N() {
      var r;
      return (r = h.menus) != null && r.length ? h.menus.map((o) => a(K, {
        key: o.label,
        label: o.label,
        icon: o.icon,
        "icon-props": o.iconProps,
        disabled: o.disabled,
        children: o.children,
        route: o.route,
        meta: o.meta
      }, {
        default: () => [o.name ? z(o.name) : o.label]
      })) : null;
    }
    return () => a("div", {
      ref: c,
      class: l.be("rest"),
      onMouseenter: v,
      onMouseleave: d
    }, [a("div", {
      ref: I,
      class: [l.be("rest-handler"), M.value && l.bem("rest-handler", "selected")],
      onClick: y
    }, [a(Q, k.value.ellipsis, null)]), a(W, {
      ref: E,
      class: [l.be("popper"), l.bs("vars"), l.bem("popper", "drop")],
      visible: n.value && e.value,
      alive: !g.value || n.value,
      to: g.value,
      transition: l.ns("drop"),
      onAfterLeave: A,
      onMouseenter: () => (i = !0, v()),
      onMouseleave: () => (i = !1, d())
    }, {
      default: () => [a("ul", {
        class: [l.be("list"), l.bem("list", "theme")]
      }, [N()])]
    })]);
  }
});
export {
  ue as default
};
//# sourceMappingURL=menu-rest.mjs.map