@opentiny/vue-renderless 3.1.0-alpha.0

package/cascader/vue.js

@@ -0,0 +1,342 @@
+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 { getConfig, deleteTag, getCheckedNodes, updateStyle, handleSuggestionClick, handleDelete, handleSuggestionKeyDown, getSuggestions, handleExpandChange, computePresentText, focusFirstNode, handleClear, handleInput, handleBlur, handleFocus, handleKeyDown, handleDropdownLeave, toggleDropDownVisible, computePresentTags, selfMounted, watchCheckedValue, computClearVisible, computePresentContent, watchValue, setInputHeightToTag, presentTextHandler, handleBeforeUpdate } from './index';
+import { removeResizeListener } from '@opentiny/vue-renderless/common/deps/resize-event';
+import userPopper from '@opentiny/vue-renderless/common/deps/vue-popper';
+import { DATEPICKER } from '@opentiny/vue-renderless/common';
+export var api = ['state', 'getCheckedNodes', 'computePresentText', 'handleSuggestionClick', 'handleSuggestionKeyDown', 'handleExpandChange', 'handleDropdownLeave', 'handleDelete', 'deleteTag', 'handleClear', 'handleInput', 'handleBlur', 'handleFocus', 'toggleDropDownVisible', 'handleKeyDown'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    props = _ref.props,
+    computed = _ref.computed,
+    parent = _ref.parent,
+    api = _ref.api,
+    refs = _ref.refs,
+    t = _ref.t,
+    constants = _ref.constants;
+  var state = reactive({
+    dropDownVisible: false,
+    checkedValue: props.modelValue || null,
+    inputHover: false,
+    inputValue: null,
+    presentText: null,
+    presentTags: [],
+    checkedNodes: [],
+    filtering: false,
+    suggestions: [],
+    inputInitialHeight: 0,
+    pressDeleteCount: 0,
+    realSize: computed(function () {
+      return props.size;
+    }),
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    disabled: computed(function () {
+      return props.disabled || state.formDisabled;
+    }),
+    tagSize: computed(function () {
+      return ~['small', 'mini'].indexOf(state.realSize) ? 'mini' : 'small';
+    }),
+    isDisabled: computed(function () {
+      return state.disabled;
+    }),
+    config: computed(function () {
+      return api.getConfig();
+    }),
+    multiple: computed(function () {
+      return state.config.multiple;
+    }),
+    leafOnly: computed(function () {
+      return !state.config.checkStrictly;
+    }),
+    readonly: computed(function () {
+      return !props.filterable || state.multiple;
+    }),
+    clearBtnVisible: computed(function () {
+      return api.computClearVisible();
+    }),
+    panel: computed(function () {
+      return refs.panel;
+    }),
+    placeholder: computed(function () {
+      return props.placeholder || t(constants.placeholder);
+    }),
+    inputValues: computed(function () {
+      return state.multiple ? state.presentText : state.inputValue;
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    constants = _ref2.constants,
+    dispatch = _ref2.dispatch,
+    emit = _ref2.emit,
+    refs = _ref2.refs,
+    props = _ref2.props,
+    updatePopper = _ref2.updatePopper,
+    nextTick = _ref2.nextTick,
+    parent = _ref2.parent;
+  Object.assign(api, {
+    state: state,
+    handleBlur: handleBlur({
+      constants: constants,
+      dispatch: dispatch,
+      emit: emit,
+      state: state
+    }),
+    handleFocus: handleFocus(emit),
+    handleClear: handleClear(state),
+    getCheckedNodes: getCheckedNodes(state),
+    deleteTag: deleteTag({
+      emit: emit,
+      state: state
+    }),
+    handleDropdownLeave: handleDropdownLeave(state),
+    focusFirstNode: focusFirstNode({
+      refs: refs,
+      state: state
+    }),
+    computClearVisible: computClearVisible({
+      props: props,
+      state: state
+    }),
+    updateStyle: updateStyle({
+      parent: parent,
+      refs: refs,
+      state: state,
+      updatePopper: updatePopper
+    }),
+    getSuggestions: getSuggestions({
+      nextTick: nextTick,
+      props: props,
+      state: state,
+      updatePopper: updatePopper
+    }),
+    handleExpandChange: handleExpandChange({
+      constants: constants,
+      emit: emit,
+      dispatch: dispatch,
+      nextTick: nextTick,
+      state: state,
+      updatePopper: updatePopper
+    }),
+    getConfig: getConfig({
+      parent: parent,
+      props: props
+    }),
+    setInputHeightToTag: setInputHeightToTag({
+      nextTick: nextTick,
+      parent: parent
+    }),
+    handleSuggestionClick: handleSuggestionClick({
+      api: api,
+      state: state
+    }),
+    handleDelete: handleDelete({
+      api: api,
+      state: state
+    }),
+    computePresentText: computePresentText({
+      props: props,
+      state: state
+    }),
+    handleSuggestionKeyDown: handleSuggestionKeyDown({
+      api: api
+    }),
+    handleInput: handleInput({
+      api: api,
+      state: state,
+      refs: refs
+    }),
+    handleKeyDown: handleKeyDown({
+      api: api
+    }),
+    watchValue: watchValue({
+      api: api,
+      state: state
+    }),
+    computePresentTags: computePresentTags({
+      api: api,
+      props: props,
+      state: state
+    }),
+    computePresentContent: computePresentContent({
+      api: api,
+      state: state
+    }),
+    watchCheckedValue: watchCheckedValue({
+      api: api,
+      emit: emit,
+      state: state
+    }),
+    toggleDropDownVisible: toggleDropDownVisible({
+      emit: emit,
+      nextTick: nextTick,
+      refs: refs,
+      state: state,
+      updatePopper: updatePopper
+    }),
+    selfMounted: selfMounted({
+      api: api,
+      parent: parent,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    handleBeforeUpdate: handleBeforeUpdate({
+      props: props,
+      api: api
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    state = _ref3.state,
+    api = _ref3.api,
+    props = _ref3.props,
+    nextTick = _ref3.nextTick,
+    updatePopper = _ref3.updatePopper;
+  watch(function () {
+    return state.disabled;
+  }, api.computePresentContent);
+  watch(function () {
+    return props.modelValue;
+  }, api.watchValue);
+  watch(function () {
+    return state.checkedValue;
+  }, api.watchCheckedValue);
+  watch(function () {
+    return props.options;
+  }, function () {
+    return nextTick(api.computePresentContent);
+  }, {
+    deep: true,
+    immediate: true
+  });
+  watch(function () {
+    return state.presentText;
+  }, function (value) {
+    return presentTextHandler({
+      state: state,
+      value: value
+    });
+  });
+  watch(function () {
+    return state.presentTags;
+  }, function (value, oldvalue) {
+    state.multiple && (value.length || oldvalue.length) && nextTick(function () {
+      return api.updateStyle();
+    });
+  });
+  watch(function () {
+    return state.filtering;
+  }, function () {
+    return nextTick(function () {
+      return updatePopper();
+    });
+  });
+  watch(function () {
+    return state.multiple;
+  }, api.setInputHeightToTag);
+  watch(function () {
+    return state.dropDownVisible;
+  }, function (value) {
+    return value && setTimeout(function () {
+      return updatePopper();
+    });
+  });
+  watch(function () {
+    return Array.isArray(state.checkedValue) && state.checkedValue.length;
+  }, function () {
+    return setTimeout(function () {
+      return updatePopper();
+    });
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onMounted = _ref4.onMounted,
+    onBeforeUnmount = _ref4.onBeforeUnmount,
+    onDeactivated = _ref4.onDeactivated,
+    onUpdated = _ref4.onUpdated,
+    onBeforeUpdate = _ref4.onBeforeUpdate,
+    reactive = _ref4.reactive,
+    toRefs = _ref4.toRefs,
+    watch = _ref4.watch,
+    inject = _ref4.inject,
+    provide = _ref4.provide;
+  var t = _ref5.t,
+    refs = _ref5.refs,
+    emit = _ref5.emit,
+    nextTick = _ref5.nextTick,
+    constants = _ref5.constants,
+    parent = _ref5.parent,
+    slots = _ref5.slots,
+    dispatch = _ref5.dispatch;
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  var _userPopper = userPopper({
+      reactive: reactive,
+      watch: watch,
+      emit: emit,
+      props: _objectSpread(_objectSpread({}, props), {}, {
+        placement: DATEPICKER.PlacementMap.left,
+        popperOptions: {
+          boundariesPadding: 0,
+          gpuAcceleration: false
+        },
+        visibleArrow: true,
+        offset: 0,
+        boundariesPadding: 5,
+        arrowOffset: 35
+      }),
+      toRefs: toRefs,
+      refs: refs,
+      slots: slots,
+      nextTick: nextTick,
+      onBeforeUnmount: onBeforeUnmount,
+      onDeactivated: onDeactivated
+    }),
+    updatePopper = _userPopper.updatePopper;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    props: props,
+    computed: computed,
+    parent: parent,
+    api: api,
+    refs: refs,
+    t: t,
+    constants: constants
+  });
+  initApi({
+    api: api,
+    state: state,
+    constants: constants,
+    dispatch: dispatch,
+    emit: emit,
+    refs: refs,
+    props: props,
+    updatePopper: updatePopper,
+    nextTick: nextTick,
+    parent: parent
+  });
+  initWatch({
+    watch: watch,
+    state: state,
+    api: api,
+    props: props,
+    nextTick: nextTick,
+    updatePopper: updatePopper
+  });
+  onBeforeUpdate(api.handleBeforeUpdate);
+  onUpdated(api.updateStyle);
+  onMounted(api.selfMounted);
+  onBeforeUnmount(function () {
+    return removeResizeListener(parent.$el, api.updateStyle);
+  });
+  return api;
+};

package/cascader-menu/index.js

@@ -0,0 +1,41 @@
+export var handleExpand = function handleExpand(state) {
+  return function (e) {
+    return state.activeNode = e.target;
+  };
+};
+export var handleMouseMove = function handleMouseMove(_ref) {
+  var api = _ref.api,
+    parent = _ref.parent,
+    refs = _ref.refs,
+    state = _ref.state,
+    svg = _ref.svg;
+  return function (e) {
+    var hoverZone = refs.hoverZone;
+    if (!state.activeNode || !hoverZone) {
+      return;
+    }
+    if (state.activeNode.contains(e.target)) {
+      clearTimeout(state.hoverTimer);
+      var _refs$cascaderMenu$$p = refs.cascaderMenu.$parent.$el.getBoundingClientRect(),
+        left = _refs$cascaderMenu$$p.left;
+      var startX = e.clientX - left;
+      var _refs$cascaderMenu$$p2 = refs.cascaderMenu.$parent.$el,
+        offsetWidth = _refs$cascaderMenu$$p2.offsetWidth,
+        offsetHeight = _refs$cascaderMenu$$p2.offsetHeight;
+      var top = state.activeNode.offsetTop;
+      var bottom = top + state.activeNode.offsetHeight;
+      hoverZone.innerHTML = "\n      ".concat(svg).concat(startX, " ").concat(top, " L").concat(offsetWidth, " 0 V").concat(top, " Z\" />\n      ").concat(svg).concat(startX, " ").concat(bottom, " L").concat(offsetWidth, " ").concat(offsetHeight, " V").concat(bottom, " Z\" />\n    ");
+    } else if (!state.hoverTimer) {
+      state.hoverTimer = setTimeout(api.clearHoverZone, parent.state.config.hoverThreshold);
+    }
+  };
+};
+export var clearHoverZone = function clearHoverZone(refs) {
+  return function () {
+    var hoverZone = refs.hoverZone;
+    if (!hoverZone) {
+      return;
+    }
+    hoverZone.innerHTML = '';
+  };
+};

package/cascader-menu/vue.js

@@ -0,0 +1,36 @@
+import { handleExpand, handleMouseMove, clearHoverZone } from './index';
+import { CASCADER } from '@opentiny/vue-renderless/common';
+import { random } from '@opentiny/vue-renderless/common/string';
+export var api = ['state', 'handleMouseMove', 'handleExpand'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive;
+  var vm = _ref2.vm,
+    parent = _ref2.parent;
+  var refs = vm.$refs;
+  var api = {};
+  var state = reactive({
+    activeNode: null,
+    hoverTimer: null,
+    id: Math.floor(random() * 10000),
+    isEmpty: computed(function () {
+      return !props.nodes.length;
+    }),
+    menuId: computed(function () {
+      return "".concat(CASCADER.MenuConnector).concat(state.id, "-").concat(props.index);
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    clearHoverZone: clearHoverZone(refs),
+    handleExpand: handleExpand(state),
+    handleMouseMove: handleMouseMove({
+      api: api,
+      parent: parent,
+      refs: refs,
+      state: state,
+      svg: CASCADER.SvgStr
+    })
+  });
+  return api;
+};

package/cascader-node/index.js

@@ -0,0 +1,63 @@
+export var comptCheckPath = function comptCheckPath(_ref) {
+  var api = _ref.api,
+    parent = _ref.parent,
+    state = _ref.state;
+  return function () {
+    if (!state.config.checkStrictly) {
+      return false;
+    }
+    return parent.state.checkedNodePaths.some(function (checkedPath) {
+      return api.isInPath(checkedPath);
+    });
+  };
+};
+export var handleExpand = function handleExpand(_ref2) {
+  var api = _ref2.api,
+    parent = _ref2.parent,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    var _state$config = state.config,
+      multiple = _state$config.multiple,
+      checkStrictly = _state$config.checkStrictly;
+    if (!checkStrictly && state.isDisabled || props.node.loading) {
+      return;
+    }
+    if (state.config.lazy && !props.node.loaded) {
+      parent.lazyLoad(props.node, function () {
+        if (!state.isLeaf) api.handleExpand();
+        if (multiple) {
+          var checked = state.isLeaf ? props.node.checked : false;
+          api.handleMultiCheckChange(checked);
+        }
+      });
+    } else {
+      parent.handleExpand(props.node);
+    }
+  };
+};
+export var handleCheckChange = function handleCheckChange(_ref3) {
+  var api = _ref3.api,
+    parent = _ref3.parent,
+    dispatch = _ref3.dispatch,
+    state = _ref3.state;
+  return function () {
+    parent.handleCheckChange(state.value);
+    api.handleExpand();
+    dispatch('TinyCascaderPanel', 'close', false);
+  };
+};
+export var handleMultiCheckChange = function handleMultiCheckChange(_ref4) {
+  var parent = _ref4.parent,
+    props = _ref4.props;
+  return function (checked) {
+    props.node.doCheck(checked);
+    parent.calculateMultiCheckedValue();
+  };
+};
+export var isInPath = function isInPath(props) {
+  return function (pathNodes) {
+    var selectedPathNode = pathNodes[props.node.level - 1] || {};
+    return selectedPathNode.uid === props.node.uid;
+  };
+};

package/cascader-node/vue.js

@@ -0,0 +1,62 @@
+import { comptCheckPath, handleExpand, isInPath, handleCheckChange, handleMultiCheckChange } from './index';
+export var api = ['state', 'handleMultiCheckChange', 'handleCheckChange', 'handleExpand'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive,
+    inject = _ref.inject;
+  var dispatch = _ref2.dispatch;
+  var parent = inject('panel');
+  var api = {};
+  var state = reactive({
+    config: computed(function () {
+      return parent.state.config;
+    }),
+    isLeaf: computed(function () {
+      return props.node.isLeaf;
+    }),
+    isDisabled: computed(function () {
+      return props.node.isDisabled;
+    }),
+    checkedValue: computed(function () {
+      return parent.state.checkedValue;
+    }),
+    isChecked: computed(function () {
+      return props.node.isSameNode(state.checkedValue);
+    }),
+    inActivePath: computed(function () {
+      return api.isInPath(parent.state.activePath);
+    }),
+    inCheckedPath: computed(function () {
+      return api.comptCheckPath();
+    }),
+    value: computed(function () {
+      return props.node.getValueByOption();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    isInPath: isInPath(props),
+    handleExpand: handleExpand({
+      api: api,
+      props: props,
+      parent: parent,
+      state: state
+    }),
+    comptCheckPath: comptCheckPath({
+      api: api,
+      parent: parent,
+      state: state
+    }),
+    handleCheckChange: handleCheckChange({
+      api: api,
+      parent: parent,
+      dispatch: dispatch,
+      state: state
+    }),
+    handleMultiCheckChange: handleMultiCheckChange({
+      parent: parent,
+      props: props
+    })
+  });
+  return api;
+};