@vue-material/core
Version:
Yet another 'Material Design Components' library for Vue3.
80 lines (79 loc) • 2.99 kB
JavaScript
import "../../assets/image.css.js";
import $i from "../../attach-styles.js";
$i(".md-block-image{border-radius:var(--sm);aspect-ratio:var(--57250fb2);background:var(--surface-container)}.md-block-image img{display:block;object-fit:var(--231e0b2d);object-position:var(--fb95a8e6);transition:opacity .2s ease-out}", "d6794033");
import { defineComponent, useCssVars, ref, watch, openBlock, createBlock, unref, withCtx, createElementVNode, resolveDynamicComponent, createElementBlock, createCommentVNode } from "vue";
import { useFetch } from "../../ref/use-fetch.js";
import { getSrc } from "./util.js";
import _sfc_main$3 from "../Box/box.vue.js";
import _sfc_main$2 from "../Misc/view-observer.vue.js";
import _sfc_main$1 from "./default-loader.vue.js";
const _hoisted_1 = { class: "md-loader" };
const _hoisted_2 = ["src", "alt", "width", "height"];
const _sfc_main = /* @__PURE__ */ defineComponent({
...{ name: "MdBlockImage" },
__name: "block-image",
props: {
src: {},
alt: {},
fit: { default: "cover" },
position: { default: "center" },
ratio: {},
lazy: { type: Boolean },
cover: { type: Boolean, default: false },
width: {},
height: {},
loader: { default: _sfc_main$1 }
},
setup(__props) {
useCssVars((_ctx) => ({
"57250fb2": props.ratio,
"231e0b2d": props.fit,
"fb95a8e6": props.position
}));
const props = __props;
const visible = ref(false);
const fetch = useFetch(() => getSrc(props), "url-blob", { init: false });
watch(
visible,
(visible2) => {
if (fetch.ready || fetch.loading || fetch.error) return;
if (!props.lazy || visible2) fetch.refetch();
},
{ immediate: true }
);
return (_ctx, _cache) => {
return openBlock(), createBlock(_sfc_main$2, {
as: _sfc_main$3,
offset: "50",
class: "md-block-image md-image",
loading: unref(fetch).loading || void 0,
error: unref(fetch).error || void 0,
modelValue: visible.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event)
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.loader), {
error: unref(fetch).error,
progress: unref(fetch).progress,
ready: unref(fetch).ready,
onRetry: unref(fetch).refetch
}, null, 40, ["error", "progress", "ready", "onRetry"]))
]),
!unref(fetch).error ? (openBlock(), createElementBlock("img", {
key: 0,
class: "md-image-element",
src: unref(fetch).data,
alt: _ctx.alt,
width: _ctx.width,
height: _ctx.height
}, null, 8, _hoisted_2)) : createCommentVNode("", true)
]),
_: 1
}, 8, ["loading", "error", "modelValue"]);
};
}
});
export {
_sfc_main as default
};