@keyblade/pro-components 1.12.17 → 1.13.0

package/es/pro-layout/pro-layout.vue.js

@@ -1,318 +1,235 @@
-import { defineComponent as ee, useCssVars as te, ref as A, toRefs as ae, useSlots as le, provide as _, onMounted as oe, watch as W, resolveComponent as o, createBlock as u, openBlock as s, normalizeClass as l, withCtx as n, createCommentVNode as c, createVNode as f, createElementVNode as p, renderSlot as y, createElementBlock as h, unref as i, Fragment as $, createTextVNode as C, toDisplayString as q } from "vue";
-import { useHooks as se } from "./hooks.js";
-import { useRouter as de } from "vue-router";
-const ne = ["src"], re = ["src"], t = "keyblade-pro-layout", ie = 48, ye = /* @__PURE__ */ ee({
+import { defineComponent as le, useCssVars as ae, ref as N, useSlots as se, computed as de, provide as C, onMounted as ne, watch as V, resolveComponent as s, createBlock as i, openBlock as l, normalizeClass as a, withCtx as d, createCommentVNode as n, createVNode as p, createElementVNode as h, renderSlot as c, createElementBlock as m, unref as o, Fragment as k, createTextVNode as T, toDisplayString as P } from "vue";
+import { useHooks as re } from "./hooks.js";
+import { ProLayoutMode as ie, ProLayoutMenuType as F } from "./enum.js";
+const ue = ["src"], pe = ["src"], t = "keyblade-pro-layout", ce = 48, he = /* @__PURE__ */ le({
   __name: "pro-layout",
   props: {
-    /**
-     * 布局模式
-     * side：侧边菜单布局
-     * mix：混合菜单布局
-     * */
-    layout: {
-      type: String,
-      required: !1,
-      default: "mix"
-    },
-    /** 是否隐藏头部 */
-    hideHeader: {
-      type: Boolean,
-      required: !1,
-      default: !1
-    },
-    /** 头部高度 */
-    headerHeight: {
-      type: Number,
-      required: !1,
-      default: 60
-    },
-    /** logo */
-    logo: {
-      type: String,
-      required: !1,
-      default: "http://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
-    },
-    /** 标题 */
-    title: {
-      type: String,
-      required: !1,
-      default: "KeyBlade Pro"
-    },
-    /** 侧边栏宽度 */
-    siderWidth: {
-      type: Number,
-      required: !1,
-      default: 220
-    },
-    /** 侧边栏响应式的断点 */
-    siderBreakpoint: {
-      type: String,
-      required: !1,
-      default: "xl"
-    },
-    /** 侧边栏是否收缩，会受 siderBreakpoint 影响 */
-    siderCollapsed: {
-      type: Boolean,
-      required: !1,
-      default: !1
-    },
-    /** 菜单项 */
-    menuItems: {
-      type: Array,
-      required: !1,
-      default: () => []
-    },
-    /** 菜单属性 */
-    menuProps: {
-      type: Object,
-      required: !1,
-      default: () => ({})
-    },
-    /** 页脚标题 */
-    footerTitle: {
-      type: String,
-      required: !1,
-      default: "KeyBlade Pro"
-    },
-    /** 是否隐藏页脚 */
-    hideFooter: {
-      type: Boolean,
-      required: !1,
-      default: !1
-    },
-    /** 是否隐藏多页签 */
-    hideTabs: {
-      type: Boolean,
-      required: !1,
-      default: !1
-    },
-    /** tabs尺寸 */
-    tabsSize: {
-      type: String,
-      required: !1,
-      default: "small"
-    },
-    /** tabs类型 */
-    tabsType: {
-      type: String,
-      required: !1,
-      default: "rounded"
-    },
-    /** tabs头部间距 */
-    tabsHeaderPadding: {
-      type: Boolean,
-      required: !1,
-      default: !0
-    },
-    /** 禁用全局路由缓存 */
-    disableKeepAlive: {
-      type: Boolean,
-      required: !1,
-      default: !1
-    },
-    /** 菜单项点击事件 */
-    onMenuItemClick: {
-      type: Function,
-      required: !1
-    }
+    layout: { default: ie.mix },
+    hideHeader: { type: Boolean, default: !1 },
+    hiderSider: { type: Boolean, default: !1 },
+    headerHeight: { default: 60 },
+    logo: { default: "http://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image" },
+    title: { default: "KeyBlade Pro" },
+    siderWidth: { default: 220 },
+    siderBreakpoint: { default: "xl" },
+    siderCollapsed: { type: Boolean, default: !1 },
+    menuItems: { default: () => [] },
+    menuProps: { default: () => ({}) },
+    footerTitle: { default: "KeyBlade Pro" },
+    hideFooter: { type: Boolean, default: !1 },
+    hideTabs: { type: Boolean, default: !1 },
+    tabsSize: { default: "small" },
+    tabsType: { default: "rounded" },
+    tabsHeaderPadding: { type: Boolean, default: !0 },
+    disableKeepAlive: { type: Boolean, default: !1 },
+    onMenuItemClick: {}
   },
   emits: {
     /** 收缩事件 */
-    collapse: (e) => !0,
+    collapse: (g) => !0,
     /** keepAlive改变事件 */
-    keepAliveIncludeChange: (e) => !0
+    keepAliveIncludeChange: (g) => !0
   },
-  setup(e, { emit: K }) {
-    te((a) => ({
-      "41512b1e": x.value,
-      "514ba31c": V,
-      "27c679ae": F
+  setup(g, { emit: E }) {
+    ae((e) => ({
+      "4a477a1a": z.value,
+      "3599ef93": G,
+      "5b478c92": J
     }));
-    const d = e, T = K, b = de(), { menuItems: I } = ae(d), m = le(), {
-      menuSelectedKeys: M,
-      breadcrumbItems: N,
-      tabs: B,
-      keepAliveInclude: k,
-      onMenuItemClick: z,
-      onTabClick: D,
-      onTabDelete: S
-    } = se(I, {
-      hideTabs: d.hideTabs,
-      disableKeepAlive: d.disableKeepAlive
-    });
-    _("ProBreadcrumbItems", N), _("ProKeepAliveInclude", k), _("onProReuseTabDelete", S);
-    const x = A(`${d.headerHeight}px`), V = `${d.siderWidth}px`, F = `${ie}px`, r = A(d.siderCollapsed), P = (a) => {
-      r.value = a, T("collapse", a);
+    const u = g, B = E, f = se(), I = de(() => u.hiderSider || b.value.length > 0 && H.value.length === 0), {
+      topMenuItems: b,
+      siderMenuItems: H,
+      topMenuSelectedKeys: L,
+      siderMenuSelectedKeys: R,
+      breadcrumbItems: j,
+      tabs: M,
+      keepAliveInclude: v,
+      onProMenuItemClick: S,
+      onTabClick: q,
+      onTabDelete: w
+    } = re(u);
+    C("ProBreadcrumbItems", j), C("ProKeepAliveInclude", v), C("onProReuseTabDelete", w);
+    const z = N(`${u.headerHeight}px`), G = `${u.siderWidth}px`, J = `${ce}px`, r = N(u.siderCollapsed), W = (e) => {
+      r.value = e, B("collapse", e);
     };
-    oe(() => {
-      d.hideHeader && (x.value = "0px");
-    });
-    const R = async (a) => {
-      if (a != null && a.path && !(d != null && d.onMenuItemClick && !await d.onMenuItemClick(a))) {
-        if (a.path.startsWith("http") || a.path.startsWith("https")) {
-          window.open(a.path);
-          return;
-        }
-        b == null || b.push({ path: a.path }), z(a.name);
-      }
-    };
-    return W(() => d.siderCollapsed, () => {
-      r.value = d.siderCollapsed;
-    }, { immediate: !0 }), W(k, () => {
-      T("keepAliveIncludeChange", k.value);
-    }, { immediate: !0 }), (a, g) => {
-      const w = o("a-typography-title"), H = o("a-space"), E = o("a-layout-header"), j = o("kb-pro-menu"), O = o("icon-menu-unfold"), G = o("icon-menu-fold"), J = o("a-button"), L = o("a-layout-sider"), Q = o("kb-pro-reuse-tabs"), U = o("a-affix"), X = o("kb-pro-keep-alive-router-view"), Y = o("a-layout-content"), Z = o("a-layout-footer"), v = o("a-layout");
-      return s(), u(v, {
-        class: l([t, `${t}-${e.layout}`])
+    return ne(() => {
+      u.hideHeader && (z.value = "0px");
+    }), V(() => u.siderCollapsed, () => {
+      r.value = u.siderCollapsed;
+    }, { immediate: !0 }), V(v, () => {
+      B("keepAliveIncludeChange", v.value);
+    }, { immediate: !0 }), (e, y) => {
+      const A = s("a-typography-title"), K = s("a-space"), D = s("kb-pro-menu"), O = s("a-layout-header"), Q = s("icon-menu-unfold"), U = s("icon-menu-fold"), X = s("a-button"), Y = s("a-layout-sider"), Z = s("kb-pro-reuse-tabs"), x = s("a-affix"), ee = s("kb-pro-keep-alive-router-view"), te = s("a-layout-content"), oe = s("a-layout-footer"), $ = s("a-layout");
+      return l(), i($, {
+        class: a([t, `${t}-${e.layout}`])
       }, {
-        default: n(() => [
-          e.hideHeader ? c("", !0) : (s(), u(E, {
+        default: d(() => [
+          e.hideHeader ? n("", !0) : (l(), i(O, {
             key: 0,
-            class: l([`${t}-header`, { [`${t}-header-collapsed`]: r.value }])
+            class: a([`${t}-header`, { [`${t}-header-collapsed`]: r.value }])
           }, {
-            default: n(() => [
-              p("div", {
-                class: l(`${t}-header-left`)
+            default: d(() => [
+              h("div", {
+                class: a(`${t}-header-left`)
               }, [
-                i(m)["header-left"] ? y(a.$slots, "header-left", { key: 0 }) : (s(), h($, { key: 1 }, [
-                  e.layout !== "side" ? (s(), h("div", {
+                o(f)["header-left"] ? c(e.$slots, "header-left", { key: 0 }) : (l(), m(k, { key: 1 }, [
+                  e.layout !== "side" ? (l(), m("div", {
                     key: 0,
-                    class: l(`${t}-header-left-logo`)
+                    class: a(`${t}-header-left-logo`)
                   }, [
-                    f(H, null, {
-                      default: n(() => [
-                        p("img", {
-                          class: l(`${t}-header-left-logo-img`),
+                    p(K, null, {
+                      default: d(() => [
+                        h("img", {
+                          class: a(`${t}-header-left-logo-img`),
                           alt: "logo",
                           src: e.logo
-                        }, null, 10, ne),
-                        r.value ? c("", !0) : (s(), u(w, {
+                        }, null, 10, ue),
+                        r.value ? n("", !0) : (l(), i(A, {
                           key: 0,
-                          class: l(`${t}-header-left-logo-title`),
+                          class: a(`${t}-header-left-logo-title`),
                           heading: 5
                         }, {
-                          default: n(() => [
-                            C(q(e.title), 1)
+                          default: d(() => [
+                            T(P(e.title), 1)
                           ]),
                           _: 1
                         }, 8, ["class"]))
                       ]),
                       _: 1
                     })
-                  ], 2)) : c("", !0)
+                  ], 2)) : n("", !0)
                 ], 64))
               ], 2),
-              p("div", {
-                class: l(`${t}-header-center`)
+              h("div", {
+                class: a(`${t}-header-center`)
               }, [
-                i(m)["header-center"] ? y(a.$slots, "header-center", { key: 0 }) : c("", !0)
+                o(f)["header-center-left"] ? c(e.$slots, "header-center-left", { key: 0 }) : n("", !0),
+                o(b).length > 0 ? (l(), m(k, { key: 1 }, [
+                  o(b).length > 0 ? (l(), i(D, {
+                    key: 0,
+                    mode: "horizontal",
+                    "selected-keys": o(L),
+                    items: o(b),
+                    "menu-props": e.menuProps,
+                    onMenuItemClick: y[0] || (y[0] = (_) => o(S)(o(F).top, _))
+                  }, null, 8, ["selected-keys", "items", "menu-props"])) : n("", !0)
+                ], 64)) : (l(), m(k, { key: 2 }, [
+                  o(f)["header-center-center"] ? c(e.$slots, "header-center-center", { key: 0 }) : n("", !0)
+                ], 64)),
+                o(f)["header-center-right"] ? c(e.$slots, "header-center-right", { key: 3 }) : n("", !0)
               ], 2),
-              p("div", {
-                class: l(`${t}-header-right`)
+              h("div", {
+                class: a(`${t}-header-right`)
               }, [
-                y(a.$slots, "header-right")
+                c(e.$slots, "header-right")
               ], 2)
             ]),
             _: 3
           }, 8, ["class"])),
-          f(v, null, {
-            default: n(() => [
-              f(L, {
-                class: l([`${t}-sider`, { [`${t}-sider-collapsed`]: r.value }]),
+          p($, null, {
+            default: d(() => [
+              I.value ? n("", !0) : (l(), i(Y, {
+                key: 0,
+                class: a([`${t}-sider`, { [`${t}-sider-collapsed`]: r.value }]),
                 width: e.siderWidth,
                 collapsible: !0,
                 breakpoint: e.siderBreakpoint,
                 collapsed: r.value,
                 "hide-trigger": !0,
-                onCollapse: P
+                onCollapse: W
               }, {
-                default: n(() => [
-                  p("div", {
-                    class: l(`${t}-sider-content`)
+                default: d(() => [
+                  h("div", {
+                    class: a(`${t}-sider-content`)
                   }, [
-                    i(m)["sider-top"] ? y(a.$slots, "sider-top", { key: 0 }) : (s(), h($, { key: 1 }, [
-                      e.layout === "side" ? (s(), h("div", {
+                    o(f)["sider-top"] ? c(e.$slots, "sider-top", { key: 0 }) : (l(), m(k, { key: 1 }, [
+                      e.layout === "side" ? (l(), m("div", {
                         key: 0,
-                        class: l(`${t}-sider-content-logo`)
+                        class: a(`${t}-sider-content-logo`)
                       }, [
-                        f(H, null, {
-                          default: n(() => [
-                            p("img", {
-                              class: l(`${t}-sider-content-logo-img`),
+                        p(K, null, {
+                          default: d(() => [
+                            h("img", {
+                              class: a(`${t}-sider-content-logo-img`),
                               alt: "logo",
                               src: e.logo
-                            }, null, 10, re),
-                            r.value ? c("", !0) : (s(), u(w, {
+                            }, null, 10, pe),
+                            r.value ? n("", !0) : (l(), i(A, {
                               key: 0,
-                              class: l(`${t}-sider-content-logo-title`),
+                              class: a(`${t}-sider-content-logo-title`),
                               heading: 5
                             }, {
-                              default: n(() => [
-                                C(q(e.title), 1)
+                              default: d(() => [
+                                T(P(e.title), 1)
                               ]),
                               _: 1
                             }, 8, ["class"]))
                           ]),
                           _: 1
                         })
-                      ], 2)) : c("", !0)
+                      ], 2)) : n("", !0)
                     ], 64)),
-                    f(j, {
+                    p(D, {
+                      mode: "vertical",
                       collapsed: r.value,
-                      "selected-keys": i(M),
-                      items: i(I),
+                      "selected-keys": o(R),
+                      items: o(H),
                       "menu-props": e.menuProps,
-                      onMenuItemClick: R
+                      onMenuItemClick: y[1] || (y[1] = (_) => o(S)(o(F).side, _))
                     }, null, 8, ["collapsed", "selected-keys", "items", "menu-props"])
                   ], 2),
-                  f(J, {
-                    class: l(`${t}-sider-collapse-btn`),
+                  p(X, {
+                    class: a(`${t}-sider-collapse-btn`),
                     size: "mini",
-                    onClick: g[0] || (g[0] = (ue) => P(!r.value))
+                    onClick: y[2] || (y[2] = (_) => W(!r.value))
                   }, {
-                    icon: n(() => [
-                      r.value ? (s(), u(O, { key: 0 })) : (s(), u(G, { key: 1 }))
+                    icon: d(() => [
+                      r.value ? (l(), i(Q, { key: 0 })) : (l(), i(U, { key: 1 }))
                     ]),
                     _: 1
                   }, 8, ["class"])
                 ]),
                 _: 3
-              }, 8, ["class", "width", "breakpoint", "collapsed"]),
-              f(v, {
-                class: l([`${t}-body`, { [`${t}-body-collapsed`]: r.value }])
+              }, 8, ["class", "width", "breakpoint", "collapsed"])),
+              p($, {
+                class: a([
+                  `${t}-body`,
+                  { [`${t}-body-hide-sider`]: I.value },
+                  { [`${t}-body-collapsed`]: r.value }
+                ])
               }, {
-                default: n(() => [
-                  e.hideTabs ? c("", !0) : (s(), u(U, {
+                default: d(() => [
+                  e.hideTabs ? n("", !0) : (l(), i(x, {
                     key: 0,
-                    class: l(`${t}-body-affix`),
+                    class: a(`${t}-body-affix`),
                     offsetTop: e.hideHeader ? 0 : e.headerHeight
                   }, {
-                    default: n(() => [
-                      i(B).length > 0 ? (s(), u(Q, {
+                    default: d(() => [
+                      o(M).length > 0 ? (l(), i(Z, {
                         key: 0,
-                        tabs: i(B),
+                        tabs: o(M),
                         "tabs-size": e.tabsSize,
                         "tabs-type": e.tabsType,
                         "tabs-header-padding": e.tabsHeaderPadding,
-                        onTabClick: i(D),
-                        onTabDelete: i(S)
-                      }, null, 8, ["tabs", "tabs-size", "tabs-type", "tabs-header-padding", "onTabClick", "onTabDelete"])) : c("", !0)
+                        onTabClick: o(q),
+                        onTabDelete: o(w)
+                      }, null, 8, ["tabs", "tabs-size", "tabs-type", "tabs-header-padding", "onTabClick", "onTabDelete"])) : n("", !0)
                     ]),
                     _: 1
                   }, 8, ["class", "offsetTop"])),
-                  f(Y, null, {
-                    default: n(() => [
-                      f(X)
+                  p(te, null, {
+                    default: d(() => [
+                      p(ee)
                     ]),
                     _: 1
                   }),
-                  e.hideFooter ? c("", !0) : (s(), h($, { key: 1 }, [
-                    i(m).footer !== void 0 ? y(a.$slots, "footer", { key: 0 }) : (s(), u(Z, {
+                  e.hideFooter ? n("", !0) : (l(), m(k, { key: 1 }, [
+                    o(f).footer !== void 0 ? c(e.$slots, "footer", { key: 0 }) : (l(), i(oe, {
                       key: 1,
-                      class: l(`${t}-body-footer`)
+                      class: a(`${t}-body-footer`)
                     }, {
-                      default: n(() => [
-                        C(q(e.footerTitle), 1)
+                      default: d(() => [
+                        T(P(e.footerTitle), 1)
                       ]),
                       _: 1
                     }, 8, ["class"]))
@@ -330,5 +247,5 @@ const ne = ["src"], re = ["src"], t = "keyblade-pro-layout", ie = 48, ye = /* @_
   }
 });
 export {
-  ye as default
+  he as default
 };

package/es/pro-layout/type.d.ts

@@ -0,0 +1,83 @@
+import { ProLayoutMode } from './enum.ts';
+import { IProMenuItem } from '../pro-menu';
+import { MenuProps } from '@arco-design/web-vue/es/menu/interface';
+export interface IProLayoutProps {
+    /**
+     * 布局模式
+     * side：侧边菜单布局
+     * mix：混合菜单布局
+     * */
+    layout?: ProLayoutMode;
+    /**
+     * 是否隐藏头部
+     */
+    hideHeader?: boolean;
+    /**
+     * 是否隐藏侧边栏
+     */
+    hiderSider?: boolean;
+    /**
+     * 头部高度
+     */
+    headerHeight?: number;
+    /**
+     * logo
+     */
+    logo?: string;
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 侧边栏宽度
+     */
+    siderWidth?: number;
+    /**
+     * 侧边栏响应式的断点
+     */
+    siderBreakpoint?: 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+    /**
+     * 侧边栏是否收缩，会受 siderBreakpoint 影响
+     */
+    siderCollapsed?: boolean;
+    /**
+     * 菜单项
+     */
+    menuItems: IProMenuItem[];
+    /**
+     * 菜单特有属性
+     */
+    menuProps?: Partial<MenuProps>;
+    /**
+     * 页脚标题
+     */
+    footerTitle?: string;
+    /**
+     * 是否隐藏页脚
+     */
+    hideFooter?: boolean;
+    /**
+     * 是否隐藏多页签
+     */
+    hideTabs?: boolean;
+    /**
+     * tabs尺寸
+     */
+    tabsSize?: 'mini' | 'small' | 'medium' | 'large';
+    /**
+     * tabs类型
+     */
+    tabsType?: 'line' | 'card' | 'card-gutter' | 'text' | 'rounded' | 'capsule';
+    /**
+     * tabs头部间距
+     */
+    tabsHeaderPadding?: boolean;
+    /**
+     * 禁用全局路由缓存
+     */
+    disableKeepAlive?: boolean;
+    /**
+     * 菜单点击事件
+     */
+    onMenuItemClick?: (item: IProMenuItem) => Promise<boolean>;
+}

package/es/pro-menu/index.d.ts

@@ -8,7 +8,7 @@ declare const ProMenu: {
         };
         collapsed: {
             type: import('vue').PropType<boolean>;
-            required: true;
+            required: false;
         };
         selectedKeys: {
             type: import('vue').PropType<string[]>;
@@ -45,7 +45,7 @@ declare const ProMenu: {
         };
         collapsed: {
             type: import('vue').PropType<boolean>;
-            required: true;
+            required: false;
         };
         selectedKeys: {
             type: import('vue').PropType<string[]>;
@@ -77,7 +77,7 @@ declare const ProMenu: {
     };
     collapsed: {
         type: import('vue').PropType<boolean>;
-        required: true;
+        required: false;
     };
     selectedKeys: {
         type: import('vue').PropType<string[]>;

package/es/pro-menu/interface.d.ts

@@ -5,6 +5,17 @@ export interface IProMenuItem {
     path: string;
     /** 中文名称 */
     title: string;
+    /** 是否是顶部菜单
+     * 1.侧边菜单布局不生效
+     * 2.如果父级菜单设置了 topChildrenMenu，则该菜单属性不生效
+     * 3.如果父级菜单没有设置 topChildrenMenu，但子菜单只要有一个设置了topMenu，则所有同级菜单的 topMenu 都跟随该菜单设置相同值，并且该菜单的父级菜单 topChildrenMenu 也会自动设置成相同值
+     * */
+    topMenu?: boolean;
+    /** 子菜单是否顶部菜单
+     * 1.侧边栏布局不生效
+     * 2.如果该菜单设置了 topChildrenMenu ，则下级子菜单的 topMenu 全部都跟随父级菜单的topChildrenMenu
+     * */
+    topChildrenMenu?: boolean;
     /** 当此节点被选中的时候也会选中 activatedKeys 的节点 */
     activatedKeys?: string[];
     /**

package/es/pro-menu/pro-menu.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     collapsed: {
         type: PropType<boolean>;
-        required: true;
+        required: false;
     };
     selectedKeys: {
         type: PropType<string[]>;
@@ -34,7 +34,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     collapsed: {
         type: PropType<boolean>;
-        required: true;
+        required: false;
     };
     selectedKeys: {
         type: PropType<string[]>;