@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
73 lines (72 loc) • 1.95 kB
JavaScript
import { DtIconArrowUp as d, DtIconArrowDown as l } from "@dialpad/dialtone-icons/vue3";
import { UNREAD_PILL_KINDS as p, UNREAD_PILL_DIRECTIONS as s } from "./unread-pill-constants.js";
import { resolveComponent as o, openBlock as r, createElementBlock as _, mergeProps as u, toHandlers as m, createBlock as n, createElementVNode as f, renderSlot as k } from "vue";
import { _ as w } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const D = {
compatConfig: { MODE: 3 },
name: "DtRecipeUnreadPill",
components: {
DtIconArrowUp: d,
DtIconArrowDown: l
},
props: {
/**
* The kind of unread pill which determines the styling
* @values 'mentions', 'messages'
**/
kind: {
type: String,
required: !0,
validator: (e) => p.includes(e)
},
/**
* The direction of the arrow icon
* @values 'up', 'down'
**/
direction: {
type: String,
required: !0,
validator: (e) => s.includes(e)
}
},
emits: [
/**
* Native click event
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"click"
],
computed: {
unreadChipListeners() {
return {
click: (e) => this.$emit("click", e)
};
}
}
}, b = { "data-qa": "dt-recipe-leftbar-unread-pill__label" };
function I(e, E, t, L, h, i) {
const c = o("dt-icon-arrow-up"), a = o("dt-icon-arrow-down");
return r(), _("button", u({
class: ["d-recipe-leftbar-unread-pill", `d-recipe-leftbar-unread-pill-${t.kind}`],
type: "button",
"data-qa": "dt-recipe-leftbar-unread-pill"
}, m(i.unreadChipListeners, !0)), [
t.direction === "up" ? (r(), n(c, {
key: 0,
size: "300"
})) : (r(), n(a, {
key: 1,
size: "300"
})),
f("span", b, [
k(e.$slots, "default")
])
], 16);
}
const g = /* @__PURE__ */ w(D, [["render", I]]);
export {
g as default
};
//# sourceMappingURL=unread-pill.js.map