@opentiny/vue-renderless 3.9.2 → 3.10.0

package/tree/vue.js

@@ -46,7 +46,27 @@ import {
   clearCurrentStore,
   initIsCurrent,
   beforeUnmount,
-  wrapMounted
+  wrapMounted,
+  switchToggle,
+  initTreeStore,
+  getSameDataIndex,
+  loopGetTreeData,
+  cancelDelete,
+  deleteAction,
+  deleteConfirm,
+  openEdit,
+  saveNode,
+  addNode,
+  editNode,
+  closeEdit,
+  saveEdit,
+  setAddDisabledKeys,
+  setEditDisabledKeys,
+  setDeleteDisabledKeys,
+  initPlainNodeStore,
+  handleCheckPlainNode,
+  handleClickPlainNode,
+  setCheckedByNodeKey
 } from "./index";
 const api = [
   "state",
@@ -76,15 +96,37 @@ const api = [
   "handleKeydown",
   "setCurrentRadio",
   "expandAllNodes",
-  "clearCurrentStore"
+  "clearCurrentStore",
+  "switchToggle",
+  "initTreeStore",
+  "getSameDataIndex",
+  "loopGetTreeData",
+  "cancelDelete",
+  "deleteAction",
+  "deleteConfirm",
+  "openEdit",
+  "saveNode",
+  "addNode",
+  "editNode",
+  "closeEdit",
+  "saveEdit",
+  "setAddDisabledKeys",
+  "setEditDisabledKeys",
+  "setDeleteDisabledKeys",
+  "handleCheckPlainNode",
+  "handleClickPlainNode",
+  "setCheckedByNodeKey"
 ];
 const initState = ({ reactive, emitter, props, computed, api: api2 }) => {
   const state = reactive({
+    loaded: false,
+    checkEasily: false,
     root: null,
     store: null,
     treeItems: null,
     currentNode: null,
     checkboxItems: [],
+    isEmpty: false,
     emitter: emitter(),
     expandIcon: props.expandIcon,
     shrinkIcon: props.shrinkIcon,
@@ -97,9 +139,28 @@ const initState = ({ reactive, emitter, props, computed, api: api2 }) => {
       set: (data) => api2.setChildren(data)
     }),
     treeItemArray: computed(() => api2.computedTreeItemArray(props, state)),
-    isEmpty: computed(() => api2.computedIsEmpty(props, state)),
     showEmptyText: computed(() => api2.computedShowEmptyText(props, state)),
-    currentStore: { flag: false, node: null }
+    currentStore: { flag: false, node: null },
+    action: {
+      deleteDisabled: [],
+      editDisabled: [],
+      addDisabled: [],
+      show: false,
+      node: null,
+      data: [],
+      label: "",
+      type: "",
+      isLeaf: false,
+      isSaveChildNode: false,
+      referenceElm: null,
+      popoverVisible: false
+    },
+    treeEdit: {
+      addData: [],
+      deleteData: [],
+      editData: []
+    },
+    plainNodeStore: {}
   });
   return state;
 };
@@ -112,8 +173,8 @@ const initApi = ({ state, dispatch, broadcast, props, vm, constants, t, emit, re
   computedTreeItemArray: computedTreeItemArray(),
   computedIsEmpty: computedIsEmpty(),
   watchDefaultCheckedKeys: watchDefaultCheckedKeys(state),
-  watchData: watchData(state),
-  watchCheckboxItems: watchCheckboxItems(state),
+  watchData: watchData({ state }),
+  watchCheckboxItems: watchCheckboxItems(),
   watchCheckStrictly: watchCheckStrictly(state),
   updated: updated({ vm, state }),
   filter: filter({ props, state }),
@@ -141,36 +202,79 @@ const initApi = ({ state, dispatch, broadcast, props, vm, constants, t, emit, re
   setCurrentRadio: setCurrentRadio({ props, state }),
   expandAllNodes: expandAllNodes({ state }),
   dragStart: dragStart({ props, state, emit }),
-  dragOver: dragOver({ props, state, emit, refs, vm }),
+  dragOver: dragOver({ props, state, emit, vm }),
   dragEnd: dragEnd({ state, emit }),
   clearCurrentStore: clearCurrentStore(state),
-  initIsCurrent: debounce(20, initIsCurrent({ props, state }))
+  initIsCurrent: debounce(20, initIsCurrent({ props, state })),
+  setCheckedByNodeKey: setCheckedByNodeKey({ props, state })
 });
-const initWatcher = ({ watch, props, api: api2 }) => {
+const initWatcher = ({ watch, props, api: api2, state }) => {
   watch(() => props.defaultCheckedKeys, api2.watchDefaultCheckedKeys);
   watch(() => props.defaultExpandedKeys, api2.watchDefaultExpandedKeys);
   watch(() => props.defaultExpandedKeysHighlight, api2.initIsCurrent);
-  watch(() => props.data, api2.watchData);
+  watch(() => props.data, api2.watchData, { deep: true });
   watch(() => props.checkboxItems, api2.watchCheckboxItems);
   watch(() => props.checkStrictly, api2.watchCheckStrictly);
   watch(() => props.defaultCheckedKeys, api2.setCurrentRadio, { immediate: true });
+  watch(
+    () => props.deleteDisabledKeys,
+    (value) => state.action.deleteDisabled = value || [],
+    { immediate: true }
+  );
+  watch(
+    () => props.editDisabledKeys,
+    (value) => state.action.editDisabled = value || [],
+    { immediate: true }
+  );
+  watch(
+    () => props.addDisabledKeys,
+    (value) => state.action.addDisabled = value || [],
+    { immediate: true }
+  );
+  watch(
+    () => state.root,
+    () => {
+      state.isEmpty = api2.computedIsEmpty(props, state);
+      api2.initPlainNodeStore();
+    },
+    { deep: true }
+  );
 };
-const renderless = (props, { computed, onMounted, onUpdated, reactive, watch, provide, onBeforeUnmount }, { vm, t, refs, emit, constants, broadcast, dispatch, service, emitter, nextTick }) => {
+const renderless = (props, { computed, onMounted, onUpdated, reactive, watch, provide, onBeforeUnmount }, { vm, t, emit, constants, broadcast, dispatch, service, emitter, nextTick }) => {
   const api2 = {};
   const state = initState({ reactive, emitter, props, computed, api: api2 });
   provide("parentEmitter", state.emitter);
-  Object.assign(api2, initApi({ state, dispatch, broadcast, props, vm, constants, t, emit, refs }), {
+  Object.assign(api2, initApi({ state, dispatch, broadcast, props, vm, constants, t, emit }), {
     closeMenu: closeMenu(state),
     mounted: mounted({ api: api2, vm }),
     created: created({ api: api2, props, state }),
     getCurrentKey: getCurrentKey({ api: api2, props }),
     handleNodeExpand: handleNodeExpand(emit),
-    beforeUnmount: beforeUnmount({ api: api2, vm }),
+    beforeUnmount: beforeUnmount({ api: api2, vm, state }),
     wrapMounted: wrapMounted({ api: api2, props, service }),
-    watchDefaultExpandedKeys: watchDefaultExpandedKeys({ state, api: api2, nextTick })
+    initTreeStore: initTreeStore({ api: api2, props, state, emit }),
+    deleteAction: deleteAction({ state, api: api2, emit }),
+    deleteConfirm: deleteConfirm({ state }),
+    getSameDataIndex,
+    loopGetTreeData,
+    cancelDelete: cancelDelete({ state }),
+    openEdit: openEdit({ props, state, api: api2, emit }),
+    saveNode: saveNode({ state, emit, api: api2 }),
+    addNode: addNode({ api: api2 }),
+    editNode: editNode({ state }),
+    closeEdit: closeEdit({ props, state, api: api2, emit }),
+    saveEdit: saveEdit({ props, state, emit }),
+    setAddDisabledKeys: setAddDisabledKeys({ state }),
+    setEditDisabledKeys: setEditDisabledKeys({ state }),
+    setDeleteDisabledKeys: setDeleteDisabledKeys({ state }),
+    watchDefaultExpandedKeys: watchDefaultExpandedKeys({ state, api: api2, nextTick }),
+    switchToggle: switchToggle({ state }),
+    initPlainNodeStore: initPlainNodeStore({ props, state }),
+    handleCheckPlainNode: handleCheckPlainNode({ props, emit }),
+    handleClickPlainNode: handleClickPlainNode(emit)
   });
   api2.created();
-  initWatcher({ watch, props, api: api2 });
+  initWatcher({ watch, props, api: api2, state });
   onMounted(api2.wrapMounted);
   onUpdated(api2.updated);
   onBeforeUnmount(api2.beforeUnmount);

package/tree-menu/index.js

@@ -81,11 +81,44 @@ const currentChange = (emit) => (data, node) => {
   emit("current-change", data, node);
 };
 const getTitle = (props) => (label) => props.showTitle ? label : "";
+const collapseChange = ({ state, props, emit }) => () => {
+  if (props.collapsible) {
+    state.isCollapsed = !state.isCollapsed;
+    emit("collapse-change", state.isCollapsed);
+  }
+};
+const collapseMenu = ({ state, props, api }) => () => {
+  if (props.collapsible && !state.isCollapsed) {
+    api.collapseChange();
+  }
+};
+const expandMenu = ({ state, props, api }) => () => {
+  if (props.collapsible && state.isCollapsed) {
+    api.collapseChange();
+  }
+};
+const setCurrentKey = ({ vm }) => (key) => {
+  vm.$refs.tree.setCurrentKey(key);
+};
+const getCurrentKey = ({ vm }) => () => {
+  return vm.$refs.tree.getCurrentKey();
+};
+const setCurrentNode = ({ vm }) => (key) => {
+  vm.$refs.tree.setCurrentKey(key);
+};
+const getCurrentNode = ({ vm }) => () => {
+  return vm.$refs.tree.getCurrentNode();
+};
 export {
   check,
   checkChange,
+  collapseChange,
+  collapseMenu,
   currentChange,
+  expandMenu,
   filterNode,
+  getCurrentKey,
+  getCurrentNode,
   getTitle,
   initData,
   nodeClick,
@@ -96,6 +129,8 @@ export {
   nodeDragStart,
   nodeDrop,
   nodeExpand,
+  setCurrentKey,
+  setCurrentNode,
   setMenuKey,
   watchFilterText
 };

package/tree-menu/vue.js

@@ -15,7 +15,14 @@ import {
   checkChange,
   check,
   currentChange,
-  getTitle
+  getTitle,
+  collapseChange,
+  collapseMenu,
+  expandMenu,
+  setCurrentKey,
+  getCurrentKey,
+  setCurrentNode,
+  getCurrentNode
 } from "./index";
 const api = [
   "state",
@@ -34,14 +41,22 @@ const api = [
   "checkChange",
   "check",
   "currentChange",
-  "getTitle"
+  "getTitle",
+  "collapseChange",
+  "collapseMenu",
+  "expandMenu",
+  "setCurrentKey",
+  "getCurrentKey",
+  "setCurrentNode",
+  "getCurrentNode"
 ];
-const renderless = (props, { watch, reactive, onMounted }, { t, service, refs, emit }) => {
+const renderless = (props, { watch, reactive, onMounted }, { t, service, refs, emit, vm }) => {
   service = service || { base: {} };
   service = { getMenuDataSync: props.getMenuDataSync || service.base.getMenuDataSync };
   const state = reactive({
     data: [],
-    filterText: ""
+    filterText: "",
+    isCollapsed: false
   });
   Object.assign(api, {
     t,
@@ -61,7 +76,14 @@ const renderless = (props, { watch, reactive, onMounted }, { t, service, refs, e
     watchFilterText: watchFilterText(refs),
     getTitle: getTitle(props),
     setMenuKey: setMenuKey(api),
-    initData: initData({ state, props, service, api })
+    initData: initData({ state, props, service, api }),
+    collapseChange: collapseChange({ state, props, emit }),
+    collapseMenu: collapseMenu({ state, props, api }),
+    expandMenu: expandMenu({ state, props, api }),
+    setCurrentKey: setCurrentKey({ vm }),
+    getCurrentKey: getCurrentKey({ vm }),
+    setCurrentNode: setCurrentNode({ vm }),
+    getCurrentNode: getCurrentNode({ vm })
   });
   watch(
     () => props.data,

package/tree-node/index.js

@@ -47,25 +47,46 @@ const handleSelectChange = ({ props, state }) => (checked, indeterminate) => {
   state.oldChecked = checked;
   state.indeterminate = indeterminate;
 };
-const handleClick = ({ api, vm, props, state, refs }) => (e) => {
+const handleClick = ({ api, vm, props, state }) => (e) => {
   const 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);
+  if (!state.tree.onlyCheckChildren) {
+    store.setCurrentNode(props.node);
+    !props.node.disabled && state.tree.$emit("current-change", store.currentNode ? store.currentNode.data : null, store.currentNode);
+  } else if (props.node.isLeaf && !props.node.disabled) {
+    store.setCurrentNode(props.node);
+    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);
   }
-  const 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);
+  const isCheck = props.showCheckbox ? vm.$refs.checkbox && !vm.$refs.checkbox.$el.contains(e.target) : true;
+  if (state.tree.onlyCheckChildren) {
+    if (props.node.isLeaf && !props.node.disabled) {
+      state.tree.$emit("node-click", props.node.data, props.node, vm);
+      return;
+    }
+  } else {
+    if (!state.tree.collapsible || !state.tree.expandOnClickNode) {
+      !props.node.disabled && state.tree.$emit("node-click", props.node.data, props.node, vm);
+      return;
+    }
+  }
+  if (!state.tree.onlyCheckChildren) {
+    if (state.tree.expandOnClickNode && isCheck) {
+      api.handleExpandClick(isCheck);
+    }
+  } else {
+    api.handleExpandClick(false);
+  }
 };
 const closeMenu = (state) => () => {
   state.showMenu = false;
 };
 const handleContextMenu = ({ treeRoot, vm, props, state, nextTick }) => (event) => {
   const listeners = treeRoot.vm.$listeners;
-  const refs = vm.$refs;
   if (treeRoot.showContextmenu || listeners["node-contextmenu"]) {
     event.stopPropagation();
     event.preventDefault();
@@ -77,10 +98,10 @@ const handleContextMenu = ({ treeRoot, vm, props, state, nextTick }) => (event)
   state.showMenu = true;
   state.tree.$parent.menuInstance = vm;
   nextTick(() => {
-    const menuWidth = refs.menuContext.offsetWidth;
+    const menuWidth = vm.$refs.menuContext.offsetWidth;
     const treeWidth = state.tree.$parent.$el.offsetWidth;
     if (event.clientY > -10) {
-      state.menuposition.top = `${refs.node.offsetTop + refs.node.childNodes[0].offsetHeight / 2}px`;
+      state.menuposition.top = `${vm.$refs.node.offsetTop + vm.$refs.node.childNodes[0].offsetHeight / 2}px`;
     }
     if (event.clientX > -10) {
       if (menuWidth > treeWidth) {
@@ -115,9 +136,12 @@ const handleExpandClick = ({ emit, vm, props, state }) => (nodeClickFlag) => {
 const handleCheckChange = ({ nextTick, props, state }) => (value, event = {}) => {
   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);
+  if (props.checkEasily && state.tree.checkStrictly) {
+    !state.tree.checkOnClickNode && props.node.setChecked(event.target.checked, true, false, false, true);
+  } else {
+    !state.tree.checkOnClickNode && props.node.setChecked(event.target.checked, !state.tree.checkStrictly);
+  }
   nextTick(() => {
     const store = state.tree.state.store;
     state.tree.$emit("check", props.node.data, {
@@ -183,9 +207,48 @@ const watchExpandedChange = ({ state, props }) => (value) => {
     sibling: props.node
   });
 };
+const openEdit = ({ state, vm }) => (node) => {
+  state.tree.state.emitter.emit("tree-node-edit", node);
+  setTimeout(() => {
+    const inputRef = vm.$refs.editInput || vm.$el.querySelector("input");
+    inputRef && inputRef.focus();
+  }, 300);
+};
+const closeEdit = ({ state }) => () => {
+  state.tree.state.emitter.emit("tree-node-edit", null);
+};
+const saveEdit = ({ state }) => (event) => {
+  event.stopPropagation();
+  state.tree.state.emitter.emit("tree-node-save");
+};
+const deleteNode = ({ state }) => (event, node) => {
+  state.tree.state.emitter.emit("tree-node-delete", event, node);
+};
+const addNode = ({ state, props, api }) => (event, node) => {
+  props.node.expand();
+  api.openEdit();
+  state.tree.state.emitter.emit("tree-node-add", event, node);
+};
+const computedExpandIcon = () => ({ showLine }, { tree, expanded, isSaaSTheme }) => {
+  if (tree.icon) {
+    return tree.icon;
+  }
+  if (showLine) {
+    return expanded ? "icon-minus-square" : "icon-plus-square";
+  }
+  return isSaaSTheme ? "icon-arrow-bottom" : "icon-chevron-right";
+};
+const computedIndent = () => ({ node, showLine }, { tree }) => {
+  return (node.level > 1 ? 1 : 0) * (tree.indent + (showLine ? 8 : 0)) + tree.baseIndent + "px";
+};
 export {
+  addNode,
+  closeEdit,
   closeMenu,
+  computedExpandIcon,
+  computedIndent,
   created,
+  deleteNode,
   getNodeKey,
   handleCheckChange,
   handleChildNodeExpand,
@@ -200,6 +263,8 @@ export {
   handleExpandIconClick,
   handleSelectChange,
   onSiblingToggleExpand,
+  openEdit,
+  saveEdit,
   watchChecked,
   watchExpanded,
   watchExpandedChange,

package/tree-node/vue.js

@@ -18,8 +18,14 @@ import {
   watchChecked,
   watchExpanded,
   closeMenu,
+  openEdit,
+  addNode,
+  saveEdit,
+  deleteNode,
   onSiblingToggleExpand,
-  watchExpandedChange
+  watchExpandedChange,
+  computedExpandIcon,
+  computedIndent
 } from "./index";
 const api = [
   "state",
@@ -35,25 +41,35 @@ const api = [
   "handleSelectChange",
   "handleContextMenu",
   "handleExpandIconClick",
+  "openEdit",
+  "addNode",
+  "saveEdit",
+  "deleteNode",
   "handleCheckChange"
 ];
-const initState = ({ reactive, treeRoot, props, emitter, $parentEmitter }) => 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
-});
-const initApi = ({ api: api2, state, dispatch, broadcast, vm, props, parent, treeRoot, nextTick, emit, refs }) => {
+const initState = ({ reactive, treeRoot, props, emitter, $parentEmitter, vm, api: api2, computed }) => {
+  const state = 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,
+    isSaaSTheme: (props.theme || vm.theme) === "saas",
+    computedExpandIcon: computed(() => api2.computedExpandIcon(treeRoot, state)),
+    computedIndent: computed(() => api2.computedIndent(props, state))
+  });
+  return state;
+};
+const initApi = ({ api: api2, state, dispatch, broadcast, vm, props, parent, treeRoot, nextTick, emit }) => {
   Object.assign(api2, {
     state,
     dispatch,
@@ -73,11 +89,17 @@ const initApi = ({ api: api2, state, dispatch, broadcast, vm, props, parent, tre
     handleContentClick: handleContentClick({ nextTick, props, state, emit }),
     onSiblingToggleExpand: onSiblingToggleExpand({ state, props }),
     watchExpandedChange: watchExpandedChange({ state, props }),
-    handleClick: handleClick({ api: api2, vm, props, state, refs }),
+    handleClick: handleClick({ api: api2, vm, props, state }),
     watchIndeterminate: watchIndeterminate({ api: api2, props }),
     watchChecked: watchChecked({ api: api2, props }),
+    openEdit: openEdit({ state, vm }),
+    addNode: addNode({ state, props, api: api2 }),
+    saveEdit: saveEdit({ state }),
+    deleteNode: deleteNode({ state }),
     handleChildNodeExpand: handleChildNodeExpand(state),
-    handleExpandIconClick: handleExpandIconClick({ api: api2, state })
+    handleExpandIconClick: handleExpandIconClick({ api: api2, state }),
+    computedExpandIcon: computedExpandIcon(),
+    computedIndent: computedIndent()
   });
 };
 const initWatcher = ({ watch, state, api: api2, props }) => {
@@ -86,15 +108,15 @@ const initWatcher = ({ watch, state, api: api2, props }) => {
   watch(() => props.node.checked, api2.watchChecked, { deep: true });
   watch(() => props.node.expanded, api2.watchExpanded, { deep: true });
 };
-const renderless = (props, { reactive, watch, inject, provide }, { parent: parentVm, vm, nextTick, emit, broadcast, dispatch, refs, emitter }) => {
+const renderless = (props, { reactive, watch, inject, provide, computed }, { parent: parentVm, vm, nextTick, emit, broadcast, dispatch, emitter }) => {
   const api2 = {};
   const parent = inject("parentTree") || parentVm;
   const treeRoot = inject("TreeRoot");
   const $parentEmitter = inject("parentEmitter");
-  const state = initState({ reactive, treeRoot, props, emitter, $parentEmitter });
+  const state = initState({ reactive, treeRoot, props, emitter, $parentEmitter, vm, api: api2, computed });
   state.parentEmitter.on("sibling-node-toggle-expand", (event) => api2.onSiblingToggleExpand(event));
   provide("parentEmitter", state.emitter);
-  initApi({ api: api2, state, dispatch, broadcast, vm, props, parent, treeRoot, nextTick, emit, refs });
+  initApi({ api: api2, state, dispatch, broadcast, vm, props, parent, treeRoot, nextTick, emit });
   initWatcher({ watch, state, api: api2, props });
   api2.created((childrenKey) => {
     watch(