@opentiny/vue-renderless 3.1.0-alpha.0

package/slider/vue.js

@@ -0,0 +1,172 @@
+import { bindKeyDown, bindMouseDown, bindMouseMove, bindMouseUp, bindEvent, unBindEvent, bindResize, setTipStyle, getActiveButtonIndex, setActiveButtonValue, setBarStyle, setButtonStyle, initSlider, calculateValue, changeActiveValue, formatTipValue, getActiveButtonValue, displayTip, hideTip, autoSlider, customBeforeAppearHook, customAppearHook, customAfterAppearHook, watchActiveValue, watchModelValue } from './index';
+export var api = ['state', 'bindKeyDown', 'bindMouseDown', 'bindMouseMove', 'bindMouseUp', 'bindEvent', 'unBindEvent', 'bindResize', 'setTipStyle', 'getActiveButtonIndex', 'setActiveButtonValue', 'setBarStyle', 'setButtonStyle', 'initSlider', 'calculateValue', 'changeActiveValue', 'formatTipValue', 'getActiveButtonValue', 'displayTip', 'hideTip', 'autoSlider', 'customBeforeAppearHook', 'customAppearHook', 'customAfterAppearHook'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    props = _ref.props,
+    api = _ref.api,
+    parent = _ref.parent;
+  var state = reactive({
+    tipStyle: {},
+    barStyle: {},
+    moveStyle: [],
+    isDrag: false,
+    sliderSize: 0,
+    showTip: false,
+    activeValue: 0,
+    activeIndex: 0,
+    isDouble: false,
+    leftBtnValue: 0,
+    sliderOffset: {},
+    rightBtnValue: 0,
+    leftBtnStyle: {},
+    leftBtnPercent: 0,
+    leftBtnShow: true,
+    rightBtnStyle: '',
+    rightBtnPercent: 0,
+    rightBtnShow: false,
+    innerTrigger: false,
+    rangeDiff: computed(function () {
+      return props.max - props.min;
+    }),
+    tipValue: computed(function () {
+      return api.formatTipValue(state.activeValue);
+    }),
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    disabled: computed(function () {
+      return props.disabled || state.formDisabled;
+    })
+  });
+  return state;
+};
+export var renderless = function renderless(props, _ref2, _ref3) {
+  var computed = _ref2.computed,
+    onBeforeUnmount = _ref2.onBeforeUnmount,
+    onMounted = _ref2.onMounted,
+    reactive = _ref2.reactive,
+    watch = _ref2.watch,
+    inject = _ref2.inject;
+  var parent = _ref3.parent,
+    constants = _ref3.constants,
+    nextTick = _ref3.nextTick,
+    emit = _ref3.emit,
+    mode = _ref3.mode;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    props: props,
+    api: api,
+    parent: parent
+  });
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  Object.assign(api, {
+    state: state,
+    hideTip: hideTip(state),
+    formatTipValue: formatTipValue(props),
+    setBarStyle: setBarStyle({
+      props: props,
+      state: state
+    }),
+    changeActiveValue: changeActiveValue(state),
+    bindResize: bindResize({
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    setButtonStyle: setButtonStyle({
+      props: props,
+      state: state
+    }),
+    calculateValue: calculateValue({
+      props: props,
+      state: state
+    }),
+    getActiveButtonValue: getActiveButtonValue(state),
+    getActiveButtonIndex: getActiveButtonIndex({
+      constants: constants,
+      mode: mode,
+      state: state
+    }),
+    setTipStyle: setTipStyle({
+      constants: constants,
+      mode: mode,
+      emit: emit,
+      parent: parent,
+      props: props,
+      state: state
+    }),
+    customAfterAppearHook: customAfterAppearHook({
+      state: state,
+      props: props
+    }),
+    customBeforeAppearHook: customBeforeAppearHook(props),
+    customAppearHook: customAppearHook(),
+    bindEvent: bindEvent(api),
+    autoSlider: autoSlider(api),
+    unBindEvent: unBindEvent(api),
+    displayTip: displayTip({
+      api: api,
+      nextTick: nextTick,
+      state: state
+    }),
+    bindKeyDown: bindKeyDown({
+      api: api,
+      props: props,
+      state: state
+    }),
+    bindMouseUp: bindMouseUp({
+      api: api,
+      emit: emit,
+      state: state
+    }),
+    bindMouseMove: bindMouseMove({
+      api: api,
+      nextTick: nextTick,
+      state: state
+    }),
+    bindMouseDown: bindMouseDown({
+      api: api,
+      constants: constants,
+      mode: mode,
+      emit: emit,
+      state: state
+    }),
+    setActiveButtonValue: setActiveButtonValue({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    initSlider: initSlider({
+      api: api,
+      props: props,
+      state: state
+    }),
+    watchModelValue: watchModelValue({
+      api: api,
+      state: state
+    }),
+    watchActiveValue: watchActiveValue({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    })
+  });
+  watch(function () {
+    return props.modelValue;
+  }, api.watchModelValue, {
+    immediate: true
+  });
+  watch(function () {
+    return state.activeValue;
+  }, api.watchActiveValue, {
+    immediate: true
+  });
+  onMounted(api.bindEvent);
+  onBeforeUnmount(api.unBindEvent);
+  return api;
+};

package/split/index.js

@@ -0,0 +1,122 @@
+export var px2percent = function px2percent(_ref) {
+  var numerator = _ref.numerator,
+    denominator = _ref.denominator;
+  return parseFloat(numerator) / parseFloat(denominator);
+};
+export var getComputedThresholdValue = function getComputedThresholdValue(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    refs = _ref2.refs,
+    state = _ref2.state;
+  return function (type) {
+    var size = refs.outerWrapper[state.offsetSize];
+    if (state.valueIsPx) {
+      return typeof props[type] === 'string' ? props[type] : size * props[type];
+    } else {
+      return typeof props[type] === 'string' ? api.px2percent({
+        numerator: props[type],
+        denominator: size
+      }) : props[type];
+    }
+  };
+};
+export var getleftTopMin = function getleftTopMin(state) {
+  return function (_ref3) {
+    var oldvalue = _ref3.oldvalue,
+      newvalue = _ref3.newvalue;
+    return state.valueIsPx ? "".concat(Math.min(parseFloat(oldvalue), parseFloat(newvalue)), "px") : Math.min(oldvalue, newvalue);
+  };
+};
+export var getrightBottomMin = function getrightBottomMin(state) {
+  return function (_ref4) {
+    var oldvalue = _ref4.oldvalue,
+      newvalue = _ref4.newvalue;
+    return state.valueIsPx ? "".concat(Math.max(parseFloat(oldvalue), parseFloat(newvalue)), "px") : Math.max(oldvalue, newvalue);
+  };
+};
+export var getAnotherOffset = function getAnotherOffset(_ref5) {
+  var refs = _ref5.refs,
+    state = _ref5.state;
+  return function (value) {
+    return state.valueIsPx ? "".concat(refs.outerWrapper[state.offsetSize] - parseFloat(value), "px") : 1 - value;
+  };
+};
+export var handleMove = function handleMove(_ref6) {
+  var api = _ref6.api,
+    emit = _ref6.emit,
+    props = _ref6.props,
+    refs = _ref6.refs,
+    state = _ref6.state;
+  return function (event) {
+    var pageOffset = state.isHorizontal ? event.pageX : event.pageY;
+    var offset = pageOffset - state.initOffset;
+    var outerWidth = refs.outerWrapper[state.offsetSize];
+    var value = state.valueIsPx ? "".concat(parseFloat(state.oldOffset) + offset, "px") : api.px2percent({
+      numerator: outerWidth * state.oldOffset + offset,
+      denominator: outerWidth
+    });
+    var anotherValue = api.getAnotherOffset(value);
+    if (parseFloat(value) <= parseFloat(state.computedleftTopMin)) {
+      value = api.getrightBottomMin({
+        oldvalue: value,
+        newvalue: state.computedleftTopMin
+      });
+    }
+    if (parseFloat(anotherValue) <= parseFloat(state.computedrightBottomMin)) {
+      value = api.getAnotherOffset(api.getrightBottomMin({
+        oldvalue: anotherValue,
+        newvalue: state.computedrightBottomMin
+      }));
+    }
+    event.atMin = props.modelValue === state.computedleftTopMin;
+    event.atMax = state.valueIsPx ? api.getAnotherOffset(props.modelValue) === state.computedrightBottomMin : api.getAnotherOffset(props.modelValue).toFixed(5) === state.computedrightBottomMin.toFixed(5);
+    emit('update:modelValue', value);
+    emit('moving', event);
+  };
+};
+export var handleUp = function handleUp(_ref7) {
+  var api = _ref7.api,
+    emit = _ref7.emit,
+    off = _ref7.off,
+    state = _ref7.state;
+  return function () {
+    state.isMoving = false;
+    off(document, 'mousemove', api.handleMove);
+    off(document, 'mouseup', api.handleUp);
+    emit('moveend');
+  };
+};
+export var handleMousedown = function handleMousedown(_ref8) {
+  var api = _ref8.api,
+    emit = _ref8.emit,
+    on = _ref8.on,
+    props = _ref8.props,
+    state = _ref8.state;
+  return function (event) {
+    state.initOffset = state.isHorizontal ? event.pageX : event.pageY;
+    state.oldOffset = props.modelValue;
+    state.isMoving = true;
+    on(document, 'mousemove', api.handleMove);
+    on(document, 'mouseup', api.handleUp);
+    emit('movestart');
+  };
+};
+export var computeOffset = function computeOffset(_ref9) {
+  var api = _ref9.api,
+    nextTick = _ref9.nextTick,
+    props = _ref9.props,
+    refs = _ref9.refs,
+    state = _ref9.state;
+  return function () {
+    if (state.valueIsPx) {
+      nextTick(function () {
+        state.offset = api.px2percent({
+          numerator: props.modelValue,
+          denominator: refs.outerWrapper && refs.outerWrapper[state.offsetSize]
+        }) * 10000 / 100;
+      });
+    } else {
+      state.offset = props.modelValue * 10000 / 100;
+    }
+  };
+};

package/split/vue.js

@@ -0,0 +1,131 @@
+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 { px2percent, getComputedThresholdValue, getleftTopMin, getrightBottomMin, getAnotherOffset, handleMove, handleUp, handleMousedown, computeOffset } from './index';
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+export var api = ['state', 'handleMousedown'];
+export var useOffset = function useOffset(_ref) {
+  var nextTick = _ref.nextTick,
+    props = _ref.props,
+    refs = _ref.refs,
+    constants = _ref.constants,
+    hooks = _ref.hooks;
+  var api = {};
+  var computed = hooks.computed,
+    onMounted = hooks.onMounted,
+    onUnmounted = hooks.onUnmounted,
+    reactive = hooks.reactive,
+    toRefs = hooks.toRefs,
+    watch = hooks.watch;
+  var state = reactive({
+    offset: 0,
+    anotherOffset: computed(function () {
+      return 100 - state.offset;
+    }),
+    valueIsPx: computed(function () {
+      return typeof props.modelValue === 'string';
+    }),
+    isHorizontal: computed(function () {
+      return props.mode === constants.HORIZONTAL;
+    }),
+    offsetSize: computed(function () {
+      return state.isHorizontal ? 'offsetWidth' : 'offsetHeight';
+    })
+  });
+  Object.assign(api, {
+    px2percent: px2percent,
+    computeOffset: computeOffset({
+      api: api,
+      nextTick: nextTick,
+      props: props,
+      refs: refs,
+      state: state
+    })
+  });
+  watch(function () {
+    return props.modelValue;
+  }, api.computeOffset, {
+    immediate: true
+  });
+  onMounted(function () {
+    on(window, 'resize', api.computeOffset);
+  });
+  onUnmounted(function () {
+    off(window, 'resize', api.computeOffset);
+  });
+  return {
+    api: api,
+    state: toRefs(state)
+  };
+};
+export var renderless = function renderless(props, hooks, _ref2) {
+  var refs = _ref2.refs,
+    nextTick = _ref2.nextTick,
+    emit = _ref2.emit,
+    constants = _ref2.constants;
+  var api = {};
+  var computed = hooks.computed,
+    reactive = hooks.reactive;
+  var getUseOffset = useOffset({
+    nextTick: nextTick,
+    props: props,
+    refs: refs,
+    constants: constants,
+    hooks: hooks
+  });
+  var state = reactive(_objectSpread({
+    oldOffset: 0,
+    initOffset: 0,
+    isMoving: false,
+    prefix: constants.PREFIX,
+    computedleftTopMin: computed(function () {
+      return api.getComputedThresholdValue('leftTopMin');
+    }),
+    computedrightBottomMin: computed(function () {
+      return api.getComputedThresholdValue('rightBottomMin');
+    }),
+    wrapperClasses: computed(function () {
+      return ["".concat(state.prefix, "-wrapper"), state.isMoving ? 'no-select' : ''];
+    }),
+    paneClasses: computed(function () {
+      return ["".concat(state.prefix, "-pane"), _defineProperty({}, "".concat(state.prefix, "-pane-moving"), state.isMoving)];
+    })
+  }, getUseOffset.state));
+  Object.assign(api, _objectSpread(_objectSpread({
+    state: state,
+    getleftTopMin: getleftTopMin(state),
+    getrightBottomMin: getrightBottomMin(state)
+  }, getUseOffset.api), {}, {
+    handleUp: handleUp({
+      api: api,
+      emit: emit,
+      off: off,
+      state: state
+    }),
+    getAnotherOffset: getAnotherOffset({
+      refs: refs,
+      state: state
+    }),
+    handleMove: handleMove({
+      api: api,
+      emit: emit,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    handleMousedown: handleMousedown({
+      api: api,
+      emit: emit,
+      on: on,
+      props: props,
+      state: state
+    }),
+    getComputedThresholdValue: getComputedThresholdValue({
+      api: api,
+      props: props,
+      refs: refs,
+      state: state
+    })
+  }));
+  return api;
+};

package/steps/vue.js

@@ -0,0 +1,4 @@
+export var api = [];
+export var renderless = function renderless() {
+  return {};
+};

package/switch/index.js

@@ -0,0 +1,45 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { isNull } from '@opentiny/vue-renderless/common/type';
+export var toggle = function toggle(_ref) {
+  var emit = _ref.emit,
+    props = _ref.props,
+    state = _ref.state;
+  return function (event) {
+    event.preventDefault();
+    if (state.disabled) {
+      return false;
+    }
+    state.currentValue = state.currentValue === props.trueValue ? props.falseValue : props.trueValue;
+    emit('update:modelValue', state.currentValue);
+    emit('change', state.currentValue);
+  };
+};
+export var computedWarpClasses = function computedWarpClasses(_ref2) {
+  var prefixCls = _ref2.prefixCls,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    var _ref3;
+    return ["".concat(prefixCls), (_ref3 = {}, _defineProperty(_ref3, "".concat(prefixCls, "-checked"), state.currentValue === props.trueValue), _defineProperty(_ref3, "".concat(prefixCls, "-disabled"), state.disabled), _defineProperty(_ref3, "mini", props.mini), _defineProperty(_ref3, "disabled", state.disabled), _ref3)];
+  };
+};
+export var computedInnerClasses = function computedInnerClasses(_ref4) {
+  var prefixCls = _ref4.prefixCls;
+  return function () {
+    return "".concat(prefixCls, "-inner");
+  };
+};
+export var computedStyle = function computedStyle(_ref5) {
+  var props = _ref5.props,
+    state = _ref5.state;
+  return function () {
+    var size = '';
+    if (!isNull(props.modelValue)) {
+      size = typeof props.modelValue === 'number' ? "".concat(props.modelValue, "px") : props.modelValue;
+    }
+    return {
+      fontSize: size,
+      backgroundColor: props.trueValue === state.currentValue ? props.activeColor : props.inactiveColor
+    };
+  };
+};

package/switch/vue.js

@@ -0,0 +1,62 @@
+import { toggle, computedWarpClasses, computedInnerClasses, computedStyle } from './index';
+export var api = ['toggle', 'state'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    watch = _ref.watch,
+    reactive = _ref.reactive,
+    inject = _ref.inject;
+  var parent = _ref2.parent,
+    constants = _ref2.constants,
+    mode = _ref2.mode,
+    emit = _ref2.emit;
+  var prefixCls = constants.prefixcls(mode);
+  parent.tinyForm = parent.tinyForm || inject('form', null);
+  var api = {
+    computedInnerClasses: computedInnerClasses({
+      prefixCls: prefixCls
+    })
+  };
+  var state = reactive({
+    currentValue: props.modelValue,
+    innerClasses: computed(function () {
+      return api.computedInnerClasses();
+    }),
+    wrapClasses: computed(function () {
+      return api.computedWarpClasses();
+    }),
+    style: computed(function () {
+      return api.computedStyle();
+    }),
+    formDisabled: computed(function () {
+      return (parent.tinyForm || {}).disabled;
+    }),
+    disabled: computed(function () {
+      return props.disabled || state.formDisabled;
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    computedStyle: computedStyle({
+      props: props,
+      state: state
+    }),
+    computedWarpClasses: computedWarpClasses({
+      prefixCls: prefixCls,
+      props: props,
+      state: state
+    }),
+    toggle: toggle({
+      emit: emit,
+      props: props,
+      state: state
+    })
+  });
+  watch(function () {
+    return props.modelValue;
+  }, function (value) {
+    state.currentValue = value;
+  }, {
+    immediate: true
+  });
+  return api;
+};

package/tab-bar/index.js

@@ -0,0 +1,51 @@
+import { POSITION } from '@opentiny/vue-renderless/common';
+import { capitalize } from '@opentiny/vue-renderless/common/string';
+export var computedBarStyle = function computedBarStyle(parent) {
+  return function (props, state) {
+    var style = {};
+    var offset = 0;
+    var tabSize = 0;
+    var sizeName = ~[POSITION.Top, POSITION.Bottom].indexOf(state.rootTabs.position) ? 'width' : 'height';
+    var sizeDir = sizeName === 'width' ? 'x' : 'y';
+    props.tabs.every(function (_ref) {
+      var state = _ref.state;
+      var $el = parent.$refs["tabs-".concat(state.paneName)];
+      if (!$el) return false;
+      if (!state.active) {
+        if ($el["client".concat(capitalize(sizeName))] === 0) {
+          var unactive = $el.cloneNode(true);
+          document.body.appendChild(unactive);
+          var unactiveSty = window.getComputedStyle(unactive);
+          offset += parseFloat(unactiveSty.width) - parseFloat(unactiveSty.paddingRight);
+          document.body.removeChild(unactive);
+        } else {
+          offset += $el["client".concat(capitalize(sizeName))];
+        }
+        return true;
+      } else {
+        var copyEl = $el.cloneNode(true);
+        var eleStyle = window.getComputedStyle(copyEl);
+        tabSize = $el["client".concat(capitalize(sizeName))];
+        if (tabSize === 0) {
+          document.body.appendChild(copyEl);
+          tabSize = parseFloat(eleStyle.width) - parseFloat(eleStyle.paddingLeft) - parseFloat(eleStyle.paddingRight);
+          document.body.removeChild(copyEl);
+        } else {
+          if (sizeName === 'width') {
+            document.body.appendChild(copyEl);
+            tabSize -= parseFloat(eleStyle.paddingRight);
+            document.body.removeChild(copyEl);
+            return false;
+          }
+        }
+      }
+      return false;
+    });
+    var transform = "translate".concat(capitalize(sizeDir), "(").concat(offset, "px)");
+    style[sizeName] = tabSize + 'px';
+    style.transform = transform;
+    style.msTransform = transform;
+    style.webkitTransform = transform;
+    return style;
+  };
+};

package/tab-bar/vue.js

@@ -0,0 +1,16 @@
+import { computedBarStyle } from './index';
+export var api = ['state', 'computedBarStyle'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var inject = _ref.inject,
+    reactive = _ref.reactive;
+  var parent = _ref2.parent;
+  var state = reactive({
+    rootTabs: inject('rootTabs'),
+    barStyle: {}
+  });
+  var api = {
+    state: state,
+    computedBarStyle: computedBarStyle(parent)
+  };
+  return api;
+};

package/tab-dropdown/index.js

@@ -0,0 +1,11 @@
+export var handleClick = function handleClick(state) {
+  return function (name) {
+    state.rootTabs.setCurrentName(name);
+    state.hide = true;
+  };
+};
+export var setDropdownTabs = function setDropdownTabs(state) {
+  return function (data) {
+    state.dropdownTabs = data;
+  };
+};

package/tab-dropdown/vue.js

@@ -0,0 +1,17 @@
+import { handleClick, setDropdownTabs } from './index';
+export var api = ['state', 'handleClick', ' setDropdownTabs'];
+export var renderless = function renderless(props, _ref) {
+  var inject = _ref.inject,
+    reactive = _ref.reactive;
+  var state = reactive({
+    hide: true,
+    dropdownTabs: props.tabs || [],
+    rootTabs: inject('rootTabs')
+  });
+  var api = {
+    state: state,
+    handleClick: handleClick(state),
+    setDropdownTabs: setDropdownTabs(state)
+  };
+  return api;
+};

package/tab-item/index.js

@@ -0,0 +1,37 @@
+export var computedIsClosable = function computedIsClosable(_ref) {
+  var parent = _ref.parent,
+    props = _ref.props;
+  return function () {
+    return props.withClose || parent.withClose;
+  };
+};
+export var computedActive = function computedActive(_ref2) {
+  var parent = _ref2.parent,
+    nextTick = _ref2.nextTick,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    var active = parent.state.currentName === (props.name || state.index);
+    if (active) {
+      state.loaded = true;
+      nextTick(function () {
+        state.animateShow = true;
+      });
+    } else {
+      state.animateShow = false;
+    }
+    return active;
+  };
+};
+export var computedPaneName = function computedPaneName(_ref3) {
+  var props = _ref3.props,
+    state = _ref3.state;
+  return function () {
+    return props.name || state.index;
+  };
+};
+export var watchTitle = function watchTitle(parent) {
+  return function () {
+    return parent.$emit('tab-nav-update');
+  };
+};