@opentiny/vue-renderless 3.1.0-alpha.0

package/select-dropdown/vue.js

@@ -0,0 +1,122 @@
+import { mounted } from './index';
+import userPopper from '@opentiny/vue-renderless/common/deps/vue-popper';
+export var api = ['state', 'doDestroy'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    popper = _ref.popper,
+    selectVm = _ref.selectVm;
+  var showPopper = popper.showPopper,
+    currentPlacement = popper.currentPlacement,
+    popperElm = popper.popperElm,
+    referenceElm = popper.referenceElm;
+  var state = reactive({
+    showPopper: showPopper,
+    currentPlacement: currentPlacement,
+    popperElm: popperElm,
+    referenceElm: referenceElm,
+    minWidth: '',
+    multiple: computed(function () {
+      return selectVm.multiple;
+    }),
+    popperClass: computed(function () {
+      return selectVm.popperClass;
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    popper = _ref2.popper,
+    state = _ref2.state,
+    selectEmitter = _ref2.selectEmitter,
+    constants = _ref2.constants,
+    selectVm = _ref2.selectVm,
+    parent = _ref2.parent;
+  var destroyPopper = popper.destroyPopper,
+    doDestroy = popper.doDestroy,
+    updatePopper = popper.updatePopper;
+  Object.assign(api, {
+    state: state,
+    doDestroy: doDestroy,
+    mounted: mounted({
+      selectEmitter: selectEmitter,
+      constants: constants,
+      state: state,
+      selectVm: selectVm,
+      updatePopper: updatePopper,
+      destroyPopper: destroyPopper,
+      parent: parent
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    selectVm = _ref3.selectVm,
+    state = _ref3.state;
+  watch(function () {
+    return selectVm.state.inputWidth;
+  }, function () {
+    state.minWidth = (selectVm && selectVm.$el && selectVm.$el.getBoundingClientRect().width) + 'px';
+  }, {
+    immediate: true
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onBeforeUnmount = _ref4.onBeforeUnmount,
+    onDeactivated = _ref4.onDeactivated,
+    onMounted = _ref4.onMounted,
+    reactive = _ref4.reactive,
+    toRefs = _ref4.toRefs,
+    watch = _ref4.watch,
+    inject = _ref4.inject;
+  var refs = _ref5.refs,
+    slots = _ref5.slots,
+    parent = _ref5.parent,
+    emit = _ref5.emit,
+    nextTick = _ref5.nextTick;
+  var api = {};
+  var constants = parent.select._constants;
+  var selectEmitter = inject('selectEmitter');
+  var selectVm = inject('selectVm');
+  var popper = userPopper({
+    emit: emit,
+    nextTick: nextTick,
+    onBeforeUnmount: onBeforeUnmount,
+    onDeactivated: onDeactivated,
+    props: props,
+    reactive: reactive,
+    refs: refs,
+    slots: slots,
+    toRefs: toRefs,
+    watch: watch
+  });
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    popper: popper,
+    selectVm: selectVm
+  });
+  initApi({
+    api: api,
+    popper: popper,
+    state: state,
+    selectEmitter: selectEmitter,
+    constants: constants,
+    selectVm: selectVm,
+    parent: parent
+  });
+  initWatch({
+    watch: watch,
+    selectVm: selectVm,
+    state: state
+  });
+  onBeforeUnmount(function () {
+    popper.destroyPopper('remove');
+    state.popperElm = null;
+    state.referenceElm = null;
+  });
+  onMounted(api.mounted);
+  return api;
+};

package/slide-bar/index.js

@@ -0,0 +1,94 @@
+import { emitEvent } from '@opentiny/vue-renderless/common/event';
+export var leftClick = function leftClick(_ref) {
+  var api = _ref.api,
+    props = _ref.props,
+    refs = _ref.refs,
+    state = _ref.state;
+  return function () {
+    if (state.leftLength >= 0) {
+      return;
+    }
+    state.leftLength = state.leftLength + (state.blockWidth + state.blockMargin) * props.wheelBlocks;
+    refs.insider.style.left = state.leftLength + 'px';
+    api.changeState();
+  };
+};
+export var rightClick = function rightClick(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    refs = _ref2.refs,
+    state = _ref2.state;
+  return function () {
+    if (state.blockWrapper < Math.abs(state.leftLength) + state.wrapperWidth) {
+      return;
+    }
+    state.leftLength = state.leftLength - (state.blockWidth + state.blockMargin) * props.wheelBlocks;
+    refs.insider.style.left = state.leftLength + 'px';
+    api.changeState();
+  };
+};
+export var blockClick = function blockClick(_ref3) {
+  var emit = _ref3.emit,
+    state = _ref3.state;
+  return function (_ref4) {
+    var item = _ref4.item,
+      index = _ref4.index;
+    if (!emitEvent(emit, 'before-click')) {
+      return;
+    }
+    state.currentIndex = index;
+    emit('click', item, index);
+  };
+};
+export var changeState = function changeState(_ref5) {
+  var state = _ref5.state;
+  return function () {
+    var contentWidth = state.blockWrapper;
+    state.showLeft = !(parseInt(state.leftLength, 10) >= 0);
+    state.showRight = contentWidth <= Math.abs(state.leftLength) + state.wrapperWidth;
+  };
+};
+export var mouseEvent = function mouseEvent(_ref6) {
+  var api = _ref6.api,
+    state = _ref6.state;
+  return function (e) {
+    if (e.wheelDelta >= 0) {
+      if (state.leftLength < 0) {
+        api.leftClick();
+      }
+    } else {
+      if (state.blockWrapper > Math.abs(state.leftLength) + state.wrapperWidth) {
+        api.rightClick();
+      }
+    }
+  };
+};
+export var changeSize = function changeSize(_ref7) {
+  var props = _ref7.props,
+    state = _ref7.state,
+    refs = _ref7.refs;
+  return function () {
+    state.wrapperWidth = refs.wrapper.offsetWidth;
+    state.blockWidth = parseInt((1 - (props.initBlocks - 1) * 0.02) / props.initBlocks * state.wrapperWidth, 10);
+    state.blockMargin = parseInt(state.wrapperWidth * 0.02, 10);
+    state.blockWrapper = props.modelValue.length * state.blockWidth + (props.modelValue.length - 1) * state.blockMargin;
+  };
+};
+export var swipeleft = function swipeleft(_ref8) {
+  var api = _ref8.api,
+    state = _ref8.state;
+  return function () {
+    if (state.blockWrapper > Math.abs(state.leftLength) + state.wrapperWidth) {
+      api.rightClick();
+    }
+  };
+};
+export var swiperight = function swiperight(_ref9) {
+  var api = _ref9.api,
+    state = _ref9.state;
+  return function () {
+    if (state.leftLength < 0) {
+      api.leftClick();
+    }
+  };
+};

package/slide-bar/vue.js

@@ -0,0 +1,58 @@
+import { leftClick, rightClick, blockClick, changeState, changeSize, mouseEvent } from './index';
+export var api = ['state', 'mouseEvent', 'rightClick', 'leftClick', 'blockClick'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var onMounted = _ref.onMounted,
+    reactive = _ref.reactive;
+  var refs = _ref2.refs,
+    parent = _ref2.parent,
+    emit = _ref2.emit;
+  var api = {};
+  var state = reactive({
+    leftLength: 0,
+    blockWidth: 0,
+    blockMargin: 0,
+    showLeft: false,
+    showRight: false,
+    blockWrapper: 0,
+    wrapperWidth: 0,
+    currentIndex: -1,
+    offsetWidth: 0
+  });
+  Object.assign(api, {
+    state: state,
+    blockClick: blockClick({
+      emit: emit,
+      state: state
+    }),
+    changeState: changeState({
+      props: props,
+      state: state
+    }),
+    changeSize: changeSize({
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    leftClick: leftClick({
+      api: api,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    mouseEvent: mouseEvent({
+      api: api,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    rightClick: rightClick({
+      api: api,
+      parent: parent,
+      props: props,
+      refs: refs,
+      state: state
+    })
+  });
+  onMounted(api.changeSize);
+  return api;
+};

package/slider/index.js

@@ -0,0 +1,434 @@
+import { KEY_CODE } from '@opentiny/vue-renderless/common';
+import { emitEvent } from '@opentiny/vue-renderless/common/event';
+import { on, off, hasClass } from '@opentiny/vue-renderless/common/deps/dom';
+import { toNumber } from '@opentiny/vue-renderless/common/string';
+export var bindEvent = function bindEvent(api) {
+  return function () {
+    on(window, 'resize', api.bindResize);
+    api.bindResize();
+  };
+};
+export var unBindEvent = function unBindEvent(api) {
+  return function () {
+    return off(window, 'resize', api.bindResize);
+  };
+};
+export var bindResize = function bindResize(_ref) {
+  var parent = _ref.parent,
+    props = _ref.props,
+    state = _ref.state;
+  return function () {
+    var handleEl = parent.$el.firstElementChild;
+    state.sliderSize = handleEl['client' + (props.vertical ? 'Height' : 'Width')];
+    state.sliderOffset = handleEl.getBoundingClientRect();
+  };
+};
+export var bindKeyDown = function bindKeyDown(_ref2) {
+  var api = _ref2.api,
+    props = _ref2.props,
+    state = _ref2.state;
+  return function (event) {
+    if (state.disabled || state.activeIndex < 0) {
+      return;
+    }
+    var currentValue = 0;
+    switch (event.keyCode) {
+      case KEY_CODE.Home:
+        currentValue = props.min;
+        break;
+      case KEY_CODE.End:
+        currentValue = props.max;
+        break;
+      case KEY_CODE.PageUp:
+        currentValue = state.activeValue + Math.ceil(state.rangeDiff / props.numPages);
+        break;
+      case KEY_CODE.PageDown:
+        currentValue = state.activeValue - Math.ceil(state.rangeDiff / props.numPages);
+        break;
+      case KEY_CODE.ArrowUp:
+      case KEY_CODE.ArrowRight:
+        currentValue = state.activeValue + props.step;
+        break;
+      case KEY_CODE.ArrowDown:
+      case KEY_CODE.ArrowLeft:
+        currentValue = state.activeValue - props.step;
+        break;
+      default:
+        currentValue = state.activeValue;
+        break;
+    }
+    api.setActiveButtonValue(currentValue);
+    api.setButtonStyle();
+    api.setBarStyle();
+  };
+};
+export var bindMouseDown = function bindMouseDown(_ref3) {
+  var api = _ref3.api,
+    constants = _ref3.constants,
+    mode = _ref3.mode,
+    emit = _ref3.emit,
+    state = _ref3.state;
+  return function (event) {
+    if (event.button !== 0 && event.detail !== 0) {
+      state.activeIndex = -1;
+      return;
+    }
+    if (!emitEvent(emit, 'start', api.getActiveButtonValue())) {
+      state.activeIndex = -1;
+      return;
+    }
+    var handleEl = event.target;
+    var isClickBar = hasClass(handleEl, constants.sliderCls(mode)) || hasClass(handleEl, constants.rangeCls(mode));
+    var isClickBtn = hasClass(handleEl, constants.buttonCls(mode));
+    if (state.disabled || !isClickBtn && !isClickBar) {
+      state.activeIndex = -1;
+      return;
+    }
+    on(window, 'mouseup', api.bindMouseUp);
+    on(window, 'mousemove', api.bindMouseMove);
+    on(window, 'touchend', api.bindMouseUp);
+    on(window, 'touchmove', api.bindMouseMove);
+    state.isDrag = isClickBtn;
+    isClickBtn && (state.activeIndex = api.getActiveButtonIndex(event));
+    if (isClickBar) {
+      var currentValue = api.calculateValue(event);
+      if (state.isDouble) {
+        if (Math.abs(currentValue - state.leftBtnValue) > Math.abs(state.rightBtnValue - currentValue)) {
+          api.changeActiveValue(state.rightBtnValue < state.leftBtnValue);
+        } else {
+          api.changeActiveValue(state.rightBtnValue > state.leftBtnValue);
+        }
+      }
+      api.setActiveButtonValue(currentValue);
+      api.setButtonStyle();
+      api.setBarStyle();
+      emit('stop', api.getActiveButtonValue());
+    }
+  };
+};
+export var bindMouseMove = function bindMouseMove(_ref4) {
+  var api = _ref4.api,
+    nextTick = _ref4.nextTick,
+    state = _ref4.state;
+  return function (event) {
+    if (state.disabled || !state.isDrag) {
+      return;
+    }
+    api.setActiveButtonValue(api.calculateValue(event));
+    api.setButtonStyle();
+    api.setBarStyle();
+    nextTick(function () {
+      api.setTipStyle();
+    });
+  };
+};
+export var bindMouseUp = function bindMouseUp(_ref5) {
+  var api = _ref5.api,
+    emit = _ref5.emit,
+    state = _ref5.state;
+  return function () {
+    if (state.disabled || !state.isDrag) {
+      return;
+    }
+    state.showTip = false;
+    state.isDrag = false;
+    off(window, 'mouseup', api.bindMouseUp);
+    off(window, 'mousemove', api.bindMouseMove);
+    off(window, 'touchend', api.bindMouseUp);
+    off(window, 'touchmove', api.bindMouseMove);
+    emit('stop', api.getActiveButtonValue());
+  };
+};
+export var displayTip = function displayTip(_ref6) {
+  var api = _ref6.api,
+    nextTick = _ref6.nextTick,
+    state = _ref6.state;
+  return function (event) {
+    if (!state.showTip) {
+      state.showTip = true;
+      api.changeActiveValue(api.getActiveButtonIndex(event) === 0);
+      nextTick(function () {
+        api.setTipStyle();
+      });
+    }
+  };
+};
+export var hideTip = function hideTip(state) {
+  return function () {
+    return !state.isDrag && (state.showTip = false);
+  };
+};
+export var setTipStyle = function setTipStyle(_ref7) {
+  var constants = _ref7.constants,
+    mode = _ref7.mode,
+    parent = _ref7.parent,
+    props = _ref7.props,
+    state = _ref7.state;
+  return function () {
+    if (!props.showTip) {
+      return;
+    }
+    var tipStyle = {
+      top: 0,
+      left: 0
+    };
+    var tipEl = parent.$el.querySelector('.' + constants.tipCls(mode));
+    var moveSize = (state.activeValue - props.min) / state.rangeDiff * state.sliderSize;
+    if (props.vertical) {
+      tipStyle.top = state.sliderSize - moveSize - constants.BUTTON_SIZE - constants.TIP_HEIGHT / 2 + constants.HALF_BAR_HEIGHT;
+      tipStyle.left = -tipEl.clientWidth / 2 + constants.HALF_BAR_HEIGHT;
+    } else {
+      tipStyle.top = -constants.TIP_HEIGHT - constants.BUTTON_SIZE / 2 + constants.HALF_BAR_HEIGHT;
+      tipStyle.left = moveSize - constants.HALF_BAR_HEIGHT - tipEl.clientWidth / 2;
+    }
+    state.tipStyle = {
+      top: tipStyle.top + 'px',
+      left: tipStyle.left + 'px'
+    };
+  };
+};
+var getActiveButtonIndexFlag = function getActiveButtonIndexFlag(_ref8) {
+  var state = _ref8.state,
+    event = _ref8.event,
+    constants = _ref8.constants,
+    mode = _ref8.mode;
+  var cls = constants.buttonCls(mode);
+  var previousElementSibling = event.target.previousElementSibling;
+  return state.isDouble && hasClass(previousElementSibling, cls);
+};
+export var getActiveButtonIndex = function getActiveButtonIndex(_ref9) {
+  var constants = _ref9.constants,
+    mode = _ref9.mode,
+    state = _ref9.state;
+  return function (event) {
+    var flag = getActiveButtonIndexFlag({
+      state: state,
+      event: event,
+      constants: constants,
+      mode: mode
+    });
+    return flag ? 1 : 0;
+  };
+};
+var calcCurrentValue = function calcCurrentValue(_ref10) {
+  var currentValue = _ref10.currentValue,
+    props = _ref10.props,
+    state = _ref10.state;
+  if (currentValue <= props.min) {
+    currentValue = props.min;
+  } else if (currentValue >= props.max) {
+    currentValue = props.max;
+  } else {
+    var step = props.step > 0 ? props.step : 1;
+    var stepValue = (currentValue - props.min) % step;
+    if (stepValue) {
+      currentValue -= stepValue;
+      currentValue += stepValue * 2 > step ? +step : 0;
+    }
+    if (state.isDouble) {
+      if (state.activeIndex === 0 && currentValue >= state.rightBtnValue) {
+        currentValue = state.rightBtnValue;
+      } else if (state.activeIndex === 1 && currentValue <= state.leftBtnValue) {
+        currentValue = state.leftBtnValue;
+      }
+    }
+  }
+  return currentValue;
+};
+export var setActiveButtonValue = function setActiveButtonValue(_ref11) {
+  var api = _ref11.api,
+    emit = _ref11.emit,
+    props = _ref11.props,
+    state = _ref11.state;
+  return function (value) {
+    var currentValue = value;
+    currentValue = calcCurrentValue({
+      currentValue: currentValue,
+      props: props,
+      state: state
+    });
+    if (!state.isDouble) {
+      state.leftBtnValue = currentValue;
+    } else {
+      if (state.activeIndex === 0) {
+        state.leftBtnValue = currentValue;
+      } else {
+        state.rightBtnValue = currentValue;
+      }
+    }
+    state.activeValue = currentValue;
+    state.innerTrigger = true;
+    emit('update:modelValue', api.getActiveButtonValue());
+  };
+};
+export var setButtonStyle = function setButtonStyle(_ref12) {
+  var props = _ref12.props,
+    state = _ref12.state;
+  return function () {
+    var percent = (state.activeValue - props.min) / state.rangeDiff * 100;
+    var style = (props.vertical ? 'bottom' : 'left') + ':' + percent + '%';
+    if (!state.isDouble || state.activeIndex === 0) {
+      state.leftBtnPercent = percent;
+      state.leftBtnStyle = style;
+    } else {
+      state.rightBtnPercent = percent;
+      state.rightBtnStyle = style;
+    }
+  };
+};
+export var setBarStyle = function setBarStyle(_ref13) {
+  var props = _ref13.props,
+    state = _ref13.state;
+  return function () {
+    var minSize = Math.abs(state.leftBtnPercent - state.rightBtnPercent);
+    var maxSize = Math.max(state.leftBtnPercent, state.rightBtnPercent);
+    if (props.vertical) {
+      state.barStyle = {
+        bottom: maxSize - minSize + '%',
+        height: minSize + '%'
+      };
+    } else {
+      state.barStyle = {
+        left: maxSize - minSize + '%',
+        width: minSize + '%'
+      };
+    }
+  };
+};
+export var initSlider = function initSlider(_ref14) {
+  var api = _ref14.api,
+    props = _ref14.props,
+    state = _ref14.state;
+  return function (value) {
+    state.isDouble = Array.isArray(value);
+    var sliders = state.isDouble ? value : [value];
+    sliders.length > 2 && (sliders.length = 2);
+    sliders.forEach(function (item, index) {
+      if (index === 0) {
+        state.leftBtnValue = Math.max(+item, props.min);
+      } else {
+        state.rightBtnValue = Math.min(+item, props.max);
+        state.rightBtnShow = true;
+      }
+      api.changeActiveValue(index === 0);
+      api.setButtonStyle();
+    });
+    api.setBarStyle();
+  };
+};
+export var calculateValue = function calculateValue(_ref15) {
+  var props = _ref15.props,
+    state = _ref15.state;
+  return function (event) {
+    var currentValue = 0;
+    var offset = state.sliderOffset;
+    if (event.type === 'touchmove' || event.type === 'touchstart' || event.type === 'touchend') {
+      if (props.vertical) {
+        currentValue = props.max - (event.touches[0].pageY - offset.top) / state.sliderSize * state.rangeDiff;
+      } else {
+        currentValue = props.min + (event.touches[0].pageX - offset.left) / state.sliderSize * state.rangeDiff;
+      }
+    } else {
+      if (props.vertical) {
+        currentValue = props.max - (event.pageY - offset.top) / state.sliderSize * state.rangeDiff;
+      } else {
+        currentValue = props.min + (event.pageX - offset.left) / state.sliderSize * state.rangeDiff;
+      }
+    }
+    return currentValue;
+  };
+};
+export var changeActiveValue = function changeActiveValue(state) {
+  return function (isLeft) {
+    state.activeIndex = isLeft ? 0 : 1;
+    state.activeValue = isLeft ? state.leftBtnValue : state.rightBtnValue;
+  };
+};
+export var formatTipValue = function formatTipValue(props) {
+  return function (value) {
+    return props.formatTooltip instanceof Function ? props.formatTooltip(value) : value;
+  };
+};
+export var getActiveButtonValue = function getActiveButtonValue(state) {
+  return function () {
+    return state.isDouble ? [state.leftBtnValue, state.rightBtnValue] : state.leftBtnValue;
+  };
+};
+export var autoSlider = function autoSlider(api) {
+  return function (value) {
+    api.setActiveButtonValue(value);
+    api.setButtonStyle();
+    api.setBarStyle();
+  };
+};
+export var customBeforeAppearHook = function customBeforeAppearHook(props) {
+  return function (el) {
+    if (props.vertical) {
+      el.style.bottom = 0 + '%';
+      el.style.height = 0 + '%';
+    } else {
+      el.style.left = 0 + '%';
+      el.style.width = 0 + '%';
+    }
+  };
+};
+export var customAppearHook = function customAppearHook() {
+  return function (el) {
+    el.style.transition = 'all 0.5s';
+  };
+};
+export var customAfterAppearHook = function customAfterAppearHook(_ref16) {
+  var state = _ref16.state,
+    props = _ref16.props;
+  return function (el) {
+    var minSize = Math.abs(state.leftBtnPercent - state.rightBtnPercent);
+    var maxSize = Math.max(state.leftBtnPercent, state.rightBtnPercent);
+    if (props.vertical) {
+      el.style.bottom = maxSize - minSize + '%';
+      el.style.height = minSize + '%';
+    } else {
+      if (state.isDouble) {
+        el.style.left = maxSize - minSize + '%';
+        el.style.width = minSize + '%';
+      } else {
+        el.style.width = minSize + '%';
+      }
+    }
+  };
+};
+export var watchActiveValue = function watchActiveValue(_ref17) {
+  var api = _ref17.api,
+    emit = _ref17.emit,
+    props = _ref17.props,
+    state = _ref17.state;
+  return function (newValue, oldValue) {
+    var nNewValue = toNumber(newValue) || 0;
+    var nOldValue = toNumber(oldValue) || 0;
+    if (nNewValue !== nOldValue) {
+      api.autoSlider(nNewValue);
+      if (nNewValue <= props.max && nNewValue >= props.min) {
+        var value = api.getActiveButtonValue();
+        if (state.lastValue && state.lastValue.toString() !== value.toString()) {
+          emit('change', value);
+        }
+        state.lastValue = value;
+      }
+    } else {
+      state.activeValue = nNewValue || 0;
+    }
+  };
+};
+export var watchModelValue = function watchModelValue(_ref18) {
+  var api = _ref18.api,
+    state = _ref18.state;
+  return function (value) {
+    if (!state.innerTrigger) {
+      api.initSlider(value);
+    } else {
+      state.innerTrigger = false;
+      if (!state.isDouble) {
+        api.initSlider(value);
+      }
+    }
+  };
+};