bkui-vue 0.0.1-beta.3 → 0.0.1-beta.30

package/lib/loading/loading.less

@@ -8,6 +8,12 @@
 @ovalGap: 20px;
 @titleMarginTop: 8px;
 
+@miniDotSize: 3px;
+@miniDotGap: 3px;
+@miniOvalWidth: 2px;
+@miniOvalHeight: 3px;
+@miniOvalGap: 8px;
+
 @smallDotSize: 6px;
 @smallDotGap: 6px;
 @smallOvalWidth: 4px;
@@ -29,15 +35,15 @@
 .loading-theme(@theme) {
   .oval,
   .dot,
-  .dot1,
-  .dot2,
-  .dot3,
-  .dot4 {
+  .dot-1,
+  .dot-2,
+  .dot-3,
+  .dot-4 {
     background-color: @theme;
   }
 }
 
-@sizeSelectors: small, large;
+@sizeSelectors: mini, small, large;
 @selectors: @danger-color, @warning-color, @success-color, @primary-color;
 @themeSelectors: {
   success: @success-color;
@@ -48,24 +54,54 @@
   default: @light-gray;
 };
 
-.bk-loading-wrapper {
+.@{bk-prefix}-loading-wrapper {
   position: static;
   display: inline-block;
   font-size: 0;
+  vertical-align: middle;
     
-  &.bk-nested-loading {
+  &.@{bk-prefix}-nested-loading {
     position: relative;
 
-    .bk-loading-indicator {
+    .@{bk-prefix}-loading-indicator {
       position: absolute;
       top: 50%;
       left: 50%;
       z-index: 4;
+      text-align: center;
       transform: translate(-50%, -50%);
     }
   }
 
-  .bk-loading-mask {
+  .dot {
+    display: inline-block;
+    width: @dotSize;
+    height: @dotSize;
+    margin-right: @dotGap;
+    border-radius: 50%;
+    transform: scale(.6);
+    animation-duration: .8s;
+    animation-iteration-count: infinite;
+    animation-name: loading-scale-animate;
+    animation-direction: normal;
+  }
+
+  .oval {
+    position: absolute;
+    width: @ovalWidth;
+    height: @ovalHeight;
+    background-color: @default-color;
+    border-radius: @ovalHeight;
+    animation-duration: 1.2s;
+    animation-iteration-count: infinite;
+    animation-name: fade;
+    transform-origin: center @ovalGap;
+    animation-direction: normal;
+  }
+
+  .@{bk-prefix}-loading-mask {
+    width: 100%;
+    height: 100%;
     opacity: .5;
 
     &::after {
@@ -82,16 +118,20 @@
     }
   }
 
-  .bk-loading-indicator {
-    font-size: @font-size-medium;
-
+  .@{bk-prefix}-loading-indicator {
+    text-align: center;
+    each(@themeSelectors, {
+      &.@{bk-prefix}-loading-@{key} {
+        .loading-theme(@value);
+      }
+    })
     
-    each(@selectors, {
+      each(@selectors, {
       .dot-@{index} {
         background-color: @value;
         animation-delay: .1s + (@index - 1) * .15;
         & when (@index = 4) {
-          margin-right: 0;
+          margin-right: 0px;
         }
       }
     });
@@ -102,15 +142,12 @@
       }
     });
     
-    each(@themeSelectors, {
-      &.bk-loading-@{key} {
-        .loading-theme(@value);
-      }
-    })
     
   ;
 
-    .bk-spin-indicator {
+    .@{bk-prefix}-spin-indicator {
+      display: inline-block;
+      width: 2 * @ovalGap;
       height: 2 * @ovalGap;
     }
 
@@ -121,9 +158,10 @@
     @sizedOvalHeight: '@{value}OvalHeight';
     @sizedOvalGap: '@{value}OvalGap';
   
-    &.bk-loading-size-@{value} {
-      .bk-spin-indicator  {
+    &.@{bk-prefix}-loading-size-@{value} {
+      .@{bk-prefix}-spin-indicator  {
         height: 2 * @@sizedOvalGap;
+        width: 2 * @@sizedOvalGap;
       }
       .dot {
         width: @@sizedDotSize;
@@ -139,13 +177,13 @@
         border-radius: @@sizedOvalHeight;
         transform-origin: center @@sizedOvalGap;
       }
-      .bk-loading-title {
+      .@{bk-prefix}-loading-title {
         font-size: if(@value = small, @font-size-base, @font-size-medium);
       }
     } 
   })
 
-    .bk-loading-title {
+    .@{bk-prefix}-loading-title {
       margin-top: @titleMarginTop;
       font-size: @font-size-medium;
       line-height: normal;
@@ -153,29 +191,6 @@
       text-align: center;
     }
     
-    .dot {
-      display: inline-block;
-      width: @dotSize;
-      height: @dotSize;
-      margin-right: @dotGap;
-      border-radius: 50%;
-      transform: scale(.6);
-      animation-duration: .8s;
-      animation-iteration-count: infinite;
-      animation-name: loading-scale-animate;
-      animation-direction: normal;
-    }
-
-    .oval {
-      position: absolute;
-      width: @ovalWidth;
-      height: @ovalHeight;
-      background-color: @default-color;
-      border-radius: @ovalHeight;
-      animation-duration: 1.2s;
-      animation-iteration-count: infinite;
-      animation-name: fade;
-      transform-origin: center @ovalGap;
-      animation-direction: normal;
-    }}
+    
+  }
 }

package/lib/loading/loading.variable.css

@@ -1,10 +1,12 @@
 :root {
   --bk-prefix: bk;
+  --popover-max-height: 216px;
   --primary-color: #3a84ff;
   --success-color: #2dcb56;
   --warning-color: #ff9c01;
   --danger-color: #ea3636;
   --default-color: #63656e;
+  --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
   --disable-color: #dcdee5;
@@ -58,6 +60,36 @@
   --link-success-disabled-color: #94f5a4;
   --link-warning-disabled-color: #ffd695;
   --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
 }
 @keyframes loading-scale-animate {
   0% {
@@ -84,6 +116,7 @@
   position: static;
   display: inline-block;
   font-size: 0;
+  vertical-align: middle;
 }
 .bk-loading-wrapper.bk-nested-loading {
   position: relative;
@@ -93,9 +126,36 @@
   top: 50%;
   left: 50%;
   z-index: 4;
+  text-align: center;
   transform: translate(-50%, -50%);
 }
+.bk-loading-wrapper .dot {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: 10px;
+  border-radius: 50%;
+  transform: scale(0.6);
+  animation-duration: 0.8s;
+  animation-iteration-count: infinite;
+  animation-name: loading-scale-animate;
+  animation-direction: normal;
+}
+.bk-loading-wrapper .oval {
+  position: absolute;
+  width: 6px;
+  height: 8px;
+  background-color: var(--default-color);
+  border-radius: 8px;
+  animation-duration: 1.2s;
+  animation-iteration-count: infinite;
+  animation-name: fade;
+  transform-origin: center 20px;
+  animation-direction: normal;
+}
 .bk-loading-wrapper .bk-loading-mask {
+  width: 100%;
+  height: 100%;
   opacity: 0.5;
 }
 .bk-loading-wrapper .bk-loading-mask::after {
@@ -111,7 +171,55 @@
   content: '';
 }
 .bk-loading-wrapper .bk-loading-indicator {
-  font-size: var(--font-size-medium);
+  text-align: center;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-4 {
+  background-color: var(--success-color);
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-4 {
+  background-color: var(--danger-color);
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-4 {
+  background-color: var(--warning-color);
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-4 {
+  background-color: var(--primary-color);
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-4 {
+  background-color: var(--white-color);
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-4 {
+  background-color: var(--light-gray);
 }
 .bk-loading-wrapper .bk-loading-indicator .dot-1 {
   background-color: var(--danger-color);
@@ -128,7 +236,7 @@
 .bk-loading-wrapper .bk-loading-indicator .dot-4 {
   background-color: var(--primary-color);
   animation-delay: 0.55s;
-  margin-right: 0;
+  margin-right: 0px;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-1 {
   transform: rotate(-135deg);
@@ -162,59 +270,35 @@
   transform: rotate(180deg);
   animation-delay: 1.65s;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot4 {
-  background-color: var(--success-color);
+.bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot4 {
-  background-color: var(--danger-color);
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-spin-indicator {
+  height: 16px;
+  width: 16px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot4 {
-  background-color: var(--warning-color);
-}
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot4 {
-  background-color: var(--primary-color);
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot {
+  width: 3px;
+  height: 3px;
+  margin-right: 3px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot4 {
-  background-color: var(--white-color);
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot.dot-4 {
+  margin-right: 0;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot4 {
-  background-color: var(--light-gray);
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .oval {
+  width: 2px;
+  height: 3px;
+  border-radius: 3px;
+  transform-origin: center 8px;
 }
-.bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
-  height: 40px;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-loading-title {
+  font-size: var(--font-size-medium);
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .bk-spin-indicator {
   height: 22px;
+  width: 22px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .dot {
   width: 6px;
@@ -235,6 +319,7 @@
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .bk-spin-indicator {
   height: 52px;
+  width: 52px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .dot {
   width: 20px;
@@ -260,27 +345,3 @@
   color: var(--default-color);
   text-align: center;
 }
-.bk-loading-wrapper .bk-loading-indicator .dot {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  margin-right: 10px;
-  border-radius: 50%;
-  transform: scale(0.6);
-  animation-duration: 0.8s;
-  animation-iteration-count: infinite;
-  animation-name: loading-scale-animate;
-  animation-direction: normal;
-}
-.bk-loading-wrapper .bk-loading-indicator .oval {
-  position: absolute;
-  width: 6px;
-  height: 8px;
-  background-color: var(--default-color);
-  border-radius: 8px;
-  animation-duration: 1.2s;
-  animation-iteration-count: infinite;
-  animation-name: fade;
-  transform-origin: center 20px;
-  animation-direction: normal;
-}

package/lib/menu/index.d.ts

@@ -0,0 +1,188 @@
+declare const BkMenu: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            collapse: boolean;
+            mode: "vertical";
+            uniqueOpen: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            activeKey: StringConstructor;
+            collapse: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            OpenedKeys: {
+                type: import("vue").PropType<string[]>;
+            };
+            mode: {
+                type: import("vue").PropType<"vertical">;
+                default: string;
+            };
+            uniqueOpen: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & {
+            onClick?: (...args: any[]) => any;
+            "onUpdate:activeKey"?: (...args: any[]) => any;
+            "onUpdate:openKeys"?: (...args: any[]) => any;
+            onOpenChange?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "collapse" | "mode" | "uniqueOpen">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $emit: (event: "click" | "update:activeKey" | "update:openKeys" | "openChange", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            activeKey: StringConstructor;
+            collapse: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            OpenedKeys: {
+                type: import("vue").PropType<string[]>;
+            };
+            mode: {
+                type: import("vue").PropType<"vertical">;
+                default: string;
+            };
+            uniqueOpen: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & {
+            onClick?: (...args: any[]) => any;
+            "onUpdate:activeKey"?: (...args: any[]) => any;
+            "onUpdate:openKeys"?: (...args: any[]) => any;
+            onOpenChange?: (...args: any[]) => any;
+        }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:activeKey" | "update:openKeys" | "openChange")[], string, {
+            collapse: boolean;
+            mode: "vertical";
+            uniqueOpen: boolean;
+        }> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        activeKey: StringConstructor;
+        collapse: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        OpenedKeys: {
+            type: import("vue").PropType<string[]>;
+        };
+        mode: {
+            type: import("vue").PropType<"vertical">;
+            default: string;
+        };
+        uniqueOpen: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & {
+        onClick?: (...args: any[]) => any;
+        "onUpdate:activeKey"?: (...args: any[]) => any;
+        "onUpdate:openKeys"?: (...args: any[]) => any;
+        onOpenChange?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    activeKey: StringConstructor;
+    collapse: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    OpenedKeys: {
+        type: import("vue").PropType<string[]>;
+    };
+    mode: {
+        type: import("vue").PropType<"vertical">;
+        default: string;
+    };
+    uniqueOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClick?: (...args: any[]) => any;
+    "onUpdate:activeKey"?: (...args: any[]) => any;
+    "onUpdate:openKeys"?: (...args: any[]) => any;
+    onOpenChange?: (...args: any[]) => any;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:activeKey" | "update:openKeys" | "openChange")[], "click" | "update:activeKey" | "update:openKeys" | "openChange", {
+    collapse: boolean;
+    mode: "vertical";
+    uniqueOpen: boolean;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin & Readonly<{
+    Item: import("vue").DefineComponent<{
+        needIcon: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        needIcon: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & {
+        onClick?: (...args: any[]) => any;
+    }, {
+        needIcon: boolean;
+    }>;
+    Submenu: import("vue").DefineComponent<{
+        title: {
+            type: StringConstructor;
+            default: string;
+        };
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "collapse"[], "collapse", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        title: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & {
+        onCollapse?: (...args: any[]) => any;
+    }, {
+        title: string;
+    }>;
+    Group: import("vue").DefineComponent<{
+        name: {
+            type: StringConstructor;
+            default: string;
+        };
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>>, {
+        name: string;
+    }>;
+}>;
+export default BkMenu;

package/lib/menu/index.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("../shared"),require("vue"),require("../icon/")):"function"==typeof define&&define.amd?define(["exports","../shared","vue","../icon/"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Shared,e.Vue,e._)}(this,(function(e,t,n,o){"use strict";function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var l={exports:{}};!function(e){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},e.exports.__esModule=!0,e.exports.default=e.exports}(l);var a=r(l.exports),u={exports:{}},i={exports:{}},s={exports:{}};!function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o},e.exports.__esModule=!0,e.exports.default=e.exports}(s),function(e){var t=s.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(i);var c={exports:{}};!function(e){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(c);var p={exports:{}};!function(e){var t=s.exports;e.exports=function(e,n){if(e){if("string"==typeof e)return t(e,n);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(e,n):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports}(p);var d={exports:{}};!function(e){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports}(d),function(e){var t=i.exports,n=c.exports,o=p.exports,r=d.exports;e.exports=function(e){return t(e)||n(e)||o(e)||r()},e.exports.__esModule=!0,e.exports.default=e.exports}(u);var f=r(u.exports),v=Symbol("MENU_PROVIDER_KEY"),y=Symbol("MENU_PROVIDER_KEY_PATH"),m=function(){return n.inject(v)},h=function(){var e,t=n.getCurrentInstance(),o=t.parent?t.parent.provides:null===(e=t.vnode.appContext)||void 0===e?void 0:e.provides;return o&&y in o?n.inject(y):{parentInfo:void 0,parentKeys:n.ref([])}},x=function(e){return(e||"").split(" ").filter((function(e){return!!e.trim()}))};function g(e,t){if(e&&t){var n=x(t),o=e.getAttribute("class")||"";if(e.classList){var r;(r=e.classList).remove.apply(r,f(n))}else{n.forEach((function(e){o=o.replace(" ".concat(e," ")," ")}));var l=x(o).join(" ");e.setAttribute("class",l)}}}function b(e,t){if(e){var n,o=e.getAttribute("class")||"",r=x(o),l=(t||"").split(" ").filter((function(e){return!r.includes(e)&&!!e.trim()}));if(e.classList)(n=e.classList).add.apply(n,f(l));else o+=" ".concat(l.join(" ")),e.setAttribute("class",o)}}var I={activeKey:String,collapse:{type:Boolean,default:!1},OpenedKeys:{type:Array},mode:{type:String,default:"vertical"},uniqueOpen:{type:Boolean,default:!0}},_=n.defineComponent({name:"Menu",props:I,emits:["update:activeKey","update:openKeys","click","openChange"],setup:function(e,t){var o=t.slots,r=t.emit,l=n.ref(""),u=n.ref([]),i=n.ref({}),s=n.computed((function(){return e.mode})),c=n.ref(e.collapse),p=n.ref([]);n.watch((function(){return e.OpenedKeys}),(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:u.value;u.value=e}),{immediate:!0}),n.watchEffect((function(){void 0!==e.activeKey&&(l.value=e.activeKey)})),n.watch((function(){return e.collapse}),(function(){c.value=e.collapse;var t=f(p.value),n=f(u.value);u.value=c.value?[]:t,p.value=c.value?n:[]}),{immediate:!0});var d;return d={activeKey:l,menuStore:i,registerMenuInfo:function(e,t){i.value=Object.assign(Object.assign({},i.value),a({},e,t))},unregisterMenuInfo:function(e){delete i.value[e],i.value=Object.assign({},i.value)},mode:s.value,openedKeys:u,collapse:c,handleOpenChange:function(t,n){n?e.uniqueOpen?u.value=[t]:u.value.push(t):u.value=u.value.filter((function(e){return e!==t})),r("openChange",n,i.value[t]),r("update:openKeys",f(u.value))},handleActiveChange:function(e){l.value=e,r("click",i.value[e]),r("update:activeKey",e,i.value[e])}},n.provide(v,d),function(){var e;return n.createVNode("div",{class:{"bk-menu":!0,"is-collapse":c.value}},[null===(e=null==o?void 0:o.default)||void 0===e?void 0:e.call(o)])}}}),w=n.defineComponent({name:"MenuGroup",props:{name:{type:String,default:""}},setup:function(e,t){var o=t.slots;return function(){var t;return n.createVNode("div",{class:"bk-menu-group"},[n.createVNode("div",{class:"group-name"},[e.name]),n.createVNode("ul",{class:"group-wrap"},[null===(t=o.default)||void 0===t?void 0:t.call(o)])])}}}),K=n.defineComponent({name:"MenuItem",props:{needIcon:{type:Boolean,default:!0}},emits:["click"],slots:["icon"],setup:function(e,t){var o,r,l=t.slots,a=t.emit,u=m(),i=u.registerMenuInfo,s=u.unregisterMenuInfo,c=u.activeKey,p=u.handleActiveChange,d=n.getCurrentInstance(),f=h().parentInfo,v=(null===(r=null===(o=d.vnode.key)||void 0===o?void 0:o.toString)||void 0===r?void 0:r.call(o))||String(d.uid),y=n.computed((function(){return c.value===v})),x=n.computed((function(){return e.needIcon}));i(v,{key:v,parentKey:null==f?void 0:f.key});var g=function(e){p(v),a("click",e)};return n.onBeforeUnmount((function(){return s(v)})),function(){var e,t;return n.createVNode("li",{class:{"bk-menu-item":!0,"is-active":y.value},onClick:g},[x.value&&n.createVNode("span",{class:"item-icon"},[(null===(e=null==l?void 0:l.icon)||void 0===e?void 0:e.call(l))||n.createVNode("i",{class:"default-icon"},null)]),n.createVNode("span",{class:"item-content"},[null===(t=l.default)||void 0===t?void 0:t.call(l)])])}}}),S={title:{type:String,default:"title"}},M=n.defineComponent({name:"Submenu",props:S,emits:["collapse"],slots:["icon"],setup:function(e,t){var r,l,a=t.slots,u=t.emit,i=m(),s=i.registerMenuInfo,c=i.unregisterMenuInfo,p=i.openedKeys,d=i.handleOpenChange,v=i.collapse,x=i.activeKey,I=i.menuStore,_=h().parentInfo,w=n.getCurrentInstance(),K=(null===(l=null===(r=w.vnode.key)||void 0===r?void 0:r.toString)||void 0===l?void 0:l.call(r))||String(w.uid),S=n.ref({css:!0,onBeforeEnter:function(e){b(e,"collapse-transition"),e.dataset||(e.dataset={}),e.style.height="0px",e.style.maxHeight="0px"},onEnter:function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?(e.style.height="".concat(e.scrollHeight,"px"),e.style.maxHeight="".concat(e.scrollHeight,"px")):(e.style.height="0px",e.style.maxHeight="0px"),e.style.overflow="hidden"},onAfterEnter:function(e){e.style.height="",e.style.maxHeight="",e.style.overflow=e.dataset.oldOverflow,g(e,"collapse-transition")},onBeforeLeave:function(e){e.dataset||(e.dataset={}),e.dataset.oldOverflow=e.style.overflow,e.style.height="".concat(e.scrollHeight,"px"),e.style.maxHeight="".concat(e.scrollHeight,"px"),e.style.overflow="hidden"},onLeave:function(e){0!==e.scrollHeight&&(b(e,"collapse-transition"),e.style.transitionProperty="height",e.style.height="0px",e.style.maxHeight="0px")},onAfterLeave:function(e){g(e,"collapse-transition"),e.style.height="",e.style.maxHeight="",e.style.overflow=e.dataset.oldOverflow}}),M=n.computed((function(){return p.value.includes(K)})),O=n.computed((function(){var e,t,n=null===(t=null===(e=I.value)||void 0===e?void 0:e[x.value])||void 0===t?void 0:t.parentKey;return v.value&&n===K&&M}));!function(e){var t=h(),o=t.parentKeys,r=t.parentInfo,l=n.computed((function(){return[].concat(f(o.value),[e])}));n.provide(y,{parentInfo:{key:e,parentKey:null==r?void 0:r.key},parentKeys:l})}(K),s(K,{key:K,parentKey:null==_?void 0:_.key}),n.onBeforeUnmount((function(){return c(K)}));var V=function(){d(K,!M.value),u("collapse",!M.value,w)};return function(){var t,r;return n.createVNode("li",{class:{"bk-menu-submenu":!0,"is-opened":M.value}},[n.createVNode("div",{class:{"submenu-header":!0,"is-collapse":O.value},onClick:V},[n.createVNode("span",{class:"submenu-header-icon"},[(null===(t=a.icon)||void 0===t?void 0:t.call(a))||n.createVNode(o.TreeApplicationShape,{class:"menu-icon"},null)]),n.createVNode("span",{class:"submenu-header-content"},[e.title]),n.createVNode(o.AngleDown,{class:{"submenu-header-collapse":!0,"is-collapse":p.value.includes(K)}},null)]),n.createVNode(n.Transition,S.value,{default:function(){return[n.withDirectives(n.createVNode("ul",{class:"submenu-list"},[null===(r=a.default)||void 0===r?void 0:r.call(a)]),[[n.vShow,M.value]])]}})])}}}),O=t.withInstallProps(_,{Item:K,Submenu:M,Group:w});e.default=O,Object.defineProperty(e,"__esModule",{value:!0})}));