@aotearoan/neon/dist/components/presentation/image-carousel/NeonImageCarousel.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { defineComponent as x, ref as n, onMounted as I, onUnmounted as N, watch as v } from "vue";
import S from "../../navigation/link/NeonLink.vue.es.js";
import C from "../../user-input/button/NeonButton.vue.es.js";
import E from "../../layout/stack/NeonStack.vue.es.js";
const M = x({
  name: "NeonImageCarousel",
  components: {
    NeonButton: C,
    NeonLink: S,
    NeonStack: E
  },
  props: {
    /**
     * The expanded state of the image carousel.
     */
    expanded: { type: Boolean, default: !1 },
    /**
     * The images to be displayed in the carousel.
     */
    images: { type: Array, required: !0 },
    /**
     * Provide an alternative image count label. This can be useful for translations. The default is e.g.
     * <em>2 images</em>.
     */
    imageCountLabel: { type: String, default: void 0 },
    /**
     * Hide the label under the dot navigation.
     */
    hideLabel: { type: Boolean, default: !1 },
    /**
     * Provide an alternative label for the Previous button.
     */
    closeLabel: { type: String, default: "Close" },
    /**
     * Provide an alternative label for the Previous button.
     */
    previousLabel: { type: String, default: "Previous" },
    /**
     * Provide an alternative label for the Next button.
     */
    nextLabel: { type: String, default: "Next" }
  },
  emits: [
    /**
     * The index of the currently visible image.
     *
     * @type {number}
     */
    "current-image",
    /**
     * The current expanded state of the image carousel.
     *
     * @type {boolean}
     */
    "update:expanded"
  ],
  setup(l, { emit: s }) {
    const u = n(!1), o = n(0), t = n(null), i = n([]), c = n([]), a = n(!1), d = (e) => {
      e !== o.value && (o.value = e, s("current-image", e));
    }, r = (e) => {
      t.value && l.images.length > 0 && (d(e), t.value.scrollTo(t.value.clientWidth * e, 0));
    }, f = () => {
      o.value < l.images.length - 1 && r(o.value + 1);
    }, p = () => {
      o.value !== 0 && r(o.value - 1);
    };
    I(() => {
      const e = {
        root: t.value,
        rootMargin: "0px",
        threshold: 0.6
      };
      c.value = i.value.map((b, h) => {
        const m = new IntersectionObserver((y) => {
          y.forEach((L) => {
            u.value && L.isIntersecting && d(h);
          });
        }, e);
        return m.observe(b), m;
      }), setTimeout(() => {
        t.value && t.value.scrollLeft !== 0 && (t.value.scrollLeft = 0), u.value = !0;
      }, 50);
    }), N(() => {
      c.value.forEach((e) => e.disconnect());
    });
    const g = () => {
      a.value = !a.value, s("update:expanded", a.value);
    };
    return v(
      () => a.value,
      (e) => {
        e ? document.body.classList.add("neon-closable--open") : document.body.classList.remove("neon-closable--open");
      },
      { immediate: !0 }
    ), v(
      () => l.expanded,
      (e) => {
        a.value !== e && (a.value = e);
      },
      { immediate: !0 }
    ), {
      emit: s,
      currentImage: o,
      carouselItem: i,
      carouselItems: t,
      initialised: u,
      isExpanded: a,
      next: f,
      previous: p,
      scrollTo: r,
      toggleExpanded: g
    };
  }
});
export {
  M as default
};
//# sourceMappingURL=NeonImageCarousel.es.js.map