vft 0.0.376 → 0.0.378

package/es/components/carousel/index.js

@@ -2,18 +2,19 @@ import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "vue";
-import { withInstall as t, withNoopInstall as r } from "../../utils/vue/install.js";
+import { withInstall, withNoopInstall } from "../../utils/vue/install.js";
 import "lodash-es";
-import m from "./carousel.vue2.js";
-import o from "./carousel-item.vue2.js";
-import { CAROUSEL_ITEM_NAME as I, carouselContextKey as x } from "./constants.js";
-const _ = t(m, {
-  CarouselItem: o
-}), c = r(o);
+import _sfc_main$1 from "./carousel.vue2.js";
+import _sfc_main from "./carousel-item.vue2.js";
+import { CAROUSEL_ITEM_NAME, carouselContextKey } from "./constants.js";
+const VftCarousel = withInstall(_sfc_main$1, {
+  CarouselItem: _sfc_main
+});
+const VftCarouselItem = withNoopInstall(_sfc_main);
 export {
-  I as CAROUSEL_ITEM_NAME,
-  _ as VftCarousel,
-  c as VftCarouselItem,
-  x as carouselContextKey,
-  _ as default
+  CAROUSEL_ITEM_NAME,
+  VftCarousel,
+  VftCarouselItem,
+  carouselContextKey,
+  VftCarousel as default
 };

package/es/components/carousel/use-carousel-item.js

@@ -1,77 +1,131 @@
-import { inject as S, getCurrentInstance as U, ref as n, reactive as V, onBeforeUnmount as L, unref as u } from "vue";
+import { inject, getCurrentInstance, ref, reactive, onBeforeUnmount, unref } from "vue";
 import "@vueuse/core";
-import { isUndefined as R } from "@vft/utils";
-import { debugWarn as A } from "../../utils/error.js";
+import { isUndefined } from "@vft/utils";
+import { debugWarn } from "../../utils/error.js";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { carouselContextKey as j, CAROUSEL_ITEM_NAME as E } from "./constants.js";
-const F = (H) => {
-  const o = S(j), c = U();
-  o || A(
-    E,
-    "usage: <el-carousel></el-carousel-item></el-carousel>"
-  ), c || A(
-    E,
-    "compositional hook can only be invoked inside setups"
-  );
-  const h = n(), T = n(!1), f = n(0), C = n(1), i = n(!1), I = n(!1), m = n(!1), g = n(!1), { isCardType: d, isVertical: y, cardScale: p } = o;
-  function M(e, t, s) {
-    const r = s - 1, l = t - 1, a = t + 1, v = s / 2;
-    return t === 0 && e === r ? -1 : t === r && e === 0 ? s : e < l && t - e >= v ? s + 1 : e > a && e - t >= v ? -2 : e;
+import { carouselContextKey, CAROUSEL_ITEM_NAME } from "./constants.js";
+const useCarouselItem = (props) => {
+  const carouselContext = inject(carouselContextKey);
+  const instance = getCurrentInstance();
+  if (!carouselContext) {
+    debugWarn(
+      CAROUSEL_ITEM_NAME,
+      "usage: <el-carousel></el-carousel-item></el-carousel>"
+    );
   }
-  function N(e, t) {
-    const s = u(y) ? o.root.value?.offsetHeight || 0 : o.root.value?.offsetWidth || 0;
-    return m.value ? s * ((2 - p) * (e - t) + 1) / 4 : e < t ? -(1 + p) * s / 4 : (3 + p) * s / 4;
+  if (!instance) {
+    debugWarn(
+      CAROUSEL_ITEM_NAME,
+      "compositional hook can only be invoked inside setups"
+    );
   }
-  function W(e, t, s) {
-    const r = o.root.value;
-    return r ? ((s ? r.offsetHeight : r.offsetWidth) || 0) * (e - t) : 0;
+  const carouselItemRef = ref();
+  const hover = ref(false);
+  const translate = ref(0);
+  const scale = ref(1);
+  const active = ref(false);
+  const ready = ref(false);
+  const inStage = ref(false);
+  const animating = ref(false);
+  const { isCardType, isVertical, cardScale } = carouselContext;
+  function processIndex(index, activeIndex, length) {
+    const lastItemIndex = length - 1;
+    const prevItemIndex = activeIndex - 1;
+    const nextItemIndex = activeIndex + 1;
+    const halfItemIndex = length / 2;
+    if (activeIndex === 0 && index === lastItemIndex) {
+      return -1;
+    } else if (activeIndex === lastItemIndex && index === 0) {
+      return length;
+    } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
+      return length + 1;
+    } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
+      return -2;
+    }
+    return index;
+  }
+  function calcCardTranslate(index, activeIndex) {
+    const parentWidth = unref(isVertical) ? carouselContext.root.value?.offsetHeight || 0 : carouselContext.root.value?.offsetWidth || 0;
+    if (inStage.value) {
+      return parentWidth * ((2 - cardScale) * (index - activeIndex) + 1) / 4;
+    } else if (index < activeIndex) {
+      return -(1 + cardScale) * parentWidth / 4;
+    } else {
+      return (3 + cardScale) * parentWidth / 4;
+    }
+  }
+  function calcTranslate(index, activeIndex, isVertical2) {
+    const rootEl = carouselContext.root.value;
+    if (!rootEl) return 0;
+    const distance = (isVertical2 ? rootEl.offsetHeight : rootEl.offsetWidth) || 0;
+    return distance * (index - activeIndex);
   }
-  const _ = (e, t, s) => {
-    const r = u(d), l = o.items.value.length ?? Number.NaN, a = e === t;
-    !r && !R(s) && (g.value = a || e === s), !a && l > 2 && o.loop && (e = M(e, t, l));
-    const v = u(y);
-    i.value = a, r ? (m.value = Math.round(Math.abs(e - t)) <= 1, f.value = N(e, t), C.value = u(i) ? 1 : p) : f.value = W(e, t, v), I.value = !0, a && h.value && o.setContainerHeight(h.value.offsetHeight);
+  const translateItem = (index, activeIndex, oldIndex) => {
+    const _isCardType = unref(isCardType);
+    const carouselItemLength = carouselContext.items.value.length ?? Number.NaN;
+    const isActive = index === activeIndex;
+    if (!_isCardType && !isUndefined(oldIndex)) {
+      animating.value = isActive || index === oldIndex;
+    }
+    if (!isActive && carouselItemLength > 2 && carouselContext.loop) {
+      index = processIndex(index, activeIndex, carouselItemLength);
+    }
+    const _isVertical = unref(isVertical);
+    active.value = isActive;
+    if (_isCardType) {
+      inStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
+      translate.value = calcCardTranslate(index, activeIndex);
+      scale.value = unref(active) ? 1 : cardScale;
+    } else {
+      translate.value = calcTranslate(index, activeIndex, _isVertical);
+    }
+    ready.value = true;
+    if (isActive && carouselItemRef.value) {
+      carouselContext.setContainerHeight(carouselItemRef.value.offsetHeight);
+    }
   };
-  function k() {
-    if (o && u(d)) {
-      const e = o.items.value.findIndex(
-        ({ uid: t }) => t === c.uid
+  function handleItemClick() {
+    if (carouselContext && unref(isCardType)) {
+      const index = carouselContext.items.value.findIndex(
+        ({ uid }) => uid === instance.uid
       );
-      o.setActiveItem(e);
+      carouselContext.setActiveItem(index);
     }
   }
-  const b = {
-    props: H,
-    states: V({
-      hover: T,
-      translate: f,
-      scale: C,
-      active: i,
-      ready: I,
-      inStage: m,
-      animating: g
+  const carouselItemContext = {
+    props,
+    states: reactive({
+      hover,
+      translate,
+      scale,
+      active,
+      ready,
+      inStage,
+      animating
     }),
-    uid: c.uid,
-    getVnode: () => c.vnode,
-    translateItem: _
+    uid: instance.uid,
+    getVnode: () => instance.vnode,
+    translateItem
   };
-  return o.addItem(b), L(() => {
-    o.removeItem(b);
-  }), {
-    carouselItemRef: h,
-    active: i,
-    animating: g,
-    hover: T,
-    inStage: m,
-    isVertical: y,
-    translate: f,
-    isCardType: d,
-    scale: C,
-    ready: I,
-    handleItemClick: k
+  carouselContext.addItem(carouselItemContext);
+  onBeforeUnmount(() => {
+    carouselContext.removeItem(carouselItemContext);
+  });
+  return {
+    carouselItemRef,
+    active,
+    animating,
+    hover,
+    inStage,
+    isVertical,
+    translate,
+    isCardType,
+    scale,
+    ready,
+    handleItemClick
   };
 };
 export {
-  F as useCarouselItem
+  useCarouselItem
 };

package/es/components/carousel/use-carousel.js

@@ -1,190 +1,286 @@
-import { getCurrentInstance as ae, useSlots as oe, ref as u, computed as f, unref as g, watch as m, shallowRef as re, onMounted as ie, onBeforeUnmount as ue, provide as se, isVNode as ce } from "vue";
-import { throttle as N } from "lodash-es";
-import { useResizeObserver as ve } from "@vueuse/core";
-import { isString as fe } from "@vft/utils";
-import { debugWarn as me } from "../../utils/error.js";
+import { getCurrentInstance, useSlots, ref, computed, unref, watch, shallowRef, onMounted, onBeforeUnmount, provide, isVNode } from "vue";
+import { throttle } from "lodash-es";
+import { useResizeObserver } from "@vueuse/core";
+import { isString } from "@vft/utils";
+import { debugWarn } from "../../utils/error.js";
 import "../config-provider/hooks/use-global-config.js";
-import { CHANGE_EVENT as he } from "../../constants/event.js";
-import { flattedChildren as de } from "../../utils/vue/vnode.js";
+import { CHANGE_EVENT } from "../../constants/event.js";
+import { flattedChildren } from "../../utils/vue/vnode.js";
 import "../../hooks/use-model-toggle/index.js";
-import { useOrderedChildren as Ie } from "../../hooks/use-ordered-children/index.js";
+import { useOrderedChildren } from "../../hooks/use-ordered-children/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { CAROUSEL_ITEM_NAME as H, carouselContextKey as ge } from "./constants.js";
-const L = 300, _e = (t, O, M) => {
+import { CAROUSEL_ITEM_NAME, carouselContextKey } from "./constants.js";
+const THROTTLE_TIME = 300;
+const useCarousel = (props, emit, componentName) => {
   const {
-    children: o,
-    addChild: _,
-    removeChild: R,
-    ChildrenSorter: z
-  } = Ie(
-    ae(),
-    H
-  ), B = oe(), l = u(-1), s = u(null), S = u(!1), h = u(), w = u(0), c = u(!0), P = f(
-    () => t.arrow !== "never" && !g(v)
-  ), V = f(() => o.value.some(
-    (e) => e.props.label && e.props.label?.toString().length > 0
-  )), C = f(() => t.type === "card"), v = f(() => t.direction === "vertical"), k = f(() => t.height !== "auto" ? {
-    height: t.height
-  } : {
-    height: `${w.value}px`,
-    overflow: "hidden"
-  }), U = N(
-    (e) => {
-      i(e);
+    children: items,
+    addChild: addItem,
+    removeChild: removeItem,
+    ChildrenSorter: ItemsSorter
+  } = useOrderedChildren(
+    getCurrentInstance(),
+    CAROUSEL_ITEM_NAME
+  );
+  const slots = useSlots();
+  const activeIndex = ref(-1);
+  const timer = ref(null);
+  const hover = ref(false);
+  const root = ref();
+  const containerHeight = ref(0);
+  const isItemsTwoLength = ref(true);
+  const arrowDisplay = computed(
+    () => props.arrow !== "never" && !unref(isVertical)
+  );
+  const hasLabel = computed(() => {
+    return items.value.some(
+      (item) => item.props.label && item.props.label?.toString().length > 0
+    );
+  });
+  const isCardType = computed(() => props.type === "card");
+  const isVertical = computed(() => props.direction === "vertical");
+  const containerStyle = computed(() => {
+    if (props.height !== "auto") {
+      return {
+        height: props.height
+      };
+    }
+    return {
+      height: `${containerHeight.value}px`,
+      overflow: "hidden"
+    };
+  });
+  const throttledArrowClick = throttle(
+    (index) => {
+      setActiveItem(index);
     },
-    L,
-    { trailing: !0 }
-  ), D = N((e) => {
-    Q(e);
-  }, L), F = (e) => c.value ? l.value <= 1 ? e <= 1 : e > 1 : !0;
-  function d() {
-    s.value && (clearInterval(s.value), s.value = null);
-  }
-  function I() {
-    t.interval <= 0 || !t.autoplay || s.value || (s.value = setInterval(() => G(), t.interval));
-  }
-  const G = () => {
-    l.value < o.value.length - 1 ? l.value = l.value + 1 : t.loop && (l.value = 0);
+    THROTTLE_TIME,
+    { trailing: true }
+  );
+  const throttledIndicatorHover = throttle((index) => {
+    handleIndicatorHover(index);
+  }, THROTTLE_TIME);
+  const isTwoLengthShow = (index) => {
+    if (!isItemsTwoLength.value) return true;
+    return activeIndex.value <= 1 ? index <= 1 : index > 1;
+  };
+  function pauseTimer() {
+    if (timer.value) {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+  }
+  function startTimer() {
+    if (props.interval <= 0 || !props.autoplay || timer.value) return;
+    timer.value = setInterval(() => playSlides(), props.interval);
+  }
+  const playSlides = () => {
+    if (activeIndex.value < items.value.length - 1) {
+      activeIndex.value = activeIndex.value + 1;
+    } else if (props.loop) {
+      activeIndex.value = 0;
+    }
   };
-  function i(e) {
-    if (fe(e)) {
-      const r = o.value.filter(
-        (b) => b.props.name === e
+  function setActiveItem(index) {
+    if (isString(index)) {
+      const filteredItems = items.value.filter(
+        (item) => item.props.name === index
       );
-      r.length > 0 && (e = o.value.indexOf(r[0]));
+      if (filteredItems.length > 0) {
+        index = items.value.indexOf(filteredItems[0]);
+      }
     }
-    if (e = Number(e), Number.isNaN(e) || e !== Math.floor(e)) {
-      me(M, "index must be integer.");
+    index = Number(index);
+    if (Number.isNaN(index) || index !== Math.floor(index)) {
+      debugWarn(componentName, "index must be integer.");
       return;
     }
-    const n = o.value.length, a = l.value;
-    e < 0 ? l.value = t.loop ? n - 1 : 0 : e >= n ? l.value = t.loop ? 0 : n - 1 : l.value = e, a === l.value && E(a), y();
+    const itemCount = items.value.length;
+    const oldIndex = activeIndex.value;
+    if (index < 0) {
+      activeIndex.value = props.loop ? itemCount - 1 : 0;
+    } else if (index >= itemCount) {
+      activeIndex.value = props.loop ? 0 : itemCount - 1;
+    } else {
+      activeIndex.value = index;
+    }
+    if (oldIndex === activeIndex.value) {
+      resetItemPosition(oldIndex);
+    }
+    resetTimer();
   }
-  function E(e) {
-    o.value.forEach((n, a) => {
-      n.translateItem(a, l.value, e);
+  function resetItemPosition(oldIndex) {
+    items.value.forEach((item, index) => {
+      item.translateItem(index, activeIndex.value, oldIndex);
     });
   }
-  function K(e, n) {
-    const a = g(o), r = a.length;
-    if (r === 0 || !e.states.inStage) return !1;
-    const b = n + 1, p = n - 1, A = r - 1, ee = a[A].states.active, te = a[0].states.active, ne = a[b]?.states?.active, le = a[p]?.states?.active;
-    return n === A && te || ne ? "left" : n === 0 && ee || le ? "right" : !1;
+  function itemInStage(item, index) {
+    const _items = unref(items);
+    const itemCount = _items.length;
+    if (itemCount === 0 || !item.states.inStage) return false;
+    const nextItemIndex = index + 1;
+    const prevItemIndex = index - 1;
+    const lastItemIndex = itemCount - 1;
+    const isLastItemActive = _items[lastItemIndex].states.active;
+    const isFirstItemActive = _items[0].states.active;
+    const isNextItemActive = _items[nextItemIndex]?.states?.active;
+    const isPrevItemActive = _items[prevItemIndex]?.states?.active;
+    if (index === lastItemIndex && isFirstItemActive || isNextItemActive) {
+      return "left";
+    } else if (index === 0 && isLastItemActive || isPrevItemActive) {
+      return "right";
+    }
+    return false;
   }
-  function W() {
-    S.value = !0, t.pauseOnHover && d();
+  function handleMouseEnter() {
+    hover.value = true;
+    if (props.pauseOnHover) {
+      pauseTimer();
+    }
   }
-  function $() {
-    S.value = !1, I();
+  function handleMouseLeave() {
+    hover.value = false;
+    startTimer();
   }
-  function j(e) {
-    g(v) || o.value.forEach((n, a) => {
-      e === K(n, a) && (n.states.hover = !0);
+  function handleButtonEnter(arrow) {
+    if (unref(isVertical)) return;
+    items.value.forEach((item, index) => {
+      if (arrow === itemInStage(item, index)) {
+        item.states.hover = true;
+      }
     });
   }
-  function q() {
-    g(v) || o.value.forEach((e) => {
-      e.states.hover = !1;
+  function handleButtonLeave() {
+    if (unref(isVertical)) return;
+    items.value.forEach((item) => {
+      item.states.hover = false;
     });
   }
-  function J(e) {
-    l.value = e;
+  function handleIndicatorClick(index) {
+    activeIndex.value = index;
   }
-  function Q(e) {
-    t.trigger === "hover" && e !== l.value && (l.value = e);
+  function handleIndicatorHover(index) {
+    if (props.trigger === "hover" && index !== activeIndex.value) {
+      activeIndex.value = index;
+    }
   }
-  function X() {
-    i(l.value - 1);
+  function prev() {
+    setActiveItem(activeIndex.value - 1);
   }
-  function Y() {
-    i(l.value + 1);
+  function next() {
+    setActiveItem(activeIndex.value + 1);
   }
-  function y() {
-    d(), t.pauseOnHover || I();
+  function resetTimer() {
+    pauseTimer();
+    if (!props.pauseOnHover) startTimer();
   }
-  function Z(e) {
-    t.height === "auto" && (w.value = e);
+  function setContainerHeight(height) {
+    if (props.height !== "auto") return;
+    containerHeight.value = height;
   }
-  function x() {
-    const e = B.default?.();
-    if (!e) return null;
-    const a = de(e).filter((r) => ce(r) && r.type.name === H);
-    return a?.length === 2 && t.loop && !C.value ? (c.value = !0, a) : (c.value = !1, null);
+  function PlaceholderItem() {
+    const defaultSlots = slots.default?.();
+    if (!defaultSlots) return null;
+    const flatSlots = flattedChildren(defaultSlots);
+    const normalizeSlots = flatSlots.filter((slot) => {
+      return isVNode(slot) && slot.type.name === CAROUSEL_ITEM_NAME;
+    });
+    if (normalizeSlots?.length === 2 && props.loop && !isCardType.value) {
+      isItemsTwoLength.value = true;
+      return normalizeSlots;
+    }
+    isItemsTwoLength.value = false;
+    return null;
   }
-  m(
-    () => l.value,
-    (e, n) => {
-      E(n), c.value && (e = e % 2, n = n % 2), n > -1 && O(he, e, n);
+  watch(
+    () => activeIndex.value,
+    (current, prev2) => {
+      resetItemPosition(prev2);
+      if (isItemsTwoLength.value) {
+        current = current % 2;
+        prev2 = prev2 % 2;
+      }
+      if (prev2 > -1) {
+        emit(CHANGE_EVENT, current, prev2);
+      }
     }
-  ), m(
-    () => t.autoplay,
-    (e) => {
-      e ? I() : d();
+  );
+  watch(
+    () => props.autoplay,
+    (autoplay) => {
+      autoplay ? startTimer() : pauseTimer();
     }
-  ), m(
-    () => t.loop,
+  );
+  watch(
+    () => props.loop,
     () => {
-      i(l.value);
+      setActiveItem(activeIndex.value);
     }
-  ), m(
-    () => t.interval,
+  );
+  watch(
+    () => props.interval,
     () => {
-      y();
+      resetTimer();
     }
   );
-  const T = re();
-  return ie(() => {
-    m(
-      () => o.value,
+  const resizeObserver = shallowRef();
+  onMounted(() => {
+    watch(
+      () => items.value,
       () => {
-        o.value.length > 0 && i(t.initialIndex);
+        if (items.value.length > 0) setActiveItem(props.initialIndex);
       },
       {
-        immediate: !0
+        immediate: true
       }
-    ), T.value = ve(h.value, () => {
-      E();
-    }), I();
-  }), ue(() => {
-    d(), h.value && T.value && T.value.stop();
-  }), se(ge, {
-    root: h,
-    isCardType: C,
-    isVertical: v,
-    items: o,
-    loop: t.loop,
-    cardScale: t.cardScale,
-    addItem: _,
-    removeItem: R,
-    setActiveItem: i,
-    setContainerHeight: Z
-  }), {
-    root: h,
-    activeIndex: l,
-    arrowDisplay: P,
-    hasLabel: V,
-    hover: S,
-    isCardType: C,
-    items: o,
-    isVertical: v,
-    containerStyle: k,
-    isItemsTwoLength: c,
-    handleButtonEnter: j,
-    handleButtonLeave: q,
-    handleIndicatorClick: J,
-    handleMouseEnter: W,
-    handleMouseLeave: $,
-    setActiveItem: i,
-    prev: X,
-    next: Y,
-    PlaceholderItem: x,
-    isTwoLengthShow: F,
-    ItemsSorter: z,
-    throttledArrowClick: U,
-    throttledIndicatorHover: D
+    );
+    resizeObserver.value = useResizeObserver(root.value, () => {
+      resetItemPosition();
+    });
+    startTimer();
+  });
+  onBeforeUnmount(() => {
+    pauseTimer();
+    if (root.value && resizeObserver.value) resizeObserver.value.stop();
+  });
+  provide(carouselContextKey, {
+    root,
+    isCardType,
+    isVertical,
+    items,
+    loop: props.loop,
+    cardScale: props.cardScale,
+    addItem,
+    removeItem,
+    setActiveItem,
+    setContainerHeight
+  });
+  return {
+    root,
+    activeIndex,
+    arrowDisplay,
+    hasLabel,
+    hover,
+    isCardType,
+    items,
+    isVertical,
+    containerStyle,
+    isItemsTwoLength,
+    handleButtonEnter,
+    handleButtonLeave,
+    handleIndicatorClick,
+    handleMouseEnter,
+    handleMouseLeave,
+    setActiveItem,
+    prev,
+    next,
+    PlaceholderItem,
+    isTwoLengthShow,
+    ItemsSorter,
+    throttledArrowClick,
+    throttledIndicatorHover
   };
 };
 export {
-  _e as useCarousel
+  useCarousel
 };