kh-one-ui 2.0.0

package/packages/tree/src/model/tree-store.js

@@ -0,0 +1,340 @@
+import Node from './node';
+import { getNodeKey } from './util';
+
+export default class TreeStore {
+  constructor(options) {
+    this.currentNode = null;
+    this.currentNodeKey = null;
+
+    for (let option in options) {
+      if (options.hasOwnProperty(option)) {
+        this[option] = options[option];
+      }
+    }
+
+    this.nodesMap = {};
+
+    this.root = new Node({
+      data: this.data,
+      store: this
+    });
+
+    if (this.lazy && this.load) {
+      const loadFn = this.load;
+      loadFn(this.root, (data) => {
+        this.root.doCreateChildren(data);
+        this._initDefaultCheckedNodes();
+      });
+    } else {
+      this._initDefaultCheckedNodes();
+    }
+  }
+
+  filter(value) {
+    const filterNodeMethod = this.filterNodeMethod;
+    const lazy = this.lazy;
+    const traverse = function(node) {
+      const childNodes = node.root ? node.root.childNodes : node.childNodes;
+
+      childNodes.forEach((child) => {
+        child.visible = filterNodeMethod.call(child, value, child.data, child);
+
+        traverse(child);
+      });
+
+      if (!node.visible && childNodes.length) {
+        let allHidden = true;
+        allHidden = !childNodes.some(child => child.visible);
+
+        if (node.root) {
+          node.root.visible = allHidden === false;
+        } else {
+          node.visible = allHidden === false;
+        }
+      }
+      if (!value) return;
+
+      if (node.visible && !node.isLeaf && !lazy) node.expand();
+    };
+
+    traverse(this);
+  }
+
+  setData(newVal) {
+    const instanceChanged = newVal !== this.root.data;
+    if (instanceChanged) {
+      this.root.setData(newVal);
+      this._initDefaultCheckedNodes();
+    } else {
+      this.root.updateChildren();
+    }
+  }
+
+  getNode(data) {
+    if (data instanceof Node) return data;
+    const key = typeof data !== 'object' ? data : getNodeKey(this.key, data);
+    return this.nodesMap[key] || null;
+  }
+
+  insertBefore(data, refData) {
+    const refNode = this.getNode(refData);
+    refNode.parent.insertBefore({ data }, refNode);
+  }
+
+  insertAfter(data, refData) {
+    const refNode = this.getNode(refData);
+    refNode.parent.insertAfter({ data }, refNode);
+  }
+
+  remove(data) {
+    const node = this.getNode(data);
+
+    if (node && node.parent) {
+      if (node === this.currentNode) {
+        this.currentNode = null;
+      }
+      node.parent.removeChild(node);
+    }
+  }
+
+  append(data, parentData) {
+    const parentNode = parentData ? this.getNode(parentData) : this.root;
+
+    if (parentNode) {
+      parentNode.insertChild({ data });
+    }
+  }
+
+  _initDefaultCheckedNodes() {
+    const defaultCheckedKeys = this.defaultCheckedKeys || [];
+    const nodesMap = this.nodesMap;
+
+    defaultCheckedKeys.forEach((checkedKey) => {
+      const node = nodesMap[checkedKey];
+
+      if (node) {
+        node.setChecked(true, !this.checkStrictly);
+      }
+    });
+  }
+
+  _initDefaultCheckedNode(node) {
+    const defaultCheckedKeys = this.defaultCheckedKeys || [];
+
+    if (defaultCheckedKeys.indexOf(node.key) !== -1) {
+      node.setChecked(true, !this.checkStrictly);
+    }
+  }
+
+  setDefaultCheckedKey(newVal) {
+    if (newVal !== this.defaultCheckedKeys) {
+      this.defaultCheckedKeys = newVal;
+      this._initDefaultCheckedNodes();
+    }
+  }
+
+  registerNode(node) {
+    const key = this.key;
+    if (!key || !node || !node.data) return;
+
+    const nodeKey = node.key;
+    if (nodeKey !== undefined) this.nodesMap[node.key] = node;
+  }
+
+  deregisterNode(node) {
+    const key = this.key;
+    if (!key || !node || !node.data) return;
+
+    node.childNodes.forEach(child => {
+      this.deregisterNode(child);
+    });
+
+    delete this.nodesMap[node.key];
+  }
+
+  getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
+    const checkedNodes = [];
+    const traverse = function(node) {
+      const childNodes = node.root ? node.root.childNodes : node.childNodes;
+
+      childNodes.forEach((child) => {
+        if ((child.checked || (includeHalfChecked && child.indeterminate)) && (!leafOnly || (leafOnly && child.isLeaf))) {
+          checkedNodes.push(child.data);
+        }
+
+        traverse(child);
+      });
+    };
+
+    traverse(this);
+
+    return checkedNodes;
+  }
+
+  getCheckedKeys(leafOnly = false) {
+    return this.getCheckedNodes(leafOnly).map((data) => (data || {})[this.key]);
+  }
+
+  getHalfCheckedNodes() {
+    const nodes = [];
+    const traverse = function(node) {
+      const childNodes = node.root ? node.root.childNodes : node.childNodes;
+
+      childNodes.forEach((child) => {
+        if (child.indeterminate) {
+          nodes.push(child.data);
+        }
+
+        traverse(child);
+      });
+    };
+
+    traverse(this);
+
+    return nodes;
+  }
+
+  getHalfCheckedKeys() {
+    return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]);
+  }
+
+  _getAllNodes() {
+    const allNodes = [];
+    const nodesMap = this.nodesMap;
+    for (let nodeKey in nodesMap) {
+      if (nodesMap.hasOwnProperty(nodeKey)) {
+        allNodes.push(nodesMap[nodeKey]);
+      }
+    }
+
+    return allNodes;
+  }
+
+  updateChildren(key, data) {
+    const node = this.nodesMap[key];
+    if (!node) return;
+    const childNodes = node.childNodes;
+    for (let i = childNodes.length - 1; i >= 0; i--) {
+      const child = childNodes[i];
+      this.remove(child.data);
+    }
+    for (let i = 0, j = data.length; i < j; i++) {
+      const child = data[i];
+      this.append(child, node.data);
+    }
+  }
+
+  _setCheckedKeys(key, leafOnly = false, checkedKeys) {
+    const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level);
+    const cache = Object.create(null);
+    const keys = Object.keys(checkedKeys);
+    allNodes.forEach(node => node.setChecked(false, false));
+    for (let i = 0, j = allNodes.length; i < j; i++) {
+      const node = allNodes[i];
+      const nodeKey = node.data[key].toString();
+      let checked = keys.indexOf(nodeKey) > -1;
+      if (!checked) {
+        if (node.checked && !cache[nodeKey]) {
+          node.setChecked(false, false);
+        }
+        continue;
+      }
+
+      let parent = node.parent;
+      while (parent && parent.level > 0) {
+        cache[parent.data[key]] = true;
+        parent = parent.parent;
+      }
+
+      if (node.isLeaf || this.checkStrictly) {
+        node.setChecked(true, false);
+        continue;
+      }
+      node.setChecked(true, true);
+
+      if (leafOnly) {
+        node.setChecked(false, false);
+        const traverse = function(node) {
+          const childNodes = node.childNodes;
+          childNodes.forEach((child) => {
+            if (!child.isLeaf) {
+              child.setChecked(false, false);
+            }
+            traverse(child);
+          });
+        };
+        traverse(node);
+      }
+    }
+  }
+
+  setCheckedNodes(array, leafOnly = false) {
+    const key = this.key;
+    const checkedKeys = {};
+    array.forEach((item) => {
+      checkedKeys[(item || {})[key]] = true;
+    });
+
+    this._setCheckedKeys(key, leafOnly, checkedKeys);
+  }
+
+  setCheckedKeys(keys, leafOnly = false) {
+    this.defaultCheckedKeys = keys;
+    const key = this.key;
+    const checkedKeys = {};
+    keys.forEach((key) => {
+      checkedKeys[key] = true;
+    });
+
+    this._setCheckedKeys(key, leafOnly, checkedKeys);
+  }
+
+  setDefaultExpandedKeys(keys) {
+    keys = keys || [];
+    this.defaultExpandedKeys = keys;
+
+    keys.forEach((key) => {
+      const node = this.getNode(key);
+      if (node) node.expand(null, this.autoExpandParent);
+    });
+  }
+
+  setChecked(data, checked, deep) {
+    const node = this.getNode(data);
+
+    if (node) {
+      node.setChecked(!!checked, deep);
+    }
+  }
+
+  getCurrentNode() {
+    return this.currentNode;
+  }
+
+  setCurrentNode(currentNode) {
+    const prevCurrentNode = this.currentNode;
+    if (prevCurrentNode) {
+      prevCurrentNode.isCurrent = false;
+    }
+    this.currentNode = currentNode;
+    this.currentNode.isCurrent = true;
+  }
+
+  setUserCurrentNode(node) {
+    const key = node[this.key];
+    const currNode = this.nodesMap[key];
+    this.setCurrentNode(currNode);
+  }
+
+  setCurrentNodeKey(key) {
+    if (key === null || key === undefined) {
+      this.currentNode && (this.currentNode.isCurrent = false);
+      this.currentNode = null;
+      return;
+    }
+    const node = this.getNode(key);
+    if (node) {
+      this.setCurrentNode(node);
+    }
+  }
+};

package/packages/tree/src/model/util.js

@@ -0,0 +1,27 @@
+export const NODE_KEY = '$treeNodeId';
+
+export const markNodeData = function(node, data) {
+  if (!data || data[NODE_KEY]) return;
+  Object.defineProperty(data, NODE_KEY, {
+    value: node.id,
+    enumerable: false,
+    configurable: false,
+    writable: false
+  });
+};
+
+export const getNodeKey = function(key, data) {
+  if (!key) return data[NODE_KEY];
+  return data[key];
+};
+
+export const findNearestComponent = (element, componentName) => {
+  let target = element;
+  while (target && target.tagName !== 'BODY') {
+    if (target.__vue__ && target.__vue__.$options.name === componentName) {
+      return target.__vue__;
+    }
+    target = target.parentNode;
+  }
+  return null;
+};

package/packages/tree/src/tree-node.vue

@@ -0,0 +1,279 @@
+<template>
+  <div
+    class="el-tree-node"
+    @click.stop="handleClick"
+    @contextmenu="($event) => this.handleContextMenu($event)"
+    v-show="node.visible"
+    :class="{
+      'is-expanded': expanded,
+      'is-current': node.isCurrent,
+      'is-hidden': !node.visible,
+      'is-focusable': !node.disabled,
+      'is-checked': !node.disabled && node.checked
+    }"
+    role="treeitem"
+    tabindex="-1"
+    :aria-expanded="expanded"
+    :aria-disabled="node.disabled"
+    :aria-checked="node.checked"
+    :draggable="tree.draggable"
+    @dragstart.stop="handleDragStart"
+    @dragover.stop="handleDragOver"
+    @dragend.stop="handleDragEnd"
+    @drop.stop="handleDrop"
+    ref="node"
+  >
+    <div class="el-tree-node__content"
+      :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
+      <span
+        @click.stop="handleExpandIconClick"
+        :class="[
+          { 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded },
+          'el-tree-node__expand-icon',
+          tree.iconClass ? tree.iconClass : 'el-icon-caret-right'
+        ]"
+      >
+      </span>
+      <el-checkbox
+        v-if="showCheckbox"
+        v-model="node.checked"
+        :indeterminate="node.indeterminate"
+        :disabled="!!node.disabled"
+        @click.native.stop
+        @change="handleCheckChange"
+      >
+      </el-checkbox>
+      <span
+        v-if="node.loading"
+        class="el-tree-node__loading-icon el-icon-loading">
+      </span>
+      <node-content :node="node"></node-content>
+    </div>
+    <el-collapse-transition>
+      <div
+        class="el-tree-node__children"
+        v-if="!renderAfterExpand || childNodeRendered"
+        v-show="expanded"
+        role="group"
+        :aria-expanded="expanded"
+      >
+        <el-tree-node
+          :render-content="renderContent"
+          v-for="child in node.childNodes"
+          :render-after-expand="renderAfterExpand"
+          :show-checkbox="showCheckbox"
+          :key="getNodeKey(child)"
+          :node="child"
+          @node-expand="handleChildNodeExpand">
+        </el-tree-node>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script type="text/jsx">
+  import ElCollapseTransition from 'one-ui/src/transitions/collapse-transition';
+  import ElCheckbox from 'one-ui/packages/checkbox';
+  import emitter from 'one-ui/src/mixins/emitter';
+  import { getNodeKey } from './model/util';
+
+  export default {
+    name: 'ElTreeNode',
+
+    componentName: 'ElTreeNode',
+
+    mixins: [emitter],
+
+    props: {
+      node: {
+        default() {
+          return {};
+        }
+      },
+      props: {},
+      renderContent: Function,
+      renderAfterExpand: {
+        type: Boolean,
+        default: true
+      },
+      showCheckbox: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    components: {
+      ElCollapseTransition,
+      ElCheckbox,
+      NodeContent: {
+        props: {
+          node: {
+            required: true
+          }
+        },
+        render(h) {
+          const parent = this.$parent;
+          const tree = parent.tree;
+          const node = this.node;
+          const { data, store } = node;
+          return (
+            parent.renderContent
+              ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
+              : tree.$scopedSlots.default
+                ? tree.$scopedSlots.default({ node, data })
+                : <span class="el-tree-node__label">{ node.label }</span>
+          );
+        }
+      }
+    },
+
+    data() {
+      return {
+        tree: null,
+        expanded: false,
+        childNodeRendered: false,
+        oldChecked: null,
+        oldIndeterminate: null
+      };
+    },
+
+    watch: {
+      'node.indeterminate'(val) {
+        this.handleSelectChange(this.node.checked, val);
+      },
+
+      'node.checked'(val) {
+        this.handleSelectChange(val, this.node.indeterminate);
+      },
+
+      'node.expanded'(val) {
+        this.$nextTick(() => this.expanded = val);
+        if (val) {
+          this.childNodeRendered = true;
+        }
+      }
+    },
+
+    methods: {
+      getNodeKey(node) {
+        return getNodeKey(this.tree.nodeKey, node.data);
+      },
+
+      handleSelectChange(checked, indeterminate) {
+        if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
+          this.tree.$emit('check-change', this.node.data, checked, indeterminate);
+        }
+        this.oldChecked = checked;
+        this.indeterminate = indeterminate;
+      },
+
+      handleClick() {
+        const store = this.tree.store;
+        store.setCurrentNode(this.node);
+        this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
+        this.tree.currentNode = this;
+        if (this.tree.expandOnClickNode) {
+          this.handleExpandIconClick();
+        }
+        if (this.tree.checkOnClickNode && !this.node.disabled) {
+          this.handleCheckChange(null, {
+            target: { checked: !this.node.checked }
+          });
+        }
+        this.tree.$emit('node-click', this.node.data, this.node, this);
+      },
+
+      handleContextMenu(event) {
+        if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this);
+      },
+
+      handleExpandIconClick() {
+        if (this.node.isLeaf) return;
+        if (this.expanded) {
+          this.tree.$emit('node-collapse', this.node.data, this.node, this);
+          this.node.collapse();
+        } else {
+          this.node.expand();
+          this.$emit('node-expand', this.node.data, this.node, this);
+        }
+      },
+
+      handleCheckChange(value, ev) {
+        this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
+        this.$nextTick(() => {
+          const store = this.tree.store;
+          this.tree.$emit('check', this.node.data, {
+            checkedNodes: store.getCheckedNodes(),
+            checkedKeys: store.getCheckedKeys(),
+            halfCheckedNodes: store.getHalfCheckedNodes(),
+            halfCheckedKeys: store.getHalfCheckedKeys(),
+          });
+        });
+      },
+
+      handleChildNodeExpand(nodeData, node, instance) {
+        this.broadcast('ElTreeNode', 'tree-node-expand', node);
+        this.tree.$emit('node-expand', nodeData, node, instance);
+      },
+
+      handleDragStart(event) {
+        if (!this.tree.draggable) return;
+        this.tree.$emit('tree-node-drag-start', event, this);
+      },
+
+      handleDragOver(event) {
+        if (!this.tree.draggable) return;
+        this.tree.$emit('tree-node-drag-over', event, this);
+        event.preventDefault();
+      },
+
+      handleDrop(event) {
+        event.preventDefault();
+      },
+
+      handleDragEnd(event) {
+        if (!this.tree.draggable) return;
+        this.tree.$emit('tree-node-drag-end', event, this);
+      }
+    },
+
+    created() {
+      const parent = this.$parent;
+
+      if (parent.isTree) {
+        this.tree = parent;
+      } else {
+        this.tree = parent.tree;
+      }
+
+      const tree = this.tree;
+      if (!tree) {
+        console.warn('Can not find node\'s tree.');
+      }
+
+      const props = tree.props || {};
+      const childrenKey = props['children'] || 'children';
+
+      this.$watch(`node.data.${childrenKey}`, () => {
+        this.node.updateChildren();
+      });
+
+      if (this.node.expanded) {
+        this.expanded = true;
+        this.childNodeRendered = true;
+      }
+
+      if(this.tree.accordion) {
+        this.$on('tree-node-expand', node => {
+          if(this.node !== node) {
+            this.node.collapse();
+          }
+        });
+      }
+    }
+  };
+</script>