@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
1 lines • 4.27 kB
Source Map (JSON)
{"version":3,"file":"group-row.cjs","sources":["../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :description=\"names\"\n :aria-label=\"ariaLabel\"\n :unread-count=\"unreadCount\"\n :has-unreads=\"hasUnreads\"\n :unread-mention-count=\"unreadMentionCount\"\n :selected=\"selected\"\n :is-typing=\"isTyping\"\n v-bind=\"$attrs\"\n v-on=\"$listeners\"\n >\n <template #left>\n <dt-icon-users\n size=\"300\"\n />\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtIconUsers } from '@dialpad/dialtone-icons/vue2';\nimport { safeConcatStrings } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n name: 'DtRecipeGroupRow',\n\n components: {\n DtIconUsers,\n DtRecipeGeneralRow,\n },\n\n inheritAttrs: false,\n\n props: {\n\n /**\n * Names of the group members\n */\n names: {\n type: String,\n required: true,\n },\n\n /**\n * Number of unread messages\n */\n unreadCount: {\n type: String,\n default: null,\n },\n\n /**\n * Number of unread mention messages\n */\n unreadMentionCount: {\n type: String,\n default: null,\n },\n\n /**\n * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n */\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Determines if the row is selected\n */\n selected: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Shows an \"is typing\" animation over the avatar when true.\n */\n isTyping: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native click event on the row itself\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n groupCount () {\n return this.names.split(',').length;\n },\n\n messageCount () {\n return isNaN(this.unreadCount)\n ? this.unreadCount\n : Number(this.unreadCount);\n },\n\n mentionCount () {\n return isNaN(this.unreadMentionCount)\n ? this.unreadMentionCount\n : Number(this.unreadMentionCount);\n },\n\n unreadCountTooltip () {\n return safeConcatStrings([\n this.unreadCount && this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: this.messageCount }),\n this.unreadMentionCount && this.i18n.$t('DIALTONE_UNREAD_MENTION_COUNT_TEXT', { unreadCount: this.mentionCount }),\n ]);\n },\n\n typingTooltip () {\n return this.isTyping && this.i18n.$t('DIALTONE_TYPING_TEXT');\n },\n\n ariaLabel () {\n return safeConcatStrings([\n this.typingTooltip,\n this.i18n.$t('DIALTONE_GROUP_ROW_GROUP_COUNT_TEXT', { count: this.groupCount }),\n this.names,\n this.unreadCountTooltip,\n ]);\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtIconUsers","DtRecipeGeneralRow","DialtoneLocalization","safeConcatStrings"],"mappings":"oVA0BAA,EAAA,CACA,KAAA,mBAEA,WAAA,CACA,YAAAC,EAAAA,YACA,mBAAAC,EAAAA,OACA,EAEA,aAAA,GAEA,MAAA,CAKA,MAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,mBAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,OACA,EAEA,MAAA,CACA,MAAA,CACA,KAAA,IAAAC,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAA,KAAA,MAAA,MAAA,GAAA,EAAA,MACA,EAEA,cAAA,CACA,OAAA,MAAA,KAAA,WAAA,EACA,KAAA,YACA,OAAA,KAAA,WAAA,CACA,EAEA,cAAA,CACA,OAAA,MAAA,KAAA,kBAAA,EACA,KAAA,mBACA,OAAA,KAAA,kBAAA,CACA,EAEA,oBAAA,CACA,OAAAC,oBAAA,CACA,KAAA,aAAA,KAAA,KAAA,GAAA,qCAAA,CAAA,YAAA,KAAA,aAAA,EACA,KAAA,oBAAA,KAAA,KAAA,GAAA,qCAAA,CAAA,YAAA,KAAA,aAAA,CACA,CAAA,CACA,EAEA,eAAA,CACA,OAAA,KAAA,UAAA,KAAA,KAAA,GAAA,sBAAA,CACA,EAEA,WAAA,CACA,OAAAA,oBAAA,CACA,KAAA,cACA,KAAA,KAAA,GAAA,sCAAA,CAAA,MAAA,KAAA,WAAA,EACA,KAAA,MACA,KAAA,kBACA,CAAA,CACA,CACA,CACA"}