vft 0.0.252 → 0.0.253

package/es/components/carousel/carousel-item.vue.d.ts

@@ -1,7 +1,4 @@
-export interface CarouselItemProps {
-    name?: string;
-    label?: string | number;
-}
+import type { CarouselItemProps } from './types';
 declare function __VLS_template(): {
     default?(_: {}): any;
 };

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

@@ -1,70 +1,70 @@
-import { defineComponent as d, computed as h, unref as e, withDirectives as l, createElementBlock as c, openBlock as p, normalizeStyle as T, normalizeClass as u, createCommentVNode as V, renderSlot as E, vShow as f } from "vue";
+import { defineComponent as d, computed as m, unref as e, withDirectives as c, createElementBlock as u, openBlock as p, normalizeStyle as w, normalizeClass as v, createCommentVNode as x, renderSlot as z, vShow as f } from "vue";
 import "@vueuse/core";
 import "@vft/utils";
 import "../../utils/ns-cover.js";
 import "lodash-es";
-import { useNamespace as w } from "../../hooks/use-namespace/index.js";
+import { useNamespace as B } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { useCarouselItem as x } from "./use-carousel-item.js";
-const z = "VftCarouselItem", B = d({
+import { useCarouselItem as N } from "./use-carousel-item.js";
+const R = d({
   name: "VftCarouselItem"
-}), F = /* @__PURE__ */ d({
-  ...B,
+}), H = /* @__PURE__ */ d({
+  ...R,
   props: {
     name: {},
     label: {}
   },
-  setup(v) {
-    const C = v, t = w("carousel"), {
-      carouselItemRef: y,
+  setup(y) {
+    const C = y, t = B("carousel"), {
+      carouselItemRef: _,
       active: o,
-      animating: _,
-      hover: k,
-      inStage: I,
-      isVertical: n,
-      translate: N,
-      isCardType: a,
-      scale: S,
-      ready: $,
-      handleItemClick: i
-    } = x(C, z), g = h(() => {
-      const r = `${`translate${e(n) ? "Y" : "X"}`}(${e(N)}px)`, s = `scale(${e(S)})`;
+      animating: k,
+      hover: I,
+      inStage: S,
+      isVertical: l,
+      translate: $,
+      isCardType: r,
+      scale: g,
+      ready: h,
+      handleItemClick: n
+    } = N(C), T = m(() => [
+      t.e("item"),
+      t.is("active", o.value),
+      t.is("in-stage", S.value),
+      t.is("hover", I.value),
+      t.is("animating", k.value),
+      {
+        [t.em("item", "card")]: r.value,
+        [t.em("item", "card-vertical")]: r.value && l.value
+      }
+    ]), V = m(() => {
+      const a = `${`translate${e(l) ? "Y" : "X"}`}(${e($)}px)`, s = `scale(${e(g)})`;
       return {
-        transform: [r, s].join(" ")
+        transform: [a, s].join(" ")
       };
     });
-    return (m, r) => l((p(), c("div", {
+    return (i, a) => c((p(), u("div", {
       ref_key: "carouselItemRef",
-      ref: y,
-      class: u([
-        e(t).e("item"),
-        e(t).is("active", e(o)),
-        e(t).is("in-stage", e(I)),
-        e(t).is("hover", e(k)),
-        e(t).is("animating", e(_)),
-        {
-          [e(t).em("item", "card")]: e(a),
-          [e(t).em("item", "card-vertical")]: e(a) && e(n)
-        }
-      ]),
-      style: T(g.value),
-      onClick: r[0] || (r[0] = //@ts-ignore
-      (...s) => e(i) && e(i)(...s))
+      ref: _,
+      class: v(T.value),
+      style: w(V.value),
+      onClick: a[0] || (a[0] = //@ts-ignore
+      (...s) => e(n) && e(n)(...s))
     }, [
-      e(a) ? l((p(), c("div", {
+      e(r) ? c((p(), u("div", {
         key: 0,
-        class: u(e(t).e("mask"))
+        class: v(e(t).e("mask"))
       }, null, 2)), [
         [f, !e(o)]
-      ]) : V("", !0),
-      E(m.$slots, "default")
+      ]) : x("", !0),
+      z(i.$slots, "default")
     ], 6)), [
-      [f, e($)]
+      [f, e(h)]
     ]);
   }
 });
 export {
-  F as default
+  H as default
 };

package/es/components/carousel/carousel.vue.d.ts

@@ -1,33 +1,11 @@
-export interface CarouselProps {
-    initialIndex?: number | string;
-    height?: string;
-    trigger?: 'hover' | 'click';
-    autoplay?: boolean;
-    interval?: number;
-    indicatorPosition?: '' | 'none' | 'outside';
-    arrow?: 'always' | 'hover' | 'never';
-    type?: '' | 'card';
-    loop?: boolean;
-    direction?: 'horizontal' | 'vertical';
-    pauseOnHover?: boolean;
-}
+import type { CarouselProps } from './types';
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CarouselProps>, {
-    initialIndex: number;
-    height: string;
-    trigger: string;
-    autoplay: boolean;
-    interval: number;
-    indicatorPosition: string;
-    arrow: string;
-    type: string;
-    loop: boolean;
-    direction: string;
-    pauseOnHover: boolean;
-}>>, {
-    /** @description manually switch slide */
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CarouselProps>>, {
+    /** @description active slide index */
+    activeIndex: import("vue").Ref<number, number>;
+    /** @description manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` */
     setActiveItem: (index: number | string) => void;
     /** @description switch to the previous slide */
     prev: () => void;
@@ -35,33 +13,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     next: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (current: number, prev: number) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CarouselProps>, {
-    initialIndex: number;
-    height: string;
-    trigger: string;
-    autoplay: boolean;
-    interval: number;
-    indicatorPosition: string;
-    arrow: string;
-    type: string;
-    loop: boolean;
-    direction: string;
-    pauseOnHover: boolean;
-}>>> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CarouselProps>>> & Readonly<{
     onChange?: ((current: number, prev: number) => any) | undefined;
-}>, {
-    direction: "horizontal" | "vertical";
-    height: string;
-    type: "" | "card";
-    arrow: "always" | "hover" | "never";
-    trigger: "hover" | "click";
-    loop: boolean;
-    initialIndex: number | string;
-    interval: number;
-    autoplay: boolean;
-    indicatorPosition: "" | "none" | "outside";
-    pauseOnHover: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -73,14 +27,6 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,18 +1,23 @@
-import { defineComponent as N, computed as M, unref as e, createElementBlock as u, openBlock as s, withModifiers as d, normalizeClass as i, createElementVNode as c, createCommentVNode as f, normalizeStyle as W, createBlock as B, renderSlot as X, Transition as $, withCtx as I, withDirectives as S, createVNode as V, vShow as E, Fragment as Y, renderList as Z, toDisplayString as x } from "vue";
-import { VftIcon as L } from "../icon/index.js";
+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 "../../utils/ns-cover.js";
 import "lodash-es";
-import { useNamespace as _ } from "../../hooks/use-namespace/index.js";
+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 ee } from "./use-carousel.js";
-const te = ["onMouseenter", "onClick"], oe = { key: 0 }, re = N({
+import { useCarousel as ae } from "./use-carousel.js";
+const se = ["onMouseenter", "onClick"], le = { key: 0 }, ue = {
+  key: 2,
+  xmlns: "http://www.w3.org/2000/svg",
+  version: "1.1",
+  style: { display: "none" }
+}, de = E({
   name: "vft-carousel"
-}), ve = /* @__PURE__ */ N({
-  ...re,
+}), Be = /* @__PURE__ */ E({
+  ...de,
   props: {
     initialIndex: { default: 0 },
     height: { default: "" },
@@ -24,135 +29,175 @@ const te = ["onMouseenter", "onClick"], oe = { key: 0 }, re = N({
     type: { default: "" },
     loop: { type: Boolean, default: !0 },
     direction: { default: "horizontal" },
-    pauseOnHover: { type: Boolean, default: !0 }
+    pauseOnHover: { type: Boolean, default: !0 },
+    motionBlur: { type: Boolean, default: !1 },
+    cardScale: { default: 0.83 }
   },
   emits: ["change"],
-  setup(z, { expose: D, emit: P }) {
-    const t = _("carousel"), a = z, A = P, {
+  setup(d, { expose: z, emit: G }) {
+    const t = ie("carousel"), N = G, P = _(), {
       root: H,
       activeIndex: l,
-      arrowDisplay: v,
-      hasLabel: y,
-      hover: w,
-      isCardType: T,
-      items: h,
-      isVertical: F,
-      containerStyle: O,
-      handleButtonEnter: k,
-      handleButtonLeave: p,
-      handleIndicatorClick: j,
-      handleMouseEnter: C,
-      handleMouseLeave: g,
-      setActiveItem: q,
-      prev: G,
+      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,
-      throttledArrowClick: b,
-      throttledIndicatorHover: K
-    } = ee(a, A, t.b()), Q = M(() => {
-      const r = [t.b(), t.m(a.direction)];
-      return e(T) && r.push(t.m("card")), r;
-    }), R = M(() => {
-      const r = [t.e("indicators"), t.em("indicators", a.direction)];
-      return e(y) && r.push(t.em("indicators", "labels")), a.indicatorPosition === "outside" && r.push(t.em("indicators", "outside")), e(F) && r.push(t.em("indicators", "right")), r;
+      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;
     });
-    return D({
-      /** @description manually switch slide */
-      setActiveItem: q,
+    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);
+    }
+    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);
+    }
+    return z({
+      /** @description active slide index */
+      activeIndex: l,
+      /** @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,
       /** @description switch to the previous slide */
-      prev: G,
+      prev: q,
       /** @description switch to the next slide */
       next: J
-    }), (r, o) => (s(), u("div", {
+    }), (n, o) => (a(), u("div", {
       ref_key: "root",
       ref: H,
-      class: i(Q.value),
-      onMouseenter: o[6] || (o[6] = d(
+      class: s(W.value),
+      onMouseenter: o[6] || (o[6] = m(
         //@ts-ignore
-        (...n) => e(C) && e(C)(...n),
+        (...r) => e(S) && e(S)(...r),
         ["stop"]
       )),
-      onMouseleave: o[7] || (o[7] = d(
+      onMouseleave: o[7] || (o[7] = m(
         //@ts-ignore
-        (...n) => e(g) && e(g)(...n),
+        (...r) => e($) && e($)(...r),
         ["stop"]
       ))
     }, [
-      c("div", {
-        class: i(e(t).e("container")),
-        style: W(e(O))
-      }, [
-        e(v) ? (s(), B($, {
-          key: 0,
-          name: "carousel-arrow-left"
-        }, {
-          default: I(() => [
-            S(c("button", {
-              type: "button",
-              class: i([e(t).e("arrow"), e(t).em("arrow", "left")]),
-              onMouseenter: o[0] || (o[0] = (n) => e(k)("left")),
-              onMouseleave: o[1] || (o[1] = //@ts-ignore
-              (...n) => e(p) && e(p)(...n)),
-              onClick: o[2] || (o[2] = d((n) => e(b)(e(l) - 1), ["stop"]))
-            }, [
-              V(e(L), { icon: "ico-ep:arrow-left" })
-            ], 34), [
-              [
-                E,
-                (r.arrow === "always" || e(w)) && (a.loop || e(l) > 0)
-              ]
-            ])
-          ]),
-          _: 1
-        })) : f("", !0),
-        e(v) ? (s(), B($, {
-          key: 1,
-          name: "carousel-arrow-right"
-        }, {
-          default: I(() => [
-            S(c("button", {
-              type: "button",
-              class: i([e(t).e("arrow"), e(t).em("arrow", "right")]),
-              onMouseenter: o[3] || (o[3] = (n) => e(k)("right")),
-              onMouseleave: o[4] || (o[4] = //@ts-ignore
-              (...n) => e(p) && e(p)(...n)),
-              onClick: o[5] || (o[5] = d((n) => e(b)(e(l) + 1), ["stop"]))
-            }, [
-              V(e(L), { icon: "ico-ep:arrow-right" })
-            ], 34), [
-              [
-                E,
-                (r.arrow === "always" || e(w)) && (a.loop || e(l) < e(h).length - 1)
-              ]
-            ])
-          ]),
-          _: 1
-        })) : f("", !0),
-        X(r.$slots, "default")
-      ], 6),
-      r.indicatorPosition !== "none" ? (s(), u("ul", {
+      e(k) ? (a(), L(V, {
         key: 0,
-        class: i(R.value)
+        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
       }, [
-        (s(!0), u(Y, null, Z(e(h), (n, m) => (s(), u("li", {
-          key: m,
-          class: i([
-            e(t).e("indicator"),
-            e(t).em("indicator", r.direction),
-            e(t).is("active", m === e(l))
-          ]),
-          onMouseenter: (U) => e(K)(m),
-          onClick: d((U) => e(j)(m), ["stop"])
-        }, [
-          c("button", {
-            class: i(e(t).e("button"))
+        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)
           }, [
-            e(y) ? (s(), u("span", oe, x(n.props.label), 1)) : f("", !0)
-          ], 2)
-        ], 42, te))), 128))
-      ], 2)) : f("", !0)
+            (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"])
+            }, [
+              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"
+            })
+          ]),
+          i("filter", { id: "elCarouselVertical" }, [
+            i("feGaussianBlur", {
+              in: "SourceGraphic",
+              stdDeviation: "0,10"
+            })
+          ])
+        ], -1)
+      ]))) : p("", !0)
     ], 34));
   }
 });
 export {
-  ve as default
+  Be as default
 };

package/es/components/carousel/constants.d.ts

@@ -1,5 +1,5 @@
-import type { InjectionKey, Ref } from 'vue';
-import type { CarouselItemProps } from './carousel-item.vue';
+import type { InjectionKey, Ref, VNode } from 'vue';
+import type { CarouselItemProps } from './types';
 export type CarouselItemStates = {
     hover: boolean;
     translate: number;
@@ -13,6 +13,7 @@ export type CarouselItemContext = {
     props: CarouselItemProps;
     states: CarouselItemStates;
     uid: number;
+    getVnode: () => VNode;
     translateItem: (index: number, activeIndex: number, oldIndex?: number) => void;
 };
 export type CarouselContext = {
@@ -20,10 +21,12 @@ export type CarouselContext = {
     items: Ref<CarouselItemContext[]>;
     isCardType: Ref<boolean>;
     isVertical: Ref<boolean>;
-    loop: boolean;
+    loop?: boolean;
+    cardScale: number;
     addItem: (item: CarouselItemContext) => void;
-    removeItem: (uid: number) => void;
+    removeItem: (item: CarouselItemContext) => void;
     setActiveItem: (index: number) => void;
     setContainerHeight: (height: number) => void;
 };
 export declare const carouselContextKey: InjectionKey<CarouselContext>;
+export declare const CAROUSEL_ITEM_NAME = "VftCarouselItem";

package/es/components/carousel/constants.js

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