@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
120 lines (119 loc) • 3.33 kB
JavaScript
import { DtIconUsers as u } from "@dialpad/dialtone-icons/vue3";
import { extractVueListeners as s, safeConcatStrings as n } from "../../common/utils/index.js";
import { DialtoneLocalization as d } from "../../localization/index.js";
import { resolveComponent as o, createBlock as c, openBlock as l, mergeProps as p, toHandlers as _, withCtx as m, createVNode as C } from "vue";
import { _ as h } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import T from "../general-row/general-row.js";
const f = {
compatConfig: { MODE: 3 },
name: "DtRecipeGroupRow",
components: {
DtIconUsers: u,
DtRecipeGeneralRow: T
},
inheritAttrs: !1,
props: {
/**
* Names of the group members
*/
names: {
type: String,
required: !0
},
/**
* Number of unread messages
*/
unreadCount: {
type: String,
default: null
},
/**
* Number of unread mention messages
*/
unreadMentionCount: {
type: String,
default: null
},
/**
* Styles the row with an increased font weight to convey it has unreads. This must be true to see
* the unread count badge.
*/
hasUnreads: {
type: Boolean,
default: !1
},
/**
* Determines if the row is selected
*/
selected: {
type: Boolean,
default: !1
},
/**
* Shows an "is typing" animation over the avatar when true.
*/
isTyping: {
type: Boolean,
default: !1
}
},
data() {
return {
i18n: new d()
};
},
computed: {
groupCount() {
return this.names.split(",").length;
},
messageCount() {
return isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
},
mentionCount() {
return isNaN(this.unreadMentionCount) ? this.unreadMentionCount : Number(this.unreadMentionCount);
},
unreadCountTooltip() {
return n([
this.unreadCount && this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: this.messageCount }),
this.unreadMentionCount && this.i18n.$t("DIALTONE_UNREAD_MENTION_COUNT_TEXT", { unreadCount: this.mentionCount })
]);
},
typingTooltip() {
return this.isTyping && this.i18n.$t("DIALTONE_TYPING_TEXT");
},
ariaLabel() {
return n([
this.typingTooltip,
this.i18n.$t("DIALTONE_GROUP_ROW_GROUP_COUNT_TEXT", { count: this.groupCount }),
this.names,
this.unreadCountTooltip
]);
},
contactRowListeners() {
return s(this.$attrs);
}
}
};
function g(r, N, t, E, y, e) {
const i = o("dt-icon-users"), a = o("dt-recipe-general-row");
return l(), c(a, p({
description: t.names,
"aria-label": e.ariaLabel,
"unread-count": t.unreadCount,
"has-unreads": t.hasUnreads,
"unread-mention-count": t.unreadMentionCount,
"unread-count-tooltip": e.unreadCountTooltip,
selected: t.selected,
"is-typing": t.isTyping
}, r.$attrs, _(e.contactRowListeners)), {
left: m(() => [
C(i, { size: "300" })
]),
_: 1
}, 16, ["description", "aria-label", "unread-count", "has-unreads", "unread-mention-count", "unread-count-tooltip", "selected", "is-typing"]);
}
const M = /* @__PURE__ */ h(f, [["render", g]]);
export {
M as default
};
//# sourceMappingURL=group-row.js.map