vft 0.0.362 → 0.0.363

package/es/components/carousel/carousel.vue2.js

@@ -1,203 +1,222 @@
-import { defineComponent as E, getCurrentInstance as _, computed as T, unref as e, createElementBlock as u, openBlock as a, withModifiers as m, normalizeClass as s, createBlock as L, createCommentVNode as p, createElementVNode as i, createVNode as v, Transition as V, withCtx as y, withDirectives as g, vShow as h, normalizeStyle as ee, renderSlot as te, Fragment as oe, renderList as ne, toDisplayString as re } from "vue";
-import { VftIcon as D } from "../icon/index.js";
-import "@vueuse/core";
-import "@vft/utils";
-import "../config-provider/hooks/use-global-config.js";
-import "lodash-es";
-import { useNamespace as ie } from "../../hooks/use-namespace/index.js";
-import "../../hooks/use-model-toggle/index.js";
-import "@popperjs/core";
-import "../../hooks/use-z-index/index.js";
-import { useCarousel as ae } from "./use-carousel.js";
-const se = ["onMouseenter", "onClick"], le = { key: 0 }, ue = {
+import { defineComponent, getCurrentInstance, computed, unref, createElementBlock, openBlock, withModifiers, normalizeClass, createBlock, createCommentVNode, createElementVNode, createVNode, Transition, withCtx, withDirectives, vShow, normalizeStyle, renderSlot, Fragment, renderList, toDisplayString } from "vue";
+import { VftIcon } from "../icon/index.js";
+import { useCarousel } from "./use-carousel.js";
+import { useNamespace } from "../../hooks/use-namespace/index.js";
+const _hoisted_1 = ["onMouseenter", "onClick"];
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = {
   key: 2,
   xmlns: "http://www.w3.org/2000/svg",
   version: "1.1",
-  style: { display: "none" }
-}, de = E({
+  style: { "display": "none" }
+};
+const __default__ = defineComponent({
   name: "vft-carousel"
-}), Be = /* @__PURE__ */ E({
-  ...de,
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
     initialIndex: { default: 0 },
     height: { default: "" },
     trigger: { default: "hover" },
-    autoplay: { type: Boolean, default: !0 },
+    autoplay: { type: Boolean, default: true },
     interval: { default: 3e3 },
     indicatorPosition: { default: "" },
     arrow: { default: "hover" },
     type: { default: "" },
-    loop: { type: Boolean, default: !0 },
+    loop: { type: Boolean, default: true },
     direction: { default: "horizontal" },
-    pauseOnHover: { type: Boolean, default: !0 },
-    motionBlur: { type: Boolean, default: !1 },
+    pauseOnHover: { type: Boolean, default: true },
+    motionBlur: { type: Boolean, default: false },
     cardScale: { default: 0.83 }
   },
   emits: ["change"],
-  setup(d, { expose: z, emit: G }) {
-    const t = ie("carousel"), N = G, P = _(), {
-      root: H,
-      activeIndex: l,
-      arrowDisplay: k,
-      hasLabel: C,
-      hover: B,
-      isCardType: A,
-      items: b,
-      isVertical: w,
-      containerStyle: F,
-      handleButtonEnter: M,
-      handleButtonLeave: f,
-      handleIndicatorClick: O,
-      handleMouseEnter: S,
-      handleMouseLeave: $,
-      setActiveItem: j,
-      prev: q,
-      next: J,
-      PlaceholderItem: K,
-      isTwoLengthShow: Q,
-      ItemsSorter: R,
-      throttledArrowClick: I,
-      throttledIndicatorHover: U
-    } = ae(P.props, N, t.b()), W = T(() => {
-      const n = [t.b(), t.m(d.direction)];
-      return e(A) && n.push(t.m("card")), n;
-    }), X = T(() => {
-      const n = [t.e("indicators"), t.em("indicators", d.direction)];
-      return e(C) && n.push(t.em("indicators", "labels")), d.indicatorPosition === "outside" && n.push(t.em("indicators", "outside")), e(w) && n.push(t.em("indicators", "right")), n;
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ns = useNamespace("carousel");
+    const emit = __emit;
+    const instance = getCurrentInstance();
+    const {
+      root,
+      activeIndex,
+      arrowDisplay,
+      hasLabel,
+      hover,
+      isCardType,
+      items,
+      isVertical,
+      containerStyle,
+      handleButtonEnter,
+      handleButtonLeave,
+      handleIndicatorClick,
+      handleMouseEnter,
+      handleMouseLeave,
+      setActiveItem,
+      prev,
+      next,
+      PlaceholderItem,
+      isTwoLengthShow,
+      ItemsSorter,
+      throttledArrowClick,
+      throttledIndicatorHover
+    } = useCarousel(instance.props, emit, ns.b());
+    const carouselClasses = computed(() => {
+      const classes = [ns.b(), ns.m(__props.direction)];
+      if (unref(isCardType)) {
+        classes.push(ns.m("card"));
+      }
+      return classes;
     });
-    function Y(n) {
-      if (!d.motionBlur) return;
-      const o = e(w) ? `${t.namespace.value}-transitioning-vertical` : `${t.namespace.value}-transitioning`;
-      n.currentTarget.classList.add(o);
+    const indicatorsClasses = computed(() => {
+      const classes = [ns.e("indicators"), ns.em("indicators", __props.direction)];
+      if (unref(hasLabel)) {
+        classes.push(ns.em("indicators", "labels"));
+      }
+      if (__props.indicatorPosition === "outside") {
+        classes.push(ns.em("indicators", "outside"));
+      }
+      if (unref(isVertical)) {
+        classes.push(ns.em("indicators", "right"));
+      }
+      return classes;
+    });
+    function handleTransitionStart(e) {
+      if (!__props.motionBlur) return;
+      const kls = unref(isVertical) ? `${ns.namespace.value}-transitioning-vertical` : `${ns.namespace.value}-transitioning`;
+      e.currentTarget.classList.add(kls);
     }
-    function Z(n) {
-      if (!d.motionBlur) return;
-      const o = e(w) ? `${t.namespace.value}-transitioning-vertical` : `${t.namespace.value}-transitioning`;
-      n.currentTarget.classList.remove(o);
+    function handleTransitionEnd(e) {
+      if (!__props.motionBlur) return;
+      const kls = unref(isVertical) ? `${ns.namespace.value}-transitioning-vertical` : `${ns.namespace.value}-transitioning`;
+      e.currentTarget.classList.remove(kls);
     }
-    return z({
+    __expose({
       /** @description active slide index */
-      activeIndex: l,
+      activeIndex,
       /** @description manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` */
-      setActiveItem: j,
+      setActiveItem,
       /** @description switch to the previous slide */
-      prev: q,
+      prev,
       /** @description switch to the next slide */
-      next: J
-    }), (n, o) => (a(), u("div", {
-      ref_key: "root",
-      ref: H,
-      class: s(W.value),
-      onMouseenter: o[6] || (o[6] = m(
-        //@ts-ignore
-        (...r) => e(S) && e(S)(...r),
-        ["stop"]
-      )),
-      onMouseleave: o[7] || (o[7] = m(
-        //@ts-ignore
-        (...r) => e($) && e($)(...r),
-        ["stop"]
-      ))
-    }, [
-      e(k) ? (a(), L(V, {
-        key: 0,
-        name: "carousel-arrow-left"
-      }, {
-        default: y(() => [
-          g(i("button", {
-            type: "button",
-            class: s([e(t).e("arrow"), e(t).em("arrow", "left")]),
-            onMouseenter: o[0] || (o[0] = (r) => e(M)("left")),
-            onMouseleave: o[1] || (o[1] = //@ts-ignore
-            (...r) => e(f) && e(f)(...r)),
-            onClick: o[2] || (o[2] = m((r) => e(I)(e(l) - 1), ["stop"]))
-          }, [
-            v(e(D), { icon: "ico-ep:arrow-left" })
-          ], 34), [
-            [h, (n.arrow === "always" || e(B)) && (n.loop || e(l) > 0)]
-          ])
-        ]),
-        _: 1
-      })) : p("", !0),
-      e(k) ? (a(), L(V, {
-        key: 1,
-        name: "carousel-arrow-right"
-      }, {
-        default: y(() => [
-          g(i("button", {
-            type: "button",
-            class: s([e(t).e("arrow"), e(t).em("arrow", "right")]),
-            onMouseenter: o[3] || (o[3] = (r) => e(M)("right")),
-            onMouseleave: o[4] || (o[4] = //@ts-ignore
-            (...r) => e(f) && e(f)(...r)),
-            onClick: o[5] || (o[5] = m((r) => e(I)(e(l) + 1), ["stop"]))
-          }, [
-            v(e(D), { icon: "ico-ep:arrow-right" })
-          ], 34), [
-            [
-              h,
-              (n.arrow === "always" || e(B)) && (n.loop || e(l) < e(b).length - 1)
-            ]
-          ])
-        ]),
-        _: 1
-      })) : p("", !0),
-      i("div", {
-        class: s(e(t).e("container")),
-        style: ee(e(F)),
-        onTransitionstart: Y,
-        onTransitionend: Z
+      next
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        class: normalizeClass(carouselClasses.value),
+        onMouseenter: _cache[6] || (_cache[6] = withModifiers(
+          //@ts-ignore
+          (...args) => unref(handleMouseEnter) && unref(handleMouseEnter)(...args),
+          ["stop"]
+        )),
+        onMouseleave: _cache[7] || (_cache[7] = withModifiers(
+          //@ts-ignore
+          (...args) => unref(handleMouseLeave) && unref(handleMouseLeave)(...args),
+          ["stop"]
+        ))
       }, [
-        v(e(K)),
-        te(n.$slots, "default")
-      ], 38),
-      v(e(R), null, {
-        default: y(() => [
-          n.indicatorPosition !== "none" ? (a(), u("ul", {
-            key: 0,
-            class: s(X.value)
-          }, [
-            (a(!0), u(oe, null, ne(e(b), (r, c) => g((a(), u("li", {
-              key: c,
-              class: s([
-                e(t).e("indicator"),
-                e(t).em("indicator", n.direction),
-                e(t).is("active", c === e(l))
-              ]),
-              onMouseenter: (x) => e(U)(c),
-              onClick: m((x) => e(O)(c), ["stop"])
+        unref(arrowDisplay) ? (openBlock(), createBlock(Transition, {
+          key: 0,
+          name: "carousel-arrow-left"
+        }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("button", {
+              type: "button",
+              class: normalizeClass([unref(ns).e("arrow"), unref(ns).em("arrow", "left")]),
+              onMouseenter: _cache[0] || (_cache[0] = ($event) => unref(handleButtonEnter)("left")),
+              onMouseleave: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => unref(handleButtonLeave) && unref(handleButtonLeave)(...args)),
+              onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(throttledArrowClick)(unref(activeIndex) - 1), ["stop"]))
+            }, [
+              createVNode(unref(VftIcon), { icon: "ico-ep:arrow-left" })
+            ], 34), [
+              [vShow, (_ctx.arrow === "always" || unref(hover)) && (_ctx.loop || unref(activeIndex) > 0)]
+            ])
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        unref(arrowDisplay) ? (openBlock(), createBlock(Transition, {
+          key: 1,
+          name: "carousel-arrow-right"
+        }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("button", {
+              type: "button",
+              class: normalizeClass([unref(ns).e("arrow"), unref(ns).em("arrow", "right")]),
+              onMouseenter: _cache[3] || (_cache[3] = ($event) => unref(handleButtonEnter)("right")),
+              onMouseleave: _cache[4] || (_cache[4] = //@ts-ignore
+              (...args) => unref(handleButtonLeave) && unref(handleButtonLeave)(...args)),
+              onClick: _cache[5] || (_cache[5] = withModifiers(($event) => unref(throttledArrowClick)(unref(activeIndex) + 1), ["stop"]))
+            }, [
+              createVNode(unref(VftIcon), { icon: "ico-ep:arrow-right" })
+            ], 34), [
+              [
+                vShow,
+                (_ctx.arrow === "always" || unref(hover)) && (_ctx.loop || unref(activeIndex) < unref(items).length - 1)
+              ]
+            ])
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(unref(ns).e("container")),
+          style: normalizeStyle(unref(containerStyle)),
+          onTransitionstart: handleTransitionStart,
+          onTransitionend: handleTransitionEnd
+        }, [
+          createVNode(unref(PlaceholderItem)),
+          renderSlot(_ctx.$slots, "default")
+        ], 38),
+        createVNode(unref(ItemsSorter), null, {
+          default: withCtx(() => [
+            _ctx.indicatorPosition !== "none" ? (openBlock(), createElementBlock("ul", {
+              key: 0,
+              class: normalizeClass(indicatorsClasses.value)
             }, [
-              i("button", {
-                class: s(e(t).e("button"))
-              }, [
-                e(C) ? (a(), u("span", le, re(r.label), 1)) : p("", !0)
-              ], 2)
-            ], 42, se)), [
-              [h, e(Q)(c)]
-            ])), 128))
-          ], 2)) : p("", !0)
-        ]),
-        _: 1
-      }),
-      n.motionBlur ? (a(), u("svg", ue, o[8] || (o[8] = [
-        i("defs", null, [
-          i("filter", { id: "elCarouselHorizontal" }, [
-            i("feGaussianBlur", {
-              in: "SourceGraphic",
-              stdDeviation: "12,0"
-            })
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (item, index) => {
+                return withDirectives((openBlock(), createElementBlock("li", {
+                  key: index,
+                  class: normalizeClass([
+                    unref(ns).e("indicator"),
+                    unref(ns).em("indicator", _ctx.direction),
+                    unref(ns).is("active", index === unref(activeIndex))
+                  ]),
+                  onMouseenter: ($event) => unref(throttledIndicatorHover)(index),
+                  onClick: withModifiers(($event) => unref(handleIndicatorClick)(index), ["stop"])
+                }, [
+                  createElementVNode("button", {
+                    class: normalizeClass(unref(ns).e("button"))
+                  }, [
+                    unref(hasLabel) ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(item.label), 1)) : createCommentVNode("", true)
+                  ], 2)
+                ], 42, _hoisted_1)), [
+                  [vShow, unref(isTwoLengthShow)(index)]
+                ]);
+              }), 128))
+            ], 2)) : createCommentVNode("", true)
           ]),
-          i("filter", { id: "elCarouselVertical" }, [
-            i("feGaussianBlur", {
-              in: "SourceGraphic",
-              stdDeviation: "0,10"
-            })
-          ])
-        ], -1)
-      ]))) : p("", !0)
-    ], 34));
+          _: 1
+        }),
+        _ctx.motionBlur ? (openBlock(), createElementBlock("svg", _hoisted_3, _cache[8] || (_cache[8] = [
+          createElementVNode("defs", null, [
+            createElementVNode("filter", { id: "elCarouselHorizontal" }, [
+              createElementVNode("feGaussianBlur", {
+                in: "SourceGraphic",
+                stdDeviation: "12,0"
+              })
+            ]),
+            createElementVNode("filter", { id: "elCarouselVertical" }, [
+              createElementVNode("feGaussianBlur", {
+                in: "SourceGraphic",
+                stdDeviation: "0,10"
+              })
+            ])
+          ], -1)
+        ]))) : createCommentVNode("", true)
+      ], 34);
+    };
   }
 });
 export {
-  Be as default
+  _sfc_main as default
 };

package/es/components/carousel/constants.js

@@ -1,5 +1,6 @@
-const e = Symbol("carouselContextKey"), o = "VftCarouselItem";
+const carouselContextKey = Symbol("carouselContextKey");
+const CAROUSEL_ITEM_NAME = "VftCarouselItem";
 export {
-  o as CAROUSEL_ITEM_NAME,
-  e as carouselContextKey
+  CAROUSEL_ITEM_NAME,
+  carouselContextKey
 };

package/es/components/carousel/index.js

@@ -1,19 +1,15 @@
-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 "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";
+import { withInstall, withNoopInstall } from "../../utils/vue/install.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/style/css.js

@@ -1,2 +1 @@
-import "vft/theme-style/base.css";
-import "vft/theme-style/vft-carousel.css";
+

package/es/components/carousel/style/index.js

@@ -1,2 +1 @@
-import "vft/theme-style/src/base.scss";
-import "vft/theme-style/src/carousel.scss";
+

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

@@ -1,77 +1,128 @@
-import { inject as S, getCurrentInstance as U, ref as n, reactive as V, onBeforeUnmount as L, unref as u } from "vue";
-import "@vueuse/core";
-import { isUndefined as R } from "@vft/utils";
-import { debugWarn as A } 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 { inject, getCurrentInstance, ref, reactive, onBeforeUnmount, unref } from "vue";
+import { isUndefined } from "@vft/utils";
+import { carouselContextKey, CAROUSEL_ITEM_NAME } from "./constants.js";
+import { debugWarn } from "../../utils/error.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
 };