x-next 1.0.0 → 1.1.0

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

@@ -0,0 +1,349 @@
+import { defineComponent as oe, toRefs as te, reactive as r, computed as s, provide as le } from "vue";
+import pe from "../../icons/_self/left.js";
+import ae from "../../icons/_self/right.js";
+import h from "../../_hooks/use-merge-state.js";
+import { provideLevel as ne } from "./hooks/use-level.js";
+import { MenuInjectionKey as se } from "./context.js";
+import K from "../../_hooks/use-pick-slots.js";
+import { omit as ue } from "../../_utils/omit.js";
+import re from "./hooks/use-menu-data-collector.js";
+import ce from "./hooks/use-menu-open-state.js";
+import { useResponsive as ie } from "../../_hooks/use-responsive.js";
+import { isNumber as de, isObject as me } from "../../_utils/is.js";
+import { getClassNameMixin as ve } from "../../_utils/config.js";
+import { Scrollbar as ye } from "../scrollbar-v2/index.js";
+import { useLocale as fe } from "../../locale/index.js";
+const Pe = oe({
+  name: "BaseMenu",
+  components: {
+    IconMenuFold: pe,
+    IconMenuUnfold: ae,
+    Scrollbar: ye
+  },
+  inheritAttrs: !1,
+  props: {
+    style: {
+      type: Object
+    },
+    /**
+     * @zh 菜单的主题
+     * @en Menu theme
+     */
+    theme: {
+      type: String,
+      default: "light"
+    },
+    /**
+     * @zh 菜单的模式
+     * @en The mode of menu
+     */
+    mode: {
+      type: String,
+      default: "vertical"
+    },
+    /**
+     * @zh 层级之间的缩进量
+     * @en Indentation between levels
+     */
+    levelIndent: {
+      type: Number
+    },
+    /**
+     * @zh 默认展开所有多级菜单
+     * @en Expand all multi-level menus by default
+     */
+    autoOpen: {
+      type: Boolean
+    },
+    /**
+     * @zh 是否折叠菜单
+     * @en Whether to collapse the menu
+     * @vModel
+     */
+    collapsed: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 默认是否折叠菜单
+     * @en Whether to collapse the menu by default
+     */
+    defaultCollapsed: {
+      type: Boolean
+    },
+    /**
+     * @zh 折叠菜单宽度
+     * @en Collapse menu width
+     */
+    collapsedWidth: {
+      type: Number
+    },
+    /**
+     * @zh 开启手风琴效果
+     * @en Turn on the accordion effect
+     */
+    accordion: {
+      type: Boolean
+    },
+    /**
+     * @zh 是否自动滚动选中项目到可见区域
+     * @en Whether to automatically scroll the selected item to the visible area
+     */
+    autoScrollIntoView: {
+      type: Boolean
+    },
+    /**
+     * @zh 是否内置折叠按钮
+     * @en Whether built-in folding button
+     */
+    showCollapseButton: {
+      type: Boolean
+    },
+    /**
+     * @zh 选中的菜单项 key 数组
+     * @en The selected menu item key array
+     * @vModel
+     */
+    selectedKeys: {
+      type: Array
+    },
+    /**
+     * @zh 默认选中的菜单项 key 数组
+     * @en The key array of the menu items selected by default
+     */
+    defaultSelectedKeys: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * @zh 展开的子菜单 key 数组
+     * @en Expanded submenu key array
+     * @vModel
+     */
+    openKeys: {
+      type: Array
+    },
+    /**
+     * @zh 默认展开的子菜单 key 数组
+     * @en The default expanded submenu key array
+     */
+    defaultOpenKeys: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * @zh 滚动到可见区域的配置项，接收所有[scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)的参数
+     * @en Scroll to the configuration items in the visible area and receive all the parameters of [scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)
+     */
+    scrollConfig: {
+      type: Object
+    },
+    /**
+     * @zh 弹出模式下可接受所有 `Trigger` 的 `Props`
+     * @en Accept all `Props` of `Trigger` in pop-up mode
+     */
+    triggerProps: {
+      type: Object
+    },
+    /**
+     * @zh 弹出模式下可接受所有 `ToolTip` 的 `Props`
+     * @en Accept all `Props` of `ToolTip` in pop-up mode
+     */
+    tooltipProps: {
+      type: Object
+    },
+    /**
+     * @zh 默认展开选中的菜单
+     * @en Expand the selected menus by default
+     * @version 2.8.0
+     */
+    autoOpenSelected: {
+      type: Boolean
+    },
+    /**
+     * @zh 响应式的断点, 详见[响应式栅格](/vue/component/grid)
+     * @en Responsive breakpoints, see [Responsive Grid](/vue/component/grid) for details
+     * @version 2.18.0
+     */
+    breakpoint: {
+      type: String
+    },
+    /**
+     * @zh 弹出框的最大高度
+     * @en The maximum height of popover
+     * @version 2.23.0
+     */
+    popupMaxHeight: {
+      type: [Boolean, Number],
+      default: !0
+    },
+    // internal
+    prefixCls: {
+      type: String
+    },
+    inTrigger: {
+      type: Boolean
+    },
+    siderCollapsed: {
+      type: Boolean
+    },
+    isRoot: {
+      type: Boolean
+    }
+  },
+  emits: [
+    "update:collapsed",
+    "update:selectedKeys",
+    "update:openKeys",
+    /**
+     * @zh 折叠状态改变时触发
+     * @en Triggered when the collapsed state changes
+     * @param {boolean} collapsed
+     * @param {'clickTrigger'|'responsive'} type
+     */
+    "collapse",
+    /**
+     * @zh 点击菜单项时触发
+     * @en Triggered when the menu item is clicked
+     * @param {string} key
+     */
+    "menu-item-click",
+    /**
+     * @zh 点击子菜单时触发
+     * @en Triggered when the submenu is clicked
+     * @param {string} key
+     * @param {string[]} openKeys
+     */
+    "sub-menu-click"
+  ],
+  /**
+   * @zh 折叠图标
+   * @en Collapse icon
+   * @slot collapse-icon
+   * @binding {boolean} collapsed
+   */
+  /**
+   * @zh 向下展开的图标
+   * @en Icon expand down
+   * @slot expand-icon-down
+   */
+  /**
+   * @zh 向右展开的图标
+   * @en Icon expand right
+   * @slot expand-icon-right
+   */
+  setup(B, { emit: p, slots: m }) {
+    const { t: b } = fe(), {
+      style: c,
+      mode: l,
+      theme: u,
+      levelIndent: S,
+      accordion: O,
+      showCollapseButton: x,
+      scrollConfig: M,
+      autoScrollIntoView: I,
+      collapsedWidth: v,
+      autoOpen: k,
+      collapsed: $,
+      defaultCollapsed: w,
+      selectedKeys: N,
+      defaultSelectedKeys: P,
+      openKeys: R,
+      defaultOpenKeys: j,
+      triggerProps: A,
+      tooltipProps: z,
+      autoOpenSelected: D,
+      breakpoint: H,
+      popupMaxHeight: L,
+      // internal
+      prefixCls: i,
+      inTrigger: y,
+      siderCollapsed: T,
+      isRoot: W
+    } = te(B), { subMenuKeys: _, menuData: F } = re({
+      type: W.value ? "menu" : "popupMenu"
+    }), [f, U] = h(
+      P.value,
+      r({
+        value: N
+      })
+    ), { openKeys: V, setOpenKeys: q, open: E } = ce(
+      r({
+        modelValue: R,
+        defaultValue: j,
+        autoOpen: k,
+        autoOpenSelected: D,
+        selectedKeys: f,
+        subMenuKeys: _,
+        menuData: F,
+        accordion: O
+      })
+    ), [d, G] = h(
+      w.value,
+      r({
+        value: $
+      })
+    ), a = s(
+      () => T.value || d.value || l.value === "popButton"
+    ), g = s(
+      () => ["horizontal", "popButton"].indexOf(l.value) < 0 && !y.value && x.value
+    ), C = (e, t) => {
+      e !== d.value && (G(e), p("update:collapsed", e), p("collapse", e, t));
+    }, J = () => {
+      C(!d.value, "clickTrigger");
+    };
+    ie(H, (e) => {
+      C(!e, "responsive");
+    });
+    const o = s(() => (i == null ? void 0 : i.value) || ve("menu").block), Q = s(() => [
+      o.value,
+      `${o.value}-${u == null ? void 0 : u.value}`,
+      {
+        [`${o.value}-horizontal`]: l.value === "horizontal",
+        [`${o.value}-vertical`]: l.value !== "horizontal",
+        [`${o.value}-collapsed`]: a.value,
+        [`${o.value}-pop`]: l.value === "pop" || a.value,
+        [`${o.value}-pop-button`]: l.value === "popButton",
+        [`${o.value}-has-collapse-button`]: g.value
+      }
+    ]), X = s(() => {
+      const e = de(v.value) ? `${v.value}px` : void 0, t = me(c.value) ? c.value : void 0, n = a.value && l.value !== "popButton" ? e || "var(--x-menu-collapse-width)" : t == null ? void 0 : t.width;
+      return [t ? ue(t, ["width"]) : c.value, { width: n }];
+    }), Y = K(m, "expand-icon-down"), Z = K(m, "expand-icon-right"), ee = r({
+      theme: u,
+      mode: l,
+      levelIndent: S,
+      autoScrollIntoView: I,
+      selectedKeys: f,
+      openKeys: V,
+      prefixCls: o,
+      scrollConfig: M,
+      inTrigger: y,
+      collapsed: a,
+      triggerProps: A,
+      tooltipProps: z,
+      popupMaxHeight: L,
+      expandIconDown: Y,
+      expandIconRight: Z,
+      onMenuItemClick: (e) => {
+        U([e]), p("update:selectedKeys", [e]), p("menu-item-click", e);
+      },
+      onSubMenuClick: (e, t) => {
+        const n = E(e, t);
+        q(n), p("update:openKeys", n), p("sub-menu-click", e, n);
+      }
+    });
+    return le(se, ee), ne(1), {
+      computedPrefixCls: o,
+      classNames: Q,
+      computedStyle: X,
+      computedCollapsed: a,
+      computedHasCollapseButton: g,
+      onCollapseBtnClick: J,
+      t: b
+    };
+  }
+});
+export {
+  Pe as default
+};

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

@@ -0,0 +1,6 @@
+const e = Symbol("MenuInjectionKey"), n = Symbol("LevelInjectionKey"), o = Symbol("DataCollectorInjectionKey");
+export {
+  o as DataCollectorInjectionKey,
+  n as LevelInjectionKey,
+  e as MenuInjectionKey
+};

package/dist/es/components/menu/hooks/use-level.js

@@ -0,0 +1,25 @@
+import { inject as r, computed as n, isRef as l, provide as u, reactive as p } from "vue";
+import { LevelInjectionKey as i } from "../context.js";
+function s(e) {
+  const o = n(() => l(e) ? e.value : e);
+  u(
+    i,
+    p({
+      level: o
+    })
+  );
+}
+function m(e) {
+  const { provideNextLevel: o } = e || {}, t = r(i), c = n(() => (t == null ? void 0 : t.level) || 1);
+  if (o) {
+    const v = n(() => c.value + 1);
+    s(v);
+  }
+  return {
+    level: c
+  };
+}
+export {
+  m as default,
+  s as provideLevel
+};

package/dist/es/components/menu/hooks/use-menu-context.js

@@ -0,0 +1,8 @@
+import { inject as t } from "vue";
+import { MenuInjectionKey as e } from "../context.js";
+function r() {
+  return t(e) || {};
+}
+export {
+  r as default
+};

package/dist/es/components/menu/hooks/use-menu-data-collector.js

@@ -0,0 +1,63 @@
+import { ref as D, provide as S, onMounted as p, onUnmounted as m, computed as b, inject as I } from "vue";
+import { isUndefined as i } from "../../../_utils/is.js";
+import { DataCollectorInjectionKey as y } from "../context.js";
+function h(c, l) {
+  const o = [], u = (t) => {
+    t.forEach((s) => {
+      l(s) && !o.includes(s.key) && o.push(s.key), s.children && u(s.children);
+    });
+  };
+  return u(c), o;
+}
+function g(c = !1) {
+  return c ? void 0 : I(y);
+}
+function O(c) {
+  const { key: l, type: o } = c, u = D([]), t = g(o === "menu"), s = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map(), d = (e, n) => {
+    const r = e.get(n) || 0;
+    return e.set(n, r + 1), r;
+  }, v = (e, n) => {
+    const r = e.get(n) || 0;
+    return r <= 1 ? (e.delete(n), !0) : (e.set(n, r - 1), !1);
+  };
+  return S(y, {
+    collectSubMenu(e, n, r = !1) {
+      const M = {
+        key: e,
+        children: n
+      };
+      if (r) {
+        const a = u.value.find((K) => K.key === e);
+        a ? a.children = n : u.value.push(M);
+      } else
+        d(s, e) > 0 || (u.value = [...u.value, M]);
+      r && (o === "popupMenu" ? t == null || t.reportMenuData(u.value) : o === "subMenu" && !i(e) && (t == null || t.collectSubMenu(e, u.value, !0)));
+    },
+    removeSubMenu(e) {
+      v(s, e) && (u.value = u.value.filter((n) => n.key !== e));
+    },
+    collectMenuItem(e) {
+      d(f, e) > 0 || u.value.push({ key: e });
+    },
+    removeMenuItem(e) {
+      v(f, e) && (u.value = u.value.filter((n) => n.key !== e));
+    },
+    reportMenuData(e) {
+      u.value = e, o === "subMenu" && !i(l) && (t == null || t.collectSubMenu(l, u.value, !0));
+    }
+  }), o === "subMenu" && !i(l) ? (p(() => {
+    t == null || t.collectSubMenu(l, u.value);
+  }), m(() => {
+    t == null || t.removeSubMenu(l);
+  })) : o === "popupMenu" && p(() => {
+    t == null || t.reportMenuData(u.value);
+  }), {
+    menuData: u,
+    subMenuKeys: b(() => h(u.value, (e) => !!e.children)),
+    menuItemKeys: b(() => h(u.value, (e) => !e.children))
+  };
+}
+export {
+  O as default,
+  g as useMenuDataCollectorContext
+};

package/dist/es/components/menu/hooks/use-menu-open-state.js

@@ -0,0 +1,75 @@
+import { toRefs as y, ref as w, watch as K, onMounted as M, computed as V } from "vue";
+import { isUndefined as h } from "../../../_utils/is.js";
+function b(a, l) {
+  const o = [], s = (d) => {
+    for (let n = 0; n < d.length; n++) {
+      const i = d[n];
+      if (i.key === l)
+        return !0;
+      if (i.children) {
+        if (o.push(i.key), s(i.children))
+          return !0;
+        o.pop();
+      }
+    }
+    return !1;
+  };
+  return s(a), o;
+}
+function x(a, l) {
+  return a.length !== l.length ? !1 : a.toString() === l.toString();
+}
+function D(a) {
+  const {
+    modelValue: l,
+    defaultValue: o,
+    autoOpen: s,
+    autoOpenSelected: d,
+    subMenuKeys: n,
+    selectedKeys: i,
+    menuData: m,
+    accordion: c
+  } = y(a), p = w(
+    h(l.value) ? h(o.value) ? [] : o.value : l.value
+  ), f = (e) => {
+    p.value = e;
+  };
+  K(l, () => {
+    h(l.value) && f([]);
+  });
+  let g = [];
+  M(() => {
+    g = [...n.value];
+    let e = [];
+    if (s.value && (e = c.value ? n.value.slice(0, 1) : [...n.value]), d.value) {
+      const u = i.value.map((t) => b(m.value, t));
+      u.length && (!s.value || c.value) && (e = c.value ? u[0] : [...new Set([].concat(...u))]);
+    }
+    e.length && f(e);
+  });
+  let O = !1;
+  K(n, (e, u = []) => {
+    if (O || !x(e, g)) {
+      const t = r.value.filter((v) => e.includes(v));
+      if (s.value) {
+        const v = e.filter((S) => !u.includes(S));
+        t.push(...v);
+      }
+      f(c.value ? t.slice(0, 1) : t);
+    }
+    O = !0;
+  });
+  const r = V(() => l.value || p.value);
+  return {
+    openKeys: r,
+    localOpenKeys: p,
+    setOpenKeys: f,
+    open(e, u) {
+      let t = [];
+      return r.value.indexOf(e) > -1 ? c.value && u === 1 ? t = [] : t = r.value.filter((v) => v !== e) : c.value && u === 1 ? t = [e] : t = r.value.concat([e]), f(t), t;
+    }
+  };
+}
+export {
+  D as default
+};

package/dist/es/components/menu/hooks/use-menu.js

@@ -0,0 +1,16 @@
+import { getCurrentInstance as n, computed as r } from "vue";
+const o = /* @__PURE__ */ (() => {
+  let e = 0;
+  return (t = "") => (e += 1, `${t}${e}`);
+})();
+function c() {
+  const e = n();
+  return {
+    key: r(
+      () => (e == null ? void 0 : e.vnode.key) || o("__arco_menu")
+    )
+  };
+}
+export {
+  c as default
+};

package/dist/es/components/menu/indent.vue.js

@@ -0,0 +1,36 @@
+import { openBlock as n, createElementBlock as t, normalizeClass as o, Fragment as r, renderList as a, normalizeStyle as m, createCommentVNode as p, defineComponent as u, toRef as c } from "vue";
+import i from "./hooks/use-menu-context.js";
+import { getClassNameMixin as d } from "../../_utils/config.js";
+import f from "../../_virtual/_plugin-vue_export-helper.js";
+const $ = u({
+  name: "MenuIndent",
+  props: {
+    level: {
+      type: Number,
+      default: 1
+    }
+  },
+  setup() {
+    const e = d("menu"), l = i();
+    return {
+      className: e,
+      levelIndent: c(l, "levelIndent")
+    };
+  }
+});
+function k(e, l, v, C, N, y) {
+  return e.level > 1 ? (n(), t("span", {
+    key: 0,
+    class: o(`${e.className.block}-indent-list`)
+  }, [
+    (n(!0), t(r, null, a(e.level - 1, (s) => (n(), t("span", {
+      key: s,
+      class: o(`${e.className.block}-indent`),
+      style: m(`width: ${e.levelIndent}px`)
+    }, null, 6))), 128))
+  ], 2)) : p("", !0);
+}
+const g = /* @__PURE__ */ f($, [["render", k]]);
+export {
+  g as default
+};

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

@@ -0,0 +1,14 @@
+import o from "./Menu.js";
+import t from "./MenuItem.js";
+import u from "./MenuSubMenu.js";
+import m from "./item-group.vue.js";
+import { generateComponent as e } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as n } from "../../_utils/config.js";
+const s = e(n("Menu"), o), c = e(n("MenuItem"), t), a = e(n("MenuItemGroup"), m), b = e(n("MenuSubMenu"), u);
+export {
+  s as Menu,
+  c as MenuItem,
+  a as MenuItemGroup,
+  b as MenuSubMenu,
+  s as default
+};

package/dist/es/components/menu/item-group.vue.js

@@ -0,0 +1,23 @@
+import n from "./item-group.vue2.js";
+import { resolveComponent as r, openBlock as s, createElementBlock as a, normalizeClass as o, createElementVNode as p, createVNode as i, renderSlot as t, createTextVNode as m, toDisplayString as c } from "vue";
+import d from "../../_virtual/_plugin-vue_export-helper.js";
+function u(e, f, $, v, _, N) {
+  const l = r("MenuIndent");
+  return s(), a("div", {
+    class: o(e.classNames)
+  }, [
+    p("div", {
+      class: o(`${e.prefixCls}-group-title`)
+    }, [
+      i(l, { level: e.level }, null, 8, ["level"]),
+      t(e.$slots, "title", {}, () => [
+        m(c(e.title), 1)
+      ])
+    ], 2),
+    t(e.$slots, "default")
+  ], 2);
+}
+const V = /* @__PURE__ */ d(n, [["render", u]]);
+export {
+  V as default
+};

package/dist/es/components/menu/item-group.vue2.js

@@ -0,0 +1,39 @@
+import { defineComponent as p, computed as t } from "vue";
+import m from "./hooks/use-menu-context.js";
+import u, { provideLevel as l } from "./hooks/use-level.js";
+import i from "./indent.vue.js";
+const x = p({
+  name: "MenuItemGroup",
+  components: {
+    MenuIndent: i
+  },
+  props: {
+    /**
+     * @zh 菜单组的标题
+     * @en The title of the menu group
+     */
+    title: {
+      type: String
+    }
+  },
+  /**
+   * @zh 标题
+   * @en Title
+   * @slot title
+   */
+  setup() {
+    const { level: e } = u(), n = t(
+      () => e.value === 1 ? e.value + 1 : e.value
+    );
+    l(n);
+    const r = m(), o = t(() => r.prefixCls), s = t(() => [`${o.value}-group`]);
+    return {
+      prefixCls: o,
+      classNames: s,
+      level: e
+    };
+  }
+});
+export {
+  x as default
+};