@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
290 lines (289 loc) • 7.24 kB
JavaScript
import { getRandomElement as e, getUniqueString as t, hasSlotContent as n } from "../../common/utils/index.js";
import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import i from "../presence/presence.js";
import { AVATAR_GROUP_VALIDATOR as a, AVATAR_ICON_SIZES as o, AVATAR_KIND_MODIFIERS as s, AVATAR_PRESENCE_SIZE_MODIFIERS as c, AVATAR_PRESENCE_STATES as l, AVATAR_RANDOM_COLORS as u, AVATAR_SIZE_MODIFIERS as d } from "./avatar-constants.js";
import { ICON_SIZE_MODIFIERS as f } from "../icon/icon-constants.js";
import { extractInitialsFromName as p } from "./utils.js";
import { createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, mergeProps as v, normalizeClass as y, normalizeStyle as b, openBlock as x, renderSlot as S, resolveComponent as C, resolveDynamicComponent as w, toDisplayString as T, withCtx as E } from "vue";
//#region components/avatar/avatar.vue
var D = {
compatConfig: { MODE: 3 },
name: "DtAvatar",
components: { DtPresence: i },
inheritAttrs: !1,
props: {
id: {
type: String,
default() {
return t();
}
},
seed: {
type: String,
default: void 0
},
color: {
type: String,
default: void 0
},
size: {
type: String,
default: "md",
validator: (e) => Object.keys(d).includes(e)
},
avatarClass: {
type: [
String,
Array,
Object
],
default: ""
},
canvasClass: {
type: [
String,
Array,
Object
],
default: ""
},
iconClass: {
type: [
String,
Array,
Object
],
default: ""
},
presence: {
type: String,
default: l.NONE,
validator: (e) => Object.values(l).includes(e)
},
presenceProps: {
type: Object,
default: () => ({})
},
group: {
type: Number,
default: void 0,
validator: (e) => a(e)
},
overlayText: {
type: String,
default: ""
},
overlayClass: {
type: [
String,
Array,
Object
],
default: ""
},
imageSrc: {
type: String,
default: ""
},
imageAlt: {
type: String,
default: void 0
},
iconSize: {
type: String,
default: "",
validator: (e) => !e || Object.keys(f).includes(e)
},
fullName: {
type: String,
default: ""
},
clickable: {
type: Boolean,
default: !1
},
iconAriaLabel: {
type: String,
default: void 0
}
},
emits: ["click"],
data() {
return {
AVATAR_SIZE_MODIFIERS: d,
AVATAR_KIND_MODIFIERS: s,
AVATAR_PRESENCE_SIZE_MODIFIERS: c,
AVATAR_ICON_SIZES: o,
imageLoadedSuccessfully: null,
formattedInitials: "",
initializing: !1,
hasSlotContent: n
};
},
computed: {
hasOverlayIcon() {
return n(this.$slots.overlayIcon);
},
iconDataQa() {
return "dt-avatar-icon";
},
avatarClasses() {
return [
"d-avatar",
this.$attrs.class,
d[this.validatedSize],
this.avatarClass,
{
"d-avatar--group": this.showGroup,
"d-avatar--group-digits-2": this.showGroup && this.group > 9 && this.group < 100,
"d-avatar--group-digits-3": this.showGroup && this.group > 99,
[`d-avatar--color-${this.getColor()}`]: !this.isIconType(),
"d-avatar--clickable": this.clickable,
"d-avatar--presence": this.presence && !this.showGroup
}
];
},
overlayClasses() {
return [
"d-avatar__overlay",
this.overlayClass,
{ "d-avatar__overlay-icon": this.hasOverlayIcon }
];
},
showGroup() {
return a(this.group);
},
formattedGroup() {
return this.group > 99 ? "99+" : this.group;
},
validatedSize() {
return this.group ? "xs" : this.size;
},
showImage() {
return this.imageLoadedSuccessfully !== !1 && this.imageSrc;
}
},
watch: {
fullName: {
immediate: !0,
handler() {
this.formatInitials();
}
},
size: {
immediate: !0,
handler() {
this.formatInitials();
}
},
group: {
immediate: !0,
handler() {
this.formatInitials();
}
},
imageSrc(e) {
this.imageLoadedSuccessfully = null, e && (this.validateProps(), this.setImageListeners());
}
},
mounted() {
this.validateProps(), this.setImageListeners();
},
methods: {
isIconType() {
return n(this.$slots.icon);
},
async setImageListeners() {
await this.$nextTick();
let e = this.$refs.avatarImage;
e && (e.addEventListener("load", () => this._loadedImageEventHandler(e), { once: !0 }), e.addEventListener("error", () => this._erroredImageEventHandler(e), { once: !0 }));
},
formatInitials() {
let e = p(this.fullName);
this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = e[0] : this.formattedInitials = e;
},
getColor() {
return this.color ?? e(u, this.seed);
},
_loadedImageEventHandler(e) {
this.imageLoadedSuccessfully = !0, e.classList.remove("d-d-none");
},
_erroredImageEventHandler(e) {
this.imageLoadedSuccessfully = !1, e.classList.add("d-d-none");
},
validateProps() {
this.imageSrc && this.imageAlt === void 0 && console.error("image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby");
},
handleClick(e) {
this.clickable && this.$emit("click", e);
}
}
}, O = ["src", "alt"], k = [
"aria-label",
"data-qa",
"role"
], A = {
key: 1,
class: "d-avatar__overlay-text"
}, j = {
key: 1,
class: "d-avatar__count",
"data-qa": "dt-avatar-count"
};
function M(e, t, n, r, i, a) {
let o = C("dt-presence");
return x(), m(w(n.clickable ? "button" : "div"), {
id: n.id,
class: y(a.avatarClasses),
style: b(e.$attrs.style),
"data-qa": "dt-avatar",
onClick: a.handleClick
}, {
default: E(() => [
_("div", {
ref: "canvas",
class: y([
n.canvasClass,
"d-avatar__canvas",
{ "d-avatar--image-loaded": i.imageLoadedSuccessfully }
])
}, [a.showImage ? (x(), g("img", {
key: 0,
ref: "avatarImage",
class: "d-avatar__image",
"data-qa": "dt-avatar-image",
src: n.imageSrc,
alt: n.imageAlt
}, null, 8, O)) : a.isIconType() ? (x(), g("div", {
key: 1,
class: y([n.iconClass, i.AVATAR_KIND_MODIFIERS.icon]),
"aria-label": n.clickable ? n.iconAriaLabel : "",
"data-qa": a.iconDataQa,
role: n.clickable ? "button" : ""
}, [S(e.$slots, "icon", { iconSize: n.iconSize || i.AVATAR_ICON_SIZES[n.size] })], 10, k)) : (x(), g("span", {
key: 2,
class: y([i.AVATAR_KIND_MODIFIERS.initials])
}, T(i.formattedInitials), 3))], 2),
a.hasOverlayIcon || n.overlayText ? (x(), g("div", {
key: 0,
class: y(a.overlayClasses)
}, [a.hasOverlayIcon ? S(e.$slots, "overlayIcon", { key: 0 }) : n.overlayText ? (x(), g("p", A, T(n.overlayText), 1)) : h("", !0)], 2)) : h("", !0),
a.showGroup ? (x(), g("span", j, T(a.formattedGroup), 1)) : h("", !0),
n.presence && !a.showGroup ? (x(), m(o, v({
key: 2,
presence: n.presence,
class: ["d-avatar__presence", i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]]
}, n.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : h("", !0)
]),
_: 3
}, 8, [
"id",
"class",
"style",
"onClick"
]);
}
var N = /* @__PURE__ */ r(D, [["render", M]]);
//#endregion
export { N as default };
//# sourceMappingURL=avatar.js.map