@opentiny/vue-renderless 3.1.0-alpha.0

package/carousel/index.js

@@ -0,0 +1,206 @@
+import throttle from '@opentiny/vue-renderless/common/deps/throttle';
+import { POSITION } from '@opentiny/vue-renderless/common';
+export var handleMouseEnter = function handleMouseEnter(_ref) {
+  var api = _ref.api,
+    state = _ref.state;
+  return function () {
+    state.hover = true;
+    api.pauseTimer();
+  };
+};
+export var handleMouseLeave = function handleMouseLeave(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state;
+  return function () {
+    state.hover = false;
+    api.startTimer();
+  };
+};
+export var itemInStage = function itemInStage(state) {
+  return function (_ref3) {
+    var item = _ref3.item,
+      index = _ref3.index;
+    var length = state.items.length;
+    var arr = state.items;
+    if (index === length - 1 && item.inStage && arr[0].active || item.inStage && arr[index + 1] && arr[index + 1].active) {
+      return POSITION.Left;
+    } else if (index === 0 && item.inStage && arr[length - 1].active || item.inStage && arr[index - 1] && arr[index - 1].active) {
+      return POSITION.Right;
+    }
+    return false;
+  };
+};
+export var handleButtonEnter = function handleButtonEnter(_ref4) {
+  var api = _ref4.api,
+    state = _ref4.state;
+  return function (arrow) {
+    state.items.forEach(function (item, index) {
+      if (arrow === api.itemInStage({
+        item: item,
+        index: index
+      })) {
+        item.hover = true;
+      }
+    });
+  };
+};
+export var handleButtonLeave = function handleButtonLeave(state) {
+  return function () {
+    state.items.forEach(function (item) {
+      item.hover = false;
+    });
+  };
+};
+export var resetItemPosition = function resetItemPosition(state) {
+  return function (oldIndex) {
+    if (state.completed) {
+      state.items.forEach(function (item, index) {
+        item.translateItem({
+          activeIndex: state.activeIndex,
+          index: index,
+          oldIndex: oldIndex
+        });
+      });
+    }
+  };
+};
+export var playSlides = function playSlides(_ref5) {
+  var props = _ref5.props,
+    state = _ref5.state;
+  return function () {
+    if (state.activeIndex < state.items.length - 1) {
+      state.activeIndex++;
+    } else if (props.loop) {
+      state.activeIndex = 0;
+    }
+  };
+};
+export var pauseTimer = function pauseTimer(state) {
+  return function () {
+    return clearInterval(state.timer);
+  };
+};
+export var startTimer = function startTimer(_ref6) {
+  var api = _ref6.api,
+    props = _ref6.props,
+    state = _ref6.state;
+  return function () {
+    if (props.interval <= 0 || !props.autoplay) {
+      return;
+    }
+    state.timer = setInterval(api.playSlides, props.interval);
+  };
+};
+export var setActiveItem = function setActiveItem(_ref7) {
+  var api = _ref7.api,
+    props = _ref7.props,
+    state = _ref7.state;
+  return function (index) {
+    if (typeof index === 'string') {
+      var filteredItems = state.items.filter(function (item) {
+        return item.name === index;
+      });
+      if (filteredItems.length > 0) {
+        index = state.items.indexOf(filteredItems[0]);
+      }
+    }
+    index = Number(index);
+    if (isNaN(index) || index !== Math.floor(index)) {
+      return;
+    }
+    var length = state.items.length;
+    var oldIndex = state.activeIndex;
+    if (index < 0) {
+      state.activeIndex = props.loop ? length - 1 : 0;
+    } else if (index >= length) {
+      state.activeIndex = props.loop ? 0 : length - 1;
+    } else {
+      state.activeIndex = index;
+    }
+    if (oldIndex === state.activeIndex) {
+      api.resetItemPosition(oldIndex);
+    }
+  };
+};
+export var prev = function prev(_ref8) {
+  var api = _ref8.api,
+    state = _ref8.state;
+  return function () {
+    return api.setActiveItem(state.activeIndex - 1);
+  };
+};
+export var next = function next(_ref9) {
+  var api = _ref9.api,
+    state = _ref9.state;
+  return function () {
+    return api.setActiveItem(state.activeIndex + 1);
+  };
+};
+export var handleIndicatorClick = function handleIndicatorClick(state) {
+  return function (index) {
+    state.activeIndex = index;
+  };
+};
+export var handleIndicatorHover = function handleIndicatorHover(_ref10) {
+  var props = _ref10.props,
+    state = _ref10.state;
+  return function (index) {
+    if (props.trigger === 'hover' && index !== state.activeIndex) {
+      state.activeIndex = index;
+    }
+  };
+};
+export var watchItems = function watchItems(_ref11) {
+  var props = _ref11.props,
+    api = _ref11.api;
+  return function (value) {
+    if (value.length) {
+      api.setActiveItem(props.initialIndex);
+    }
+  };
+};
+export var watchActiveIndex = function watchActiveIndex(_ref12) {
+  var emit = _ref12.emit,
+    api = _ref12.api;
+  return function (_ref13) {
+    var value = _ref13.value,
+      oldValue = _ref13.oldValue;
+    api.resetItemPosition(oldValue);
+    emit('change', value, oldValue);
+  };
+};
+export var watchAutoplay = function watchAutoplay(api) {
+  return function (value) {
+    return value ? api.startTimer() : api.pauseTimer();
+  };
+};
+export var throttledArrowClick = function throttledArrowClick(api) {
+  return throttle(300, true, function (index) {
+    return api.setActiveItem(index);
+  });
+};
+export var throttledIndicatorHover = function throttledIndicatorHover(api) {
+  return throttle(300, function (index) {
+    return api.handleIndicatorHover(index);
+  });
+};
+export var computedHasLable = function computedHasLable(items) {
+  return items.some(function (item) {
+    return item.label.toString().length > 0;
+  });
+};
+export var onComplete = function onComplete(_ref14) {
+  var count = _ref14.count,
+    emit = _ref14.emit,
+    props = _ref14.props,
+    state = _ref14.state;
+  return function (total) {
+    if (count++ === total) {
+      state.completed = true;
+      if (props.initialIndex < state.items.length && props.initialIndex >= 0) {
+        state.activeIndex = props.initialIndex;
+      }
+      emit('complete');
+    }
+  };
+};

package/carousel/vue.js

@@ -0,0 +1,222 @@
+import { onComplete, handleMouseEnter, handleMouseLeave, itemInStage, handleButtonEnter, handleButtonLeave, resetItemPosition, playSlides, pauseTimer, startTimer, setActiveItem, prev, next, handleIndicatorClick, handleIndicatorHover, watchItems, watchActiveIndex, watchAutoplay, throttledArrowClick, throttledIndicatorHover, computedHasLable } from './index';
+import { addResizeListener, removeResizeListener } from '@opentiny/vue-renderless/common/deps/resize-event';
+export var api = ['state', 'items', 'activeIndex', 'containerWidth', 'hover', 'hasLabel', 'onComplete', 'handleMouseEnter', 'handleMouseLeave', 'itemInStage', 'handleButtonEnter', 'handleButtonLeave', 'updateItems', 'resetItemPosition', 'playSlides', 'pauseTimer', 'startTimer', 'setActiveItem', 'prev', 'next', 'handleIndicatorClick', 'handleIndicatorHover', 'throttledArrowClick', 'throttledIndicatorHover'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api;
+  var state = reactive({
+    items: [],
+    timer: null,
+    hover: false,
+    activeIndex: -1,
+    completed: false,
+    containerWidth: 0,
+    hasLabel: computed(function () {
+      return api.computedHasLable(state.items);
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    props = _ref2.props,
+    emit = _ref2.emit;
+  Object.assign(api, {
+    state: state,
+    computedHasLable: computedHasLable,
+    playSlides: playSlides({
+      props: props,
+      state: state
+    }),
+    pauseTimer: pauseTimer(state),
+    onComplete: onComplete({
+      count: 0,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    itemInStage: itemInStage(state),
+    resetItemPosition: resetItemPosition(state),
+    handleButtonLeave: handleButtonLeave(state),
+    handleIndicatorClick: handleIndicatorClick(state),
+    handleIndicatorHover: handleIndicatorHover({
+      props: props,
+      state: state
+    }),
+    watchItems: watchItems({
+      api: api,
+      props: props
+    }),
+    watchActiveIndex: watchActiveIndex({
+      api: api,
+      emit: emit
+    }),
+    watchAutoplay: watchAutoplay(api),
+    startTimer: startTimer({
+      api: api,
+      props: props,
+      state: state
+    }),
+    prev: prev({
+      api: api,
+      state: state
+    }),
+    next: next({
+      api: api,
+      state: state
+    }),
+    setActiveItem: setActiveItem({
+      api: api,
+      props: props,
+      state: state
+    }),
+    handleMouseEnter: handleMouseEnter({
+      api: api,
+      state: state
+    }),
+    handleMouseLeave: handleMouseLeave({
+      api: api,
+      state: state
+    }),
+    handleButtonEnter: handleButtonEnter({
+      api: api,
+      state: state
+    }),
+    throttledArrowClick: throttledArrowClick(api),
+    throttledIndicatorHover: throttledIndicatorHover(api)
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    props = _ref3.props,
+    api = _ref3.api,
+    state = _ref3.state;
+  watch(function () {
+    return props.autoplay;
+  }, api.watchAutoplay);
+  watch(function () {
+    return props.loop;
+  }, function () {
+    api.setActiveItem(state.activeIndex);
+  });
+};
+export var useItems = function useItems(_ref4) {
+  var api = _ref4.api,
+    onMounted = _ref4.onMounted,
+    state = _ref4.state,
+    watch = _ref4.watch,
+    constants = _ref4.constants,
+    childrenHandler = _ref4.childrenHandler;
+  var updateItems = function updateItems() {
+    var $children = [];
+    childrenHandler(function (_ref5) {
+      var options = _ref5.options,
+        vm = _ref5.vm;
+      options.name === constants.CHILD_NAME && $children.push(vm);
+    });
+    state.items = $children;
+  };
+  watch(function () {
+    return state.items;
+  }, function (value) {
+    return state.completed && api.watchItems(value);
+  });
+  onMounted(updateItems);
+  return {
+    updateItems: updateItems
+  };
+};
+export var useActiveIndex = function useActiveIndex(_ref6) {
+  var api = _ref6.api,
+    state = _ref6.state,
+    watch = _ref6.watch;
+  watch(function () {
+    return state.activeIndex;
+  }, function (value, oldValue) {
+    return api.watchActiveIndex({
+      value: value,
+      oldValue: oldValue
+    });
+  }, {
+    immediate: true
+  });
+};
+export var useResizeListener = function useResizeListener(_ref7) {
+  var api = _ref7.api,
+    onBeforeUnmount = _ref7.onBeforeUnmount,
+    onMounted = _ref7.onMounted,
+    parent = _ref7.parent;
+  onMounted(function () {
+    addResizeListener(parent.$el, api.resetItemPosition);
+  });
+  onBeforeUnmount(function () {
+    if (parent.$el) {
+      removeResizeListener(parent.$el, api.resetItemPosition);
+    }
+  });
+};
+export var renderless = function renderless(props, _ref8, _ref9) {
+  var computed = _ref8.computed,
+    onMounted = _ref8.onMounted,
+    onBeforeUnmount = _ref8.onBeforeUnmount,
+    reactive = _ref8.reactive,
+    watch = _ref8.watch;
+  var vm = _ref9.vm,
+    parent = _ref9.parent,
+    constants = _ref9.constants,
+    emit = _ref9.emit,
+    childrenHandler = _ref9.childrenHandler;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api
+  });
+  initApi({
+    api: api,
+    state: state,
+    props: props,
+    emit: emit
+  });
+  var _useItems = useItems({
+      api: api,
+      vm: vm,
+      onMounted: onMounted,
+      state: state,
+      watch: watch,
+      constants: constants,
+      childrenHandler: childrenHandler
+    }),
+    updateItems = _useItems.updateItems;
+  api.updateItems = updateItems;
+  useActiveIndex({
+    api: api,
+    parent: parent,
+    props: props,
+    state: state,
+    watch: watch
+  });
+  useResizeListener({
+    api: api,
+    onBeforeUnmount: onBeforeUnmount,
+    onMounted: onMounted,
+    parent: parent
+  });
+  initWatch({
+    watch: watch,
+    props: props,
+    api: api,
+    state: state
+  });
+  onMounted(function () {
+    api.startTimer();
+    api.onComplete(state.items.length);
+  });
+  parent.$on('updateItems', api.updateItems);
+  parent.$on('complete', function () {
+    api.onComplete(state.items.length);
+  });
+  return api;
+};

package/carousel-item/index.js

@@ -0,0 +1,93 @@
+export var processIndex = function processIndex(_ref) {
+  var activeIndex = _ref.activeIndex,
+    index = _ref.index,
+    length = _ref.length;
+  if (activeIndex === 0 && index === length - 1) {
+    return -1;
+  } else if (activeIndex === length - 1 && index === 0) {
+    return length;
+  } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
+    return length + 1;
+  } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
+    return -2;
+  }
+  return index;
+};
+export var calculateTranslate = function calculateTranslate(_ref2) {
+  var CARD_SCALE = _ref2.CARD_SCALE,
+    state = _ref2.state;
+  return function (_ref3) {
+    var activeIndex = _ref3.activeIndex,
+      index = _ref3.index,
+      parentWidth = _ref3.parentWidth;
+    if (state.inStage) {
+      return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
+    } else if (index < activeIndex) {
+      return -(1 + CARD_SCALE) * parentWidth / 4;
+    }
+    return (3 + CARD_SCALE) * parentWidth / 4;
+  };
+};
+export var translateItem = function translateItem(_ref4) {
+  var api = _ref4.api,
+    CARD_SCALE = _ref4.CARD_SCALE,
+    parent = _ref4.parent,
+    state = _ref4.state;
+  return function (_ref5) {
+    var activeIndex = _ref5.activeIndex,
+      index = _ref5.index,
+      oldIndex = _ref5.oldIndex;
+    var parentHeight = parent.$parent.$el.offsetHeight;
+    var parentWidth = parent.$parent.$el.offsetWidth;
+    var vnode = parent.$parent;
+    var length = vnode.state.items.length;
+    var _parent$$constants = parent.$constants,
+      TYPE_CARD = _parent$$constants.TYPE_CARD,
+      TYPE_VERTICAL = _parent$$constants.TYPE_VERTICAL;
+    if (vnode.type !== TYPE_CARD && oldIndex !== undefined) {
+      state.animating = index === activeIndex || index === oldIndex;
+    }
+    if (index !== activeIndex && length > 2 && vnode.loop) {
+      index = api.processIndex({
+        index: index,
+        activeIndex: activeIndex,
+        length: length
+      });
+    }
+    if (vnode.type === TYPE_CARD) {
+      state.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
+      state.active = index === activeIndex;
+      state.translate = api.calculateTranslate({
+        index: index,
+        activeIndex: activeIndex,
+        parentWidth: parentWidth
+      });
+      state.scale = state.active ? 1 : CARD_SCALE;
+    } else {
+      state.active = index === activeIndex;
+      state.translate = vnode.type === TYPE_VERTICAL ? parentHeight * (index - activeIndex) : parentWidth * (index - activeIndex);
+    }
+    state.ready = true;
+  };
+};
+export var handleItemClick = function handleItemClick(parent) {
+  return function () {
+    var vnode = parent.$parent;
+    if (vnode && vnode.type === parent.$constants.TYPE_CARD) {
+      var index = vnode.state.items.indexOf(parent);
+      vnode.setActiveItem(index);
+    }
+  };
+};
+export var computedTransform = function computedTransform(_ref6) {
+  var parent = _ref6.parent,
+    TYPE_VERTICAL = _ref6.TYPE_VERTICAL;
+  return function (state) {
+    var TRANSLATE = parent.$parent.type === TYPE_VERTICAL ? "translateY(".concat(state.translate, "px) scale(").concat(state.scale, ")") : "translateX(".concat(state.translate, "px) scale(").concat(state.scale, ")");
+    return {
+      msTransform: TRANSLATE,
+      webkitTransform: TRANSLATE,
+      transform: TRANSLATE
+    };
+  };
+};

package/carousel-item/vue.js

@@ -0,0 +1,57 @@
+import { processIndex, calculateTranslate, translateItem, handleItemClick, computedTransform } from './index';
+export var api = ['state', 'hover', 'translate', 'scale', 'active', 'ready', 'inStage', 'animating', 'isOblique', 'hasTitle', 'getTransform', 'processIndex', 'calculateTranslate', 'translateItem', 'handleItemClick'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    onMounted = _ref.onMounted,
+    onUnmounted = _ref.onUnmounted,
+    reactive = _ref.reactive;
+  var parent = _ref2.parent,
+    dispatch = _ref2.dispatch;
+  var api = {};
+  var CARD_SCALE = parent.$constants.CARD_SCALE;
+  var TYPE_VERTICAL = parent.$constants.TYPE_VERTICAL;
+  var state = reactive({
+    scale: 1,
+    translate: 0,
+    hover: false,
+    ready: false,
+    active: false,
+    inStage: false,
+    animating: false,
+    isOblique: false,
+    carouselParent: parent.$parent,
+    hasTitle: computed(function () {
+      return !!props.title;
+    }),
+    getTransform: computed(function () {
+      return api.computedTransform(state);
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    processIndex: processIndex,
+    handleItemClick: handleItemClick(parent),
+    computedTransform: computedTransform({
+      parent: parent,
+      TYPE_VERTICAL: TYPE_VERTICAL
+    }),
+    calculateTranslate: calculateTranslate({
+      CARD_SCALE: CARD_SCALE,
+      state: state
+    }),
+    translateItem: translateItem({
+      api: api,
+      CARD_SCALE: CARD_SCALE,
+      parent: parent,
+      state: state
+    })
+  });
+  onMounted(function () {
+    dispatch('Carousel', 'updateItems', []);
+    dispatch('Carousel', 'complete', []);
+  });
+  onUnmounted(function () {
+    parent.$parent && parent.$parent.updateItems();
+  });
+  return api;
+};