bkui-vue 0.0.1-beta.19 → 0.0.1-beta.191

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

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../icon/"),require("../shared")):"function"==typeof define&&define.amd?define(["exports","vue","../icon/","../shared"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e._,e.Shared)}(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 t.inject(v)},h=function(){var e,n=t.getCurrentInstance(),o=n.parent?n.parent.provides:null===(e=n.vnode.appContext)||void 0===e?void 0:e.provides;return o&&y in o?t.inject(y):{parentInfo:void 0,parentKeys:t.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}},_=t.defineComponent({name:"Menu",props:I,emits:["update:activeKey","update:openKeys","click","openChange"],setup:function(e,n){var o=n.slots,r=n.emit,l=t.ref(""),u=t.ref([]),i=t.ref({}),s=t.computed((function(){return e.mode})),c=t.ref(e.collapse),p=t.ref([]);t.watch((function(){return e.OpenedKeys}),(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:u.value;u.value=e}),{immediate:!0}),t.watchEffect((function(){void 0!==e.activeKey&&(l.value=e.activeKey)})),t.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])}},t.provide(v,d),function(){var e;return t.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=t.defineComponent({name:"MenuItem",props:{needIcon:{type:Boolean,default:!0}},emits:["click"],slots:["icon"],setup:function(e,n){var o,r,l=n.slots,a=n.emit,u=m(),i=u.registerMenuInfo,s=u.unregisterMenuInfo,c=u.activeKey,p=u.handleActiveChange,d=t.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=t.computed((function(){return c.value===v})),x=t.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 t.onBeforeUnmount((function(){return s(v)})),function(){var e,n;return t.createVNode("li",{class:{"bk-menu-item":!0,"is-active":y.value},onClick:g},[x.value&&t.createVNode("span",{class:"item-icon"},[(null===(e=null==l?void 0:l.icon)||void 0===e?void 0:e.call(l))||t.createVNode("i",{class:"default-icon"},null)]),t.createVNode("span",{class:"item-content"},[null===(n=l.default)||void 0===n?void 0:n.call(l)])])}}}),K={title:{type:String,default:"title"}},S=t.defineComponent({name:"Submenu",props:K,emits:["collapse"],slots:["icon"],setup:function(e,o){var r,l,a=o.slots,u=o.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=t.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=t.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=t.computed((function(){return p.value.includes(K)})),O=t.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 n=h(),o=n.parentKeys,r=n.parentInfo,l=t.computed((function(){return[].concat(f(o.value),[e])}));t.provide(y,{parentInfo:{key:e,parentKey:null==r?void 0:r.key},parentKeys:l})}(K),s(K,{key:K,parentKey:null==_?void 0:_.key}),t.onBeforeUnmount((function(){return c(K)}));var V=function(){d(K,!M.value),u("collapse",!M.value,w)};return function(){var o,r;return t.createVNode("li",{class:{"bk-menu-submenu":!0,"is-opened":M.value}},[t.createVNode("div",{class:{"submenu-header":!0,"is-collapse":O.value},onClick:V},[t.createVNode("span",{class:"submenu-header-icon"},[(null===(o=a.icon)||void 0===o?void 0:o.call(a))||t.createVNode(n.TreeApplicationShape,{class:"menu-icon"},null)]),t.createVNode("span",{class:"submenu-header-content"},[e.title]),t.createVNode(n.AngleDown,{class:{"submenu-header-collapse":!0,"is-collapse":p.value.includes(K)}},null)]),t.createVNode(t.Transition,S.value,{default:function(){return[t.withDirectives(t.createVNode("ul",{class:"submenu-list"},[null===(r=a.default)||void 0===r?void 0:r.call(a)]),[[t.vShow,M.value]])]}})])}}}),M=t.defineComponent({name:"MenuGroup",props:{name:{type:String,default:""}},setup:function(e,n){var o=n.slots;return function(){var n;return t.createVNode("div",{class:"bk-menu-group"},[t.createVNode("div",{class:"group-name"},[e.name]),t.createVNode("ul",{class:"group-wrap"},[null===(n=o.default)||void 0===n?void 0:n.call(o)])])}}}),O=o.withInstallProps(_,{Item:w,Submenu:S,Group:M});e.default=O,Object.defineProperty(e,"__esModule",{value:!0})}));
+!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,console.info(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 0px 0px 6px 0px;
+}
+.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;
 }

package/lib/menu/menu.d.ts

@@ -1,11 +1,8 @@
 import { PropType } from 'vue';
 export declare const menuProps: {
     activeKey: StringConstructor;
-    collapse: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    OpenedKeys: {
+    collapse: BooleanConstructor;
+    openedKeys: {
         type: PropType<string[]>;
     };
     mode: {
@@ -19,11 +16,8 @@ export declare const menuProps: {
 };
 declare const _default: import("vue").DefineComponent<{
     activeKey: StringConstructor;
-    collapse: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    OpenedKeys: {
+    collapse: BooleanConstructor;
+    openedKeys: {
         type: PropType<string[]>;
     };
     mode: {
@@ -36,11 +30,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:activeKey" | "update:openKeys" | "openChange")[], "click" | "update:activeKey" | "update:openKeys" | "openChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     activeKey: StringConstructor;
-    collapse: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    OpenedKeys: {
+    collapse: BooleanConstructor;
+    openedKeys: {
         type: PropType<string[]>;
     };
     mode: {
@@ -57,8 +48,8 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:openKeys"?: (...args: any[]) => any;
     onOpenChange?: (...args: any[]) => any;
 }, {
-    collapse: boolean;
     mode: "vertical";
+    collapse: boolean;
     uniqueOpen: boolean;
 }>;
 export default _default;

package/lib/menu/menu.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,7 +19,7 @@
   --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;
@@ -31,8 +32,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 +45,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: #c4c6c;
+  --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 +74,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 +105,11 @@
   --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;
 }
 @keyframes loading-scale-animate {
   0% {
@@ -112,6 +132,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 0px 0px 6px 0px;
+}
+.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: var(--menu-collapse-width);
 }

package/lib/menu/submenu.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,7 +19,7 @@
   --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;
@@ -31,8 +32,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 +45,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: #c4c6c;
+  --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 +74,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 +105,11 @@
   --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;
 }
 .bk-menu {
   display: block;

package/lib/menu/utils.d.ts

@@ -1,4 +1,4 @@
-import { Ref, InjectionKey } from 'vue';
+import { InjectionKey, Ref } from 'vue';
 export interface IMenuInfo {
     key: string;
     parentKey: string;

package/lib/message/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("../icon")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../icon"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e["@bkui-vue/icon/icons"])}(this,(function(e,t,n,o){"use strict";var s={"top-left":[],"top-right":[],"bottom-left":[],"bottom-right":[]},r=1,a=function(e,n){var o=n,a=o.position||"top-right";"string"==typeof n&&(o={message:n});var i=n.onClose,c=o.offset||20;s[a].forEach((function(e){c+=(e.el.offsetHeight||0)+16})),c+=16;var u="message_".concat(r+=1);o=Object.assign(Object.assign({},o),{offset:c,id:u});var l=document.createElement("div"),d=t.createVNode(e,o);d.props.onDestory=function(e){!function(e,t,n){null==n||n();var o=t.startsWith("top")?"top":"bottom",r=-1;s[t].forEach((function(t,n){t.props.id===e&&(r=n)}));for(var a=s[t][r].el.offsetHeight,i=s[t].length,c=r;c<i;c++){var u=parseInt(s[t][c].el.style[o],10)-a-16;s[t][c].component.props.offset=u}s[t].splice(r,1)}(e,a,i),t.render(null,l)},t.render(d,l),s[a].push(d),document.body.appendChild(l.firstElementChild)};var i={id:n.PropTypes.string.def(""),message:n.PropTypes.string.def(""),theme:n.PropTypes.theme(["primary","warning","success","danger"]).def("primary"),delay:n.PropTypes.number.def(3e3),offset:n.PropTypes.number.def(0),onClose:n.PropTypes.func},c=t.defineComponent({name:"Message",props:i,emits:["destory"],setup:function(e,o){var s=o.emit,r=t.computed((function(){return["bk-message","bk-message-".concat(e.theme)]})),a=n.bkZIndexManager.getMessageNextIndex(),i=t.computed((function(){return{top:"".concat(e.offset,"px"),zIndex:a}})),c=t.ref(!1),u=null;return t.onMounted((function(){u=setTimeout((function(){c.value=!1}),e.delay),c.value=!0})),t.onUnmounted((function(){clearTimeout(u)})),t.watch(c,(function(){c.value||s("destory",e.id)})),{classNames:r,styles:i,visible:c,handleClose:function(){c.value=!1}}},render:function(){var e=this;return t.createVNode(t.Transition,{name:"bk-message-fade"},{default:function(){return[t.withDirectives(t.createVNode("div",{class:e.classNames,style:e.styles},[t.createVNode("div",{class:"bk-message-content"},[t.createVNode("div",{class:"bk-message-icon"},[{primary:t.createVNode(o.Info,null,null),warning:t.createVNode(o.Warn,null,null),success:t.createVNode(o.Success,null,null),danger:t.createVNode(o.Close,null,null)}[e.theme]]),e.message]),t.createVNode(o.Error,{class:"bk-message-icon bk-message-close",onClick:e.handleClose},null)]),[[t.vShow,e.visible]])]}})}});e.default=function(e){a(c,e)},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"),require("../shared"),require("../icon"));else if("function"==typeof define&&define.amd)define(["vue","../shared","../icon"],t);else{var o="object"==typeof exports?t(require("vue"),require("../shared"),require("../icon")):t(e.vue,e["../shared"],e["../icon"]);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(self,((e,t,o)=>(()=>{"use strict";var r={6870:e=>{e.exports=o},4212:e=>{e.exports=t},748:t=>{t.exports=e}},n={};function s(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={exports:{}};return r[e](o,o.exports,s),o.exports}s.d=(e,t)=>{for(var o in t)s.o(t,o)&&!s.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{s.r(i),s.d(i,{default:()=>l});var e=s(748),t=s(4212),o={"top-left":[],"top-right":[],"bottom-left":[],"bottom-right":[]},r=1;var n=s(6870),a={id:t.PropTypes.string.def(""),message:t.PropTypes.string.def(""),theme:t.PropTypes.theme(["primary","warning","success","error"]).def("primary"),delay:t.PropTypes.number.def(3e3),dismissable:t.PropTypes.bool.def(!0),offsetY:t.PropTypes.number.def(30),spacing:t.PropTypes.number.def(10),extCls:t.PropTypes.string.def(""),onClose:t.PropTypes.func,getContainer:t.PropTypes.instanceOf(HTMLElement)};const c=(0,e.defineComponent)({name:"Message",props:a,emits:["destroy"],setup:function(o,r){var n=r.emit,s=(0,e.computed)((function(){return["bk-message","bk-message-".concat(o.theme),"".concat(o.extCls)]})),i=t.bkZIndexManager.getMessageNextIndex(),a=(0,e.computed)((function(){return o.getContainer&&(0,t.isElement)(o.getContainer)})),c=(0,e.computed)((function(){return{top:"".concat(o.offsetY,"px"),zIndex:i,position:a.value?"absolute":"fixed"}})),l=(0,e.ref)(!1),p=null;return(0,e.onMounted)((function(){o.delay&&(p=setTimeout((function(){l.value=!1}),o.delay)),l.value=!0})),(0,e.onUnmounted)((function(){clearTimeout(p)})),(0,e.watch)(l,(function(){l.value||n("destroy",o.id)})),{classNames:s,styles:c,visible:l,close:function(e){e.preventDefault(),e.stopPropagation(),l.value=!1}}},render:function(){var t=this;return(0,e.createVNode)(e.Transition,{name:"bk-message-fade"},{default:function(){return[(0,e.withDirectives)((0,e.createVNode)("div",{class:t.classNames,style:t.styles},[(0,e.createVNode)("div",{class:"bk-message-content"},[(0,e.createVNode)("div",{class:"bk-message-icon"},[{primary:(0,e.createVNode)(n.Info,null,null),warning:(0,e.createVNode)(n.Warn,null,null),success:(0,e.createVNode)(n.Success,null,null),error:(0,e.createVNode)(n.Close,null,null)}[t.theme]]),t.message]),t.dismissable&&(0,e.createVNode)(n.Error,{class:"bk-message-close",onClick:t.close},null)]),[[e.vShow,t.visible]])]}})}}),l=function(n){!function(n,s){var i=s,a=i.position||"top-right";"string"==typeof s&&(i={message:s});var c=s.onClose,l=i.offsetX||10,p=i.offsetY||30,u=i.spacing,f=void 0===u?10:u;o[a].forEach((function(e){p+=(e.el.offsetHeight||0)+f}));var d="message_".concat(r+=1);i=Object.assign(Object.assign({},i),{offsetX:l,offsetY:p,id:d});var m=document.createElement("div"),g=(0,e.createVNode)(n,i);g.props.onDestroy=function(t){!function(e,t,r,n){null==n||n();var s=t.startsWith("top")?"top":"bottom",i=-1;o[t].forEach((function(t,o){t.props.id===e&&(i=o)}));for(var a=o[t][i].el.offsetHeight,c=o[t].length,l=i;l<c;l++){var p=parseInt(o[t][l].el.style[s],10)-a-r;o[t][l].component.props.offsetY=p}o[t].splice(i,1)}(t,a,f,c),(0,e.render)(null,m)},(0,e.render)(g,m),o[a].push(g),(g.props.getContainer&&(0,t.isElement)(g.props.getContainer)?g.props.getContainer:document.body).appendChild(m.firstElementChild)}(c,n)}})(),i})()));

package/lib/message/message.css

@@ -11,15 +11,19 @@
   border: 1px solid #e1ecff;
   border-radius: 2px;
   transform: translateX(-50%);
-  box-shadow: 0px 2px 4px 0px rgba(16, 37, 74, 0.1);
+  box-shadow: 0px 2px 4px 0px #e1e8f4;
   justify-content: space-between;
 }
 .bk-message .bk-message-close {
   padding-left: 20px;
   margin-right: 0;
   font-size: 18px;
+  color: #c4c6cc;
   cursor: pointer;
 }
+.bk-message .bk-message-close:hover {
+  color: #979ba5;
+}
 .bk-message-icon {
   display: inline-block;
   margin-right: 10px;
@@ -33,6 +37,7 @@
 .bk-message-warning {
   background: #fff4e2;
   border: 1px solid #ffe8c3;
+  box-shadow: 0px 2px 4px 0px #ede6db;
 }
 .bk-message-warning .bk-message-icon {
   color: #ff9c01;
@@ -40,14 +45,30 @@
 .bk-message-success {
   background: #f2fff4;
   border: 1px solid #dcffe2;
+  box-shadow: 0px 2px 4px 0px #cef0d7;
 }
 .bk-message-success .bk-message-icon {
   color: #2dcb56;
 }
-.bk-message-danger {
+.bk-message-error {
   background: #ffeded;
   border: 1px solid #ffdddd;
+  box-shadow: 0px 2px 4px 0px #f6dada;
 }
-.bk-message-danger .bk-message-icon {
+.bk-message-error .bk-message-icon {
   color: #ea3636;
 }
+.bk-message-fade-enter-active,
+.bk-message-fade-leave-active {
+  transition: margin 0.2s linear;
+}
+.bk-message-fade-enter-from,
+.bk-message-fade-leave-to {
+  margin-top: -50px;
+  opacity: 0;
+}
+.bk-message-content {
+  display: flex;
+  align-items: baseline;
+  word-break: break-all;
+}

package/lib/message/message.less

@@ -13,14 +13,19 @@
   border: 1px solid @message-primary-border-color;
   border-radius: 2px;
   transform: translateX(-50%);
-  box-shadow: 0px 2px 4px 0px rgba(16, 37, 74, .1);
+  box-shadow: 0px 2px 4px 0px @message-primary-shadow-color;
   justify-content: space-between;
 
   .bk-message-close {
     padding-left: 20px;
     margin-right: 0;
     font-size: 18px;
+    color: @light-gray;
     cursor: pointer;
+
+    &:hover {
+      color: @gray-color;
+    }
   }
 }
 
@@ -39,6 +44,7 @@
 .@{bk-prefix}-message-warning {
   background: @message-warning-bg-color;
   border: 1px solid @message-warning-border-color;
+  box-shadow: 0px 2px 4px 0px @message-warning-shadow-color;
   .@{bk-prefix}-message-icon {
     color: @warning-color;
   }
@@ -47,15 +53,34 @@
 .@{bk-prefix}-message-success {
   background: @message-success-bg-color;
   border: 1px solid @message-success-border-color;
+  box-shadow: 0px 2px 4px 0px @message-success-shadow-color;
   .@{bk-prefix}-message-icon {
     color: @success-color;
   }
 }
 
-.@{bk-prefix}-message-danger {
+.@{bk-prefix}-message-error {
   background: @message-danger-bg-color;
   border: 1px solid @message-danger-border-color;
+  box-shadow: 0px 2px 4px 0px @message-danger-shadow-color;
   .@{bk-prefix}-message-icon {
     color: @danger-color;
   }
+}
+
+.bk-message-fade-enter-active,
+.bk-message-fade-leave-active {
+  transition: margin .2s linear;
+}
+
+.bk-message-fade-enter-from,
+.bk-message-fade-leave-to {
+  margin-top: -50px;
+  opacity: 0;
+}
+
+.bk-message-content {
+  display: flex;
+  align-items: baseline;
+  word-break: break-all;
 }