@keyblade/pro-components 1.10.2 → 1.11.1

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

@@ -0,0 +1,303 @@
+import { defineComponent as U, useCssVars as X, toRefs as Y, useSlots as Z, provide as I, ref as ee, watch as A, resolveComponent as a, openBlock as o, createBlock as u, normalizeClass as l, withCtx as s, createVNode as r, createElementVNode as p, unref as n, renderSlot as y, createElementBlock as m, Fragment as k, createTextVNode as _, toDisplayString as v, createCommentVNode as f } from "vue";
+import { useHooks as te } from "./hooks.js";
+const le = ["src"], ae = ["src"], e = "keyblade-pro-layout", oe = 48, re = /* @__PURE__ */ U({
+  __name: "pro-layout",
+  props: {
+    /**
+     * 布局模式
+     * side：侧边菜单布局
+     * mix：混合菜单布局
+     * */
+    layout: {
+      type: String,
+      required: !1,
+      default: "mix"
+    },
+    /** 头部高度 */
+    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: () => []
+    },
+    /** 页脚标题 */
+    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
+    }
+  },
+  emits: {
+    /** 收缩事件 */
+    collapse: (t) => !0,
+    /** keepAlive改变事件 */
+    keepAliveIncludeChange: (t) => !0
+  },
+  setup(t, { emit: $ }) {
+    const c = t;
+    X((i) => ({
+      c299e954: W,
+      "5c2d09d7": z,
+      "4313bece": V
+    }));
+    const { menuItems: C } = Y(c), b = Z(), {
+      menuSelectedKeys: P,
+      breadcrumbItems: w,
+      tabs: T,
+      keepAliveInclude: h,
+      onMenuItemClick: H,
+      onTabClick: K,
+      onTabDelete: N
+    } = te(C, {
+      hideTabs: c.hideTabs,
+      disableKeepAlive: c.disableKeepAlive
+    });
+    I("ProBreadcrumbItems", w), I("ProKeepAliveInclude", h);
+    const W = `${c.headerHeight}px`, z = `${c.siderWidth}px`, V = `${oe}px`, d = ee(c.siderCollapsed), q = (i) => {
+      d.value = i, $("collapse", i);
+    };
+    return A(() => c.siderCollapsed, () => {
+      d.value = c.siderCollapsed;
+    }, { immediate: !0 }), A(h, () => {
+      $("keepAliveIncludeChange", h.value);
+    }, { immediate: !0 }), (i, S) => {
+      const B = a("a-typography-title"), x = a("a-space"), D = a("a-layout-header"), F = a("kb-pro-menu"), M = a("icon-menu-unfold"), E = a("icon-menu-fold"), R = a("a-button"), j = a("a-layout-sider"), G = a("kb-pro-reuse-tabs"), J = a("a-affix"), L = a("kb-pro-keep-alive-router-view"), O = a("a-layout-content"), Q = a("a-layout-footer"), g = a("a-layout");
+      return o(), u(g, {
+        class: l([e, `${e}-${t.layout}`])
+      }, {
+        default: s(() => [
+          r(D, {
+            class: l([`${e}-header`, { [`${e}-header-collapsed`]: d.value }])
+          }, {
+            default: s(() => [
+              p("div", {
+                class: l(`${e}-header-left`)
+              }, [
+                n(b)["header-left"] ? y(i.$slots, "header-left", { key: 0 }) : (o(), m(k, { key: 1 }, [
+                  t.layout !== "side" ? (o(), m("div", {
+                    key: 0,
+                    class: l(`${e}-header-left-logo`)
+                  }, [
+                    r(x, null, {
+                      default: s(() => [
+                        p("img", {
+                          class: l(`${e}-header-left-logo-img`),
+                          alt: "logo",
+                          src: t.logo
+                        }, null, 10, le),
+                        d.value ? f("", !0) : (o(), u(B, {
+                          key: 0,
+                          class: l(`${e}-header-left-logo-title`),
+                          heading: 5
+                        }, {
+                          default: s(() => [
+                            _(v(t.title), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["class"]))
+                      ]),
+                      _: 1
+                    })
+                  ], 2)) : f("", !0)
+                ], 64))
+              ], 2),
+              p("div", {
+                class: l(`${e}-header-center`)
+              }, [
+                n(b)["header-center"] ? y(i.$slots, "header-center", { key: 0 }) : f("", !0)
+              ], 2),
+              p("div", {
+                class: l(`${e}-header-right`)
+              }, [
+                y(i.$slots, "header-right")
+              ], 2)
+            ]),
+            _: 3
+          }, 8, ["class"]),
+          r(g, null, {
+            default: s(() => [
+              r(j, {
+                class: l([`${e}-sider`, { [`${e}-sider-collapsed`]: d.value }]),
+                width: t.siderWidth,
+                collapsible: !0,
+                breakpoint: t.siderBreakpoint,
+                collapsed: d.value,
+                "hide-trigger": !0,
+                onCollapse: q
+              }, {
+                default: s(() => [
+                  p("div", {
+                    class: l(`${e}-sider-content`)
+                  }, [
+                    n(b)["sider-top"] ? y(i.$slots, "sider-top", { key: 0 }) : (o(), m(k, { key: 1 }, [
+                      t.layout === "side" ? (o(), m("div", {
+                        key: 0,
+                        class: l(`${e}-sider-content-logo`)
+                      }, [
+                        r(x, null, {
+                          default: s(() => [
+                            p("img", {
+                              class: l(`${e}-sider-content-logo-img`),
+                              alt: "logo",
+                              src: t.logo
+                            }, null, 10, ae),
+                            d.value ? f("", !0) : (o(), u(B, {
+                              key: 0,
+                              class: l(`${e}-sider-content-logo-title`),
+                              heading: 5
+                            }, {
+                              default: s(() => [
+                                _(v(t.title), 1)
+                              ]),
+                              _: 1
+                            }, 8, ["class"]))
+                          ]),
+                          _: 1
+                        })
+                      ], 2)) : f("", !0)
+                    ], 64)),
+                    r(F, {
+                      collapsed: d.value,
+                      "selected-keys": n(P),
+                      items: n(C),
+                      onMenuItemClick: n(H)
+                    }, null, 8, ["collapsed", "selected-keys", "items", "onMenuItemClick"])
+                  ], 2),
+                  r(R, {
+                    class: l(`${e}-sider-collapse-btn`),
+                    size: "mini",
+                    onClick: S[0] || (S[0] = (se) => q(!d.value))
+                  }, {
+                    icon: s(() => [
+                      d.value ? (o(), u(M, { key: 0 })) : (o(), u(E, { key: 1 }))
+                    ]),
+                    _: 1
+                  }, 8, ["class"])
+                ]),
+                _: 3
+              }, 8, ["class", "width", "breakpoint", "collapsed"]),
+              r(g, {
+                class: l([`${e}-body`, { [`${e}-body-collapsed`]: d.value }])
+              }, {
+                default: s(() => [
+                  t.hideTabs ? f("", !0) : (o(), u(J, {
+                    key: 0,
+                    class: l(`${e}-body-affix`),
+                    offsetTop: t.headerHeight
+                  }, {
+                    default: s(() => [
+                      n(T).length > 0 ? (o(), u(G, {
+                        key: 0,
+                        tabs: n(T),
+                        "tabs-size": t.tabsSize,
+                        "tabs-type": t.tabsType,
+                        "tabs-header-padding": t.tabsHeaderPadding,
+                        onTabClick: n(K),
+                        onTabDelete: n(N)
+                      }, null, 8, ["tabs", "tabs-size", "tabs-type", "tabs-header-padding", "onTabClick", "onTabDelete"])) : f("", !0)
+                    ]),
+                    _: 1
+                  }, 8, ["class", "offsetTop"])),
+                  r(O, null, {
+                    default: s(() => [
+                      r(L)
+                    ]),
+                    _: 1
+                  }),
+                  t.hideFooter ? f("", !0) : (o(), m(k, { key: 1 }, [
+                    n(b).footer !== void 0 ? y(i.$slots, "footer", { key: 0 }) : (o(), u(Q, {
+                      key: 1,
+                      class: l(`${e}-body-footer`)
+                    }, {
+                      default: s(() => [
+                        _(v(t.footerTitle), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["class"]))
+                  ], 64))
+                ]),
+                _: 3
+              }, 8, ["class"])
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+});
+export {
+  re as default
+};

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,5 @@
+import o from "./pro-layout.vue.js";
+import "./pro-layout.vue2.js";
+export {
+  o as default
+};

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

@@ -0,0 +1,167 @@
+import type { App } from 'vue';
+declare const ProMenu: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            mode?: "horizontal" | "vertical" | undefined;
+            key?: string | number | symbol | undefined;
+            ref?: import("vue").VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeMounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUpdate?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUpdated?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUnmount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUnmounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            class?: unknown;
+            style?: unknown;
+            readonly collapsed: boolean;
+            readonly selectedKeys: string[];
+            readonly items: import("./interface").IProMenuItem[];
+            "onMenu-item-click"?: ((key: string) => any) | undefined;
+        };
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $emit: (event: "menu-item-click", key: string) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            mode: {
+                type: import("vue").PropType<"horizontal" | "vertical">;
+                required: false;
+                default: string;
+            };
+            collapsed: {
+                type: import("vue").PropType<boolean>;
+                required: true;
+            };
+            selectedKeys: {
+                type: import("vue").PropType<string[]>;
+                required: true;
+            };
+            items: {
+                type: import("vue").PropType<import("./interface").IProMenuItem[]>;
+                required: true;
+            };
+        }>> & {
+            "onMenu-item-click"?: ((key: string) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "menu-item-click": (key: string) => void;
+        }, string, {
+            mode: "horizontal" | "vertical";
+        }, {}, string, {}> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        mode: {
+            type: import("vue").PropType<"horizontal" | "vertical">;
+            required: false;
+            default: string;
+        };
+        collapsed: {
+            type: import("vue").PropType<boolean>;
+            required: true;
+        };
+        selectedKeys: {
+            type: import("vue").PropType<string[]>;
+            required: true;
+        };
+        items: {
+            type: import("vue").PropType<import("./interface").IProMenuItem[]>;
+            required: true;
+        };
+    }>> & {
+        "onMenu-item-click"?: ((key: string) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    mode: {
+        type: import("vue").PropType<"horizontal" | "vertical">;
+        required: false;
+        default: string;
+    };
+    collapsed: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    selectedKeys: {
+        type: import("vue").PropType<string[]>;
+        required: true;
+    };
+    items: {
+        type: import("vue").PropType<import("./interface").IProMenuItem[]>;
+        required: true;
+    };
+}>> & {
+    "onMenu-item-click"?: ((key: string) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "menu-item-click": (key: string) => void;
+}, string, {
+    mode: "horizontal" | "vertical";
+}, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    install: (app: App) => void;
+};
+export * from './interface';
+export { ProMenu };
+export default ProMenu;

package/es/pro-menu/index.js

@@ -0,0 +1,12 @@
+import n from "./pro-menu.vue.js";
+import "./pro-menu.vue2.js";
+import { Menu as t } from "@arco-design/web-vue";
+const e = Object.assign(n, {
+  install: (o) => {
+    o.use(t), o.component("KbProMenu", n);
+  }
+}), i = e;
+export {
+  e as ProMenu,
+  i as default
+};

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

@@ -0,0 +1,39 @@
+export interface IProMenuItem {
+    /** 英文名称（唯一标识，不能重复） */
+    name: string;
+    /** 路径 */
+    path: string;
+    /** 中文名称 */
+    title: string;
+    /** 当此节点被选中的时候也会选中 activatedKeys 的节点 */
+    activatedKeys?: string[];
+    /**
+     * 菜单图标
+     * 方式一、arco design icon: 'icon-apps'，这样需要在主项目中，手动使用 app.use(IconXXX) 进行注册，否则按需加载不能识别动态组件
+     * 方式二、url: 绝对路径或相对路径
+     * */
+    icon?: string;
+    /**
+     * 选中菜单图标
+     * 方式一、arco design icon: 'icon-apps'，这样需要在主项目中，手动使用 app.use(IconXXX) 进行注册，否则按需加载不能识别动态组件
+     * 方式二、url: 绝对路径或相对路径
+     * */
+    selectedIcon?: string;
+    /** 如果设置为 true，右侧菜单不显示 */
+    hideInMenu?: boolean;
+    /** 如果设置为 true，右侧菜单不显示下面子菜单 */
+    hideChildrenInMenu?: boolean;
+    /** 如果设置为 true，则不会出现在多页签中 */
+    noAffix?: boolean;
+    /** 面包屑 */
+    breadcrumbs?: {
+        path?: string;
+        label: string;
+    }[];
+    /** 默认缓存，如果设置为 true，页面将不会被缓存 */
+    ignoreCache?: boolean;
+    /** 组件key，影响缓存和渲染 */
+    componentKey?: 'path' | 'fullPath';
+    /** 子菜单 */
+    children?: IProMenuItem[];
+}

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

@@ -0,0 +1,46 @@
+import { type PropType } from 'vue';
+import type { IProMenuItem } from './interface';
+declare const _default: import("vue").DefineComponent<{
+    mode: {
+        type: PropType<"horizontal" | "vertical">;
+        required: false;
+        default: string;
+    };
+    collapsed: {
+        type: PropType<boolean>;
+        required: true;
+    };
+    selectedKeys: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    items: {
+        type: PropType<IProMenuItem[]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "menu-item-click": (key: string) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    mode: {
+        type: PropType<"horizontal" | "vertical">;
+        required: false;
+        default: string;
+    };
+    collapsed: {
+        type: PropType<boolean>;
+        required: true;
+    };
+    selectedKeys: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    items: {
+        type: PropType<IProMenuItem[]>;
+        required: true;
+    };
+}>> & {
+    "onMenu-item-click"?: ((key: string) => any) | undefined;
+}, {
+    mode: "horizontal" | "vertical";
+}, {}>;
+export default _default;