@king-design/vue 3.1.5 → 3.2.0

package/components/datepicker/index.d.ts

@@ -0,0 +1,63 @@
+import { TypeDefs } from 'intact-vue-next';
+import dayjs from './dayjs';
+import { State } from '../../hooks/useState';
+import { Shortcut } from './shortcuts';
+import { BasePicker, BasePickerProps, BasePickerEvents, BasePickerBlocks, Value } from './basepicker';
+export * as shortcuts from './shortcuts';
+export interface DatepickerProps<V extends Value = Value, M extends boolean = boolean, R extends boolean = boolean> extends BasePickerProps<V extends string ? V : V | string, M, R> {
+    type?: 'date' | 'datetime' | 'year' | 'month';
+    shortcuts?: Shortcut[];
+}
+export interface DatepickerEvents extends BasePickerEvents {
+}
+export interface DatepickerBlocks<V extends Value = Value, R extends boolean = boolean> extends BasePickerBlocks<V, R> {
+}
+export declare class Datepicker<V extends Value = Value, M extends boolean = false, R extends boolean = false> extends BasePicker<DatepickerProps<V, M, R>, DatepickerEvents, DatepickerBlocks<V, R>> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<DatepickerProps<Value, boolean, boolean>>>;
+    static defaults: () => Partial<DatepickerProps<Value, boolean, boolean>>;
+    formats: {
+        getValueFormat: () => string;
+        getShowFormat: () => string;
+        createDateByValueFormat: (value: Value) => dayjs.Dayjs;
+        createDateByShowFormat: (value: string) => dayjs.Dayjs;
+        getShowString: (value: dayjs.Dayjs) => string;
+        getValueString: (value: dayjs.Dayjs) => string;
+    };
+    disabled: {
+        isDisabled: (value: dayjs.Dayjs, type?: dayjs.OpUnitType) => boolean;
+        isDisabledTime: (value: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => boolean;
+        isDisabledConfirm: () => boolean;
+        maxDate: State<dayjs.Dayjs | null>;
+        minDate: State<dayjs.Dayjs | null>;
+    };
+    panel: {
+        startPanel: State<import("./usePanel").PanelTypes>;
+        endPanel: State<import("./usePanel").PanelTypes>;
+        changePanel: (type: import("./usePanel").PanelTypes, flag?: import("./usePanel").PanelFlags) => void;
+        getPanel: (flag: import("./usePanel").PanelFlags) => State<import("./usePanel").PanelTypes>;
+        reset: () => void;
+        startRef: import('intact-vue-next').RefObject<import("./calendar").DatepickerCalendar>;
+        endRef: import('intact-vue-next').RefObject<import("./calendar").DatepickerCalendar>;
+    };
+    focusDate: {
+        focusDate: State<dayjs.Dayjs | null>;
+        reset: () => void;
+    };
+    value: {
+        format: () => string | string[];
+        onConfirm: () => void;
+        onChangeTime: (date: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => void;
+        getTimeValue: (flag: import("./usePanel").PanelFlags) => dayjs.Dayjs | null | undefined;
+        convertToDayjs: (v: Value | [Value, Value] | Value[] | [Value, Value][] | null | undefined) => import("./basepicker").DayjsValue;
+        getDayjsValue: () => import("./basepicker").DayjsValue;
+        value: State<import("./basepicker").StateValue>;
+        setValue: (v: import("./basepicker").StateValueItem, fromInput: boolean) => void;
+        onChangeDate: (v: dayjs.Dayjs, flag: import("./usePanel").PanelFlags) => void;
+    };
+    init(): void;
+    protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | import('intact-vue-next').Children[];
+    protected getLabel(): string | string[];
+    protected clear(e: MouseEvent): void;
+    private setByShortcut;
+}

package/components/datepicker/index.spec.js

@@ -801,22 +801,27 @@ describe('Datepicker', function () {
             first = calendar1.querySelectorAll('.k-calendar-item')[17];
             second = calendar2.querySelectorAll('.k-calendar-item')[17];
             first.click();
+            // should stay at date panel
+            _context21.next = 12;
+            return wait();
+          case 12:
+            expect(calendar1.querySelector('.k-days')).be.exist;
             second.click();
-            _context21.next = 13;
+            _context21.next = 16;
             return wait();
-          case 13:
+          case 16:
             dispatchEvent(calendar1.querySelector('.k-scroll-select-wrapper .k-active').nextElementSibling, 'click');
             dispatchEvent(calendar2.querySelector('.k-scroll-select-wrapper .k-active').previousElementSibling, 'click');
             content.querySelector('.k-datepicker-footer .k-btn').click();
-            _context21.next = 18;
+            _context21.next = 21;
             return wait();
-          case 18:
+          case 21:
             value2 = instance.get('time');
             expect(value2).have.lengthOf(2);
             expect(_mapInstanceProperty(value2).call(value2, function (item) {
               return item.split(' ')[1];
             })).eql(['01:00:00', '22:59:59']);
-          case 21:
+          case 24:
           case "end":
             return _context21.stop();
         }

package/components/datepicker/useValue.js

@@ -61,7 +61,15 @@ export function useValue(formats, disabled, panel) {
     }
     setValue(_value, false);
     if (type === 'datetime') {
-      panel.changePanel(PanelTypes.Time, flag);
+      if (range) {
+        // only change to time panel after selected start and end date
+        if (_value.length === 2) {
+          panel.changePanel(PanelTypes.Time, PanelFlags.Start);
+          panel.changePanel(PanelTypes.Time, PanelFlags.End);
+        }
+      } else {
+        panel.changePanel(PanelTypes.Time, flag);
+      }
     } else if (!multiple && (!range || _value.length === 2)) {
       instance.hide();
     }

package/components/diagram/index.d.ts

@@ -10,7 +10,7 @@ export * from './shapes/rectangle';
 export * from './shapes/square';
 export * from './shapes/text';
 export * from './shapes/line';
-declare const DDiamond: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
+declare const DDiamond: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
 export { DDiamond, DTriangle, DCylinder, DCloud };
 export * from './layouts/layout';
 export * from './layouts/circle';

package/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/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/components/menu/index.d.ts

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

package/components/menu/index.js

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

package/components/menu/index.spec.js

@@ -7,6 +7,7 @@ import { Component } from 'intact-vue-next';
 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/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/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/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-vue-next';
 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/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-vue-next';
+import { noop as _$no, createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, createVNode as _$cv } from 'intact-vue-next';
 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/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;