vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
100 lines (99 loc) • 3.52 kB
JavaScript
import { defineComponent as g, ref as $, computed as s, createBlock as n, openBlock as r, resolveDynamicComponent as u, normalizeStyle as d, normalizeClass as y, withCtx as w, createElementBlock as f, createCommentVNode as a, renderSlot as c } from "vue";
import { useSlotsExist as k, useEventListener as x } from "../utils/index.js";
const b = ["src", "alt"], E = /* @__PURE__ */ g({
__name: "Avatar",
props: {
color: { default: "rgba(0, 0, 0, 0.25)" },
shape: { default: "circle" },
size: { default: "middle" },
src: { default: void 0 },
alt: { default: void 0 },
icon: { type: [Object, Function], default: void 0 },
href: { default: void 0 },
target: { default: "_self" }
},
setup(p) {
const e = p, i = $(window.innerWidth), l = k(["default", "icon"]), o = s(() => e.src ? !1 : !!(l.icon || e.icon)), z = s(() => {
if (typeof e.size == "number")
return o.value ? {
backgroundColor: e.color,
width: `${e.size}px`,
height: `${e.size}px`,
lineHeight: `${e.size}px`,
fontSize: `${e.size / 2}px`
} : {
backgroundColor: e.color,
width: `${e.size}px`,
height: `${e.size}px`,
lineHeight: `${e.size}px`,
fontSize: "18px"
};
if (typeof e.size == "object") {
let t = 32;
return i.value >= 1600 && e.size.xxl !== void 0 ? t = e.size.xxl : i.value >= 1200 && e.size.xl !== void 0 ? t = e.size.xl : i.value >= 992 && e.size.lg !== void 0 ? t = e.size.lg : i.value >= 768 && e.size.md !== void 0 ? t = e.size.md : i.value >= 576 && e.size.sm !== void 0 ? t = e.size.sm : i.value < 576 && e.size.xs !== void 0 && (t = e.size.xs), {
backgroundColor: e.color,
width: `${t}px`,
height: `${t}px`,
lineHeight: `${t}px`,
fontSize: `${t / 2}px`
};
}
return {
backgroundColor: e.color
};
}), v = s(() => !e.src && !o.value ? l.default : !1), m = s(() => {
if (typeof e.size == "string")
return {
transform: "scale(1) translateX(-50%)"
};
if (typeof e.size == "number") {
const t = Math.min(1, Math.max(0.022222222222222223, (1 + (e.size - 9) * 1) / 45));
return {
lineHeight: `${e.size}px`,
transform: `scale(${t}) translateX(-50%)`
};
}
return {};
});
x(window, "resize", h);
function h() {
i.value = window.innerWidth;
}
return (t, C) => (r(), n(u(t.href ? "a" : "div"), {
class: y(["avatar-wrap", [
`avatar-${t.shape}`,
{
[`avatar-${t.size}`]: typeof t.size == "string" && ["small", "middle", "large"].includes(t.size),
"avatar-image": t.src,
"avatar-link": t.href
}
]]),
style: d(z.value),
href: t.href,
target: t.target
}, {
default: w(() => [
t.src ? (r(), f("img", {
key: 0,
class: "image-item",
src: t.src,
alt: t.alt
}, null, 8, b)) : a("", !0),
!t.src && o.value ? c(t.$slots, "icon", { key: 1 }, () => [
(r(), n(u(t.icon)))
], !0) : a("", !0),
v.value ? (r(), f("span", {
key: 2,
class: "string-item",
style: d(m.value)
}, [
c(t.$slots, "default", {}, void 0, !0)
], 4)) : a("", !0)
]),
_: 3
}, 8, ["class", "style", "href", "target"]));
}
});
export {
E as default
};