bkui-vue 0.0.1-beta.41 → 0.0.1-beta.411

package/lib/loading/loading.variable.css

@@ -9,6 +9,7 @@
   --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
+  --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
@@ -18,10 +19,11 @@
   --line-height-large: 18px;
   --component-size-small: 26px;
   --component-size-base: 32px;
-  --component-size-large: 38px;
+  --component-size-large: 40px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
   --input-disabled-bg: #fafbfd;
   --input-disabled-border: var(--disable-color);
   --input-height-base: var(--component-size-base);
@@ -31,8 +33,9 @@
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
   --input-horizontal-padding: 10px;
-  --input-block-color: #f4f6fa;
-  --input-icon-size: var(--font-size-large);
+  --input-block-color: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
   --input-maxlength-color: #979ba5;
   --button-primary-hover-color: #5594fa;
   --button-danger-hover-color: #ff5656;
@@ -43,6 +46,15 @@
   --button-danger-active-color: #db2626;
   --button-success-active-color: #1ab943;
   --button-warning-active-color: #eb9000;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #5594fa;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6cc;
+  --radio-distable-checked-bg: #fafbfd;
+  --radio-button-checked-bg: #e1ecff;
   --fixed-navbar-background: #fff;
   --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
   --switch-default-color: #fff;
@@ -63,12 +75,16 @@
   --message-color: var(--default-color);
   --message-primary-bg-color: #f0f8ff;
   --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
   --message-warning-bg-color: #fff4e2;
   --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
   --message-success-bg-color: #f2fff4;
   --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
   --message-danger-bg-color: #ffeded;
   --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
   --slider-default-bg: #dcdee5;
   --slider-disable-bar-bg: #979ba5;
   --menu-bg-color: #182132;
@@ -90,6 +106,17 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #f5f7fa;
+  --cascader-panel-active: #e1ecff;
+  --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
+  --search-select-menu-border-color: var(--disable-color);
 }
 @keyframes loading-scale-animate {
   0% {
@@ -112,13 +139,63 @@
 .bk-fade-transtion .bk-fade-leave-to {
   opacity: 0;
 }
+.clearfix-style::after {
+  display: block;
+  height: 0;
+  clear: both;
+  font-size: 0;
+  content: '';
+  visibility: hidden;
+}
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0 0 6px 0;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
+}
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
+}
 .bk-loading-wrapper {
   position: static;
-  font-size: 0;
   vertical-align: middle;
 }
 .bk-loading-wrapper:not(.bk-nested-loading) {
-  display: inline-block;
+  display: inline-flex;
 }
 .bk-loading-wrapper.bk-nested-loading {
   position: relative;
@@ -130,12 +207,12 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  z-index: 4;
+  z-index: 11;
   text-align: center;
   transform: translate(-50%, -50%);
 }
 .bk-loading-wrapper .dot {
-  display: inline-block;
+  display: inline-flex;
   width: 14px;
   height: 14px;
   margin-right: 10px;
@@ -150,35 +227,23 @@
   position: absolute;
   width: 6px;
   height: 8px;
-  background-color: var(--default-color);
+  background-color: #63656e;
   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 {
   position: absolute;
   width: 100%;
   height: 100%;
-  opacity: 0.5;
-}
-.bk-loading-wrapper .bk-loading-mask::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.8);
-  content: '';
 }
 .bk-loading-wrapper .bk-loading-indicator {
+  display: flex;
   line-height: 1;
   text-align: center;
+  flex-direction: column;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
@@ -186,7 +251,7 @@
 .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);
+  background-color: #2dcb56;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
@@ -194,7 +259,7 @@
 .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);
+  background-color: #ea3636;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
@@ -202,7 +267,7 @@
 .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);
+  background-color: #ff9c01;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
@@ -210,7 +275,7 @@
 .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);
+  background-color: #3a84ff;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
@@ -218,7 +283,7 @@
 .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);
+  background-color: white;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
@@ -226,59 +291,65 @@
 .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);
+  background-color: #c4c6cc;
 }
 .bk-loading-wrapper .bk-loading-indicator .dot-1 {
-  background-color: var(--danger-color);
+  background-color: #ea3636;
   animation-delay: 0.1s;
 }
 .bk-loading-wrapper .bk-loading-indicator .dot-2 {
-  background-color: var(--warning-color);
+  background-color: #ff9c01;
   animation-delay: 0.25s;
 }
 .bk-loading-wrapper .bk-loading-indicator .dot-3 {
-  background-color: var(--success-color);
+  background-color: #2dcb56;
   animation-delay: 0.4s;
 }
 .bk-loading-wrapper .bk-loading-indicator .dot-4 {
-  background-color: var(--primary-color);
+  background-color: #3a84ff;
   animation-delay: 0.55s;
   margin-right: 0px;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-1 {
-  transform: rotate(-135deg);
-  animation-delay: 0.6s;
+  transform: rotate(135deg);
+  animation-delay: -0.45s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-2 {
-  transform: rotate(-90deg);
-  animation-delay: 0.75s;
+  transform: rotate(90deg);
+  animation-delay: -0.6s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-3 {
-  transform: rotate(-45deg);
-  animation-delay: 0.9s;
+  transform: rotate(45deg);
+  animation-delay: -0.75s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-4 {
   transform: rotate(0deg);
-  animation-delay: 1.05s;
+  animation-delay: -0.9s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-5 {
-  transform: rotate(45deg);
-  animation-delay: 1.2s;
+  transform: rotate(-45deg);
+  animation-delay: -1.05s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-6 {
-  transform: rotate(90deg);
-  animation-delay: 1.35s;
+  transform: rotate(-90deg);
+  animation-delay: -1.2s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-7 {
-  transform: rotate(135deg);
-  animation-delay: 1.5s;
+  transform: rotate(-135deg);
+  animation-delay: -1.35s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-8 {
-  transform: rotate(180deg);
-  animation-delay: 1.65s;
+  transform: rotate(-180deg);
+  animation-delay: -1.5s;
+}
+.bk-loading-wrapper .bk-loading-indicator .bk-normal-indicator {
+  display: inline-flex;
+  justify-content: center;
 }
 .bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
-  display: inline-block;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
   width: 40px;
   height: 40px;
 }
@@ -301,7 +372,7 @@
   transform-origin: center 8px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-loading-title {
-  font-size: var(--font-size-medium);
+  font-size: 14px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .bk-spin-indicator {
   height: 22px;
@@ -322,7 +393,7 @@
   transform-origin: center 11px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .bk-loading-title {
-  font-size: var(--font-size-base);
+  font-size: 12px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .bk-spin-indicator {
   height: 52px;
@@ -343,12 +414,12 @@
   transform-origin: center 26px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .bk-loading-title {
-  font-size: var(--font-size-medium);
+  font-size: 14px;
 }
 .bk-loading-wrapper .bk-loading-indicator .bk-loading-title {
   margin-top: 8px;
-  font-size: var(--font-size-medium);
+  font-size: 14px;
   line-height: normal;
-  color: var(--default-color);
+  color: #63656e;
   text-align: center;
 }

package/lib/locale/index.d.ts

@@ -0,0 +1,3 @@
+export { default as en } from './lang/en';
+export { default as zhCn } from './lang/zh-cn';
+export type { Language } from './lang/en';

package/lib/locale/index.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var l=t();for(var a in l)("object"==typeof exports?exports:e)[a]=l[a]}}(self,(()=>(()=>{"use strict";var e={d:(t,l)=>{for(var a in l)e.o(l,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:l[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{en:()=>l,zhCn:()=>a});const l={lang:"en",steps:{step1:"step1",step2:"step2",step3:"step3"},datePicker:{selectDate:"Select Date",selectTime:"Select Time",clear:"Clear",ok:"OK",weekdays:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},hour:"Hour",min:"Minute",sec:"Second",toNow:"Now"},dialog:{ok:"OK",cancel:"Cancel",prev:"prev",next:"next"},form:{notBeEmpty:"cannot be empty",incorrectFormat:"incorrect format",max:"maximum value",min:"minimum value",maxLen:"maximum length",verifyError:"verify error"},pagination:{eachPage:"Each Page",strip:"",total:"Total"},process:{step1:"step1",step2:"step2",step3:"step3",step4:"step4"},searchSelect:{pleaseSelect:"Please Select",loading:"Loading...",filterQueryMustHasValue:"Filter query containing key value must have value",ok:"OK",cancel:"Cancel",or:"Or",and:"And"},select:{noData:"No data",noMatchedData:"No matched data",loading:"Loading...",pleaseSelect:"Please select",enterKeywords:"Please enter keywords",all:"All"},table:{emptyText:"No Data",confirm:"Confirm",reset:"Reset",setting:{title:"Table Settings",fields:{title:"Displaying Fields Setting",subtitle:function(e){return"（".concat(e," fields most）")},selectAll:"All"},lineHeight:{title:"Table Line Height",small:"small",medium:"medium",large:"large"},options:{ok:"OK",cancel:"Cancel"}}},transfer:{sourceList:"Source List",targetList:"Target List",removeAll:"Remove All",selectAll:"Select All",noData:"No Data",noSelected:"No Selected",search:"Search"},upload:{uploadSuccess:"Upload Success",uploadFailed:"Upload Failed",drapFileOr:"Drag files here or ",clickUpload:"Click Upload",uploadLabel:"Upload Files"},input:{placeholder:"Please input"},tagInput:{placeholder:"Please input and press ENTER to finish"}},a={lang:"zh-cn",steps:{step1:"步骤1",step2:"步骤2",step3:"步骤3"},datePicker:{selectDate:"选择日期",selectTime:"选择时间",clear:"清除",ok:"确定",weekdays:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},hour:"时",min:"分",sec:"秒",toNow:"至今"},dialog:{ok:"确定",cancel:"取消",prev:"上一步",next:"下一步"},form:{notBeEmpty:"不能为空",incorrectFormat:"格式不正确",max:"最大值",min:"最小值",maxLen:"最大长度",verifyError:"验证错误"},pagination:{eachPage:"每页",strip:"条",total:"共计"},process:{step1:"步骤1",step2:"步骤2",step3:"步骤3",step4:"步骤4"},searchSelect:{pleaseSelect:"请选择",loading:"加载中...",filterQueryMustHasValue:"包含键值的过滤查询必须有一个值",ok:"确认",cancel:"取消",or:"或",and:"且"},select:{noData:"无数据",noMatchedData:"无匹配数据",loading:"加载中...",pleaseSelect:"请选择",enterKeywords:"请输入关键字",all:"全部"},table:{emptyText:"暂无数据",confirm:"确定",reset:"重置",setting:{title:"表格设置",fields:{title:"字段显示设置",subtitle:function(e){return"（最多".concat(e,"项）")},selectAll:"全选"},lineHeight:{title:"表格行高",small:"小",medium:"中",large:"大"},options:{ok:"确认",cancel:"取消"}}},transfer:{sourceList:"源列表",targetList:"目标列表",removeAll:"清空",selectAll:"选择全部",noData:"无数据",noSelected:"未选择任何项",search:"搜索"},upload:{uploadSuccess:"上传成功",uploadFailed:"上传失败",drapFileOr:"将文件拖到此处或",clickUpload:"点击上传",uploadLabel:"上传文件"},input:{placeholder:"请输入"},tagInput:{placeholder:"请输入并按Enter结束"}};return t})()));

package/lib/locale/lang/en.d.ts

@@ -0,0 +1,116 @@
+declare const en: {
+    lang: string;
+    steps: {
+        step1: string;
+        step2: string;
+        step3: string;
+    };
+    datePicker: {
+        selectDate: string;
+        selectTime: string;
+        clear: string;
+        ok: string;
+        weekdays: {
+            sun: string;
+            mon: string;
+            tue: string;
+            wed: string;
+            thu: string;
+            fri: string;
+            sat: string;
+        };
+        hour: string;
+        min: string;
+        sec: string;
+        toNow: string;
+    };
+    dialog: {
+        ok: string;
+        cancel: string;
+        prev: string;
+        next: string;
+    };
+    form: {
+        notBeEmpty: string;
+        incorrectFormat: string;
+        max: string;
+        min: string;
+        maxLen: string;
+        verifyError: string;
+    };
+    pagination: {
+        eachPage: string;
+        strip: string;
+        total: string;
+    };
+    process: {
+        step1: string;
+        step2: string;
+        step3: string;
+        step4: string;
+    };
+    searchSelect: {
+        pleaseSelect: string;
+        loading: string;
+        filterQueryMustHasValue: string;
+        ok: string;
+        cancel: string;
+        or: string;
+        and: string;
+    };
+    select: {
+        noData: string;
+        noMatchedData: string;
+        loading: string;
+        pleaseSelect: string;
+        enterKeywords: string;
+        all: string;
+    };
+    table: {
+        emptyText: string;
+        confirm: string;
+        reset: string;
+        setting: {
+            title: string;
+            fields: {
+                title: string;
+                subtitle: (max: number) => string;
+                selectAll: string;
+            };
+            lineHeight: {
+                title: string;
+                small: string;
+                medium: string;
+                large: string;
+            };
+            options: {
+                ok: string;
+                cancel: string;
+            };
+        };
+    };
+    transfer: {
+        sourceList: string;
+        targetList: string;
+        removeAll: string;
+        selectAll: string;
+        noData: string;
+        noSelected: string;
+        search: string;
+    };
+    upload: {
+        uploadSuccess: string;
+        uploadFailed: string;
+        drapFileOr: string;
+        clickUpload: string;
+        uploadLabel: string;
+    };
+    input: {
+        placeholder: string;
+    };
+    tagInput: {
+        placeholder: string;
+    };
+};
+export declare type Language = typeof en;
+export default en;

package/lib/locale/lang/zh-cn.d.ts

@@ -0,0 +1,3 @@
+import type { Language } from './en';
+declare const zhCn: Language;
+export default zhCn;

package/lib/menu/index.d.ts

@@ -1,18 +1,18 @@
+import Group from './menu-group';
+import Item from './menu-item';
+import Submenu from './submenu';
 declare const BkMenu: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            collapse: boolean;
             mode: "vertical";
+            collapse: boolean;
             uniqueOpen: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             activeKey: StringConstructor;
-            collapse: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            OpenedKeys: {
+            collapse: BooleanConstructor;
+            openedKeys: {
                 type: import("vue").PropType<string[]>;
             };
             mode: {
@@ -28,7 +28,7 @@ declare const BkMenu: {
             "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">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "mode" | "collapse" | "uniqueOpen">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -44,11 +44,8 @@ declare const BkMenu: {
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             activeKey: StringConstructor;
-            collapse: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            OpenedKeys: {
+            collapse: BooleanConstructor;
+            openedKeys: {
                 type: import("vue").PropType<string[]>;
             };
             mode: {
@@ -65,8 +62,8 @@ declare const BkMenu: {
             "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";
+            collapse: boolean;
             uniqueOpen: boolean;
         }> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -90,11 +87,8 @@ declare const BkMenu: {
         $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: {
+        collapse: BooleanConstructor;
+        openedKeys: {
             type: import("vue").PropType<string[]>;
         };
         mode: {
@@ -116,11 +110,8 @@ declare const BkMenu: {
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     activeKey: StringConstructor;
-    collapse: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    OpenedKeys: {
+    collapse: BooleanConstructor;
+    openedKeys: {
         type: import("vue").PropType<string[]>;
     };
     mode: {
@@ -137,8 +128,8 @@ declare const BkMenu: {
     "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";
+    collapse: boolean;
     uniqueOpen: boolean;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin & Readonly<{
     Item: import("vue").DefineComponent<{
@@ -186,3 +177,4 @@ declare const BkMenu: {
     }>;
 }>;
 export default BkMenu;
+export { BkMenu, Item as BkMenuItem, Submenu as BkSubmenu, Group as BkMenuGroup, };

package/lib/menu/index.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../icon/"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../icon/"],t);else{var n="object"==typeof exports?t(require("../shared"),require("vue"),require("../icon/")):t(e["../shared"],e.vue,e["../icon/"]);for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(self,((e,t,n)=>(()=>{"use strict";var o={7685:e=>{e.exports=n},4212:t=>{t.exports=e},748:e=>{e.exports=t}},r={};function a(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={exports:{}};return o[e](n,n.exports,a),n.exports}a.d=(e,t)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{a.r(l),a.d(l,{BkMenu:()=>x,BkMenuGroup:()=>y,BkMenuItem:()=>m,BkSubmenu:()=>b,default:()=>S});var e=a(4212);function t(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}function n(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||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)||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.")}()}var o=a(748),r=Symbol("MENU_PROVIDER_KEY"),i=Symbol("MENU_PROVIDER_KEY_PATH"),u=function(){return(0,o.inject)(r)},c=function(){var e,t=(0,o.getCurrentInstance)(),n=t.parent?t.parent.provides:null===(e=t.vnode.appContext)||void 0===e?void 0:e.provides;return n&&i in n?(0,o.inject)(i):{parentInfo:void 0,parentKeys:(0,o.ref)([])}},s=function(e){return(e||"").split(" ").filter((function(e){return!!e.trim()}))};function d(e,t){if(e&&t){var o=s(t),r=e.getAttribute("class")||"";if(e.classList){var a;(a=e.classList).remove.apply(a,n(o))}else{o.forEach((function(e){r=r.replace(" ".concat(e," ")," ")}));var l=s(r).join(" ");e.setAttribute("class",l)}}}function v(e,t){if(e){var o,r=e.getAttribute("class")||"",a=s(r),l=(t||"").split(" ").filter((function(e){return!a.includes(e)&&!!e.trim()}));e.classList?(o=e.classList).add.apply(o,n(l)):(r+=" ".concat(l.join(" ")),e.setAttribute("class",r))}}var p={activeKey:String,collapse:Boolean,openedKeys:{type:Array},mode:{type:String,default:"vertical"},uniqueOpen:{type:Boolean,default:!0}};const f=(0,o.defineComponent)({name:"Menu",props:p,emits:["update:activeKey","update:openKeys","click","openChange"],setup:function(e,t){var a,l=t.slots,i=t.emit,u=t.expose,c=(0,o.ref)(""),s=(0,o.ref)([]),d=(0,o.ref)({}),v=(0,o.computed)((function(){return e.mode})),p=(0,o.ref)(e.collapse),f=(0,o.ref)([]);return(0,o.watchEffect)((function(){void 0!==e.activeKey&&(c.value=e.activeKey)})),(0,o.watch)((function(){return e.collapse}),(function(){p.value=e.collapse;var t=n(f.value),o=n(s.value);s.value=p.value?[]:t,f.value=p.value?o:[]}),{immediate:!0}),(0,o.watch)((function(){return e.openedKeys}),(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:s.value;s.value=e}),{immediate:!0}),a={activeKey:c,menuStore:d,registerMenuInfo:function(e,t){d.value=Object.assign(Object.assign({},d.value),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,t))},unregisterMenuInfo:function(e){delete d.value[e],d.value=Object.assign({},d.value)},mode:v.value,openedKeys:s,collapse:p,handleOpenChange:function(t,o){o?e.uniqueOpen?s.value=[t]:s.value.push(t):s.value=s.value.filter((function(e){return e!==t})),i("openChange",o,d.value[t]),i("update:openKeys",n(s.value))},handleActiveChange:function(e){c.value=e,i("click",d.value[e]),i("update:activeKey",e,d.value[e])}},(0,o.provide)(r,a),u({activeKey:c,openedKeys:s,menuStore:d}),function(){var e;return(0,o.createVNode)("div",{class:{"bk-menu":!0,"is-collapse":p.value}},[null===(e=l.default)||void 0===e?void 0:e.call(l)])}}}),y=(0,o.defineComponent)({name:"MenuGroup",props:{name:{type:String,default:""}},setup:function(e,t){var n=t.slots;return function(){var t;return(0,o.createVNode)("div",{class:"bk-menu-group"},[(0,o.createVNode)("div",{class:"group-name"},[e.name]),(0,o.createVNode)("ul",{class:"group-wrap"},[null===(t=n.default)||void 0===t?void 0:t.call(n)])])}}}),m=(0,o.defineComponent)({name:"MenuItem",props:{needIcon:{type:Boolean,default:!0}},emits:["click"],slots:["icon"],setup:function(e,t){var n,r,a=t.slots,l=t.emit,i=u(),s=i.registerMenuInfo,d=i.unregisterMenuInfo,v=i.activeKey,p=i.handleActiveChange,f=(0,o.getCurrentInstance)(),y=c().parentInfo,m=(null===(r=null===(n=f.vnode.key)||void 0===n?void 0:n.toString)||void 0===r?void 0:r.call(n))||String(f.uid),g=(0,o.computed)((function(){return v.value===m})),h=(0,o.computed)((function(){return e.needIcon}));s(m,{key:m,parentKey:null==y?void 0:y.key});var b=function(e){p(m),l("click",e)};return(0,o.onBeforeUnmount)((function(){return d(m)})),function(){var e,t;return(0,o.createVNode)("li",{class:{"bk-menu-item":!0,"is-active":g.value},onClick:b},[h.value&&(0,o.createVNode)("span",{class:"item-icon"},[(null===(e=null==a?void 0:a.icon)||void 0===e?void 0:e.call(a))||(0,o.createVNode)("i",{class:"default-icon"},null)]),(0,o.createVNode)("span",{class:"item-content"},[null===(t=a.default)||void 0===t?void 0:t.call(a)])])}}});var g=a(7685),h={title:{type:String,default:"title"}};const b=(0,o.defineComponent)({name:"Submenu",props:h,emits:["collapse"],slots:["icon"],setup:function(e,t){var r,a,l=t.slots,s=t.emit,p=u(),f=p.registerMenuInfo,y=p.unregisterMenuInfo,m=p.openedKeys,h=p.handleOpenChange,b=p.collapse,x=p.activeKey,S=p.menuStore,I=c().parentInfo,K=(0,o.getCurrentInstance)(),w=(null===(a=null===(r=K.vnode.key)||void 0===r?void 0:r.toString)||void 0===a?void 0:a.call(r))||String(K.uid),k=(0,o.ref)({css:!0,onBeforeEnter:function(e){v(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,d(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&&(v(e,"collapse-transition"),e.style.transitionProperty="height",e.style.height="0px",e.style.maxHeight="0px")},onAfterLeave:function(e){d(e,"collapse-transition"),e.style.height="",e.style.maxHeight="",e.style.overflow=e.dataset.oldOverflow}}),O=(0,o.computed)((function(){return m.value.includes(w)})),j=(0,o.computed)((function(){var e,t,n=null===(t=null===(e=S.value)||void 0===e?void 0:e[x.value])||void 0===t?void 0:t.parentKey;return b.value&&n===w&&O}));!function(e){var t=c(),r=t.parentKeys,a=t.parentInfo,l=(0,o.computed)((function(){return[].concat(n(r.value),[e])}));(0,o.provide)(i,{parentInfo:{key:e,parentKey:null==a?void 0:a.key},parentKeys:l})}(w),f(w,{key:w,parentKey:null==I?void 0:I.key}),(0,o.onBeforeUnmount)((function(){return y(w)}));var A=function(){h(w,!O.value),s("collapse",!O.value,K)};return function(){var t,n;return(0,o.createVNode)("li",{class:{"bk-menu-submenu":!0,"is-opened":O.value}},[(0,o.createVNode)("div",{class:{"submenu-header":!0,"is-collapse":j.value},onClick:A},[(0,o.createVNode)("span",{class:"submenu-header-icon"},[(null===(t=l.icon)||void 0===t?void 0:t.call(l))||(0,o.createVNode)(g.TreeApplicationShape,{class:"menu-icon"},null)]),(0,o.createVNode)("span",{class:"submenu-header-content"},[e.title]),(0,o.createVNode)(g.AngleDown,{class:{"submenu-header-collapse":!0,"is-collapse":m.value.includes(w)}},null)]),(0,o.createVNode)(o.Transition,k.value,{default:function(){return[(0,o.withDirectives)((0,o.createVNode)("ul",{class:"submenu-list"},[null===(n=l.default)||void 0===n?void 0:n.call(l)]),[[o.vShow,O.value]])]}})])}}});var x=(0,e.withInstallProps)(f,{Item:m,Submenu:b,Group:y});const S=x})(),l})()));

package/lib/menu/menu.css

@@ -19,6 +19,57 @@
 .bk-fade-transtion .bk-fade-leave-to {
   opacity: 0;
 }
+.clearfix-style::after {
+  display: block;
+  height: 0;
+  clear: both;
+  font-size: 0;
+  content: '';
+  visibility: hidden;
+}
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0 0 6px 0;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
+}
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
+}
 .collapse {
   width: 60px;
 }