@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
143 lines (142 loc) • 4.35 kB
JavaScript
import { defineComponent as j, useSlots as A, inject as I, ref as v, computed as d, watch as b, createElementBlock as k, openBlock as f, normalizeStyle as O, normalizeClass as u, renderSlot as x, createBlock as D, unref as t, createVNode as h, withCtx as _, createElementVNode as G } from "vue";
import "../icon/index.mjs";
import "../resize-observer/index.mjs";
import "../renderer/index.mjs";
import { useProps as M, createIconProp as U, useNameHelper as q, emitEvent as E } from "@vexip-ui/config";
import { useDisplay as J } from "@vexip-ui/hooks";
import { avatarProps as K } from "./props.mjs";
import { objectFitValues as L, GROUP_STATE as Q } from "./symbol.mjs";
import z from "../renderer/renderer.mjs";
import X from "../icon/icon.mjs";
import Y from "../resize-observer/resize-observer.mjs";
const Z = ["src", "alt", "srcset"], ee = ["src", "alt"], pe = /* @__PURE__ */ j({
name: "Avatar",
__name: "avatar",
props: K,
setup(C, { expose: H }) {
const e = M("avatar", C, {
size: "default",
src: {
default: "",
static: !0
},
icon: U(),
circle: !1,
alt: "",
fit: {
default: "cover",
validator: (r) => L.includes(r)
},
srcSet: "",
gap: 4,
iconScale: 1.4,
fallbackSrc: "",
color: null,
background: null,
slots: () => ({})
}), $ = A(), m = I(Q, null), a = q("avatar"), o = v(!1), s = v(!1), g = v(), y = J(() => n(!0)), c = d(() => (m == null ? void 0 : m.size) ?? e.size), w = d(() => ({
[a.b()]: !0,
[a.bs("vars")]: !0,
[a.bm("inherit")]: e.inherit,
[a.bm(c.value)]: typeof c.value != "number" && c.value !== "default",
[a.bm("circle")]: e.circle
})), N = d(() => {
const r = {
[a.cv("color")]: e.color,
[a.cv("bg-color")]: e.background,
[a.cv("image-fit")]: e.fit
};
return typeof c.value == "number" && (r[a.cv("size")] = `${c.value}px`), r;
});
b(
() => e.src,
() => {
o.value = !1, s.value = !1, n();
}
), b(
() => e.fallbackSrc,
() => {
s.value = !1, n();
}
), b(
() => e.gap,
() => n()
), H({ loadFail: o, fallbackFail: s });
function P(r) {
o.value = !0, E(e.onError, r);
}
let p = null;
function n(r = !1) {
const i = g.value, l = y.value;
if (i && l && (r || p === null || p !== l.textContent)) {
p = l.textContent;
const { offsetWidth: W, offsetHeight: B } = i, { offsetWidth: F, offsetHeight: R } = l, S = e.gap * 2, V = Math.min(
(W - S) / (F || 1),
(B - S) / (R || 1),
1
);
l.style.transform = `scale(${V})`;
}
}
function T(r) {
E(e.onClick, r);
}
return (r, i) => (f(), k("div", {
ref_key: "wrapper",
ref: g,
class: u(w.value),
style: O(N.value),
onClick: T
}, [
(t(e).src || t(e).srcSet) && !o.value ? (f(), k("img", {
key: 0,
class: u(t(a).be("image")),
src: t(e).src,
alt: t(e).alt,
srcset: t(e).srcSet,
onError: P
}, null, 42, Z)) : o.value && t(e).fallbackSrc && !s.value ? (f(), k("img", {
key: 1,
class: u(t(a).be("image")),
src: t(e).fallbackSrc,
alt: t(e).alt,
onError: i[0] || (i[0] = (l) => s.value = !0)
}, null, 42, ee)) : r.icon || $.icon ? x(r.$slots, "icon", { key: 2 }, () => [
h(t(z), {
renderer: t(e).slots.icon
}, {
default: _(() => [
h(t(X), {
class: u(t(a).be("icon")),
icon: r.icon,
scale: t(e).iconScale
}, null, 8, ["class", "icon", "scale"])
]),
_: 1
}, 8, ["renderer"])
]) : (f(), D(t(Y), {
key: 3,
"on-resize": n
}, {
default: _(() => [
G("span", {
ref_key: "text",
ref: y,
class: u(t(a).be("text"))
}, [
x(r.$slots, "default", {}, () => [
h(t(z), {
renderer: t(e).slots.default
}, null, 8, ["renderer"])
])
], 2)
]),
_: 3
}))
], 6));
}
});
export {
pe as default
};
//# sourceMappingURL=avatar.vue2.mjs.map