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