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

package/__tests__/components/dropdown.spec.ts

@@ -27,6 +27,7 @@ describe('Dropdown', () => {
                             <DropdownItem>item 2</DropdownItem>
                             <DropdownItem>item 3</DropdownItem>
                         </DropdownMenu>
+                        <!-- comment -->
                     </Dropdown>
                 </div>
             `,

package/components/divider/index.d.ts

@@ -0,0 +1,14 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+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-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<DividerProps>>;
+    static defaults: () => Partial<DividerProps>;
+    private config;
+}

package/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-vue-next';
+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/components/divider/index.spec.d.ts

@@ -0,0 +1 @@
+

package/components/divider/index.spec.js

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

package/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-vue-next';
+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/components/divider/styles.d.ts

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

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

@@ -0,0 +1,16 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+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-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<EllipsisProps>>;
+    static defaults: () => Partial<EllipsisProps>;
+    private ellipsis;
+    private config;
+}

package/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-vue-next';
+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/components/ellipsis/index.spec.d.ts

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

package/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/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-vue-next';
+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/components/ellipsis/styles.d.ts

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

package/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/components/ellipsis/useEllipsis.d.ts

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

package/components/ellipsis/useEllipsis.js

@@ -0,0 +1,21 @@
+import { useInstance, createRef } from 'intact-vue-next';
+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/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));

package/components/menu/styles.d.ts

@@ -78,6 +78,6 @@ export declare const makeItemStyles: {
     clearCache(): {};
 };
 export declare const makeNestedMenuStyles: {
-    (k: string, hasIcon: boolean, parentPaddingLeft?: string | undefined): string;
+    (k: string, hasIcon: boolean, parentPaddingLeft: string | undefined, size: "small" | "large" | "default" | undefined): string;
     clearCache(): {};
 };

package/components/menu/styles.js

@@ -112,7 +112,7 @@ export { menu };
 export var makeMenuStyles = cache(function makeMenuStyles(k) {
   // 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, ";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;overflow-x:hidden;}.", 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) {
+  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(100% - ", menu.header.height, ");overflow-y:auto;overflow-x:hidden;}.", 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, ";border-top:0;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, "-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, ";}}}");
@@ -123,12 +123,13 @@ export var makeTitleStyles = cache(function makeTitleStyles(k) {
 });
 export var makeItemStyles = cache(function makeItemStyles(k) {
   var item = menu.item;
-  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);}");
+  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;.", k, "-icon{color:inherit;display:inline-block;}}.", 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) {
+export var makeNestedMenuStyles = cache(function makeNestedMenuStyles(k, hasIcon, parentPaddingLeft, size) {
   if (parentPaddingLeft === void 0) {
     parentPaddingLeft = getLeft(menu.item.padding);
   }
-  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];
+  var fontSize = "" + (size === 'small' ? menu.small.fontSize : menu.fontSize);
+  var paddingLeft = "" + parentPaddingLeft + (hasIcon ? ' + ' + menu.icon.width + ' + ' + menu.icon.gap : ' + ' + fontSize);
+  return [/*#__PURE__*/css("&.", k, "-menu{position:relative;width:auto;background:", menu.bgColor, ";border:none;.", k, "-menu-body{padding:0;max-height:100%;.", k, "-menu-item-title{padding-left:calc(", paddingLeft, ");}.", k, "-menu-item-title,.", k, "-menu-item-arrow{color:", menu.item.subTitleColor, ";}}}"), paddingLeft];
 });

package/components/menu/title.vdt.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-vue-next';
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
 import { Icon } from '../icon';
+import { Ellipsis } from '../ellipsis';
 import { getRestProps, findChildren, isComponentVNode } from '../utils';
 import { makeTitleStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
@@ -18,7 +19,10 @@ export default function ($props, $blocks, $__proto__) {
   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) {
+  }, getRestProps(this)), _$ce(2, 'div', !collapse ? _$cc(Ellipsis, {
+    'position': 'bottom',
+    'children': children
+  }) : findChildren(children, function (vNode) {
     return isComponentVNode(vNode, Icon);
   }), 0, _$cn((_$cn2 = {}, _$cn2[k + "-menu-name"] = true, _$cn2[makeTitleStyles(k)] = true, _$cn2))));
 }

package/components/table/table.vdt.js

@@ -160,7 +160,7 @@ export default function ($props, $blocks, $__proto__) {
     onRowDragEnd = _this$draggable.onRowDragEnd,
     draggingKey = _this$draggable.draggingKey;
   var tbody = _$ce(2, 'tbody', !hasData ? _$ce(2, 'tr', _$ce(2, 'td', (_$blocks['empty'] = function ($super) {
-    return _$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~');
+    return _$('暂无数据');
   }, __$blocks['empty'] = function ($super, data) {
     var block = $blocks['empty'];
     var callBlock = function callBlock() {

package/components/tag/index.spec.js

@@ -1,11 +1,13 @@
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import ClosableDemo from '~/components/tag/demos/closable';
-import { mount, wait, dispatchEvent, getElement } from '../../test/utils';
+import { mount, unmount, wait, dispatchEvent, getElement } from '../../test/utils';
 import TagsDemo from '~/components/tag/demos/tags';
 import DraggableDemo from '~/components/tag/demos/draggable';
 describe('Tag', function () {
-  // afterEach(() => unmount());
+  afterEach(function () {
+    return unmount();
+  });
   it('should not close tag if we has prevented default', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, btns, preventDefaultBtn, commonBtn;
     return _regeneratorRuntime.wrap(function _callee$(_context) {

package/components/tag/tags.vdt.js

@@ -55,7 +55,8 @@ export default function ($props, $blocks, $__proto__) {
       var _$blocks = {},
         __$blocks = _$ex({}, $blocks);
       return (_$blocks['content'] = function ($super) {
-        return _$ce(2, 'div', hiddenChildren.value, 0, _$cn(classNameObj));
+        var _extends2;
+        return _$ce(2, 'div', hiddenChildren.value, 0, _$cn(_extends({}, classNameObj, (_extends2 = {}, _extends2[k + "-nowrap"] = false, _extends2))));
       }, __$blocks['content'] = function ($super, data) {
         var block = $blocks['content'];
         var callBlock = function callBlock() {

package/components/view/index.d.ts

@@ -0,0 +1,15 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+export interface 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 declare class View extends Component<ViewProps> {
+    static template(this: View): import('intact-vue-next').VNode<string>;
+    static typeDefs: Required<TypeDefs<ViewProps>>;
+    static defaults(): {
+        tag: string;
+    };
+}

package/components/view/index.js

@@ -0,0 +1,30 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+var _excluded = ["tag"];
+import { Component, createVNode as h } from 'intact-vue-next';
+var typeDefs = {
+  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 var View = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(View, _Component);
+  function View() {
+    return _Component.apply(this, arguments) || this;
+  }
+  View.template = function template() {
+    var _this$get = this.get(),
+      tag = _this$get.tag,
+      rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
+    return h(tag, rest);
+  };
+  View.defaults = function defaults() {
+    return {
+      tag: 'div'
+    };
+  };
+  return View;
+}(Component);
+View.typeDefs = typeDefs;

package/i18n/en-US.d.ts

@@ -73,7 +73,7 @@ declare const i18n: {
     前往: string;
     页: string;
     '\u5171 {n} \u6761': string;
-    '/(\u3112o\u3112)/~~ \u6CA1\u6709\u627E\u5230\u4EB2\u8981\u7684\u6570\u636E\u54E6~': string;
+    暂无数据: string;
     重置: string;
     请输入: string;
     请选择: string;

package/i18n/en-US.js

@@ -80,7 +80,7 @@ var i18n = {
   '页': '',
   '共 {n} 条': 'Total {n}',
   // table
-  '/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~': '/(ㄒoㄒ)/~~ No data to display.',
+  '暂无数据': 'No data to display.',
   '重置': 'Reset',
   // transfer
   '请输入': 'Please enter',