@indielayer/ui/lib/components/carousel/Carousel.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as N, ref as h, computed as $, onMounted as z, watch as A, openBlock as p, createElementBlock as m, normalizeStyle as R, unref as l, normalizeClass as d, createElementVNode as g, renderSlot as k, normalizeProps as C, guardReactiveProps as E, mergeProps as V, Fragment as X, renderList as b, createCommentVNode as F } from "vue";
import { useTheme as L } from "../../composables/useTheme.js";
const M = ["onClick"], T = {
  autoplay: Boolean,
  delay: {
    type: Number,
    default: 5e3
  },
  showDots: {
    type: Boolean,
    default: !0
  },
  effect: {
    type: String,
    default: "slide"
  },
  classDots: [Array, String]
}, j = {
  name: "XCarousel",
  validators: {}
}, H = /* @__PURE__ */ N({
  ...j,
  props: T,
  emits: ["update"],
  setup(_, { expose: P, emit: S }) {
    const v = _, u = h(null), e = h(0), a = $(() => {
      var t;
      return ((t = u.value) == null ? void 0 : t.children.length) || 0;
    });
    let s = null;
    z(() => {
      y(), w();
    });
    function w() {
      v.autoplay && (s && clearInterval(s), s = setInterval(() => {
        i();
      }, v.delay));
    }
    A(e, () => {
      y(), I("update", e.value);
    });
    function y() {
      if (u.value) {
        const t = u.value.children;
        for (let n = 0; n < t.length; n++) {
          const r = t[n];
          r.style.transform = `translateX(${(n - e.value) * 100}%)`;
        }
      }
    }
    function c(t) {
      e.value = t, s && clearInterval(s);
    }
    function i() {
      e.value < a.value - 1 ? e.value += 1 : e.value = 0;
    }
    function f() {
      e.value > 0 ? e.value -= 1 : e.value = a.value - 1;
    }
    const { styles: B, classes: o, className: D } = L("Carousel", {}, v, {
      current: e,
      total: a
    }), I = S;
    return P({ to: c, next: i, prev: f }), (t, n) => (p(), m("div", {
      style: R(l(B)),
      class: d([
        l(D),
        l(o).wrapper
      ])
    }, [
      g("div", {
        ref_key: "slidesRef",
        ref: u,
        class: d(l(o).slides)
      }, [
        k(t.$slots, "default", C(E({ to: c, next: i, prev: f, current: e.value, total: a.value })))
      ], 2),
      t.showDots ? k(t.$slots, "dots", C(V({ key: 0 }, { to: c, next: i, prev: f, current: e.value, total: a.value })), () => [
        g("div", {
          class: d([l(o).dots, t.classDots])
        }, [
          (p(!0), m(X, null, b(a.value, (r) => (p(), m("span", {
            key: r,
            class: d([
              l(o).dot,
              r - 1 === e.value ? l(o).dotActive : ""
            ]),
            onClick: (q) => c(r - 1)
          }, null, 10, M))), 128))
        ], 2)
      ]) : F("", !0)
    ], 6));
  }
});
export {
  H as default
};