vft 0.0.428 → 0.0.430

package/es/components/avatar-stack/avatar-stack.vue2.js

@@ -0,0 +1,70 @@
+import { defineComponent as f, computed as r, createElementBlock as n, openBlock as s, normalizeStyle as c, normalizeClass as o, unref as t, createCommentVNode as y, Fragment as g, renderList as k, createVNode as d, withCtx as b, createTextVNode as p, toDisplayString as V } from "vue";
+import { VftAvatar as v } from "../avatar/index.js";
+import "@vueuse/core";
+import { addUnit as i } from "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import { generateCssVars as w } from "../../utils/ns-cover.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as N } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+const B = f({
+  name: "vft-avatar-stack"
+}), G = /* @__PURE__ */ f({
+  ...B,
+  props: {
+    avatars: { default: () => [] },
+    maxCount: { default: 5 },
+    size: { default: 60 },
+    overlap: {},
+    showRemainCount: { type: Boolean, default: !1 },
+    borderColor: { default: "white" }
+  },
+  setup(e) {
+    const a = N("avatar-stack"), l = r(() => e.avatars.slice(0, e.maxCount)), m = r(() => e.avatars.length - e.maxCount), z = r(() => e.overlap !== void 0 ? e.overlap : Math.round(e.size / 3)), C = r(() => Math.max(12, Math.round(e.size * 0.25))), h = r(() => w(
+      {
+        "avatar-size": i(e.size),
+        overlap: i(z.value),
+        "font-size": i(C.value),
+        "border-color": e.borderColor
+      },
+      "avatar-stack"
+    ));
+    return (M, S) => (s(), n("div", {
+      class: o(t(a).b()),
+      style: c(h.value)
+    }, [
+      (s(!0), n(g, null, k(l.value, (x, u) => (s(), n("div", {
+        key: u,
+        class: o(t(a).e("item")),
+        style: c({ zIndex: l.value.length - u })
+      }, [
+        d(t(v), {
+          src: x,
+          size: e.size,
+          class: o(t(a).e("stacked-avatar"))
+        }, null, 8, ["src", "size", "class"])
+      ], 6))), 128)),
+      e.showRemainCount && m.value > 0 ? (s(), n("div", {
+        key: 0,
+        class: o([t(a).e("item"), t(a).e("remaining-count")]),
+        style: { zIndex: 0 }
+      }, [
+        d(t(v), {
+          size: e.size,
+          class: o(t(a).e("remaining-avatar"))
+        }, {
+          default: b(() => [
+            p(" +" + V(m.value), 1)
+          ]),
+          _: 1
+        }, 8, ["size", "class"])
+      ], 2)) : y("", !0)
+    ], 6));
+  }
+});
+export {
+  G as default
+};

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

@@ -0,0 +1,49 @@
+import { defineComponent as l, getCurrentInstance as d, inject as k, ref as b, createElementBlock as p, openBlock as a, normalizeClass as s, unref as e, createElementVNode as y, createBlock as C, renderSlot as _, mergeProps as g, toDisplayString as B } from "vue";
+import { VftIcon as I } from "../icon/index.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as x } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { breadcrumbKey as V } from "./constants.js";
+const h = l({
+  name: "VftBreadcrumbItem"
+}), F = /* @__PURE__ */ l({
+  ...h,
+  props: {
+    to: {},
+    replace: { type: Boolean }
+  },
+  setup(c) {
+    const t = c, i = d(), o = k(V, void 0), r = x("breadcrumb"), n = i.appContext.config.globalProperties.$router, m = b(), u = () => {
+      !t.to || !n || (t.replace ? n.replace(t.to) : n.push(t.to));
+    };
+    return (f, E) => (a(), p("span", {
+      class: s(e(r).e("item"))
+    }, [
+      y("span", {
+        ref_key: "link",
+        ref: m,
+        class: s([e(r).e("inner"), e(r).is("link", !!c.to)]),
+        role: "link",
+        onClick: u
+      }, [
+        _(f.$slots, "default")
+      ], 2),
+      e(o)?.separatorIcon ? (a(), C(e(I), g({ key: 0 }, e(o).separatorIcon, {
+        class: e(r).e("separator")
+      }), null, 16, ["class"])) : (a(), p("span", {
+        key: 1,
+        class: s(e(r).e("separator")),
+        role: "presentation"
+      }, B(e(o)?.separator), 3))
+    ], 2));
+  }
+});
+export {
+  F as default
+};

package/es/components/button/button.vue2.js

@@ -0,0 +1,93 @@
+import { defineComponent as g, computed as T, createBlock as i, openBlock as l, resolveDynamicComponent as $, mergeProps as p, unref as e, withCtx as I, createElementBlock as y, createCommentVNode as f, Fragment as A, renderSlot as k, normalizeClass as B, normalizeProps as N } from "vue";
+import { VftIcon as b } from "../icon/index.js";
+import "@vueuse/core";
+import { singleAttrToObj as P } from "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as V } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { useButtonCustomStyle as j } from "./button-custom.js";
+import { useButton as w } from "./use-button.js";
+const D = g({
+  name: "vft-button"
+}), X = /* @__PURE__ */ g({
+  ...D,
+  props: {
+    tag: { default: "button" },
+    size: {},
+    disabled: { type: Boolean },
+    type: {},
+    icon: {},
+    nativeType: { default: "button" },
+    loading: { type: Boolean },
+    loadingIcon: {},
+    plain: { type: Boolean },
+    text: { type: Boolean },
+    link: { type: Boolean },
+    bg: { type: Boolean },
+    autofocus: { type: Boolean },
+    round: { type: Boolean },
+    circle: { type: Boolean },
+    color: {},
+    dark: { type: Boolean },
+    autoInsertSpace: { type: Boolean },
+    block: { type: Boolean },
+    useThrottle: { type: Boolean, default: !0 },
+    throttleTime: { default: 300 }
+  },
+  emits: ["click"],
+  setup(o, { expose: C, emit: h }) {
+    const a = o, v = h, t = V("button"), x = j(a), { _ref: s, _size: r, _type: c, _disabled: m, _props: z, shouldAddSpace: u, handleClick: S } = w(a, v), d = T(() => P(a.icon, "icon"));
+    return C({
+      ref: s,
+      size: r,
+      type: c,
+      disabled: m,
+      shouldAddSpace: u
+    }), (n, E) => (l(), i($(o.tag), p({
+      ref_key: "_ref",
+      ref: s
+    }, e(z), {
+      class: [
+        e(t).b(),
+        e(t).m(e(c)),
+        e(t).m(e(r)),
+        e(t).is("disabled", e(m)),
+        e(t).is("loading", o.loading),
+        e(t).is("plain", o.plain),
+        e(t).is("round", o.round),
+        e(t).is("circle", o.circle),
+        e(t).is("text", o.text),
+        e(t).is("link", o.link),
+        e(t).is("has-bg", o.bg),
+        e(t).is("block", o.block)
+      ],
+      style: e(x),
+      onClick: e(S)
+    }), {
+      default: I(() => [
+        o.loading ? (l(), y(A, { key: 0 }, [
+          n.$slots.loading ? k(n.$slots, "loading", { key: 0 }) : (l(), i(e(b), {
+            key: 1,
+            rotate: "",
+            class: B(e(t).is("loading")),
+            icon: "icon-loading"
+          }, null, 8, ["class"]))
+        ], 64)) : d.value?.icon ? (l(), i(e(b), N(p({ key: 1 }, d.value)), null, 16)) : f("", !0),
+        n.$slots.default ? (l(), y("span", {
+          key: 2,
+          class: B({ [e(t).em("text", "expand")]: e(u) })
+        }, [
+          k(n.$slots, "default")
+        ], 2)) : f("", !0)
+      ]),
+      _: 3
+    }, 16, ["class", "style", "onClick"]));
+  }
+});
+export {
+  X as default
+};

package/es/components/card/card.vue2.js

@@ -0,0 +1,44 @@
+import { defineComponent as m, createElementBlock as d, openBlock as s, normalizeClass as r, unref as a, createCommentVNode as i, createElementVNode as n, renderSlot as l, createTextVNode as c, toDisplayString as f, normalizeStyle as p } from "vue";
+import "@vueuse/core";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import "../form/index.js";
+import { useNamespace as u } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+const h = m({
+  name: "vft-card"
+}), B = /* @__PURE__ */ m({
+  ...h,
+  props: {
+    header: { default: "" },
+    bodyStyle: { default: "" },
+    shadow: { default: "always" }
+  },
+  setup(e) {
+    const t = u("card");
+    return (o, y) => (s(), d("div", {
+      class: r([a(t).b(), a(t).is(`${e.shadow}-shadow`)])
+    }, [
+      o.$slots.header || e.header ? (s(), d("div", {
+        key: 0,
+        class: r(a(t).e("header"))
+      }, [
+        l(o.$slots, "header", {}, () => [
+          c(f(e.header), 1)
+        ])
+      ], 2)) : i("", !0),
+      n("div", {
+        class: r(a(t).e("body")),
+        style: p(e.bodyStyle)
+      }, [
+        l(o.$slots, "default")
+      ], 6)
+    ], 2));
+  }
+});
+export {
+  B as default
+};

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

@@ -0,0 +1,204 @@
+import { defineComponent as E, getCurrentInstance as _, computed as T, unref as e, createElementBlock as d, openBlock as s, withModifiers as m, normalizeClass as l, createBlock as L, createCommentVNode as f, createElementVNode as a, createVNode as p, 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 "../form/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 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"
+}), be = /* @__PURE__ */ E({
+  ...de,
+  props: {
+    initialIndex: { default: 0 },
+    height: { default: "" },
+    trigger: { default: "hover" },
+    autoplay: { type: Boolean, default: !0 },
+    interval: { default: 3e3 },
+    indicatorPosition: { default: "" },
+    arrow: { default: "hover" },
+    type: { default: "" },
+    loop: { type: Boolean, default: !0 },
+    direction: { default: "horizontal" },
+    pauseOnHover: { type: Boolean, default: !0 },
+    motionBlur: { type: Boolean, default: !1 },
+    cardScale: { default: 0.83 }
+  },
+  emits: ["change"],
+  setup(i, { expose: z, emit: G }) {
+    const t = ie("carousel"), N = G, P = _(), {
+      root: x,
+      activeIndex: u,
+      arrowDisplay: k,
+      hasLabel: C,
+      hover: B,
+      isCardType: H,
+      items: b,
+      isVertical: w,
+      containerStyle: A,
+      handleButtonEnter: M,
+      handleButtonLeave: v,
+      handleIndicatorClick: F,
+      handleMouseEnter: S,
+      handleMouseLeave: $,
+      setActiveItem: O,
+      prev: j,
+      next: q,
+      PlaceholderItem: J,
+      isTwoLengthShow: K,
+      ItemsSorter: Q,
+      throttledArrowClick: I,
+      throttledIndicatorHover: R
+    } = ae(P.props, N, t.b()), U = T(() => {
+      const n = [t.b(), t.m(i.direction)];
+      return e(H) && n.push(t.m("card")), n;
+    }), W = T(() => {
+      const n = [t.e("indicators"), t.em("indicators", i.direction)];
+      return e(C) && n.push(t.em("indicators", "labels")), i.indicatorPosition === "outside" && n.push(t.em("indicators", "outside")), e(w) && n.push(t.em("indicators", "right")), n;
+    });
+    function X(n) {
+      if (!i.motionBlur) return;
+      const o = e(w) ? `${t.namespace.value}-transitioning-vertical` : `${t.namespace.value}-transitioning`;
+      n.currentTarget.classList.add(o);
+    }
+    function Y(n) {
+      if (!i.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: u,
+      /** @description manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` */
+      setActiveItem: O,
+      /** @description switch to the previous slide */
+      prev: j,
+      /** @description switch to the next slide */
+      next: q
+    }), (n, o) => (s(), d("div", {
+      ref_key: "root",
+      ref: x,
+      class: l(U.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) ? (s(), L(V, {
+        key: 0,
+        name: "carousel-arrow-left"
+      }, {
+        default: y(() => [
+          g(a("button", {
+            type: "button",
+            class: l([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(v) && e(v)(...r)),
+            onClick: o[2] || (o[2] = m((r) => e(I)(e(u) - 1), ["stop"]))
+          }, [
+            p(e(D), { icon: "ico-ep:arrow-left" })
+          ], 34), [
+            [h, (i.arrow === "always" || e(B)) && (i.loop || e(u) > 0)]
+          ])
+        ]),
+        _: 1
+      })) : f("", !0),
+      e(k) ? (s(), L(V, {
+        key: 1,
+        name: "carousel-arrow-right"
+      }, {
+        default: y(() => [
+          g(a("button", {
+            type: "button",
+            class: l([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(v) && e(v)(...r)),
+            onClick: o[5] || (o[5] = m((r) => e(I)(e(u) + 1), ["stop"]))
+          }, [
+            p(e(D), { icon: "ico-ep:arrow-right" })
+          ], 34), [
+            [
+              h,
+              (i.arrow === "always" || e(B)) && (i.loop || e(u) < e(b).length - 1)
+            ]
+          ])
+        ]),
+        _: 1
+      })) : f("", !0),
+      a("div", {
+        class: l(e(t).e("container")),
+        style: ee(e(A)),
+        onTransitionstart: X,
+        onTransitionend: Y
+      }, [
+        p(e(J)),
+        te(n.$slots, "default")
+      ], 38),
+      p(e(Q), null, {
+        default: y(() => [
+          i.indicatorPosition !== "none" ? (s(), d("ul", {
+            key: 0,
+            class: l(W.value)
+          }, [
+            (s(!0), d(oe, null, ne(e(b), (r, c) => g((s(), d("li", {
+              key: c,
+              class: l([
+                e(t).e("indicator"),
+                e(t).em("indicator", i.direction),
+                e(t).is("active", c === e(u))
+              ]),
+              onMouseenter: (Z) => e(R)(c),
+              onClick: m((Z) => e(F)(c), ["stop"])
+            }, [
+              a("button", {
+                class: l(e(t).e("button"))
+              }, [
+                e(C) ? (s(), d("span", le, re(r.label), 1)) : f("", !0)
+              ], 2)
+            ], 42, se)), [
+              [h, e(K)(c)]
+            ])), 128))
+          ], 2)) : f("", !0)
+        ]),
+        _: 1
+      }),
+      i.motionBlur ? (s(), d("svg", ue, [...o[8] || (o[8] = [
+        a("defs", null, [
+          a("filter", { id: "elCarouselHorizontal" }, [
+            a("feGaussianBlur", {
+              in: "SourceGraphic",
+              stdDeviation: "12,0"
+            })
+          ]),
+          a("filter", { id: "elCarouselVertical" }, [
+            a("feGaussianBlur", {
+              in: "SourceGraphic",
+              stdDeviation: "0,10"
+            })
+          ])
+        ], -1)
+      ])])) : f("", !0)
+    ], 34));
+  }
+});
+export {
+  be as default
+};

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

@@ -0,0 +1,191 @@
+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 { addUnit as fe, isString as me } from "@vft/utils";
+import { debugWarn as he } from "../../utils/error.js";
+import "../config-provider/hooks/use-global-config.js";
+import { CHANGE_EVENT as de } from "../../constants/event.js";
+import { flattedChildren as Ie } from "../../utils/vue/vnode.js";
+import "../form/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import { useOrderedChildren as ge } from "../../hooks/use-ordered-children/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { carouselContextKey as Se, CAROUSEL_ITEM_NAME as H } from "./constants.js";
+const L = 300, ze = (t, O, M) => {
+  const {
+    children: o,
+    addChild: _,
+    removeChild: R,
+    ChildrenSorter: z
+  } = ge(
+    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)
+  ), U = f(() => o.value.some(
+    (e) => e.props.label && e.props.label?.toString().length > 0
+  )), C = f(() => t.type === "card"), v = f(() => t.direction === "vertical"), V = f(() => t.height !== "auto" ? {
+    height: t.height
+  } : {
+    height: fe(w.value),
+    overflow: "hidden"
+  }), k = N(
+    (e) => {
+      i(e);
+    },
+    L,
+    { trailing: !0 }
+  ), D = N((e) => {
+    X(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);
+  };
+  function i(e) {
+    if (me(e)) {
+      const r = o.value.filter(
+        (b) => b.props.name === e
+      );
+      r.length > 0 && (e = o.value.indexOf(r[0]));
+    }
+    if (e = Number(e), Number.isNaN(e) || e !== Math.floor(e)) {
+      he(M, "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();
+  }
+  function E(e) {
+    o.value.forEach((n, a) => {
+      n.translateItem(a, l.value, e);
+    });
+  }
+  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 W() {
+    S.value = !0, t.pauseOnHover && d();
+  }
+  function j() {
+    S.value = !1, I();
+  }
+  function q(e) {
+    g(v) || o.value.forEach((n, a) => {
+      e === K(n, a) && (n.states.hover = !0);
+    });
+  }
+  function J() {
+    g(v) || o.value.forEach((e) => {
+      e.states.hover = !1;
+    });
+  }
+  function Q(e) {
+    l.value = e;
+  }
+  function X(e) {
+    t.trigger === "hover" && e !== l.value && (l.value = e);
+  }
+  function Y() {
+    i(l.value - 1);
+  }
+  function Z() {
+    i(l.value + 1);
+  }
+  function y() {
+    d(), t.pauseOnHover || I();
+  }
+  function $(e) {
+    t.height === "auto" && (w.value = e);
+  }
+  function x() {
+    const e = B.default?.();
+    if (!e) return null;
+    const a = Ie(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);
+  }
+  m(
+    () => l.value,
+    (e, n) => {
+      E(n), c.value && (e = e % 2, n = n % 2), n > -1 && O(de, e, n);
+    }
+  ), m(
+    () => t.autoplay,
+    (e) => {
+      e ? I() : d();
+    }
+  ), m(
+    () => t.loop,
+    () => {
+      i(l.value);
+    }
+  ), m(
+    () => t.interval,
+    () => {
+      y();
+    }
+  );
+  const T = re();
+  return ie(() => {
+    m(
+      () => o.value,
+      () => {
+        o.value.length > 0 && i(t.initialIndex);
+      },
+      {
+        immediate: !0
+      }
+    ), T.value = ve(h.value, () => {
+      E();
+    }), I();
+  }), ue(() => {
+    d(), h.value && T.value && T.value.stop();
+  }), se(Se, {
+    root: h,
+    isCardType: C,
+    isVertical: v,
+    items: o,
+    loop: t.loop,
+    cardScale: t.cardScale,
+    addItem: _,
+    removeItem: R,
+    setActiveItem: i,
+    setContainerHeight: $
+  }), {
+    root: h,
+    activeIndex: l,
+    arrowDisplay: P,
+    hasLabel: U,
+    hover: S,
+    isCardType: C,
+    items: o,
+    isVertical: v,
+    containerStyle: V,
+    isItemsTwoLength: c,
+    handleButtonEnter: q,
+    handleButtonLeave: J,
+    handleIndicatorClick: Q,
+    handleMouseEnter: W,
+    handleMouseLeave: j,
+    setActiveItem: i,
+    prev: Y,
+    next: Z,
+    PlaceholderItem: x,
+    isTwoLengthShow: F,
+    ItemsSorter: z,
+    throttledArrowClick: k,
+    throttledIndicatorHover: D
+  };
+};
+export {
+  ze as useCarousel
+};