@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
241 lines (240 loc) • 7.47 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const emoji_text_wrapper = require("../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs");
const avatar = require("../../../components/avatar/avatar.vue.cjs");
const common_utils = require("../../../common/utils.cjs");
const vue3 = require("@dialpad/dialtone-icons/vue3");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
const general_row = require("../general_row/general_row.vue.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeContactRow",
components: {
DtAvatar: avatar.default,
DtRecipeGeneralRow: general_row.default,
DtEmojiTextWrapper: emoji_text_wrapper.default,
DtIconUser: vue3.DtIconUser
},
inheritAttrs: false,
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: true
},
/**
* Status as set by the user.
*/
userStatus: {
type: String,
default: ""
},
/**
* Gives a faded style to be used when muted
*/
muted: {
type: Boolean,
default: false
},
/**
* 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: false
},
/**
* Determines if the row is selected
*/
selected: {
type: Boolean,
default: false
},
/**
* Initials will never be shown. Instead it will show a "User" icon.
*/
noInitials: {
type: Boolean,
default: false
},
/**
* Shows an "is typing" animation over the avatar when true.
*/
isTyping: {
type: Boolean,
default: false
},
/**
* Whether the contact row should display a call button when hovered.
*/
hasCallButton: {
type: Boolean,
default: true
},
/**
* Text shown when the call button is hovered.
*/
callButtonTooltip: {
type: String,
default: ""
},
/**
* Text shown when the unread count is hovered.
*/
unreadCountTooltip: {
type: String,
default: ""
}
},
emits: [
/**
* Call button clicked
*
* @event call
* @type {PointerEvent | KeyboardEvent}
*/
"call"
],
computed: {
presenceFontColorClass() {
const presenceFontColors = {
active: "d-recipe-contact-row--active",
busy: "d-recipe-contact-row--busy",
away: "d-recipe-contact-row--away"
};
return presenceFontColors[this.avatarPresence];
},
contactRowListeners() {
return common_utils.extractVueListeners(this.$attrs);
},
contactDescription() {
return common_utils.safeConcatStrings([this.name, this.presenceText, this.userStatus]);
}
}
};
const _hoisted_1 = { class: "d-recipe-leftbar-row__status" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_icon_user = vue.resolveComponent("dt-icon-user");
const _component_dt_avatar = vue.resolveComponent("dt-avatar");
const _component_dt_emoji_text_wrapper = vue.resolveComponent("dt-emoji-text-wrapper");
const _component_dt_recipe_general_row = vue.resolveComponent("dt-recipe-general-row");
return vue.openBlock(), vue.createBlock(_component_dt_recipe_general_row, vue.mergeProps({
"unread-count": $props.unreadCount,
description: $options.contactDescription,
"has-unreads": $props.hasUnreads,
selected: $props.selected,
"has-call-button": $props.hasCallButton,
muted: $props.muted,
"is-typing": $props.isTyping,
"call-button-tooltip": $props.callButtonTooltip,
"unread-count-tooltip": $props.unreadCountTooltip
}, _ctx.$attrs, { "data-qa": "contact-row" }, vue.toHandlers($options.contactRowListeners), {
onCall: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("call", $event))
}), {
left: vue.withCtx(() => [
vue.createVNode(_component_dt_avatar, {
"full-name": $props.name,
"image-src": $props.avatarSrc,
color: $props.avatarColor,
"image-alt": "",
size: "sm",
seed: $props.avatarSeed,
presence: $props.avatarPresence
}, vue.createSlots({ _: 2 }, [
$props.noInitials ? {
name: "icon",
fn: vue.withCtx(() => [
vue.createVNode(_component_dt_icon_user, { size: "200" })
]),
key: "0"
} : void 0
]), 1032, ["full-name", "image-src", "color", "seed", "presence"])
]),
label: vue.withCtx(() => [
vue.createVNode(_component_dt_emoji_text_wrapper, {
class: "d-recipe-leftbar-row__description",
"data-qa": "dt-recipe-leftbar-row-description",
size: "200"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString($props.name), 1)
]),
_: 1
}),
vue.createElementVNode("div", _hoisted_1, [
$props.presenceText ? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
"data-qa": "dt-recipe-leftbar-row-presence-text",
class: vue.normalizeClass(["d-recipe-leftbar-row__meta-context", $options.presenceFontColorClass])
}, vue.toDisplayString($props.presenceText), 3)) : vue.createCommentVNode("", true),
$props.userStatus ? (vue.openBlock(), vue.createBlock(_component_dt_emoji_text_wrapper, {
key: 1,
size: "100",
"element-type": "span",
"data-qa": "dt-recipe-leftbar-row-user-status",
class: "d-recipe-leftbar-row__meta-custom"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString($props.userStatus), 1)
]),
_: 1
})) : vue.createCommentVNode("", true)
])
]),
_: 1
}, 16, ["unread-count", "description", "has-unreads", "selected", "has-call-button", "muted", "is-typing", "call-button-tooltip", "unread-count-tooltip"]);
}
const contact_row = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = contact_row;
//# sourceMappingURL=contact_row.vue.cjs.map