@king-design/intact 3.4.3-beta.2 → 3.4.3

package/es/components/diagram/shapes/hexagon.d.ts

@@ -12,7 +12,7 @@ export declare class DHexagon extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/image.d.ts

@@ -18,7 +18,7 @@ export declare class DImage extends DShape<DImageProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/parallelogram.d.ts

@@ -12,7 +12,7 @@ export declare class DParallelogram extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/rectangle.d.ts

@@ -18,7 +18,7 @@ export declare class DRectangle extends DShape<DRectangleProps> {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/square.d.ts

@@ -13,7 +13,7 @@ export declare class DSquare extends DRectangle {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/text.d.ts

@@ -12,7 +12,7 @@ export declare class DText extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/dialog/styles.js

@@ -58,11 +58,11 @@ var defaults = {
     padding: "0 24px",
     bodyMarginTop: "-25px",
     tipIconMarginBottom: '10px',
-    tipIconFontSize: '37px',
-    tipIconLineHeight: '37px',
+    tipIconFontSize: '24px',
+    tipIconLineHeight: '24px',
     // with title
     titleFontWeight: '500',
-    titleTipIconFontSize: '37px',
+    titleTipIconFontSize: '24px',
     titleFontSize: '14px',
     wrapperPaddingLeft: '8px',
     titleBodyMarginTop: '-36px'

package/es/components/dropdown/item.js

@@ -50,8 +50,11 @@ export var DropdownItem = /*#__PURE__*/function (_Component) {
       // hide all dropdowns
       var dropdown = this.dropdown;
       do {
-        dropdown.hide(true);
-      } while (dropdown = dropdown.dropdown);
+        if (!dropdown.$isTooltip) {
+          dropdown.hide(true);
+        }
+        dropdown = dropdown.dropdown;
+      } while (dropdown);
     }
   };
   _proto.hasSubMenu = function hasSubMenu() {

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

@@ -1,4 +1,5 @@
 import { Component, TypeDefs } from 'intact';
+import type { AutoRows } from '../input';
 import type { Events } from '../types';
 type Value = string | number;
 export interface EditableProps<V extends Value = Value> {
@@ -10,6 +11,7 @@ export interface EditableProps<V extends Value = Value> {
     tip?: Value;
     trim?: boolean;
     invalid?: boolean;
+    rows?: string | number | 'auto' | AutoRows;
 }
 export interface EditableEvents<V extends Value = Value> {
     error: [string];

package/es/components/editable/index.js

@@ -15,13 +15,15 @@ var typeDefs = {
   disabled: Boolean,
   tip: [String, Number],
   trim: Boolean,
-  invalid: Boolean
+  invalid: Boolean,
+  rows: [String, Number, 'auto', Object]
 };
 var defaults = function defaults() {
   return {
     required: true,
     tip: _$('编辑'),
-    trim: true
+    trim: true,
+    rows: 1
   };
 };
 var events = {

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

@@ -4,6 +4,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/editable/demos/basic';
 import ValidateDemo from '~/components/editable/demos/validate';
+import TextAreaDemo from '~/components/editable/demos/textarea';
 import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import { Editable } from './';
 import { Component, findDomFromVNode } from 'intact';
@@ -183,4 +184,42 @@ describe('Editable', function () {
       }
     }, _callee3);
   })));
+  it('should auto use input or textarea', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount4, instance, element, editable, input, textarea, textarea2;
+    return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _mount4 = mount(TextAreaDemo), instance = _mount4[0], element = _mount4[1];
+          editable = instance.refs.__test; // @ts-ignore
+          editable.edit();
+          _context5.next = 5;
+          return wait();
+        case 5:
+          expect(element.innerHTML).to.matchSnapshot();
+          input = element.querySelector('input');
+          textarea = element.querySelector('textarea');
+          expect(input).to.be.null;
+          textarea.value = 'test';
+          dispatchEvent(textarea, 'blur');
+          _context5.next = 13;
+          return wait();
+        case 13:
+          expect(instance.get('text')).to.eql('test');
+          editable.set('rows', 1);
+          _context5.next = 17;
+          return wait();
+        case 17:
+          // @ts-ignore
+          editable.edit();
+          _context5.next = 20;
+          return wait();
+        case 20:
+          textarea2 = element.querySelector('textarea');
+          expect(textarea2).to.be.null;
+        case 22:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee4);
+  })));
 });

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

@@ -5,6 +5,7 @@ import { Input } from '../input';
 import { Icon } from '../icon';
 import { makeStyles } from './styles';
 import { Tooltip } from '../tooltip';
+import { isNullOrUndefined } from 'intact-shared';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
   $blocks || ($blocks = {});
@@ -18,21 +19,31 @@ export default function ($props, $blocks, $__proto__) {
     validate = _this$get.validate,
     disabled = _this$get.disabled,
     tip = _this$get.tip,
-    invalid = _this$get.invalid;
+    invalid = _this$get.invalid,
+    rows = _this$get.rows;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-editable"] = true, _classNameObj[k + "-editing"] = editing, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-invalid"] = invalid, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
+  var isTextArea = !isNullOrUndefined(rows) && rows != '1';
+  var inputProps = _extends({
+    autoWidth: !isTextArea,
+    fluid: isTextArea
+  }, isTextArea && {
+    type: 'textarea'
+  }, {
+    rows: rows
+  }, (!isTextArea || rows === 'auto') && {
+    size: 'mini'
+  });
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
-  }), [_$ce(2, 'div', !editing ? children : _$cc(Input, {
-    'size': 'mini',
+  }), [_$ce(2, 'div', !editing ? children : _$cc(Input, _extends({
     'defaultValue': value,
     'ev-blur': this.onBlur,
     'ev-keydown': this.onKeydown,
     'ref': this.inputRef,
     'frozenOnInput': true,
-    'ev-$mounted': this.select,
-    'autoWidth': true
-  }, null, this.inputRef), 0, 'c-ellipsis'), !disabled && !editing ? _$cc(Tooltip, {
+    'ev-$mounted': this.select
+  }, inputProps), null, this.inputRef), 0, 'c-ellipsis'), !disabled && !editing ? _$cc(Tooltip, {
     'content': tip,
     'children': _$cc(Icon, {
       'className': _$cn(k + "-icon-edit " + k + "-editable-icon"),

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

@@ -1,6 +1,7 @@
 import '../../styles/global';
 declare const defaults: {
     iconGap: string;
+    readonly smallPadding: string;
     invalid: {
         readonly border: string;
     };

package/es/components/editable/styles.js

@@ -5,6 +5,9 @@ import '../../styles/global';
 import { cache } from '../utils';
 var defaults = {
   iconGap: '0 0 0 8px',
+  get smallPadding() {
+    return theme.small.padding;
+  },
   // invalid
   invalid: {
     get border() {

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

@@ -6,6 +6,7 @@ export interface EllipsisProps {
     disabled?: boolean;
     position?: Position | 'left' | 'bottom' | 'right' | 'top';
     theme?: 'light' | 'dark';
+    hoverable?: boolean;
 }
 export declare class Ellipsis extends Component<EllipsisProps> {
     static template: string | import("intact").Template<any>;

package/es/components/ellipsis/index.js

@@ -8,12 +8,14 @@ var typeDefs = {
   maxLines: Number,
   disabled: Boolean,
   position: [Object, 'left', 'bottom', 'right', 'top'],
-  theme: ['light', 'dark']
+  theme: ['light', 'dark'],
+  hoverable: Boolean
 };
 var defaults = function defaults() {
   return {
     disabled: false,
-    theme: 'light'
+    theme: 'light',
+    hoverable: false
   };
 };
 export var Ellipsis = /*#__PURE__*/function (_Component) {

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

@@ -15,7 +15,8 @@ export default function ($props, $blocks, $__proto__) {
     disabled = _this$get.disabled,
     position = _this$get.position,
     theme = _this$get.theme,
-    style = _this$get.style;
+    style = _this$get.style,
+    hoverable = _this$get.hoverable;
   var k = this.config.k;
   var _this$ellipsis = this.ellipsis,
     showTooltip = _this$ellipsis.showTooltip,
@@ -31,6 +32,7 @@ export default function ($props, $blocks, $__proto__) {
     'position': position,
     'theme': theme,
     'className': _$cn(className),
+    'hoverable': hoverable,
     'children': wrapper,
     '$blocks': function ($blocks) {
       var _$blocks = {},

package/es/components/input/styles.js

@@ -6,6 +6,12 @@ import { deepDefaults, sizes } from '../../styles/utils';
 import '../../styles/global';
 import { Input } from './';
 import { cache } from '../utils';
+var textareaSize = {
+  mini: '0',
+  small: '1px',
+  default: '5px',
+  large: '7px'
+};
 var defaults = deepDefaults({
   get transition() {
     return theme.transition.middle;
@@ -85,6 +91,7 @@ var defaults = deepDefaults({
   }
 }, sizes.reduce(function (memo, size) {
   var styles = theme[size];
+  var textareaStyles = textareaSize[size];
   memo[size] = {
     get fontSize() {
       return styles.fontSize;
@@ -94,6 +101,9 @@ var defaults = deepDefaults({
     },
     get paddingGap() {
       return styles.padding;
+    },
+    get padding() {
+      return textareaStyles;
     }
   };
   return memo;
@@ -110,7 +120,7 @@ export var makeStyles = cache(function makeStyles(k) {
   var _context;
   return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;max-width:100%;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;flex:1;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = input[size];
-    var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.", k, "-input-wrapper{height:", styles.height, ";padding:0 ", styles.paddingGap, ";}");
+    var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.", k, "-input-wrapper{height:", styles.height, ";padding:0 ", styles.paddingGap, ";.", k, "-textarea{padding:", styles.padding, " ", styles.paddingGap, ";}}");
     if (size === 'default') return sizeClassName;
     return /*#__PURE__*/css("&.", k, "-", size, "{", sizeClassName, ";}");
   }), "&.", k, "-inline{.", k, "-input-wrapper{height:auto;border:none;border-radius:0;padding:0;}}&.", k, "-type-textarea{.", k, "-input-wrapper{display:inline-block;padding:0;height:auto;}.", k, "-textarea{width:100%;padding:", input.textareaPadding, ";line-height:1.5;vertical-align:top;}.", k, "-input-suffix{margin:0;justify-content:flex-end;}}", _mapInstanceProperty(_context = Input.typeDefs.resize).call(_context, function (type) {

package/es/components/menu/styles.js

@@ -115,7 +115,7 @@ export var makeMenuStyles = cache(function makeMenuStyles(k) {
   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 16px;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;scrollbar-width:none;}.", 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-right:1px solid ", theme.color.disabledBg, ";background:", menu.light.bgColor, ";.", k, "-menu-header{color:", menu.light.title.color, ";}.", k, "-menu-item{.", k, "-menu-item-title{color:", menu.light.item.color, ";&:hover{background:", menu.light.item.hoverBg, ";}}.", k, "-menu-item-arrow{color:", menu.light.item.color, ";}&.", k, "-highlighted{>.", k, "-menu-item-title{color:", menu.light.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-item-title{color:", menu.light.item.disabledColor, "!important;}}}.", k, "-menu-title{border-top:", menu.light.border, ";.", k, "-menu-name{color:", menu.light.title.color, ";}}.", k, "-menu-arrow-box{background:", menu.light.bgColor, ";border:", menu.light.border, ";border-left:none;&:hover{.", k, "-menu-arrow:before{color:", menu.light.active.color, ";}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", menu.light.bgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", menu.light.border, ";}.", k, "-menu-body>.", k, "-menu-title{border-right:", menu.light.border, ";}}.", k, "-menu-item.", k, "-active{>.", k, "-menu-item-title{color:", menu.light.active.color, "!important;background:", menu.light.active.bgColor, ";}}.", k, "-sub-menu{.", k, "-menu-item-title,.", k, "-menu-item-arrow{color:", menu.light.item.subTitleColor, "!important;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = menu[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}.", k, "-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-header{padding:0;}.", k, "-menu-header{padding:0;}.", 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, ";}}}");
+  }), "&.", 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-header{padding:0;}.", k, "-menu-body{overflow:hidden;padding:0;}.", k, "-menu-arrow-box{left:0;.", k, "-menu-arrow:before{transform:rotateY(180deg);}}}&.", k, "-dropdown-menu{width:fit-content;min-width:", menu.dropdown.minWidth, ";.", k, "-menu-item-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;.", k, "-menu-body{display:flex;align-items:center;.", k, "-menu-title{border-top:none;border-right:", menu.border, ";}}}");
 });
 export var makeTitleStyles = cache(function makeTitleStyles(k) {
   var item = menu.item;

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

@@ -13,6 +13,7 @@ import { Tooltip } from '../tooltip';
 import { Component } from 'intact';
 import { Select, Option } from '../select';
 import SearchableDemo from '~/components/select/demos/searchable';
+import ImmutableDemo from '~/components/select/demos/immutable';
 describe('Select', function () {
   afterEach(function (done) {
     unmount();
@@ -449,6 +450,52 @@ describe('Select', function () {
       }
     }, _callee10);
   })));
+  it('disabled option does not allow clearable and close', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var _mount12, instance, element, _element$querySelecto7, clear1, _element$querySelecto8, tag1, _element$querySelecto9, clear2, _element$querySelecto10, clear3;
+    return _regeneratorRuntime.wrap(function _callee11$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
+        case 0:
+          _mount12 = mount(ImmutableDemo), instance = _mount12[0], element = _mount12[1];
+          instance.set('days', ['Tuesday', 'Friday']);
+          _context13.next = 4;
+          return wait();
+        case 4:
+          expect(element.outerHTML).to.matchSnapshot();
+          _element$querySelecto7 = element.querySelectorAll('.k-select-clear'), clear1 = _element$querySelecto7[0];
+          clear1.click();
+          _context13.next = 9;
+          return wait();
+        case 9:
+          _element$querySelecto8 = element.querySelectorAll('.k-tag'), tag1 = _element$querySelecto8[0];
+          expect(tag1.className).not.contain("k-closable");
+          expect(instance.get('days')).to.eql(['Tuesday', 'Friday']);
+          instance.set('days', ['Monday', 'Tuesday']);
+          _context13.next = 15;
+          return wait();
+        case 15:
+          _element$querySelecto9 = element.querySelectorAll('.k-select-clear'), clear2 = _element$querySelecto9[0];
+          clear2.click();
+          _context13.next = 19;
+          return wait();
+        case 19:
+          expect(instance.get('days')).to.eql(['Tuesday']);
+          instance.set('days', ['Monday', 'Wednesday']);
+          _context13.next = 23;
+          return wait();
+        case 23:
+          _element$querySelecto10 = element.querySelectorAll('.k-select-clear'), clear3 = _element$querySelecto10[0];
+          clear3.click();
+          _context13.next = 27;
+          return wait();
+        case 27:
+          expect(instance.get('days')).to.eql([]);
+          // expect(clear).to.be.null;
+        case 28:
+        case "end":
+          return _context13.stop();
+      }
+    }, _callee11);
+  })));
   // it('should trigger change event correctly', async () => {
   // const spy = sinon.spy();
   // class Demo extends Component {

package/es/components/switch/styles.js

@@ -78,5 +78,5 @@ export var makeStyles = cache(function makeStyles(k) {
       padding = _kswitch$size.padding,
       iconSize = _kswitch$size.iconSize;
     return /*#__PURE__*/css("&.", k, "-", size, ",&.", k, "-", size, " .", k, "-switch-on,&.", k, "-", size, " .", k, "-switch-off{width:", width, ";height:", height, ";}&.", k, "-", size, "{border-radius:", height, ";.", k, "-switch-bar{width:", height, ";border-radius:", height, ";}.", k, "-switch-wrapper{padding:", padding, ";}.", k, "-switch-on,.", k, "-switch-off{line-height:", height, ";left:0;}.", k, "-switch-on{padding:0 ", height, " 0 calc(", height, " / 3);}.", k, "-switch-off{padding:0 calc(", height, " / 3) 0 ", height, ";}.", k, "-switch-icon{font-size:", iconSize, ";}}");
-  }), "&.", k, "-checked{.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.bgColor, ";}.", k, "-switch-bar{width:100%;}&:hover{.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.hoverBgColor, ";}}}&.", k, "-disabled{&,.", k, "-switch-handle{cursor:not-allowed;}&,.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.disabledBgColor, ";}&.", k, "-checked{&,.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.disabledBgColor, ";}}}");
+  }), " &.", k, "-small .", k, "-switch-on,&.", k, "-small .", k, "-switch-off{font-size:10px;}&.", k, "-checked{.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.bgColor, ";}.", k, "-switch-bar{width:100%;}&:hover{.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.hoverBgColor, ";}}}&.", k, "-disabled{&,.", k, "-switch-handle{cursor:not-allowed;}&,.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.disabledBgColor, ";}&.", k, "-checked{&,.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.disabledBgColor, ";}}}");
 });

package/es/components/table/cell.d.ts

@@ -15,6 +15,7 @@ export interface TableCellProps {
     rowspan: number;
     onClickArrow: (e: MouseEvent) => void;
     hasChildren: boolean;
+    loaded: boolean;
 }
 export declare class TableCell extends Component<TableCellProps> {
     static template: string | import("intact").Template<any>;

package/es/components/table/cell.vdt.js

@@ -1,9 +1,10 @@
-import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn } from 'intact';
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn } from 'intact';
 import { getClassAndStyleForFixed } from './useFixedColumns';
 import { get, noop } from 'intact-shared';
 import { Button } from '../button';
 import { Icon } from '../icon';
 import { getTextByChildren } from '../utils';
+import { Ellipsis } from '../ellipsis';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
   $blocks || ($blocks = {});
@@ -21,7 +22,8 @@ export default function ($props, $blocks, $__proto__) {
     colspan = _this$get.colspan,
     rowspan = _this$get.rowspan,
     onClickArrow = _this$get.onClickArrow,
-    hasChildren = _this$get.hasChildren;
+    hasChildren = _this$get.hasChildren,
+    loaded = _this$get.loaded;
   var k = this.config.k;
   var blocks = props.$blocks;
   var children = get(data, props.key);
@@ -31,6 +33,11 @@ export default function ($props, $blocks, $__proto__) {
       children = template(noop, [data, rowIndex]);
     }
   }
+  if (props.ellipsis) {
+    children = _$cc(Ellipsis, {
+      'children': children
+    });
+  }
   var _getClassAndStyleForF = getClassAndStyleForFixed(props, offset, k, checkType),
     className = _getClassAndStyleForF.className,
     style = _getClassAndStyleForF.style;
@@ -46,9 +53,13 @@ export default function ($props, $blocks, $__proto__) {
     'size': 'mini',
     'className': _$cn(k + "-table-arrow"),
     'ev-click': onClickArrow,
-    'children': _$cc(Icon, {
+    'disabled': loaded === false,
+    'children': loaded !== false ? _$cc(Icon, {
       'className': _$cn(k + "-icon-right"),
       'size': 'small'
+    }) : _$cc(Icon, {
+      'className': _$cn(k + "-tree-icon ion-load-c"),
+      'rotate': true
     })
   }) : undefined, children], 0, _$cn(classNameObj), {
     'style': style,

package/es/components/table/column.d.ts

@@ -14,6 +14,7 @@ export interface TableColumnProps {
     exportCell?: (data: any, index: number) => string;
     minWidth?: number;
     hidden?: boolean;
+    ellipsis?: boolean;
     cols?: number;
     rows?: number;
     prevVNode?: VNodeComponentClass<TableColumn> | null;

package/es/components/table/column.js

@@ -22,6 +22,7 @@ var typeDefs = {
   exportCell: Function,
   minWidth: Number,
   hidden: Boolean,
+  ellipsis: Boolean,
   // offset: null,
   cols: null,
   rows: null,

package/es/components/table/row.d.ts

@@ -20,10 +20,11 @@ export interface TableRowProps {
     spreaded: boolean;
     hasChildren: boolean;
     indent: number;
-    onToggleSpreadRow: (key: TableRowKey) => void;
+    onToggleSpreadRow: (key: TableRowKey, rowData?: any) => void;
     onBeforeUnmount: (key: TableRowKey) => void;
     offsetMap: Record<Key, number>;
     animation: boolean;
+    loaded: boolean;
     draggable: boolean;
     draggingKey: TableRowKey | null;
     onRowDragStart: DragCallback;

package/es/components/table/row.js

@@ -6,6 +6,7 @@ import template from './row.vdt';
 import { bind } from '../utils';
 import { isEqualObject } from '../utils';
 import { useConfigContext } from '../config';
+import { hasOwn } from 'intact-shared';
 export var TableRow = /*#__PURE__*/function (_Component) {
   _inheritsLoose(TableRow, _Component);
   function TableRow() {
@@ -23,19 +24,26 @@ export var TableRow = /*#__PURE__*/function (_Component) {
     var lastProps = lastVNode.props;
     var nextProps = nextVNode.props;
     var isSame = true;
-    var key;
-    for (key in lastProps) {
-      // ignore index
-      if (key === 'index') continue;
-      var lastValue = lastProps[key];
-      var nextValue = nextProps[key];
-      // deeply compare for offsetMap
-      if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
-        continue;
-      }
-      if (lastValue !== nextValue) {
-        isSame = false;
-        break;
+    if (hasOwn.call(this, 'vueInstance')) {
+      // In Vue, we may change value by modifing the same reference,
+      // and the new row may be expanded by click tree arrow
+      // so we can not compare in this case, #1030
+      isSame = false;
+    } else {
+      var key;
+      for (key in lastProps) {
+        // ignore index
+        if (key === 'index') continue;
+        var lastValue = lastProps[key];
+        var nextValue = nextProps[key];
+        // deeply compare for offsetMap
+        if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
+          continue;
+        }
+        if (lastValue !== nextValue) {
+          isSame = false;
+          break;
+        }
       }
     }
     if (!isSame) {
@@ -70,8 +78,9 @@ export var TableRow = /*#__PURE__*/function (_Component) {
     e.stopPropagation();
     var _this$get3 = this.get(),
       onToggleSpreadRow = _this$get3.onToggleSpreadRow,
-      key = _this$get3.key;
-    onToggleSpreadRow(key);
+      key = _this$get3.key,
+      data = _this$get3.data;
+    onToggleSpreadRow(key, data);
   };
   _proto.onMouseEnter = function onMouseEnter(e) {
     // for tooltip

package/es/components/table/row.vdt.js

@@ -33,7 +33,8 @@ export default function ($props, $blocks, $__proto__) {
     offsetMap = _this$get.offsetMap,
     draggable = _this$get.draggable,
     draggingKey = _this$get.draggingKey,
-    animation = _this$get.animation;
+    animation = _this$get.animation,
+    loaded = _this$get.loaded;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-checked"] = checked, _classNameObj[k + "-selected"] = selected, _classNameObj[k + "-spreaded"] = spreaded, _classNameObj[k + "-dragging"] = draggingKey === key, _classNameObj[className] = className, _classNameObj);
   var getGridItem = function getGridItem(columnIndex) {
@@ -82,6 +83,7 @@ export default function ($props, $blocks, $__proto__) {
       'columnIndex': columnIndex,
       'rowIndex': rowIndex,
       'data': data,
+      'loaded': loaded,
       'offset': offsetMap[columnKey],
       'checkType': checkType,
       'indent': indent,

package/es/components/table/styles.js

@@ -90,9 +90,9 @@ setDefault(function () {
   makeGroupMenuStyles == null || makeGroupMenuStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-hidden{display:none;}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}tfoot{z-index:2;tr{td{border-top:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-hidden{display:none;}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
-  }), ">.", k, "-pagination{margin:16px 0;}&.", k, "-fix-header{min-height:0;.", k, "-table-wrapper{height:100%;}}");
+  }), ">.", k, "-pagination{margin:16px 0;}&.", k, "-fix-header{min-height:0;.", k, "-table-wrapper{height:100%;}thead{position:sticky;top:0;}}&.", k, "-fix-footer{min-height:0;.", k, "-table-wrapper{height:100%;}tfoot{position:sticky;bottom:0;}}");
 });
 export var makeGroupMenuStyles = cache(function makeGroupMenuStyles(k) {
   return /*#__PURE__*/css("min-width:", table.group.menuMinWidth, "!important;.", k, "-dropdown-item.", k, "-active{color:", table.group.activeColor, ";}.", k, "-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}.", k, "-table-group-body{max-height:", table.group.menuMaxHeight, ";overflow:auto;}.", k, "-table-group-footer{text-align:right;border-top:", table.group.headerBorder, ";padding:8px;.", k, "-btn{margin-left:8px;}}");