@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
212 lines (211 loc) • 7.03 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const callbox_constants = require("./callbox_constants.cjs");
const avatar = require("../../../components/avatar/avatar.vue.cjs");
const badge = require("../../../components/badge/badge.vue.cjs");
const vue3 = require("@dialpad/dialtone-icons/vue3");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeCallbox",
components: { DtBadge: badge.default, DtAvatar: avatar.default, DtIconPause: vue3.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_constants.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_constants.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_constants.CALLBOX_BADGE_COLORS[this.badgeColor];
},
borderClass() {
return callbox_constants.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 = vue.resolveComponent("dt-icon-pause");
const _component_dt_avatar = vue.resolveComponent("dt-avatar");
const _component_dt_badge = vue.resolveComponent("dt-badge");
return vue.openBlock(), vue.createElementBlock("div", {
"data-qa": "dt-recipe-callbox",
class: vue.normalizeClass([_ctx.$attrs.class, "d-recipe-callbox"]),
style: vue.normalizeStyle(_ctx.$attrs.style)
}, [
_ctx.$slots.video ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.renderSlot(_ctx.$slots, "video")
])) : vue.createCommentVNode("", true),
vue.createElementVNode("div", {
"data-qa": "dt-recipe-callbox__main-content",
class: vue.normalizeClass(["d-recipe-callbox__main-content", $options.borderClass, { "d-recipe-callbox--clickable": $props.clickable }])
}, [
vue.createElementVNode("div", _hoisted_2, [
$options.shouldShowAvatar ? (vue.openBlock(), vue.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
}, vue.createSlots({ _: 2 }, [
$props.isOnHold ? {
name: "overlayIcon",
fn: vue.withCtx(() => [
vue.createVNode(_component_dt_icon_pause)
]),
key: "0"
} : void 0
]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : vue.createCommentVNode("", true),
vue.createElementVNode("div", _hoisted_3, [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "span"), {
"data-qa": "dt-recipe-callbox__title",
class: "d-recipe-callbox__content-title",
onClick: $options.handleClick
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString($props.title), 1)
]),
_: 1
}, 8, ["onClick"])),
_ctx.$slots.badge || $props.badgeText ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
vue.renderSlot(_ctx.$slots, "badge", {}, () => [
vue.createVNode(_component_dt_badge, {
class: vue.normalizeClass($options.badgeClass),
text: $props.badgeText
}, null, 8, ["class", "text"])
])
])) : vue.createCommentVNode("", true),
_ctx.$slots.subtitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
vue.renderSlot(_ctx.$slots, "subtitle")
])) : vue.createCommentVNode("", true)
]),
_ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
vue.renderSlot(_ctx.$slots, "right")
])) : vue.createCommentVNode("", true)
]),
_ctx.$slots.bottom ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
vue.renderSlot(_ctx.$slots, "bottom")
])) : vue.createCommentVNode("", true)
], 2)
], 6);
}
const callbox = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = callbox;
//# sourceMappingURL=callbox.vue.cjs.map