vue-carousel-lite/index.js

Fast, Lightweight Vue Carousel With Touch, Mouse, Keyboard, Wheel & SSR support

import { defineComponent as ie, createElementBlock as B, openBlock as O, Fragment as ge, renderList as pe, withModifiers as de, normalizeClass as Y, createElementVNode as _, renderSlot as R, toDisplayString as he, computed as C, createCommentVNode as le, normalizeStyle as ne, createVNode as ce, withCtx as ve, ref as x, onMounted as q, onUnmounted as ee, readonly as K, nextTick as re, watch as X, reactive as Se, unref as T, onBeforeMount as Ie, withMemo as Te, isMemoSame as Ee, createBlock as Pe } from "vue";
const ke = { class: "carousel-pagination-dots carousel-pagination-items" }, De = ["aria-label", "onClick"], Le = /* @__PURE__ */ ie({
  __name: "PaginationDots",
  props: {
    currentIndex: {},
    totalSlides: {},
    visibleSlideIndices: {},
    onGoToSlide: { type: Function }
  },
  setup(t) {
    const n = t, o = (e) => {
      n.onGoToSlide(e);
    };
    return (e, c) => (O(), B("div", ke, [
      (O(!0), B(ge, null, pe(e.totalSlides, (i) => (O(), B("button", {
        key: i - 1,
        class: Y([
          "carousel-pagination-dot",
          {
            "carousel-pagination-dot--active": e.visibleSlideIndices.includes(i - 1),
            "carousel-pagination-dot--current": e.currentIndex === i - 1
          }
        ]),
        "aria-label": `Go to slide ${i}`,
        onClick: de((w) => o(i - 1), ["stop"])
      }, null, 10, De))), 128))
    ]));
  }
}), Me = { class: "carousel-pagination-lines carousel-pagination-items" }, Ce = ["aria-label", "onClick"], $e = /* @__PURE__ */ ie({
  __name: "PaginationLines",
  props: {
    currentIndex: {},
    totalSlides: {},
    visibleSlideIndices: {},
    onGoToSlide: { type: Function }
  },
  setup(t) {
    const n = t, o = (e) => {
      n.onGoToSlide(e);
    };
    return (e, c) => (O(), B("div", Me, [
      (O(!0), B(ge, null, pe(e.totalSlides, (i) => (O(), B("button", {
        key: i - 1,
        class: Y([
          "carousel-pagination-line",
          {
            "carousel-pagination-line--active": e.visibleSlideIndices.includes(i - 1),
            "carousel-pagination-line--current": e.currentIndex === i - 1
          }
        ]),
        "aria-label": `Go to slide ${i}`,
        onClick: de((w) => o(i - 1), ["stop"])
      }, null, 10, Ce))), 128))
    ]));
  }
}), We = { class: "carousel-pagination-buttons carousel-pagination-items" }, Ge = ["disabled"], Ae = ["disabled"], ze = /* @__PURE__ */ ie({
  __name: "PaginationButtons",
  props: {
    canGoNext: { type: Boolean },
    canGoPrev: { type: Boolean },
    onGoNext: { type: Function },
    onGoPrev: { type: Function }
  },
  setup(t) {
    const n = t, o = (e) => {
      e === "prev" ? n.onGoPrev() : n.onGoNext();
    };
    return (e, c) => (O(), B("div", We, [
      _("button", {
        class: Y([
          "carousel-pagination-button",
          "carousel-pagination-button--prev",
          { "carousel-pagination-button--disabled": !e.canGoPrev }
        ]),
        disabled: !e.canGoPrev,
        "aria-label": "Previous slide",
        onClick: c[0] || (c[0] = de((i) => o("prev"), ["stop"]))
      }, [
        R(e.$slots, "prev-icon", {}, () => [
          c[2] || (c[2] = _("svg", {
            width: "24",
            height: "24",
            viewBox: "0 0 24 24",
            fill: "none",
            xmlns: "http://www.w3.org/2000/svg"
          }, [
            _("path", {
              d: "M15 18L9 12L15 6",
              stroke: "currentColor",
              "stroke-width": "2",
              "stroke-linecap": "round",
              "stroke-linejoin": "round"
            })
          ], -1))
        ])
      ], 10, Ge),
      _("button", {
        class: Y([
          "carousel-pagination-button",
          "carousel-pagination-button--next",
          { "carousel-pagination-button--disabled": !e.canGoNext }
        ]),
        disabled: !e.canGoNext,
        "aria-label": "Next slide",
        onClick: c[1] || (c[1] = de((i) => o("next"), ["stop"]))
      }, [
        R(e.$slots, "next-icon", {}, () => [
          c[3] || (c[3] = _("svg", {
            width: "24",
            height: "24",
            viewBox: "0 0 24 24",
            fill: "none",
            xmlns: "http://www.w3.org/2000/svg"
          }, [
            _("path", {
              d: "M9 18L15 12L9 6",
              stroke: "currentColor",
              "stroke-width": "2",
              "stroke-linecap": "round",
              "stroke-linejoin": "round"
            })
          ], -1))
        ])
      ], 10, Ae)
    ]));
  }
}), Ne = { class: "carousel-pagination-fraction carousel-pagination-items" }, Oe = { class: "carousel-pagination-fraction-current" }, Fe = { class: "carousel-pagination-fraction-total" }, Be = /* @__PURE__ */ ie({
  __name: "PaginationFraction",
  props: {
    currentIndex: {},
    totalSlides: {}
  },
  setup(t) {
    return (n, o) => (O(), B("div", Ne, [
      _("span", Oe, he(n.currentIndex + 1), 1),
      o[0] || (o[0] = _("span", { class: "carousel-pagination-fraction-separator" }, "/", -1)),
      _("span", Fe, he(n.totalSlides), 1)
    ]));
  }
}), He = /* @__PURE__ */ ie({
  __name: "Pagination",
  props: {
    canGoNext: { type: Boolean },
    canGoPrev: { type: Boolean },
    totalSlides: {},
    itemsToShow: {},
    currentIndex: {},
    onGoNext: { type: Function },
    onGoPrev: { type: Function },
    visibleSlideIndices: {},
    type: { type: [String, Boolean, Array] },
    visibility: {},
    onGoToSlide: { type: Function },
    direction: {},
    position: {},
    paginationSize: {},
    isPaginationVisible: {},
    isMouseNearEdge: {}
  },
  setup(t) {
    const n = t, o = C(() => [
      "carousel-pagination",
      `carousel-pagination--${n.direction}`,
      n.paginationSize === "sm" ? "carousel-pagination--sm" : "",
      n.paginationSize === "lg" ? "carousel-pagination--lg" : ""
    ]), e = C(() => Array.isArray(n.type) ? n.type : [n.type]), c = (i) => {
      var f, l;
      let w = "";
      if (typeof (n == null ? void 0 : n.position) == "string")
        w = n.position;
      else {
        const v = (f = e == null ? void 0 : e.value) == null ? void 0 : f.indexOf(i);
        w = (l = n.position) == null ? void 0 : l[v];
      }
      return `carousel-pagination--${w}`;
    };
    return (i, w) => {
      var f, l, v, p;
      return O(), B(ge, null, [
        (f = e.value) != null && f.includes("dots") ? (O(), B("div", {
          key: 0,
          class: Y([...o.value, c("dots")]),
          style: ne({ opacity: i.isPaginationVisible.dots ? 1 : 0 })
        }, [
          ce(Le, {
            "current-index": i.currentIndex,
            "total-slides": i.totalSlides,
            "visible-slide-indices": i.visibleSlideIndices,
            "on-go-to-slide": i.onGoToSlide
          }, null, 8, ["current-index", "total-slides", "visible-slide-indices", "on-go-to-slide"])
        ], 6)) : le("", !0),
        (l = e.value) != null && l.includes("lines") ? (O(), B("div", {
          key: 1,
          class: Y([...o.value, c("lines")]),
          style: ne({ opacity: i.isPaginationVisible.lines ? 1 : 0 })
        }, [
          ce($e, {
            "current-index": i.currentIndex,
            "total-slides": i.totalSlides,
            "visible-slide-indices": i.visibleSlideIndices,
            "on-go-to-slide": i.onGoToSlide
          }, null, 8, ["current-index", "total-slides", "visible-slide-indices", "on-go-to-slide"])
        ], 6)) : le("", !0),
        (v = e.value) != null && v.includes("buttons") ? (O(), B("div", {
          key: 2,
          class: Y([...o.value, c("buttons")]),
          style: ne({ opacity: i.isPaginationVisible.buttons ? 1 : 0 })
        }, [
          ce(ze, {
            "can-go-next": i.canGoNext,
            "can-go-prev": i.canGoPrev,
            "on-go-next": i.onGoNext,
            "on-go-prev": i.onGoPrev,
            "is-mouse-near-edge": i.isMouseNearEdge,
            position: c("buttons")
          }, {
            "prev-icon": ve(() => [
              R(i.$slots, "prev-icon")
            ]),
            "next-icon": ve(() => [
              R(i.$slots, "next-icon")
            ]),
            _: 3
          }, 8, ["can-go-next", "can-go-prev", "on-go-next", "on-go-prev", "is-mouse-near-edge", "position"])
        ], 6)) : le("", !0),
        (p = e.value) != null && p.includes("fraction") ? (O(), B("div", {
          key: 3,
          class: Y([...o.value, c("fraction")]),
          style: ne({ opacity: i.isPaginationVisible.fraction ? 1 : 0 })
        }, [
          ce(Be, {
            "current-index": i.currentIndex,
            "total-slides": i.totalSlides
          }, null, 8, ["current-index", "total-slides"])
        ], 6)) : le("", !0)
      ], 64);
    };
  }
});
function _e({
  containerRef: t,
  trackRef: n,
  state: o,
  props: e,
  slideWidth: c,
  slideHeight: i,
  goToSlide: w,
  canGoNext: f,
  canGoPrev: l,
  updateState: v,
  virtualOffset: p
}) {
  const g = x(!1), a = x(0), m = x(0), $ = x(0), y = x(0), s = x(0), d = x(0), E = x(0), D = x(0), L = x(!1), S = x(!1), z = x(null);
  let G = null, U = 0;
  const Z = 16, V = C(() => e.direction === "horizontal"), J = C(() => {
    const r = e.gap || 0;
    return V.value ? c.value + r : i.value + r;
  }), u = 5, h = 10, I = (r) => {
    const k = o.currentIndex === 0, N = !f.value, F = r < 0, j = r > 0;
    return k && j || N && F ? r * 0.3 : r;
  }, M = () => {
    if (!n.value || !g.value) return;
    const r = performance.now();
    r - U < Z || (G && cancelAnimationFrame(G), G = requestAnimationFrame(() => {
      if (!n.value || !g.value) return;
      const k = V.value ? s.value : d.value, N = I(k), F = D.value + N, j = V.value ? `translate3d(${F}px, 0, 0)` : `translate3d(0, ${F}px, 0)`;
      n.value.style.transform = j, n.value.style.willChange = "transform", U = r;
    }));
  }, P = () => {
    G && (cancelAnimationFrame(G), G = null), n.value && (n.value.style.transform = "", n.value.style.willChange = "", n.value.style.transition = "", n.value.removeAttribute("data-dragging"));
  }, H = (r, k) => {
    const N = Math.abs(r), F = Math.abs(k);
    return N + F < h ? null : N > F ? "horizontal" : "vertical";
  }, b = /* @__PURE__ */ (() => {
    let r = null, k = !1;
    return (N) => {
      r ? Object.assign(r, N) : r = { ...N }, k || (k = !0, re(() => {
        r && (v(r), r = null), k = !1;
      }));
    };
  })(), A = (r, k) => {
    if (o.isTransitioning) return;
    g.value = !0, L.value = !1, S.value = !1, z.value = null, a.value = r, m.value = k, $.value = r, y.value = k, s.value = 0, d.value = 0, E.value = performance.now();
    const N = e.gap || 0;
    if (V.value) {
      const F = c.value + N, j = p.value * F, ue = o.currentIndex * F;
      D.value = j - ue;
    } else {
      const F = i.value + N, j = p.value * F, ue = o.currentIndex * F;
      D.value = j - ue;
    }
    b({ isDragging: !0 }), n.value && (n.value.style.pointerEvents = "none", n.value.setAttribute("data-dragging", "true")), document.body.style.userSelect = "none", document.body.style.webkitUserSelect = "none";
  }, W = (r, k, N) => {
    if (!g.value) return;
    if ($.value = r, y.value = k, s.value = $.value - a.value, d.value = y.value - m.value, !S.value) {
      const j = H(s.value, d.value);
      j && (S.value = !0, z.value = j);
    }
    if (Math.abs(s.value) + Math.abs(d.value) > u && (L.value = !0), S.value && z.value === e.direction)
      N && (N.preventDefault(), N.stopPropagation()), M();
    else if (S.value && z.value !== e.direction) {
      te();
      return;
    }
  }, te = () => {
    if (!g.value) return;
    G && (cancelAnimationFrame(G), G = null);
    let r = o.currentIndex;
    if (S.value && z.value === e.direction) {
      const k = V.value ? s.value : d.value, N = performance.now() - E.value, F = Math.abs(k) / Math.max(N, 1), j = J.value * 0.25;
      if (Math.abs(k) > j || F > 0.3) {
        const we = k < 0;
        we && f.value ? r = o.currentIndex + 1 : !we && l.value && (r = o.currentIndex - 1);
      }
    }
    P(), g.value = !1, S.value = !1, z.value = null, n.value && (n.value.style.pointerEvents = ""), document.body.style.userSelect = "", document.body.style.webkitUserSelect = "", b({ isDragging: !1 }), r !== o.currentIndex && w(r, !0), setTimeout(() => {
      L.value = !1;
    }, 100);
  }, me = (r) => {
    r.button === 0 && (r.preventDefault(), A(r.clientX, r.clientY));
  }, Q = (r) => {
    W(r.clientX, r.clientY);
  }, ae = () => {
    te();
  }, oe = (r) => {
    if (r.touches.length !== 1) return;
    const k = r.touches[0];
    A(k.clientX, k.clientY);
  }, se = (r) => {
    if (r.touches.length !== 1) return;
    const k = r.touches[0];
    W(k.clientX, k.clientY, r);
  }, ye = () => {
    te();
  }, be = (r) => {
    L.value && (r.preventDefault(), r.stopPropagation(), r.stopImmediatePropagation());
  };
  return q(() => {
    const r = t.value;
    r && (r.addEventListener("mousedown", me, {
      passive: !1
    }), document.addEventListener("mousemove", Q, {
      passive: !0
    }), document.addEventListener("mouseup", ae, { passive: !0 }), r.addEventListener("touchstart", oe, {
      passive: !0
    }), r.addEventListener("touchmove", se, {
      passive: !1
    }), r.addEventListener("touchend", ye, {
      passive: !0
    }), r.addEventListener("click", be, { capture: !0 }), r.addEventListener(
      "contextmenu",
      (k) => {
        g.value && k.preventDefault();
      },
      { passive: !1 }
    ));
  }), ee(() => {
    G && cancelAnimationFrame(G);
    const r = t.value;
    document.removeEventListener("mousemove", Q), document.removeEventListener("mouseup", ae), r && (r.removeEventListener("mousedown", me), r.removeEventListener("touchstart", oe), r.removeEventListener("touchmove", se), r.removeEventListener("touchend", ye), r.removeEventListener("click", be, !0)), document.body.style.userSelect = "", document.body.style.webkitUserSelect = "";
  }), {
    isDragging: K(g),
    deltaX: K(s),
    deltaY: K(d)
  };
}
function Ve({ containerRef: t, state: n }) {
  const o = x(!1), e = () => {
    o.value = !0, n.isHovered = !0;
  }, c = () => {
    o.value = !1, n.isHovered = !1;
  };
  return q(() => {
    const i = t.value;
    i && (i.addEventListener("mouseenter", e), i.addEventListener("mouseleave", c));
  }), ee(() => {
    const i = t.value;
    i && (i.removeEventListener("mouseenter", e), i.removeEventListener("mouseleave", c));
  }), {
    isHovered: K(o)
  };
}
function fe(t, n) {
  let o;
  return function(...e) {
    clearTimeout(o), o = setTimeout(() => {
      t.apply(this, e);
    }, n);
  };
}
function Ue({
  containerRef: t,
  state: n,
  props: o,
  goNext: e,
  goPrev: c,
  goNextPage: i,
  goPrevPage: w,
  canGoNext: f,
  canGoPrev: l
}) {
  var m, $, y, s;
  const v = x(!1), p = {
    threshold: ((m = o.wheelOptions) == null ? void 0 : m.threshold) ?? 30,
    velocityThreshold: (($ = o.wheelOptions) == null ? void 0 : $.velocityThreshold) ?? 10,
    pageScrollThreshold: ((y = o.wheelOptions) == null ? void 0 : y.pageScrollThreshold) ?? 100,
    debounceTime: ((s = o.wheelOptions) == null ? void 0 : s.debounceTime) ?? 10
  }, g = fe(() => {
    n.isWheeling = !1, v.value = !1;
  }, p.debounceTime || 10), a = (d) => {
    if (!o.mousewheel || n.isDragging) return;
    const D = o.direction === "horizontal" ? d.deltaX : d.deltaY, L = Math.abs(D), S = !l.value, z = !f.value, G = d.deltaY, U = G < 0 && S, Z = G > 0 && z;
    if (!((U || Z) && o.direction === "vertical") && L >= 1) {
      if (d.preventDefault(), d.stopPropagation(), L < p.threshold) {
        g();
        return;
      }
      n.isWheeling = !0, v.value = !0;
      const V = L > p.pageScrollThreshold;
      D > p.velocityThreshold ? f.value && (V ? i() : e()) : D < -p.velocityThreshold && l.value && (V ? w() : c()), g();
    }
  };
  return q(() => {
    const d = t.value;
    !d || !o.mousewheel || d.addEventListener("wheel", a, {
      passive: !1,
      capture: !1
    });
  }), ee(() => {
    const d = t.value;
    d && d.removeEventListener("wheel", a);
  }), {
    isWheeling: K(v)
  };
}
function je({ props: t, state: n, goNext: o, goToSlide: e, canGoNext: c }) {
  const i = x(null), w = x(!1), f = x(!1), l = () => {
    if (!t.autoPlay || f.value) return;
    f.value = !0, w.value = !1;
    const m = t.autoPlayInterval || 3e3;
    i.value = setInterval(() => {
      w.value || n.isHovered || n.isDragging || n.isWheeling || n.isTransitioning || (c.value ? o() : t.loop ? e(0) : v());
    }, m);
  }, v = () => {
    i.value && (clearInterval(i.value), i.value = null), f.value = !1, w.value = !1;
  }, p = () => {
    w.value = !0;
  }, g = () => {
    t.autoPlay && f.value && (w.value = !1);
  }, a = () => {
    v(), t.autoPlay && setTimeout(l, 100);
  };
  return X(
    () => n.isHovered,
    (m) => {
      m ? p() : g();
    }
  ), X(
    () => n.isDragging,
    (m) => {
      m ? p() : setTimeout(g, 500);
    }
  ), X(
    () => n.isWheeling,
    (m) => {
      m ? p() : setTimeout(g, 1e3);
    }
  ), X(
    () => n.currentIndex,
    () => {
      n.isDragging || n.isWheeling || a();
    }
  ), X(
    () => t.autoPlay,
    (m) => {
      m ? l() : v();
    }
  ), q(() => {
    t.autoPlay && setTimeout(l, 1e3);
  }), ee(() => {
    v();
  }), {
    isAutoplayActive: K(f),
    isAutoplayPaused: K(w),
    startAutoplay: l,
    stopAutoplay: v,
    pauseAutoplay: p,
    resumeAutoplay: g,
    restartAutoplay: a
  };
}
function Ye({
  containerRef: t,
  props: n,
  goNext: o,
  goPrev: e,
  goNextPage: c,
  goPrevPage: i,
  goToSlide: w,
  totalSlides: f
}) {
  const l = (a) => {
    const m = t.value;
    if (!m || !(document.activeElement === m || m.contains(document.activeElement))) return;
    const y = n.direction === "horizontal", s = a.ctrlKey || a.metaKey || a.shiftKey;
    switch (a.key) {
      case "ArrowLeft":
        y && (a.preventDefault(), a.stopPropagation(), s ? i() : e());
        break;
      case "ArrowRight":
        y && (a.preventDefault(), a.stopPropagation(), s ? c() : o());
        break;
      case "ArrowUp":
        y || (a.preventDefault(), a.stopPropagation(), s ? i() : e());
        break;
      case "ArrowDown":
        y || (a.preventDefault(), a.stopPropagation(), s ? c() : o());
        break;
      case "Home":
        a.preventDefault(), a.stopPropagation(), w(0, !0);
        break;
      case "End":
        a.preventDefault(), a.stopPropagation(), w(f.value - 1, !0);
        break;
      case " ":
      case "Enter":
        a.key === " " && document.activeElement === m && a.preventDefault();
        break;
    }
  }, v = () => {
    const a = t.value;
    a && (a.style.outline = "2px solid rgba(59, 130, 246, 0.5)", a.style.outlineOffset = "2px");
  }, p = () => {
    const a = t.value;
    a && (a.style.outline = "none", a.style.outlineOffset = "0");
  }, g = () => {
    const a = t.value;
    a && document.activeElement !== a && a.focus();
  };
  return q(() => {
    const a = t.value;
    a && (a.hasAttribute("tabindex") || a.setAttribute("tabindex", "0"), document.addEventListener("keydown", l, { capture: !0 }), a.addEventListener("focus", v), a.addEventListener("blur", p), a.addEventListener("click", g), a.style.outline = "none", a.style.cursor = "pointer");
  }), ee(() => {
    const a = t.value;
    document.removeEventListener("keydown", l, {
      capture: !0
    }), a && (a.removeEventListener("focus", v), a.removeEventListener("blur", p), a.removeEventListener("click", g));
  }), {
    // Expose method to manually focus the carousel for external control
    focus: () => {
      const a = t.value;
      a && a.focus();
    }
  };
}
function Xe({ props: t, itemsToShow: n, totalSlides: o }) {
  const e = Se({
    currentIndex: 0,
    isTransitioning: !1,
    isDragging: !1,
    isHovered: !1,
    isWheeling: !1
  }), c = x(0), i = x(0), w = (t == null ? void 0 : t.bufferSize) || 5, f = (t == null ? void 0 : t.maxDomElements) || 10, l = x(null), v = x({
    maxIndex: 0,
    canGoNext: !0,
    canGoPrev: !1,
    progress: 0,
    lastItemsToShow: 0,
    lastTotalSlides: 0
  }), p = C(() => {
    const u = n.value, h = o.value;
    if (v.value.lastItemsToShow === u && v.value.lastTotalSlides === h)
      return v.value.maxIndex;
    let I;
    return t.direction === "vertical" ? I = Math.max(0, h - 1) : I = Math.max(0, h - u), v.value.maxIndex = I, v.value.lastItemsToShow = u, v.value.lastTotalSlides = h, I;
  }), g = C(() => {
    const u = e.currentIndex < p.value;
    return v.value.canGoNext = u, u;
  }), a = C(() => {
    const u = e.currentIndex > 0;
    return v.value.canGoPrev = u, u;
  }), m = C(() => {
    const u = p.value;
    if (u === 0) return 100;
    const h = e.currentIndex / u * 100;
    return v.value.progress = h, h;
  }), $ = C(() => {
    const u = [], h = o.value, I = e.currentIndex, M = n.value;
    if (h === 0) return u;
    const P = Math.max(0, Math.min(I, h - 1)), b = Math.min(P + M, h) - P, A = Math.max(0, Math.ceil(b));
    if (!Number.isFinite(A)) return u;
    try {
      u.length = A;
    } catch {
      return [];
    }
    for (let W = 0; W < A; W++)
      u[W] = P + W;
    return u;
  }), y = (u) => {
    const h = o.value;
    if (h <= f)
      return { start: 0, end: h - 1 };
    let I = Math.floor(f / 2), M = u - I, P = u + I;
    return M < 0 ? (M = 0, P = f - 1) : P >= h && (P = h - 1, M = P - f + 1), { start: M, end: P };
  }, s = C(() => {
    const u = o.value, h = c.value, I = i.value, M = [];
    for (let P = h; P <= I; P++)
      P >= 0 && P < u && M.push(P);
    return M;
  }), d = (u) => {
    if (o.value <= n.value + w * 2)
      return !1;
    const I = c.value, M = i.value;
    if (I === 0 && M === 0)
      return !0;
    const P = I + 2, H = M - n.value - 2;
    return u <= P || u >= H;
  }, E = (u, h = !1) => {
    const I = o.value;
    if (I <= n.value + w * 2) {
      c.value = 0, i.value = I - 1;
      return;
    }
    const { start: M, end: P } = y(u);
    h ? (c.value = M, i.value = P, l.value = null) : l.value = { newStart: M, newEnd: P, targetIndex: u };
  }, D = () => {
    if (l.value) {
      const { newStart: u, newEnd: h } = l.value;
      c.value = u, i.value = h, l.value = null;
    }
  }, L = C(() => c.value), S = (u, h = !0) => {
    if (e.isTransitioning && h) return;
    const I = Math.max(0, Math.min(u, p.value));
    if (I === e.currentIndex) return;
    d(I) && !e.isTransitioning && E(I, !1), e.currentIndex = I, h ? (e.isTransitioning = !0, setTimeout(() => {
      e.isTransitioning = !1, D();
    }, t.speed || 300)) : D();
  }, z = (u = !0) => {
    !g.value || e.isTransitioning || e.isWheeling || S(e.currentIndex + 1, u);
  }, G = (u = !0) => {
    !a.value || e.isTransitioning || e.isWheeling || S(e.currentIndex - 1, u);
  }, U = (u = !0) => {
    if (!g.value || e.isTransitioning || e.isWheeling) return;
    const h = Math.min(e.currentIndex + n.value, p.value);
    S(h, u);
  }, Z = (u = !0) => {
    if (!a.value || e.isTransitioning || e.isWheeling) return;
    const h = Math.max(e.currentIndex - n.value, 0);
    S(h, u);
  }, V = /* @__PURE__ */ (() => {
    let u = !1, h = {};
    const I = () => {
      if (!u) return;
      u = !1;
      const M = { ...h };
      h = {}, Object.assign(e, M);
    };
    return (M) => {
      Object.entries(M).forEach(([P, H]) => {
        const b = P;
        switch (b) {
          case "currentIndex":
            typeof H == "number" && H >= 0 && (h.currentIndex = Math.max(0, Math.min(H, p.value)));
            break;
          case "isTransitioning":
          case "isDragging":
          case "isHovered":
          case "isWheeling":
            typeof H == "boolean" && (h[b] = H);
            break;
        }
      }), u || (u = !0, re(I));
    };
  })();
  X(
    () => o.value,
    () => {
      E(e.currentIndex, !0);
    },
    { immediate: !0 }
  ), X(
    () => e.isTransitioning,
    (u) => {
      !u && l.value && setTimeout(() => {
        D();
      }, 50);
    }
  );
  let J = p.value;
  return X(
    () => p.value,
    (u) => {
      u !== J && (J = u, e.currentIndex > u && S(u, !1));
    },
    { flush: "sync" }
  ), {
    state: K(e),
    maxIndex: p,
    canGoNext: g,
    canGoPrev: a,
    progress: m,
    visibleSlideIndices: $,
    renderedSlideIndices: s,
    virtualOffset: L,
    goToSlide: S,
    goNext: z,
    goPrev: G,
    goNextPage: U,
    goPrevPage: Z,
    updateState: V
  };
}
function Ke({ props: t, slideWidth: n, slideHeight: o, itemsToShow: e }) {
  const c = x(null), i = x(null), w = C(() => t.data.length), f = Xe({
    props: t,
    itemsToShow: e,
    totalSlides: w
  }), {
    state: l,
    goToSlide: v,
    goNext: p,
    goPrev: g,
    goNextPage: a,
    goPrevPage: m,
    canGoNext: $,
    canGoPrev: y,
    progress: s,
    updateState: d,
    visibleSlideIndices: E,
    renderedSlideIndices: D,
    virtualOffset: L
  } = f, S = C(() => {
    const u = (e == null ? void 0 : e.value) > 1 && (t == null ? void 0 : t.gap) || 0, h = t.direction === "vertical" ? o.value + u : n.value + u, I = l.currentIndex - L.value;
    return -Math.max(0, I) * h;
  }), z = C(() => {
    const u = t.direction === "vertical" ? `translateY(${S.value}px)` : `translateX(${S.value}px)`, h = l.isTransitioning && !l.isDragging ? `transform ${t.speed || 300}ms ${t.easing || "ease"}` : "none";
    return {
      transform: u,
      transition: h
    };
  }), G = t.draggable ? _e({
    containerRef: i,
    trackRef: c,
    state: l,
    props: t,
    slideWidth: n,
    slideHeight: o,
    goToSlide: v,
    canGoNext: $,
    canGoPrev: y,
    updateState: d,
    virtualOffset: L
  }) : null, U = Ue({
    containerRef: i,
    state: l,
    props: t,
    goNext: p,
    goPrev: g,
    goNextPage: a,
    goPrevPage: m,
    canGoNext: $,
    canGoPrev: y
  }), Z = Ve({
    containerRef: i,
    state: l
  }), V = Ye({
    containerRef: i,
    props: t,
    goNext: p,
    goPrev: g,
    goNextPage: a,
    goPrevPage: m,
    goToSlide: v,
    totalSlides: w
  }), J = je({
    props: t,
    state: l,
    goNext: p,
    goToSlide: v,
    canGoNext: $
  });
  return {
    // Refs
    carouselTrack: c,
    carouselContainer: i,
    // State
    state: l,
    canGoNext: $,
    canGoPrev: y,
    progress: s,
    visibleSlideIndices: E,
    renderedSlideIndices: D,
    virtualOffset: L,
    // Navigation
    goToSlide: v,
    goNext: p,
    goPrev: g,
    goNextPage: a,
    goPrevPage: m,
    // Styles
    trackStyle: z,
    // Composables (expose for advanced usage)
    dragComposable: G,
    wheelComposable: U,
    hoverComposable: Z,
    keyboardComposable: V,
    autoplayComposable: J
  };
}
const xe = Se({
  value: 0
});
function qe(t) {
  const n = x(!1), o = xe, e = x("100%"), c = x("auto"), i = x(0), w = fe(() => {
    n.value = !0;
  }, 200), f = () => {
    const y = T(t.containerRef);
    y && (c.value = "auto", e.value = "100%", (t == null ? void 0 : t.direction) === "vertical" && setTimeout(() => {
      const s = y.querySelector(".carousel-slide");
      s && (c.value = s.clientHeight + "px"), w();
    }, 50), (t == null ? void 0 : t.direction) === "horizontal" && setTimeout(() => {
      const s = y.clientWidth;
      if (s > 0) {
        const d = l.value > 1 && (t == null ? void 0 : t.gap) || 0, E = l.value, D = d * (E - 1), L = s - D;
        i.value = L / E, e.value = s + "px";
      }
      w();
    }, 10));
  }, l = C(() => {
    if (typeof t.itemsToShow == "number")
      return t.itemsToShow;
    if (typeof t.itemsToShow == "object") {
      if (o.value === 0) {
        const d = Object.keys(t.itemsToShow).map(Number).sort((E, D) => E - D);
        return t.itemsToShow[d[0]] || 1;
      }
      const y = Object.keys(t.itemsToShow).map(Number).sort((d, E) => E - d);
      for (const d of y)
        if (o.value >= d)
          return t.itemsToShow[d];
      const s = Math.min(...y);
      return t.itemsToShow[s] || 1;
    }
    return 1;
  }), v = C(() => {
    var S, z;
    const y = l.value, s = l.value > 1 && (t == null ? void 0 : t.gap) || 0, d = Number((z = (S = e == null ? void 0 : e.value) == null ? void 0 : S.toString()) == null ? void 0 : z.replace("px", "")), E = s * (y - 1), L = (d - E) / y;
    return {
      "--slides-count": y,
      "--carousel-slide-width": L ? `${L}px` : `calc(${e == null ? void 0 : e.value} / ${y} - ${s * 0.75}px)`,
      "--container-width": e == null ? void 0 : e.value,
      "--container-height": c == null ? void 0 : c.value,
      "--carousel-gap": `${s}px`
    };
  }), p = C(() => {
    const y = ["carousel"];
    return t.direction === "vertical" ? y.push("carousel--vertical") : y.push("carousel--horizontal"), n.value && y.push("carousel--initialized"), y;
  }), g = () => {
    o.value = window.innerWidth;
  }, a = fe(() => {
    n.value = !1, g(), f();
  }, 100);
  q(() => {
    g(), re(() => {
      f();
    }), typeof window < "u" && window.addEventListener("resize", a, {
      passive: !0
    });
  }), ee(() => {
    typeof window < "u" && window.removeEventListener("resize", a);
  });
  const m = C(() => Number(c.value.toString().replace("px", ""))), $ = () => {
    n.value = !1, re(() => {
      f();
    });
  };
  return {
    containerWidth: K(e),
    slideHeight: m,
    isInitialized: n,
    updateDimensions: $,
    itemsToShow: l,
    containerCSSVars: v,
    containerClass: p,
    slideWidth: i
  };
}
function Ze({
  containerRef: t,
  pagination: n,
  paginationVisibility: o,
  paginationPosition: e,
  direction: c,
  paginationHoverEdgeThreshold: i = 0.2,
  paginationHoverInitialTimeout: w = 1e3
}) {
  const f = x({}), l = x({ prev: !1, next: !1 }), v = x({ x: 0, y: 0 }), p = C(() => Array.isArray(n) ? n : [n]), g = C(() => {
    const s = {}, d = Array.isArray(o) ? o : [o || "always"];
    return p.value.forEach((E, D) => {
      s[E] = d[D] || d[0] || "always";
    }), s;
  }), a = () => {
    p.value.forEach((s) => {
      f.value[s] = g.value[s] === "always";
    });
  };
  q(() => {
    a(), Object.keys(g.value).forEach((s) => {
      g.value[s] === "hover" && (f.value[s] = !0, setTimeout(() => {
        f.value[s] = !1;
      }, w));
    });
  });
  const m = fe((s) => {
    if (!t.value) return;
    const d = t.value.getBoundingClientRect();
    v.value = {
      x: s.clientX - d.left,
      y: s.clientY - d.top
    };
    const E = c === "horizontal" ? d.width * i : d.height * i, D = c === "horizontal";
    l.value.prev = !1, l.value.next = !1;
    const L = v.value.x < 0 || v.value.x > d.width || v.value.y < 0 || v.value.y > d.height;
    L || (D ? v.value.x <= E ? l.value.prev = !0 : v.value.x >= d.width - E && (l.value.next = !0) : v.value.y <= E ? l.value.prev = !0 : v.value.y >= d.height - E && (l.value.next = !0)), Object.keys(g.value).forEach((S) => {
      g.value[S] === "hover" && (S === "buttons" && (Array.isArray(e) ? e[p.value.indexOf(S)] || e[0] : e) === "center" ? f.value[S] = l.value.prev || l.value.next : f.value[S] = !L);
    });
  }, 50), $ = () => {
    Object.keys(g.value).forEach((s) => {
      g.value[s] === "hover" && (f.value[s] = s !== "buttons");
    });
  }, y = () => {
    Object.keys(g.value).forEach((s) => {
      g.value[s] === "hover" && (f.value[s] = !1);
    }), l.value.prev = !1, l.value.next = !1;
  };
  return X([n, o], a), q(() => {
    const s = t.value;
    s && (s.addEventListener("mousemove", m), s.addEventListener("mouseenter", $), s.addEventListener("mouseleave", y));
  }), ee(() => {
    const s = t.value;
    s && (s.removeEventListener("mousemove", m), s.removeEventListener("mouseenter", $), s.removeEventListener("mouseleave", y));
  }), {
    isPaginationVisible: f,
    isMouseNearEdge: l
  };
}
const Je = { class: "carousel-wrapper" }, Qe = ["aria-live", "aria-busy"], Re = { class: "carousel-slide-content" }, et = { class: "carousel-default-content" }, nt = /* @__PURE__ */ ie({
  __name: "Carousel",
  props: {
    data: {},
    gap: { default: 0 },
    loop: { type: Boolean, default: !1 },
    speed: { default: 200 },
    easing: { default: "ease-out" },
    autoPlay: { type: Boolean, default: !1 },
    draggable: { type: Boolean, default: !0 },
    mousewheel: { type: Boolean, default: !0 },
    autoFocus: { type: Boolean, default: !1 },
    autoPlayInterval: { default: 3e3 },
    currentItem: { default: 0 },
    paginationBackground: { type: Boolean },
    paginationSize: { default: "md" },
    itemsToShow: { default: 1 },
    direction: { default: "horizontal" },
    pagination: { type: [String, Boolean, Array], default: "dots" },
    paginationPosition: {},
    paginationVisibility: { default: "always" },
    paginationHoverEdgeThreshold: { default: 0.2 },
    paginationHoverInitialTimeout: { default: 1e3 },
    wheelOptions: { default: () => ({
      threshold: 10,
      velocityThreshold: 8,
      pageScrollThreshold: 80,
      debounceTime: 5,
      preventDefault: !0,
      stopPropagation: !0
    }) },
    bufferSize: { default: 5 },
    maxDomElements: { default: 10 }
  },
  emits: ["slide-change"],
  setup(t, { expose: n, emit: o }) {
    const e = t, c = o, i = x(null), { containerCSSVars: w, containerClass: f, itemsToShow: l, slideHeight: v, slideWidth: p, isInitialized: g } = qe({
      direction: e.direction,
      containerRef: i,
      itemsToShow: e.itemsToShow,
      gap: e.gap
    }), a = Ke({
      props: e,
      slideWidth: p,
      slideHeight: v,
      itemsToShow: l
    }), {
      state: m,
      goNext: $,
      goPrev: y,
      progress: s,
      canGoNext: d,
      canGoPrev: E,
      goToSlide: D,
      carouselTrack: L,
      trackStyle: S,
      carouselContainer: z,
      keyboardComposable: G,
      visibleSlideIndices: U,
      renderedSlideIndices: Z
    } = a, { isPaginationVisible: V, isMouseNearEdge: J } = Ze({
      containerRef: i,
      pagination: e.pagination,
      paginationVisibility: e.paginationVisibility,
      paginationPosition: e.paginationPosition,
      direction: e.direction,
      paginationHoverEdgeThreshold: e.paginationHoverEdgeThreshold,
      paginationHoverInitialTimeout: e.paginationHoverInitialTimeout
    }), u = C(() => {
      if (!g.value) {
        const A = l.value;
        return e.data.slice(0, A).map((W, te) => ({
          item: W,
          originalIndex: te,
          isVirtual: !1
        }));
      }
      return Z.value.map((A) => ({
        item: e.data[A],
        originalIndex: A,
        isVirtual: !0
      }));
    }), h = C(() => {
      var b;
      return (e == null ? void 0 : e.pagination) && (e == null ? void 0 : e.pagination.length) > 0 && ((b = e == null ? void 0 : e.data) == null ? void 0 : b.length) > l.value;
    }), I = (b) => {
      const A = ["carousel-slide"];
      return g.value && (m != null && m.isDragging && A.push("slide-moving"), e.direction === "horizontal" && b === m.currentIndex - 1 + l.value && A.push("carouse-last-visible-slide")), A.join(" ");
    }, M = C(() => ({
      ...w.value
    })), P = (b) => `slide-${b.originalIndex}`;
    n({
      goToSlide: D,
      goNext: $,
      goPrev: y,
      state: K(m),
      canGoNext: d,
      canGoPrev: E,
      focus: G.focus
    });
    let H = !0;
    return Ie(() => {
      e != null && e.currentItem && a.goToSlide(e.currentItem, !1);
    }), X(
      () => e.currentItem,
      (b, A) => {
        if (H) {
          H = !1;
          return;
        }
        b !== A && b !== m.currentIndex && a.goToSlide(b, !H);
      },
      { flush: "post" }
    ), X(
      () => m.currentIndex,
      (b) => {
        c("slide-change", b);
      }
    ), q(async () => {
      H = !1, await re(), e != null && e.autoFocus && setTimeout(() => {
        var b;
        (b = z.value) == null || b.focus();
      }, 500);
    }), (b, A) => (O(), B("div", Je, [
      _("div", {
        ref_key: "containerRef",
        ref: i,
        tabindex: "0",
        class: "carousel-focus-container",
        role: "region",
        "aria-live": T(m).isTransitioning ? "polite" : "off",
        "aria-busy": T(m).isTransitioning
      }, [
        _("div", {
          class: Y(T(f)),
          style: ne(M.value)
        }, [
          _("div", {
            ref_key: "carouselContainer",
            ref: z,
            class: Y(["carousel-container", e != null && e.draggable ? "" : "carousel-container--no-drag"])
          }, [
            _("div", {
              ref_key: "carouselTrack",
              ref: L,
              class: Y(`carousel-track ${T(l) > 1 ? "carousel-track-multiple" : ""}`),
              style: ne(T(S))
            }, [
              (O(!0), B(ge, null, pe(u.value, (W, te, me, Q) => {
                var se;
                const ae = [
                  W.item,
                  W.originalIndex,
                  (se = T(m)) == null ? void 0 : se.isDragging,
                  T(m).currentIndex,
                  T(l),
                  T(U).includes(W.originalIndex),
                  T(g)
                ];
                if (Q && Q.key === P(W) && Ee(Q, ae)) return Q;
                const oe = (O(), B("div", {
                  key: P(W),
                  class: Y(I(W.originalIndex)),
                  "aria-hidden": T(g) ? !T(U).includes(W.originalIndex) : !1,
                  role: "group"
                }, [
                  _("div", Re, [
                    R(b.$slots, "default", {
                      item: W.item,
                      index: W.originalIndex
                    }, () => [
                      _("div", et, " Slide " + he(W.originalIndex + 1), 1)
                    ])
                  ])
                ], 10, ["aria-hidden"]));
                return oe.memo = ae, oe;
              }, A, 0), 128))
            ], 6)
          ], 2)
        ], 6),
        h.value ? Te([
          b.pagination,
          b.paginationPosition,
          b.paginationVisibility,
          T(m).currentIndex,
          e.data.length,
          T(l),
          T(s),
          T(U),
          T(d),
          T(E),
          b.direction
        ], () => (O(), Pe(He, {
          key: 0,
          paginationSize: b.paginationSize,
          type: b.pagination,
          position: b.paginationPosition,
          visibility: b.paginationVisibility,
          "current-index": T(m).currentIndex,
          "total-slides": e.data.length,
          "items-to-show": T(l),
          progress: T(s),
          "visible-slide-indices": T(U),
          "can-go-next": T(d),
          "can-go-prev": T(E),
          "on-go-to-slide": T(D),
          direction: b.direction,
          "on-go-next": T($),
          "on-go-prev": T(y),
          "is-pagination-visible": T(V),
          "is-mouse-near-edge": T(J)
        }, {
          "prev-icon": ve(() => [
            R(b.$slots, "prev-icon")
          ]),
          "next-icon": ve(() => [
            R(b.$slots, "next-icon")
          ]),
          _: 3
        }, 8, ["paginationSize", "type", "position", "visibility", "current-index", "total-slides", "items-to-show", "progress", "visible-slide-indices", "can-go-next", "can-go-prev", "on-go-to-slide", "direction", "on-go-next", "on-go-prev", "is-pagination-visible", "is-mouse-near-edge"])), A, 2) : le("", !0)
      ], 8, Qe)
    ]));
  }
}), it = (t) => {
  var i, w, f;
  const n = (f = (w = (i = t == null ? void 0 : t.ssrContext) == null ? void 0 : i.event) == null ? void 0 : w.context) == null ? void 0 : f.userAgent, o = xe, c = ((l) => /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(l) ? /ipad|android(?!.*mobile)|tablet/i.test(l) ? "tablet" : "mobile" : "desktop")(n);
  o.value = c === "mobile" ? 300 : 1024, q(() => {
    o.value = window.innerWidth;
  });
};
export {
  nt as default,
  it as initializeDevice
};