@king-design/vue 2.0.0-beta.0

package/components/tree/useChecked.js

@@ -0,0 +1,144 @@
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import { useInstance } from 'intact-vue-next';
+import { useReceive } from '../../hooks/useReceive';
+export function useChecked(getNodes) {
+  var instance = useInstance();
+  var checkedKeys = new _Set();
+  instance.on('$receive:checkedKeys', function (v) {
+    checkedKeys = new _Set(v);
+  });
+  useReceive(['data', 'checkedKeys'], refresh);
+
+  function refresh() {
+    var nodes = getNodes();
+    var uncorrelated = instance.get('uncorrelated');
+    var needRecheckNodes = new _Set();
+
+    var loop = function loop(nodes) {
+      nodes.forEach(function (node) {
+        var key = node.key,
+            parent = node.parent;
+        var checked = checkedKeys.has(key);
+        var shouldUpdateCheckedKeys = false;
+
+        if (parent && !uncorrelated) {
+          if (checked && !parent.checked) {
+            // need look back
+            needRecheckNodes.add(parent);
+          } else if (!node.data.disabled) {
+            if (checked !== parent.checked) {
+              checked = parent.checked; // if we use the parent checked status, we should update checkedKeys
+
+              shouldUpdateCheckedKeys = true;
+            }
+          }
+        }
+
+        node.checked = checked;
+
+        if (shouldUpdateCheckedKeys) {
+          updateCheckedKeys(node);
+        }
+
+        if (node.children) {
+          loop(node.children);
+        }
+      });
+    };
+
+    loop(nodes);
+    needRecheckNodes.forEach(function (node) {
+      updateUpward(node);
+    });
+  }
+
+  function updateCheckedKeys(node) {
+    if (node.checked) {
+      checkedKeys.add(node.key);
+    } else {
+      checkedKeys.delete(node.key);
+    }
+  }
+
+  function toggle(node) {
+    var uncorrelated = instance.get('uncorrelated');
+    updateDownward(node, !node.checked);
+    updateUpward(node.parent);
+    instance.set('checkedKeys', _Array$from(checkedKeys));
+  }
+
+  function updateDownward(node, checked) {
+    node.checked = checked;
+    node.indeterminate = false;
+    updateCheckedKeys(node);
+    if (instance.get('uncorrelated')) return;
+    var children = node.children;
+
+    if (children) {
+      for (var i = 0; i < children.length; i++) {
+        var child = children[i];
+        if (child.data.disabled) continue;
+        updateDownward(child, checked);
+      }
+    }
+  }
+
+  function updateUpward(node) {
+    if (instance.get('uncorrelated') || !node) return;
+    var checkedCount = 0;
+    var count = 0;
+    var indeterminate;
+    var children = node.children;
+
+    for (var i = 0; i < children.length; i++) {
+      var child = children[i];
+      if (child.data.disabled) continue;
+
+      if (child.checked) {
+        checkedCount++;
+      } else if (child.indeterminate) {
+        indeterminate = true;
+      }
+
+      count++;
+    }
+
+    if (!indeterminate) {
+      indeterminate = !!(checkedCount && checkedCount < count);
+    }
+
+    node.checked = !!(checkedCount && checkedCount === count);
+    node.indeterminate = indeterminate;
+    updateCheckedKeys(node);
+    updateUpward(node.parent);
+  }
+
+  function getCheckedData(leafOnly) {
+    var data = [];
+
+    var loop = function loop(nodes) {
+      for (var i = 0; i < nodes.length; i++) {
+        var node = nodes[i];
+
+        if (node.checked && (!leafOnly || !node.children)) {
+          data.push(node.data);
+        }
+
+        if (node.children) {
+          loop(node.children);
+        }
+      }
+    };
+
+    loop(getNodes());
+    return data;
+  }
+
+  return {
+    toggle: toggle,
+    getCheckedData: getCheckedData
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/tree/useDraggable.d.ts

@@ -0,0 +1,19 @@
+import { Key } from 'intact-vue-next';
+import type { Node } from './useNodes';
+export declare enum Mode {
+    Before = 0,
+    After = 1,
+    Inner = 2
+}
+export declare const RANGE = 0.25;
+export declare function useDraggable(): {
+    onDragStart: (node: Node<Key>, e: MouseEvent) => void;
+    onDragOver: (node: Node<Key>, e: MouseEvent) => void;
+    onDragEnd: (e: MouseEvent) => void;
+    draggingKey: import("../../hooks/useState").State<Key | null>;
+    overKey: import("../../hooks/useState").State<Key | null>;
+    mode: import("../../hooks/useState").State<Mode | null>;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/tree/useDraggable.js

@@ -0,0 +1,174 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { useInstance } from 'intact-vue-next';
+import { containsOrEqual } from '../../hooks/useDocumentClick';
+import { useState } from '../../hooks/useState';
+export var Mode;
+
+(function (Mode) {
+  Mode[Mode["Before"] = 0] = "Before";
+  Mode[Mode["After"] = 1] = "After";
+  Mode[Mode["Inner"] = 2] = "Inner";
+})(Mode || (Mode = {}));
+
+export var RANGE = 0.25;
+export function useDraggable() {
+  var instance = useInstance();
+  var draggingKey = useState(null);
+  var overKey = useState(null);
+  var mode = useState(null);
+  var draggingDom = null;
+  var draggingNode = null;
+  var overNode = null;
+  var clientX = null;
+  var clientY = null;
+  var valid = false;
+
+  function onDragStart(node, e) {
+    e.stopPropagation();
+
+    var _instance$get = instance.get(),
+        allowDrag = _instance$get.allowDrag;
+
+    if (node.data.disabled || allowDrag && !allowDrag(node)) {
+      instance.trigger('denydrag', node);
+      e.preventDefault();
+      return;
+    }
+
+    draggingDom = e.target;
+    draggingNode = node;
+    draggingKey.set(node.key);
+  }
+
+  function onDragOver(node, e) {
+    e.stopPropagation();
+    e.preventDefault();
+    var overDom = e.target;
+    if (containsOrEqual(draggingDom, overDom)) return; // ignore the over event, it the mouse does not move
+
+    var newClientX = e.clientX,
+        newClientY = e.clientY;
+    if (clientX === newClientX && clientY === newClientY) return;
+    clientX = newClientX;
+    clientY = newClientY;
+    var newMode = calcInserMode(e, overDom);
+
+    if (node !== overNode || newMode !== mode.value) {
+      overNode = node;
+      mode.set(newMode);
+      overKey.set(node.key); // if the node does not allow drop, prevent the dragging ndoe from inserting to it
+
+      if (mode.value === Mode.Inner) {
+        var _instance$get2 = instance.get(),
+            allowDrop = _instance$get2.allowDrop;
+
+        if (node.data.disabled || allowDrop && !allowDrop(node)) {
+          instance.trigger('denydrop', node);
+          valid = false;
+          return;
+        }
+      }
+
+      valid = true;
+    }
+  }
+
+  function calcInserMode(e, dom) {
+    var clientY = e.clientY;
+
+    var _dom$getBoundingClien = dom.getBoundingClientRect(),
+        top = _dom$getBoundingClien.top,
+        bottom = _dom$getBoundingClien.bottom,
+        height = _dom$getBoundingClien.height;
+
+    var des = height * RANGE;
+    if (clientY <= top + des) return Mode.Before;else if (clientY >= bottom - des) return Mode.After;
+    return Mode.Inner;
+  }
+
+  function onDragEnd(e) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (valid) {
+      handleData();
+      instance.trigger('dragend', {
+        srcNode: draggingNode,
+        toNode: overNode,
+        mode: mode.value
+      });
+    }
+
+    draggingKey.set(null);
+    mode.set(null);
+    draggingDom = null;
+    draggingNode = null;
+    overNode = null;
+    clientX = null;
+    clientY = null;
+    valid = false;
+  }
+
+  function handleData() {
+    var _context;
+
+    var _instance$get3 = instance.get(),
+        data = _instance$get3.data; // remove node firstly
+
+
+    remove(draggingNode, data);
+
+    switch (mode.value) {
+      case Mode.Before:
+        insert(overNode, draggingNode, data, 0);
+        break;
+
+      case Mode.After:
+        insert(overNode, draggingNode, data, 1);
+        break;
+
+      case Mode.Inner:
+        append(overNode, draggingNode);
+        instance.expand(overNode.key);
+        break;
+    }
+
+    instance.set('data', _concatInstanceProperty(_context = []).call(_context, data));
+  }
+
+  return {
+    onDragStart: onDragStart,
+    onDragOver: onDragOver,
+    onDragEnd: onDragEnd,
+    draggingKey: draggingKey,
+    overKey: overKey,
+    mode: mode
+  };
+}
+
+function remove(node, data) {
+  var siblings = getNodeSiblings(node, data);
+  var index = siblings.indexOf(node.data);
+
+  _spliceInstanceProperty(siblings).call(siblings, index, 1);
+}
+
+function insert(node, newNode, data, offset) {
+  var siblings = getNodeSiblings(node, data);
+  var index = siblings.indexOf(node.data);
+
+  _spliceInstanceProperty(siblings).call(siblings, index + offset, 0, newNode.data);
+}
+
+function append(node, newNode) {
+  var children = node.data.children || (node.data.children = []);
+  children.push(newNode.data);
+}
+
+function getNodeSiblings(node, data) {
+  var parent = node.parent;
+  return parent ? parent.data.children : data;
+}
+
+export {normalize} from 'intact-vue-next';

package/components/tree/useExpanded.d.ts

@@ -0,0 +1,9 @@
+import { Key } from 'intact-vue-next';
+import type { Node } from './useNodes';
+export declare function useExpanded(getNodes: () => Node<Key>[]): {
+    get: () => Set<Key>;
+    toggle: (node: Node<Key>) => Promise<void>;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/tree/useExpanded.js

@@ -0,0 +1,96 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import { useInstance, onBeforeMount } from 'intact-vue-next';
+export function useExpanded(getNodes) {
+  var instance = useInstance();
+  var expandedKeys = new _Set();
+  instance.on('$receive:expandedKeys', function (v) {
+    expandedKeys = new _Set(v);
+  });
+  onBeforeMount(function () {
+    if (instance.get('defaultExpandAll')) {
+      expandAll();
+    }
+  });
+
+  function toggle(_x) {
+    return _toggle.apply(this, arguments);
+  }
+
+  function _toggle() {
+    _toggle = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(node) {
+      var _instance$get2, load, key, expanded;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _instance$get2 = instance.get(), load = _instance$get2.load;
+              key = node.key;
+              expanded = expandedKeys.has(key);
+
+              if (!(load && !expanded && !node.loaded)) {
+                _context.next = 9;
+                break;
+              }
+
+              node.loaded = false;
+              instance.forceUpdate();
+              _context.next = 8;
+              return load(node);
+
+            case 8:
+              node.loaded = true;
+
+            case 9:
+              if (expanded) {
+                expandedKeys.delete(node.key);
+              } else {
+                expandedKeys.add(node.key);
+              }
+
+              instance.set('expandedKeys', _Array$from(expandedKeys));
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _toggle.apply(this, arguments);
+  }
+
+  function expandAll() {
+    var _instance$get = instance.get(),
+        load = _instance$get.load;
+
+    var loop = function loop(nodes) {
+      for (var i = 0; i < nodes.length; i++) {
+        var node = nodes[i];
+
+        if (!load || node.loaded) {
+          expandedKeys.add(node.key);
+        }
+
+        if (node.children) {
+          loop(node.children);
+        }
+      }
+    };
+
+    loop(getNodes());
+    instance.set('expandedKeys', _Array$from(expandedKeys));
+  }
+
+  return {
+    get: function get() {
+      return expandedKeys;
+    },
+    toggle: toggle
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/tree/useFilter.d.ts

@@ -0,0 +1,6 @@
+import { Key } from 'intact-vue-next';
+import type { Node } from './useNodes';
+export declare function useFilter(getNodes: () => Node<Key>[], getExpandedKeys: () => Set<Key>): void;
+
+
+export {normalize} from 'intact-vue-next';

package/components/tree/useFilter.js

@@ -0,0 +1,55 @@
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { useInstance, onBeforeUpdate } from 'intact-vue-next';
+import { EMPTY_OBJ, isNullOrUndefined } from 'intact-shared';
+export function useFilter(getNodes, getExpandedKeys) {
+  var instance = useInstance();
+  instance.on('$receive:filter', refresh);
+  onBeforeUpdate(function (lastVNode, nextVNode) {
+    var lastProps = lastVNode.props || EMPTY_OBJ;
+    var nextProps = nextVNode.props || EMPTY_OBJ;
+    if (lastProps === nextProps || isNullOrUndefined(_filterInstanceProperty(lastProps)) && isNullOrUndefined(_filterInstanceProperty(nextProps))) return;
+
+    if (_filterInstanceProperty(lastProps) === _filterInstanceProperty(nextProps)) {
+      refresh();
+    }
+  });
+
+  function refresh() {
+    var nodes = getNodes();
+
+    var _instance$get = instance.get(),
+        filter = _filterInstanceProperty(_instance$get);
+
+    var loop = function loop(nodes) {
+      nodes.forEach(function (node) {
+        if (filter) {
+          if (filter(node.data, node)) {
+            node.filter = true;
+            updateFilterUpward(node.parent);
+          } else {
+            node.filter = false;
+          }
+        } else {
+          node.filter = true;
+        }
+
+        if (node.children) {
+          loop(node.children);
+        }
+      });
+    };
+
+    loop(getNodes());
+  }
+
+  function updateFilterUpward(node) {
+    if (!node) return; // should expand the node 
+
+    getExpandedKeys().add(node.key);
+    if (_filterInstanceProperty(node)) return;
+    node.filter = true;
+    updateFilterUpward(node.parent);
+  }
+}
+
+export {normalize} from 'intact-vue-next';

package/components/tree/useNodes.d.ts

@@ -0,0 +1,25 @@
+import { Children, Key } from 'intact-vue-next';
+export declare type DataItem<K extends Key> = {
+    label?: Children;
+    key?: K;
+    disabled?: boolean;
+    loaded?: boolean;
+    children?: DataItem<K>[];
+};
+export declare function useNodes(): {
+    getNodes: () => Node<Key>[];
+};
+export declare class Node<K extends Key> {
+    data: DataItem<K>;
+    parent: Node<K> | null;
+    key: K;
+    checked: boolean;
+    indeterminate: boolean;
+    children: Node<K>[] | null;
+    loaded: boolean | null | undefined;
+    filter: boolean;
+    constructor(data: DataItem<K>, parent: Node<K> | null, key: K);
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/tree/useNodes.js

@@ -0,0 +1,54 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { useInstance } from 'intact-vue-next';
+import { isNullOrUndefined } from 'intact-shared';
+var prefix = '__$_';
+export function useNodes() {
+  var instance = useInstance();
+  var nodes = [];
+  instance.watch('data', function (data) {
+    nodes = createNodes(data, null, prefix);
+  });
+  return {
+    getNodes: function getNodes() {
+      return nodes;
+    }
+  };
+}
+export var Node = function Node(data, parent, key) {
+  this.data = void 0;
+  this.parent = void 0;
+  this.key = void 0;
+  this.checked = false;
+  this.indeterminate = false;
+  this.children = null;
+  this.loaded = void 0;
+  this.filter = true;
+  this.data = data;
+  this.parent = parent;
+  this.key = key;
+  this.loaded = isNullOrUndefined(data.loaded) && data.children && data.children.length ? true : data.loaded;
+};
+
+function createNode(data, parent, prefix, reference) {
+  var key = isNullOrUndefined(data.key) ? "" + prefix + reference.index++ : data.key;
+  var node = new Node(data, parent, key);
+
+  if (data.children) {
+    var subPrefix = isNullOrUndefined(data.key) ? key + "." : "" + prefix + reference.index + ".";
+    node.children = createNodes(data.children, node, subPrefix);
+  }
+
+  return node;
+}
+
+function createNodes(data, parent, prefix) {
+  if (isNullOrUndefined(data)) return [];
+  var reference = {
+    index: 0
+  };
+  return _mapInstanceProperty(data).call(data, function (data) {
+    return createNode(data, parent, prefix, reference);
+  });
+}
+
+export {normalize} from 'intact-vue-next';

package/components/tree/useSelected.d.ts

@@ -0,0 +1,10 @@
+import { Key } from 'intact-vue-next';
+import type { Node, DataItem } from './useNodes';
+export declare function useSelected(getNodes: () => Node<Key>[]): {
+    get: () => Set<Key>;
+    toggle: (node: Node<Key>) => Promise<void>;
+    getSelectedData: () => DataItem<Key>[];
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/tree/useSelected.js

@@ -0,0 +1,92 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Set from "@babel/runtime-corejs3/core-js/set";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import { useInstance } from 'intact-vue-next';
+export function useSelected(getNodes) {
+  var instance = useInstance();
+  var selectedKeys = new _Set();
+  instance.on('$receive:selectedKeys', function (v) {
+    selectedKeys = new _Set(v);
+  });
+
+  function toggle(_x) {
+    return _toggle.apply(this, arguments);
+  }
+
+  function _toggle() {
+    _toggle = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(node) {
+      var key, _instance$get, multiple;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!node.data.disabled) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              key = node.key;
+              _instance$get = instance.get(), multiple = _instance$get.multiple;
+
+              if (selectedKeys.has(key)) {
+                selectedKeys.delete(key);
+              } else {
+                if (!multiple) {
+                  selectedKeys.clear();
+                }
+
+                selectedKeys.add(key);
+              }
+
+              instance.set('selectedKeys', _Array$from(selectedKeys));
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _toggle.apply(this, arguments);
+  }
+
+  function getSelectedData() {
+    var data = [];
+    var size = selectedKeys.size;
+    if (!size) return data;
+    var count = 0;
+
+    var loop = function loop(nodes) {
+      for (var i = 0; i < nodes.length; i++) {
+        var node = nodes[i];
+
+        if (selectedKeys.has(node.key)) {
+          data.push(node.data);
+          if (++count === size) return;
+        }
+
+        if (node.children) {
+          loop(node.children);
+        }
+      }
+    };
+
+    loop(getNodes());
+    return data;
+  }
+
+  return {
+    get: function get() {
+      return selectedKeys;
+    },
+    toggle: toggle,
+    getSelectedData: getSelectedData
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/tree/useTransitionEvent.d.ts

@@ -0,0 +1,11 @@
+export declare function useTransitionEvent(): {
+    onAfterEnter(el: HTMLElement): void;
+    onAfterLeave(el: HTMLElement): void;
+    name: string;
+    onLeave: (el: HTMLElement) => void;
+    onBeforeEnter: (el: HTMLElement) => void;
+    onEnter: (el: HTMLElement) => void;
+};
+
+
+export {normalize} from 'intact-vue-next';