@opentiny/vue-renderless 3.1.0-alpha.0

package/tree-node/index.js

@@ -0,0 +1,271 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { getNodeKey as getTreeNodeKey } from '@opentiny/vue-renderless/common/deps/tree-model/util';
+export var watchIndeterminate = function watchIndeterminate(_ref) {
+  var api = _ref.api,
+    props = _ref.props;
+  return function (value) {
+    return api.handleSelectChange(props.node.checked, value);
+  };
+};
+export var watchChecked = function watchChecked(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props;
+  return function (value) {
+    return api.handleSelectChange(value, props.node.indeterminate);
+  };
+};
+export var watchExpanded = function watchExpanded(_ref3) {
+  var state = _ref3.state;
+  return function (value) {
+    state.expanded = value;
+    if (value) {
+      state.childNodeRendered = true;
+    }
+  };
+};
+export var getNodeKey = function getNodeKey(state) {
+  return function (node) {
+    return getTreeNodeKey(state.tree.nodeKey, node.data);
+  };
+};
+var getVisibleNodes = function getVisibleNodes(treeNode, tree) {
+  if (treeNode.visible) {
+    var childNodes = treeNode.childNodes;
+    Object.assign(tree, {
+      checked: treeNode.checked,
+      expanded: treeNode.expanded,
+      level: treeNode.level,
+      isLeaf: treeNode.isLeaf
+    }, treeNode.data, {
+      children: []
+    });
+    childNodes.forEach(function (node) {
+      if (node.visible) {
+        var child = {};
+        getVisibleNodes(node, child);
+        tree.children.push(child);
+      }
+    });
+    if (!tree.children.length) {
+      delete tree.children;
+    }
+  }
+};
+export var handleSelectChange = function handleSelectChange(_ref4) {
+  var props = _ref4.props,
+    state = _ref4.state;
+  return function (checked, indeterminate) {
+    state.tree.state.store.setCurrentNode(props.node);
+    if (state.oldChecked !== checked && state.oldIndeterminate !== indeterminate) {
+      var treeNodes = {};
+      getVisibleNodes(props.node, treeNodes);
+      state.tree.$emit('check-change', treeNodes, checked, indeterminate);
+    }
+    state.oldChecked = checked;
+    state.indeterminate = indeterminate;
+  };
+};
+export var handleClick = function handleClick(_ref5) {
+  var api = _ref5.api,
+    vm = _ref5.vm,
+    props = _ref5.props,
+    state = _ref5.state,
+    refs = _ref5.refs;
+  return function (e) {
+    var store = state.tree.state.store;
+    state.tree.clearCurrentStore(props.node);
+    store.setCurrentNode(props.node);
+    !props.node.disabled && state.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
+    state.tree.currentNode = vm;
+    if (state.tree.checkOnClickNode && !props.node.disabled) {
+      e.target.checked = !props.node.checked;
+      api.handleCheckChange(null, e);
+    }
+    var isCheck = props.showCheckbox ? refs.checkbox && !refs.checkbox.$el.contains(e.target) : true;
+    state.tree.expandOnClickNode ? isCheck && api.handleExpandClick(isCheck) : !props.node.disabled && state.tree.$emit('node-click', props.node.data, props.node, vm);
+  };
+};
+export var closeMenu = function closeMenu(state) {
+  return function () {
+    state.showMenu = false;
+  };
+};
+export var handleContextMenu = function handleContextMenu(_ref6) {
+  var treeRoot = _ref6.treeRoot,
+    vm = _ref6.vm,
+    props = _ref6.props,
+    state = _ref6.state,
+    nextTick = _ref6.nextTick;
+  return function (event) {
+    var listeners = treeRoot.vm.$listeners;
+    var refs = vm.$refs;
+    if (treeRoot.showContextmenu || listeners['node-contextmenu']) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    state.tree.$parent.$emit('node-contextmenu', event, props.node.data, props.node, vm);
+    if (!treeRoot.showContextmenu) {
+      return;
+    }
+    state.showMenu = true;
+    state.tree.$parent.menuInstance = vm;
+    nextTick(function () {
+      var menuWidth = refs.menuContext.offsetWidth;
+      var treeWidth = state.tree.$parent.$el.offsetWidth;
+      if (event.clientY > -10) {
+        state.menuposition.top = "".concat(refs.node.offsetTop + refs.node.childNodes[0].offsetHeight / 2, "px");
+      }
+      if (event.clientX > -10) {
+        if (menuWidth > treeWidth) {
+          state.menuposition.left = 0;
+        } else {
+          state.menuposition.left = event.offsetX + menuWidth > treeWidth ? "".concat(treeWidth - menuWidth, "px") : "".concat(event.offsetX, "px");
+        }
+      }
+    });
+  };
+};
+export var handleExpandIconClick = function handleExpandIconClick(_ref7) {
+  var api = _ref7.api,
+    state = _ref7.state;
+  return function (event, node) {
+    if (!node.isLeaf) {
+      state.tree.iconTriggerClickNode ? api.handleExpandClick(true) : api.handleExpandClick(false);
+      event.stopPropagation();
+    }
+  };
+};
+export var handleExpandClick = function handleExpandClick(_ref8) {
+  var emit = _ref8.emit,
+    vm = _ref8.vm,
+    props = _ref8.props,
+    state = _ref8.state;
+  return function (nodeClickFlag) {
+    if (nodeClickFlag) {
+      state.tree.$parent.$emit('node-click', props.node.data, props.node, vm);
+    }
+    if (props.node.isLeaf) {
+      return;
+    }
+    if (state.expanded) {
+      state.tree.$parent.$emit('node-collapse', props.node.data, props.node, vm);
+      props.node.collapse();
+    } else {
+      props.node.expand();
+      emit('node-expand', props.node.data, props.node, vm);
+    }
+  };
+};
+export var handleCheckChange = function handleCheckChange(_ref9) {
+  var nextTick = _ref9.nextTick,
+    props = _ref9.props,
+    state = _ref9.state;
+  return function (value) {
+    var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (event.type === 'click' || event.type === 'mousedown') {
+      props.node.setChecked(event.target.checked, !state.tree.checkStrictly);
+      return;
+    }
+    !state.tree.checkOnClickNode && props.node.setChecked(event.target.checked, !state.tree.checkStrictly);
+    nextTick(function () {
+      var store = state.tree.state.store;
+      state.tree.$emit('check', props.node.data, {
+        checkedNodes: store.getCheckedNodes(),
+        checkedKeys: store.getCheckedKeys(),
+        halfCheckedNodes: store.getHalfCheckedNodes(),
+        halfCheckedKeys: store.getHalfCheckedKeys()
+      });
+    });
+  };
+};
+export var handleContentClick = function handleContentClick(_ref10) {
+  var nextTick = _ref10.nextTick,
+    props = _ref10.props,
+    state = _ref10.state,
+    emit = _ref10.emit;
+  return function (currentNode, currentRadio) {
+    if (props.showRadio) {
+      if (!currentNode.disabled && currentRadio.value !== currentNode.id) {
+        emit('radio-change', currentNode.id);
+        nextTick(function () {
+          var param = _objectSpread({}, currentNode.data);
+          state.tree.$emit('check-change', param);
+        });
+      }
+    }
+  };
+};
+export var handleChildNodeExpand = function handleChildNodeExpand(state) {
+  return function (nodeData, node, instance) {
+    state.tree.$emit('node-expand', nodeData, node, instance);
+  };
+};
+export var handleDragStart = function handleDragStart(_ref11) {
+  var state = _ref11.state,
+    vm = _ref11.vm;
+  return function (event) {
+    if (!state.tree.draggable) return;
+    state.tree.state.emitter.emit('tree-node-drag-start', event, vm);
+  };
+};
+export var handleDragOver = function handleDragOver(_ref12) {
+  var state = _ref12.state,
+    vm = _ref12.vm;
+  return function (event) {
+    if (!state.tree.draggable) return;
+    state.tree.state.emitter.emit('tree-node-drag-over', event, vm);
+    event.preventDefault();
+  };
+};
+export var handleDrop = function handleDrop() {
+  return function (event) {
+    return event.preventDefault();
+  };
+};
+export var handleDragEnd = function handleDragEnd(_ref13) {
+  var state = _ref13.state,
+    vm = _ref13.vm;
+  return function (event) {
+    if (!state.tree.draggable) {
+      return;
+    }
+    state.tree.state.emitter.emit('tree-node-drag-end', event, vm);
+  };
+};
+export var created = function created(_ref14) {
+  var props = _ref14.props,
+    state = _ref14.state;
+  return function (fn) {
+    var tree = state.tree;
+    var property = tree.props || {};
+    var childrenKey = property['children'] || 'children';
+    fn(childrenKey);
+    if (props.node.expanded) {
+      state.expanded = true;
+      state.childNodeRendered = true;
+    }
+  };
+};
+export var onSiblingToggleExpand = function onSiblingToggleExpand(_ref15) {
+  var state = _ref15.state,
+    props = _ref15.props;
+  return function (_ref16) {
+    var isExpand = _ref16.isExpand,
+      sibling = _ref16.sibling;
+    if (state.tree.accordion && isExpand && props.node && sibling && props.node.id !== sibling.id) {
+      props.node.collapse();
+    }
+  };
+};
+export var watchExpandedChange = function watchExpandedChange(_ref17) {
+  var state = _ref17.state,
+    props = _ref17.props;
+  return function (value) {
+    state.parentEmitter.emit('sibling-node-toggle-expand', {
+      isExpand: value,
+      sibling: props.node
+    });
+  };
+};

package/tree-node/vue.js

@@ -0,0 +1,211 @@
+import { created, handleDragEnd, handleDrop, handleDragOver, handleDragStart, handleContentClick, handleChildNodeExpand, handleCheckChange, handleExpandIconClick, handleExpandClick, handleContextMenu, handleClick, handleSelectChange, getNodeKey, watchIndeterminate, watchChecked, watchExpanded, closeMenu, onSiblingToggleExpand, watchExpandedChange } from './index';
+export var api = ['state', 'getNodeKey', 'handleClick', 'handleContentClick', 'closeMenu', 'handleDragEnd', 'handleDrop', 'handleDragOver', 'handleDragStart', 'handleChildNodeExpand', 'handleSelectChange', 'handleContextMenu', 'handleExpandIconClick', 'handleCheckChange'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    treeRoot = _ref.treeRoot,
+    props = _ref.props,
+    emitter = _ref.emitter,
+    $parentEmitter = _ref.$parentEmitter;
+  return reactive({
+    tree: treeRoot,
+    expanded: false,
+    oldChecked: null,
+    indeterminate: null,
+    oldIndeterminate: null,
+    expandIcon: props.expandIcon,
+    childNodeRendered: false,
+    showMenu: false,
+    menuposition: {
+      position: 'absolute',
+      top: 0,
+      left: 0
+    },
+    shrinkIcon: props.shrinkIcon,
+    expandIconColor: props.expandIconColor,
+    shrinkIconColor: props.shrinkIconColor,
+    emitter: emitter(),
+    parentEmitter: $parentEmitter
+  });
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    dispatch = _ref2.dispatch,
+    broadcast = _ref2.broadcast,
+    vm = _ref2.vm,
+    props = _ref2.props,
+    parent = _ref2.parent,
+    treeRoot = _ref2.treeRoot,
+    nextTick = _ref2.nextTick,
+    emit = _ref2.emit,
+    refs = _ref2.refs;
+  Object.assign(api, {
+    state: state,
+    dispatch: dispatch,
+    broadcast: broadcast,
+    watchExpanded: watchExpanded({
+      state: state
+    }),
+    created: created({
+      vm: vm,
+      props: props,
+      state: state,
+      parent: parent
+    }),
+    getNodeKey: getNodeKey(state),
+    closeMenu: closeMenu(state),
+    handleSelectChange: handleSelectChange({
+      props: props,
+      state: state
+    }),
+    handleContextMenu: handleContextMenu({
+      vm: vm,
+      treeRoot: treeRoot,
+      props: props,
+      state: state,
+      nextTick: nextTick
+    }),
+    handleExpandClick: handleExpandClick({
+      emit: emit,
+      vm: vm,
+      props: props,
+      state: state
+    }),
+    handleCheckChange: handleCheckChange({
+      nextTick: nextTick,
+      props: props,
+      state: state
+    }),
+    handleDragStart: handleDragStart({
+      state: state,
+      vm: vm
+    }),
+    handleDragOver: handleDragOver({
+      state: state,
+      vm: vm
+    }),
+    handleDrop: handleDrop(),
+    handleDragEnd: handleDragEnd({
+      state: state,
+      vm: vm
+    }),
+    handleContentClick: handleContentClick({
+      nextTick: nextTick,
+      props: props,
+      state: state,
+      emit: emit
+    }),
+    onSiblingToggleExpand: onSiblingToggleExpand({
+      state: state,
+      props: props
+    }),
+    watchExpandedChange: watchExpandedChange({
+      state: state,
+      props: props
+    }),
+    handleClick: handleClick({
+      api: api,
+      vm: vm,
+      props: props,
+      state: state,
+      refs: refs
+    }),
+    watchIndeterminate: watchIndeterminate({
+      api: api,
+      props: props
+    }),
+    watchChecked: watchChecked({
+      api: api,
+      props: props
+    }),
+    handleChildNodeExpand: handleChildNodeExpand(state),
+    handleExpandIconClick: handleExpandIconClick({
+      api: api,
+      state: state
+    })
+  });
+};
+var initWatcher = function initWatcher(_ref3) {
+  var watch = _ref3.watch,
+    state = _ref3.state,
+    api = _ref3.api,
+    props = _ref3.props;
+  watch(function () {
+    return state.expanded;
+  }, api.watchExpandedChange);
+  watch(function () {
+    return props.node.indeterminate;
+  }, api.watchIndeterminate, {
+    deep: true
+  });
+  watch(function () {
+    return props.node.checked;
+  }, api.watchChecked, {
+    deep: true
+  });
+  watch(function () {
+    return props.node.expanded;
+  }, api.watchExpanded, {
+    deep: true
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var reactive = _ref4.reactive,
+    watch = _ref4.watch,
+    inject = _ref4.inject,
+    provide = _ref4.provide;
+  var parentVm = _ref5.parent,
+    vm = _ref5.vm,
+    nextTick = _ref5.nextTick,
+    emit = _ref5.emit,
+    broadcast = _ref5.broadcast,
+    dispatch = _ref5.dispatch,
+    refs = _ref5.refs,
+    emitter = _ref5.emitter;
+  var api = {};
+  var parent = inject('parentTree') || parentVm;
+  var treeRoot = inject('TreeRoot');
+  var $parentEmitter = inject('parentEmitter');
+  var state = initState({
+    reactive: reactive,
+    treeRoot: treeRoot,
+    props: props,
+    emitter: emitter,
+    $parentEmitter: $parentEmitter
+  });
+  state.parentEmitter.on('sibling-node-toggle-expand', function (event) {
+    return api.onSiblingToggleExpand(event);
+  });
+  provide('parentEmitter', state.emitter);
+  initApi({
+    api: api,
+    state: state,
+    dispatch: dispatch,
+    broadcast: broadcast,
+    vm: vm,
+    props: props,
+    parent: parent,
+    treeRoot: treeRoot,
+    nextTick: nextTick,
+    emit: emit,
+    refs: refs
+  });
+  initWatcher({
+    watch: watch,
+    state: state,
+    api: api,
+    props: props
+  });
+  api.created(function (childrenKey) {
+    watch(function () {
+      return props.node.data[childrenKey];
+    }, function () {
+      props.node.updateChildren();
+    });
+  });
+  state.parentEmitter.on('closeMenu', function () {
+    api.closeMenu();
+    state.emitter.emit('closeMenu');
+  });
+  return api;
+};