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