@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
212 lines (211 loc) • 6.83 kB
JavaScript
import { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from "./callbox_constants.js";
import DtAvatar from "../../../components/avatar/avatar.vue.js";
import DtBadge from "../../../components/badge/badge.vue.js";
import { DtIconPause } from "@dialpad/dialtone-icons/vue3";
import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createCommentVNode, createElementVNode, createBlock, createSlots, withCtx, createVNode, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeCallbox",
components: { DtBadge, DtAvatar, DtIconPause },
inheritAttrs: false,
props: {
/**
* Text for the badge element
*/
badgeText: {
type: String,
default: ""
},
/**
* Color for the badge element
* @values null, warning
*/
badgeColor: {
type: String,
default: null,
validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color)
},
/**
* Optional avatar image url.
* If not provided it will use the initial of the name.
*/
avatarSrc: {
type: String,
default: ""
},
/**
* Avatar's full name, used to extract initials
* to display if `avatarSrc` is empty.
*/
avatarFullName: {
type: String,
default: ""
},
/**
* Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
*/
avatarSeed: {
type: String,
default: ""
},
/**
* Callbox title
*/
title: {
type: String,
default: ""
},
/**
* Callbox border color
* @values default, ai, critical
*/
borderColor: {
type: String,
default: "default",
validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color)
},
/**
* Makes the callbox avatar and title clickable,
* emits a click event when clicked.
*/
clickable: {
type: Boolean,
default: false
},
/**
* Controls the avatars overlay icon
*/
isOnHold: {
type: Boolean,
default: false
}
},
emits: [
/**
* Callbox click event
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"click"
],
computed: {
shouldShowAvatar() {
return this.avatarFullName || this.avatarSrc;
},
badgeClass() {
return CALLBOX_BADGE_COLORS[this.badgeColor];
},
borderClass() {
return CALLBOX_BORDER_COLORS[this.borderColor];
}
},
methods: {
handleClick(e) {
if (!this.clickable) return;
this.$emit("click", e);
}
}
};
const _hoisted_1 = {
key: 0,
"data-qa": "dt-recipe-callbox__video-wrapper",
class: "d-recipe-callbox__video"
};
const _hoisted_2 = { class: "d-recipe-callbox__main-content-top" };
const _hoisted_3 = { class: "d-recipe-callbox__content" };
const _hoisted_4 = {
key: 0,
"data-qa": "dt-recipe-callbox__badge-wrapper",
class: "d-recipe-callbox__content-badge"
};
const _hoisted_5 = {
key: 1,
"data-qa": "dt-recipe-callbox__subtitle-wrapper",
class: "d-recipe-callbox__content-subtitle"
};
const _hoisted_6 = {
key: 1,
"data-qa": "dt-recipe-callbox__right-wrapper",
class: "d-recipe-callbox__right"
};
const _hoisted_7 = {
key: 0,
"data-qa": "dt-recipe-callbox__bottom-wrapper",
class: "d-recipe-callbox__main-content-bottom"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_icon_pause = resolveComponent("dt-icon-pause");
const _component_dt_avatar = resolveComponent("dt-avatar");
const _component_dt_badge = resolveComponent("dt-badge");
return openBlock(), createElementBlock("div", {
"data-qa": "dt-recipe-callbox",
class: normalizeClass([_ctx.$attrs.class, "d-recipe-callbox"]),
style: normalizeStyle(_ctx.$attrs.style)
}, [
_ctx.$slots.video ? (openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "video")
])) : createCommentVNode("", true),
createElementVNode("div", {
"data-qa": "dt-recipe-callbox__main-content",
class: normalizeClass(["d-recipe-callbox__main-content", $options.borderClass, { "d-recipe-callbox--clickable": $props.clickable }])
}, [
createElementVNode("div", _hoisted_2, [
$options.shouldShowAvatar ? (openBlock(), createBlock(_component_dt_avatar, {
key: 0,
"avatar-class": "d-recipe-callbox__avatar",
"image-src": $props.avatarSrc,
"image-alt": "",
"full-name": $props.avatarFullName,
seed: $props.avatarSeed,
clickable: $props.clickable,
size: "sm",
onClick: $options.handleClick
}, createSlots({ _: 2 }, [
$props.isOnHold ? {
name: "overlayIcon",
fn: withCtx(() => [
createVNode(_component_dt_icon_pause)
]),
key: "0"
} : void 0
]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : createCommentVNode("", true),
createElementVNode("div", _hoisted_3, [
(openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "span"), {
"data-qa": "dt-recipe-callbox__title",
class: "d-recipe-callbox__content-title",
onClick: $options.handleClick
}, {
default: withCtx(() => [
createTextVNode(toDisplayString($props.title), 1)
]),
_: 1
}, 8, ["onClick"])),
_ctx.$slots.badge || $props.badgeText ? (openBlock(), createElementBlock("div", _hoisted_4, [
renderSlot(_ctx.$slots, "badge", {}, () => [
createVNode(_component_dt_badge, {
class: normalizeClass($options.badgeClass),
text: $props.badgeText
}, null, 8, ["class", "text"])
])
])) : createCommentVNode("", true),
_ctx.$slots.subtitle ? (openBlock(), createElementBlock("div", _hoisted_5, [
renderSlot(_ctx.$slots, "subtitle")
])) : createCommentVNode("", true)
]),
_ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_6, [
renderSlot(_ctx.$slots, "right")
])) : createCommentVNode("", true)
]),
_ctx.$slots.bottom ? (openBlock(), createElementBlock("div", _hoisted_7, [
renderSlot(_ctx.$slots, "bottom")
])) : createCommentVNode("", true)
], 2)
], 6);
}
const callbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
callbox as default
};
//# sourceMappingURL=callbox.vue.js.map