@opentiny/vue-renderless 3.1.0-alpha.0

package/cascader/index.js

@@ -0,0 +1,511 @@
+import _toArray from "@babel/runtime/helpers/toArray";
+import browser from '@opentiny/vue-renderless/common/browser';
+import { isNull } from '@opentiny/vue-renderless/common/type';
+import debounce from '@opentiny/vue-renderless/common/deps/debounce';
+import { isEqual } from '@opentiny/vue-renderless/common/object';
+import { addResizeListener } from '@opentiny/vue-renderless/common/deps/resize-event';
+import { KEY_CODE, CASCADER } from '@opentiny/vue-renderless/common';
+var initMigratingProps = function initMigratingProps() {
+  return {
+    expandTrigger: {
+      newProp: CASCADER.PropsExpandTri,
+      type: String
+    },
+    changeOnSelect: {
+      newProp: CASCADER.PropsCheckStric,
+      type: Boolean
+    },
+    hoverThreshold: {
+      newProp: CASCADER.PropsHover,
+      type: Number
+    }
+  };
+};
+var kebabCase = function kebabCase(str) {
+  var hyphenateRE = /([^-])([A-Z])/g;
+  return str.replace(hyphenateRE, '$1-$2').replace(hyphenateRE, '$1-$2').toLowerCase();
+};
+export var getConfig = function getConfig(_ref) {
+  var parent = _ref.parent,
+    props = _ref.props;
+  return function () {
+    var config = props.props || {};
+    var $attrs = parent.$attrs;
+    var migratingProps = initMigratingProps();
+    Object.keys(migratingProps).forEach(function (oldProp) {
+      var _migratingProps$oldPr = migratingProps[oldProp],
+        newProp = _migratingProps$oldPr.newProp,
+        type = _migratingProps$oldPr.type;
+      var oldValue = $attrs[oldProp] || $attrs[kebabCase(oldProp)];
+      if (isNull(config[newProp]) && !isNull(oldProp)) {
+        if (oldValue === '' && type === Boolean) {
+          oldValue = true;
+        }
+        config[newProp] = oldValue;
+      }
+    });
+    return config;
+  };
+};
+export var computClearVisible = function computClearVisible(_ref2) {
+  var props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    if (!props.clearable || state.isDisabled || state.filtering || !state.inputHover) {
+      return false;
+    }
+    return state.multiple ? !!state.checkedNodes.filter(function (node) {
+      return !node.isDisabled;
+    }).length : !!state.presentText;
+  };
+};
+export var computePresentContent = function computePresentContent(_ref3) {
+  var api = _ref3.api,
+    state = _ref3.state;
+  return function () {
+    if (state.config.multiple) {
+      api.computePresentTags();
+      state.presentText = state.presentTags.length ? ' ' : null;
+    } else {
+      api.computePresentText();
+    }
+  };
+};
+export var watchValue = function watchValue(_ref4) {
+  var api = _ref4.api,
+    state = _ref4.state;
+  return function (value) {
+    if (!isEqual(value, state.checkedValue)) {
+      state.checkedValue = value;
+      api.computePresentContent();
+    }
+  };
+};
+export var watchCheckedValue = function watchCheckedValue(_ref5) {
+  var api = _ref5.api,
+    emit = _ref5.emit,
+    state = _ref5.state;
+  return function (value) {
+    var _state$config = state.config,
+      checkStrictly = _state$config.checkStrictly,
+      multiple = _state$config.multiple;
+    api.computePresentContent();
+    if (!multiple && !checkStrictly && state.dropDownVisible) {
+      api.toggleDropDownVisible(false);
+    }
+    emit('update:modelValue', value);
+    emit('change', value);
+    setTimeout(api.updateStyle);
+  };
+};
+export var isEmpty = function isEmpty(val) {
+  if (isNull(val)) return true;
+  if (typeof val === 'boolean') {
+    return false;
+  }
+  if (typeof val === 'number') {
+    return !val;
+  }
+  if (val instanceof Error) {
+    return val.message === '';
+  }
+  var type = Object.prototype.toString.call(val);
+  if (~['[object String]', '[object Array]'].indexOf(type)) {
+    return !val.length;
+  }
+  if (~['[object File]', '[object Map]', '[object Set]'].indexOf(type)) {
+    return !val.size;
+  }
+  if (type === '[object Object]') {
+    return !Object.keys(val).length;
+  }
+  return false;
+};
+export var selfMounted = function selfMounted(_ref6) {
+  var api = _ref6.api,
+    parent = _ref6.parent,
+    props = _ref6.props,
+    refs = _ref6.refs,
+    state = _ref6.state;
+  return function () {
+    var input = refs.input;
+    var inputSizeMap = {
+      medium: 36,
+      small: 32,
+      mini: 28
+    };
+    input.$parent.popperElm = refs.popper;
+    if (input && input.$el) {
+      state.inputInitialHeight = input.$el.offsetHeight || inputSizeMap[state.realSize] || 30;
+    }
+    if (!isEmpty(props.modelValue)) {
+      api.computePresentContent();
+    }
+    api.filterHandler = debounce(props.debounce, function () {
+      if (!state.inputValue) {
+        state.filtering = false;
+        return;
+      }
+      var before = props.beforeFilter(state.inputValue);
+      if (before && before.then) {
+        before.then(api.getSuggestions);
+      } else if (before !== false) {
+        api.getSuggestions();
+      } else {
+        state.filtering = false;
+      }
+    });
+    addResizeListener(parent.$el, api.updateStyle);
+  };
+};
+export var toggleDropDownVisible = function toggleDropDownVisible(_ref7) {
+  var emit = _ref7.emit,
+    nextTick = _ref7.nextTick,
+    refs = _ref7.refs,
+    state = _ref7.state,
+    updatePopper = _ref7.updatePopper;
+  return function (visible) {
+    if (state.isDisabled) return;
+    var input = refs.input;
+    visible = !isNull(visible) ? visible : !state.dropDownVisible;
+    if (visible !== state.dropDownVisible) {
+      state.dropDownVisible = visible;
+      if (visible) {
+        nextTick(function () {
+          updatePopper();
+          state.panel.scrollIntoView();
+        });
+      }
+      input && input.getInput && input.getInput().setAttribute('aria-expanded', visible);
+      emit('visible-change', visible);
+    }
+  };
+};
+export var handleDropdownLeave = function handleDropdownLeave(state) {
+  return function () {
+    state.filtering = false;
+    state.inputValue = state.presentText;
+  };
+};
+export var handleKeyDown = function handleKeyDown(_ref8) {
+  var api = _ref8.api;
+  return function (event) {
+    switch (event.keyCode) {
+      case KEY_CODE.Enter:
+        api.toggleDropDownVisible();
+        break;
+      case KEY_CODE.ArrowDown:
+        api.toggleDropDownVisible(true);
+        api.focusFirstNode();
+        event.preventDefault();
+        break;
+      case KEY_CODE.Escape:
+      case KEY_CODE.Tab:
+        api.toggleDropDownVisible(false);
+        break;
+      default:
+        break;
+    }
+  };
+};
+export var handleFocus = function handleFocus(emit) {
+  return function (e) {
+    emit('focus', e);
+  };
+};
+export var handleBlur = function handleBlur(_ref9) {
+  var constants = _ref9.constants,
+    dispatch = _ref9.dispatch,
+    emit = _ref9.emit,
+    state = _ref9.state;
+  return function (e) {
+    dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [state.multiple ? state.presentText : state.inputValue]);
+    emit('blur', e);
+  };
+};
+export var handleInput = function handleInput(_ref10) {
+  var api = _ref10.api,
+    state = _ref10.state,
+    refs = _ref10.refs;
+  return function (val, event) {
+    event = event || window.event;
+    if (!event) return;
+    var reference = refs.reference;
+    var key = 'init-flag';
+    var value = 'true';
+    var isIE = browser.name === 'ie';
+    if (isIE && reference.getAttribute(key) !== value && !event.target.value) {
+      reference.setAttribute(key, value);
+      return;
+    }
+    !state.dropDownVisible && api.toggleDropDownVisible(true);
+    state.presentText = val;
+    if (event && event.isComposing) return;
+    if (val) {
+      api.filterHandler();
+    } else {
+      state.filtering = false;
+    }
+  };
+};
+export var handleClear = function handleClear(state) {
+  return function () {
+    state.presentText = '';
+    state.panel.clearCheckedNodes();
+  };
+};
+export var handleExpandChange = function handleExpandChange(_ref11) {
+  var constants = _ref11.constants,
+    dispatch = _ref11.dispatch,
+    emit = _ref11.emit,
+    nextTick = _ref11.nextTick,
+    state = _ref11.state,
+    updatePopper = _ref11.updatePopper;
+  return function (value) {
+    nextTick(function () {
+      dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [state.multiple ? state.presentText : state.inputValue]);
+      updatePopper(state.panel.$parent);
+    });
+    emit('expand-change', value);
+    emit('active-item-change', value);
+  };
+};
+export var focusFirstNode = function focusFirstNode(_ref12) {
+  var refs = _ref12.refs,
+    state = _ref12.state;
+  return function () {
+    var popper = refs.popper,
+      suggestionPanel = refs.suggestionPanel;
+    var firstNode = null;
+    if (state.filtering && suggestionPanel) {
+      firstNode = suggestionPanel.$el.querySelector(CASCADER.SugItem);
+    } else {
+      var firstMenu = popper.querySelector(CASCADER.CascaderMenu);
+      firstNode = firstMenu.querySelector(CASCADER.CascaderNodeTab);
+    }
+    if (firstNode) {
+      firstNode.focus();
+      !state.filtering && firstNode.click();
+    }
+  };
+};
+export var computePresentText = function computePresentText(_ref13) {
+  var props = _ref13.props,
+    state = _ref13.state;
+  return function () {
+    if (!isEmpty(state.checkedValue)) {
+      var node = state.panel.getNodeByValue(state.checkedValue);
+      if (node && (state.config.checkStrictly || node.isLeaf)) {
+        state.presentText = node.getText(props.showAllLevels, props.separator);
+        return;
+      }
+    }
+    state.inputValue = null;
+    state.presentText = null;
+  };
+};
+export var computePresentTags = function computePresentTags(_ref14) {
+  var api = _ref14.api,
+    props = _ref14.props,
+    state = _ref14.state;
+  return function () {
+    var checkedNodes = api.getCheckedNodes(state.leafOnly);
+    var tags = [];
+    var genTag = function genTag(node) {
+      var text = node.getText(props.showAllLevels, props.separator);
+      var closable = !state.isDisabled && !node.isDisabled;
+      return {
+        node: node,
+        key: node.uid,
+        text: text,
+        hitState: false,
+        closable: closable
+      };
+    };
+    if (checkedNodes.length) {
+      var _checkedNodes = _toArray(checkedNodes),
+        first = _checkedNodes[0],
+        rest = _checkedNodes.slice(1);
+      var restCount = rest.length;
+      tags.push(genTag(first));
+      if (restCount) {
+        if (props.collapseTags) {
+          tags.push({
+            key: -1,
+            text: "+ ".concat(restCount),
+            closable: false
+          });
+        } else {
+          rest.forEach(function (node) {
+            return tags.push(genTag(node));
+          });
+        }
+      }
+    }
+    state.checkedNodes = checkedNodes;
+    state.presentTags = tags;
+  };
+};
+export var getSuggestions = function getSuggestions(_ref15) {
+  var nextTick = _ref15.nextTick,
+    props = _ref15.props,
+    state = _ref15.state,
+    updatePopper = _ref15.updatePopper;
+  return function () {
+    var filterMethod = null;
+    if (!(props.filterMethod && typeof props.filterMethod === 'function')) {
+      filterMethod = function filterMethod(node, keyword) {
+        return ~node.text.indexOf(keyword);
+      };
+    } else {
+      filterMethod = props.filterMethod;
+    }
+    var suggestions = state.panel.getFlattedNodes(state.leafOnly).filter(function (node) {
+      if (node.isDisabled) return false;
+      node.text = node.getText(props.showAllLevels, props.separator) || '';
+      return filterMethod(node, state.inputValue);
+    });
+    if (state.multiple) {
+      state.presentTags.forEach(function (tag) {
+        tag.hitState = false;
+      });
+    } else {
+      suggestions.forEach(function (node) {
+        node.checked = isEqual(state.checkedValue, node.getValueByOption());
+      });
+    }
+    state.filtering = true;
+    state.suggestions = suggestions;
+    nextTick(function () {
+      return updatePopper();
+    });
+  };
+};
+export var handleSuggestionKeyDown = function handleSuggestionKeyDown(_ref16) {
+  var api = _ref16.api;
+  return function (event) {
+    event = event || window.event;
+    if (!event) return;
+    var _event = event,
+      keyCode = _event.keyCode,
+      target = _event.target;
+    if (keyCode === KEY_CODE.Enter) {
+      target.click();
+    } else if (keyCode === KEY_CODE.ArrowUp) {
+      var prev = target.previousElementSibling;
+      prev && prev.focus();
+    } else if (keyCode === KEY_CODE.ArrowDown) {
+      var next = target.nextElementSibling;
+      next && next.focus();
+    } else if (~[KEY_CODE.Escape, KEY_CODE.Tab].indexOf(keyCode)) {
+      api.toggleDropDownVisible(false);
+    }
+  };
+};
+export var handleDelete = function handleDelete(_ref17) {
+  var api = _ref17.api,
+    state = _ref17.state;
+  return function () {
+    var lastIndex = state.presentTags.length - 1;
+    var lastTag = state.presentTags[lastIndex];
+    state.pressDeleteCount = state.inputValue ? 0 : state.pressDeleteCount + 1;
+    if (!lastTag) return;
+    if (state.pressDeleteCount) {
+      if (lastTag.hitState) {
+        api.deleteTag(lastIndex);
+      } else {
+        lastTag.hitState = true;
+      }
+    }
+  };
+};
+export var handleSuggestionClick = function handleSuggestionClick(_ref18) {
+  var api = _ref18.api,
+    state = _ref18.state;
+  return function (index) {
+    var targetNode = state.suggestions[index];
+    if (state.multiple) {
+      var checked = targetNode.checked;
+      targetNode.doCheck(!checked);
+      state.panel.calculateMultiCheckedValue();
+    } else {
+      state.checkedValue = targetNode.getValueByOption();
+      api.toggleDropDownVisible(false);
+    }
+  };
+};
+export var deleteTag = function deleteTag(_ref19) {
+  var emit = _ref19.emit,
+    state = _ref19.state;
+  return function (index) {
+    var val = state.checkedValue[index];
+    state.checkedValue = state.checkedValue.filter(function (n, i) {
+      return i !== index;
+    });
+    emit('remove-tag', val);
+  };
+};
+export var updateStyle = function updateStyle(_ref20) {
+  var parent = _ref20.parent,
+    refs = _ref20.refs,
+    state = _ref20.state,
+    updatePopper = _ref20.updatePopper;
+  return function () {
+    var $el = parent.$el;
+    var suggestionPanel = refs.suggestionPanel;
+    var inputInner = $el.querySelector(CASCADER.InputClass);
+    if (!inputInner) {
+      return;
+    }
+    var tags = $el.querySelector(CASCADER.TagClass);
+    var suggestionPanelEl = null;
+    if (suggestionPanel && (suggestionPanelEl = suggestionPanel.$el)) {
+      var suggestionList = suggestionPanelEl.querySelector(CASCADER.ListClass);
+      suggestionList.style.minWidth = inputInner.offsetWidth + 'px';
+    }
+    if (tags) {
+      var offsetHeight = tags.offsetHeight;
+      var height = Math.max(offsetHeight + 6, state.inputInitialHeight) + 'px';
+      inputInner.style.height = height;
+      updatePopper();
+    }
+  };
+};
+export var getCheckedNodes = function getCheckedNodes(state) {
+  return function (leafOnly) {
+    return state.panel.getCheckedNodes(leafOnly, state.checkedValue);
+  };
+};
+export var setInputHeightToTag = function setInputHeightToTag(_ref21) {
+  var nextTick = _ref21.nextTick,
+    parent = _ref21.parent;
+  return function () {
+    nextTick(function () {
+      var parentEl = parent.$el;
+      var height = parentEl.querySelector(CASCADER.TagClass).offsetHeight + 6 + 'px';
+      parentEl.querySelector(CASCADER.InputClass).style.height = height;
+    });
+  };
+};
+export var presentTextHandler = function presentTextHandler(_ref22) {
+  var state = _ref22.state,
+    value = _ref22.value;
+  if (state.inputValue) {
+    if (state.inputValue !== value) {
+      state.inputValue = value;
+    }
+  } else {
+    if (value) {
+      state.inputValue = value;
+    }
+  }
+};
+export var handleBeforeUpdate = function handleBeforeUpdate(_ref23) {
+  var props = _ref23.props,
+    api = _ref23.api;
+  return function () {
+    if (!isEmpty(props.modelValue)) {
+      api.computePresentContent();
+    }
+  };
+};