@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
170 lines (169 loc) • 5.16 kB
JavaScript
import { safeConcatStrings as r } from "../../common/utils/index.js";
import { DtIconUser as s } from "@dialpad/dialtone-icons/vue2";
import { n } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import o from "../emoji-text-wrapper/emoji-text-wrapper.js";
import c from "../general-row/general-row.js";
import l from "../avatar/avatar.js";
const i = {
name: "DtRecipeContactRow",
components: {
DtAvatar: l,
DtRecipeGeneralRow: c,
DtEmojiTextWrapper: o,
DtIconUser: s
},
inheritAttrs: !1,
props: {
/**
* Optional avatar image url.
* If not provided it will use the initial of the name.
*/
avatarSrc: {
type: String,
default: ""
},
/**
* Determines whether to show the presence indicator for
* Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
* or 'active'. By default, it's null and nothing is shown.
* defer validation to avatar component.
* @values null, busy, away, offline, active
*/
avatarPresence: {
type: String,
default: null
},
/**
* Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
*/
avatarSeed: {
type: String,
default: null
},
/**
* Avatar color to display if `avatarSrc` is empty.
*/
avatarColor: {
type: String,
default: null
},
/**
* Text describing the user's presence, such as "in a meeting"
*/
presenceText: {
type: String,
default: ""
},
/**
* Name of the contact
*/
name: {
type: String,
required: !0
},
/**
* Status as set by the user.
*/
userStatus: {
type: String,
default: ""
},
/**
* Gives a faded style to be used when muted
*/
muted: {
type: Boolean,
default: !1
},
/**
* Number of unread messages
*/
unreadCount: {
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
},
/**
* Initials will never be shown. Instead it will show a "User" icon.
*/
noInitials: {
type: Boolean,
default: !1
},
/**
* Shows an "is typing" animation over the avatar when true.
*/
isTyping: {
type: Boolean,
default: !1
},
/**
* Whether the contact row should display a call button when hovered.
*/
hasCallButton: {
type: Boolean,
default: !0
}
},
emits: [
/**
* Native click event on the row itself
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"click",
/**
* Call button clicked
*
* @event call
* @type {PointerEvent | KeyboardEvent}
*/
"call"
],
computed: {
presenceFontColorClass() {
return {
active: "d-recipe-contact-row--active",
busy: "d-recipe-contact-row--busy",
away: "d-recipe-contact-row--away"
}[this.avatarPresence];
},
contactDescription() {
return r([this.name, this.presenceText, this.userStatus]);
}
}
};
var p = function() {
var e = this, t = e._self._c;
return t("dt-recipe-general-row", e._g(e._b({ attrs: { "unread-count": e.unreadCount, description: e.contactDescription, "has-unreads": e.hasUnreads, selected: e.selected, "has-call-button": e.hasCallButton, muted: e.muted, "is-typing": e.isTyping, "data-qa": "contact-row" }, scopedSlots: e._u([{ key: "left", fn: function() {
return [t("dt-avatar", { attrs: { "full-name": e.name, "image-src": e.avatarSrc, color: e.avatarColor, "image-alt": "", size: "sm", seed: e.avatarSeed, presence: e.avatarPresence }, scopedSlots: e._u([e.noInitials ? { key: "icon", fn: function() {
return [t("dt-icon-user", { attrs: { size: "200" } })];
}, proxy: !0 } : null], null, !0) })];
}, proxy: !0 }, { key: "label", fn: function() {
return [t("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__description", attrs: { "data-qa": "dt-recipe-leftbar-row-description", size: "200" } }, [e._v(" " + e._s(e.name) + " ")]), t("div", { staticClass: "d-recipe-leftbar-row__status" }, [e.presenceText ? t("span", { class: ["d-recipe-leftbar-row__meta-context", e.presenceFontColorClass], attrs: { "data-qa": "dt-recipe-leftbar-row-presence-text" } }, [e._v(" " + e._s(e.presenceText) + " ")]) : e._e(), e.userStatus ? t("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__meta-custom", attrs: { size: "100", "element-type": "span", "data-qa": "dt-recipe-leftbar-row-user-status" } }, [e._v(" " + e._s(e.userStatus) + " ")]) : e._e()], 1)];
}, proxy: !0 }]) }, "dt-recipe-general-row", e.$attrs, !1), e.$listeners));
}, u = [], d = /* @__PURE__ */ n(
i,
p,
u
);
const S = d.exports;
export {
S as default
};
//# sourceMappingURL=contact-row.js.map