@opentiny/vue-renderless 3.1.0-alpha.0

package/transfer-panel/index.js

@@ -0,0 +1,364 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { copyArray } from '@opentiny/vue-renderless/common/object';
+import { getFlatData } from '@opentiny/vue-renderless/transfer';
+export var showFilterData = function showFilterData(data, sign) {
+  var getChild = function getChild(data, sign) {
+    return data.filter(function (node) {
+      if (node.children && node.children.length > 0) {
+        node.children = getChild(node.children, sign);
+      }
+      return node[sign];
+    });
+  };
+  return getChild(data, sign);
+};
+export var getFilterData = function getFilterData(_ref) {
+  var api = _ref.api,
+    props = _ref.props,
+    state = _ref.state,
+    Table = _ref.Table,
+    Tree = _ref.Tree;
+  return function () {
+    if (state.renderType === Table) {
+      var tableData = [];
+      if (props.filterMethod) {
+        tableData = props.data.filter(function (item) {
+          return props.filterMethod(state.query, item);
+        });
+      } else {
+        tableData = props.data;
+      }
+      state.pagerTotal = tableData;
+      if (props.showPager) {
+        var pageSize = state.sizes || 10;
+        var totalPageCount = Math.ceil(tableData.length / pageSize);
+        if (state.internalPage > totalPageCount) {
+          api.handlePageChange(totalPageCount);
+        }
+        if (totalPageCount > 0 && state.internalPage === 0) {
+          state.internalPage = 1;
+        }
+        if (totalPageCount > 0 && state.currentPage === 0) {
+          state.currentPage = 1;
+        }
+        return tableData.slice((state.internalPage - 1) * pageSize, pageSize * state.internalPage);
+      } else {
+        return tableData;
+      }
+    } else if (state.renderType === Tree) {
+      return showFilterData(api.getFilterTreeData(copyArray(props.data)), 'visible');
+    } else {
+      return props.data.filter(function (item) {
+        if (typeof props.filterMethod === 'function') {
+          return props.filterMethod(state.query, item);
+        } else {
+          var label = item[state.labelProp] || item[state.keyProp].toString();
+          return label.toLowerCase().indexOf(state.query.toLowerCase()) > -1;
+        }
+      });
+    }
+  };
+};
+export var getCheckableData = function getCheckableData(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    Tree = _ref2.Tree;
+  return function () {
+    if (state.renderType === Tree) {
+      return api.getTreeCheckableData(state.filteredData);
+    } else {
+      return state.filteredData.filter(function (item) {
+        return !item[state.disabledProp];
+      });
+    }
+  };
+};
+export var getCheckedSummary = function getCheckedSummary(_ref3) {
+  var props = _ref3.props,
+    state = _ref3.state,
+    Tree = _ref3.Tree;
+  return function () {
+    var checkedLength = state.checked.length;
+    var dataLength = 0;
+    if (state.renderType === Tree) {
+      dataLength = getFlatData(copyArray(props.data)).length;
+    } else {
+      dataLength = props.data.length;
+    }
+    var _props$format = props.format,
+      noChecked = _props$format.noChecked,
+      hasChecked = _props$format.hasChecked;
+    if (noChecked && hasChecked) {
+      return checkedLength > 0 ? hasChecked.replace(/\${checked}/g, checkedLength).replace(/\${total}/g, dataLength) : noChecked.replace(/\${checked}/g, checkedLength).replace(/\${total}/g, dataLength);
+    } else {
+      return "".concat(checkedLength, " / ").concat(dataLength);
+    }
+  };
+};
+export var getDeteminate = function getDeteminate(state) {
+  return function () {
+    return state.checked.length > 0 && state.checked.length < state.checkableData.length;
+  };
+};
+export var watchChecked = function watchChecked(_ref4) {
+  var api = _ref4.api,
+    emit = _ref4.emit,
+    state = _ref4.state;
+  return function (_ref5) {
+    var value = _ref5.value,
+      oldvalue = _ref5.oldvalue;
+    api.updateAllChecked();
+    if (state.checkChangeByUser) {
+      var movedKeys = value.concat(oldvalue).filter(function (v) {
+        return value.indexOf(v) === -1 || oldvalue.indexOf(v) === -1;
+      });
+      emit('checked-change', value, movedKeys);
+    } else {
+      emit('checked-change', value);
+      state.checkChangeByUser = true;
+    }
+  };
+};
+export var watchData = function watchData(_ref6) {
+  var api = _ref6.api,
+    props = _ref6.props,
+    state = _ref6.state,
+    Tree = _ref6.Tree;
+  return function (value) {
+    state.pagerTotal = value;
+    var checked = [];
+    if (state.renderType === Tree && !props.treeOp.checkStrictly) {
+      state.checked = api.getStrictData(state.filteredData).keys;
+    } else {
+      var filteredDataKeys = state.filteredData.map(function (item) {
+        return item[state.keyProp];
+      });
+      state.checked.forEach(function (item) {
+        if (filteredDataKeys.indexOf(item) > -1) {
+          checked.push(item);
+        }
+      });
+      state.checkChangeByUser = false;
+      state.checked = checked;
+    }
+  };
+};
+export var watchDefaultCheckded = function watchDefaultCheckded(_ref7) {
+  var api = _ref7.api,
+    props = _ref7.props,
+    state = _ref7.state,
+    Tree = _ref7.Tree;
+  return function (_ref8) {
+    var value = _ref8.value,
+      oldvalue = _ref8.oldvalue;
+    if (oldvalue && value.length === oldvalue.length && value.every(function (item) {
+      return oldvalue.indexOf(item) > -1;
+    })) {
+      return;
+    }
+    if (state.renderType === Tree && !props.treeOp.checkStrictly) {
+      if (!state.render) {
+        return;
+      }
+      state.render.defaultCheckedKeys = state.checked = api.getStrictData(state.filteredData).keys;
+    } else {
+      var checked = [];
+      var checkableDataKeys = state.checkableData.map(function (item) {
+        return item[state.keyProp];
+      });
+      value.forEach(function (item) {
+        if (checkableDataKeys.indexOf(item) > -1) {
+          checked.push(item);
+        }
+      });
+      state.checkChangeByUser = false;
+      state.checked = checked;
+    }
+  };
+};
+export var updateAllChecked = function updateAllChecked(_ref9) {
+  var state = _ref9.state,
+    Table = _ref9.Table,
+    Tree = _ref9.Tree;
+  return function () {
+    var checkableDataKeys = state.checkableData.map(function (item) {
+      return item[state.keyProp];
+    });
+    state.allChecked = checkableDataKeys && checkableDataKeys.length > 0 && checkableDataKeys.every(function (item) {
+      return state.checked.indexOf(item) > -1;
+    });
+    if (state.renderType === Table || state.renderType === Tree) {
+      state.render.data = state.filteredData;
+      if (state.renderType === Tree) {
+        state.render.defaultCheckedKeys = state.checked;
+      } else {
+        var pageCheckedKeys = [];
+        state.filteredData.forEach(function (data) {
+          state.checked.indexOf(data[state.keyProp]) > -1 && pageCheckedKeys.push(data[state.keyProp]);
+        });
+        state.render.defaultChecked = pageCheckedKeys;
+      }
+    }
+  };
+};
+export var handleAllCheckedChange = function handleAllCheckedChange(_ref10) {
+  var state = _ref10.state,
+    Table = _ref10.Table,
+    Tree = _ref10.Tree,
+    vm = _ref10.vm;
+  return function (value) {
+    state.checked = value ? state.checkableData.map(function (item) {
+      return item[state.keyProp];
+    }) : [];
+    if (state.renderType === Table) {
+      state.render.defaultChecked = state.checked;
+    } else if (state.renderType === Tree) {
+      state.checked.length !== 0 ? state.render.defaultCheckedKeys = state.checked : vm.$refs.plugin.setCheckedKeys(state.checked);
+    }
+  };
+};
+export var clearQuery = function clearQuery(state) {
+  return function () {
+    if (state.inputIcon === 'circle-close') {
+      state.query = '';
+    }
+  };
+};
+export var checkedEvent = function checkedEvent(state) {
+  return function (value, disabled) {
+    if (disabled) {
+      return;
+    }
+    var index = state.checked.indexOf(value);
+    var tmpArray = _toConsumableArray(state.checked);
+    if (~index) {
+      tmpArray.splice(index, 1);
+      state.checked = tmpArray;
+    } else {
+      tmpArray.push(value);
+      state.checked = tmpArray;
+    }
+  };
+};
+export var setPosition = function setPosition(_ref11) {
+  var parent = _ref11.parent,
+    state = _ref11.state;
+  return function (trend, event) {
+    event.stopPropagation();
+    event.preventDefault();
+    var checkedKey = [];
+    var uncheckedKey = [];
+    state.filteredData.forEach(function (item) {
+      if (~state.checked.indexOf(item[state.keyProp])) {
+        checkedKey.push(item[state.keyProp]);
+      } else {
+        uncheckedKey.push(item[state.keyProp]);
+      }
+    });
+    var result = trend === 'up' ? [].concat(checkedKey, uncheckedKey) : [].concat(uncheckedKey, checkedKey);
+    parent.$parent.$emit('update:modelValue', result);
+  };
+};
+export var selectChange = function selectChange(state) {
+  return function (keys) {
+    return state.checked = keys;
+  };
+};
+export var handlePageChange = function handlePageChange(state) {
+  return function (currentPage) {
+    state.pageChangeData = true;
+    state.internalPage = currentPage;
+    state.currentPage = currentPage;
+  };
+};
+export var getFilterTreeData = function getFilterTreeData(_ref12) {
+  var props = _ref12.props,
+    state = _ref12.state;
+  return function (data) {
+    var getChild = function getChild(data, query) {
+      data.forEach(function (node) {
+        var label = node[state.labelProp];
+        if (typeof props.treeOp.filterNodeMethod === 'function') {
+          var result = props.treeOp.filterNodeMethod(state.query, node);
+          if (typeof result !== 'boolean') {
+            node.visible = true;
+          } else {
+            node.visible = result;
+          }
+        } else {
+          node.visible = label.toLowerCase().indexOf(query.toLowerCase()) > -1;
+        }
+        if (node.children && node.children.length > 0) {
+          getChild(node.children, query);
+        }
+        if (!node.visible && node.children && node.children.length) {
+          var allHidden = true;
+          allHidden = !node.children.some(function (child) {
+            return child.visible;
+          });
+          node.visible = allHidden === false;
+        }
+      });
+    };
+    getChild(data, state.query);
+    return data;
+  };
+};
+export var getTreeCheckableData = function getTreeCheckableData(state) {
+  return function (data) {
+    var nodes = [];
+    var getChild = function getChild(data) {
+      data.forEach(function (node) {
+        !node[state.disabledProp] && nodes.push(node);
+        if (node.children && node.children.length > 0) {
+          getChild(node.children);
+        }
+      });
+    };
+    getChild(data);
+    return nodes;
+  };
+};
+export var getStrictData = function getStrictData(_ref13) {
+  var props = _ref13.props,
+    state = _ref13.state;
+  return function (data) {
+    var keys = [];
+    var strictData = function strictData(data, isStrict) {
+      data.forEach(function (node) {
+        if (props.defaultChecked.indexOf(node[state.keyProp]) > -1) {
+          node.isCheckable = true;
+          keys.push(node[state.keyProp]);
+        } else {
+          node.isCheckable = isStrict;
+          isStrict && keys.push(node[state.keyProp]);
+        }
+        if (node.children && node.children.length > 0) {
+          strictData(node.children, node.isCheckable);
+        }
+      });
+    };
+    strictData(data, false);
+    return {
+      data: data,
+      keys: keys
+    };
+  };
+};
+export var sizesChange = function sizesChange(state) {
+  return function (sizes) {
+    return state.sizes = sizes;
+  };
+};
+export var setExpandCache = function setExpandCache(state) {
+  return function (node, expand) {
+    var expanded = state.expanded,
+      keyProp = state.keyProp;
+    var index = state.expanded.indexOf(node[keyProp]);
+    if (expand) {
+      index === -1 && expanded.push(node[keyProp]);
+    } else {
+      index !== -1 && expanded.splice(index, 1);
+    }
+  };
+};

package/transfer-panel/vue.js

@@ -0,0 +1,258 @@
+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 { getStrictData, sizesChange, getTreeCheckableData, getFilterTreeData, getFilterData, getCheckableData, checkedEvent, watchData, getCheckedSummary, getDeteminate, watchChecked, watchDefaultCheckded, updateAllChecked, handleAllCheckedChange, clearQuery, setPosition, selectChange, handlePageChange, setExpandCache } from './index';
+export var api = ['markRaw', 'toRaw', 'state', 'check', 'sizesChange', 'clearQuery', 'handleAllCheckedChange', 'checkedEvent', 'setPosition', 'selectChange', 'handlePageChange'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    props = _ref.props,
+    parent = _ref.parent,
+    computed = _ref.computed,
+    api = _ref.api,
+    slots = _ref.slots;
+  var state = reactive({
+    query: '',
+    checked: [],
+    allChecked: false,
+    inputHover: false,
+    internalPage: props.pagerOp.pageVO.currentPage || 1,
+    pagerTotal: 0,
+    pageChangeData: parent.state.isToLeft,
+    currentPage: props.pagerOp.pageVO.currentPage || 1,
+    sizes: props.pagerOp && props.pagerOp.pageVO.pageSize,
+    render: {},
+    checkChangeByUser: true,
+    filteredData: computed(function () {
+      return api.getFilterData();
+    }),
+    checkableData: computed(function () {
+      return api.getCheckableData();
+    }),
+    checkedSummary: computed(function () {
+      return api.getCheckedSummary();
+    }),
+    isIndeterminate: computed(function () {
+      return api.getDeteminate();
+    }),
+    hasNoMatch: computed(function () {
+      return state.query.length > 0 && state.filteredData.length === 0;
+    }),
+    inputIcon: computed(function () {
+      return state.query.length > 0 && state.inputHover ? 'circle-close' : 'search';
+    }),
+    labelProp: computed(function () {
+      return props.props.label || 'label';
+    }),
+    keyProp: computed(function () {
+      return props.props.key || 'key';
+    }),
+    disabledProp: computed(function () {
+      return props.props.disabled || 'disabled';
+    }),
+    childrenProp: computed(function () {
+      return props.treeOp && props.treeOp.props && props.treeOp.props.childern || 'children';
+    }),
+    hasFooter: computed(function () {
+      return (!!parent.slots['left-footer'] || !!parent.slots['right-footer']) && !!slots["default"];
+    }),
+    renderType: computed(function () {
+      return props.render && props.render.plugin.name;
+    }),
+    expanded: []
+  });
+  return state;
+};
+var initStateRender = function initStateRender(_ref2) {
+  var reactive = _ref2.reactive,
+    state = _ref2.state,
+    props = _ref2.props,
+    api = _ref2.api;
+  return reactive(_objectSpread(_objectSpread({
+    keys: state.keyProp,
+    data: [],
+    defaultChecked: state.checked,
+    defaultExpandedKeys: state.expanded,
+    columns: props.columns
+  }, props.treeOp), {}, {
+    on: {
+      'checked-change': function checkedChange(selected, isAll) {
+        api.selectChange(selected, isAll);
+      },
+      check: function check(data, _ref3) {
+        var checkedKeys = _ref3.checkedKeys;
+        state.checked = checkedKeys;
+      },
+      'node-expand': function nodeExpand(node) {
+        return api.setExpandCache(node, true);
+      },
+      'node-collapse': function nodeCollapse(node) {
+        return api.setExpandCache(node, false);
+      }
+    }
+  }));
+};
+var initWatcher = function initWatcher(_ref4) {
+  var watch = _ref4.watch,
+    state = _ref4.state,
+    api = _ref4.api,
+    props = _ref4.props,
+    Table = _ref4.Table;
+  watch(function () {
+    return state.checked;
+  }, function (value, oldvalue) {
+    return api.watchChecked({
+      value: value,
+      oldvalue: oldvalue
+    });
+  });
+  watch(function () {
+    return props.pagerOp.pageVO.currentPage;
+  }, function (value) {
+    state.currentPage = value;
+  }, {
+    deep: true,
+    immediate: true
+  });
+  watch(function () {
+    return props.data;
+  }, api.watchData, {
+    immediate: true
+  });
+  watch(function () {
+    return state.checkableData;
+  }, api.updateAllChecked);
+  watch(function () {
+    return props.defaultChecked;
+  }, function (value, oldvalue) {
+    return api.watchDefaultCheckded({
+      value: value,
+      oldvalue: oldvalue
+    });
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return props.isToLeft;
+  }, function () {
+    if (state.renderType === Table) {
+      state.internalPage = 1;
+      state.currentPage = 1;
+      state.render.data = state.filteredData;
+    }
+  });
+};
+export var renderless = function renderless(props, _ref5, _ref6) {
+  var computed = _ref5.computed,
+    reactive = _ref5.reactive,
+    watch = _ref5.watch,
+    toRaw = _ref5.toRaw,
+    markRaw = _ref5.markRaw;
+  var $prefix = _ref6.$prefix,
+    t = _ref6.t,
+    emit = _ref6.emit,
+    parent = _ref6.parent,
+    nextTick = _ref6.nextTick,
+    refs = _ref6.refs,
+    vm = _ref6.vm,
+    slots = _ref6.slots;
+  var api = {};
+  var Table = $prefix + 'Table';
+  var Tree = $prefix + 'Tree';
+  var state = initState({
+    reactive: reactive,
+    props: props,
+    parent: parent,
+    computed: computed,
+    api: api,
+    slots: slots
+  });
+  Object.assign(api, {
+    t: t,
+    state: state,
+    toRaw: toRaw,
+    markRaw: markRaw,
+    sizesChange: sizesChange(state),
+    setPosition: setPosition({
+      parent: parent,
+      state: state
+    }),
+    selectChange: selectChange(state),
+    handlePageChange: handlePageChange(state),
+    clearQuery: clearQuery(state),
+    checkedEvent: checkedEvent(state),
+    getDeteminate: getDeteminate(state),
+    updateAllChecked: updateAllChecked({
+      state: state,
+      Table: Table,
+      Tree: Tree
+    }),
+    handleAllCheckedChange: handleAllCheckedChange({
+      nextTick: nextTick,
+      props: props,
+      state: state,
+      Table: Table,
+      Tree: Tree,
+      vm: vm
+    }),
+    getCheckedSummary: getCheckedSummary({
+      props: props,
+      state: state,
+      Tree: Tree
+    }),
+    getFilterTreeData: getFilterTreeData({
+      props: props,
+      state: state
+    }),
+    getTreeCheckableData: getTreeCheckableData(state),
+    getStrictData: getStrictData({
+      props: props,
+      state: state
+    }),
+    setExpandCache: setExpandCache(state),
+    getCheckableData: getCheckableData({
+      api: api,
+      state: state,
+      Tree: Tree
+    }),
+    getFilterData: getFilterData({
+      api: api,
+      parent: parent,
+      props: props,
+      refs: refs,
+      state: state,
+      Table: Table,
+      Tree: Tree
+    }),
+    watchData: watchData({
+      api: api,
+      props: props,
+      state: state,
+      Tree: Tree
+    }),
+    watchDefaultCheckded: watchDefaultCheckded({
+      api: api,
+      props: props,
+      state: state,
+      Tree: Tree
+    }),
+    watchChecked: watchChecked({
+      api: api,
+      emit: emit,
+      state: state
+    })
+  });
+  state.render = initStateRender({
+    reactive: reactive,
+    state: state,
+    props: props,
+    api: api
+  });
+  initWatcher({
+    watch: watch,
+    state: state,
+    api: api,
+    props: props,
+    Table: Table
+  });
+  return api;
+};