@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
103 lines (102 loc) • 2.72 kB
JavaScript
import { DtIconUsers } from "@dialpad/dialtone-icons/vue2";
import { safeConcatStrings } from "../../../common/utils.js";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtRecipeGeneralRow from "../general_row/general_row.vue.js";
const _sfc_main = {
name: "DtRecipeGroupRow",
components: {
DtIconUsers,
DtRecipeGeneralRow
},
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 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__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const group_row = __component__.exports;
export {
group_row as default
};
//# sourceMappingURL=group_row.vue.js.map