x-next 1.0.1 → 1.1.0

package/dist/es/components/menu/Menu.js

@@ -0,0 +1,48 @@
+import { defineComponent as c, toRefs as v, inject as h, computed as a, provide as i, createVNode as u, mergeProps as g } from "vue";
+import { SidebarInjectionKey as y } from "../layout/context.js";
+import { MenuInjectionKey as j, LevelInjectionKey as s } from "./context.js";
+import d from "./base-menu.vue.js";
+import M from "./overflow-wrap.js";
+const w = /* @__PURE__ */ c({
+  name: "Menu",
+  components: {
+    BaseMenu: d
+  },
+  inheritAttrs: !1,
+  props: {
+    /** 菜单风格 */
+    theme: {
+      type: String
+    },
+    mode: {
+      type: String,
+      default: "vertical"
+    }
+  },
+  setup(o, {
+    attrs: f,
+    slots: e
+  }) {
+    const {
+      theme: n,
+      mode: m
+    } = v(o), t = h(y, void 0), l = a(() => (t == null ? void 0 : t.collapsed) || !1), p = a(() => (n == null ? void 0 : n.value) || (t == null ? void 0 : t.theme) || "light");
+    return i(j, void 0), i(s, void 0), () => u(d, g(o, f, {
+      theme: p.value,
+      inTrigger: !1,
+      siderCollapsed: l.value,
+      isRoot: !0
+    }), {
+      ...e,
+      default: m.value === "horizontal" && e.default ? () => u(M, null, {
+        default: () => {
+          var r;
+          return [(r = e.default) == null ? void 0 : r.call(e)];
+        }
+      }) : e.default
+    });
+  }
+});
+export {
+  w as default
+};

package/dist/es/components/menu/MenuItem.js

@@ -0,0 +1,134 @@
+import { defineComponent as T, createVNode as i, mergeProps as $, ref as E, computed as S, onMounted as h, onUnmounted as I, watch as K } from "vue";
+import N from "../../node_modules/.pnpm/scroll-into-view-if-needed@3.1.0/node_modules/scroll-into-view-if-needed/dist/index.js";
+import { Tooltip as _ } from "../tooltip/index.js";
+import B from "./hooks/use-menu.js";
+import A from "./hooks/use-level.js";
+import { omit as V } from "../../_utils/omit.js";
+import z from "./indent.vue.js";
+import L from "./hooks/use-menu-context.js";
+import { useMenuDataCollectorContext as O } from "./hooks/use-menu-data-collector.js";
+const W = /* @__PURE__ */ T({
+  name: "MenuItem",
+  inheritAttrs: !1,
+  props: {
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    _internalSkipCollect: {
+      type: Boolean
+    }
+  },
+  emits: ["click"],
+  /**
+   * @zh 菜单的图标
+   * @en the icon of menu item
+   * @slot icon
+   * @version 2.11.0
+   */
+  setup(s, {
+    emit: u
+  }) {
+    const {
+      key: o
+    } = B(), {
+      level: r
+    } = A(), n = L(), c = E(), t = S(() => (n.selectedKeys || []).indexOf(o.value) > -1), l = O();
+    h(() => {
+      s._internalSkipCollect || l == null || l.collectMenuItem(o.value);
+    }), I(() => {
+      s._internalSkipCollect || l == null || l.removeMenuItem(o.value);
+    });
+    function a() {
+      n.autoScrollIntoView && c.value && t.value && N(c.value, {
+        behavior: "smooth",
+        block: "nearest",
+        scrollMode: "if-needed",
+        boundary: document.documentElement,
+        ...n.scrollConfig || {}
+      });
+    }
+    let m;
+    return h(() => {
+      m = setTimeout(() => {
+        a();
+      }, 500);
+    }), I(() => {
+      clearTimeout(m);
+    }), K([t], () => {
+      a();
+    }), {
+      menuContext: n,
+      level: r,
+      isSelected: t,
+      refItemElement: c,
+      onClick(e) {
+        s.disabled || (n.onMenuItemClick && n.onMenuItemClick(o.value), u("click", e));
+      },
+      onKeydown(e) {
+        s.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n.onMenuItemClick && n.onMenuItemClick(o.value), u("click", e));
+      }
+    };
+  },
+  render() {
+    var v, k;
+    const {
+      level: s,
+      menuContext: u,
+      disabled: o,
+      isSelected: r,
+      onClick: n,
+      onKeydown: c
+    } = this, {
+      prefixCls: t,
+      collapsed: l,
+      inTrigger: a,
+      mode: m,
+      tooltipProps: e
+    } = u, M = l && !a && s === 1, b = m === "vertical" && s > 1, f = ((k = (v = this.$slots).default) == null ? void 0 : k.call(v)) || [], C = b && !a && !l, d = this.$slots.icon && this.$slots.icon(), w = [C && i(z, {
+      level: s
+    }, null), d && i("span", {
+      class: `${t}-icon`
+    }, [d]), C || d ? i("span", {
+      class: [`${t}-item-inner`, {
+        [`${t}-title`]: d
+      }]
+    }, [f]) : f].filter(Boolean), p = i("div", $({
+      ref: "refItemElement",
+      class: [`${t}-item`, {
+        [`${t}-disabled`]: o,
+        [`${t}-selected`]: r,
+        [`${t}-has-icon`]: d
+      }]
+    }, this.$attrs, {
+      role: "menuitem",
+      tabindex: o ? -1 : 0,
+      "aria-disabled": o ? "true" : void 0,
+      "aria-selected": r ? "true" : void 0,
+      onClick: n,
+      onKeydown: c
+    }), [w, r && m === "horizontal" && i("div", {
+      class: `${t}-selected-label`
+    }, null)]);
+    if (M) {
+      const y = [`${t}-item-tooltip-trigger`, e == null ? void 0 : e.class], x = [`${t}-item-tooltip`, e == null ? void 0 : e.contentClass], g = [`${t}-item-tooltip-arrow`, e == null ? void 0 : e.arrowClass];
+      return i(_, $({
+        position: "right",
+        class: y,
+        contentClass: x,
+        arrowClass: g
+      }, V(e || {}, ["class", "contentClass", "arrowClass"])), {
+        default: () => p,
+        content: () => f
+      });
+    }
+    return p;
+  }
+});
+export {
+  W as default
+};

package/dist/es/components/menu/MenuSubMenu.js

@@ -0,0 +1,161 @@
+import { defineComponent as x, createVNode as r, mergeProps as y, toRefs as M, computed as a, toRef as h } from "vue";
+import g from "./sub-menu-inline.vue.js";
+import C from "./sub-menu-pop.vue.js";
+import k from "./hooks/use-menu.js";
+import I from "./hooks/use-level.js";
+import v from "../../icons/_self/menu/down.js";
+import K from "../../icons/_self/dropdown/more.js";
+import P from "./hooks/use-menu-context.js";
+import _ from "./hooks/use-menu-data-collector.js";
+const w = {
+  /**
+   * @zh 子菜单的标题
+   * @en The title of the submenu
+   */
+  title: {
+    type: String
+  },
+  /**
+   * @zh 弹出模式下，是否将多级菜单头也作为一个菜单项，支持点击选中等状态
+   * @en In the pop-up mode, whether the multi-level menu header is also used as a menu item to support the state such as click to select
+   */
+  selectable: {
+    type: Boolean
+  },
+  /**
+   * @zh 是否禁用
+   * @en Whether to disable
+   */
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 是否强制使用弹出模式，`level` 表示当前子菜单的层级
+   * @en Whether to force the use of pop-up mode, `level` indicates the level of the current submenu
+   */
+  popup: {
+    type: [Boolean, Function],
+    default: !1
+  },
+  /**
+   * @zh 弹出框的最大高度
+   * @en The maximum height of popover
+   * @defaultValue true
+   * @version 2.23.0
+   */
+  popupMaxHeight: {
+    type: [Boolean, Number],
+    default: void 0
+  },
+  _internalSkipCollect: {
+    type: Boolean
+  }
+}, O = /* @__PURE__ */ x({
+  name: "SubMenu",
+  props: w,
+  slots: Object,
+  /**
+   * @zh 菜单的图标
+   * @en the icon of menu item
+   * @slot icon
+   * @version 2.11.0
+   */
+  /**
+   * @zh 向下展开的图标
+   * @en Icon expand down
+   * @slot expand-icon-down
+   */
+  /**
+   * @zh 向右展开的图标
+   * @en Icon expand right
+   * @slot expand-icon-right
+   */
+  /**
+   * @zh 标题
+   * @en Title
+   * @slot title
+   */
+  setup(e, {
+    attrs: u
+  }) {
+    const {
+      key: n
+    } = k(), {
+      level: d
+    } = I(), {
+      popup: o
+    } = M(e), t = P(), s = a(() => {
+      const {
+        mode: i,
+        collapsed: p,
+        inTrigger: m
+      } = t;
+      return !!(typeof o.value == "function" ? o.value(d.value) : o.value) || p || m || i !== "vertical";
+    }), {
+      subMenuKeys: l,
+      menuItemKeys: f
+    } = e._internalSkipCollect ? {
+      subMenuKeys: a(() => []),
+      menuItemKeys: a(() => [])
+    } : _({
+      key: n.value,
+      type: "subMenu"
+    }), b = a(() => {
+      const i = t.selectedKeys || [], p = (m) => {
+        for (let c = 0; c < i.length; c++) {
+          const S = i[c];
+          if (m.includes(S))
+            return !0;
+        }
+        return !1;
+      };
+      return p(l.value) || p(f.value);
+    });
+    return {
+      subMenuKeys: l,
+      menuItemKeys: f,
+      isChildrenSelected: b,
+      props: e,
+      attrs: u,
+      computedKey: n,
+      computedPopup: s,
+      expandIconDown: h(t, "expandIconDown"),
+      expandIconRight: h(t, "expandIconRight")
+    };
+  },
+  render() {
+    const {
+      props: e,
+      attrs: u,
+      computedKey: n,
+      computedPopup: d,
+      expandIconDown: o,
+      expandIconRight: t,
+      isChildrenSelected: s
+    } = this, l = {
+      ...this.$slots,
+      "expand-icon-down": this.$slots["expand-icon-down"] || o || (() => [r(v, null, null)]),
+      "expand-icon-right": this.$slots["expand-icon-right"] || t || (() => [r(K, null, null)])
+    };
+    return d ? r(C, y({
+      key: n,
+      title: e.title,
+      selectable: e.selectable,
+      disabled: e.disabled,
+      isChildrenSelected: s,
+      popupMaxHeight: e.popupMaxHeight,
+      _internalSkipCollect: e._internalSkipCollect
+    }, u), l) : r(g, y({
+      key: n,
+      title: e.title,
+      disabled: e.disabled,
+      isChildrenSelected: s,
+      _internalSkipCollect: e._internalSkipCollect
+    }, u), l);
+  }
+});
+export {
+  O as default,
+  w as menuSubMenuProps
+};

package/dist/es/components/menu/base-menu.vue.js

@@ -0,0 +1,39 @@
+import m from "./base-menu.vue2.js";
+import { resolveComponent as l, openBlock as o, createElementBlock as n, mergeProps as i, createVNode as C, normalizeClass as a, withCtx as f, renderSlot as t, createBlock as r, createCommentVNode as $ } from "vue";
+import b from "../../_virtual/_plugin-vue_export-helper.js";
+const k = ["aria-label", "aria-expanded"];
+function B(e, s, y, M, I, P) {
+  const p = l("Scrollbar"), d = l("IconMenuUnfold"), c = l("IconMenuFold");
+  return o(), n("div", i({ class: e.classNames }, e.$attrs, {
+    style: e.computedStyle,
+    role: "menu"
+  }), [
+    C(p, {
+      class: a(`${e.computedPrefixCls}-inner`),
+      "outer-class": `${e.computedPrefixCls}-scrollbar`,
+      role: "presentation",
+      "disable-horizontal": ""
+    }, {
+      default: f(() => [
+        t(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "outer-class"]),
+    e.computedHasCollapseButton ? (o(), n("button", {
+      key: 0,
+      class: a(`${e.computedPrefixCls}-collapse-button`),
+      type: "button",
+      "aria-label": e.computedCollapsed ? e.t("menu.expand") : e.t("menu.collapse"),
+      "aria-expanded": e.computedCollapsed ? "false" : "true",
+      onClick: s[0] || (s[0] = (...u) => e.onCollapseBtnClick && e.onCollapseBtnClick(...u))
+    }, [
+      t(e.$slots, "collapse-icon", { collapsed: e.computedCollapsed }, () => [
+        e.computedCollapsed ? (o(), r(d, { key: 0 })) : (o(), r(c, { key: 1 }))
+      ])
+    ], 10, k)) : $("", !0)
+  ], 16);
+}
+const v = /* @__PURE__ */ b(m, [["render", B]]);
+export {
+  v as default
+};