@king-design/intact 3.1.6 → 3.2.0

package/es/components/layout/aside.vdt.js

@@ -26,7 +26,7 @@ export default function ($props, $blocks, $__proto__) {
     }
     return vNode;
   });
-  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-layout-aside"] = true, _classNameObj[k + "-collapsed"] = collapse, _classNameObj[k + "-fixed"] = fixed, _classNameObj[k + "-" + theme] = true, _classNameObj[className] = className, _classNameObj[makeAsideStyles(k)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-layout-aside"] = true, _classNameObj[k + "-collapsed"] = collapse, _classNameObj[k + "-fixed"] = fixed, _classNameObj[k + "-" + (theme === 'dark' ? 'dark' : 'light')] = true, _classNameObj[className] = className, _classNameObj[makeAsideStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),
     'style': this.getStyles(k)

package/es/components/layout/styles.js

@@ -30,17 +30,6 @@ var defaults = {
       return menu.light.border;
     }
   },
-  white: {
-    get color() {
-      return menu.white.item.color;
-    },
-    get bgColor() {
-      return menu.white.bgColor;
-    },
-    get border() {
-      return menu.white.border;
-    }
-  },
   get collapsedWidth() {
     return "calc(" + getLeft(menu.item.padding) + " * 2 + " + menu.icon.width + ")";
   },
@@ -64,16 +53,12 @@ export var makeLayoutStyles = cache(function makeLayoutStyles(k) {
   return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", layout.transition, ";&.", k, "-has-aside{flex-direction:row;}.", k, "-layout-footer{padding:", layout.footerPadding, ";}.", k, "-layout-body{flex:1;}");
 });
 export var makeHeaderStyles = cache(function makeHeaderStyles(k) {
-  return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", layout.transition, ";&.", k, "-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}>.", k, "-menu{background:transparent!important;}&.", k, "-blur{backdrop-filter:blur(20px);background:", setAlpha(layout.bgColor, 0.1), ";}&.", k, "-box-shadow{border-bottom:none!important;box-shadow:", theme.boxShadow, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
-    if (theme === 'dark') return;
-    var styles = layout[theme];
-    return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";&.", k, "-blur{background:", setAlpha(styles.bgColor, 0.1), ";}}");
-  }), ";");
+  return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", layout.transition, ";&.", k, "-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}>.", k, "-menu{background:transparent!important;}&.", k, "-blur{backdrop-filter:blur(20px);background:", setAlpha(layout.bgColor, 0.1), ";}&.", k, "-box-shadow{border-bottom:none!important;box-shadow:", theme.boxShadow, ";}&.", k, "-light{background:", layout.light.bgColor, ";color:", layout.light.color, ";border-bottom:", layout.light.border, ";&.", k, "-blur{background:", setAlpha(layout.light.bgColor, 0.1), ";}}");
 });
 export var makeAsideStyles = cache(function makeAsideStyles(k) {
   return /*#__PURE__*/css("transition:width ", layout.transition, ";display:flex;flex-direction:column;background:", layout.bgColor, ";color:", layout.color, ";", _mapInstanceProperty(themes).call(themes, function (theme) {
     if (theme === 'dark') return;
-    var styles = layout[theme];
+    var styles = layout.light;
     return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");
   }), " &.", k, "-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.", k, "-menu{width:auto!important;}");
 });

package/es/components/menu/index.d.ts

@@ -1,2 +1,3 @@
 export * from './menu';
 export * from './item';
+export * from './title';

package/es/components/menu/index.js

@@ -1,2 +1,3 @@
 export * from './menu';
-export * from './item';
+export * from './item';
+export * from './title';

package/es/components/menu/index.spec.js

@@ -7,6 +7,7 @@ import { Component } from 'intact';
 import BasicDemo from '~/components/menu/demos/basic';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
+import CollapseArrowDemo from '~/components/menu/demos/showCollapseArrow';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
 import { Menu, MenuItem } from './';
 describe('Menu', function () {
@@ -23,7 +24,7 @@ describe('Menu', function () {
           return wait();
         case 3:
           // shrink
-          title = element.querySelector('.k-expanded .k-menu-title');
+          title = element.querySelector('.k-expanded .k-menu-item-title');
           title.click();
           _context.next = 7;
           return wait(500);
@@ -53,7 +54,7 @@ describe('Menu', function () {
           return wait();
         case 4:
           expect(element.innerHTML).to.matchSnapshot();
-          _element$querySelecto = element.querySelectorAll('.k-menu-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
+          _element$querySelecto = element.querySelectorAll('.k-menu-body .k-menu-item-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
           title.click();
           _context2.next = 9;
           return wait();
@@ -66,7 +67,7 @@ describe('Menu', function () {
         case 14:
           expect(element.outerHTML).to.matchSnapshot();
           expect(instance.get('selectedKey')).to.eql('1');
-          subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title');
+          subTitle = element.querySelector('.k-expanded .k-menu .k-menu-body .k-menu-item-title');
           subTitle.click();
           _context2.next = 20;
           return wait();
@@ -97,14 +98,14 @@ describe('Menu', function () {
         case 4:
           expect(element.outerHTML).to.matchSnapshot();
           // show sub menu
-          title = element.querySelector('.k-menu-item:nth-child(3) .k-menu-title');
+          title = element.querySelector('.k-menu-body .k-menu-item:nth-child(3) .k-menu-item-title');
           dispatchEvent(title, 'mouseenter');
           _context3.next = 9;
           return wait();
         case 9:
           dropdown = getElement('.k-dropdown-menu.k-menu');
           expect(dropdown.innerHTML).to.matchSnapshot();
-          dispatchEvent(dropdown.querySelector('.k-menu-item:nth-child(4) .k-menu-title'), 'mouseenter');
+          dispatchEvent(dropdown.querySelector('.k-menu-body .k-menu-item:nth-child(4) .k-menu-item-title'), 'mouseenter');
           _context3.next = 14;
           return wait();
         case 14:
@@ -128,19 +129,19 @@ describe('Menu', function () {
         case 0:
           _mount4 = mount(CollapseDemo), instance = _mount4[0], element = _mount4[1];
           instance.set('collapse', true);
-          title = element.querySelector('.k-menu-title');
+          title = element.querySelector('.k-menu-body .k-menu-item-title');
           title.click();
           _context4.next = 6;
           return wait();
         case 6:
           expect(element.outerHTML).to.matchSnapshot();
-          title = element.querySelector('.k-menu-item:nth-child(3) .k-menu-title');
+          title = element.querySelector('.k-menu-body .k-menu-item:nth-child(3) .k-menu-item-title');
           dispatchEvent(title, 'mouseenter');
           _context4.next = 11;
           return wait();
         case 11:
           dropdown = getElement('.k-dropdown-menu.k-menu');
-          dropdown.querySelector('.k-menu-title').click();
+          dropdown.querySelector('.k-menu-body .k-menu-item-title').click();
           _context4.next = 15;
           return wait();
         case 15:
@@ -157,40 +158,41 @@ describe('Menu', function () {
     }, _callee4);
   })));
   it('accordion', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-    var _mount5, instance, element, menu3, subMenu1, subMenu4, menu1;
+    var _mount5, instance, element, rootElement, menu3, subMenu1, subMenu4, menu1;
     return _regeneratorRuntime.wrap(function _callee5$(_context5) {
       while (1) switch (_context5.prev = _context5.next) {
         case 0:
-          _mount5 = mount(AccordionDemo), instance = _mount5[0], element = _mount5[1];
-          menu3 = element.children[2];
-          subMenu1 = menu3.querySelector('.k-menu').firstElementChild.querySelector('.k-menu-title');
+          _mount5 = mount(AccordionDemo), instance = _mount5[0], element = _mount5[1]; // const menu3 = element.children[2] as HTMLElement;
+          rootElement = element.firstElementChild;
+          menu3 = rootElement.children[2];
+          subMenu1 = menu3.querySelector('.k-menu .k-menu-body').firstElementChild.querySelector('.k-menu-item-title');
           subMenu1.click();
-          _context5.next = 6;
+          _context5.next = 7;
           return wait();
-        case 6:
-          expect(element.innerHTML).to.matchSnapshot();
+        case 7:
+          expect(rootElement.innerHTML).to.matchSnapshot();
           expect(instance.get('expandedKeys')).to.eql(['3', '3-1']);
-          subMenu4 = menu3.querySelector('.k-menu').lastElementChild.querySelector('.k-menu-title');
+          subMenu4 = menu3.querySelector('.k-menu .k-menu-body').lastElementChild.querySelector('.k-menu-item-title');
           subMenu4.click();
-          _context5.next = 12;
+          _context5.next = 13;
           return wait();
-        case 12:
-          expect(element.innerHTML).to.matchSnapshot();
+        case 13:
+          expect(rootElement.innerHTML).to.matchSnapshot();
           expect(instance.get('expandedKeys')).to.eql(['3', '3-4']);
-          menu1 = element.firstElementChild.querySelector('.k-menu-title');
+          menu1 = rootElement.firstElementChild.querySelector('.k-menu-item-title');
           menu1.click();
-          _context5.next = 18;
+          _context5.next = 19;
           return wait();
-        case 18:
-          expect(element.innerHTML).to.matchSnapshot();
+        case 19:
+          expect(rootElement.innerHTML).to.matchSnapshot();
           expect(instance.get('expandedKeys')).to.eql(['3-4', '1']);
-          menu3.querySelector('.k-menu-title').click();
-          _context5.next = 23;
+          menu3.querySelector('.k-menu-item-title').click();
+          _context5.next = 24;
           return wait();
-        case 23:
-          expect(element.innerHTML).to.matchSnapshot();
+        case 24:
+          expect(rootElement.innerHTML).to.matchSnapshot();
           expect(instance.get('expandedKeys')).to.eql(['3-4', '3']);
-        case 25:
+        case 26:
         case "end":
           return _context5.stop();
       }
@@ -240,4 +242,33 @@ describe('Menu', function () {
       }
     }, _callee6);
   })));
+  it('collapsed arrow', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount7, instance, element, arrow;
+    return _regeneratorRuntime.wrap(function _callee7$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          _mount7 = mount(CollapseArrowDemo), instance = _mount7[0], element = _mount7[1];
+          instance.set('showCollapseArrow', true);
+          _context8.next = 4;
+          return wait();
+        case 4:
+          expect(element.outerHTML).to.matchSnapshot();
+          arrow = element.querySelector('.k-menu .k-menu-arrow-box');
+          arrow.click();
+          _context8.next = 9;
+          return wait(500);
+        case 9:
+          expect(element.outerHTML).to.matchSnapshot();
+          instance.set('showCollapseArrow', false);
+          _context8.next = 13;
+          return wait();
+        case 13:
+          expect(element.outerHTML).to.matchSnapshot();
+          expect(getElement('.k-menu-arrow-box')).to.be.undefined;
+        case 15:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee7);
+  })));
 });

package/es/components/menu/item.vdt.js

@@ -47,8 +47,8 @@ export default function ($props, $blocks, $__proto__) {
     return _$ce(2, 'div', [showDot ? _$cc(Icon, {
       'className': _$cn(k + "-menu-dot ion-record")
     }) : undefined, _$ce(2, 'div', children, 0, _$cn(k + "-menu-name")), subMenuVNode ? _$cc(Icon, {
-      'className': _$cn(k + "-menu-arrow " + k + "-icon-down")
-    }) : undefined], 0, _$cn((_$cn2 = {}, _$cn2[k + "-menu-title"] = true, _$cn2[makeTitleStyles(k)] = true, _$cn2)), {
+      'className': _$cn(k + "-menu-item-arrow ion-arrow-down-b")
+    }) : undefined], 0, _$cn((_$cn2 = {}, _$cn2[k + "-menu-item-title"] = true, _$cn2[makeTitleStyles(k)] = true, _$cn2)), {
       'ev-click': _this.onClick.bind(_this, subMenuVNode)
     });
   };
@@ -65,7 +65,7 @@ export default function ($props, $blocks, $__proto__) {
         var _makeNestedMenuStyles = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft),
           _classname = _makeNestedMenuStyles[0],
           _paddingLeft = _makeNestedMenuStyles[1];
-        var _className = _$cn((_$cn3 = {}, _$cn3[_classname] = true, _$cn3[subMenuVNode.className] = subMenuVNode.className, _$cn3));
+        var _className = _$cn((_$cn3 = {}, _$cn3[_classname] = true, _$cn3[subMenuVNode.className] = subMenuVNode.className, _$cn3[k + "-sub-menu"] = true, _$cn3));
         var clonedVNode = directClone(subMenuVNode);
         clonedVNode.props = _extends({}, clonedVNode.props, {
           className: _className,

package/es/components/menu/menu.d.ts

@@ -5,6 +5,7 @@ export interface MenuProps<K extends Key = Key> {
     selectedKey?: K;
     theme?: 'light' | 'dark' | 'white';
     collapse?: boolean;
+    showCollapseArrow?: boolean;
     type?: 'vertical' | 'horizontal';
     size?: 'large' | 'default' | 'small';
     accordion?: boolean;
@@ -28,4 +29,5 @@ export declare class Menu<K extends Key = Key> extends Component<MenuProps<K>, M
     highlight?: ReturnType<typeof useHighlight>;
     private config;
     init(): void;
+    onClick(e: MouseEvent): void;
 }

package/es/components/menu/menu.js

@@ -1,14 +1,17 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
 import { Component, provide, inject } from 'intact';
 import template from './menu.vdt';
 import { useHighlight } from './useHighlight';
 import { useConfigContext } from '../config';
+import { bind } from '../utils';
 var typeDefs = {
   expandedKeys: Array,
   selectedKey: [String, Number],
   theme: ['light', 'dark', 'white'],
   collapse: Boolean,
+  showCollapseArrow: Boolean,
   type: ['vertical', 'horizontal'],
   size: ['large', 'default', 'small'],
   accordion: Boolean,
@@ -50,8 +53,16 @@ export var Menu = /*#__PURE__*/function (_Component) {
       this.highlight = useHighlight();
     }
   };
+  _proto.onClick = function onClick(e) {
+    var _this$get = this.get(),
+      collapse = _this$get.collapse;
+    this.set({
+      collapse: !collapse
+    });
+  };
   return Menu;
 }(Component);
 Menu.template = template;
 Menu.typeDefs = typeDefs;
-Menu.defaults = defaults;
+Menu.defaults = defaults;
+__decorate([bind], Menu.prototype, "onClick", null);

package/es/components/menu/menu.vdt.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { noop as _$no, createElementVNode as _$ce, className as _$cn, createVNode as _$cv, createUnknownComponentVNode as _$cc } from 'intact';
+import { noop as _$no, createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, createVNode as _$cv } from 'intact';
 import { DropdownMenu } from '../dropdown';
 import { getRestProps, findChildren, isComponentVNode } from '../utils';
 import { isDropdown } from './useDropdown';
@@ -19,11 +19,12 @@ export default function ($props, $blocks, $__proto__) {
     collapse = _get.collapse,
     theme = _get.theme,
     type = _get.type,
-    size = _get.size;
+    size = _get.size,
+    showCollapseArrow = _get.showCollapseArrow;
   var isRootMenu = !this.rootMenu;
   var isDropdownMenu = !isRootMenu && isDropdown(this.rootMenu);
   var k = this.config.k;
-  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-menu"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + theme] = (isRootMenu || isDropdownMenu) && theme, _classNameObj[k + "-" + size] = isRootMenu && size !== 'default', _classNameObj[k + "-collapsed"] = isRootMenu && collapse, _classNameObj[k + "-" + type] = isRootMenu && type, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-menu"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + (theme === 'dark' ? 'dark' : 'light')] = (isRootMenu || isDropdownMenu) && theme, _classNameObj[k + "-" + size] = isRootMenu && size !== 'default', _classNameObj[k + "-collapsed"] = isRootMenu && collapse, _classNameObj[k + "-collapsed-arrow"] = isRootMenu && showCollapseArrow && collapse, _classNameObj[k + "-" + type] = isRootMenu && type, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
   var header = (_$blocks['header'] = function ($super) {
     return null;
   }, __$blocks['header'] = function ($super, data) {
@@ -35,7 +36,11 @@ export default function ($props, $blocks, $__proto__) {
   }, __$blocks['header'](_$no));
   var content = [$blocks.header ? _$ce(2, 'div', !collapse ? header : findChildren(header, function (vNode) {
     return isComponentVNode(vNode, Icon);
-  }), 0, _$cn((_$cn2 = {}, _$cn2[k + "-menu-header"] = true, _$cn2[makeTitleStyles(k)] = true, _$cn2))) : undefined, children];
+  }), 0, _$cn((_$cn2 = {}, _$cn2[k + "-menu-header"] = true, _$cn2[makeTitleStyles(k)] = true, _$cn2))) : undefined, isRootMenu && showCollapseArrow && type !== 'horizontal' ? _$ce(2, 'div', _$cc(Icon, {
+    'className': _$cn(k + "-menu-arrow ion-arrow-left-b")
+  }), 2, _$cn(k + "-menu-arrow-box"), {
+    'ev-click': this.onClick.bind(this)
+  }) : undefined, _$ce(2, 'div', children, 0, _$cn(k + "-menu-body"))];
   return !isDropdownMenu ? _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
   }), content) : _$cc(DropdownMenu, _extends({}, getRestProps(this), {

package/es/components/menu/styles.d.ts

@@ -5,14 +5,23 @@ declare const defaults: {
     bgColor: string;
     fontSize: string;
     readonly borderRadius: string;
+    readonly border: string;
     item: {
         height: string;
         padding: string;
+        bodyPadding: string;
         color: string;
         hoverColor: string;
-        readonly disabledColor: string;
+        disabledColor: string;
         readonly activeBgColor: string;
+        readonly hoverBgColor: string;
         dotFontSize: string;
+        subTitleColor: string;
+    };
+    title: {
+        height: string;
+        padding: string;
+        color: string;
     };
     icon: {
         width: string;
@@ -21,27 +30,21 @@ declare const defaults: {
     header: {
         height: string;
         fontSize: string;
+        color: string;
         borderBottom: string;
     };
-    subBgColor: string;
     light: {
         bgColor: string;
-        subBgColor: string;
-        border: string;
+        readonly border: string;
         item: {
             readonly color: string;
             readonly hoverColor: string;
+            readonly hoverBg: string;
             disabledColor: string;
+            subTitleColor: string;
         };
-    };
-    white: {
-        bgColor: string;
-        subBgColor: string;
-        border: string;
-        item: {
+        title: {
             readonly color: string;
-            readonly hoverColor: string;
-            readonly disabledColor: string;
         };
         active: {
             readonly color: string;

package/es/components/menu/styles.js

@@ -10,53 +10,50 @@ var defaults = {
     return theme.transition.large;
   },
   width: '200px',
-  bgColor: '#262626',
+  bgColor: '#1c1c20',
   fontSize: '14px',
   get borderRadius() {
     return theme.borderRadius;
   },
+  get border() {
+    return "1px solid " + theme.color.darkBorder;
+  },
   item: {
     height: '40px',
-    padding: '0 21px',
-    color: '#b2b2b2',
+    padding: '0 17px',
+    bodyPadding: '0 4px',
+    color: '#aeaeb9',
     hoverColor: '#fff',
-    get disabledColor() {
-      return theme.color.text;
-    },
+    disabledColor: '#53535a',
     get activeBgColor() {
       return theme.color.primary;
     },
-    dotFontSize: '12px'
+    get hoverBgColor() {
+      return palette(theme.color.primary, 4);
+    },
+    dotFontSize: '12px',
+    subTitleColor: '#858592'
+  },
+  title: {
+    height: '40px',
+    padding: '0 17px',
+    color: '#fff'
   },
   icon: {
     width: '16px',
     gap: '11px'
   },
   header: {
-    height: '50px',
+    height: '52px',
     fontSize: '14px',
+    color: '#fff',
     borderBottom: '1px solid #1b1b1d'
   },
-  // sub-menu
-  subBgColor: '#000',
   light: {
-    bgColor: '#e5e5e9',
-    subBgColor: '#d5d5d9',
-    border: '1px solid #d5d5d9',
-    item: {
-      get color() {
-        return theme.color.text;
-      },
-      get hoverColor() {
-        return theme.color.primary;
-      },
-      disabledColor: '#999'
-    }
-  },
-  white: {
     bgColor: '#fff',
-    subBgColor: '#fafafa',
-    border: '1px solid #eee',
+    get border() {
+      return "1px solid " + theme.color.disabledBg;
+    },
     item: {
       get color() {
         return theme.color.text;
@@ -64,8 +61,15 @@ var defaults = {
       get hoverColor() {
         return theme.color.primary;
       },
-      get disabledColor() {
-        return theme.color.disabled;
+      get hoverBg() {
+        return theme.color.hoverBg;
+      },
+      disabledColor: '#b6bec2',
+      subTitleColor: '#5e686f'
+    },
+    title: {
+      get color() {
+        return theme.color.title;
       }
     },
     active: {
@@ -106,16 +110,12 @@ setDefault(function () {
 });
 export { menu };
 export var makeMenuStyles = cache(function makeMenuStyles(k) {
-  var _context;
   // we must increase the priority by adding &.${k}-menu
   // to override the css of dropdownMenu
-  return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";font-size:", menu.header.fontSize, ";font-weight:bold;border-bottom:", menu.header.borderBottom, ";}", _mapInstanceProperty(_context = ['light', 'white']).call(_context, function (theme) {
-    var styles = menu[theme];
-    return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";.", k, "-menu-header{color:", styles.item.color, ";border-bottom:", styles.border, ";}.", k, "-menu-item{.", k, "-menu-title{color:", styles.item.color, ";&:hover{color:", styles.item.hoverColor, ";}}&.", k, "-highlighted{>.", k, "-menu-title{color:", styles.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", styles.item.disabledColor, "!important;}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", styles.subBgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", styles.border, ";}}}");
-  }), " &.", k, "-white{.", k, "-menu-item.", k, "-active{>.", k, "-menu-title{color:", menu.white.active.color, "!important;background:", menu.white.active.bgColor, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";position:relative;}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";padding:0 21px;color:", menu.header.color, ";font-size:", menu.header.fontSize, ";font-weight:bold;}.", k, "-menu-body{padding:", menu.item.bodyPadding, ";max-height:calc(100vh - ", menu.header.height, ");overflow-y:auto;}.", k, "-menu-title{height:", menu.title.height, ";border-top:", menu.border, ";margin-top:4px;.", k, "-menu-name{transition:all ", menu.transition, ";height:", menu.title.height, ";color:", menu.title.color, ";font-weight:bold;}}.", k, "-menu-arrow-box{width:14px;height:60px;cursor:pointer;background:", menu.bgColor, ";border-radius:0 8px 8px 0;position:absolute;display:flex;align-items:center;justify-content:center;top:50%;left:calc(", menu.width, " - 2px);transition:left ", menu.transition, ";transform:translateY(-50%);border:", menu.border, ";border-left:none;.", k, "-icon{margin-right:0;}&:hover{.", k, "-menu-arrow:before{color:", menu.item.activeBgColor, ";}}}&.", k, "-light{border:1px solid ", theme.color.disabledBg, ";background:", menu.light.bgColor, ";.", k, "-menu-header{color:", menu.light.title.color, ";}.", k, "-menu-item{.", k, "-menu-item-title{color:", menu.light.item.color, ";&:hover{background:", menu.light.item.hoverBg, ";}}.", k, "-menu-item-arrow{color:", menu.light.item.color, ";}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", menu.light.item.disabledColor, "!important;}}}.", k, "-menu-title{border-top:", menu.light.border, ";.", k, "-menu-name{color:", menu.light.title.color, ";}}.", k, "-menu-arrow-box{background:", menu.light.bgColor, ";border:", menu.light.border, ";border-left:none;&:hover{.", k, "-menu-arrow:before{color:", menu.light.active.color, ";}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", menu.light.bgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", menu.light.border, ";}.", k, "-menu-body>.", k, "-menu-title{border-right:", menu.light.border, ";}}.", k, "-menu-item.", k, "-active{>.", k, "-menu-item-title{color:", menu.light.active.color, "!important;background:", menu.light.active.bgColor, ";}}.", k, "-sub-menu{.", k, "-menu-item-title,.", k, "-menu-item-arrow{color:", menu.light.item.subTitleColor, "!important;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = menu[size];
-    return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}}");
-  }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + ", getLeft(menu.item.padding), " * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-arrow{display:none;}}&.", k, "-dropdown-menu{width:auto;min-width:", menu.dropdown.minWidth, ";.", k, "-menu-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;align-items:center;.", k, "-menu-header{border-bottom:none;border-right:", menu.header.borderBottom, ";}}");
+    return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}.", k, "-menu-arrow-box{left:calc(", styles.width, " - 2px);}}");
+  }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + (", getLeft(menu.item.padding), " + ", getLeft(menu.item.bodyPadding), ") * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-item-arrow{display:none;}}&.", k, "-collapsed-arrow{width:0px;border-left:none;.", k, "-menu-body{overflow:hidden;padding:0;}.", k, "-menu-arrow-box{left:0;.", k, "-menu-arrow:before{transform:rotateY(180deg);}}}&.", k, "-dropdown-menu{width:fit-content;min-width:", menu.dropdown.minWidth, ";.", k, "-menu-item-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;.", k, "-menu-body{display:flex;align-items:center;.", k, "-menu-title{border-top:none;border-right:", menu.border, ";}}}");
 });
 export var makeTitleStyles = cache(function makeTitleStyles(k) {
   var item = menu.item;
@@ -123,12 +123,12 @@ export var makeTitleStyles = cache(function makeTitleStyles(k) {
 });
 export var makeItemStyles = cache(function makeItemStyles(k) {
   var item = menu.item;
-  return /*#__PURE__*/css(".", k, "-menu-title{cursor:pointer;height:", item.height, ";&:hover{color:", item.hoverColor, ";}}.", k, "-menu-name{flex:1;display:flex;align-items:center;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}.", k, "-icon{color:inherit;}}.", k, "-menu-arrow{transition:transform ", menu.transition, ";margin:0 0 0 ", menu.icon.gap, ";}&.", k, "-expanded{>.", k, "-menu-title{color:", item.hoverColor, ";.", k, "-menu-arrow{transform:rotateX(180deg);}}}&.", k, "-highlighted{>.", k, "-menu-title{color:", item.hoverColor, ";}}&.", k, "-active{>.", k, "-menu-title{color:", item.hoverColor, "!important;background:", item.activeBgColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", item.disabledColor, "!important;cursor:not-allowed;}}.", k, "-menu-dot{font-size:", item.dotFontSize, ";transform:scale(.4);}");
+  return /*#__PURE__*/css(".", k, "-menu-item-title{transition:all ", menu.transition, ";cursor:pointer;height:", item.height, ";&:hover{padding:", item.padding, ";border-radius:", menu.borderRadius, ";background:#2a2a30;}&>.", k, "-menu-item-arrow:before{font-size:small;}}.", k, "-menu-name{flex:1;display:flex;align-items:center;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}.", k, "-icon{color:inherit;}}.", k, "-menu-item-arrow{color:", item.color, ";margin:0 0 0 ", menu.icon.gap, ";transition:transform ", menu.transition, ";}&.", k, "-expanded{>.", k, "-menu-item-title{color:", item.hoverColor, ";.", k, "-menu-item-arrow{transform:rotate(180deg);}}}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-active{>.", k, "-menu-item-title{border-radius:", menu.borderRadius, ";color:", item.activeBgColor, "!important;background:", item.hoverBgColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", item.disabledColor, "!important;cursor:not-allowed;}}.", k, "-menu-dot{font-size:", item.dotFontSize, ";transform:scale(.4);}");
 });
 export var makeNestedMenuStyles = cache(function makeNestedMenuStyles(k, hasIcon, parentPaddingLeft) {
   if (parentPaddingLeft === void 0) {
     parentPaddingLeft = getLeft(menu.item.padding);
   }
-  var paddingLeft = "" + parentPaddingLeft + (hasIcon ? ' + ' + menu.icon.width : '') + " + " + menu.icon.gap;
-  return [/*#__PURE__*/css("&.", k, "-menu{width:auto;background:", menu.subBgColor, ";.", k, "-menu-title{padding-left:calc(", paddingLeft, ");}}"), paddingLeft];
+  var paddingLeft = "" + parentPaddingLeft + (hasIcon ? ' + ' + menu.icon.width + ' + ' + menu.icon.gap : '');
+  return [/*#__PURE__*/css("&.", k, "-menu{position:relative;width:auto;background:", menu.bgColor, ";border:none;.", k, "-menu-body{padding:0;.", k, "-menu-item-title{padding-left:calc(", paddingLeft, ");}.", k, "-menu-item-title,.", k, "-menu-item-arrow{color:", menu.item.subTitleColor, ";}}}"), paddingLeft];
 });

package/es/components/menu/title.d.ts

@@ -0,0 +1,7 @@
+import { Component } from 'intact';
+import { Menu } from './menu';
+export declare class MenuTitle extends Component {
+    static template: string | import("intact").Template<any>;
+    rootMenu: Menu<import("intact").Key>;
+    private config;
+}

package/es/components/menu/title.js

@@ -0,0 +1,22 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component, inject } from 'intact';
+import { ROOT_MENU } from './menu';
+import template from './title.vdt';
+import { useConfigContext } from '../config';
+export var MenuTitle = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(MenuTitle, _Component);
+  function MenuTitle() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.rootMenu = inject(ROOT_MENU);
+    _this.config = useConfigContext();
+    return _this;
+  }
+  return MenuTitle;
+}(Component);
+MenuTitle.template = template;

package/es/components/menu/title.vdt.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact';
+import { Icon } from '../icon';
+import { getRestProps, findChildren, isComponentVNode } from '../utils';
+import { makeTitleStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _$cn2;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var rootMenu = this.rootMenu;
+  var _rootMenu$get = rootMenu.get(),
+    collapse = _rootMenu$get.collapse;
+  var _this$get = this.get(),
+    children = _this$get.children,
+    className = _this$get.className;
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-menu-title"] = true, _classNameObj[className] = className, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), _$ce(2, 'div', !collapse ? _$ce(2, 'span', children, 0) : findChildren(children, function (vNode) {
+    return isComponentVNode(vNode, Icon);
+  }), 0, _$cn((_$cn2 = {}, _$cn2[k + "-menu-name"] = true, _$cn2[makeTitleStyles(k)] = true, _$cn2))));
+}
+;

package/es/components/radio/styles.js

@@ -9,7 +9,7 @@ var defaults = {
     return theme.transition.small;
   },
   get borderColor() {
-    return theme.color.darkBorder;
+    return theme.color.border;
   },
   get hoverBorderColor() {
     return theme.color.primary;

package/es/components/select/index.spec.js

@@ -409,7 +409,7 @@ describe('Select', function () {
           _context12.next = 12;
           return wait();
         case 12:
-          expect(instance.get('days')).have.length(7);
+          expect(instance.get('days')).have.length(6);
           // unselect all
           select.click();
           _context12.next = 16;

package/es/components/select/option.vdt.js

@@ -33,6 +33,7 @@ export default function ($props, $blocks, $__proto__) {
           'value': value.value,
           'ev-$change:value': value.set,
           'trueValue': _this.get('value'),
+          'disabled': disabled,
           'children': _children2
         });
       }

package/es/components/select/select.js

@@ -58,7 +58,10 @@ export var Select = /*#__PURE__*/function (_BaseSelect) {
     var loop = function loop(children) {
       eachChildren(children, function (vNode) {
         if (isComponentVNode(vNode, Option)) {
-          values.push(vNode.props.value);
+          var props = vNode.props;
+          if (!props.disabled) {
+            values.push(props.value);
+          }
         } else if (isComponentVNode(vNode, OptionGroup)) {
           loop(vNode.props.children);
         }