@keyblade/pro-components 1.12.16 → 1.13.0

package/es/pro-layout/hooks.js

@@ -1,106 +1,146 @@
-import { ref as i, watch as T } from "vue";
-import { useRoute as S, useRouter as x } from "vue-router";
-function J(h, o) {
-  const r = S(), b = x(), m = i([]), P = (t) => {
-    m.value = [t];
-  }, u = i(), v = i([]), d = i({}), p = i([]), c = i([]), f = i([]), N = () => {
-    const t = [], l = (a) => {
-      var n;
-      for (const e in a) {
-        const s = a[e];
-        if (s.name === ((n = u == null ? void 0 : u.value) == null ? void 0 : n.name) || s.children && s.children.length > 0 && l(s.children))
-          return delete s.children, t.unshift(s), !0;
+import { ref as r, computed as L, watch as g } from "vue";
+import { useRoute as R, useRouter as W } from "vue-router";
+import { ProLayoutMode as P, ProLayoutMenuType as B } from "./enum.js";
+function z(u) {
+  const o = R(), h = W(), y = r([]), T = r([]), i = r(), v = r([]), M = r({}), k = r([]), s = r([]), p = r([]), b = r([]), f = r([]), d = L(() => {
+    const a = [...u.menuItems], e = (n) => {
+      n.forEach((l) => {
+        if (l != null && l.children && l.children.length > 0) {
+          if ((l == null ? void 0 : l.topChildrenMenu) !== void 0)
+            l.children = l.children.map((t) => ({ ...t, topMenu: l == null ? void 0 : l.topChildrenMenu }));
+          else {
+            const t = l.children.find((c) => c.topMenu !== void 0);
+            t && (l.topChildrenMenu = t.topMenu, l.children = l.children.map((c) => ({ ...c, topMenu: t.topMenu })));
+          }
+          e(l.children);
+        }
+      });
+    };
+    return u.layout === P.mix && e(a), a;
+  }), C = (a) => {
+    var e;
+    y.value = [a.name], !(a != null && a.children) || ((e = a == null ? void 0 : a.children) == null ? void 0 : e.length) === 0 ? (f.value = [], h == null || h.push({ path: a.path })) : f.value = a.children;
+  }, E = (a) => {
+    h == null || h.push({ path: a.path }), T.value = [a.name];
+  }, N = async (a, e) => {
+    if (e != null && e.path && !(u != null && u.onMenuItemClick && !await u.onMenuItemClick(e))) {
+      if (e.path.startsWith("http") || e.path.startsWith("https")) {
+        window.open(e.path);
+        return;
+      }
+      a === B.top ? C(e) : E(e);
+    }
+  }, S = () => {
+    const a = [], e = (n) => {
+      var l;
+      for (const t in n) {
+        const c = n[t];
+        if (c.name === ((l = i == null ? void 0 : i.value) == null ? void 0 : l.name) || c.children && c.children.length > 0 && e(c.children))
+          return a.unshift(c), !0;
       }
       return !1;
     };
-    l(JSON.parse(JSON.stringify(h.value))), v.value = t;
-  }, k = () => {
-    var l, a, n;
-    const t = (l = v.value) == null ? void 0 : l.map((e) => ({ path: e == null ? void 0 : e.path, label: e == null ? void 0 : e.title }));
-    p.value = (a = u.value) != null && a.breadcrumbs ? (n = u.value) == null ? void 0 : n.breadcrumbs : t.length !== 0 ? t : [];
+    e(JSON.parse(JSON.stringify(d.value))), v.value = a;
+  }, x = () => {
+    var e, n, l;
+    const a = (e = v.value) == null ? void 0 : e.map((t) => ({ path: t == null ? void 0 : t.path, label: t == null ? void 0 : t.title }));
+    k.value = (n = i.value) != null && n.breadcrumbs ? (l = i.value) == null ? void 0 : l.breadcrumbs : a.length !== 0 ? a : [];
   };
-  function y() {
-    if (!u.value || u.value.noAffix) {
-      c.value.forEach((e) => {
-        e.active = !1;
+  function A() {
+    if (!i.value || i.value.noAffix) {
+      s.value.forEach((t) => {
+        t.active = !1;
       });
       return;
     }
-    const { name: t, title: l } = u.value;
-    let a = -1;
-    c.value.forEach((e, s) => {
-      e.active = !1, e.name === t && (a = s);
+    const { name: a, title: e } = i.value;
+    let n = -1;
+    s.value.forEach((t, c) => {
+      t.active = !1, t.name === a && (n = c);
     });
-    const n = {
-      name: t,
-      parentNames: v.value.map((e) => e.name),
-      title: l ?? t,
-      fullPath: r.fullPath,
+    const l = {
+      name: a,
+      parentNames: v.value.map((t) => t.name),
+      title: e ?? a,
+      fullPath: o.fullPath,
       active: !0
     };
-    if (~a) {
-      const e = c.value[a];
-      e.fullPath === r.fullPath ? (e.active = !0, e.fullPath = r.fullPath) : (c.value.splice(a, 1), setTimeout(() => {
-        c.value.push(n);
+    if (~n) {
+      const t = s.value[n];
+      t.fullPath === o.fullPath ? (t.active = !0, t.fullPath = o.fullPath) : (s.value.splice(n, 1), setTimeout(() => {
+        s.value.push(l);
       }));
     } else
-      c.value.push(n);
+      s.value.push(l);
   }
-  const A = (t) => {
-    const l = c.value.findIndex((n) => n.name === t), a = c.value[l];
-    b.push(a.fullPath);
-  }, E = (t) => {
-    let l = -1, a = -1;
-    if (c.value.forEach((e, s) => {
-      e.name === t && (a = s), e.active && (l = s);
-    }), l === a) {
-      let e;
-      a === 0 ? e = c.value[a + 1] : e = c.value[a - 1], e.active = !0, b.push(e.fullPath);
+  const w = (a) => {
+    const e = s.value.findIndex((l) => l.name === a), n = s.value[e];
+    h.push(n.fullPath);
+  }, K = (a) => {
+    let e = -1, n = -1;
+    if (s.value.forEach((t, c) => {
+      t.name === a && (n = c), t.active && (e = c);
+    }), e === n) {
+      let t;
+      n === 0 ? t = s.value[n + 1] : t = s.value[n - 1], t.active = !0, h.push(t.fullPath);
     }
-    const n = c.value.splice(a, 1);
-    I(n[0]);
-  }, g = () => {
-    var l;
-    if (o != null && o.disableKeepAlive || (l = r == null ? void 0 : r.meta) != null && l.ignoreCache)
+    const l = s.value.splice(n, 1);
+    O(l[0]);
+  }, J = () => {
+    var e;
+    if (u != null && u.disableKeepAlive || (e = o == null ? void 0 : o.meta) != null && e.ignoreCache)
       return;
-    const t = new Set(f.value);
-    v.value.forEach((a) => {
-      a.name && t.add(a.name);
-    }), f.value = Array.from(t.values());
-  }, I = (t) => {
-    const l = new Set(f.value);
-    t.parentNames.forEach((a) => {
-      l.delete(a);
-    }), c.value.forEach((a) => {
-      a.parentNames.forEach((n) => {
-        const e = d.value[n];
-        e != null && e.ignoreCache || l.add(e.name);
+    const a = new Set(p.value);
+    v.value.forEach((n) => {
+      n.name && a.add(n.name);
+    }), p.value = Array.from(a.values());
+  }, O = (a) => {
+    const e = new Set(p.value);
+    a.parentNames.forEach((n) => {
+      e.delete(n);
+    }), s.value.forEach((n) => {
+      n.parentNames.forEach((l) => {
+        const t = M.value[l];
+        t != null && t.ignoreCache || e.add(t.name);
       });
-    }), f.value = Array.from(l.values());
+    }), p.value = Array.from(e.values());
   };
-  return T(h, () => {
-    const t = {}, l = (a) => {
-      a.forEach((n) => {
-        n.children && n.children.length > 0 && l(n.children), delete n.children, t[n.name] = n;
+  return g(() => d.value, () => {
+    const a = {}, e = (n) => {
+      n.forEach((l) => {
+        l.children && l.children.length > 0 && e(l.children), delete l.children, a[l.name] = l;
       });
     };
-    l(JSON.parse(JSON.stringify(h.value))), d.value = t;
-  }, { immediate: !0 }), T(() => r == null ? void 0 : r.name, () => {
-    var l;
-    const t = r == null ? void 0 : r.name;
-    u.value = d.value[t], m.value = u != null && u.value ? [u.value.name, ...((l = u.value) == null ? void 0 : l.activatedKeys) || []] : [], N(), k(), o.hideTabs || y(), g();
+    e(JSON.parse(JSON.stringify(d.value))), M.value = a;
+  }, { immediate: !0 }), g(() => [u.layout, d.value], () => {
+    var a;
+    if (b.value = [], f.value = [], u.layout === P.side)
+      f.value = d.value;
+    else if (u.layout === P.mix) {
+      const e = (a = d.value) == null ? void 0 : a.filter((n) => n.topMenu);
+      (e == null ? void 0 : e.length) === 0 ? f.value = d.value : b.value = e;
+    }
+  }, { immediate: !0 }), g(() => o == null ? void 0 : o.name, () => {
+    var n, l, t;
+    const a = o == null ? void 0 : o.name;
+    i.value = M.value[a], S();
+    const e = v.value.filter((c) => c.topMenu);
+    e.length > 0 && b.value.length > 0 && (f.value = ((n = e[e.length - 1]) == null ? void 0 : n.children) || []), y.value = i != null && i.value ? [...e.map((c) => c.name), ...((l = i.value) == null ? void 0 : l.activatedKeys) || []] : [], T.value = i != null && i.value ? [i.value.name, ...((t = i.value) == null ? void 0 : t.activatedKeys) || []] : [], x(), u.hideTabs || A(), J();
   }, { immediate: !0 }), {
-    menuSelectedKeys: m,
-    activeMenuItem: u,
-    menuItemMap: d,
-    breadcrumbItems: p,
-    tabs: c,
-    keepAliveInclude: f,
-    onMenuItemClick: P,
-    onTabClick: A,
-    onTabDelete: E
+    topMenuItems: b,
+    siderMenuItems: f,
+    topMenuSelectedKeys: y,
+    siderMenuSelectedKeys: T,
+    activeMenuItem: i,
+    menuItemMap: M,
+    breadcrumbItems: k,
+    tabs: s,
+    keepAliveInclude: p,
+    onProMenuItemClick: N,
+    onTabClick: w,
+    onTabDelete: K
   };
 }
 export {
-  J as useHooks
+  z as useHooks
 };

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

@@ -1,96 +1,6 @@
 import { App } from 'vue';
 declare const ProLayout: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
-        layout: {
-            type: import('vue').PropType<"mix" | "side">;
-            required: false;
-            default: string;
-        };
-        hideHeader: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        headerHeight: {
-            type: import('vue').PropType<number>;
-            required: false;
-            default: number;
-        };
-        logo: {
-            type: import('vue').PropType<string>;
-            required: false;
-            default: string;
-        };
-        title: {
-            type: import('vue').PropType<string>;
-            required: false;
-            default: string;
-        };
-        siderWidth: {
-            type: import('vue').PropType<number>;
-            required: false;
-            default: number;
-        };
-        siderBreakpoint: {
-            type: import('vue').PropType<"xxl" | "xl" | "lg" | "md" | "sm" | "xs">;
-            required: false;
-            default: string;
-        };
-        siderCollapsed: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        menuItems: {
-            type: import('vue').PropType<import('..').IProMenuItem[]>;
-            required: false;
-            default: () => never[];
-        };
-        menuProps: {
-            type: import('vue').PropType<Partial<import('@arco-design/web-vue/es/menu/interface').MenuProps>>;
-            required: false;
-            default: () => {};
-        };
-        footerTitle: {
-            type: import('vue').PropType<string>;
-            required: false;
-            default: string;
-        };
-        hideFooter: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        hideTabs: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        tabsSize: {
-            type: import('vue').PropType<"mini" | "small" | "medium" | "large">;
-            required: false;
-            default: string;
-        };
-        tabsType: {
-            type: import('vue').PropType<"line" | "card" | "card-gutter" | "text" | "rounded" | "capsule">;
-            required: false;
-            default: string;
-        };
-        tabsHeaderPadding: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        disableKeepAlive: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        onMenuItemClick: {
-            type: import('vue').PropType<(menuItem: import('..').IProMenuItem) => Promise<boolean>>;
-            required: false;
-        };
-    }>> & Readonly<{
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./type').IProLayoutProps> & Readonly<{
         onCollapse?: ((_collapsed: boolean) => any) | undefined;
         onKeepAliveIncludeChange?: ((_keepAliveInclude: string[]) => any) | undefined;
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -99,11 +9,12 @@ declare const ProLayout: {
     }, import('vue').PublicProps, {
         title: string;
         menuProps: Partial<import('@arco-design/web-vue/es/menu/interface').MenuProps>;
-        tabsSize: "small" | "mini" | "medium" | "large";
-        tabsType: "line" | "text" | "card" | "card-gutter" | "rounded" | "capsule";
+        tabsSize: "mini" | "small" | "medium" | "large";
+        tabsType: "line" | "card" | "card-gutter" | "text" | "rounded" | "capsule";
         tabsHeaderPadding: boolean;
-        layout: "mix" | "side";
+        layout: import('./enum').ProLayoutMode;
         hideHeader: boolean;
+        hiderSider: boolean;
         headerHeight: number;
         logo: string;
         siderWidth: number;
@@ -114,114 +25,25 @@ declare const ProLayout: {
         hideFooter: boolean;
         hideTabs: boolean;
         disableKeepAlive: boolean;
-    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('vue').ExtractPropTypes<{
-        layout: {
-            type: import('vue').PropType<"mix" | "side">;
-            required: false;
-            default: string;
-        };
-        hideHeader: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        headerHeight: {
-            type: import('vue').PropType<number>;
-            required: false;
-            default: number;
-        };
-        logo: {
-            type: import('vue').PropType<string>;
-            required: false;
-            default: string;
-        };
-        title: {
-            type: import('vue').PropType<string>;
-            required: false;
-            default: string;
-        };
-        siderWidth: {
-            type: import('vue').PropType<number>;
-            required: false;
-            default: number;
-        };
-        siderBreakpoint: {
-            type: import('vue').PropType<"xxl" | "xl" | "lg" | "md" | "sm" | "xs">;
-            required: false;
-            default: string;
-        };
-        siderCollapsed: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        menuItems: {
-            type: import('vue').PropType<import('..').IProMenuItem[]>;
-            required: false;
-            default: () => never[];
-        };
-        menuProps: {
-            type: import('vue').PropType<Partial<import('@arco-design/web-vue/es/menu/interface').MenuProps>>;
-            required: false;
-            default: () => {};
-        };
-        footerTitle: {
-            type: import('vue').PropType<string>;
-            required: false;
-            default: string;
-        };
-        hideFooter: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        hideTabs: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        tabsSize: {
-            type: import('vue').PropType<"mini" | "small" | "medium" | "large">;
-            required: false;
-            default: string;
-        };
-        tabsType: {
-            type: import('vue').PropType<"line" | "card" | "card-gutter" | "text" | "rounded" | "capsule">;
-            required: false;
-            default: string;
-        };
-        tabsHeaderPadding: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        disableKeepAlive: {
-            type: import('vue').PropType<boolean>;
-            required: false;
-            default: boolean;
-        };
-        onMenuItemClick: {
-            type: import('vue').PropType<(menuItem: import('..').IProMenuItem) => Promise<boolean>>;
-            required: false;
-        };
-    }>> & Readonly<{
+    }, Readonly<import('./type').IProLayoutProps> & Readonly<{
         onCollapse?: ((_collapsed: boolean) => any) | undefined;
         onKeepAliveIncludeChange?: ((_keepAliveInclude: string[]) => any) | undefined;
     }>, {}, {}, {}, {}, {
         title: string;
         menuProps: Partial<import('@arco-design/web-vue/es/menu/interface').MenuProps>;
-        tabsSize: "small" | "mini" | "medium" | "large";
-        tabsType: "line" | "text" | "card" | "card-gutter" | "rounded" | "capsule";
+        tabsSize: "mini" | "small" | "medium" | "large";
+        tabsType: "line" | "card" | "card-gutter" | "text" | "rounded" | "capsule";
         tabsHeaderPadding: boolean;
-        layout: "mix" | "side";
+        layout: import('./enum').ProLayoutMode;
         hideHeader: boolean;
+        hiderSider: boolean;
         headerHeight: number;
         logo: string;
         siderWidth: number;
@@ -236,97 +58,7 @@ declare const ProLayout: {
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
-    layout: {
-        type: import('vue').PropType<"mix" | "side">;
-        required: false;
-        default: string;
-    };
-    hideHeader: {
-        type: import('vue').PropType<boolean>;
-        required: false;
-        default: boolean;
-    };
-    headerHeight: {
-        type: import('vue').PropType<number>;
-        required: false;
-        default: number;
-    };
-    logo: {
-        type: import('vue').PropType<string>;
-        required: false;
-        default: string;
-    };
-    title: {
-        type: import('vue').PropType<string>;
-        required: false;
-        default: string;
-    };
-    siderWidth: {
-        type: import('vue').PropType<number>;
-        required: false;
-        default: number;
-    };
-    siderBreakpoint: {
-        type: import('vue').PropType<"xxl" | "xl" | "lg" | "md" | "sm" | "xs">;
-        required: false;
-        default: string;
-    };
-    siderCollapsed: {
-        type: import('vue').PropType<boolean>;
-        required: false;
-        default: boolean;
-    };
-    menuItems: {
-        type: import('vue').PropType<import('..').IProMenuItem[]>;
-        required: false;
-        default: () => never[];
-    };
-    menuProps: {
-        type: import('vue').PropType<Partial<import('@arco-design/web-vue/es/menu/interface').MenuProps>>;
-        required: false;
-        default: () => {};
-    };
-    footerTitle: {
-        type: import('vue').PropType<string>;
-        required: false;
-        default: string;
-    };
-    hideFooter: {
-        type: import('vue').PropType<boolean>;
-        required: false;
-        default: boolean;
-    };
-    hideTabs: {
-        type: import('vue').PropType<boolean>;
-        required: false;
-        default: boolean;
-    };
-    tabsSize: {
-        type: import('vue').PropType<"mini" | "small" | "medium" | "large">;
-        required: false;
-        default: string;
-    };
-    tabsType: {
-        type: import('vue').PropType<"line" | "card" | "card-gutter" | "text" | "rounded" | "capsule">;
-        required: false;
-        default: string;
-    };
-    tabsHeaderPadding: {
-        type: import('vue').PropType<boolean>;
-        required: false;
-        default: boolean;
-    };
-    disableKeepAlive: {
-        type: import('vue').PropType<boolean>;
-        required: false;
-        default: boolean;
-    };
-    onMenuItemClick: {
-        type: import('vue').PropType<(menuItem: import('..').IProMenuItem) => Promise<boolean>>;
-        required: false;
-    };
-}>> & Readonly<{
+} & import('vue').ComponentOptionsBase<Readonly<import('./type').IProLayoutProps> & Readonly<{
     onCollapse?: ((_collapsed: boolean) => any) | undefined;
     onKeepAliveIncludeChange?: ((_keepAliveInclude: string[]) => any) | undefined;
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -335,11 +67,12 @@ declare const ProLayout: {
 }, string, {
     title: string;
     menuProps: Partial<import('@arco-design/web-vue/es/menu/interface').MenuProps>;
-    tabsSize: "small" | "mini" | "medium" | "large";
-    tabsType: "line" | "text" | "card" | "card-gutter" | "rounded" | "capsule";
+    tabsSize: "mini" | "small" | "medium" | "large";
+    tabsType: "line" | "card" | "card-gutter" | "text" | "rounded" | "capsule";
     tabsHeaderPadding: boolean;
-    layout: "mix" | "side";
+    layout: import('./enum').ProLayoutMode;
     hideHeader: boolean;
+    hiderSider: boolean;
     headerHeight: number;
     logo: string;
     siderWidth: number;
@@ -353,7 +86,9 @@ declare const ProLayout: {
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: {
         'header-left'?(_: {}): any;
-        'header-center'?(_: {}): any;
+        'header-center-left'?(_: {}): any;
+        'header-center-center'?(_: {}): any;
+        'header-center-right'?(_: {}): any;
         'header-right'?(_: {}): any;
         'sider-top'?(_: {}): any;
         footer?(_: {}): any;