@opentiny/vue-renderless 3.1.0-alpha.0

package/cascader-panel/index.js

@@ -0,0 +1,359 @@
+import { isNull } from '@opentiny/vue-renderless/common/type';
+import { isEqual } from '@opentiny/vue-renderless/common/object';
+import { isEmpty } from '@opentiny/vue-renderless/cascader';
+import { KEY_CODE, CASCADER } from '@opentiny/vue-renderless/common';
+export var watchCheckedValue = function watchCheckedValue(_ref) {
+  var api = _ref.api,
+    emit = _ref.emit,
+    props = _ref.props,
+    state = _ref.state;
+  return function (value) {
+    if (!isEqual(value, props.modelValue)) {
+      state.checkStrictly && api.calculateCheckedNodePaths();
+      emit('update:modelValue', value);
+      emit('change', value);
+    }
+  };
+};
+export var initStore = function initStore(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state,
+    Store = _ref2.Store;
+  return function () {
+    if (state.config.lazy && isEmpty(props.options)) {
+      api.lazyLoad();
+    } else {
+      state.store = new Store(props.options, state.config);
+      state.menus = [state.store.getNodes()];
+      api.syncMenuState();
+    }
+  };
+};
+export var syncCheckedValue = function syncCheckedValue(_ref3) {
+  var api = _ref3.api,
+    props = _ref3.props,
+    state = _ref3.state;
+  return function () {
+    if (!isEqual(props.modelValue, state.checkedValue)) {
+      state.checkedValue = props.modelValue;
+      api.syncMenuState();
+    }
+  };
+};
+export var syncMenuState = function syncMenuState(_ref4) {
+  var api = _ref4.api,
+    nextTick = _ref4.nextTick,
+    state = _ref4.state;
+  return function () {
+    api.syncActivePath();
+    state.multiple && api.syncMultiCheckState();
+    state.checkStrictly && api.calculateCheckedNodePaths();
+    nextTick(function () {
+      return api.scrollIntoView;
+    });
+  };
+};
+export var syncMultiCheckState = function syncMultiCheckState(_ref5) {
+  var api = _ref5.api,
+    state = _ref5.state;
+  return function () {
+    var nodes = api.getFlattedNodes(state.leafOnly);
+    nodes.forEach(function (node) {
+      node.syncCheckState(state.checkedValue);
+    });
+  };
+};
+export var syncActivePath = function syncActivePath(_ref6) {
+  var api = _ref6.api,
+    state = _ref6.state;
+  return function () {
+    if (!isEmpty(state.activePath)) {
+      var nodes = state.activePath.map(function (node) {
+        return api.getNodeByValue(node.getValue());
+      });
+      if (isNull(nodes[0])) {
+        state.activePath = [];
+      } else {
+        api.expandNodes(nodes);
+      }
+    } else if (!isEmpty(state.checkedValue)) {
+      var value = state.multiple ? state.checkedValue[0] : state.checkedValue;
+      var checkedNode = api.getNodeByValue(value) || {};
+      var _nodes = (checkedNode.pathNodes || []).slice(0, -1);
+      api.expandNodes(_nodes);
+    } else {
+      state.activePath = [];
+      state.menus = [state.store.getNodes()];
+    }
+  };
+};
+export var expandNodes = function expandNodes(api) {
+  return function (nodes) {
+    return nodes.forEach(function (node) {
+      return api.handleExpand(node, true);
+    });
+  };
+};
+export var coerceTruthyValueToArray = function coerceTruthyValueToArray(val) {
+  if (Array.isArray(val)) {
+    return val;
+  } else if (val) {
+    return [val];
+  }
+  return [];
+};
+export var calculateCheckedNodePaths = function calculateCheckedNodePaths(_ref7) {
+  var api = _ref7.api,
+    state = _ref7.state;
+  return function () {
+    var checkedValues = state.multiple ? coerceTruthyValueToArray(state.checkedValue) : [state.checkedValue];
+    state.checkedNodePaths = checkedValues.map(function (v) {
+      var checkedNode = api.getNodeByValue(v);
+      return checkedNode ? checkedNode.pathNodes : [];
+    });
+  };
+};
+export var focusNode = function focusNode(api) {
+  return function (el) {
+    if (!el) return;
+    el.focus();
+    !api.isLeaf(el) && el.click();
+  };
+};
+export var getMenuIndex = function getMenuIndex() {
+  return function (el) {
+    if (!el) return;
+    var pieces = el.id.split('-');
+    return Number(pieces[pieces.length - 2]);
+  };
+};
+export var checkNode = function checkNode(api) {
+  return function (el) {
+    if (!el) return;
+    var input = el.querySelector('input');
+    if (input) {
+      input.click();
+    } else if (api.isLeaf(el)) {
+      el.click();
+    }
+  };
+};
+export var handleKeyDown = function handleKeyDown(_ref8) {
+  var api = _ref8.api,
+    emit = _ref8.emit,
+    menus = _ref8.menus;
+  return function (event) {
+    var target = event.target,
+      keyCode = event.keyCode;
+    if (keyCode === KEY_CODE.ArrowUp) {
+      var prev = api.getSibling(target, -1);
+      focusNode(prev);
+    } else if (keyCode === KEY_CODE.ArrowDown) {
+      var next = api.getSibling(target, 1);
+      focusNode(next);
+    } else if (keyCode === KEY_CODE.ArrowLeft) {
+      var preMenu = menus[getMenuIndex(target) - 1];
+      if (preMenu) {
+        var expandedNode = preMenu.$el.querySelector(CASCADER.CascaderNodeExpand);
+        focusNode(expandedNode);
+      }
+    } else if (keyCode === KEY_CODE.ArrowRight) {
+      var nextMenu = menus[getMenuIndex(target) + 1];
+      if (nextMenu) {
+        var firstNode = nextMenu.$el.querySelector(CASCADER.CascaderNodeTab);
+        focusNode(firstNode);
+      }
+    } else if (keyCode === KEY_CODE.Enter) {
+      checkNode(target);
+    } else if (~[KEY_CODE.Escape, KEY_CODE.Tab].indexOf(keyCode)) {
+      emit('close');
+    }
+  };
+};
+export var handleExpand = function handleExpand(_ref9) {
+  var emit = _ref9.emit,
+    state = _ref9.state;
+  return function (node, silent) {
+    var level = node.level;
+    var path = state.activePath.slice(0, level - 1);
+    var menus = state.menus.slice(0, level);
+    if (!node.isLeaf) {
+      path.push(node);
+      menus.push(node.children);
+    }
+    state.activePath = path;
+    state.menus = menus;
+    if (!silent) {
+      var pathValues = path.map(function (node) {
+        return node.getValue();
+      });
+      emit('active-item-change', pathValues);
+      emit('expand-change', pathValues);
+    }
+  };
+};
+export var handleCheckChange = function handleCheckChange(state) {
+  return function (value) {
+    state.checkedValue = value;
+  };
+};
+export var lazyLoad = function lazyLoad(_ref10) {
+  var api = _ref10.api,
+    $parent = _ref10.$parent,
+    state = _ref10.state,
+    Store = _ref10.Store;
+  return function (node, onFullfiled) {
+    if (!node) {
+      node = node || {
+        root: true,
+        level: 0
+      };
+      state.store = new Store([], state.config);
+      state.menus = [state.store.getNodes()];
+    }
+    node.loading = true;
+    var afterLoad = function afterLoad(dataList) {
+      var parent = node.root ? null : node;
+      dataList && dataList.length && state.store.appendNodes(dataList, parent);
+      node.loading = false;
+      node.loaded = true;
+      if (Array.isArray(state.checkedValue)) {
+        var nodeValue = state.checkedValue[state.loadCount++];
+        var valueKey = state.config.value;
+        var leafKey = state.config.leaf;
+        if (Array.isArray(dataList) && dataList.filter(function (item) {
+          return item[valueKey] === nodeValue;
+        }).length > 0) {
+          var checkedNode = state.store.getNodeByValue(nodeValue);
+          if (!checkedNode.data[leafKey]) {
+            api.lazyLoad(checkedNode, function () {
+              api.handleExpand(checkedNode);
+            });
+          }
+          if ($parent.computePresentText && state.loadCount === state.checkedValue.length) {
+            $parent.computePresentText();
+          }
+        }
+      }
+      onFullfiled && onFullfiled(dataList);
+    };
+    state.config.lazyLoad(node, afterLoad);
+  };
+};
+export var calculateMultiCheckedValue = function calculateMultiCheckedValue(_ref11) {
+  var api = _ref11.api,
+    state = _ref11.state;
+  return function () {
+    state.checkedValue = api.getCheckedNodes(state.leafOnly).map(function (node) {
+      return node.getValueByOption();
+    });
+  };
+};
+export var scrollIntoView = function scrollIntoView(_ref12) {
+  var menus = _ref12.menus;
+  return function () {
+    menus.forEach(function (menu) {
+      var menuElement = menu.$el;
+      if (menuElement) {
+        var container = menuElement.querySelector(CASCADER.ScrollWrap);
+        var activeNode = menuElement.querySelector(CASCADER.CascaderActice) || menuElement.querySelector(CASCADER.ActivePath);
+        scrollIntoView(container, activeNode);
+      }
+    });
+  };
+};
+export var getNodeByValue = function getNodeByValue(state) {
+  return function (val) {
+    return state.store.getNodeByValue(val);
+  };
+};
+export var getFlattedNodes = function getFlattedNodes(state) {
+  return function (leafOnly) {
+    var cached = !state.config.lazy;
+    return state.store.getFlattedNodes(leafOnly, cached);
+  };
+};
+export var getCheckedNodes = function getCheckedNodes(_ref13) {
+  var api = _ref13.api,
+    state = _ref13.state;
+  return function (leafOnly, cascaderCheckedValue) {
+    var isCascaderChecked = function isCascaderChecked(str, checkedValue) {
+      var flag = true;
+      if (!state.multiple || !checkedValue) {
+        return flag;
+      }
+      flag = false;
+      if (!Array.isArray(checkedValue)) {
+        return flag;
+      }
+      for (var i = 0; i < checkedValue.length; i++) {
+        if (Array.isArray(checkedValue[i]) && checkedValue[i].length) {
+          flag = checkedValue[i][checkedValue[i].length - 1] === str;
+        }
+        if (flag) break;
+      }
+      return flag;
+    };
+    if (state.multiple) {
+      var nodes = api.getFlattedNodes(leafOnly);
+      return nodes.filter(function (node) {
+        return node.checked && isCascaderChecked(node.value, cascaderCheckedValue);
+      });
+    }
+    return isEmpty(state.checkedValue) ? [] : [api.getNodeByValue(state.checkedValue)];
+  };
+};
+export var clearCheckedNodes = function clearCheckedNodes(_ref14) {
+  var api = _ref14.api,
+    state = _ref14.state;
+  return function () {
+    var _state$config = state.config,
+      multiple = _state$config.multiple,
+      emitPath = _state$config.emitPath;
+    if (multiple) {
+      api.getCheckedNodes(state.leafOnly).filter(function (node) {
+        return !node.isDisabled;
+      }).forEach(function (node) {
+        return node.doCheck(false);
+      });
+      api.calculateMultiCheckedValue();
+    } else {
+      state.checkedValue = emitPath ? [] : null;
+    }
+  };
+};
+export var isLeaf = function isLeaf() {
+  return function (el) {
+    return !el.getAttribute('data-owns');
+  };
+};
+export var getSibling = function getSibling(el, distance) {
+  var parentNode = el.parentNode;
+  if (parentNode) {
+    var siblings = parentNode.querySelectorAll(CASCADER.CascaderNodeTab);
+    var index = Array.prototype.indexOf.call(siblings, el);
+    return siblings[index + distance] || null;
+  }
+  return null;
+};
+export var valueEquals = function valueEquals(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (!(b instanceof Array)) {
+    return false;
+  }
+  if (!(a instanceof Array)) {
+    return false;
+  }
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (var i = 0, len = a.length; i !== len; ++i) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+};

package/cascader-panel/node.js

@@ -0,0 +1,199 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import { isEqual } from '@opentiny/vue-renderless/common/object';
+import { capitalize } from '@opentiny/vue-renderless/common/string';
+import { isNull } from '@opentiny/vue-renderless/common/type';
+var uid = 0;
+var Node = function () {
+  function Node(data, config, parentNode) {
+    _classCallCheck(this, Node);
+    Object.assign(this, {
+      data: data,
+      config: config,
+      uid: uid++
+    });
+    this.parent = parentNode || null;
+    this.level = !this.parent ? 1 : this.parent.level + 1;
+    this.initState();
+    this.initChildren();
+  }
+  _createClass(Node, [{
+    key: "initState",
+    value: function initState() {
+      var _this$config = this.config,
+        value = _this$config.value,
+        label = _this$config.label;
+      this.value = this.data[value];
+      this.label = this.data[label];
+      this.pathNodes = this.calculatePathNodes();
+      this.path = this.pathNodes.map(function (node) {
+        return node.value;
+      });
+      this.pathLabels = this.pathNodes.map(function (node) {
+        return node.label;
+      });
+      Object.assign(this, {
+        loading: false,
+        loaded: false
+      });
+    }
+  }, {
+    key: "initChildren",
+    value: function initChildren() {
+      var _this = this;
+      var config = this.config;
+      var childrenKey = config.children;
+      var childrenData = this.data[childrenKey];
+      this.hasChildren = Array.isArray(childrenData);
+      this.children = (childrenData || []).map(function (child) {
+        return new Node(child, config, _this);
+      });
+    }
+  }, {
+    key: "isLeaf",
+    get: function get() {
+      var data = this.data,
+        loaded = this.loaded,
+        hasChildren = this.hasChildren,
+        children = this.children,
+        config = this.config;
+      var lazy = config.lazy,
+        leaf = config.leaf;
+      if (lazy) {
+        var leafValue = data[leaf];
+        var isLeaf = !isNull(leafValue) ? leafValue : loaded ? !children.length : false;
+        this.hasChildren = !isLeaf;
+        return isLeaf;
+      }
+      return !hasChildren;
+    }
+  }, {
+    key: "isDisabled",
+    get: function get() {
+      var data = this.data,
+        parent = this.parent,
+        config = this.config;
+      var checkStrictly = config.checkStrictly,
+        disabled = config.disabled;
+      var disabledKey = disabled;
+      return data[disabledKey] || !checkStrictly && parent && parent.isDisabled;
+    }
+  }, {
+    key: "calculatePathNodes",
+    value: function calculatePathNodes() {
+      var nodes = [this];
+      var parentNode = this.parent;
+      while (parentNode) {
+        nodes.unshift(parentNode);
+        parentNode = parentNode.parent;
+      }
+      return nodes;
+    }
+  }, {
+    key: "getValue",
+    value: function getValue() {
+      return this.value;
+    }
+  }, {
+    key: "getPath",
+    value: function getPath() {
+      return this.path;
+    }
+  }, {
+    key: "getValueByOption",
+    value: function getValueByOption() {
+      return this.config.emitPath ? this.getPath() : this.getValue();
+    }
+  }, {
+    key: "getText",
+    value: function getText(allLevels, separator) {
+      return allLevels ? this.pathLabels.join(separator) : this.label;
+    }
+  }, {
+    key: "isSameNode",
+    value: function isSameNode(checkedValue) {
+      var value = this.getValueByOption();
+      var isMultiple = this.config.multiple && Array.isArray(checkedValue);
+      return isMultiple ? checkedValue.some(function (val) {
+        return isEqual(val, value);
+      }) : isEqual(checkedValue, value);
+    }
+  }, {
+    key: "emit",
+    value: function emit(eventName) {
+      var parent = this.parent;
+      var handlerName = "onChild".concat(capitalize(eventName));
+      if (parent) {
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
+        }
+        parent[handlerName] && parent[handlerName].apply(parent, args);
+        parent.emit.apply(parent, [eventName].concat(args));
+      }
+    }
+  }, {
+    key: "broadcast",
+    value: function broadcast(eventName) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+      var handlerName = "onParent".concat(capitalize(eventName));
+      this.children.forEach(function (child) {
+        if (child) {
+          child.broadcast.apply(child, [eventName].concat(args));
+          child[handlerName] && child[handlerName].apply(child, args);
+        }
+      });
+    }
+  }, {
+    key: "onParentCheck",
+    value: function onParentCheck(checked) {
+      !this.isDisabled && this.setCheckState(checked);
+    }
+  }, {
+    key: "onChildCheck",
+    value: function onChildCheck() {
+      var children = this.children;
+      var validChildren = children.filter(function (child) {
+        return !child.isDisabled;
+      });
+      var checked = validChildren.length ? validChildren.every(function (child) {
+        return child.checked;
+      }) : false;
+      this.setCheckState(checked);
+    }
+  }, {
+    key: "syncCheckState",
+    value: function syncCheckState(checkedValue) {
+      var value = this.getValueByOption();
+      var checked = this.isSameNode(checkedValue, value);
+      this.doCheck(checked);
+    }
+  }, {
+    key: "setCheckState",
+    value: function setCheckState(checked) {
+      var totalNum = this.children.length;
+      var checkedNum = this.children.reduce(function (prevChild, nextChild) {
+        var num = nextChild.checked ? 1 : nextChild.indeterminate ? 0.5 : 0;
+        return prevChild + num;
+      }, 0);
+      this.checked = checked;
+      this.indeterminate = checkedNum !== totalNum && checkedNum > 0;
+    }
+  }, {
+    key: "doCheck",
+    value: function doCheck(isChecked) {
+      if (this.checked !== isChecked) {
+        if (this.config.checkStrictly) {
+          this.checked = isChecked;
+        } else {
+          this.broadcast('check', isChecked);
+          this.setCheckState(isChecked);
+          this.emit('check');
+        }
+      }
+    }
+  }]);
+  return Node;
+}();
+export { Node as default };

package/cascader-panel/store.js

@@ -0,0 +1,80 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import Node from './node';
+import { valueEquals, coerceTruthyValueToArray as toArray } from './index';
+var flatNodes = function flatNodes(data, leafOnly) {
+  return data.reduce(function (prev, node) {
+    if (node.isLeaf) {
+      prev.push(node);
+    } else {
+      !leafOnly && prev.push(node);
+      prev = prev.concat(flatNodes(node.children, leafOnly));
+    }
+    return prev;
+  }, []);
+};
+var Store = function () {
+  function Store(data, config) {
+    _classCallCheck(this, Store);
+    this.config = config;
+    this.initNodes(data);
+  }
+  _createClass(Store, [{
+    key: "getNodes",
+    value: function getNodes() {
+      return this.nodes;
+    }
+  }, {
+    key: "initNodes",
+    value: function initNodes(data) {
+      var _this = this;
+      data = toArray(data);
+      this.nodes = data.map(function (nodeData) {
+        return new Node(nodeData, _this.config);
+      });
+      this.flattedNodes = this.getFlattedNodes(false, false);
+      this.leafNodes = this.getFlattedNodes(true, false);
+    }
+  }, {
+    key: "appendNode",
+    value: function appendNode(nodeData, parentNode) {
+      var config = this.config,
+        nodes = this.nodes;
+      var node = new Node(nodeData, config, parentNode);
+      var children = parentNode ? parentNode.children : nodes;
+      children.push(node);
+    }
+  }, {
+    key: "appendNodes",
+    value: function appendNodes(nodeDataList, parentNode) {
+      var _this2 = this;
+      nodeDataList = toArray(nodeDataList);
+      nodeDataList.forEach(function (nodeData) {
+        return _this2.appendNode(nodeData, parentNode);
+      });
+    }
+  }, {
+    key: "getFlattedNodes",
+    value: function getFlattedNodes(leafOnly) {
+      var cached = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var leafNodes = this.leafNodes,
+        flattedNodes = this.flattedNodes;
+      var cachedNodes = leafOnly ? leafNodes : flattedNodes;
+      return cached ? cachedNodes : flatNodes(this.nodes, leafOnly);
+    }
+  }, {
+    key: "getNodeByValue",
+    value: function getNodeByValue(value) {
+      if (value) {
+        var lazy = !this.config.lazy;
+        var nodes = this.getFlattedNodes(false, lazy).filter(function (node) {
+          return valueEquals(node.path, value) || node.value === value;
+        });
+        return nodes && nodes.length ? nodes[0] : null;
+      }
+      return null;
+    }
+  }]);
+  return Store;
+}();
+export { Store as default };