maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
105 lines (104 loc) • 4.59 kB
JavaScript
import { defineComponent, defineAsyncComponent, useSlots, ref, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, renderSlot, toDisplayString, createVNode, unref, withCtx } from "vue";
import { MazChevronLeft, MazChevronRight } from "@maz-ui/icons";
import { useTranslations } from "@maz-ui/translations";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazCarousel.-UuyHtHl.css';const _hoisted_1 = { key: 0 }, _hoisted_2 = { class: "maz-text-xl maz-font-semibold" }, _hoisted_3 = {
key: 1,
class: "m-carousel__header__actions"
}, _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazCarousel",
props: {
hideScrollButtons: { type: Boolean, default: !1 },
translations: {},
hideScrollbar: { type: Boolean, default: !1 },
title: {}
},
setup(__props) {
const MazBtn = defineAsyncComponent(() => import("./MazBtn.js")), slots = useSlots(), isScrolled = ref(!1), isScrolledMax = ref(!1), MazCarouselItems = ref(), { t } = useTranslations(), messages = computed(() => ({
ariaLabel: {
previousButton: __props.translations?.ariaLabel?.previousButton ?? t("carousel.ariaLabel.previousButton"),
nextButton: __props.translations?.ariaLabel?.nextButton ?? t("carousel.ariaLabel.nextButton")
}
}));
function hasHeader() {
return !__props.hideScrollButtons || slots.title || __props.title;
}
function hasTitle() {
return !!slots.title || !!__props.title;
}
function next() {
const items = MazCarouselItems.value;
items?.scrollTo(items.scrollLeft + items.clientWidth, 0);
}
function previous() {
const items = MazCarouselItems.value;
items?.scrollTo(items.scrollLeft - items.clientWidth, 0);
}
function setScrollState(event) {
const target = event.target;
if (!target)
return;
isScrolled.value = target.scrollLeft >= 20;
const itemsScrollWidth = target.scrollWidth - target.clientWidth;
isScrolledMax.value = target.scrollLeft >= itemsScrollWidth - 20;
}
return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
class: normalizeClass(["m-carousel m-reset-css", {
"--hide-scrollbar": __props.hideScrollbar
}])
}, [
hasHeader() ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["m-carousel__header", { "--has-title": hasTitle() }])
}, [
hasTitle() ? (openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "title", {}, () => [
createElementVNode("h4", _hoisted_2, toDisplayString(__props.title), 1)
], !0)
])) : createCommentVNode("", !0),
__props.hideScrollButtons ? createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_3, [
createVNode(unref(MazBtn), {
color: "transparent",
class: normalizeClass(["m-carousel__btn", { "--muted": !isScrolled.value }]),
fab: "",
"aria-label": messages.value.ariaLabel.previousButton,
onClick: previous
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "previous-icon", {}, () => [
createVNode(unref(MazChevronLeft), { class: "maz-text-lg" })
], !0)
]),
_: 3
}, 8, ["class", "aria-label"]),
createVNode(unref(MazBtn), {
color: "transparent",
class: normalizeClass(["m-carousel__btn", { "--muted": isScrolledMax.value }]),
fab: "",
"aria-label": messages.value.ariaLabel.nextButton,
onClick: next
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "next-icon", {}, () => [
createVNode(unref(MazChevronRight), { class: "maz-text-lg" })
], !0)
]),
_: 3
}, 8, ["class", "aria-label"])
]))
], 2)) : createCommentVNode("", !0),
createElementVNode("div", {
ref_key: "MazCarouselItems",
ref: MazCarouselItems,
class: "m-carousel__items",
onScroll: setScrollState
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, !0),
_cache[0] || (_cache[0] = createElementVNode("div", { class: "m-carousel__items__spacer" }, null, -1))
], 544)
], 2));
}
}), MazCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-77d2cc08"]]);
export {
MazCarousel as default
};