@king-design/vue 3.4.3-beta.2 → 3.4.4

package/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/components/table/cell.d.ts

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

package/components/table/cell.vdt.js

@@ -1,9 +1,10 @@
-import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn } from 'intact-vue-next';
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn } from 'intact-vue-next';
 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,34 +22,46 @@ 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,
+    spreadArrowIndex = _this$get.spreadArrowIndex;
   var k = this.config.k;
   var blocks = props.$blocks;
   var children = get(data, props.key);
+  var isTree = !spreadArrowIndex ? columnIndex === 0 : columnIndex === spreadArrowIndex;
   if (blocks) {
     var template = blocks.template || blocks.default;
     if (template) {
       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;
-  if (columnIndex === 0 && indent) {
+  if (isTree && indent) {
     style || (style = {});
     style.paddingLeft = indent + "px";
   }
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-hidden"] = props.hidden, _classNameObj[className] = className, _classNameObj);
-  return _$ce(2, 'td', [columnIndex === 0 && hasChildren ? _$cc(Button, {
+  return _$ce(2, 'td', [hasChildren && isTree ? _$cc(Button, {
     'type': 'none',
     'icon': true,
     'circle': true,
     '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/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/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/components/table/column.vdt.js

@@ -1,6 +1,7 @@
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
 import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn, noop as _$no, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma } from 'intact-vue-next';
 import { getClassAndStyleForFixed } from './useFixedColumns';
+import { getStyleForLastColumn } from './useColumns';
 import { Dropdown, DropdownMenu, DropdownItem } from '../dropdown';
 import { Button } from '../button';
 import { Icon } from '../icon';
@@ -13,7 +14,7 @@ import { linkEvent } from 'intact-vue-next';
 import { context as TableContext } from './useColumns';
 import { context as ResizableContext } from './useResizable';
 import { context as FixedColumnsContext } from './useFixedColumns';
-import { stopPropagation } from '../utils';
+import { stopPropagation, addStyle } from '../utils';
 import { Input } from '../input';
 import { _$ } from '../../i18n';
 import { ignoreSortable } from './useSortable';
@@ -49,19 +50,22 @@ export default function ($props, $blocks, $__proto__) {
     checkAll = _this$group.checkAll;
   var k = this.config.k;
   return _$cc(TableContext.Consumer, {
-    'children': function children(checkType) {
+    'children': function children(_ref) {
+      var checkType = _ref.checkType,
+        lastCellKey = _ref.lastCellKey,
+        lastCellStyle = _ref.lastCellStyle;
       return _$cc(GroupContext.Consumer, {
-        'children': function children(_ref) {
-          var currentGroup = _ref.group,
-            onChange = _ref.onChange;
+        'children': function children(_ref2) {
+          var currentGroup = _ref2.group,
+            onChange = _ref2.onChange;
           return _$cc(SortableContext.Consumer, {
-            'children': function children(_ref2) {
-              var sort = _sortInstanceProperty(_ref2),
-                onChangeSort = _ref2.onChange;
+            'children': function children(_ref3) {
+              var sort = _sortInstanceProperty(_ref3),
+                onChangeSort = _ref3.onChange;
               return _$cc(ResizableContext.Consumer, {
-                'children': function children(_ref3) {
-                  var resizable = _ref3.resizable,
-                    onStart = _ref3.onStart;
+                'children': function children(_ref4) {
+                  var resizable = _ref4.resizable,
+                    onStart = _ref4.onStart;
                   return _$cc(FixedColumnsContext.Consumer, {
                     'children': function children(offsetMap) {
                       var _classNameObj, _$cn2, _$cn4;
@@ -168,7 +172,7 @@ export default function ($props, $blocks, $__proto__) {
                         'className': _$cn(k + "-icon-down-bold " + k + "-desc"),
                         'size': 'mini'
                       })], 4, _$cn((_$cn4 = {}, _$cn4[k + "-column-sort"] = true, _$cn4[k + "-" + type] = type, _$cn4))) : undefined], 0, _$cn(k + "-table-title"))], 0, _$cn(classNameObj), {
-                        'style': style,
+                        'style': key === lastCellKey ? addStyle(style, lastCellStyle) : style,
                         'title': isStringOrNumber(title) ? title : null,
                         'ev-click': sortable ? linkEvent(key, onChangeSort) : null,
                         'colspan': cols,

package/components/table/row.d.ts

@@ -20,10 +20,12 @@ 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;
+    spreadArrowIndex: number;
+    loaded: boolean;
     draggable: boolean;
     draggingKey: TableRowKey | null;
     onRowDragStart: DragCallback;

package/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/components/table/row.vdt.js

@@ -33,7 +33,9 @@ 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,
+    spreadArrowIndex = _this$get.spreadArrowIndex;
   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 +84,7 @@ export default function ($props, $blocks, $__proto__) {
       'columnIndex': columnIndex,
       'rowIndex': rowIndex,
       'data': data,
+      'loaded': loaded,
       'offset': offsetMap[columnKey],
       'checkType': checkType,
       'indent': indent,
@@ -90,7 +93,8 @@ export default function ($props, $blocks, $__proto__) {
       'rowspan': spans ? spans.rowspan : undefined,
       'onClickArrow': _this.onClickArrow,
       'hasChildren': hasChildren,
-      'key': columnKey
+      'key': columnKey,
+      'spreadArrowIndex': spreadArrowIndex
     }, columnKey));
   });
   var rows = animation ? _$cc(TransitionGroup, {

package/components/table/styles.d.ts

@@ -1,4 +1,53 @@
 import '../../styles/global';
+declare const defaults: {
+    readonly transition: string;
+    border: string;
+    readonly borderRadius: string;
+    fontSize: string;
+    bgColor: string;
+    readonly color: string;
+    fixLeftShadow: string;
+    fixRightShadow: string;
+    thead: {
+        readonly bgColor: string;
+        readonly color: string;
+        padding: string;
+        fontSize: string;
+        fontWeight: string;
+        textAlign: string;
+        height: string;
+        delimiterHeight: string;
+        delimiterColor: string;
+    };
+    tbody: {
+        readonly hoverBgcolor: string;
+        padding: string;
+    };
+    stripeBgColor: string;
+    group: {
+        gap: string;
+        menuMaxHeight: string;
+        menuMinWidth: string;
+        readonly activeColor: string;
+        headerPadding: string;
+        readonly headerBorder: string;
+    };
+    sort: {
+        iconHeight: string;
+        gap: string;
+        readonly enabledColor: string;
+    };
+    expandBgColor: string;
+    readonly selectedBgColor: string;
+    arrow: {
+        gap: string;
+        width: string;
+    };
+    resizeWidth: string;
+    draggingOpacity: string;
+};
+declare let table: typeof defaults;
+export { table };
 export declare const makeStyles: {
     (k: string): string;
     clearCache(): {};

package/components/table/styles.js

@@ -89,10 +89,11 @@ setDefault(function () {
   makeStyles == null || makeStyles.clearCache();
   makeGroupMenuStyles == null || makeGroupMenuStyles.clearCache();
 });
+export { table };
 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, ";border-bottom-color:transparent;}}}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;}}");

package/components/table/table.d.ts

@@ -38,6 +38,9 @@ export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C exte
     animation?: boolean | [boolean, boolean];
     hideHeader?: boolean;
     pagination?: boolean | PaginationProps;
+    fixFooter?: boolean;
+    spreadArrowIndex?: number;
+    load?: (value: T) => Promise<void> | void;
 }
 export interface TableEvents<T = any, K extends TableRowKey = number> {
     clickRow: [T, number, K];
@@ -60,6 +63,7 @@ export interface TableBlocks<T = unknown> {
     empty: null;
     tooltip: [T, number];
     expand: [T, number];
+    footer: null;
 }
 type CheckType = 'checkbox' | 'radio' | 'none';
 export type TableCheckType = CheckType;

package/components/table/table.js

@@ -61,7 +61,10 @@ var typeDefs = {
   draggable: Boolean,
   animation: [Boolean, Array],
   hideHeader: Boolean,
-  pagination: [Boolean, Object]
+  pagination: [Boolean, Object],
+  fixFooter: Boolean,
+  spreadArrowIndex: Number,
+  load: Function
 };
 var defaults = function defaults() {
   return {

package/components/table/table.vdt.js

@@ -54,13 +54,18 @@ export default function ($props, $blocks, $__proto__) {
     draggable = _this$get.draggable,
     _animation = _this$get.animation,
     hideHeader = _this$get.hideHeader,
-    pagination = _this$get.pagination;
+    pagination = _this$get.pagination,
+    fixFooter = _this$get.fixFooter,
+    spreadArrowIndex = _this$get.spreadArrowIndex;
   var animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
   var _this$columns$getData = this.columns.getData(),
     columns = _this$columns$getData.columns,
     cols = _this$columns$getData.cols,
     maxRows = _this$columns$getData.maxRows,
     maxCols = _this$columns$getData.maxCols;
+  var _this$columns$getStyl = this.columns.getStyleForLastColumn(),
+    lastCellKey = _this$columns$getStyl.lastCellKey,
+    lastCellStyle = _this$columns$getStyl.lastCellStyle;
   var _this$fixedColumns = this.fixedColumns,
     scrollPosition = _this$fixedColumns.scrollPosition,
     hasFixed = _this$fixedColumns.hasFixed,
@@ -73,7 +78,7 @@ export default function ($props, $blocks, $__proto__) {
     elementRef = _this$stickyHeader.elementRef,
     headRef = _this$stickyHeader.headRef;
   var k = this.config.k;
-  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-table"] = true, _classNameObj[k + "-fix-header"] = fixHeader, _classNameObj[k + "-scroll-" + scrollPosition.value] = scrollPosition.value, _classNameObj[k + "-fix-columns"] = hasFixed.value, _classNameObj[k + "-" + type] = type && type !== 'default', _classNameObj[k + "-stripe"] = stripe, _classNameObj[k + "-with-expand"] = $blocks.expand, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-table"] = true, _classNameObj[k + "-fix-header"] = fixHeader, _classNameObj[k + "-fix-footer"] = fixFooter, _classNameObj[k + "-scroll-" + scrollPosition.value] = scrollPosition.value, _classNameObj[k + "-fix-columns"] = hasFixed.value, _classNameObj[k + "-" + type] = type && type !== 'default', _classNameObj[k + "-stripe"] = stripe, _classNameObj[k + "-with-expand"] = $blocks.expand, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var style = isStringOrNumber(fixHeader) ? {
     maxHeight: fixHeader + "px"
   } : null;
@@ -100,7 +105,11 @@ export default function ($props, $blocks, $__proto__) {
     onChangeChecked = _this$checked.onChangeChecked;
   var allCheckedStatus = getAllCheckedStatus();
   var thead = hideHeader ? null : _$cc(TableContext.Provider, {
-    'value': checkType,
+    'value': {
+      checkType: checkType,
+      lastCellKey: lastCellKey,
+      lastCellStyle: lastCellStyle
+    },
     'children': _$cc(GroupContext.Provider, {
       'value': {
         group: group,
@@ -183,6 +192,7 @@ export default function ($props, $blocks, $__proto__) {
         'key': key,
         'cols': cols,
         'data': value,
+        'loaded': value.loaded,
         'checkType': checkType,
         'hasFixedLeft': hasFixedLeft,
         'onClick': _this.clickRow,
@@ -203,6 +213,7 @@ export default function ($props, $blocks, $__proto__) {
         'onBeforeUnmount': _this.resetRowStatus.onRowBeforeUnmount,
         'offsetMap': offsetMap.value,
         'animation': animation[1],
+        'spreadArrowIndex': spreadArrowIndex,
         'draggable': draggable,
         'draggingKey': draggingKey.value,
         'onRowDragStart': onRowDragStart,
@@ -265,6 +276,20 @@ export default function ($props, $blocks, $__proto__) {
       'children': rows
     }) : rows;
   }(), 0);
+  var tfooter = null;
+  if ($blocks.footer) {
+    tfooter = _$ce(2, 'tfoot', _$ce(2, 'tr', _$ce(2, 'td', (_$blocks['footer'] = function ($super) {
+      return null;
+    }, __$blocks['footer'] = function ($super, data) {
+      var block = $blocks['footer'];
+      var callBlock = function callBlock() {
+        return _$blocks['footer'].call($this, $super, data);
+      };
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }, __$blocks['footer'](_$no)), 0, _$cn(k + "-table-footer"), {
+      'colspan': colCount
+    }), 2, null, null, 'table-footer'), 2);
+  }
   var tableWidthPx = tableWidth.value ? tableWidth.value + "px" : null;
   var _this$stickyScrollbar = this.stickyScrollbar,
     shouldStickScrollbar = _this$stickyScrollbar.shouldStickScrollbar,
@@ -287,7 +312,7 @@ export default function ($props, $blocks, $__proto__) {
         width: tableWidthPx
       }
     }, null, headRef)
-  }) : undefined, _$ce(2, 'table', [colgroup, isNull(stickHeader.value) ? thead : undefined, tbody], 0, null, {
+  }) : undefined, _$ce(2, 'table', [colgroup, isNull(stickHeader.value) ? thead : undefined, tbody, $blocks.footer ? tfooter : undefined], 0, null, {
     'style': {
       width: tableWidthPx
     }

package/components/table/useColumns.d.ts

@@ -14,4 +14,13 @@ export declare function useColumns(): {
         maxRows: number;
         maxCols: number;
     };
+    getStyleForLastColumn: () => {
+        lastCellKey: null;
+        lastCellStyle: null;
+    } | {
+        lastCellKey: import('intact-vue-next').Key | null;
+        lastCellStyle: {
+            'border-right': string;
+        };
+    };
 };

package/components/table/useColumns.js

@@ -3,6 +3,7 @@ import { useInstance, directClone } from 'intact-vue-next';
 import { eachChildren, isComponentVNode } from '../utils';
 import { TableColumn } from './column';
 import { createContext } from '../context';
+import { table as theme } from './styles';
 export var context = createContext();
 export function useColumns() {
   var instance = useInstance();
@@ -89,9 +90,36 @@ export function useColumns() {
       maxCols: maxCols
     };
   }
+  function getStyleForLastColumn() {
+    if (instance.get('type') !== 'grid' || !columns.length || !cols.length) {
+      return {
+        lastCellKey: null,
+        lastCellStyle: null
+      };
+    }
+    var lastRow = columns[columns.length - 1];
+    var lastTrItem = lastRow[lastRow.length - 1];
+    var lastCol = cols[cols.length - 1];
+    if (!lastTrItem || !lastCol) {
+      return {
+        lastCellKey: null,
+        lastCellStyle: null
+      };
+    }
+    return lastCol.key === lastTrItem.key ? {
+      lastCellKey: null,
+      lastCellStyle: null
+    } : {
+      lastCellKey: lastTrItem.key,
+      lastCellStyle: {
+        'border-right': "" + theme.border
+      }
+    };
+  }
   return {
     getColumns: getColumns,
     getCols: getCols,
-    getData: getData
+    getData: getData,
+    getStyleForLastColumn: getStyleForLastColumn
   };
 }

package/components/table/useTree.d.ts

@@ -2,7 +2,7 @@ import type { TableRowKey } from './table';
 import { State } from '../../hooks/useState';
 export declare function useTree(data: State<any[] | undefined>): {
     isSpreaded: (key: TableRowKey) => boolean;
-    toggleSpreadRow: (key: TableRowKey) => void;
+    toggleSpreadRow: (key: TableRowKey, rowData?: any) => Promise<void>;
     loopData: <T>(cb: (value: any, index: number, level: number, meta: T | null) => T, shouldBreak?: boolean) => void;
 };
 export declare function loopDataWithChildrenKey<T>(data: any[] | undefined, childrenKey: string | undefined, cb: (value: any, index: number, level: number, meta: T | null) => T, shouldBreak: boolean): void;

package/components/table/useTree.js

@@ -1,3 +1,5 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import { useInstance } from 'intact-vue-next';
 import { inArray } from './useChecked';
 import { toggleArray } from '../utils';
@@ -6,8 +8,34 @@ export function useTree(data) {
   function isSpreaded(key) {
     return inArray(instance.get('spreadKeys'), key);
   }
-  function toggleSpreadRow(key) {
-    instance.set('spreadKeys', toggleArray(instance.get('spreadKeys'), key));
+  function toggleSpreadRow(_x, _x2) {
+    return _toggleSpreadRow.apply(this, arguments);
+  }
+  function _toggleSpreadRow() {
+    _toggleSpreadRow = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, rowData) {
+      var _instance$get2, spreadKeys, load;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _instance$get2 = instance.get(), spreadKeys = _instance$get2.spreadKeys, load = _instance$get2.load;
+            instance.set('spreadKeys', toggleArray(spreadKeys, key));
+            if (!(load && data.value && !rowData.loaded)) {
+              _context.next = 8;
+              break;
+            }
+            rowData.loaded = false;
+            _context.next = 6;
+            return load(rowData);
+          case 6:
+            rowData.loaded = true;
+            instance.forceUpdate();
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return _toggleSpreadRow.apply(this, arguments);
   }
   function loopData(cb, shouldBreak) {
     if (shouldBreak === void 0) {

package/components/tip/index.d.ts

@@ -1,12 +1,17 @@
+import { TypeDefs } from 'intact-vue-next';
 import { Tag, TagProps, TagEvents, TagBlocks } from '../tag/base';
 export interface TipProps extends TagProps {
+    showIcon?: boolean;
 }
 export interface TipEvents extends TagEvents {
 }
 export interface TipBlocks extends TagBlocks {
     title: null;
     close: null;
+    icon: null;
 }
 export declare class Tip extends Tag<TipProps, TipEvents, TipBlocks> {
-    static template: string | import("vdt").Template<any>;
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<TipProps>>;
+    static defaults: () => Partial<TipProps>;
 }

package/components/tip/index.js

@@ -1,6 +1,15 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import template from './index.vdt';
 import { Tag } from '../tag/base';
+var typeDefs = _extends({}, Tag.typeDefs, {
+  showIcon: Boolean
+});
+var defaults = function defaults() {
+  return _extends({}, Tag.defaults(), {
+    showIcon: false
+  });
+};
 export var Tip = /*#__PURE__*/function (_Tag) {
   _inheritsLoose(Tip, _Tag);
   function Tip() {
@@ -8,4 +17,6 @@ export var Tip = /*#__PURE__*/function (_Tag) {
   }
   return Tip;
 }(Tag);
-Tip.template = template;
+Tip.template = template;
+Tip.typeDefs = typeDefs;
+Tip.defaults = defaults;