@vue-material/core
Version:
Yet another 'Material Design Components' library for Vue3.
93 lines (92 loc) • 3.22 kB
JavaScript
import "../../assets/image.css.js";
import $i from "../../attach-styles.js";
$i(".md-square-image{display:inline-flex;vertical-align:top;max-width:100%;aspect-ratio:1;align-items:center;justify-content:center;border-radius:var(--xs);background:var(--surface-container)}.md-square-image img{transition:opacity .2s ease-out;object-fit:cover;width:100%;aspect-ratio:1}", "e971e861");
import { defineComponent, ref, watch, openBlock, createBlock, normalizeClass, unref, withCtx, resolveDynamicComponent, createElementVNode, mergeProps } from "vue";
import { createStyle } from "../../utils/create-style/index.js";
import { frames } from "../Frame/variants.js";
import { toSvgMask } from "../Frame/util.js";
import { useFetch } from "../../ref/use-fetch.js";
import _sfc_main$2 from "../Misc/view-observer.vue.js";
import _sfc_main$1 from "./default-loader.vue.js";
import _sfc_main$3 from "../Box/box.vue.js";
import { getSrc } from "./util.js";
const _hoisted_1 = ["src", "width", "height"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "square-image",
props: {
src: {},
size: { default: 96 },
frame: { default: "none" },
lazy: { type: Boolean },
loader: { default: _sfc_main$1 },
px: {},
py: {},
pl: {},
pr: {},
pt: {},
pb: {},
mx: {},
my: {},
ml: {},
mr: {},
mt: {},
mb: {},
width: {},
height: {},
m: {},
p: {},
r: {},
as: {},
bg: {},
styled: {}
},
setup(__props) {
const props = __props;
const visible = ref(false);
const fetch = useFetch(() => getSrc(props), "url-blob", { init: false });
const className = createStyle(() => ({
width: props.size,
height: props.size,
maskImage: props.frame in frames ? toSvgMask(48, frames[props.frame]) : "none"
}));
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",
apply: "visible",
class: normalizeClass(["md-square-image md-image", unref(className)]),
loading: !unref(fetch).data || void 0,
error: unref(fetch).error || void 0,
modelValue: visible.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event)
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.loader), {
class: "md-loader",
error: unref(fetch).error,
progress: unref(fetch).progress,
ready: unref(fetch).ready,
onRetry: unref(fetch).refetch
}, null, 40, ["error", "progress", "ready", "onRetry"])),
createElementVNode("img", mergeProps({ class: "md-image-element" }, _ctx.$attrs, {
src: unref(fetch).data,
width: _ctx.size,
height: _ctx.size
}), null, 16, _hoisted_1)
]),
_: 1
}, 8, ["class", "loading", "error", "modelValue"]);
};
}
});
export {
_sfc_main as default
};