@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
102 lines (101 loc) • 3.27 kB
JavaScript
import { REACTIONS_ATTRIBUTES as w } from "./emoji-row-constants.js";
import { resolveComponent as i, openBlock as s, createElementBlock as a, Fragment as k, renderList as v, createVNode as r, withCtx as n, normalizeClass as S, createElementVNode as m, toDisplayString as _, createTextVNode as C, renderSlot as x } from "vue";
import { _ as E } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import b from "../tooltip/tooltip.js";
import D from "../button/button.js";
import T from "../emoji/emoji.js";
import y from "../emoji-text-wrapper/emoji-text-wrapper.js";
const O = {
compatConfig: { MODE: 3 },
name: "DtRecipeEmojiRow",
components: { DtTooltip: b, DtButton: D, DtEmoji: T, DtEmojiTextWrapper: y },
mixins: [],
props: {
/**
* Provide an array of reaction objects to be shown.
*/
reactions: {
type: Array,
default: () => [],
validator: (o) => {
for (const t of o)
if (!w.every((p) => t[p] !== void 0)) return !1;
return !0;
}
}
},
emits: [
"emoji-clicked",
"emoji-hovered"
],
methods: {
emojiClicked(o) {
this.$emit("emoji-clicked", o.emojiUnicodeOrShortname);
},
emojiHovered(o, t) {
this.$emit("emoji-hovered", {
reaction: o.emojiUnicodeOrShortname,
state: t
});
}
}
}, $ = { class: "d-recipe-emoji-row" }, z = ["reaction"], B = { "aria-hidden": "true" }, I = { class: "d-recipe-emoji-row__emoji" }, N = { class: "d-recipe-emoji-row__reaction-number" };
function R(o, t, d, p, U, l) {
const u = i("dt-emoji-text-wrapper"), j = i("dt-emoji"), f = i("dt-button"), h = i("dt-tooltip");
return s(), a("span", $, [
(s(!0), a(k, null, v(d.reactions, (e) => (s(), a("span", {
key: e.unicodeOutput,
reaction: e
}, [
r(h, {
class: "d-recipe-emoji-row__tooltip",
"content-class": "d-recipe-emoji-row__tooltip-content",
sticky: "popper",
onShown: (c) => l.emojiHovered(e, c)
}, {
anchor: n(({ attrs: c }) => [
r(f, {
importance: "clear",
size: "sm",
"data-qa": "feed-item-reaction-button",
class: S([
"d-recipe-emoji-row__reaction",
e.isSelected ? "d-recipe-emoji-row__reaction--selected" : ""
]),
"aria-label": e.ariaLabel,
attrs: c,
onClick: (g) => l.emojiClicked(e)
}, {
default: n(() => [
m("span", I, [
r(j, {
size: "200",
code: e.emojiUnicodeOrShortname
}, null, 8, ["code"])
]),
m("span", N, _(e.num), 1)
]),
_: 2
}, 1032, ["class", "aria-label", "attrs", "onClick"])
]),
default: n(() => [
m("span", B, [
r(u, { size: "200" }, {
default: n(() => [
C(_(e.tooltip), 1)
]),
_: 2
}, 1024)
])
]),
_: 2
}, 1032, ["onShown"])
], 8, z))), 128)),
x(o.$slots, "picker")
]);
}
const W = /* @__PURE__ */ E(O, [["render", R]]);
export {
W as default
};
//# sourceMappingURL=emoji-row.js.map