maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
106 lines (105 loc) • 5.76 kB
JavaScript
import { defineComponent, onBeforeMount, computed, createElementBlock, createCommentVNode, openBlock, normalizeStyle, normalizeClass, createElementVNode, Fragment, renderList, withDirectives, unref, toDisplayString, createVNode } from "vue";
import { MazNoImage } from "@maz-ui/icons";
import { d as directive } from "../chunks/lazy-img.directive.BLFnGqQa.js";
import { d as directive$1 } from "../chunks/fullscreen-img.directive.D9oQ3Gni.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazGallery.BTNB3D6k.css';const _hoisted_1 = { class: "m-gallery__wrapper maz-flex maz-flex-1" }, _hoisted_2 = ["alt"], _hoisted_3 = {
key: 0,
class: "m-gallery__remaining-layer"
}, _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazGallery",
props: {
images: { default: () => [] },
displayedCount: { default: 5 },
remaining: { type: Boolean, default: !0 },
height: { type: [Number, String, Boolean], default: "100%" },
width: { type: [Number, String, Boolean], default: "100%" },
radius: { type: Boolean, default: !0 },
zoom: { type: Boolean, default: !0 },
hasEmptyLayer: { type: Boolean, default: !0 },
lazy: { type: Boolean, default: !0 },
blur: { type: Boolean, default: !0 },
scale: { type: Boolean, default: !0 },
separatorColor: { default: "transparent" },
backgroundColor: { default: () => {
} }
},
setup(__props) {
onBeforeMount(() => {
__props.displayedCount > 5 && console.warn('[MazUI](m-gallery) The maximum of "displayed-count" is 5');
});
const sizeStyle = computed(() => ({
...__props.width === !1 ? {} : {
flex: `0 0 ${typeof __props.width}` == "number" ? `${__props.width}px` : __props.width,
width: typeof __props.width == "number" ? `${__props.width}px` : __props.width
},
...__props.height === !1 ? {} : {
height: typeof __props.height == "number" ? `${__props.height}px` : `${__props.height}`,
minHeight: typeof __props.height == "number" ? `${__props.height}px` : `${__props.height}`
}
})), imagesCount = computed(() => __props.displayedCount <= 5 ? __props.displayedCount : 5), numberImagesRemaining = computed(() => __props.images.length - (__props.images.length < imagesCount.value ? __props.images.length : imagesCount.value)), imagesNormalized = computed(() => __props.images.map(
(image) => typeof image == "object" ? { ...image, thumbnail: image.thumbnail ?? image.src } : { src: image, thumbnail: image, alt: void 0 }
)), imagesShown = computed(() => imagesNormalized.value.slice(0, imagesCount.value)), imagesHidden = computed(() => imagesNormalized.value.slice(imagesCount.value, __props.images.length));
function shouldHaveRemainingLayer(index) {
return __props.remaining ? (numberImagesRemaining.value && index + 1) === imagesShown.value.length : !1;
}
return (_ctx, _cache) => _ctx.images.length > 0 || _ctx.hasEmptyLayer ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["m-gallery m-reset-css", { "--radius": _ctx.radius, "--has-background-color": !!_ctx.backgroundColor }]),
style: normalizeStyle([sizeStyle.value, {
"--gallery-separator-color": _ctx.separatorColor,
"--gallery-background-color": _ctx.backgroundColor
}])
}, [
createElementVNode("section", _hoisted_1, [
(openBlock(!0), createElementBlock(Fragment, null, renderList(imagesShown.value, (image, i) => (openBlock(), createElementBlock("figure", {
key: i,
class: normalizeClass(["m-gallery__item !maz-my-0 maz-flex maz-flex-center", [`m-gallery__item--${i + 1}`]])
}, [
withDirectives(createElementVNode("img", {
class: "m-gallery__item__image maz-flex-1",
src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
alt: image.alt,
loading: "lazy"
}, null, 8, _hoisted_2), [
[unref(directive), { src: image.thumbnail, disabled: !_ctx.lazy }, "bg-image"],
[unref(directive$1), {
src: image.src,
alt: image.alt,
disabled: !_ctx.zoom || shouldHaveRemainingLayer(i),
blurOnHover: _ctx.blur,
scaleOnHover: _ctx.scale
}]
]),
shouldHaveRemainingLayer(i) ? withDirectives((openBlock(), createElementBlock("div", _hoisted_3, [
createElementVNode("span", null, "+" + toDisplayString(numberImagesRemaining.value), 1)
])), [
[unref(directive$1), {
src: image.src,
alt: image.alt,
disabled: !_ctx.zoom,
blurOnHover: !1,
scaleOnHover: _ctx.scale
}]
]) : createCommentVNode("", !0)
], 2))), 128)),
_ctx.hasEmptyLayer && _ctx.images.length === 0 ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["m-gallery__empty-layer", { "maz-rounded-xl": _ctx.radius }]),
style: normalizeStyle([sizeStyle.value])
}, [
createVNode(unref(MazNoImage), { class: "maz-size-8" })
], 6)) : createCommentVNode("", !0)
]),
(openBlock(!0), createElementBlock(Fragment, null, renderList(imagesHidden.value, (image, i) => withDirectives((openBlock(), createElementBlock("div", {
key: i,
class: "m-gallery__hidden"
})), [
[unref(directive$1), { src: image.src, disabled: !_ctx.zoom }]
])), 128))
], 6)) : createCommentVNode("", !0);
}
}), MazGallery = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e5e0c058"]]);
export {
MazGallery as default
};