maz-ui/components/chunks/MazCarousel.tT2IPWU9.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent as I, defineAsyncComponent as v, useSlots as N, ref as _, openBlock as s, createElementBlock as a, normalizeClass as r, renderSlot as n, createCommentVNode as p, createVNode as c, unref as i, withCtx as B, createElementVNode as k } from "vue";
import '../assets/MazCarousel.Bo1M1Wh3.css';const W = { key: 0 }, x = {
  key: 1,
  class: "m-carousel__header__actions"
}, $ = /* @__PURE__ */ I({
  __name: "MazCarousel",
  props: {
    noScrollBtn: { type: Boolean },
    ariaLabelPreviousButton: { default: "Scroll to previous items" },
    ariaLabelNextButton: { default: "Scroll to next items" },
    hideScrollbar: { type: Boolean }
  },
  setup(l) {
    const u = l, o = v(() => import("./MazBtn.BE40HJng.mjs")), d = v(() => import("./chevron-left.BqVOLRdC.mjs")), f = v(() => import("./chevron-right.CbjzEeHV.mjs")), h = N(), b = _(!1), S = _(!1), m = _();
    function L() {
      return !u.noScrollBtn || h.title;
    }
    function C() {
      return !!h.title;
    }
    function y() {
      const e = m.value;
      e == null || e.scrollTo(e.scrollLeft + e.clientWidth, 0);
    }
    function z() {
      const e = m.value;
      e == null || e.scrollTo(e.scrollLeft - e.clientWidth, 0);
    }
    function M(e) {
      const t = e.target;
      if (!t)
        return;
      b.value = t.scrollLeft >= 20;
      const g = t.scrollWidth - t.clientWidth;
      S.value = t.scrollLeft >= g - 20;
    }
    return (e, t) => (s(), a(
      "div",
      {
        class: r(["m-carousel m-reset-css", {
          "--hide-scrollbar": e.hideScrollbar
        }])
      },
      [
        L() ? (s(), a(
          "div",
          {
            key: 0,
            class: r(["m-carousel__header", { "--has-title": C() }])
          },
          [
            C() ? (s(), a("div", W, [
              n(e.$slots, "title", {}, void 0, !0)
            ])) : p("v-if", !0),
            e.noScrollBtn ? p("v-if", !0) : (s(), a("div", x, [
              c(i(o), {
                color: "transparent",
                class: r(["m-carousel__btn", { "--muted": !b.value }]),
                "no-elevation": "",
                fab: "",
                "aria-label": e.ariaLabelPreviousButton,
                onClick: z
              }, {
                default: B(() => [
                  n(e.$slots, "previous-icon", {}, () => [
                    c(i(d), { class: "maz-text-lg" })
                  ], !0)
                ]),
                _: 3
                /* FORWARDED */
              }, 8, ["class", "aria-label"]),
              c(i(o), {
                color: "transparent",
                class: r(["m-carousel__btn", { "--muted": S.value }]),
                fab: "",
                "no-elevation": "",
                "aria-label": e.ariaLabelNextButton,
                onClick: y
              }, {
                default: B(() => [
                  n(e.$slots, "next-icon", {}, () => [
                    c(i(f), { class: "maz-text-lg" })
                  ], !0)
                ]),
                _: 3
                /* FORWARDED */
              }, 8, ["class", "aria-label"])
            ]))
          ],
          2
          /* CLASS */
        )) : p("v-if", !0),
        k(
          "div",
          {
            ref_key: "MazCarouselItems",
            ref: m,
            class: "m-carousel__items",
            onScroll: M
          },
          [
            n(e.$slots, "default", {}, void 0, !0),
            t[0] || (t[0] = k(
              "div",
              { class: "m-carousel__items__spacer" },
              null,
              -1
              /* HOISTED */
            ))
          ],
          544
          /* NEED_HYDRATION, NEED_PATCH */
        )
      ],
      2
      /* CLASS */
    ));
  }
}), T = (l, u) => {
  const o = l.__vccOpts || l;
  for (const [d, f] of u)
    o[d] = f;
  return o;
}, E = /* @__PURE__ */ T($, [["__scopeId", "data-v-cccbba82"]]);
export {
  E as M,
  T as _
};