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