@king-design/vue 2.0.0-beta.0

package/components/table/table.js

@@ -0,0 +1,238 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import { __decorate } from "tslib";
+import { Component } from 'intact-vue-next';
+import template from './table.vdt';
+import { useColumns } from './useColumns';
+import { useFixedColumns } from './useFixedColumns';
+import { useStickyHeader } from './useStickyHeader';
+import { bind } from '../utils';
+import { useChecked } from './useChecked';
+import { useDisableRow } from './useDisableRow';
+import { useSortable } from './useSortable';
+import { useMerge } from './useMerge';
+import { useExpandable } from './useExpandable';
+import { useSelected } from './useSelected';
+import { useTree } from './useTree';
+import { Tooltip } from '../tooltip/tooltip';
+import { useRestRowStatus } from './useRestRowStatus';
+import { exportTable as _exportTable } from './exportTable';
+import { useResizable } from './useResizable';
+import { useDraggable } from './useDraggable';
+import { useStickyScrollbar } from './useStickyScrollbar';
+import { useWidth } from './useWidth';
+import { useScroll } from './useScroll';
+var typeDefs = {
+  data: Array,
+  fixHeader: [Boolean, String, Number],
+  stickHeader: [Boolean, String, Number],
+  stickScrollbar: [Boolean, String, Number],
+  checkType: ['checkbox', 'radio', 'none'],
+  checkedKeys: Array,
+  rowKey: Function,
+  rowCheckable: Boolean,
+  disableRow: Function,
+  type: ['default', 'border', 'grid'],
+  stripe: Boolean,
+  rowClassName: Function,
+  group: Object,
+  sort: Object,
+  loading: Boolean,
+  merge: Function,
+  expandedKeys: Array,
+  rowExpandable: Boolean,
+  selectedKeys: Array,
+  rowSelectable: [Boolean, 'single', 'multiple'],
+  childrenKey: String,
+  indent: Number,
+  spreadKeys: Array,
+  tooltipPosition: Tooltip.typeDefs.position,
+  tooltipContainer: Tooltip.typeDefs.container,
+  keepStatus: Boolean,
+  showIndeterminate: Boolean,
+  resizable: Boolean,
+  minColWidth: Number,
+  widthStoreKey: String
+};
+
+var defaults = function defaults() {
+  return {
+    checkType: 'checkbox',
+    rowKey: function rowKey(value, index) {
+      return index;
+    },
+    rowCheckable: true,
+    rowExpandable: true,
+    childrenKey: 'children',
+    indent: 32,
+    minColWidth: 40
+  };
+};
+
+var events = {
+  clickRow: true,
+  dragstart: true,
+  dragend: true
+};
+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;
+    _this.tree = useTree();
+    _this.columns = useColumns();
+    _this.scroll = useScroll();
+    _this.stickyHeader = useStickyHeader(_this.scroll.callbacks);
+    _this.width = useWidth(_this.scroll.scrollRef, _this.columns.getColumns);
+    _this.resizable = useResizable(_this.scroll.scrollRef, _this.width.tableRef, _this.width.tableWidth, _this.width.widthMap, _this.width.storeWidth);
+    _this.fixedColumns = useFixedColumns(_this.columns.getColumns, _this.scroll, _this.width.widthMap);
+    _this.disableRow = useDisableRow(_this.tree.loopData);
+    _this.merge = useMerge(_this.columns.getCols);
+    _this.checked = useChecked(_this.disableRow.getEnableKeys, _this.disableRow.getAllKeys, _this.disableRow.isDisabledKey, _this.merge.getGrid, _this.tree.loopData);
+    _this.sortable = useSortable();
+    _this.expandable = useExpandable();
+    _this.selected = useSelected();
+    _this.resetRowStatus = useRestRowStatus(_this.disableRow.getAllKeys);
+    _this.draggable = useDraggable();
+    _this.stickyScrollbar = useStickyScrollbar(_this.stickyHeader.elementRef, _this.scroll, _this.width.tableRef, _this.fixedColumns.setScrollPosition, _this.width.tableWidth);
+    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
+      // 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();
+          }
+        }
+      }, _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 = [];
+    if (!keys) return ret;
+    var allKeys = this.disableRow.getAllKeys();
+    var checkedKeysMap = {};
+    keys.forEach(function (item) {
+      checkedKeysMap[item] = true;
+    });
+    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);
+
+export {normalize} from 'intact-vue-next';

package/components/table/table.vdt.js

@@ -0,0 +1,332 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
+import { createElementVNode as _$ce, map as _$ma, className as _$cn, createUnknownComponentVNode as _$cc, createVNode as _$cv, noop as _$no, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-vue-next';
+import { eachChildren } from '../utils';
+import { makeStyles } from './styles';
+import { isStringOrNumber, isNull } from 'intact-shared';
+import { getClassAndStyleForFixed } from './useFixedColumns';
+import { Affix } from '../affix';
+import { TableRow } from './row';
+import { Checkbox } from '../checkbox';
+import { context as GroupContext } from './useGroup';
+import { context as SortableContext } from './useSortable';
+import { Spin } from '../spin';
+import { Transition, TransitionGroup, createComponentVNode } from 'intact';
+import { _$ } from '../../i18n';
+import { context as TableContext } from './useColumns';
+import { expandAnimationCallbacks } from '../utils';
+import { Tooltip } from '../tooltip';
+import { AllCheckedStatus } from './useChecked';
+import { context as ResizableContext } from './useResizable';
+import { context as FixedColumnsContext } from './useFixedColumns';
+var _$tmp0 = {
+  'width': '40'
+};
+var _$tmp1 = {
+  'overlay': true,
+  'size': 'small',
+  'className': 'k-table-spin'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj,
+      _this = this;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      data = _this$get.data,
+      children = _this$get.children,
+      className = _this$get.className,
+      fixHeader = _this$get.fixHeader,
+      checkType = _this$get.checkType,
+      rowKey = _this$get.rowKey,
+      type = _this$get.type,
+      stripe = _this$get.stripe,
+      rowClassName = _this$get.rowClassName,
+      group = _this$get.group,
+      sort = _sortInstanceProperty(_this$get),
+      loading = _this$get.loading,
+      merge = _this$get.merge,
+      childrenKey = _this$get.childrenKey,
+      indent = _this$get.indent,
+      tooltipPosition = _this$get.tooltipPosition,
+      tooltipContainer = _this$get.tooltipContainer,
+      showIndeterminate = _this$get.showIndeterminate,
+      resizable = _this$get.resizable,
+      draggable = _this$get.draggable;
+
+  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$fixedColumns = this.fixedColumns,
+      setScrollPosition = _this$fixedColumns.setScrollPosition,
+      scrollPosition = _this$fixedColumns.scrollPosition,
+      hasFixed = _this$fixedColumns.hasFixed,
+      getHasFixedLeft = _this$fixedColumns.getHasFixedLeft,
+      getOffsetMap = _this$fixedColumns.getOffsetMap;
+  var scrollRef = this.scroll.scrollRef;
+  var _this$stickyHeader = this.stickyHeader,
+      stickHeader = _this$stickyHeader.stickHeader,
+      excludeStickHeader = _this$stickyHeader.excludeStickHeader,
+      elementRef = _this$stickyHeader.elementRef,
+      headRef = _this$stickyHeader.headRef;
+  var classNameObj = (_classNameObj = {
+    'k-table': true,
+    '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()] = true, _classNameObj);
+  var style = isStringOrNumber(fixHeader) ? {
+    maxHeight: fixHeader + "px"
+  } : null;
+  var _this$width = this.width,
+      getWidth = _this$width.getWidth,
+      tableRef = _this$width.tableRef,
+      tableWidth = _this$width.tableWidth;
+  var onStart = this.resizable.start;
+
+  var colgroup = _$ce(2, 'colgroup', [checkType !== 'none' ? _$ce(2, 'col', null, 1, null, _$tmp0) : undefined, _$ma(cols, function ($value, $key) {
+    var _$cn2;
+
+    return _$ce(2, 'col', null, 1, _$cn((_$cn2 = {}, _$cn2[$value.className] = $value.className, _$cn2)), {
+      'width': $value.width,
+      'style': {
+        width: getWidth($value.key)
+      }
+    });
+  }, $this)], 0);
+
+  var hasData = data && data.length;
+  var hasFixedLeft = getHasFixedLeft();
+  var _this$checked = this.checked,
+      getAllCheckedStatus = _this$checked.getAllCheckedStatus,
+      toggleCheckedAll = _this$checked.toggleCheckedAll,
+      getAllStatus = _this$checked.getAllStatus,
+      onChangeChecked = _this$checked.onChangeChecked;
+  var allCheckedStatus = getAllCheckedStatus();
+  var offsetMap = getOffsetMap();
+
+  var thead = _$cc(TableContext.Provider, {
+    'value': checkType,
+    'children': _$cc(GroupContext.Provider, {
+      'value': {
+        group: group,
+        onChange: this.onChangeGroup
+      },
+      'children': _$cc(SortableContext.Provider, {
+        'value': {
+          sort: sort,
+          onChange: this.sortable.onChange
+        },
+        'children': _$cc(ResizableContext.Provider, {
+          'value': {
+            resizable: resizable,
+            onStart: onStart
+          },
+          'children': _$cc(FixedColumnsContext.Provider, {
+            'value': offsetMap,
+            'children': _$ce(2, 'thead', _$ma(columns, function ($value, $key) {
+              return _$ce(2, 'tr', [$key === 0 && checkType !== 'none' ? _$cv('th', _extends({}, getClassAndStyleForFixed({
+                fixed: hasFixedLeft ? 'left' : false
+              }, 0), {
+                'rowspan': maxRows
+              }), checkType === 'checkbox' ? _$cc(Checkbox, {
+                'value': allCheckedStatus === AllCheckedStatus.All,
+                'indeterminate': showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate,
+                'ev-$change:value': toggleCheckedAll,
+                'disabled': !hasData
+              }) : undefined) : undefined, $value], 0);
+            }, $this), 4)
+          })
+        })
+      })
+    })
+  });
+
+  var getAllKeys = this.disableRow.getAllKeys;
+  var getGrid = this.merge.getGrid;
+  var allStatus = getAllStatus();
+  var allKeys = getAllKeys();
+  var colCount = maxCols + (checkType !== 'none' ? 1 : 0);
+  var isExpanded = this.expandable.isExpanded;
+  var isSelected = this.selected.isSelected;
+  var _this$tree = this.tree,
+      loopData = _this$tree.loopData,
+      isSpreaded = _this$tree.isSpreaded,
+      toggleSpreadRow = _this$tree.toggleSpreadRow;
+  var _this$draggable = this.draggable,
+      onRowDragStart = _this$draggable.onRowDragStart,
+      onRowDragOver = _this$draggable.onRowDragOver,
+      onRowDragEnd = _this$draggable.onRowDragEnd,
+      draggingKey = _this$draggable.draggingKey;
+
+  var tbody = _$cc(TransitionGroup, {
+    'tag': 'tbody',
+    'name': 'k-fade',
+    'move': !draggingKey.value,
+    'children': !hasData ? _$ce(2, 'tr', _$ce(2, 'td', (_$blocks['empty'] = function ($super) {
+      return _$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~');
+    }, __$blocks['empty'] = function ($super, data) {
+      var block = $blocks['empty'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['empty'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }, __$blocks['empty'](_$no)), 0, 'k-table-empty', {
+      'colspan': colCount
+    }), 2, null, null, 'table-empty') : function () {
+      var rows = [];
+      loopData(function (value, index, level, hidden) {
+        // don't render if row is hidden
+        if (hidden) return hidden;
+        var status = allStatus[index];
+        var key = allKeys[index];
+        var spreaded = isSpreaded(key);
+        var hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
+        var indentSize = indent ? indent * level : 0;
+
+        var row = _$cc(TableRow, {
+          'key': key,
+          'cols': cols,
+          'data': value,
+          'checkType': checkType,
+          'hasFixedLeft': hasFixedLeft,
+          'onClick': _this.clickRow,
+          'checked': status.checked,
+          'indeterminate': status.indeterminate,
+          'index': index,
+          'disabled': status.disabled,
+          'allDisabled': status.allDisabled,
+          'className': _$cn(rowClassName && rowClassName(value, index, key)),
+          'merge': merge,
+          'grid': getGrid(),
+          'onChangeChecked': onChangeChecked,
+          'selected': isSelected(key),
+          'spreaded': spreaded,
+          'hasChildren': hasChildren,
+          'indent': indentSize,
+          'onToggleSpreadRow': toggleSpreadRow,
+          'onBeforeUnmount': _this.resetRowStatus.onRowBeforeUnmount,
+          'offsetMap': offsetMap,
+          'draggable': draggable,
+          'draggingKey': draggingKey.value,
+          'onRowDragStart': onRowDragStart,
+          'onRowDragEnd': onRowDragEnd,
+          'onRowDragOver': onRowDragOver
+        }, key);
+
+        if ($blocks.tooltip) {
+          var content = (_$blocks['tooltip'] = function ($super) {
+            return null;
+          }, __$blocks['tooltip'] = function ($super, data) {
+            var block = $blocks['tooltip'];
+
+            var callBlock = function callBlock() {
+              return _$blocks['tooltip'].call($this, $super, data);
+            };
+
+            return block ? block.call($this, callBlock, data) : callBlock();
+          }, __$blocks['tooltip'](_$no, [value, index]));
+          row = _$cc(Tooltip, {
+            'key': key,
+            'position': tooltipPosition,
+            'container': tooltipContainer,
+            'children': row,
+            '$blocks': function ($blocks) {
+              var _$blocks = {},
+                  __$blocks = _$ex({}, $blocks);
+
+              return (_$blocks['content'] = function ($super) {
+                return content;
+              }, __$blocks['content'] = function ($super, data) {
+                var block = $blocks['content'];
+
+                var callBlock = function callBlock() {
+                  return _$blocks['content'].call($this, $super, data);
+                };
+
+                return block ? block.call($this, callBlock, data) : callBlock();
+              }), __$blocks;
+            }.call($this, _$em)
+          }, key);
+        }
+
+        rows.push(row);
+
+        if ($blocks.expand) {
+          var expanded = isExpanded(key);
+          rows.push(_$ce(2, 'tr', _$ce(2, 'td', _$cc(Transition, _extends({}, expandAnimationCallbacks, {
+            'children': expanded ? _$ce(2, 'div', (_$blocks['expand'] = function ($super) {
+              return null;
+            }, __$blocks['expand'] = function ($super, data) {
+              var block = $blocks['expand'];
+
+              var callBlock = function callBlock() {
+                return _$blocks['expand'].call($this, $super, data);
+              };
+
+              return block ? block.call($this, callBlock, data) : callBlock();
+            }, __$blocks['expand'](_$no, [value, index])), 0, 'k-table-expand') : undefined
+          })), 2, null, {
+            'colspan': colCount
+          }), 2, _$cn({
+            "k-expand": true,
+            'k-expanded': expanded
+          }), null, key + ".$expand"));
+        }
+
+        return hidden || !spreaded;
+      });
+      return rows;
+    }()
+  });
+
+  var tableWidthPx = tableWidth.value ? tableWidth.value + "px" : null;
+  var _this$stickyScrollbar = this.stickyScrollbar,
+      shouldStickScrollbar = _this$stickyScrollbar.shouldStickScrollbar,
+      stickScrollbar = _this$stickyScrollbar.stick,
+      stickScrollbarStyle = _this$stickyScrollbar.style,
+      scrollbarRef = _this$stickyScrollbar.scrollbarRef,
+      onScrollbarScroll = _this$stickyScrollbar.onScroll,
+      tableActualWidth = _this$stickyScrollbar.tableActualWidth;
+  return _$ce(2, 'div', [_$ce(2, 'div', [!isNull(stickHeader.value) ? _$cc(Affix, {
+    'top': stickHeader.value,
+    'exclude': excludeStickHeader,
+    'className': 'k-table-affix-header',
+    'children': _$ce(2, 'table', [colgroup, thead], 0, null, {
+      'style': {
+        width: tableWidthPx
+      }
+    }, null, headRef)
+  }) : undefined, _$ce(2, 'table', [colgroup, isNull(stickHeader.value) ? thead : undefined, tbody], 0, null, {
+    'style': {
+      width: tableWidthPx
+    }
+  }, null, tableRef)], 0, 'k-table-wrapper', {
+    'style': style
+  }, null, scrollRef), _$cc(Transition, {
+    'name': 'k-fade',
+    'children': loading ? _$cc(Spin, _$tmp1) : undefined
+  }), !isNull(stickScrollbar.value) ? _$cc(Affix, {
+    'bottom': stickScrollbar.value,
+    'shouldFix': shouldStickScrollbar,
+    'style': stickScrollbarStyle.value,
+    'children': _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-table-scrollbar-inner', {
+      'style': {
+        width: tableActualWidth.value
+      }
+    }), 2, 'k-table-scrollbar', {
+      'ev-scroll': onScrollbarScroll
+    }, null, scrollbarRef)
+  }) : undefined], 0, _$cn(classNameObj), null, null, elementRef);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/table/useChecked.d.ts

@@ -0,0 +1,27 @@
+import type { TableRowKey } from './';
+import type { TableGrid } from './useMerge';
+import type { useTree } from './useTree';
+declare type RowStatus = {
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    allDisabled: boolean;
+};
+export declare enum AllCheckedStatus {
+    All = 0,
+    Indeterminate = 1,
+    None = 2
+}
+export declare function useChecked(getEnableKeys: () => TableRowKey[], getAllKeys: () => TableRowKey[], isDisabledKey: (key: TableRowKey) => boolean, getGrid: () => TableGrid, loopData: ReturnType<typeof useTree>['loopData']): {
+    isChecked: (key: TableRowKey) => boolean;
+    getAllCheckedStatus: () => AllCheckedStatus;
+    toggleCheckedAll: (v: boolean) => void;
+    getAllStatus: () => RowStatus[];
+    onChangeChecked: (rowIndex: number, v: boolean) => void;
+};
+export declare function inArray<T>(arr: T[] | undefined, v: T): boolean;
+export declare function addOrRemove(keys: TableRowKey[], key: TableRowKey, isAdd: boolean): void;
+export {};
+
+
+export {normalize} from 'intact-vue-next';