@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
187 lines (186 loc) • 6.19 kB
JavaScript
"use strict";
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 vue2 = require("@dialpad/dialtone-icons/vue2");
const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
const general_row = require("../general_row/general_row.vue.cjs");
const _sfc_main = {
name: "DtRecipeContactRow",
components: {
DtAvatar: avatar.default,
DtRecipeGeneralRow: general_row.default,
DtEmojiTextWrapper: emoji_text_wrapper.default,
DtIconUser: vue2.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: [
/**
* Native click event on the row itself
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"click",
/**
* 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];
},
contactDescription() {
return common_utils.safeConcatStrings([this.name, this.presenceText, this.userStatus]);
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("dt-recipe-general-row", _vm._g(_vm._b({ attrs: { "unread-count": _vm.unreadCount, "description": _vm.contactDescription, "has-unreads": _vm.hasUnreads, "selected": _vm.selected, "has-call-button": _vm.hasCallButton, "muted": _vm.muted, "is-typing": _vm.isTyping, "call-button-tooltip": _vm.callButtonTooltip, "unread-count-tooltip": _vm.unreadCountTooltip, "data-qa": "contact-row" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
return [_c("dt-avatar", { attrs: { "full-name": _vm.name, "image-src": _vm.avatarSrc, "color": _vm.avatarColor, "image-alt": "", "size": "sm", "seed": _vm.avatarSeed, "presence": _vm.avatarPresence }, scopedSlots: _vm._u([_vm.noInitials ? { key: "icon", fn: function() {
return [_c("dt-icon-user", { attrs: { "size": "200" } })];
}, proxy: true } : null], null, true) })];
}, proxy: true }, { key: "label", fn: function() {
return [_c("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__description", attrs: { "data-qa": "dt-recipe-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _c("div", { staticClass: "d-recipe-leftbar-row__status" }, [_vm.presenceText ? _c("span", { class: ["d-recipe-leftbar-row__meta-context", _vm.presenceFontColorClass], attrs: { "data-qa": "dt-recipe-leftbar-row-presence-text" } }, [_vm._v(" " + _vm._s(_vm.presenceText) + " ")]) : _vm._e(), _vm.userStatus ? _c("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" } }, [_vm._v(" " + _vm._s(_vm.userStatus) + " ")]) : _vm._e()], 1)];
}, proxy: true }]) }, "dt-recipe-general-row", _vm.$attrs, false), _vm.$listeners));
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const contact_row = __component__.exports;
exports.default = contact_row;
//# sourceMappingURL=contact_row.vue.cjs.map