@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
212 lines (211 loc) • 6.95 kB
JavaScript
import { defineComponent as K, useSlots as Q, inject as X, ref as i, computed as n, watch as N, reactive as Y, watchEffect as $, onBeforeUnmount as B, withDirectives as Z, openBlock as d, createElementBlock as S, normalizeStyle as ee, normalizeClass as y, renderSlot as P, createCommentVNode as _, createBlock as V, createVNode as E, unref as t, withCtx as z, mergeProps as C, toDisplayString as x, createElementVNode as re, createSlots as te, vShow as ae } from "vue";
import "../image-viewer/index.mjs";
import "../renderer/index.mjs";
import "../skeleton/index.mjs";
import { useProps as le, useNameHelper as oe, useLocale as se, emitEvent as I } from "@vexip-ui/config";
import { useIntersection as ie } from "@vexip-ui/hooks";
import { supportImgLoading as ne, toCssSize as F, isClient as ce } from "@vexip-ui/utils";
import { imageProps as ue } from "./props.mjs";
import { objectFitValues as ve, GROUP_STATE as de } from "./symbol.mjs";
import L from "../renderer/renderer.mjs";
import fe from "../skeleton/skeleton.mjs";
import pe from "./image-viewer.vue2.mjs";
const me = ["src", "alt", "width", "height", "loading", "aria-label"], Le = /* @__PURE__ */ K({
name: "Image",
__name: "image",
props: ue,
setup(M, { expose: U }) {
const w = ne(), e = le("image", M, {
src: {
default: "",
static: !0
},
fallbackSrc: "",
alt: "",
fit: {
default: "cover",
validator: (r) => ve.includes(r)
},
width: "",
height: "",
imgAttrs: () => ({}),
lazy: !1,
root: {
default: null,
static: !0
},
rootMargin: "",
preview: !1,
skeleton: !1,
placeholder: "",
errorTip: "",
radius: 0,
border: !1,
previewSrc: "",
viewerTransfer: null,
viewerProps: () => ({}),
slots: () => ({})
}), D = Q(), l = X(de, null), a = oe("image"), A = se("image"), u = i(w), s = i(u.value), o = i(""), f = i(!1), v = i(!1), p = i(!1), m = i(!1), b = i(), k = n(() => f.value && (!e.fallbackSrc || v.value)), T = n(() => !l && e.preview), O = n(() => [
a.b(),
a.bs("vars"),
{
[a.bm("inherit")]: e.inherit,
[a.bm("border")]: e.border,
[a.bm("loading")]: s.value,
[a.bm("error")]: k.value,
[a.bm("preview")]: (l == null ? void 0 : l.preview) || T.value
}
]), R = n(() => {
const r = {
width: F(e.width),
height: F(e.height),
[a.cv("fit")]: e.fit,
[a.cv("radius")]: e.radius ? `${e.radius}px` : ""
};
return e.border && typeof e.border == "string" && (r[a.cv("b-color")] = e.border), r;
}), j = n(() => {
var r;
return e.src || ((r = e.imgAttrs) == null ? void 0 : r.src);
}), W = n(() => m.value || w && e.lazy ? "lazy" : void 0), q = n(() => typeof e.skeleton == "object" ? Object.assign({ activated: !0 }, e.skeleton) : { activated: !0 });
N(j, (r) => {
s.value = u.value, o.value = r, f.value = !1, v.value = !1;
}), N(
() => e.fallbackSrc,
(r) => {
v.value = !1, f.value && (s.value = u.value, o.value = r);
}
), o.value = j.value;
const h = Y({
src: n(() => e.previewSrc || o.value),
index: 0,
total: 0
});
if (l) {
l.increaseItem(h);
const r = $(() => {
m.value = !l.showAll && h.index > 0;
});
B(() => {
r(), l.decreaseItem(h);
});
}
if (!w) {
let r;
const g = $(() => {
if (r == null || r(), r = void 0, !ce) return;
const c = typeof e.root == "string" ? document.querySelector(e.root) : e.root;
e.lazy && (r = ie({
root: typeof c == "object" ? c : document.documentElement,
rootMargin: e.rootMargin,
target: b,
handler: () => {
r == null || r(), r = void 0, u.value = !0, s.value = !0;
}
}).disconnect);
});
B(() => {
g(), r == null || r();
});
}
U({
loading: s,
fallbackFail: v,
viewerActive: p,
hidden: m,
wrapper: b
});
function G(r) {
s.value = !1, (!e.fallbackSrc || o.value !== e.fallbackSrc) && I(e.onLoad, r);
}
function H(r) {
if (e.fallbackSrc) {
if (o.value === e.fallbackSrc) {
s.value = !1, v.value = !0;
return;
}
o.value = e.fallbackSrc;
} else
s.value = !1;
f.value = !0, I(e.onError, r);
}
function J() {
if (!l) {
e.preview && (p.value = !0), I(e.onPreview, e.previewSrc || o.value);
return;
}
l.handlePreview(h);
}
return (r, g) => Z((d(), S("div", {
ref_key: "wrapper",
ref: b,
class: y(O.value),
role: "none",
style: ee(R.value)
}, [
s.value ? P(r.$slots, "placeholder", { key: 0 }, () => [
E(t(L), {
renderer: t(e).slots.placeholder
}, {
default: z(() => [
t(e).skeleton ? (d(), V(t(fe), C({ key: 0 }, q.value, {
class: t(a).be("skeleton"),
image: ""
}), null, 16, ["class"])) : (d(), S("span", {
key: 1,
class: y(t(a).be("placeholder"))
}, x(t(e).placeholder || t(A).placeholder), 3))
]),
_: 1
}, 8, ["renderer"])
]) : k.value ? P(r.$slots, "error", { key: 1 }, () => [
E(t(L), {
renderer: t(e).slots.error
}, {
default: z(() => [
re("span", {
class: y(t(a).be("error"))
}, x(t(e).errorTip || t(e).alt || t(A).error), 3)
]),
_: 1
}, 8, ["renderer"])
]) : _("", !0),
u.value && !k.value ? (d(), S("img", C({ key: 2 }, t(e).imgAttrs, {
class: t(a).be("img"),
src: o.value,
alt: t(e).alt,
width: t(e).width || void 0,
height: t(e).height || void 0,
loading: W.value,
"aria-label": t(e).alt,
onLoad: G,
onError: H,
onClick: J
}), null, 16, me)) : _("", !0),
T.value ? (d(), V(t(pe), C({ key: 3 }, r.viewerProps, {
active: p.value,
"onUpdate:active": g[0] || (g[0] = (c) => p.value = c),
"src-list": t(e).previewSrc || o.value,
transfer: t(e).viewerTransfer
}), te({ _: 2 }, [
D.preview || t(e).slots.preview ? {
name: "default",
fn: z(({ src: c }) => [
P(r.$slots, "preview", { src: c }, () => [
E(t(L), {
renderer: t(e).slots.preview,
data: { src: c }
}, null, 8, ["renderer", "data"])
])
]),
key: "0"
} : void 0
]), 1040, ["active", "src-list", "transfer"])) : _("", !0)
], 6)), [
[ae, !m.value]
]);
}
});
export {
Le as default
};
//# sourceMappingURL=image.vue2.mjs.map