@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, openBlock as f, createElementBlock as k, normalizeClass as u, normalizeStyle as O, unref as t, renderSlot as x, createVNode as h, withCtx as _, createBlock as D, 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