@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
309 lines (308 loc) • 12.4 kB
JavaScript
import { LEFTBAR_GENERAL_ROW_TYPES as n, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as c, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR as h, LEFTBAR_GENERAL_ROW_ICON_SIZES as _ } from "./general-row-constants.js";
import { DtIconWaveform as f, DtIconPhone as C } from "@dialpad/dialtone-icons/vue2";
import b from "./leftbar-general-row-icon.js";
import { safeConcatStrings as p } from "../../common/utils/index.js";
import { DialtoneLocalization as T } from "../../localization/index.js";
import { n as m } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import y from "../tooltip/tooltip.js";
import w from "../button/button.js";
import v from "../badge/badge.js";
import g from "../emoji-text-wrapper/emoji-text-wrapper.js";
const E = {
name: "DtRecipeGeneralRow",
components: {
DtEmojiTextWrapper: g,
DtBadge: v,
DtButton: w,
DtTooltip: y,
DtIconPhone: C,
DtIconWaveform: f,
DtRecipeLeftbarGeneralRowIcon: b
},
inheritAttrs: !1,
props: {
/**
* Determines the icon to show.
* If type is contact center, the color prop must be provided and will determine the color of the icon
*/
type: {
type: String,
default: "inbox",
validator: (a) => Object.values(n).includes(a)
},
/**
* Will be read out by a screen reader upon focus of this row. If not defined "description" will be read.
*/
ariaLabel: {
type: String,
default: ""
},
/**
* Text displayed next to the icon. Required. Even if you are overriding this field using the label slot
* you still must input this as it will be displayed as the "title" attribute for the row.
*/
description: {
type: String,
required: !0
},
/**
* Determines the color of the contact center icon
*/
color: {
type: String,
default: null,
validator: (a) => Object.keys(c).includes(a)
},
/**
* The channel setting, either 'mention' or 'always'.
* @values 'mention', 'always', null.
*/
channelSetting: {
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: !1
},
/**
* Number of unread messages
*/
unreadCount: {
type: String,
default: null
},
/**
* Number of unread mention messages
*/
unreadMentionCount: {
type: String,
default: null
},
/**
* Determines if the row is selected
*/
selected: {
type: Boolean,
default: !1
},
/**
* Gives a faded style to be used when muted
*/
muted: {
type: Boolean,
default: !1
},
/**
* Shows styling to represent an active voice chat. This will display over unreadCount.
*/
activeVoiceChat: {
type: Boolean,
default: !1
},
/**
* Acronym used to represent "Do not Disturb" state. If entered will display the entered text alongside
* unreadCount.
*/
dndText: {
type: String,
default: ""
},
/**
* Whether the row should have a call button. Usually only applicable to individual contact rows.
*/
hasCallButton: {
type: Boolean,
default: !1
},
/**
* Shows an "is typing" animation over the avatar when true.
*/
isTyping: {
type: Boolean,
default: !1
},
/**
* Sets the size of the icon.
*/
iconSize: {
type: String,
default: "300",
validator: (a) => _.includes(a)
}
},
emits: [
/**
* Native click event on the row itself
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"click",
/**
* Call button clicked
*
* @event call
* @type {PointerEvent | KeyboardEvent}
*/
"call"
],
data() {
return {
actionFocused: !1,
labelWidth: "100%",
i18n: new T()
};
},
computed: {
leftbarGeneralRowClasses() {
return [
"d-recipe-leftbar-row",
{
"d-recipe-leftbar-row--no-action": !this.hasCallButton,
"d-recipe-leftbar-row--has-unread": this.hasUnreads,
"d-recipe-leftbar-row__unread-count": this.showUnreadCount || this.showUnreadMentionCount,
"d-recipe-leftbar-row--selected": this.selected,
"d-recipe-leftbar-row--muted": this.muted,
"d-recipe-leftbar-row--action-focused": this.actionFocused
}
];
},
getIcon() {
switch (this.type) {
case n.CHANNELS:
if (this.hasUnreads) return "channel unread";
break;
case n.LOCKED_CHANNEL:
if (this.hasUnreads) return "locked channel unread";
break;
}
return this.type;
},
getAriaLabel() {
return this.ariaLabel ? this.ariaLabel : p([
this.typingTooltip,
this.description,
this.unreadCountTooltip,
this.dndTextTooltip,
this.activeVoiceChatTooltip
]);
},
hasActions() {
return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton || this.showUnreadMentionCount;
},
showUnreadCount() {
return !!this.unreadCount && this.hasUnreads;
},
showUnreadMentionCount() {
return !!this.unreadMentionCount && this.hasUnreads;
},
hasUnreadCount() {
return this.unreadCount !== null;
},
hasUnreadMentionCount() {
return this.unreadMentionCount !== null;
},
shouldApplyCustomStyleForCountBadge() {
return this.hasUnreadCount && this.hasUnreadMentionCount;
},
/**
* When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,
* if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background||foreground]-strong).
* @returns {boolean}
*/
shouldApplyCustomStyleForMentionOnly() {
return this.channelSetting === "always" && !this.hasUnreadCount && this.hasUnreadMentionCount;
},
messageCount() {
return isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
},
mentionCount() {
return isNaN(this.unreadMentionCount) ? this.unreadMentionCount : Number(this.unreadMentionCount);
},
unreadCountTooltip() {
return p([
this.unreadCount && this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: this.messageCount }),
this.unreadMentionCount && this.i18n.$t("DIALTONE_UNREAD_MENTION_COUNT_TEXT", { unreadCount: this.mentionCount })
]);
},
dndTextTooltip() {
return this.dndText && this.i18n.$t("DIALTONE_GENERAL_ROW_DND_TEXT_TOOLTIP");
},
activeVoiceChatTooltip() {
return this.activeVoiceChat && this.i18n.$t("DIALTONE_GENERAL_ROW_ACTIVE_VOICE_CHAT_TEXT");
},
callButtonTooltip() {
return this.i18n.$t("DIALTONE_GENERAL_ROW_CALL_BUTTON_TOOLTIP");
},
typingTooltip() {
return this.isTyping && this.i18n.$t("DIALTONE_TYPING_TEXT");
}
},
watch: {
$props: {
immediate: !0,
deep: !0,
async handler() {
this.validateProps(), await this.$nextTick(), this.adjustLabelWidth();
}
}
},
mounted() {
this.resizeObserver = new ResizeObserver(this.adjustLabelWidth), this.resizeObserver.observe(this.$el), this.adjustLabelWidth();
},
beforeDestroy: function() {
this.resizeObserver.disconnect();
},
methods: {
validateProps() {
this.type === n.CONTACT_CENTER && !Object.keys(c).includes(this.color) && console.error(h);
},
adjustLabelWidth() {
var o, i, s, l, d, u;
const a = ((i = (o = this.$el) == null ? void 0 : o.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : i.clientWidth) || 0, t = ((l = (s = this.$el) == null ? void 0 : s.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : l.clientWidth) || 0, e = ((u = (d = this.$el) == null ? void 0 : d.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : u.clientWidth) || 0, r = 16;
this.labelWidth = a - (t + e + r) + "px";
}
}
};
var N = function() {
var t = this, e = t._self._c;
return e("div", { class: t.leftbarGeneralRowClasses, attrs: { "data-qa": "dt-recipe-leftbar-row" } }, [e("a", t._g(t._b({ staticClass: "d-recipe-leftbar-row__primary", attrs: { "data-qa": "data-qa" in t.$attrs ? t.$attrs["data-qa"] : "d-recipe-leftbar-row-link", "aria-label": t.getAriaLabel, title: t.description, href: "href" in t.$attrs ? t.$attrs.href : "javascript:void(0)" } }, "a", t.$attrs, !1), t.$listeners), [e("div", { staticClass: "d-recipe-leftbar-row__alpha" }, [t.isTyping ? e("div", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.typingTooltip, expression: "typingTooltip" }], staticClass: "d-recipe-leftbar-row__is-typing" }, [e("span"), e("span"), e("span")]) : t._t("left", function() {
return [e("dt-recipe-leftbar-general-row-icon", { attrs: { type: t.getIcon, color: t.color, "icon-size": t.iconSize, "data-qa": "dt-recipe-leftbar-row-icon" } })];
})], 2), e("div", { staticClass: "d-recipe-leftbar-row__label", style: `flex-basis: ${t.labelWidth}` }, [t._t("label", function() {
return [e("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__description", attrs: { "data-qa": "dt-recipe-leftbar-row-description", size: "200" } }, [t._v(" " + t._s(t.description) + " ")])];
})], 2)]), t.hasActions ? e("div", { staticClass: "d-recipe-leftbar-row__omega" }, [t.dndText ? e("dt-tooltip", { attrs: { placement: "top", message: t.dndTextTooltip }, scopedSlots: t._u([{ key: "anchor", fn: function() {
return [e("div", { ref: "d-recipe-leftbar-row-dnd", staticClass: "d-recipe-leftbar-row__dnd", attrs: { "data-qa": "dt-recipe-leftbar-row-dnd" } }, [t._v(" " + t._s(t.dndText) + " ")])];
}, proxy: !0 }], null, !1, 3247296267) }) : t._e(), t.activeVoiceChat ? e("div", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.activeVoiceChatTooltip, expression: "activeVoiceChatTooltip" }], staticClass: "d-recipe-leftbar-row__active-voice" }, [e("dt-icon-waveform", { attrs: { size: "300" } })], 1) : t.showUnreadCount || t.showUnreadMentionCount ? e("dt-tooltip", { attrs: { message: t.unreadCountTooltip, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
return [t.showUnreadCount ? e("dt-badge", { class: ["d-recipe-leftbar-row__unread-badge", {
"d-recipe-leftbar-row__unread-count-badge": t.shouldApplyCustomStyleForCountBadge
}], attrs: { kind: "count", type: "bulletin", "data-qa": "dt-recipe-leftbar-row-unread-badge" } }, [t._v(" " + t._s(t.unreadCount) + " ")]) : t._e(), t.showUnreadMentionCount ? e("dt-badge", { class: [
"d-recipe-leftbar-row__unread-badge",
{ "d-recipe-leftbar-row__unread-mention-count-badge": t.shouldApplyCustomStyleForCountBadge },
{ "d-recipe-leftbar-row__unread-mention-only-count-badge": t.shouldApplyCustomStyleForMentionOnly }
], attrs: { kind: "count", type: "bulletin", "data-qa": "dt-recipe-leftbar-row-unread-mention-badge" } }, [t._v(" " + t._s(t.unreadMentionCount) + " ")]) : t._e()];
}, proxy: !0 }], null, !1, 715135836) }) : t._e(), t.hasCallButton ? e("div", { staticClass: "d-recipe-leftbar-row__action", attrs: { "data-qa": "dt-recipe-leftbar-row-action" } }, [e("dt-tooltip", { attrs: { message: t.callButtonTooltip, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
return [e("dt-button", { staticClass: "d-recipe-leftbar-row__action-button", attrs: { "data-qa": "dt-recipe-leftbar-row-action-call-button", circle: "", size: "xs", kind: "inverted", "aria-label": t.callButtonTooltip }, on: { focus: function(r) {
t.actionFocused = !0;
}, blur: function(r) {
t.actionFocused = !1;
}, click: function(r) {
return r.stopPropagation(), t.$emit("call", r);
} }, scopedSlots: t._u([{ key: "icon", fn: function() {
return [e("dt-icon-phone", { attrs: { size: "200" } })];
}, proxy: !0 }], null, !1, 2193255039) })];
}, proxy: !0 }], null, !1, 3837984112) })], 1) : t._e()], 1) : t._e()]);
}, A = [], O = /* @__PURE__ */ m(
E,
N,
A
);
const M = O.exports;
export {
M as default
};
//# sourceMappingURL=general-row.js.map