bkui-vue 2.0.1-beta.94 → 2.0.1-beta.95

package/lib/index.js

@@ -4,5 +4,5 @@ export { default } from './preset';
 export * from './config-provider';
 export * from './directives';
 export * as plugins from './plugins';
-export const version = "2.0.1-beta.94";
+export const version = "2.0.1-beta.95";
 window.__bkui_vue_version__ = version;

package/lib/menu/index.d.ts

@@ -107,14 +107,23 @@ declare const BkMenu: {
             type: BooleanConstructor;
             default: boolean;
         };
+        disabled: {
+            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;
         };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & {
         onClick?: (...args: any[]) => any;
     }, {
+        disabled: boolean;
         needIcon: boolean;
     }, import("vue").SlotsType<{
         default?: () => HTMLElement;

package/lib/menu/index.js

@@ -523,6 +523,10 @@ var menuProps = {
     needIcon: {
       type: Boolean,
       "default": true
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
     }
   },
   emits: ['click'],
@@ -552,6 +556,9 @@ var menuProps = {
       parentKey: parentInfo === null || parentInfo === void 0 ? void 0 : parentInfo.key
     });
     var handleClick = function handleClick(e) {
+      if (props.disabled) {
+        return;
+      }
       handleActiveChange(key);
       emit('click', e);
     };
@@ -563,7 +570,7 @@ var menuProps = {
     return function () {
       var _slots$icon, _slots$default;
       return (0,external_vue_namespaceObject.createVNode)("li", {
-        "class": _defineProperty(_defineProperty({}, "".concat(resolveClassName('menu-item')), true), 'is-active', isActive.value),
+        "class": _defineProperty(_defineProperty(_defineProperty({}, "".concat(resolveClassName('menu-item')), true), 'is-active', isActive.value), 'is-disabled', props.disabled),
         "onClick": handleClick
       }, [needIcon.value && (0,external_vue_namespaceObject.createVNode)("span", {
         "class": "item-icon"

package/lib/menu/menu-item.d.ts

@@ -4,14 +4,23 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    disabled: {
+        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;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onClick?: (...args: any[]) => any;
 }, {
+    disabled: boolean;
     needIcon: boolean;
 }, SlotsType<{
     default?: () => HTMLElement;

package/lib/menu/menu.css

@@ -208,9 +208,9 @@
 }
 .bk-menu {
   display: flex;
+  flex-direction: column;
   width: var(--menu-width);
   background-color: var(--menu-bg-color);
-  flex-direction: column;
   transition: width 0.3s ease-out;
 }
 .bk-menu.is-collapse {
@@ -219,10 +219,10 @@
 .bk-menu-submenu {
   display: flex;
   flex-direction: column;
+  align-items: center;
   overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;
-  align-items: center;
   transition: width 0.3s ease-out;
 }
 .bk-menu-submenu.is-opened {
@@ -234,9 +234,9 @@
 }
 .bk-menu-submenu .submenu-header {
   display: flex;
+  align-items: center;
   width: 100%;
   height: 40px;
-  align-items: center;
 }
 .bk-menu-submenu .submenu-header.is-collapse {
   color: var(--menu-active-color);
@@ -244,11 +244,11 @@
 }
 .bk-menu-submenu .submenu-header-icon {
   display: flex;
-  height: 100%;
-  font-size: 18px;
   flex: 0 0 var(--menu-collapse-width);
   align-items: center;
   justify-content: center;
+  height: 100%;
+  font-size: 18px;
 }
 .bk-menu-submenu .submenu-header-icon .menu-icon {
   display: flex;
@@ -261,9 +261,9 @@
 }
 .bk-menu-submenu .submenu-header-content {
   display: flex;
-  height: 100%;
-  align-items: center;
   flex: 1;
+  align-items: center;
+  height: 100%;
   color: #acb9d1;
 }
 .bk-menu-submenu .submenu-header-collapse {
@@ -275,24 +275,25 @@
   justify-content: center;
   margin-right: 16px;
   color: #acb9d1;
-  transform: rotate(-90deg);
   transition: transform 0.3s ease-out;
+  transform: rotate(-90deg);
 }
 .bk-menu-submenu .submenu-header-collapse.is-collapse {
   transform: rotate(0deg);
 }
 .bk-menu-submenu .submenu-list {
   display: flex;
+  flex: 1;
+  flex-direction: column;
   width: 100%;
   padding: 0;
   margin: 0;
-  flex-direction: column;
-  flex: 1;
   /* stylelint-disable-next-line declaration-no-important */
   transition-property: all !important;
 }
 .bk-menu-item {
   display: flex;
+  align-items: center;
   width: 100%;
   height: 40px;
   min-height: 40px;
@@ -302,7 +303,6 @@
   color: var(--menu-color);
   text-overflow: clip;
   white-space: nowrap;
-  align-items: center;
   transition: width 0.3s ease-in-out;
 }
 .bk-menu-item:hover {
@@ -313,13 +313,25 @@
   color: var(--menu-active-color);
   background: var(--menu-active-bg-color);
 }
+.bk-menu-item.is-disabled {
+  color: var(--menu-group-color);
+  cursor: not-allowed;
+}
+.bk-menu-item.is-disabled:hover {
+  color: var(--menu-group-color);
+  cursor: not-allowed;
+  background: none;
+}
+.bk-menu-item.is-disabled .default-icon {
+  opacity: 0.4;
+}
 .bk-menu-item .item-icon {
   display: flex;
-  height: 100%;
-  font-size: 18px;
   flex: 0 0 var(--menu-collapse-width);
   align-items: center;
   justify-content: center;
+  height: 100%;
+  font-size: 18px;
 }
 .bk-menu-item .item-icon .default-icon {
   display: inline-block;
@@ -331,9 +343,9 @@
 }
 .bk-menu-item .item-content {
   display: flex;
-  height: 100%;
-  align-items: center;
   flex: 1;
+  align-items: center;
+  height: 100%;
 }
 .bk-menu-group {
   display: flex;
@@ -341,6 +353,8 @@
 }
 .bk-menu-group .group-name {
   display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
   height: 40px;
   margin: 0 18px;
   overflow: hidden;
@@ -349,8 +363,6 @@
   color: var(--menu-group-color);
   text-overflow: clip;
   white-space: nowrap;
-  flex-wrap: nowrap;
-  align-items: center;
 }
 .bk-menu-group .group-wrap {
   display: flex;

package/lib/menu/menu.less

@@ -11,9 +11,9 @@
 
 .@{bk-prefix}-menu {
   display: flex;
+  flex-direction: column;
   width: @menu-width;
   background-color: @menu-bg-color;
-  flex-direction: column;
   transition: width .3s ease-out;
 
   &.is-collapse {
@@ -22,12 +22,12 @@
 
   &-submenu {
     display: flex;
-    align-items: center;
     flex-direction: column;
+    align-items: center;
+    align-items: center;
     overflow: hidden;
     text-overflow: clip;
     white-space: nowrap;
-    align-items: center;
     transition: width .3s ease-out;
 
     &.is-opened {
@@ -41,9 +41,9 @@
 
     .submenu-header {
       display: flex;
+      align-items: center;
       width: 100%;
       height: 40px;
-      align-items: center;
 
       &.is-collapse {
         color: @menu-active-color;
@@ -52,11 +52,11 @@
 
       &-icon {
         display: flex;
-        height: 100%;
-        font-size: 18px;
         flex: 0 0 @menu-collapse-width;
         align-items: center;
         justify-content: center;
+        height: 100%;
+        font-size: 18px;
 
         .menu-icon {
           .icon-size(16px, 16px);
@@ -66,9 +66,9 @@
 
       &-content {
         display: flex;
-        height: 100%;
-        align-items: center;
         flex: 1;
+        align-items: center;
+        height: 100%;
         color: #acb9d1
       }
 
@@ -76,8 +76,8 @@
         .icon-size(16px, 16px);
         margin-right: 16px;
         color: #acb9d1;
-        transform: rotate(-90deg);
         transition: transform .3s ease-out;
+        transform: rotate(-90deg);
 
         &.is-collapse {
           transform: rotate(0deg);
@@ -87,11 +87,11 @@
 
     .submenu-list {
       display: flex;
+      flex: 1;
+      flex-direction: column;
       width: 100%;
       padding: 0;
       margin: 0;
-      flex-direction: column;
-      flex: 1;
 
       /* stylelint-disable-next-line declaration-no-important */
       transition-property: all !important;
@@ -100,6 +100,7 @@
 
   &-item {
     display: flex;
+    align-items: center;
     width: 100%;
     height: 40px;
     min-height: 40px;
@@ -109,7 +110,6 @@
     color: @menu-color;
     text-overflow: clip;
     white-space: nowrap;
-    align-items: center;
     transition: width .3s ease-in-out;
 
     &:hover {
@@ -122,13 +122,28 @@
       background: @menu-active-bg-color;
     }
 
+    &.is-disabled {
+      color: @menu-group-color;
+      cursor: not-allowed;
+      
+      &:hover {
+        color: @menu-group-color;
+        cursor: not-allowed;
+        background: none;
+      }
+      
+      .default-icon {
+        opacity: 0.4;
+      }
+    }
+
     .item-icon {
       display: flex;
-      height: 100%;
-      font-size: 18px;
       flex: 0 0 @menu-collapse-width;
       align-items: center;
       justify-content: center;
+      height: 100%;
+      font-size: 18px;
 
       .default-icon {
         display: inline-block;
@@ -142,9 +157,9 @@
 
     .item-content {
       display: flex;
-      height: 100%;
-      align-items: center;
       flex: 1;
+      align-items: center;
+      height: 100%;
     }
   }
 
@@ -154,6 +169,8 @@
 
     .group-name {
       display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
       height: 40px;
       margin: 0 18px;
       overflow: hidden;
@@ -162,8 +179,6 @@
       color: @menu-group-color;
       text-overflow: clip;
       white-space: nowrap;
-      flex-wrap: nowrap;
-      align-items: center;
     }
 
     .group-wrap {

package/lib/menu/menu.variable.css

@@ -598,9 +598,9 @@
 }
 .bk-menu {
   display: flex;
+  flex-direction: column;
   width: var(--menu-width);
   background-color: var(--menu-bg-color);
-  flex-direction: column;
   transition: width 0.3s ease-out;
 }
 .bk-menu.is-collapse {
@@ -609,10 +609,10 @@
 .bk-menu-submenu {
   display: flex;
   flex-direction: column;
+  align-items: center;
   overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;
-  align-items: center;
   transition: width 0.3s ease-out;
 }
 .bk-menu-submenu.is-opened {
@@ -624,9 +624,9 @@
 }
 .bk-menu-submenu .submenu-header {
   display: flex;
+  align-items: center;
   width: 100%;
   height: 40px;
-  align-items: center;
 }
 .bk-menu-submenu .submenu-header.is-collapse {
   color: var(--menu-active-color);
@@ -634,11 +634,11 @@
 }
 .bk-menu-submenu .submenu-header-icon {
   display: flex;
-  height: 100%;
-  font-size: 18px;
   flex: 0 0 var(--menu-collapse-width);
   align-items: center;
   justify-content: center;
+  height: 100%;
+  font-size: 18px;
 }
 .bk-menu-submenu .submenu-header-icon .menu-icon {
   display: flex;
@@ -651,9 +651,9 @@
 }
 .bk-menu-submenu .submenu-header-content {
   display: flex;
-  height: 100%;
-  align-items: center;
   flex: 1;
+  align-items: center;
+  height: 100%;
   color: #acb9d1;
 }
 .bk-menu-submenu .submenu-header-collapse {
@@ -665,24 +665,25 @@
   justify-content: center;
   margin-right: 16px;
   color: #acb9d1;
-  transform: rotate(-90deg);
   transition: transform 0.3s ease-out;
+  transform: rotate(-90deg);
 }
 .bk-menu-submenu .submenu-header-collapse.is-collapse {
   transform: rotate(0deg);
 }
 .bk-menu-submenu .submenu-list {
   display: flex;
+  flex: 1;
+  flex-direction: column;
   width: 100%;
   padding: 0;
   margin: 0;
-  flex-direction: column;
-  flex: 1;
   /* stylelint-disable-next-line declaration-no-important */
   transition-property: all !important;
 }
 .bk-menu-item {
   display: flex;
+  align-items: center;
   width: 100%;
   height: 40px;
   min-height: 40px;
@@ -692,7 +693,6 @@
   color: var(--menu-color);
   text-overflow: clip;
   white-space: nowrap;
-  align-items: center;
   transition: width 0.3s ease-in-out;
 }
 .bk-menu-item:hover {
@@ -703,13 +703,25 @@
   color: var(--menu-active-color);
   background: var(--menu-active-bg-color);
 }
+.bk-menu-item.is-disabled {
+  color: var(--menu-group-color);
+  cursor: not-allowed;
+}
+.bk-menu-item.is-disabled:hover {
+  color: var(--menu-group-color);
+  cursor: not-allowed;
+  background: none;
+}
+.bk-menu-item.is-disabled .default-icon {
+  opacity: 0.4;
+}
 .bk-menu-item .item-icon {
   display: flex;
-  height: 100%;
-  font-size: 18px;
   flex: 0 0 var(--menu-collapse-width);
   align-items: center;
   justify-content: center;
+  height: 100%;
+  font-size: 18px;
 }
 .bk-menu-item .item-icon .default-icon {
   display: inline-block;
@@ -721,9 +733,9 @@
 }
 .bk-menu-item .item-content {
   display: flex;
-  height: 100%;
-  align-items: center;
   flex: 1;
+  align-items: center;
+  height: 100%;
 }
 .bk-menu-group {
   display: flex;
@@ -731,6 +743,8 @@
 }
 .bk-menu-group .group-name {
   display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
   height: 40px;
   margin: 0 18px;
   overflow: hidden;
@@ -739,8 +753,6 @@
   color: var(--menu-group-color);
   text-overflow: clip;
   white-space: nowrap;
-  flex-wrap: nowrap;
-  align-items: center;
 }
 .bk-menu-group .group-wrap {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "2.0.1-beta.94",
+  "version": "2.0.1-beta.95",
   "workspaces": [
     "packages/**",
     "scripts/cli",