vue-carousel-lite/index.js

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

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