@varlet/ui
Version:
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
115 lines (114 loc) • 4.14 kB
JavaScript
import { defineComponent, ref, watch } from "vue";
import { call } from "@varlet/shared";
import Lazy from "../lazy/index.mjs";
import Ripple from "../ripple/index.mjs";
import { createNamespace } from "../utils/components.mjs";
import { toSizeUnit } from "../utils/elements.mjs";
import { props } from "./props.mjs";
const { name, n, classes } = createNamespace("image");
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot } from "vue";
const _hoisted_1 = ["alt", "title", "referrerpolicy", "lazy-loading", "lazy-error"];
const _hoisted_2 = ["alt", "title", "referrerpolicy", "src"];
function __render__(_ctx, _cache) {
var _a;
const _directive_lazy = _resolveDirective("lazy");
const _directive_ripple = _resolveDirective("ripple");
return _withDirectives((_openBlock(), _createElementBlock(
"div",
{
class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [!_ctx.block, _ctx.n("$--inline-block")])),
style: _normalizeStyle({
width: _ctx.toSizeUnit(_ctx.width),
height: _ctx.toSizeUnit(_ctx.height),
borderRadius: _ctx.toSizeUnit(_ctx.radius)
})
},
[
_ctx.lazy && !_ctx.showErrorSlot ? _withDirectives((_openBlock(), _createElementBlock("img", {
key: 0,
role: "img",
class: _normalizeClass(_ctx.n("image")),
alt: _ctx.alt,
title: _ctx.title,
referrerpolicy: _ctx.referrerpolicy,
"lazy-loading": _ctx.loading,
"lazy-error": _ctx.error,
style: _normalizeStyle({ objectFit: _ctx.fit, objectPosition: _ctx.position }),
onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
}, null, 46, _hoisted_1)), [
[_directive_lazy, (_a = _ctx.src) != null ? _a : ""]
]) : _createCommentVNode("v-if", true),
!_ctx.lazy && !_ctx.showErrorSlot ? (_openBlock(), _createElementBlock("img", {
key: 1,
role: "img",
class: _normalizeClass(_ctx.n("image")),
alt: _ctx.alt,
title: _ctx.title,
referrerpolicy: _ctx.referrerpolicy,
style: _normalizeStyle({ objectFit: _ctx.fit, objectPosition: _ctx.position }),
src: _ctx.src,
onLoad: _cache[2] || (_cache[2] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
onError: _cache[3] || (_cache[3] = (...args) => _ctx.handleError && _ctx.handleError(...args)),
onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
}, null, 46, _hoisted_2)) : _createCommentVNode("v-if", true),
_ctx.showErrorSlot ? _renderSlot(_ctx.$slots, "error", { key: 2 }) : _createCommentVNode("v-if", true)
],
6
/* CLASS, STYLE */
)), [
[_directive_ripple, { disabled: !_ctx.ripple }]
]);
}
const __sfc__ = defineComponent({
name,
directives: {
Lazy,
Ripple
},
props,
setup(props2, { slots }) {
const showErrorSlot = ref(false);
watch(
() => props2.src,
() => {
showErrorSlot.value = false;
}
);
function handleError(e) {
showErrorSlot.value = !!slots.error;
call(props2.onError, e);
}
function handleLoad(e) {
const el = e.currentTarget;
if (props2.lazy) {
if (el._lazy.state === "success") {
call(props2.onLoad, e);
return;
}
if (el._lazy.state === "error") {
handleError(e);
}
} else {
call(props2.onLoad, e);
}
}
function handleClick(e) {
call(props2.onClick, e);
}
return {
showErrorSlot,
n,
classes,
toSizeUnit,
handleLoad,
handleError,
handleClick
};
}
});
__sfc__.render = __render__;
var stdin_default = __sfc__;
export {
stdin_default as default
};