maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
63 lines (62 loc) • 3.1 kB
JavaScript
import { defineComponent, defineAsyncComponent, computed, withDirectives, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, renderSlot, Fragment, renderList, mergeProps, createVNode, unref } from "vue";
import { d as directive } from "../chunks/lazy-img.directive.BLFnGqQa.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazLazyImg.DO7a4PDm.css';const _hoisted_1 = ["data-lazy-srcset", "media"], _hoisted_2 = ["alt"], _hoisted_3 = {
key: 0,
class: "m-lazy-img-component-loader"
}, _sfc_main = /* @__PURE__ */ defineComponent({
inheritAttrs: !1,
__name: "MazLazyImg",
props: {
style: { default: void 0 },
class: { default: void 0 },
src: { default: void 0 },
alt: { default: void 0 },
hideLoader: { type: Boolean },
observerOnce: { type: Boolean, default: !0 },
loadOnce: { type: Boolean },
imageHeightFull: { type: Boolean },
observerOptions: { default: void 0 },
fallbackSrc: { default: void 0 },
imgClass: {},
block: { type: Boolean }
},
emits: ["intersecting", "loading", "loaded", "error"],
setup(__props, { emit: __emit }) {
const props = __props, emits = __emit, MazSpinner = defineAsyncComponent(() => import("./MazSpinner.js")), sources = computed(() => typeof props.src == "string" ? [{ srcset: props.src }] : props.src?.sources);
return (_ctx, _cache) => withDirectives((openBlock(), createElementBlock("picture", {
class: normalizeClass(["m-lazy-img-component m-reset-css", [{ "--use-loader": !__props.hideLoader, "--height-full": __props.imageHeightFull, "--block": __props.block }, props.class]]),
style: normalizeStyle(__props.style)
}, [
(openBlock(!0), createElementBlock(Fragment, null, renderList(sources.value, ({ srcset, media }, sourceIndex) => (openBlock(), createElementBlock("source", {
key: sourceIndex,
"data-lazy-srcset": srcset,
media
}, null, 8, _hoisted_1))), 128)),
createElementVNode("img", mergeProps(_ctx.$attrs, {
src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
loading: "lazy",
alt: __props.alt,
class: __props.imgClass
}), null, 16, _hoisted_2),
__props.hideLoader ? createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_3, [
createVNode(unref(MazSpinner), { size: "2em" })
])),
renderSlot(_ctx.$slots, "default", {}, void 0, !0)
], 6)), [
[unref(directive), {
loadOnce: __props.loadOnce,
observerOptions: __props.observerOptions,
fallbackSrc: __props.fallbackSrc,
observerOnce: __props.observerOnce,
onIntersecting: (el) => emits("intersecting", el),
onLoading: (el) => emits("loading", el),
onLoaded: (el) => emits("loaded", el),
onError: (el) => emits("error", el)
}]
]);
}
}), MazLazyImg = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e25b5767"]]);
export {
MazLazyImg as default
};