@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
100 lines (99 loc) • 3.55 kB
JavaScript
import b from "./NeonImageCarousel.es.js";
import { resolveComponent as d, openBlock as s, createElementBlock as l, normalizeClass as u, withKeys as i, withModifiers as r, createElementVNode as t, createVNode as g, Fragment as _, renderList as p, createBlock as f, withCtx as h, toDisplayString as k } from "vue";
import y from "../../../_virtual/_plugin-vue_export-helper.es.js";
const C = {
class: "neon-image-carousel__container",
tabindex: "-1"
}, $ = {
ref: "carouselItems",
class: "no-style neon-image-carousel__items"
}, I = ["alt", "src"], w = {
class: "neon-image-carousel__nav",
tabindex: "-1"
}, K = ["onClick"], L = /* @__PURE__ */ t("div", { class: "neon-image-carousel__nav-item-indicator" }, null, -1), z = [
L
], B = {
class: "neon-image-carousel__label",
tabindex: "-1"
};
function N(e, a, T, D, E, V) {
const c = d("neon-button"), v = d("neon-link");
return s(), l("div", {
class: u([{ "neon-image-carousel--initialised": e.initialised }, "neon-image-carousel"]),
tabindex: "0",
onKeydown: [
a[0] || (a[0] = i(r((...n) => e.previous && e.previous(...n), ["stop", "prevent"]), ["left"])),
a[1] || (a[1] = i(r((...n) => e.next && e.next(...n), ["stop", "prevent"]), ["right"]))
]
}, [
t("div", C, [
g(c, {
circular: !0,
disabled: e.currentImage === 0,
title: e.previousLabel,
transparent: !0,
"button-style": "text",
class: "neon-image-carousel__previous",
color: "neutral",
icon: "chevron-left",
size: "l",
onClick: e.previous
}, null, 8, ["disabled", "title", "onClick"]),
t("ul", $, [
(s(!0), l(_, null, p(e.images, (n, o) => (s(), l("li", {
key: n.src,
ref_for: !0,
ref: "carouselItem",
class: u([{ "neon-image-carousel__item--active": o === e.currentImage }, "neon-image-carousel__item"])
}, [
t("img", {
alt: n.alt,
src: n.src,
class: "neon-image-carousel__image"
}, null, 8, I)
], 2))), 128))
], 512),
g(c, {
circular: !0,
disabled: e.currentImage === e.images.length - 1,
title: e.nextLabel,
transparent: !0,
"button-style": "text",
class: "neon-image-carousel__next",
color: "neutral",
icon: "chevron-right",
size: "l",
onClick: e.next
}, null, 8, ["disabled", "title", "onClick"])
]),
t("div", w, [
(s(!0), l(_, null, p(e.images, (n, o) => (s(), f(v, {
key: o,
"aria-label": `Display image ${o + 1}`,
class: "neon-image-carousel__nav-item-link",
"outline-style": "none",
role: "button",
tabindex: "0",
onKeydown: [
i(r((m) => e.scrollTo(o), ["stop", "prevent"]), ["enter"]),
i(r((m) => e.scrollTo(o), ["stop", "prevent"]), ["space"])
]
}, {
default: h(() => [
t("div", {
class: u([{ "neon-image-carousel__nav-item--active": o === e.currentImage }, "neon-image-carousel__nav-item"]),
tabindex: "-1",
onClick: (m) => e.scrollTo(o)
}, z, 10, K)
]),
_: 2
}, 1032, ["aria-label", "onKeydown"]))), 128))
]),
t("span", B, k(e.imageCountLabel || `${e.images.length} ${e.images.length === 1 ? "image" : "images"}`), 1)
], 34);
}
const j = /* @__PURE__ */ y(b, [["render", N]]);
export {
j as default
};
//# sourceMappingURL=NeonImageCarousel.vue.es.js.map