@king-design/vue 2.0.0-beta.0

package/components/table/useChecked.js

@@ -0,0 +1,242 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { useInstance } from 'intact-vue-next';
+import { toggleArray } from '../utils';
+export var AllCheckedStatus;
+
+(function (AllCheckedStatus) {
+  AllCheckedStatus[AllCheckedStatus["All"] = 0] = "All";
+  AllCheckedStatus[AllCheckedStatus["Indeterminate"] = 1] = "Indeterminate";
+  AllCheckedStatus[AllCheckedStatus["None"] = 2] = "None";
+})(AllCheckedStatus || (AllCheckedStatus = {}));
+
+export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, loopData) {
+  var instance = useInstance();
+  var allStatus = [];
+
+  function isChecked(key) {
+    return inArray(instance.get('checkedKeys'), key);
+  }
+
+  function toggleChecked(key, rowIndex) {
+    if (instance.get('checkType') === 'checkbox') {
+      instance.set('checkedKeys', toggleArray(instance.get('checkedKeys'), key));
+    } else {
+      if (isChecked(key)) return;
+      var grid = getGrid();
+      var gridRow = grid[rowIndex];
+
+      if (gridRow) {
+        // find the row index that has grouped radio
+        while (!grid[rowIndex][0].render) {
+          rowIndex--;
+        }
+      }
+
+      onChangeChecked(rowIndex, true);
+    }
+  }
+
+  function getAllCheckedStatus() {
+    var _instance$get = instance.get(),
+        checkedKeys = _instance$get.checkedKeys;
+
+    var enabledKeys = getEnableKeys();
+
+    if (enabledKeys.length && checkedKeys) {
+      if (enabledKeys.every(function (key) {
+        return _includesInstanceProperty(checkedKeys).call(checkedKeys, key);
+      })) {
+        return AllCheckedStatus.All;
+      } else if (enabledKeys.some(function (key) {
+        return _includesInstanceProperty(checkedKeys).call(checkedKeys, key);
+      })) {
+        return AllCheckedStatus.Indeterminate;
+      }
+    }
+
+    return AllCheckedStatus.None;
+  }
+
+  function toggleCheckedAll(v) {
+    instance.set('checkedKeys', getCheckedAllOrUncheckedAllKeys(v));
+  }
+  /**
+   * keep the original keys which don't exist in the enableKeys,
+   * and add or remove the enableKeys
+   */
+
+
+  function getCheckedAllOrUncheckedAllKeys(isChecked) {
+    var checkedKeys = instance.get('checkedKeys');
+    var enabledKeys = getEnableKeys();
+
+    if (!checkedKeys) {
+      if (isChecked) {
+        return _sliceInstanceProperty(enabledKeys).call(enabledKeys);
+      } else {
+        return [];
+      }
+    }
+
+    var results = _sliceInstanceProperty(checkedKeys).call(checkedKeys);
+
+    enabledKeys.forEach(function (key) {
+      addOrRemove(results, key, isChecked);
+    });
+    return results;
+  }
+
+  function updateAllCheckedStatus() {
+    allStatus = [];
+
+    var _instance$get2 = instance.get(),
+        data = _instance$get2.data,
+        rowKey = _instance$get2.rowKey,
+        checkType = _instance$get2.checkType,
+        merge = _instance$get2.merge;
+
+    if (!data || !data.length) return;
+    var allKeys = getAllKeys();
+    allKeys.forEach(function (key) {
+      var disabled = isDisabledKey(key);
+      allStatus.push({
+        checked: isChecked(key),
+        indeterminate: false,
+        disabled: disabled,
+        allDisabled: disabled
+      });
+    });
+    var grid = getGrid();
+
+    if (merge && checkType !== 'none') {
+      loopData(function (data, rowIndex) {
+        var _grid$rowIndex$ = grid[rowIndex][0],
+            spans = _grid$rowIndex$.spans,
+            render = _grid$rowIndex$.render;
+        var rowspan;
+
+        if (render && spans && (rowspan = spans.rowspan) > 1) {
+          var enabledCheckedCount = 0;
+          var disabledCheckedCount = 0;
+          var disabledCount = 0;
+
+          for (var i = rowIndex; i < rowspan + rowIndex; i++) {
+            var _status = allStatus[i];
+
+            if (isDisabledKey(allKeys[i])) {
+              disabledCount++;
+
+              if (_status.checked) {
+                disabledCheckedCount++;
+              }
+            } else if (_status.checked) {
+              enabledCheckedCount++;
+            }
+          }
+
+          var status = allStatus[rowIndex];
+
+          if (disabledCount === rowspan) {
+            // all rows are disabled
+            status.allDisabled = true;
+
+            if (disabledCheckedCount === rowspan) {
+              status.checked = true;
+            } else if (disabledCheckedCount > 0) {
+              status.indeterminate = true;
+            }
+          } else {
+            status.allDisabled = false;
+
+            if (enabledCheckedCount + disabledCount === rowspan) {
+              status.checked = true;
+            } else if (enabledCheckedCount > 0) {
+              status.indeterminate = true;
+            }
+          }
+        }
+      }); // console.log(allStatus);
+    }
+  }
+
+  function onChangeChecked(rowIndex, v) {
+    var _context;
+
+    // should check or uncheck all grouped rows
+    var checkType = instance.get('checkType');
+
+    var checkedKeys = _sliceInstanceProperty(_context = instance.get('checkedKeys') || []).call(_context); // if is radio check, remove all enabled keys
+
+
+    if (checkType === 'radio') {
+      for (var i = 0; i < checkedKeys.length; i++) {
+        var key = checkedKeys[i]; // FIXME: should ignore the disabled status, if we remove the radio keys
+
+        if (isDisabledKey(key)) continue;
+
+        _spliceInstanceProperty(checkedKeys).call(checkedKeys, i, 1);
+
+        i--;
+      }
+    }
+
+    var grid = getGrid();
+    var allKeys = getAllKeys();
+    var rowspan;
+
+    if ((rowspan = grid[rowIndex]) && (rowspan = rowspan[0]) && (rowspan = rowspan.spans) && (rowspan = rowspan.rowspan) && rowspan > 1) {
+      for (var _i = rowIndex; _i < rowspan + rowIndex; _i++) {
+        var status = allStatus[_i];
+        var _key = allKeys[_i];
+
+        if (!status.disabled) {
+          addOrRemove(checkedKeys, _key, v);
+        }
+      }
+    } else {
+      addOrRemove(checkedKeys, allKeys[rowIndex], v);
+    }
+
+    instance.set('checkedKeys', checkedKeys);
+  }
+
+  function getAllStatus() {
+    return allStatus;
+  }
+
+  instance.on('$receive:children', updateAllCheckedStatus);
+  instance.on('$change:checkedKeys', updateAllCheckedStatus); // for draggable
+
+  instance.on('$change:data', updateAllCheckedStatus);
+  instance.on('clickRow', function (data, index, key) {
+    if (instance.get('rowCheckable')) {
+      toggleChecked(key, index);
+    }
+  });
+  return {
+    isChecked: isChecked,
+    getAllCheckedStatus: getAllCheckedStatus,
+    toggleCheckedAll: toggleCheckedAll,
+    getAllStatus: getAllStatus,
+    onChangeChecked: onChangeChecked
+  };
+}
+export function inArray(arr, v) {
+  if (!arr) return false;
+  return arr.indexOf(v) > -1;
+}
+export function addOrRemove(keys, key, isAdd) {
+  var index = keys.indexOf(key);
+
+  if (isAdd) {
+    if (index === -1) {
+      keys.push(key);
+    }
+  } else if (index > -1) {
+    _spliceInstanceProperty(keys).call(keys, index, 1);
+  }
+}
+
+export {normalize} from 'intact-vue-next';

package/components/table/useColumns.d.ts

@@ -0,0 +1,19 @@
+import { VNodeComponentClass, Props } from 'intact-vue-next';
+import { TableColumn, TableColumnProps } from './column';
+export declare const context: {
+    Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<("none" | "radio" | "checkbox") | undefined>, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+};
+export declare function useColumns(): {
+    getColumns: () => VNodeComponentClass<TableColumn<any>>[][];
+    getCols: () => Props<TableColumnProps, import("intact").ComponentClass<any> | Element>[];
+    getData: () => {
+        columns: VNodeComponentClass<TableColumn<any>>[][];
+        cols: Props<TableColumnProps, import("intact").ComponentClass<any> | Element>[];
+        maxRows: number;
+        maxCols: number;
+    };
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/table/useColumns.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance, directClone } from 'intact-vue-next';
+import { eachChildren, isComponentVNode } from '../utils';
+import { TableColumn } from './column';
+import { createContext } from '../context';
+export var context = createContext();
+export function useColumns() {
+  var instance = useInstance();
+  var columns = [];
+  var maxRows = 0;
+  var maxCols = 0;
+  var cols = [];
+  var currentVNode = null;
+  instance.on('$receive:children', handleChildren);
+
+  function handleChildren() {
+    var _instance$get = instance.get(),
+        children = _instance$get.children;
+
+    columns = [];
+    maxRows = 0;
+    maxCols = 0;
+    cols = [];
+    currentVNode = null;
+    loopColumn(children, null, 0);
+  }
+
+  function loopColumn(children, parentProps, row) {
+    // add a flag, when we enter to the map callback set it to true,
+    // because it may have children but it has not TableColumn
+    var ret = false;
+    var isFirstColumn = true;
+    eachChildren(children, function (vNode) {
+      if (isComponentVNode(vNode, TableColumn)) {
+        if (isFirstColumn) {
+          var nextRow = row + 1;
+          if (nextRow > maxRows) maxRows = nextRow;
+          if (!columns[row]) columns[row] = [];
+          isFirstColumn = false;
+        }
+
+        ret = true;
+        var clonedVNode = directClone(vNode);
+
+        var props = _extends({}, clonedVNode.props, {
+          cols: 0,
+          rows: 0,
+          prevVNode: currentVNode
+        });
+
+        clonedVNode.props = props;
+        columns[row].push(clonedVNode);
+        handleProps(props, parentProps, row, clonedVNode);
+      }
+    });
+    return ret;
+  }
+
+  function handleProps(props, parentProps, row, vNode) {
+    var children = props.children;
+
+    if (children && loopColumn(children, props, row + 1)) {
+      // if the column has children columns, then set the row to 1
+      props.rows = 1;
+    } else {
+      // if the column has not children columns, then we must calculate
+      // the rows after loop all columns.
+      props.children = null;
+      props.cols = 1;
+      cols.push(props);
+      maxCols++;
+      Object.defineProperty(props, 'rows', {
+        get: function get() {
+          return maxRows - row;
+        },
+        enumerable: true
+      });
+      currentVNode = vNode;
+    } // update the parent's cols after hanlding all children columns
+
+
+    if (parentProps) {
+      parentProps.cols += props.cols;
+    }
+  }
+
+  function getColumns() {
+    return columns;
+  }
+
+  function getCols() {
+    return cols;
+  }
+
+  function getData() {
+    return {
+      columns: columns,
+      cols: cols,
+      maxRows: maxRows,
+      maxCols: maxCols
+    };
+  }
+
+  return {
+    getColumns: getColumns,
+    getCols: getCols,
+    getData: getData
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/table/useDisableRow.d.ts

@@ -0,0 +1,11 @@
+import type { TableRowKey } from './table';
+import type { useTree } from './useTree';
+export declare function useDisableRow(loopData: ReturnType<typeof useTree>['loopData']): {
+    isDisabled: (data: any, index: number, key: TableRowKey) => boolean;
+    getEnableKeys: () => TableRowKey[];
+    isDisabledKey: (key: TableRowKey) => boolean;
+    getAllKeys: () => TableRowKey[];
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/table/useDisableRow.js

@@ -0,0 +1,59 @@
+import { useInstance } from 'intact-vue-next';
+export function useDisableRow(loopData) {
+  var instance = useInstance();
+  var enabledKeys = [];
+  var disabledKeys = [];
+  var allKeys = [];
+
+  function setDisabledKeys() {
+    var _instance$get = instance.get(),
+        rowKey = _instance$get.rowKey;
+
+    enabledKeys = [];
+    disabledKeys = [];
+    allKeys = [];
+    loopData(function (item, index) {
+      var key = rowKey(item, index);
+
+      if (isDisabled(item, index, key)) {
+        disabledKeys.push(key);
+      } else {
+        enabledKeys.push(key);
+      }
+
+      allKeys.push(key);
+    });
+  }
+
+  function isDisabled(data, index, key) {
+    var _instance$get2 = instance.get(),
+        disableRow = _instance$get2.disableRow;
+
+    if (disableRow && disableRow(data, index, key)) return true;
+    return false;
+  }
+
+  function isDisabledKey(key) {
+    return disabledKeys.indexOf(key) > -1;
+  }
+
+  function getEnableKeys() {
+    return enabledKeys;
+  }
+
+  function getAllKeys() {
+    return allKeys;
+  }
+
+  instance.on('$receive:children', setDisabledKeys); // for draggable
+
+  instance.on('$change:data', setDisabledKeys);
+  return {
+    isDisabled: isDisabled,
+    getEnableKeys: getEnableKeys,
+    isDisabledKey: isDisabledKey,
+    getAllKeys: getAllKeys
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/table/useDraggable.d.ts

@@ -0,0 +1,11 @@
+import type { TableRowKey } from './table';
+import type { TableRow } from './row';
+export declare function useDraggable(): {
+    onRowDragStart: (e: MouseEvent, tableRow: TableRow) => void;
+    onRowDragOver: (e: MouseEvent, tableRow: TableRow) => void;
+    onRowDragEnd: (e: MouseEvent, tableRow: TableRow) => void;
+    draggingKey: import("../../hooks/useState").State<TableRowKey | null>;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/table/useDraggable.js

@@ -0,0 +1,62 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { useInstance, nextTick } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+export function useDraggable() {
+  var instance = useInstance();
+  var draggingKey = useState(null);
+  var originIndex;
+  var originData;
+  var draggingIndex;
+
+  function onRowDragStart(e, tableRow) {
+    draggingIndex = originIndex = tableRow.get('index');
+    var key = tableRow.get('key');
+    draggingKey.set(key);
+    originData = instance.get('data');
+    instance.trigger('dragstart', {
+      key: key,
+      from: draggingIndex
+    });
+  }
+
+  function onRowDragOver(e, tableRow) {
+    var _context;
+
+    e.preventDefault();
+    e.stopPropagation();
+    var newIndex = tableRow.get('index');
+    if (newIndex === draggingIndex) return; // swap data
+
+    var data = _sliceInstanceProperty(_context = instance.get('data')).call(_context);
+
+    var item = _spliceInstanceProperty(data).call(data, draggingIndex, 1)[0];
+
+    _spliceInstanceProperty(data).call(data, newIndex, 0, item);
+
+    draggingIndex = newIndex;
+    instance.set('data', data);
+  }
+
+  function onRowDragEnd(e, tableRow) {
+    e.preventDefault();
+    instance.set('data', originData);
+    nextTick(function () {
+      draggingKey.set(null);
+      instance.trigger('dragend', {
+        key: tableRow.get('key'),
+        from: originIndex,
+        to: draggingIndex
+      });
+    });
+  }
+
+  return {
+    onRowDragStart: onRowDragStart,
+    onRowDragOver: onRowDragOver,
+    onRowDragEnd: onRowDragEnd,
+    draggingKey: draggingKey
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/table/useExpandable.d.ts

@@ -0,0 +1,7 @@
+import type { TableRowKey } from './table';
+export declare function useExpandable(): {
+    isExpanded: (key: TableRowKey) => boolean;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/table/useExpandable.js

@@ -0,0 +1,26 @@
+import { useInstance } from 'intact-vue-next';
+import { inArray } from './useChecked';
+import { toggleArray } from '../utils';
+export function useExpandable() {
+  var instance = useInstance();
+
+  function isExpanded(key) {
+    return inArray(instance.get('expandedKeys'), key);
+  }
+
+  instance.on('clickRow', function (data, index, key) {
+    if (instance.get('rowExpandable')) {
+      var _instance$get = instance.get(),
+          expandedKeys = _instance$get.expandedKeys,
+          $blocks = _instance$get.$blocks;
+
+      if (!$blocks || !$blocks.expand) return;
+      instance.set('expandedKeys', toggleArray(expandedKeys, key));
+    }
+  });
+  return {
+    isExpanded: isExpanded
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/table/useFixedColumns.d.ts

@@ -0,0 +1,27 @@
+import { VNodeComponentClass, Props, Key } from 'intact-vue-next';
+import { TableColumn, TableColumnProps } from './column';
+import type { TableProps, TableRowKey } from './table';
+import { State } from '../../hooks/useState';
+import type { useScroll } from './useScroll';
+declare type ScrollPosition = 'left' | 'middle' | 'right';
+export declare const context: {
+    Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+};
+export declare function useFixedColumns(getColumns: () => VNodeComponentClass<TableColumn>[][], { scrollRef, callbacks }: ReturnType<typeof useScroll>, widthMap: State<Record<TableRowKey, number>>): {
+    scrollPosition: State<ScrollPosition | null>;
+    setScrollPosition: (scrollLeft: number) => void;
+    hasFixed: State<boolean>;
+    getHasFixedLeft: () => boolean;
+    getOffsetMap: () => Record<Key, number>;
+};
+export declare function getClassAndStyleForFixed({ className, fixed }: Props<TableColumnProps>, offset: number, checkType?: TableProps['checkType']): {
+    className: string;
+    style: {
+        [x: string]: string;
+    } | null;
+};
+export {};
+
+
+export {normalize} from 'intact-vue-next';