@opentiny/vue-renderless 3.1.0-alpha.0

package/tree/index.js

@@ -0,0 +1,642 @@
+import { getNodeKey as innerGetNodekey } from '@opentiny/vue-renderless/common/deps/tree-model/util';
+import { KEY_CODE } from '@opentiny/vue-renderless/common';
+import TreeStore from '@opentiny/vue-renderless/common/deps/tree-model/tree-store';
+import { addClass, removeClass } from '@opentiny/vue-renderless/common/deps/dom';
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+import { getDataset } from '@opentiny/vue-renderless/common/dataset';
+export var setChildren = function setChildren(props) {
+  return function (data) {
+    return props.data = data;
+  };
+};
+export var getChildren = function getChildren() {
+  return function (props) {
+    return props.data;
+  };
+};
+export var computedTreeItemArray = function computedTreeItemArray() {
+  return function (props, state) {
+    return Array.prototype.slice.call(state.treeItems);
+  };
+};
+export var computedShowEmptyText = function computedShowEmptyText(_ref) {
+  var constants = _ref.constants,
+    t = _ref.t;
+  return function (props) {
+    return props.emptyText || t(constants.EMPTY_TEXT_LOCAL);
+  };
+};
+export var computedIsEmpty = function computedIsEmpty() {
+  return function (props, state) {
+    var childNodes = state.root.childNodes;
+    return !childNodes || childNodes.length === 0 || childNodes.every(function (_ref2) {
+      var visible = _ref2.visible;
+      return !visible;
+    });
+  };
+};
+export var watchDefaultCheckedKeys = function watchDefaultCheckedKeys(state) {
+  return function (value) {
+    state.store.setDefaultCheckedKey(value);
+  };
+};
+export var watchDefaultExpandedKeys = function watchDefaultExpandedKeys(_ref3) {
+  var state = _ref3.state,
+    api = _ref3.api,
+    nextTick = _ref3.nextTick;
+  return function (value) {
+    api.expandAllNodes(false);
+    nextTick(function () {
+      state.store.defaultExpandedKeys = value;
+      state.store.setDefaultExpandedKeys(value);
+      api.initIsCurrent();
+    });
+  };
+};
+export var watchData = function watchData(state) {
+  return function (value) {
+    state.store.setData(value);
+  };
+};
+export var watchCheckboxItems = function watchCheckboxItems() {
+  return function (value) {
+    Array.prototype.forEach.call(value, function (checkbox) {
+      checkbox.setAttribute('tabindex', -1);
+    });
+  };
+};
+export var watchCheckStrictly = function watchCheckStrictly(state) {
+  return function (value) {
+    state.store.checkStrictly = value;
+  };
+};
+export var dragStart = function dragStart(_ref4) {
+  var props = _ref4.props,
+    state = _ref4.state,
+    emit = _ref4.emit;
+  return function (event, treeNode) {
+    if (typeof props.allowDrag === 'function' && !props.allowDrag(treeNode.node)) {
+      event.preventDefault();
+      return false;
+    }
+    if (!event.dataTransfer) return false;
+    event.dataTransfer.effectAllowed = 'move';
+    try {
+      event.dataTransfer.setData('text/plain', '');
+    } catch (e) {}
+    state.dragState.draggingNode = treeNode;
+    emit('node-drag-start', treeNode.node, event);
+  };
+};
+var getDropType = function getDropType(dropPrev, dropInner, dropNext, dropNode) {
+  var dropType;
+  var targetPosition = dropNode.$el.getBoundingClientRect();
+  var prevPercent = dropPrev ? dropInner ? 0.25 : dropNext ? 0.45 : 1 : -1;
+  var nextPercent = dropNext ? dropInner ? 0.75 : dropPrev ? 0.55 : 0 : 1;
+  var distance = event.clientY - targetPosition.top;
+  if (distance < targetPosition.height * prevPercent) {
+    dropType = 'before';
+  } else if (distance > targetPosition.height * nextPercent) {
+    dropType = 'after';
+  } else if (dropInner) {
+    dropType = 'inner';
+  } else {
+    dropType = 'none';
+  }
+  return dropType;
+};
+var setDropIndicatorTop = function setDropIndicatorTop(dropNode, dropIndicator, parent, dropType) {
+  var iconElement = dropNode.$el.querySelector('.tiny-tree-node');
+  if (iconElement) {
+    var treePosition = parent.$el.getBoundingClientRect();
+    var iconPosition = iconElement.getBoundingClientRect();
+    var indicatorTop = -9999;
+    if (dropType === 'before') {
+      indicatorTop = iconPosition.top - treePosition.top;
+    } else if (dropType === 'after') {
+      indicatorTop = iconPosition.bottom - treePosition.top;
+    }
+    dropIndicator.style.top = indicatorTop + 'px';
+  }
+  dropType === 'inner' ? addClass(dropNode.$el, 'is-drop-inner') : removeClass(dropNode.$el, 'is-drop-inner');
+};
+var getDragDir = function getDragDir(_ref5) {
+  var draggingNode = _ref5.draggingNode,
+    dropNode = _ref5.dropNode,
+    allowDrop = _ref5.allowDrop,
+    emit = _ref5.emit,
+    dragState = _ref5.dragState;
+  var dropPrev = true;
+  var dropInner = true;
+  var dropNext = true;
+  var userAllowDropInner = true;
+  var oldDropNode = dragState.dropNode;
+  if (typeof allowDrop === 'function') {
+    dropPrev = allowDrop(draggingNode.node, dropNode.node, 'prev');
+    userAllowDropInner = dropInner = allowDrop(draggingNode.node, dropNode.node, 'inner');
+    dropNext = allowDrop(draggingNode.node, dropNode.node, 'next');
+  }
+  event.dataTransfer.dropEffect = dropInner ? 'move' : 'none';
+  if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) {
+    oldDropNode && emit('node-drag-leave', draggingNode.node, oldDropNode.node, event);
+    emit('node-drag-enter', draggingNode.node, dropNode.node, event);
+  }
+  if (dropPrev || dropInner || dropNext) {
+    dragState.dropNode = dropNode;
+  }
+  if (dropNode.node.previousSibling === draggingNode.node) {
+    dropPrev = false;
+  }
+  if (dropNode.node.nextSibling === draggingNode.node) {
+    dropNext = false;
+  }
+  if (dropNode.node.contains(draggingNode.node, false)) {
+    dropInner = false;
+  }
+  if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {
+    dropPrev = false;
+    dropInner = false;
+    dropNext = false;
+  }
+  return {
+    dropPrev: dropPrev,
+    dropInner: dropInner,
+    dropNext: dropNext,
+    userAllowDropInner: userAllowDropInner
+  };
+};
+export var dragOver = function dragOver(_ref6) {
+  var state = _ref6.state,
+    emit = _ref6.emit,
+    props = _ref6.props,
+    refs = _ref6.refs,
+    vm = _ref6.vm;
+  return function (event, dropNode) {
+    var dragState = state.dragState;
+    var oldDropNode = dragState.dropNode;
+    if (oldDropNode && oldDropNode !== dropNode) {
+      removeClass(oldDropNode.$el, 'is-drop-inner');
+    }
+    var draggingNode = dragState.draggingNode;
+    if (!draggingNode || !dropNode) return;
+    var _getDragDir = getDragDir({
+        draggingNode: draggingNode,
+        dropNode: dropNode,
+        allowDrop: props.allowDrop,
+        emit: emit,
+        dragState: dragState
+      }),
+      dropPrev = _getDragDir.dropPrev,
+      dropInner = _getDragDir.dropInner,
+      dropNext = _getDragDir.dropNext,
+      userAllowDropInner = _getDragDir.userAllowDropInner;
+    var dropType = getDropType(dropPrev, dropInner, dropNext, dropNode);
+    setDropIndicatorTop(dropNode, refs.dropIndicator, vm, dropType);
+    dragState.showDropIndicator = dropType === 'before' || dropType === 'after';
+    dragState.allowDrop = dragState.showDropIndicator || userAllowDropInner;
+    dragState.dropType = dropType;
+    emit('node-drag-over', draggingNode.node, dropNode.node, event);
+  };
+};
+export var dragEnd = function dragEnd(_ref7) {
+  var state = _ref7.state,
+    emit = _ref7.emit;
+  return function (event) {
+    var dragState = state.dragState;
+    var draggingNode = dragState.draggingNode,
+      dropType = dragState.dropType,
+      dropNode = dragState.dropNode;
+    event.preventDefault();
+    if (!event.dataTransfer) {
+      return;
+    }
+    event.dataTransfer.dropEffect = 'move';
+    if (draggingNode && dropNode) {
+      var draggingNodeCopy = {
+        data: draggingNode.node.data
+      };
+      var normalType = dropType !== 'none';
+      normalType && draggingNode.node.remove();
+      if (dropType === 'before') {
+        dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node);
+      } else if (dropType === 'after') {
+        dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node);
+      } else if (dropType === 'inner') {
+        dropNode.node.insertChild(draggingNodeCopy);
+      }
+      normalType && state.store.registerNode(draggingNodeCopy);
+      removeClass(dropNode.$el, 'is-drop-inner');
+      emit('node-drag-end', draggingNode.node, dropNode.node, dropType, event);
+      normalType && emit('node-drop', draggingNode.node, dropNode.node, dropType, event);
+    }
+    if (draggingNode && !dropNode) {
+      emit('node-drag-end', draggingNode.node, null, dropType, event);
+    }
+    dragState.draggingNode = null;
+    dragState.dropNode = null;
+    dragState.allowDrop = true;
+    dragState.showDropIndicator = false;
+  };
+};
+export var created = function created(_ref8) {
+  var api = _ref8.api,
+    props = _ref8.props,
+    state = _ref8.state;
+  return function () {
+    state.isTree = true;
+    var nodeKey = props.nodeKey,
+      data = props.data,
+      lazy = props.lazy,
+      load = props.load,
+      currentNodeKey = props.currentNodeKey,
+      checkStrictly = props.checkStrictly,
+      checkDescendants = props.checkDescendants;
+    var defaultCheckedKeys = props.defaultCheckedKeys,
+      defaultExpandedKeys = props.defaultExpandedKeys,
+      autoExpandParent = props.autoExpandParent,
+      defaultExpandAll = props.defaultExpandAll,
+      filterNodeMethod = props.filterNodeMethod;
+    state.store = new TreeStore({
+      key: nodeKey,
+      data: data,
+      lazy: lazy,
+      props: props.props,
+      load: load,
+      currentNodeKey: currentNodeKey,
+      checkStrictly: checkStrictly,
+      checkDescendants: checkDescendants,
+      defaultCheckedKeys: defaultCheckedKeys,
+      defaultExpandedKeys: defaultExpandedKeys,
+      autoExpandParent: autoExpandParent,
+      defaultExpandAll: defaultExpandAll,
+      filterNodeMethod: filterNodeMethod
+    });
+    state.root = state.store.root;
+    api.initIsCurrent();
+    state.emitter.on('tree-node-drag-start', api.dragStart);
+    state.emitter.on('tree-node-drag-over', api.dragOver);
+    state.emitter.on('tree-node-drag-end', api.dragEnd);
+  };
+};
+var doClearCurrentStore = function doClearCurrentStore(state) {
+  if (state.currentStore.node) {
+    state.currentStore.node.isCurrent = false;
+  }
+  state.currentStore.node = null;
+  state.currentStore.flag = false;
+};
+var setIsCurrent = function setIsCurrent(root, defaultExpandedKeys, defaultExpandedKeysHighlight, currentStore) {
+  var nodeKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'id';
+  if (currentStore.flag || !Array.isArray(root.childNodes)) return;
+  for (var i = 0; i < root.childNodes.length; i++) {
+    var child = root.childNodes[i];
+    if (child.data && child.data[nodeKey] && child.data[nodeKey] === defaultExpandedKeysHighlight) {
+      child.isCurrent = true;
+      currentStore.flag = true;
+      currentStore.node = child;
+      break;
+    }
+    setIsCurrent(child, defaultExpandedKeys, defaultExpandedKeysHighlight, currentStore, nodeKey);
+  }
+};
+export var initIsCurrent = function initIsCurrent(_ref9) {
+  var props = _ref9.props,
+    state = _ref9.state;
+  return function () {
+    if (state.currentStore.flag) {
+      doClearCurrentStore(state);
+    }
+    if (state.store.getCurrentNode() && props.defaultExpandedKeysHighlight) {
+      state.store.setCurrentNode(null);
+    }
+    if (props.defaultExpandedKeysHighlight && Array.isArray(props.defaultExpandedKeys) && ~props.defaultExpandedKeys.indexOf(props.defaultExpandedKeysHighlight)) {
+      setIsCurrent(state.root, props.defaultExpandedKeys, props.defaultExpandedKeysHighlight, state.currentStore, props.nodeKey);
+    }
+  };
+};
+export var mounted = function mounted(_ref10) {
+  var api = _ref10.api,
+    vm = _ref10.vm;
+  return function () {
+    api.initTabIndex();
+    on(vm.$el, 'keydown', api.handleKeydown);
+  };
+};
+export var beforeUnmount = function beforeUnmount(_ref11) {
+  var api = _ref11.api,
+    vm = _ref11.vm;
+  return function () {
+    off(vm.$el, 'keydown', api.handleKeydown);
+  };
+};
+export var wrapMounted = function wrapMounted(_ref12) {
+  var api = _ref12.api,
+    props = _ref12.props,
+    service = _ref12.service;
+  return function () {
+    var data = props.data,
+      key = props.nodeKey,
+      parentKey = props.parentKey;
+    if (!data && props.dataset) {
+      var dataset = {
+        service: service,
+        dataset: props.dataset,
+        tree: {
+          key: key,
+          parentKey: parentKey
+        }
+      };
+      getDataset(dataset).then(api.watchData);
+    }
+    api.mounted();
+  };
+};
+export var updated = function updated(_ref13) {
+  var vm = _ref13.vm,
+    state = _ref13.state;
+  return function () {
+    state.treeItems = vm.$el.querySelectorAll('[role=treeitem]');
+    state.checkboxItems = vm.$el.querySelectorAll('input[type=checkbox]');
+  };
+};
+export var filter = function filter(_ref14) {
+  var props = _ref14.props,
+    state = _ref14.state;
+  return function (value) {
+    if (!props.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');
+    state.store.filter(value);
+  };
+};
+export var getNodeKey = function getNodeKey(props) {
+  return function (node) {
+    return innerGetNodekey(props.nodekey, node.data);
+  };
+};
+export var getNodePath = function getNodePath(_ref15) {
+  var props = _ref15.props,
+    state = _ref15.state;
+  return function (data) {
+    if (!props.nodeKey) throw new Error('[Tree] nodeKey is required in getNodePath');
+    var node = state.store.getNode(data);
+    if (!node) return [];
+    var path = [node.data];
+    var parent = node.parent;
+    while (parent && parent !== state.root) {
+      path.push(parent.data);
+      parent = parent.parent;
+    }
+    return path.reverse();
+  };
+};
+export var getCheckedNodes = function getCheckedNodes(state) {
+  return function (leafOnly, includeHalfChecked) {
+    return state.store.getCheckedNodes(leafOnly, includeHalfChecked);
+  };
+};
+export var getCheckedKeys = function getCheckedKeys(state) {
+  return function (leafOnly) {
+    return state.store.getCheckedKeys(leafOnly);
+  };
+};
+export var getCurrentNode = function getCurrentNode(state) {
+  return function () {
+    var currentNode = state.store.getCurrentNode();
+    return currentNode ? currentNode.data : null;
+  };
+};
+export var getCurrentKey = function getCurrentKey(_ref16) {
+  var api = _ref16.api,
+    props = _ref16.props;
+  return function () {
+    if (!props.nodeKey) throw new Error('[Tree] nodeKey is required in getCurrentKey');
+    var currentNode = api.getCurrentNode();
+    return currentNode ? currentNode[props.nodeKey] : null;
+  };
+};
+export var setCheckedNodes = function setCheckedNodes(_ref17) {
+  var props = _ref17.props,
+    state = _ref17.state;
+  return function (nodes, leafOnly) {
+    if (!props.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
+    state.store.setCheckedNodes(nodes, leafOnly);
+  };
+};
+export var setCheckedKeys = function setCheckedKeys(_ref18) {
+  var props = _ref18.props,
+    state = _ref18.state;
+  return function (keys, leafOnly) {
+    if (!props.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys');
+    state.store.setCheckedKeys(keys, leafOnly);
+  };
+};
+export var setChecked = function setChecked(state) {
+  return function (data, checked, deep) {
+    state.store.setChecked(data, checked, deep);
+  };
+};
+export var getHalfCheckedNodes = function getHalfCheckedNodes(state) {
+  return function () {
+    return state.store.getHalfCheckedNodes();
+  };
+};
+export var getHalfCheckedKeys = function getHalfCheckedKeys(state) {
+  return function () {
+    return state.store.getHalfCheckedKeys();
+  };
+};
+export var setCurrentNode = function setCurrentNode(_ref19) {
+  var props = _ref19.props,
+    state = _ref19.state;
+  return function (node) {
+    if (!props.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode');
+    state.store.setUserCurrentNode(node);
+  };
+};
+export var setCurrentKey = function setCurrentKey(_ref20) {
+  var props = _ref20.props,
+    state = _ref20.state;
+  return function (key) {
+    if (!props.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey');
+    state.store.setCurrentNodeKey(key);
+  };
+};
+export var getNode = function getNode(state) {
+  return function (data) {
+    return state.store.getNode(data);
+  };
+};
+export var remove = function remove(state) {
+  return function (data) {
+    state.store.remove(data);
+  };
+};
+export var append = function append(state) {
+  return function (data, parentNode) {
+    state.store.append(data, parentNode);
+  };
+};
+export var insertBefore = function insertBefore(state) {
+  return function (data, refNode) {
+    state.store.insertBefore(data, refNode);
+  };
+};
+export var insertAfter = function insertAfter(state) {
+  return function (data, refNode) {
+    state.store.insertAfter(data, refNode);
+  };
+};
+export var handleNodeExpand = function handleNodeExpand(emit) {
+  return function (nodeData, node, instance) {
+    emit('node-expand', nodeData, node, instance);
+  };
+};
+export var updateKeyChildren = function updateKeyChildren(_ref21) {
+  var props = _ref21.props,
+    state = _ref21.state;
+  return function (key, data) {
+    if (!props.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
+    state.store.updateChildren(key, data);
+  };
+};
+export var initTabIndex = function initTabIndex(_ref22) {
+  var vm = _ref22.vm,
+    state = _ref22.state;
+  return function () {
+    state.treeItems = vm.$el.querySelectorAll('.is-focusable[role=treeitem]');
+    state.checkboxItems = vm.$el.querySelectorAll('input[type=checkbox]');
+    var checkedItem = vm.$el.querySelectorAll('.is-checked[role=treeitem]');
+    if (checkedItem.length) {
+      checkedItem[0].setAttribute('tabindex', 0);
+      return;
+    }
+    state.treeItems[0] && state.treeItems[0].setAttribute('tabindex', 0);
+  };
+};
+export var handleKeydown = function handleKeydown(_ref23) {
+  var vm = _ref23.vm,
+    state = _ref23.state;
+  return function (event) {
+    var currentItem = event.target;
+    if (currentItem.className.indexOf('tiny-tree-node') === -1) return;
+    var keyCode = event.keyCode;
+    state.treeItems = vm.$el.querySelectorAll('.is-focusable[role=treeitem]');
+    if ([KEY_CODE.ArrowUp, KEY_CODE.ArrowDown].indexOf(keyCode) > -1) {
+      var nextIndex;
+      var currentIndex = state.treeItemArray.indexOf(currentItem);
+      event.preventDefault();
+      if (keyCode === KEY_CODE.ArrowUp) {
+        nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
+      } else {
+        nextIndex = currentIndex < state.treeItemArray.length - 1 ? currentIndex + 1 : 0;
+      }
+      state.treeItemArray[nextIndex].focus();
+    } else if ([KEY_CODE.ArrowLeft, KEY_CODE.ArrowRight].indexOf(keyCode) > -1) {
+      event.preventDefault();
+      currentItem.click();
+    } else if ([KEY_CODE.NumpadEnter, KEY_CODE.Space].indexOf(keyCode) > -1) {
+      var hasInput = currentItem.querySelector('[type="checkbox"]');
+      if (hasInput) {
+        event.preventDefault();
+        hasInput.click();
+      }
+    }
+  };
+};
+var initRadio = function initRadio(_ref24) {
+  var node = _ref24.node,
+    nodeKey = _ref24.nodeKey,
+    checkedKey = _ref24.checkedKey,
+    state = _ref24.state;
+  var isFound = false;
+  if (node.data[nodeKey] === checkedKey) {
+    state.currentRadio.value = node.id;
+    isFound = true;
+    return isFound;
+  }
+  if (node.childNodes && node.childNodes.length) {
+    var childNodes = node.childNodes;
+    for (var i = 0; i < childNodes.length; i++) {
+      isFound = initRadio({
+        node: childNodes[i],
+        nodeKey: nodeKey,
+        checkedKey: checkedKey,
+        state: state
+      });
+      if (isFound) break;
+    }
+  }
+  return isFound;
+};
+var init = function init(_ref25) {
+  var state = _ref25.state,
+    nodeKey = _ref25.nodeKey,
+    checkedKey = _ref25.checkedKey;
+  var isFound = false;
+  if (state.root && state.root.childNodes && state.root.childNodes.length) {
+    var rootChildNodes = state.root.childNodes;
+    for (var i = 0; i < rootChildNodes.length; i++) {
+      isFound = initRadio({
+        node: rootChildNodes[i],
+        nodeKey: nodeKey,
+        checkedKey: checkedKey,
+        state: state
+      });
+      if (isFound) break;
+    }
+  }
+};
+export var setCurrentRadio = function setCurrentRadio(_ref26) {
+  var props = _ref26.props,
+    state = _ref26.state;
+  return function () {
+    if (!props.showRadio) return;
+    if (!props.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentRadio');
+    var nodeKey = props.nodeKey;
+    var defaultCheckedKeys = props.defaultCheckedKeys || [];
+    var checkedKey = defaultCheckedKeys.length ? defaultCheckedKeys[0] : null;
+    if (!checkedKey) return;
+    init({
+      state: state,
+      nodeKey: nodeKey,
+      checkedKey: checkedKey
+    });
+  };
+};
+export var closeMenu = function closeMenu(state) {
+  return function () {
+    return state.emitter.emit('closeMenu');
+  };
+};
+export var clearCurrentStore = function clearCurrentStore(state) {
+  return function (node) {
+    if (state.currentStore.flag && state.currentStore.node && state.currentStore.node.id !== node.id) {
+      doClearCurrentStore(state);
+    }
+  };
+};
+var innerExpandAllNodes = function innerExpandAllNodes(nodes, expandFlag) {
+  nodes.forEach(function (node) {
+    if (expandFlag) {
+      if (node.childNodes.length && node.level > 1) {
+        node.expand();
+      }
+    } else {
+      node.collapse();
+    }
+    innerExpandAllNodes(node.childNodes, expandFlag);
+  });
+};
+export var expandAllNodes = function expandAllNodes(_ref27) {
+  var state = _ref27.state;
+  return function (expandFlag) {
+    var nodes = state.root.childNodes;
+    if (Array.isArray(nodes) && nodes.length) {
+      innerExpandAllNodes(nodes, expandFlag);
+      nodes.forEach(function (node) {
+        if (expandFlag && node.childNodes.length) {
+          node.expand();
+        }
+      });
+    }
+  };
+};