@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
107 lines (106 loc) • 3.05 kB
JavaScript
import { DtIconUsers } from "@dialpad/dialtone-icons/vue3";
import { safeConcatStrings, extractVueListeners } from "../../../common/utils.js";
import { resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withCtx, createVNode } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
import DtRecipeGeneralRow from "../general_row/general_row.vue.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
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: [],
computed: {
ariaLabel() {
return safeConcatStrings([this.groupCountText, this.names]);
},
contactRowListeners() {
return extractVueListeners(this.$attrs);
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_icon_users = resolveComponent("dt-icon-users");
const _component_dt_recipe_general_row = resolveComponent("dt-recipe-general-row");
return openBlock(), createBlock(_component_dt_recipe_general_row, mergeProps({
description: $props.names,
"aria-label": $options.ariaLabel,
"unread-count": $props.unreadCount,
"has-unreads": $props.hasUnreads,
"unread-mention-count": $props.unreadMentionCount,
"unread-count-tooltip": $props.unreadCountTooltip,
selected: $props.selected,
"is-typing": $props.isTyping
}, _ctx.$attrs, toHandlers($options.contactRowListeners)), {
left: withCtx(() => [
createVNode(_component_dt_icon_users, { size: "300" })
]),
_: 1
}, 16, ["description", "aria-label", "unread-count", "has-unreads", "unread-mention-count", "unread-count-tooltip", "selected", "is-typing"]);
}
const group_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
group_row as default
};
//# sourceMappingURL=group_row.vue.js.map