@king-design/vue 2.1.2 → 2.1.4

package/components/table/row.d.ts

@@ -30,7 +30,7 @@ export interface TableRowProps {
     onRowDragOver: DragCallback;
     onRowDragEnd: DragCallback;
 }
-declare type DragCallback = (e: MouseEvent, tableRow: TableRow) => void;
+type DragCallback = (e: MouseEvent, tableRow: TableRow) => void;
 export declare class TableRow extends Component<TableRowProps> {
     static template: string | import("intact").Template<any>;
     $update(lastVNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[], force: boolean): void;

package/components/table/row.js

@@ -3,31 +3,32 @@ import { __decorate } from "tslib";
 import { Component } from 'intact-vue-next';
 import template from './row.vdt';
 import { bind } from '../utils';
+import { isEqualObject } from '../utils';
 export var TableRow = /*#__PURE__*/function (_Component) {
   _inheritsLoose(TableRow, _Component);
-
   function TableRow() {
     return _Component.apply(this, arguments) || this;
   }
-
   var _proto = TableRow.prototype;
-
   _proto.$update = function $update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force) {
     var lastProps = lastVNode.props;
     var nextProps = nextVNode.props;
     var isSame = true;
     var key;
-
     for (key in lastProps) {
       // ignore index
       if (key === 'index') continue;
-
-      if (lastProps[key] !== nextProps[key]) {
+      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) {
       _Component.prototype.$update.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
     } else {
@@ -37,85 +38,62 @@ export var TableRow = /*#__PURE__*/function (_Component) {
       });
     }
   };
-
   _proto.onClick = function onClick(e) {
     if (e.target.tagName === 'INPUT') return;
-
     var _this$get = this.get(),
-        index = _this$get.index,
-        key = _this$get.key,
-        data = _this$get.data,
-        onClick = _this$get.onClick,
-        disabled = _this$get.disabled;
-
+      index = _this$get.index,
+      key = _this$get.key,
+      data = _this$get.data,
+      onClick = _this$get.onClick,
+      disabled = _this$get.disabled;
     if (!disabled) {
       onClick(data, index, key);
     }
   };
-
   _proto.onChangeChecked = function onChangeChecked(v) {
     var _this$get2 = this.get(),
-        index = _this$get2.index,
-        key = _this$get2.key,
-        onChangeChecked = _this$get2.onChangeChecked;
-
+      index = _this$get2.index,
+      key = _this$get2.key,
+      onChangeChecked = _this$get2.onChangeChecked;
     onChangeChecked(index, v, key);
   };
-
   _proto.onClickArrow = function onClickArrow(e) {
     e.stopPropagation();
-
     var _this$get3 = this.get(),
-        onToggleSpreadRow = _this$get3.onToggleSpreadRow,
-        key = _this$get3.key;
-
+      onToggleSpreadRow = _this$get3.onToggleSpreadRow,
+      key = _this$get3.key;
     onToggleSpreadRow(key);
   };
-
   _proto.onMouseEnter = function onMouseEnter(e) {
     // for tooltip
     var mouseEnter = this.get('ev-mouseenter');
     mouseEnter && mouseEnter(e);
   };
-
   _proto.onMouseLeave = function onMouseLeave(e) {
     // for tooltip
     var mouseLeave = this.get('ev-mouseleave');
     mouseLeave && mouseLeave(e);
   };
-
   _proto.onRowDragStart = function onRowDragStart(e) {
     this.get('onRowDragStart')(e, this);
   };
-
   _proto.onRowDragOver = function onRowDragOver(e) {
     this.get('onRowDragOver')(e, this);
   };
-
   _proto.onRowDragEnd = function onRowDragEnd(e) {
     this.get('onRowDragEnd')(e, this);
   };
-
   _proto.beforeUnmount = function beforeUnmount() {
     this.get('onBeforeUnmount')(this.get('key'));
   };
-
   return TableRow;
 }(Component);
 TableRow.template = template;
-
 __decorate([bind], TableRow.prototype, "onClick", null);
-
 __decorate([bind], TableRow.prototype, "onChangeChecked", null);
-
 __decorate([bind], TableRow.prototype, "onClickArrow", null);
-
 __decorate([bind], TableRow.prototype, "onMouseEnter", null);
-
 __decorate([bind], TableRow.prototype, "onMouseLeave", null);
-
 __decorate([bind], TableRow.prototype, "onRowDragStart", null);
-
 __decorate([bind], TableRow.prototype, "onRowDragOver", null);
-
 __decorate([bind], TableRow.prototype, "onRowDragEnd", null);

package/components/table/row.vdt.js

@@ -8,61 +8,52 @@ import { TableCell } from './cell';
 import { createElementVNode, className as cx, createFragment } from 'intact';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
-      _this = this;
-
+    _this = this;
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      cols = _this$get.cols,
-      data = _this$get.data,
-      checkType = _this$get.checkType,
-      hasFixedLeft = _this$get.hasFixedLeft,
-      checked = _this$get.checked,
-      disabled = _this$get.disabled,
-      className = _this$get.className,
-      merge = _this$get.merge,
-      grid = _this$get.grid,
-      rowIndex = _this$get.index,
-      indeterminate = _this$get.indeterminate,
-      allDisabled = _this$get.allDisabled,
-      selected = _this$get.selected,
-      spreaded = _this$get.spreaded,
-      hasChildren = _this$get.hasChildren,
-      indent = _this$get.indent,
-      key = _this$get.key,
-      offsetMap = _this$get.offsetMap,
-      draggable = _this$get.draggable,
-      draggingKey = _this$get.draggingKey,
-      animation = _this$get.animation;
-
+    cols = _this$get.cols,
+    data = _this$get.data,
+    checkType = _this$get.checkType,
+    hasFixedLeft = _this$get.hasFixedLeft,
+    checked = _this$get.checked,
+    disabled = _this$get.disabled,
+    className = _this$get.className,
+    merge = _this$get.merge,
+    grid = _this$get.grid,
+    rowIndex = _this$get.index,
+    indeterminate = _this$get.indeterminate,
+    allDisabled = _this$get.allDisabled,
+    selected = _this$get.selected,
+    spreaded = _this$get.spreaded,
+    hasChildren = _this$get.hasChildren,
+    indent = _this$get.indent,
+    key = _this$get.key,
+    offsetMap = _this$get.offsetMap,
+    draggable = _this$get.draggable,
+    draggingKey = _this$get.draggingKey,
+    animation = _this$get.animation;
   var classNameObj = (_classNameObj = {
     'k-disabled': disabled,
     'k-checked': checked,
     'k-selected': selected,
-
     /* 'k-hidden': hidden, */
     'k-spreaded': spreaded,
     'k-dragging': draggingKey === key
   }, _classNameObj[className] = className, _classNameObj);
-
   var getGridItem = function getGridItem(columnIndex) {
     var _grid$rowIndex;
-
     return ((_grid$rowIndex = grid[rowIndex]) == null ? void 0 : _grid$rowIndex[columnIndex]) || {
       render: true,
       spans: null
     };
   };
-
   var vNodes = [];
-
   var pushCheckTypeVNode = function pushCheckTypeVNode(children) {
     var _getGridItem = getGridItem(0),
-        render = _getGridItem.render,
-        spans = _getGridItem.spans;
-
+      render = _getGridItem.render,
+      spans = _getGridItem.spans;
     if (!render) return;
     vNodes.push(_$cv('td', _extends({
       'key': '$checktype'
@@ -71,7 +62,6 @@ export default function ($props, $blocks, $__proto__) {
       className: 'k-table-check'
     }, 0), spans), children));
   };
-
   if (checkType === 'checkbox') {
     pushCheckTypeVNode(_$cc(Checkbox, {
       'value': indeterminate ? false : checked,
@@ -86,13 +76,11 @@ export default function ($props, $blocks, $__proto__) {
       'ev-$change:value': this.onChangeChecked
     }));
   }
-
   var columnIndexOffset = checkType !== 'none' ? 1 : 0;
   cols.forEach(function (props, columnIndex) {
     var _getGridItem2 = getGridItem(columnIndex + columnIndexOffset),
-        render = _getGridItem2.render,
-        spans = _getGridItem2.spans;
-
+      render = _getGridItem2.render,
+      spans = _getGridItem2.spans;
     if (!render) return;
     var columnKey = props.key;
     vNodes.push(_$cc(TableCell, {
@@ -117,8 +105,8 @@ export default function ($props, $blocks, $__proto__) {
     'children': vNodes
   }) : createFragment(vNodes, 8);
   /* const rows = vNodes; */
-  // for performance, no normalize
 
+  // for performance, no normalize
   return createElementVNode(2, 'tr', rows, 2, cx(classNameObj), {
     'data-key': key,
     'ev-mouseenter': this.onMouseEnter,

package/components/table/styles.js

@@ -8,16 +8,13 @@ var defaults = {
   get transition() {
     return theme.transition.large;
   },
-
   // transition: '15000s',
   border: "1px solid #e5e5e5",
   fontSize: "12px",
   bgColor: "#fff",
-
   get color() {
     return theme.color.text;
   },
-
   fixLeftShadow: "inset 5px 0px 6px -6px rgb(0 0 0 / 30%)",
   fixRightShadow: "inset -5px 0px 6px -6px rgb(0 0 0 / 30%)",
   // head
@@ -25,7 +22,6 @@ var defaults = {
     get bgColor() {
       return theme.color.bg;
     },
-
     padding: "0 5px 0 12px",
     fontSize: "12px",
     fontWeight: "bold",
@@ -39,7 +35,6 @@ var defaults = {
     get hoverBgcolor() {
       return theme.color.bg;
     },
-
     padding: "11px 5px 11px 12px"
   },
   // stripe
@@ -50,17 +45,13 @@ var defaults = {
     gap: "10px",
     color: "#a6a6a6",
     menuMaxHeight: '200px',
-
     get activeColor() {
       return theme.color.primary;
     },
-
     headerPadding: "8px",
-
     get headerBorder() {
       return "1px solid " + theme.color.bg;
     }
-
   },
   // sort
   sort: {
@@ -70,11 +61,9 @@ var defaults = {
     disabledColor: "#ddd"
   },
   expandBgColor: '#fdfcff',
-
   get selectedBgColor() {
     return palette(theme.color.primary, -4);
   },
-
   // tree
   arrow: {
     gap: "4px"

package/components/table/table.d.ts

@@ -61,14 +61,14 @@ export interface TableBlocks<T = unknown> {
     tooltip: [T, number];
     expand: [T, number];
 }
-declare type CheckType = 'checkbox' | 'radio' | 'none';
-export declare type TableCheckType = CheckType;
-export declare type TableRowKey = string | number;
-export declare type TableSortValue<T = string> = {
+type CheckType = 'checkbox' | 'radio' | 'none';
+export type TableCheckType = CheckType;
+export type TableRowKey = string | number;
+export type TableSortValue<T = string> = {
     key?: T;
     type?: 'desc' | 'asc';
 };
-export declare type TableGroupValue<T extends string | number | symbol = string | number | symbol> = Record<T, any | any[]>;
+export type TableGroupValue<T extends string | number | symbol = string | number | symbol> = Record<T, any | any[]>;
 export declare class Table<T = any, RowKey extends TableRowKey = TableRowKey, Checkbox extends CheckType = 'checkbox', Sort extends string = string, Group extends TableGroupValue = TableGroupValue> extends Component<TableProps<T, RowKey, Checkbox, Sort, Group>, TableEvents<T, RowKey>, TableBlocks<T>> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<TableProps<unknown, TableRowKey, CheckType, string, TableGroupValue<string | number | symbol>>>>;

package/components/table/table.js

@@ -62,7 +62,6 @@ var typeDefs = {
   hideHeader: Boolean,
   pagination: [Boolean, Object]
 };
-
 var defaults = function defaults() {
   return {
     checkType: 'checkbox',
@@ -77,7 +76,6 @@ var defaults = function defaults() {
     animation: true
   };
 };
-
 var events = {
   clickRow: true,
   dragstart: true,
@@ -90,17 +88,14 @@ var events = {
 };
 export var Table = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Table, _Component);
-
   function Table() {
     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;
+    // use public for unit test to get paginationRef
     _this.pagination = usePagination();
     _this.tree = useTree(_this.pagination.data);
     _this.columns = useColumns();
@@ -120,95 +115,74 @@ export var Table = /*#__PURE__*/function (_Component) {
     _this.stickyScrollbar = useStickyScrollbar(_this.stickyHeader.elementRef, _this.scroll, _this.width.tableRef, _this.fixedColumns.setScrollPosition);
     return _this;
   }
-
   var _proto = Table.prototype;
-
   _proto.checkAll = function checkAll() {
     this.checked.toggleCheckedAll(true);
   };
-
   _proto.uncheckAll = function uncheckAll() {
     this.checked.toggleCheckedAll(false);
   };
-
   _proto.getCheckedData = function getCheckedData() {
     return this.getData('checkedKeys');
   };
-
   _proto.getSelectedData = function getSelectedData() {
     return this.getData('selectedKeys');
   };
-
   _proto.scrollToRowByIndex = function scrollToRowByIndex(index) {
     return this.scrollToRowByKey(this.disableRow.getEnableKeys()[index]);
   };
-
   _proto.scrollToRowByKey = function scrollToRowByKey(key) {
     var _this2 = this;
-
     return new _Promise(function (resolve) {
       var scrollElement = _this2.scroll.scrollRef.value;
       var tr = scrollElement.querySelector("tr[data-key=\"" + key + "\"]");
-      if (!tr) return resolve(); // we can not use scrollIntoView with smooth, because it can only operate one element
+      if (!tr) return resolve();
+      // we can not use scrollIntoView with smooth, because it can only operate one element
       // at the same time
       // elem.scrollIntoView({behavior: 'smooth'});
-
       var headerHeight = scrollElement.querySelector('thead').offsetHeight;
       var scrollTop = scrollElement.scrollTop;
       var offsetTop = tr.offsetTop - headerHeight;
       var top = offsetTop - scrollTop;
       var topOneFrame = top / 60 / (100 / 1000);
-
       var step = function step() {
         scrollTop = Math[topOneFrame < 0 ? 'max' : 'min'](scrollTop + topOneFrame, offsetTop);
         scrollElement.scrollTop = scrollTop;
-
         if (!_this2.$unmounted && scrollTop !== offsetTop) {
           requestAnimationFrame(step);
         } else {
           resolve();
         }
       };
-
       requestAnimationFrame(step);
     });
   };
-
   _proto.exportTable = /*#__PURE__*/function () {
     var _exportTable2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, filename) {
       return _regeneratorRuntime.wrap(function _callee$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (data === void 0) {
-                data = this.get('data');
-              }
-
-              if (filename === void 0) {
-                filename = 'table';
-              }
-
-              _context2.next = 4;
-              return _exportTable(this.columns.getData, data, filename, this, filename);
-
-            case 4:
-              return _context2.abrupt("return", _context2.sent);
-
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (data === void 0) {
+              data = this.get('data');
+            }
+            if (filename === void 0) {
+              filename = 'table';
+            }
+            _context2.next = 4;
+            return _exportTable(this.columns.getData, data, filename, this, filename);
+          case 4:
+            return _context2.abrupt("return", _context2.sent);
+          case 5:
+          case "end":
+            return _context2.stop();
         }
       }, _callee, this);
     }));
-
     function exportTable(_x, _x2) {
       return _exportTable2.apply(this, arguments);
     }
-
     return exportTable;
   }();
-
   _proto.getData = function getData(type) {
     var keys = this.get(type);
     var ret = [];
@@ -220,29 +194,23 @@ export var Table = /*#__PURE__*/function (_Component) {
     });
     this.tree.loopData(function (value, index) {
       var key = allKeys[index];
-
       if (checkedKeysMap[key]) {
         ret.push(value);
       }
     });
     return ret;
   };
-
   _proto.clickRow = function clickRow(data, index, key) {
     this.trigger('clickRow', data, index, key);
   };
-
   _proto.onChangeGroup = function onChangeGroup(key, value) {
     this.set("group." + key, value);
   };
-
   return Table;
 }(Component);
 Table.template = template;
 Table.typeDefs = typeDefs;
 Table.defaults = defaults;
 Table.events = events;
-
 __decorate([bind], Table.prototype, "clickRow", null);
-
 __decorate([bind], Table.prototype, "onChangeGroup", null);