@king-design/intact 3.0.0 → 3.1.0-beta.0

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { createElementVNode as _$ce, createVNode as _$cv, className as _$cn } from 'intact';
+import { createElementVNode as _$ce, className as _$cn, createVNode as _$cv } from 'intact';
 import { directClone } from 'intact';
 import { mapChildren, getRestProps } from '../utils';
 import { Menu } from '../menu';
@@ -18,25 +18,22 @@ export default function ($props, $blocks, $__proto__) {
       fixed = _this$get.fixed,
       theme = _this$get.theme;
 
+  var k = this.config.k;
   var vNodes = mapChildren(children, function (vNode) {
     if (vNode.tag === Menu) {
       var vNodeClone = directClone(vNode);
       vNodeClone.props = _extends({}, vNode.props, {
         collapse: collapse
       });
-      return _$ce(2, 'div', vNodeClone, 0, 'k-layout-wrapper');
+      return _$ce(2, 'div', vNodeClone, 0, _$cn(k + "-layout-wrapper"));
     }
 
     return vNode;
   });
-  var classNameObj = (_classNameObj = {
-    'k-layout-aside': true,
-    'k-collapsed': collapse,
-    'k-fixed': fixed
-  }, _classNameObj["k-" + theme] = true, _classNameObj[className] = className, _classNameObj[makeAsideStyles()] = true, _classNameObj);
+  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);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),
-    'style': this.getStyles()
+    'style': this.getStyles(k)
   }), vNodes);
 }
 ;

package/es/components/layout/body.d.ts

@@ -2,6 +2,8 @@ import { Component } from 'intact';
 export declare class Body extends Component {
     static template: string | import("intact").Template<any>;
     private layout;
+    private config;
+    init(): void;
     private getClassNames;
     private getStyles;
 }

package/es/components/layout/body.js

@@ -1,9 +1,10 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
-import { Component, inject } from 'intact';
+import { Component, inject, provide } from 'intact';
 import template from './template.vdt';
-import { LAYOUT, getStyle } from './helpers';
+import { LAYOUT, getStyle, BODY } from './helpers';
 import { addStyle } from '../utils';
+import { useConfigContext } from '../config';
 export var Body = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Body, _Component);
 
@@ -18,20 +19,24 @@ export var Body = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.layout = inject(LAYOUT);
+    _this.config = useConfigContext();
     return _this;
   }
 
   var _proto = Body.prototype;
 
+  _proto.init = function init() {
+    provide(BODY, this);
+  };
+
   _proto.getClassNames = function getClassNames() {
     var _ref;
 
     var _this$get = this.get(),
         className = _this$get.className;
 
-    return _ref = {
-      'k-layout-body': true
-    }, _ref[className] = className, _ref;
+    var k = this.config.k;
+    return _ref = {}, _ref[k + "-layout-body"] = true, _ref[className] = className, _ref;
   };
 
   _proto.getStyles = function getStyles() {
@@ -45,6 +50,7 @@ export var Body = /*#__PURE__*/function (_Component) {
 
     if (!hasFixedAside && !hasFixedHeader) return style;
     return addStyle(style, {
+      // FIXME: we must use padding instead of margin, otherwise the table's width is wired
       paddingLeft: hasFixedAside ? getStyle(asideWidth) : null,
       marginTop: hasFixedHeader ? getStyle(headerHeight) : null
     });

package/es/components/layout/footer.d.ts

@@ -1,5 +1,6 @@
 import { Component } from 'intact';
 export declare class Footer extends Component {
     static template: string | import("intact").Template<any>;
+    private config;
     private getClassNames;
 }

package/es/components/layout/footer.js

@@ -1,11 +1,23 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component } from 'intact';
 import template from './template.vdt';
+import { useConfigContext } from '../config';
 export var Footer = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Footer, _Component);
 
   function Footer() {
-    return _Component.apply(this, arguments) || this;
+    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.config = useConfigContext();
+    return _this;
   }
 
   var _proto = Footer.prototype;
@@ -16,9 +28,8 @@ export var Footer = /*#__PURE__*/function (_Component) {
     var _this$get = this.get(),
         className = _this$get.className;
 
-    return _ref = {
-      'k-layout-footer': true
-    }, _ref[className] = className, _ref;
+    var k = this.config.k;
+    return _ref = {}, _ref[k + "-layout-footer"] = true, _ref[className] = className, _ref;
   };
 
   return Footer;

package/es/components/layout/header.d.ts

@@ -5,12 +5,15 @@ export interface HeaderProps {
     height?: number | string;
     style?: string | Record<string, string>;
     theme?: MenuProps['theme'];
+    blur?: boolean;
+    boxShadow?: boolean;
 }
 export declare class Header extends Component<HeaderProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<HeaderProps>>;
     static defaults: () => Partial<HeaderProps>;
     private rootLayout;
+    private config;
     private getClassNames;
     private getStyles;
 }

package/es/components/layout/header.js

@@ -5,11 +5,14 @@ import template from './template.vdt';
 import { addStyle } from '../utils';
 import { makeHeaderStyles, themes } from './styles';
 import { defaultHeight, ROOT_LAYOUT, getStyle } from './helpers';
+import { useConfigContext } from '../config';
 var typeDefs = {
   fixed: Boolean,
   height: [Number, String],
   style: [String, Object],
-  theme: themes
+  theme: themes,
+  blur: Boolean,
+  boxShadow: Boolean
 };
 
 var defaults = function defaults() {
@@ -33,6 +36,7 @@ export var Header = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.rootLayout = inject(ROOT_LAYOUT);
+    _this.config = useConfigContext();
     return _this;
   }
 
@@ -44,12 +48,12 @@ export var Header = /*#__PURE__*/function (_Component) {
     var _this$get = this.get(),
         className = _this$get.className,
         fixed = _this$get.fixed,
-        theme = _this$get.theme;
+        theme = _this$get.theme,
+        blur = _this$get.blur,
+        boxShadow = _this$get.boxShadow;
 
-    return _ref = {
-      'k-layout-header': true,
-      'k-fixed': fixed
-    }, _ref["k-" + theme] = true, _ref[className] = className, _ref[makeHeaderStyles()] = true, _ref;
+    var k = this.config.k;
+    return _ref = {}, _ref[k + "-layout-header"] = true, _ref[k + "-fixed"] = fixed, _ref[k + "-blur"] = blur, _ref[k + "-box-shadow"] = boxShadow, _ref[k + "-" + theme] = true, _ref[className] = className, _ref[makeHeaderStyles(k)] = true, _ref;
   };
 
   _proto.getStyles = function getStyles() {

package/es/components/layout/helpers.d.ts

@@ -1,5 +1,6 @@
 export declare const ROOT_LAYOUT = "RootLayout";
 export declare const LAYOUT = "Layout";
+export declare const BODY = "LayoutBody";
 export declare const defaultHeight = "64px";
 export declare const defaultWidth = "200px";
 export declare function getStyle(height: number | string): string;

package/es/components/layout/helpers.js

@@ -1,6 +1,7 @@
 import { isNumber } from 'intact-shared';
 export var ROOT_LAYOUT = 'RootLayout';
 export var LAYOUT = 'Layout';
+export var BODY = 'LayoutBody';
 export var defaultHeight = "64px";
 export var defaultWidth = "200px";
 export function getStyle(height) {

package/es/components/layout/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,53 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { mount, unmount } from '../../test/utils';
+import { Component } from 'intact';
+import { Layout, Header, Aside, Body } from './';
+describe('Layout', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('nest Layout in Body with fixed header', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                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.Layout = Layout;
+                _this.Header = Header;
+                _this.Aside = Aside;
+                _this.Body = Body;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Layout, Header, Aside, Body } = this;\n                <Layout>\n                    <Header fixed />\n                    <Body>\n                        <Layout>\n                            <Aside fixed />\n                            <Body>body</Body>\n                        </Layout>\n                    </Body>\n                </Layout>\n            ";
+            _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/es/components/layout/layout.d.ts

@@ -9,6 +9,8 @@ export declare class Layout extends Component {
         asideWidth: string | number;
     };
     layout: Layout | null;
+    private body;
+    private config;
     init(): void;
     private getClassNames;
     private getStyles;

package/es/components/layout/layout.js

@@ -4,8 +4,9 @@ import { Component, inject, provide } from 'intact';
 import template from './template.vdt';
 import { makeLayoutStyles } from './styles';
 import { addStyle } from '../utils';
-import { ROOT_LAYOUT, LAYOUT, getStyle } from './helpers';
+import { ROOT_LAYOUT, LAYOUT, getStyle, BODY } from './helpers';
 import { useParse } from './useParse';
+import { useConfigContext } from '../config';
 export var Layout = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Layout, _Component);
 
@@ -21,6 +22,8 @@ export var Layout = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.parse = useParse();
     _this.layout = inject(LAYOUT, null);
+    _this.body = inject(BODY, null);
+    _this.config = useConfigContext();
     return _this;
   }
 
@@ -44,15 +47,14 @@ export var Layout = /*#__PURE__*/function (_Component) {
     var _this$parse = this.parse(),
         hasAside = _this$parse.hasAside;
 
-    return _ref = {
-      'k-layout': true
-    }, _ref["k-has-aside"] = hasAside, _ref[makeLayoutStyles()] = true, _ref[className] = className, _ref;
+    var k = this.config.k;
+    return _ref = {}, _ref[k + "-layout"] = true, _ref[k + "-has-aside"] = hasAside, _ref[makeLayoutStyles(k)] = true, _ref[className] = className, _ref;
   };
 
   _proto.getStyles = function getStyles() {
     var style = this.get('style');
     var layout = this.layout;
-    if (!layout) return style;
+    if (!layout || this.body) return style;
 
     var _layout$parse = layout.parse(),
         hasFixedHeader = _layout$parse.hasFixedHeader,

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

@@ -1,6 +1,6 @@
 import '../../styles/global';
 export declare const themes: readonly ["light", "dark", "white"];
 export declare function getCollapseWidth(): string;
-export declare function makeLayoutStyles(): string;
-export declare function makeHeaderStyles(): string;
-export declare function makeAsideStyles(): string;
+export declare function makeLayoutStyles(k: string): string;
+export declare function makeHeaderStyles(k: string): string;
+export declare function makeAsideStyles(k: string): string;

package/es/components/layout/styles.js

@@ -1,7 +1,7 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
-import { deepDefaults, getLeft } from '../../styles/utils';
+import { deepDefaults, getLeft, setAlpha } from '../../styles/utils';
 import '../../styles/global';
 import { menu } from '../menu/styles';
 var sizes = ['small', 'large'];
@@ -21,7 +21,7 @@ var defaults = {
 
   light: {
     get color() {
-      return menu.light.bgColor;
+      return menu.light.item.color;
     },
 
     get bgColor() {
@@ -35,7 +35,7 @@ var defaults = {
   },
   white: {
     get color() {
-      return menu.white.bgColor;
+      return menu.white.item.color;
     },
 
     get bgColor() {
@@ -64,20 +64,20 @@ setDefault(function () {
 export function getCollapseWidth() {
   return layout.collapsedWidth;
 }
-export function makeLayoutStyles() {
-  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 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 function makeHeaderStyles() {
-  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, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
+export 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, ";}");
+    return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";&.", k, "-blur{background:", setAlpha(styles.bgColor, 0.1), ";}}");
   }), ";");
 }
-export function makeAsideStyles() {
+export 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];
-    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;}");
+    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/layout/template.vdt.js

@@ -10,9 +10,10 @@ export default function ($props, $blocks, $__proto__) {
       children = _this$get.children,
       style = _this$get.style;
 
+  var k = this.config.k;
   return _$cv('div', _extends({
     'className': _$cn(this.getClassNames()),
-    'style': this.getStyles ? this.getStyles() : style
+    'style': this.getStyles ? this.getStyles(k) : style
   }, getRestProps(this)), children);
 }
 ;

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

@@ -22,6 +22,7 @@ export declare class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     private expanded;
     private dropdown;
     private router;
+    private config;
     init(): void;
     onClick(hasSubMenu: Menu, e: MouseEvent): void;
 }

package/es/components/menu/item.js

@@ -10,6 +10,7 @@ import { useDropdown } from './useDropdown';
 import { useRouter, navigate } from '../../hooks/useRouter';
 import { useRecordItem } from '../../hooks/useRecordComponent';
 import { MENU_RECORD_KEY, useHighlightItem } from './useHighlight';
+import { useConfigContext } from '../config';
 var typeDefs = {
   key: {
     type: [String, Number],
@@ -43,6 +44,7 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
     _this.expanded = useExpanded(_this.rootMenu, _this.parentMenu);
     _this.dropdown = useDropdown(_this.rootMenu, _this.parentMenu);
     _this.router = useRouter();
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -8,12 +8,6 @@ import { Menu } from './menu';
 import { getRestProps, expandAnimationCallbacks } from '../utils';
 import { isNullOrUndefined } from 'intact-shared';
 import { makeItemStyles, makeTitleStyles } from './styles';
-var _$tmp0 = {
-  'className': 'k-menu-dot ion-record'
-};
-var _$tmp1 = {
-  'className': 'k-menu-arrow k-icon-down'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -51,17 +45,18 @@ export default function ($props, $blocks, $__proto__) {
       position = _this$dropdown.position,
       isCollapse = _this$dropdown.isCollapse;
 
-  var classNameObj = (_classNameObj = {
-    'k-menu-item': true
-  }, _classNameObj[className] = className, _classNameObj['k-expanded'] = isExpanded, _classNameObj['k-disabled'] = disabled, _classNameObj['k-active'] = isSelected(key), _classNameObj['k-highlighted'] = isHighlighted(key), _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-menu-item"] = true, _classNameObj[className] = className, _classNameObj[k + "-expanded"] = isExpanded, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-active"] = isSelected(key), _classNameObj[k + "-highlighted"] = isHighlighted(key), _classNameObj[makeItemStyles(k)] = true, _classNameObj);
   var showDot = isTopItem && !iconVNode && isNullOrUndefined(dot) ? rootDot : dot;
 
   var title = function title(children) {
     var _$cn2;
 
-    return _$ce(2, 'div', [showDot ? _$cc(Icon, _$tmp0) : undefined, _$ce(2, 'div', children, 0, 'k-menu-name'), subMenuVNode ? _$cc(Icon, _$tmp1) : undefined], 0, _$cn((_$cn2 = {
-      'k-menu-title': true
-    }, _$cn2[makeTitleStyles()] = true, _$cn2)), {
+    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)), {
       'ev-click': _this.onClick.bind(_this, subMenuVNode)
     });
   };

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

@@ -25,5 +25,6 @@ export declare class Menu<K extends Key = Key> extends Component<MenuProps<K>, M
     parentMenu: Menu<Key> | null;
     subExpandedKeys?: Set<K>;
     highlight?: ReturnType<typeof useHighlight>;
+    private config;
     init(): void;
 }

package/es/components/menu/menu.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component, provide, inject } from 'intact';
 import template from './menu.vdt';
 import { useHighlight } from './useHighlight';
+import { useConfigContext } from '../config';
 var typeDefs = {
   expandedKeys: Array,
   selectedKey: [String, Number],
@@ -42,6 +43,7 @@ export var Menu = /*#__PURE__*/function (_Component) {
     _this.parentMenu = inject(MENU, null);
     _this.subExpandedKeys = void 0;
     _this.highlight = void 0;
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -26,9 +26,8 @@ export default function ($props, $blocks, $__proto__) {
 
   var isRootMenu = !this.rootMenu;
   var isDropdownMenu = !isRootMenu && isDropdown(this.rootMenu);
-  var 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()] = true, _classNameObj);
+  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 header = (_$blocks['header'] = function ($super) {
     return null;
   }, __$blocks['header'] = function ($super, data) {
@@ -42,9 +41,7 @@ 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 = {
-    'k-menu-header': true
-  }, _$cn2[makeTitleStyles()] = true, _$cn2))) : undefined, children];
+  }), 0, _$cn((_$cn2 = {}, _$cn2[k + "-menu-header"] = true, _$cn2[makeTitleStyles(k)] = true, _$cn2))) : undefined, children];
   return !isDropdownMenu ? _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
   }), [content, null]) : _$cc(DropdownMenu, _extends({}, getRestProps(this), {

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

@@ -62,6 +62,6 @@ declare const defaults: {
 };
 declare let menu: typeof defaults;
 export { menu };
-export declare function makeMenuStyles(): string;
-export declare function makeTitleStyles(): string;
-export declare function makeItemStyles(): string;
+export declare function makeMenuStyles(k: string): string;
+export declare function makeTitleStyles(k: string): string;
+export declare function makeItemStyles(k: string): string;

package/es/components/menu/styles.js

@@ -117,24 +117,24 @@ setDefault(function () {
   }).menu;
 });
 export { menu };
-export function makeMenuStyles() {
+export function makeMenuStyles(k) {
   var _context;
 
-  // we must increase the priority by adding &.k-menu
+  // 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, ";}&:not(.k-dropdown-menu) &:not(.k-dropdown-menu){width:auto;background:", menu.subBgColor, ";.k-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " + ", menu.icon.gap, ");}}&:not(.k-dropdown-menu) &:not(.k-dropdown-menu) &:not(.k-dropdown-menu){.k-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " * 2 + ", menu.icon.gap, ");}}.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) {
+  return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";}&:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu){width:auto;background:", menu.subBgColor, ";.", k, "-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " + ", menu.icon.gap, ");}}&:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu){.", k, "-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " * 2 + ", menu.icon.gap, ");}}.", 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, "-", 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) {
     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, "-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, ";}}");
 }
-export function makeTitleStyles() {
+export function makeTitleStyles(k) {
   var item = menu.item;
-  return /*#__PURE__*/css("display:flex;align-items:center;padding:", menu.item.padding, ";color:", menu.item.color, ";white-space:nowrap;overflow:hidden;flex-wrap:nowrap;");
+  return /*#__PURE__*/css("display:flex;align-items:center;padding:", item.padding, ";color:", item.color, ";white-space:nowrap;overflow:hidden;flex-wrap:nowrap;");
 }
-export function makeItemStyles() {
+export function makeItemStyles(k) {
   var item = menu.item;
-  return /*#__PURE__*/css(".k-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", menu.transition, ";&:hover{color:", menu.item.hoverColor, ";}}.k-menu-name{flex:1;display:flex;align-items:center;}.k-menu-arrow{transition:transform ", menu.transition, ";margin-left:", menu.icon.gap, ";}&.k-expanded{>.k-menu-title{color:", menu.item.hoverColor, ";.k-menu-arrow{transform:rotateX(180deg);}}}&.k-highlighted{>.k-menu-title{color:", menu.item.hoverColor, ";}}&.k-active{>.k-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.k-disabled{>.k-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.k-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
+  return /*#__PURE__*/css(".", k, "-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", menu.transition, ";&:hover{color:", menu.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, "-menu-arrow{transition:transform ", menu.transition, ";margin-left:", menu.icon.gap, ";}&.", k, "-expanded{>.", k, "-menu-title{color:", menu.item.hoverColor, ";.", k, "-menu-arrow{transform:rotateX(180deg);}}}&.", k, "-highlighted{>.", k, "-menu-title{color:", menu.item.hoverColor, ";}}&.", k, "-active{>.", k, "-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.", k, "-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
 }

package/es/components/menu/useDropdown.js

@@ -1,4 +1,4 @@
-import { useInstance, onBeforeMount, onBeforeUpdate, inject } from 'intact';
+import { useInstance, onBeforeMount, onBeforeUpdate, inject, createVNode } from 'intact';
 import { Menu } from './';
 import { Icon } from '../icon';
 import { isComponentVNode, eachChildren, isTextVNode, isStringOrNumberNotEmpty } from '../utils';
@@ -38,6 +38,11 @@ export function useDropdown(rootMenu, parentMenu) {
           iconVNode = vNode;
         }
       } else {
+        if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
+          // wrap with span for showing text ellipsis
+          vNode = createVNode('span', null, vNode);
+        }
+
         titleVNodes.push(vNode);
       }
     });

package/es/components/message/message.d.ts

@@ -16,5 +16,6 @@ export declare class Message extends Component<MessageProps> {
     static success(content: Children | Partial<MessageProps>, duration?: number): void;
     static warning(content: Children | Partial<MessageProps>, duration?: number): void;
     private delayClose;
+    private config;
     close(): void;
 }

package/es/components/message/message.js

@@ -8,6 +8,7 @@ import { Messages } from './messages';
 import { useDelayClose } from '../../hooks/useDelayClose';
 import { isObject } from 'intact-shared';
 import { bind } from '../utils';
+import { useConfigContext } from '../config';
 var typeDefs = {
   content: [String, VNode],
   duration: Number,
@@ -40,6 +41,7 @@ export var Message = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.delayClose = useDelayClose(_this.close, _this.get('duration'));
+    _this.config = useConfigContext();
     return _this;
   }