@king-design/intact 3.2.2-beta.0 → 3.3.0

package/components/menu/demos/showCollapseArrow.md

@@ -6,7 +6,7 @@ order: 6
 `showCollapseArrow`定义是否展示折叠按钮，`MenuTitle`定义菜单标题项。
 
 ```vdt
-import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button} from 'kpc';
+import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button, Divider} from 'kpc';
 <div>
     <ButtonGroup checkType="radio"
         v-model="theme"
@@ -44,7 +44,7 @@ import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button} from 'kpc'
         <MenuTitle>title 1</MenuTitle>
         <MenuItem key="1">menu 1</MenuItem>
         <MenuItem key="2">menu 2</MenuItem>
-        <MenuItem key="3">menu 3</MenuItem>
+        <MenuItem key="3">menu 3menu 3menu 3menu 3menu 3menu 3</MenuItem>
         <MenuTitle>title 2</MenuTitle>
         <MenuItem key="4">menu 1</MenuItem>
         <MenuItem key="5" disabled>menu 2</MenuItem>
@@ -57,12 +57,13 @@ import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button} from 'kpc'
                 <MenuItem key="6-4">
                     sub menu 7
                     <Menu>
-                        <MenuItem key="6-7-1">Option 1</MenuItem>
-                        <MenuItem key="6-7-2">Option 2</MenuItem>
+                        <MenuItem key="6-7-1">option 1</MenuItem>
+                        <MenuItem key="6-7-2">option 2</MenuItem>
                     </Menu>
                 </MenuItem>
             </Menu>
         </MenuItem>
+        <Divider theme={ this.get('theme') === 'white' ? 'light' : this.get('theme')} class="divider-style"/>
         <MenuItem key="8" to="/">menu 8</MenuItem>
     </Menu>
 </div>
@@ -71,6 +72,8 @@ import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button} from 'kpc'
 ```styl
 .k-switch
     margin 0 16px
+.divider-style
+    margin 4px 0 0 0
 ```
 
 ```ts

package/components/menu/item.vdt

@@ -3,12 +3,13 @@ import {Dropdown, DropdownItem} from '../dropdown';
 import {Tooltip} from '../tooltip';
 import {Icon} from '../icon';
 import {Menu} from './menu';
+import {Ellipsis} from '../ellipsis';
 import {getRestProps, expandAnimationCallbacks} from '../utils';
 import {isNullOrUndefined} from 'intact-shared';
 import {makeItemStyles, makeTitleStyles, makeNestedMenuStyles} from './styles';
 
 const rootMenu = this.rootMenu;
-const {theme, type, dot: rootDot} = rootMenu.get();
+const {theme, type, dot: rootDot, size} = rootMenu.get();
 const {children, key, className, disabled, dot} = this.get();
 const {isHighlighted, isSelected} = rootMenu.highlight;
 const {isExpanded: isExpandedKey} = this.expanded;
@@ -36,7 +37,9 @@ const title = (children) => (
         ev-click={this.onClick.bind(this, subMenuVNode)}
     >
         <Icon class={`${k}-menu-dot ion-record`} v-if={showDot} />
-        <div class={`${k}-menu-name`}>{children}</div>
+        <div class={`${k}-menu-name`}>
+            <Ellipsis position="bottom">{children}</Ellipsis>
+        </div>
         <Icon class={`${k}-menu-item-arrow ion-arrow-down-b`} v-if={subMenuVNode} />
     </div>
 );
@@ -52,7 +55,7 @@ const title = (children) => (
             {(() => {
                 if (subMenuVNode) {
                     const paddingLeft = this.parentMenu.get('_paddingLeft');
-                    const [_classname, _paddingLeft] = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft);
+                    const [_classname, _paddingLeft] = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft, size);
                     const className = _$cn({
                         [_classname]: true,
                         [subMenuVNode.className]: subMenuVNode.className,

package/components/menu/styles.ts

@@ -1,6 +1,7 @@
 import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, getLeft, palette} from '../../styles/utils';
+import type {MenuProps} from './menu';
 import '../../styles/global';
 import { cache } from '../utils';
 
@@ -121,7 +122,7 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
 
         .${k}-menu-body {
             padding: ${menu.item.bodyPadding};
-            max-height: calc(100vh - ${menu.header.height});
+            max-height: calc(100% - ${menu.header.height});
             overflow-y: auto;
             overflow-x: hidden;
         }
@@ -169,6 +170,7 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
         // theme light
         &.${k}-light {
             border: 1px solid ${theme.color.disabledBg};
+            border-top: 0;
             background: ${menu.light.bgColor};
             .${k}-menu-header {
                 color: ${menu.light.title.color};
@@ -342,13 +344,9 @@ export const makeItemStyles = cache(function makeItemStyles(k: string) {
             display: flex;
             align-items: center;
             min-width: 0;
-            span {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                min-width: 0;
-            }
             .${k}-icon {
                 color: inherit;
+                display: inline-block;
             }
         }
         .${k}-menu-item-arrow {
@@ -399,8 +397,9 @@ export const makeItemStyles = cache(function makeItemStyles(k: string) {
     `
 });
 
-export const makeNestedMenuStyles = cache(function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding)) {
-    const paddingLeft = `${parentPaddingLeft}${hasIcon ? ' + ' + menu.icon.width + ' + ' + menu.icon.gap : ''}`;
+export const makeNestedMenuStyles = cache(function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding), size: MenuProps['size']) {
+    const fontSize = `${size === 'small' ? menu.small.fontSize : menu.fontSize}`;
+    const paddingLeft = `${parentPaddingLeft}${hasIcon ? ' + ' + menu.icon.width + ' + ' + menu.icon.gap : ' + ' + fontSize}`;
     return [
         css`
             &.${k}-menu {
@@ -410,6 +409,7 @@ export const makeNestedMenuStyles = cache(function makeNestedMenuStyles(k: strin
                 border: none;
                 .${k}-menu-body {
                     padding: 0;
+                    max-height: 100%;
                     .${k}-menu-item-title {
                         padding-left: calc(${paddingLeft});
                     }

package/components/menu/title.vdt

@@ -1,4 +1,5 @@
 import {Icon} from '../icon';
+import {Ellipsis} from '../ellipsis';
 import {getRestProps, findChildren, isComponentVNode} from '../utils';
 import {makeTitleStyles} from './styles';
 
@@ -17,7 +18,7 @@ const classNameObj = {
         [`${k}-menu-name`]: true,
         [makeTitleStyles(k)]: true
     }}>
-        <span v-if={!collapse}>{children}</span>
+        <Ellipsis position="bottom" v-if={!collapse}>{children}</Ellipsis>
         <template v-else>
             {findChildren(children, vNode => isComponentVNode(vNode, Icon))}
         </template>

package/components/table/table.vdt

@@ -120,7 +120,7 @@ const tbody = (
         {!hasData ? 
             <tr key="table-empty">
                 <td colspan={colCount} class={`${k}-table-empty`}>
-                    <b:empty>{_$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~')}</b:empty>
+                    <b:empty>{_$('暂无数据')}</b:empty>
                 </td>
             </tr> :
             (() => {

package/components/tag/index.spec.ts

@@ -4,7 +4,7 @@ import TagsDemo from '~/components/tag/demos/tags';
 import DraggableDemo from '~/components/tag/demos/draggable';
 
 describe('Tag', () => {
-    // afterEach(() => unmount());
+    afterEach(() => unmount());
 
     it('should not close tag if we has prevented default', async () => {
         const [instance, element] = mount(ClosableDemo);

package/components/tag/tags.vdt

@@ -44,7 +44,7 @@ const vNodes = children.value;
             +{hiddenChildren.value.length}
         </Tag>
         <b:content>
-            <div class={classNameObj}>{hiddenChildren.value}</div>
+            <div class={{ ...classNameObj, [`${k}-nowrap`]: false /* should not nowrap */ }}>{hiddenChildren.value}</div>
         </b:content>
     </Tooltip>
     <b:append />

package/components/view/index.ts

@@ -0,0 +1,24 @@
+import { Component, createVNode as h, TypeDefs } from 'intact';
+
+export interface ViewProps {
+    tag?: string,
+} 
+
+const typeDefs: Required<TypeDefs<ViewProps>> = {
+    tag: String,
+};
+
+/**
+ * A component only used in React or Vue to bind event, so that
+ * it can use Intact Event system to stop propagation (stopPropagation).
+ */
+export class View extends Component<ViewProps> {
+    static template(this: View) {
+        const { tag, ...rest } = this.get();
+        return h(tag!, rest as any);
+    }
+    static typeDefs = typeDefs;
+    static defaults() {
+        return { tag: 'div' };
+    }
+}

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

@@ -0,0 +1,14 @@
+import { Component, TypeDefs } from 'intact';
+export interface DividerProps {
+    borderType?: 'solid' | 'dashed' | 'dotted' | 'double';
+    position?: 'left' | 'right' | 'center';
+    type?: 'vertical' | 'horizontal';
+    theme?: 'light' | 'dark';
+    margin?: 'large' | 'default' | 'small' | 'none' | number;
+}
+export declare class Divider extends Component<DividerProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<DividerProps>>;
+    static defaults: () => Partial<DividerProps>;
+    private config;
+}

package/es/components/divider/index.js

@@ -0,0 +1,38 @@
+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 './index.vdt';
+import { useConfigContext } from '../config';
+var typeDefs = {
+  borderType: ['solid', 'dashed', 'dotted', 'double'],
+  position: ['left', 'right', 'center'],
+  type: ['vertical', 'horizontal'],
+  theme: ['light', 'dark'],
+  margin: ['large', 'default', 'small', 'none', Number]
+};
+var defaults = function defaults() {
+  return {
+    borderType: 'solid',
+    position: 'center',
+    type: 'horizontal',
+    theme: 'light',
+    margin: 'default'
+  };
+};
+export var Divider = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Divider, _Component);
+  function Divider() {
+    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;
+  }
+  return Divider;
+}(Component);
+Divider.template = template;
+Divider.typeDefs = typeDefs;
+Divider.defaults = defaults;

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1 @@
+"use strict";

package/es/components/divider/index.vdt.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact';
+import { makeStyles } from './styles';
+import { getRestProps, addStyle } from '../utils';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$get = this.get(),
+    children = _this$get.children,
+    className = _this$get.className,
+    borderType = _this$get.borderType,
+    position = _this$get.position,
+    type = _this$get.type,
+    theme = _this$get.theme,
+    margin = _this$get.margin,
+    style = _this$get.style;
+  var k = this.config.k;
+  var _style = {};
+  if (typeof margin === 'number') {
+    var _margin = type === 'vertical' ? "0 " + margin + "px" : margin + "px 0";
+    _style.margin = _margin;
+  }
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-divider"] = true, _classNameObj[k + "-" + (theme === 'dark' ? 'dark' : 'light')] = theme, _classNameObj[k + "-" + type] = type, _classNameObj[k + "-" + margin] = margin && typeof margin !== 'number', _classNameObj[k + "-with-text"] = children && type === 'horizontal', _classNameObj[k + "-" + position] = position !== 'center', _classNameObj[makeStyles(k, borderType)] = true, _classNameObj[className] = className, _classNameObj);
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj),
+    'style': addStyle(style, _style)
+  }), children && type === 'horizontal' ? _$ce(2, 'div', children, 0, _$cn(k + "-divider-text")) : undefined);
+}
+;

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

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare const makeStyles: {
+    (k: string, borderType: string): string;
+    clearCache(): {};
+};

package/es/components/divider/styles.js

@@ -0,0 +1,35 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+var sizes = ['large', 'default', 'small'];
+var defaults = {
+  positionOffset: '5%',
+  get borderColor() {
+    return theme.color.darkBorder;
+  },
+  light: {
+    get borderColor() {
+      return theme.color.disabledBg;
+    }
+  },
+  large: {
+    get margin() {
+      return theme.large.padding;
+    }
+  }
+};
+var divider;
+setDefault(function () {
+  divider = deepDefaults(theme, {
+    divider: defaults
+  }).divider;
+  makeStyles == null || makeStyles.clearCache();
+});
+export var makeStyles = cache(function makeStyles(k, borderType) {
+  return /*#__PURE__*/css("&.", k, "-divider{padding:0;border-top:1px ", borderType, " ", divider.borderColor, ";}&.", k, "-light{border-top-color:", divider.light.borderColor, ";&.", k, "-with-text{&::before,&::after{border-top-color:", divider.light.borderColor, ";}}&.", k, "-vertical{border-right-color:", divider.light.borderColor, ";}}&.", k, "-vertical{border-top:0;display:inline-block;height:100%;border-right:1px solid ", divider.borderColor, ";vertical-align:middle;}&.", k, "-horizontal{width:100%;min-width:100%;}&.", k, "-with-text{border-top:0;display:flex;align-items:center;white-space:nowrap;text-align:center;&::before,&::after{width:50%;content:'';transform:translateY(50%);border-top:1px solid ", divider.borderColor, ";}}.", k, "-divider-text{padding:0 16px;}&.", k, "-left{&::before{width:", divider.positionOffset, ";}&::after{width:calc(100% - ", divider.positionOffset, ");}}&.", k, "-right{&::before{width:calc(100% - ", divider.positionOffset, ");}&::after{width:", divider.positionOffset, ";}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    return /*#__PURE__*/css("&.", k, "-", size, "{margin:", theme[size].margin, " 0;&.", k, "-vertical{margin:0 ", theme[size].margin, ";}}");
+  }), ";");
+});

package/es/components/dropdown/dropdown.js

@@ -177,8 +177,8 @@ Dropdown.template = function () {
   if (this.$isVue || this.$isVueNext) {
     if (Array.isArray(children)) {
       children = _filterInstanceProperty(children).call(children, function (child) {
-        return child !== ' ';
-      });
+        return child !== ' ' && child;
+      } /* comment is null in vue3 */);
     }
   }
   if (process.env.NODE_ENV !== 'production') {

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

@@ -0,0 +1,16 @@
+import { Component, TypeDefs } from 'intact';
+import { Options } from '../position';
+export type Position = Options;
+export interface EllipsisProps {
+    maxLines?: number;
+    disabled?: boolean;
+    position?: Position | 'left' | 'bottom' | 'right' | 'top';
+    theme?: 'light' | 'dark';
+}
+export declare class Ellipsis extends Component<EllipsisProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<EllipsisProps>>;
+    static defaults: () => Partial<EllipsisProps>;
+    private ellipsis;
+    private config;
+}

package/es/components/ellipsis/index.js

@@ -0,0 +1,36 @@
+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 './index.vdt';
+import { useEllipsis } from './useEllipsis';
+import { useConfigContext } from '../config';
+var typeDefs = {
+  maxLines: Number,
+  disabled: Boolean,
+  position: [Object, 'left', 'bottom', 'right', 'top'],
+  theme: ['light', 'dark']
+};
+var defaults = function defaults() {
+  return {
+    disabled: false,
+    theme: 'light'
+  };
+};
+export var Ellipsis = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Ellipsis, _Component);
+  function Ellipsis() {
+    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.ellipsis = useEllipsis();
+    _this.config = useConfigContext();
+    return _this;
+  }
+  return Ellipsis;
+}(Component);
+Ellipsis.template = template;
+Ellipsis.typeDefs = typeDefs;
+Ellipsis.defaults = defaults;

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

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

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

@@ -0,0 +1,94 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/ellipsis/demos/basic';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+describe('Ellipsis', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  it('should support drag Ellipsis', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, _element$querySelecto, ellipsis1, ellipsis2, dragLine, children1, content1, children2, content2;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+          _element$querySelecto = element.querySelectorAll('.k-ellipsis'), ellipsis1 = _element$querySelecto[0], ellipsis2 = _element$querySelecto[1];
+          dragLine = element.querySelector('.k-split-line-wrapper'); // There is no tooltip content by default
+          expect(getElement('.k-tooltip-content')).to.be.undefined;
+          // mouse move
+          dispatchEvent(dragLine, 'mousedown', {
+            which: 1,
+            clientX: 200,
+            clientY: 0
+          });
+          dispatchEvent(document, 'mousemove', {
+            clientX: 100,
+            clientY: 0
+          });
+          dispatchEvent(dragLine, 'mouseup');
+          _context.next = 9;
+          return wait(200);
+        case 9:
+          expect(element.outerHTML).to.matchSnapshot();
+          // mouseenter ellipsis dom
+          children1 = ellipsis1.firstElementChild;
+          dispatchEvent(children1, 'mouseenter');
+          _context.next = 14;
+          return wait(0);
+        case 14:
+          expect(children1.classList.contains('k-dropdown-open')).to.be.true;
+          content1 = getElement('.k-tooltip-content');
+          expect(content1.textContent).eql('测试测试测试测试测试测试');
+          children2 = ellipsis2.firstElementChild;
+          dispatchEvent(children2, 'mouseenter');
+          _context.next = 21;
+          return wait(0);
+        case 21:
+          content2 = getElement('.k-tooltip-content');
+          expect(content2.textContent).eql('最大几行忽略最大几行忽略最大几行忽略');
+        case 23:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('should disabled tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, ellipsis3, dragLine, children3;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
+          ellipsis3 = element.querySelectorAll('.k-ellipsis')[2];
+          dragLine = element.querySelector('.k-split-line-wrapper');
+          dispatchEvent(dragLine, 'mousedown', {
+            which: 1,
+            clientX: 200,
+            clientY: 0
+          });
+          dispatchEvent(document, 'mousemove', {
+            clientX: 300,
+            clientY: 0
+          });
+          dispatchEvent(dragLine, 'mouseup');
+          _context2.next = 8;
+          return wait(200);
+        case 8:
+          // disabled close tooltip
+          expect(ellipsis3.firstElementChild.classList.contains('k-dropdown-open')).to.be.false;
+          instance.set('disabled', false);
+          _context2.next = 12;
+          return wait();
+        case 12:
+          children3 = ellipsis3.firstElementChild;
+          dispatchEvent(children3, 'mouseenter');
+          _context2.next = 16;
+          return wait();
+        case 16:
+          expect(children3.classList.contains('k-dropdown-open')).to.be.true;
+        case 17:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/es/components/ellipsis/index.vdt.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createElementVNode as _$ce, className as _$cn, createVNode as _$cv, createUnknownComponentVNode as _$cc, extend as _$ex, EMPTY_OBJ as _$em } from 'intact';
+import { makeStyles } from './styles';
+import { Tooltip } from '../tooltip';
+import { getRestProps, addStyle } from '../utils';
+export default function ($props, $blocks, $__proto__) {
+  var _$cn2, _$cn3;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$get = this.get(),
+    children = _this$get.children,
+    className = _this$get.className,
+    maxLines = _this$get.maxLines,
+    disabled = _this$get.disabled,
+    position = _this$get.position,
+    theme = _this$get.theme,
+    style = _this$get.style;
+  var k = this.config.k;
+  var _this$ellipsis = this.ellipsis,
+    showTooltip = _this$ellipsis.showTooltip,
+    ellipsisRef = _this$ellipsis.ellipsisRef;
+  var tooltip = showTooltip.value && !disabled;
+  var wrapper = _$ce(2, 'div', children, 0, _$cn((_$cn2 = {
+    'c-ellipsis': true
+  }, _$cn2[k + "-ellipsis-wrapper"] = true, _$cn2[className] = className && !tooltip, _$cn2)));
+  return _$cv('div', _extends({}, getRestProps(this), {
+    'className': _$cn((_$cn3 = {}, _$cn3[k + "-ellipsis"] = true, _$cn3[k + "-multiline"] = maxLines, _$cn3[makeStyles(k, maxLines)] = true, _$cn3)),
+    'ref': ellipsisRef
+  }), tooltip ? _$cc(Tooltip, {
+    'position': position,
+    'theme': theme,
+    'className': _$cn(className),
+    'children': wrapper,
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+        __$blocks = _$ex({}, $blocks);
+      return (_$blocks['content'] = function ($super) {
+        return children;
+      }, __$blocks['content'] = function ($super, data) {
+        var block = $blocks['content'];
+        var callBlock = function callBlock() {
+          return _$blocks['content'].call($this, $super, data);
+        };
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), __$blocks;
+    }.call($this, _$em)
+  }) : wrapper);
+}
+;

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

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare const makeStyles: {
+    (k: string, maxLines: number): string;
+    clearCache(): {};
+};

package/es/components/ellipsis/styles.js

@@ -0,0 +1,10 @@
+import { css } from '@emotion/css';
+import { setDefault } from '../../styles/theme';
+import '../../styles/global';
+import { cache } from '../utils';
+setDefault(function () {
+  makeStyles == null || makeStyles.clearCache();
+});
+export var makeStyles = cache(function makeStyles(k, maxLines) {
+  return /*#__PURE__*/css("width:100%;&.", k, "-multiline{.k-ellipsis-wrapper{white-space:normal;display:-webkit-box;-webkit-line-clamp:", maxLines, ";-webkit-box-orient:vertical;}}");
+});

package/es/components/ellipsis/useEllipsis.d.ts

@@ -0,0 +1,4 @@
+export declare function useEllipsis(): {
+    ellipsisRef: import("intact").RefObject<HTMLDivElement>;
+    showTooltip: import("../../hooks/useState").State<boolean>;
+};

package/es/components/ellipsis/useEllipsis.js

@@ -0,0 +1,21 @@
+import { useInstance, createRef } from 'intact';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { useState } from '../../hooks/useState';
+export function useEllipsis() {
+  var instance = useInstance();
+  var ellipsisRef = createRef();
+  var showTooltip = useState(false);
+  useResizeObserver(ellipsisRef, isShowTooltip);
+  function isShowTooltip() {
+    var isMulti = instance.get('maxLines');
+    var element = ellipsisRef.value.children[0];
+    var _showTooltip = isMulti ? element.scrollHeight > element.clientHeight : element.offsetWidth < element.scrollWidth;
+    requestAnimationFrame(function () {
+      showTooltip.set(_showTooltip);
+    });
+  }
+  return {
+    ellipsisRef: ellipsisRef,
+    showTooltip: showTooltip
+  };
+}

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

@@ -5,6 +5,7 @@ import { Dropdown, DropdownItem } from '../dropdown';
 import { Tooltip } from '../tooltip';
 import { Icon } from '../icon';
 import { Menu } from './menu';
+import { Ellipsis } from '../ellipsis';
 import { getRestProps, expandAnimationCallbacks } from '../utils';
 import { isNullOrUndefined } from 'intact-shared';
 import { makeItemStyles, makeTitleStyles, makeNestedMenuStyles } from './styles';
@@ -18,7 +19,8 @@ export default function ($props, $blocks, $__proto__) {
   var _rootMenu$get = rootMenu.get(),
     theme = _rootMenu$get.theme,
     type = _rootMenu$get.type,
-    rootDot = _rootMenu$get.dot;
+    rootDot = _rootMenu$get.dot,
+    size = _rootMenu$get.size;
   var _this$get = this.get(),
     children = _this$get.children,
     key = _this$get.key,
@@ -46,7 +48,10 @@ export default function ($props, $blocks, $__proto__) {
     var _$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, {
+    }) : undefined, _$ce(2, 'div', _$cc(Ellipsis, {
+      'position': 'bottom',
+      'children': children
+    }), 2, _$cn(k + "-menu-name")), subMenuVNode ? _$cc(Icon, {
       '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)
@@ -62,7 +67,7 @@ export default function ($props, $blocks, $__proto__) {
       if (subMenuVNode) {
         var _$cn3;
         var paddingLeft = _this.parentMenu.get('_paddingLeft');
-        var _makeNestedMenuStyles = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft),
+        var _makeNestedMenuStyles = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft, size),
           _classname = _makeNestedMenuStyles[0],
           _paddingLeft = _makeNestedMenuStyles[1];
         var _className = _$cn((_$cn3 = {}, _$cn3[_classname] = true, _$cn3[subMenuVNode.className] = subMenuVNode.className, _$cn3[k + "-sub-menu"] = true, _$cn3));