@opentiny/vue-renderless 3.6.0 → 3.6.1-alpha.2

package/carousel/vue.js

@@ -1,222 +1,166 @@
-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({
+import "../chunk-PKUHTIDK.js";
+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";
+const 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"
+];
+const initState = ({ reactive, computed, api: api2 }) => {
+  const state = reactive({
     items: [],
     timer: null,
     hover: false,
     activeIndex: -1,
     completed: false,
     containerWidth: 0,
-    hasLabel: computed(function () {
-      return api.computedHasLable(state.items);
-    })
+    hasLabel: computed(() => api2.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
-    }),
+const initApi = ({ api: api2, state, props, emit }) => {
+  Object.assign(api2, {
+    state,
+    computedHasLable,
+    playSlides: playSlides({ props, state }),
     pauseTimer: pauseTimer(state),
-    onComplete: onComplete({
-      count: 0,
-      emit: emit,
-      props: props,
-      state: state
-    }),
+    onComplete: onComplete({ count: 0, emit, props, 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)
+    handleIndicatorHover: handleIndicatorHover({ props, state }),
+    watchItems: watchItems({ api: api2, props }),
+    watchActiveIndex: watchActiveIndex({ api: api2, emit }),
+    watchAutoplay: watchAutoplay(api2),
+    startTimer: startTimer({ api: api2, props, state }),
+    prev: prev({ api: api2, state }),
+    next: next({ api: api2, state }),
+    setActiveItem: setActiveItem({ api: api2, props, state }),
+    handleMouseEnter: handleMouseEnter({ api: api2, state }),
+    handleMouseLeave: handleMouseLeave({ api: api2, state }),
+    handleButtonEnter: handleButtonEnter({ api: api2, state }),
+    throttledArrowClick: throttledArrowClick(api2),
+    throttledIndicatorHover: throttledIndicatorHover(api2)
   });
 };
-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);
-  });
+const initWatch = ({ watch, props, api: api2, state }) => {
+  watch(() => props.autoplay, api2.watchAutoplay);
+  watch(
+    () => props.loop,
+    () => {
+      api2.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;
+const useItems = ({ api: api2, onMounted, state, watch, constants, childrenHandler }) => {
+  const updateItems = () => {
+    const $children = [];
+    childrenHandler(({ options, 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);
-  });
+  watch(
+    () => state.items,
+    (value) => state.completed && api2.watchItems(value)
+  );
   onMounted(updateItems);
   return {
-    updateItems: 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
-  });
+const useActiveIndex = ({ api: api2, state, watch }) => {
+  watch(
+    () => state.activeIndex,
+    (value, oldValue) => api2.watchActiveIndex({ value, 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);
+const useResizeListener = ({ api: api2, onBeforeUnmount, onMounted, parent }) => {
+  onMounted(() => {
+    addResizeListener(parent.$el, api2.resetItemPosition);
   });
-  onBeforeUnmount(function () {
+  onBeforeUnmount(() => {
     if (parent.$el) {
-      removeResizeListener(parent.$el, api.resetItemPosition);
+      removeResizeListener(parent.$el, api2.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
+const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { vm, parent, constants, emit, childrenHandler }) => {
+  const api2 = {};
+  const state = initState({ reactive, computed, api: api2 });
+  initApi({ api: api2, state, props, emit });
+  const { updateItems } = useItems({
+    api: api2,
+    vm,
+    onMounted,
+    state,
+    watch,
+    constants,
+    childrenHandler
   });
-  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
+  api2.updateItems = updateItems;
+  useActiveIndex({ api: api2, parent, props, state, watch });
+  useResizeListener({ api: api2, onBeforeUnmount, onMounted, parent });
+  initWatch({ watch, props, api: api2, state });
+  onMounted(() => {
+    api2.startTimer();
+    api2.onComplete(state.items.length);
   });
-  useResizeListener({
-    api: api,
-    onBeforeUnmount: onBeforeUnmount,
-    onMounted: onMounted,
-    parent: parent
+  parent.$on("updateItems", api2.updateItems);
+  parent.$on("complete", () => {
+    api2.onComplete(state.items.length);
   });
-  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;
-};
+  return api2;
+};
+export {
+  api,
+  renderless,
+  useActiveIndex,
+  useItems,
+  useResizeListener
+};

package/carousel-item/index.js

@@ -1,7 +1,5 @@
-export var processIndex = function processIndex(_ref) {
-  var activeIndex = _ref.activeIndex,
-    index = _ref.index,
-    length = _ref.length;
+import "../chunk-PKUHTIDK.js";
+const processIndex = ({ activeIndex, index, length }) => {
   if (activeIndex === 0 && index === length - 1) {
     return -1;
   } else if (activeIndex === length - 1 && index === 0) {
@@ -13,83 +11,60 @@ export var processIndex = function processIndex(_ref) {
   }
   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;
-  };
+const calculateTranslate = ({ CARD_SCALE, state }) => ({ activeIndex, index, 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;
-  };
+const translateItem = ({ api, CARD_SCALE, parent, state }) => ({ activeIndex, index, oldIndex }) => {
+  const parentHeight = parent.$parent.$el.offsetHeight;
+  const parentWidth = parent.$parent.$el.offsetWidth;
+  const vnode = parent.$parent;
+  const length = vnode.state.items.length;
+  const { TYPE_CARD, TYPE_VERTICAL } = parent.$constants;
+  if (vnode.type !== TYPE_CARD && oldIndex !== void 0) {
+    state.animating = index === activeIndex || index === oldIndex;
+  }
+  if (index !== activeIndex && length > 2 && vnode.loop) {
+    index = api.processIndex({ index, activeIndex, length });
+  }
+  if (vnode.type === TYPE_CARD) {
+    state.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
+    state.active = index === activeIndex;
+    state.translate = api.calculateTranslate({
+      index,
+      activeIndex,
+      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.findIndex(function (item) {
-        return item.$el === parent.$el;
-      });
-      vnode.setActiveItem(index);
-    }
-  };
+const handleItemClick = (parent) => () => {
+  const vnode = parent.$parent;
+  if (vnode && vnode.type === parent.$constants.TYPE_CARD) {
+    const index = vnode.state.items.findIndex((item) => item.$el === parent.$el);
+    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
-    };
+const computedTransform = ({ parent, TYPE_VERTICAL }) => (state) => {
+  const TRANSLATE = parent.$parent.type === TYPE_VERTICAL ? `translateY(${state.translate}px) scale(${state.scale})` : `translateX(${state.translate}px) scale(${state.scale})`;
+  return {
+    msTransform: TRANSLATE,
+    webkitTransform: TRANSLATE,
+    transform: TRANSLATE
   };
-};
+};
+export {
+  calculateTranslate,
+  computedTransform,
+  handleItemClick,
+  processIndex,
+  translateItem
+};

package/carousel-item/vue.js

@@ -1,16 +1,27 @@
-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({
+import "../chunk-PKUHTIDK.js";
+import { processIndex, calculateTranslate, translateItem, handleItemClick, computedTransform } from "./index";
+const api = [
+  "state",
+  "hover",
+  "translate",
+  "scale",
+  "active",
+  "ready",
+  "inStage",
+  "animating",
+  "isOblique",
+  "hasTitle",
+  "getTransform",
+  "processIndex",
+  "calculateTranslate",
+  "translateItem",
+  "handleItemClick"
+];
+const renderless = (props, { computed, onMounted, onUnmounted, reactive }, { parent, dispatch }) => {
+  const api2 = {};
+  const CARD_SCALE = parent.$constants.CARD_SCALE;
+  const TYPE_VERTICAL = parent.$constants.TYPE_VERTICAL;
+  const state = reactive({
     scale: 1,
     translate: 0,
     hover: false,
@@ -20,38 +31,27 @@ export var renderless = function renderless(props, _ref, _ref2) {
     animating: false,
     isOblique: false,
     carouselParent: parent.$parent,
-    hasTitle: computed(function () {
-      return !!props.title;
-    }),
-    getTransform: computed(function () {
-      return api.computedTransform(state);
-    })
+    hasTitle: computed(() => !!props.title),
+    getTransform: computed(() => api2.computedTransform(state))
   });
-  Object.assign(api, {
-    state: state,
-    processIndex: processIndex,
+  Object.assign(api2, {
+    state,
+    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
-    })
+    computedTransform: computedTransform({ parent, TYPE_VERTICAL }),
+    calculateTranslate: calculateTranslate({ CARD_SCALE, state }),
+    translateItem: translateItem({ api: api2, CARD_SCALE, parent, state })
   });
-  onMounted(function () {
-    dispatch('Carousel', 'updateItems', []);
-    dispatch('Carousel', 'complete', []);
+  onMounted(() => {
+    dispatch("Carousel", "updateItems", []);
+    dispatch("Carousel", "complete", []);
   });
-  onUnmounted(function () {
+  onUnmounted(() => {
     parent.$parent && parent.$parent.updateItems();
   });
-  return api;
-};
+  return api2;
+};
+export {
+  api,
+  renderless
+};