@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
103 lines (102 loc) • 2.91 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue2 = require("@dialpad/dialtone-icons/vue2");
const common_utils = require("../../../common/utils.cjs");
const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
const general_row = require("../general_row/general_row.vue.cjs");
const _sfc_main = {
name: "DtRecipeGroupRow",
components: {
DtIconUsers: vue2.DtIconUsers,
DtRecipeGeneralRow: general_row.default
},
inheritAttrs: false,
props: {
/**
* Screen reader will read out the number of users in the group using this text. Ex: "2 users"
*/
groupCountText: {
type: String,
default: ""
},
/**
* Names of the group members
*/
names: {
type: String,
required: true
},
/**
* Number of unread messages
*/
unreadCount: {
type: String,
default: null
},
/**
* Number of unread mention messages
*/
unreadMentionCount: {
type: String,
default: null
},
/**
* Text shown when the unread count is hovered.
*/
unreadCountTooltip: {
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
},
/**
* Shows an "is typing" animation over the avatar when true.
*/
isTyping: {
type: Boolean,
default: false
}
},
emits: [
/**
* Native click event on the row itself
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"click"
],
computed: {
ariaLabel() {
return common_utils.safeConcatStrings([this.groupCountText, this.names]);
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("dt-recipe-general-row", _vm._g(_vm._b({ attrs: { "description": _vm.names, "aria-label": _vm.ariaLabel, "unread-count": _vm.unreadCount, "has-unreads": _vm.hasUnreads, "unread-count-tooltip": _vm.unreadCountTooltip, "unread-mention-count": _vm.unreadMentionCount, "selected": _vm.selected, "is-typing": _vm.isTyping }, scopedSlots: _vm._u([{ key: "left", fn: function() {
return [_c("dt-icon-users", { attrs: { "size": "300" } })];
}, 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 group_row = __component__.exports;
exports.default = group_row;
//# sourceMappingURL=group_row.vue.cjs.map