@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
99 lines (98 loc) • 3.52 kB
JavaScript
import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { getEmojiShortCode as t } from "../../common/emoji/index.js";
import { DialtoneLocalization as n } from "../../localization/index.js";
import r from "../button/button.js";
import i from "../tooltip/tooltip.js";
import a from "../emoji/emoji.js";
import o from "../emoji-text-wrapper/emoji-text-wrapper.js";
import { REACTIONS_ATTRIBUTES as s } from "./emoji-row-constants.js";
import { Fragment as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, normalizeClass as p, openBlock as m, renderList as h, renderSlot as g, resolveComponent as _, toDisplayString as v, withCtx as y } from "vue";
//#region recipes/conversation_view/emoji_row/emoji_row.vue
var b = {
compatConfig: { MODE: 3 },
name: "DtRecipeEmojiRow",
components: {
DtTooltip: i,
DtButton: r,
DtEmoji: a,
DtEmojiTextWrapper: o
},
props: { reactions: {
type: Array,
default: () => [],
validator: (e) => {
for (let t of e) if (!s.every((e) => t[e] !== void 0)) return !1;
return !0;
}
} },
emits: ["emoji-clicked", "emoji-hovered"],
data() {
return { i18n: new n() };
},
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", {
reaction: t(e.emojiUnicodeOrShortname),
personCount: e.num
});
}
}
}, x = { class: "d-recipe-emoji-row" }, S = { "aria-hidden": "true" }, C = { class: "d-recipe-emoji-row__tooltip-emoji" }, w = { class: "d-recipe-emoji-row__tooltip-names" }, T = ["textContent"], E = { class: "d-recipe-emoji-row__emoji" }, D = { class: "d-recipe-emoji-row__reaction-number" };
function O(e, t, n, r, i, a) {
let o = _("dt-emoji-text-wrapper"), s = _("dt-emoji"), b = _("dt-button"), O = _("dt-tooltip");
return m(), l("span", x, [(m(!0), l(c, null, h(n.reactions, (e) => (m(), l("span", { key: e.unicodeOutput }, [f(O, {
class: "d-recipe-emoji-row__tooltip",
"content-class": "d-recipe-emoji-row__tooltip-content",
"fallback-placements": ["top", "bottom"],
sticky: "popper",
onShown: (t) => a.emojiHovered(e, t)
}, {
anchor: y(({ attrs: t }) => [f(b, {
importance: "clear",
size: "sm",
"data-qa": "feed-item-reaction-button",
class: p(["d-recipe-emoji-row__reaction", e.isSelected ? "d-recipe-emoji-row__reaction--selected" : ""]),
"aria-label": a.reactionLabel(e),
attrs: t,
onClick: (t) => a.emojiClicked(e)
}, {
default: y(() => [u("span", E, [f(s, {
class: "d-recipe-emoji-row__emoji",
size: "200",
"img-class": "d-recipe-emoji-row__emoji-img",
code: e.emojiUnicodeOrShortname
}, null, 8, ["code"])]), u("span", D, v(e.num), 1)]),
_: 2
}, 1032, [
"class",
"aria-label",
"attrs",
"onClick"
])]),
default: y(() => [u("span", S, [f(o, { size: "800" }, {
default: y(() => [
u("p", C, v(e.emojiUnicodeOrShortname), 1),
t[0] || (t[0] = u("br", null, null, -1)),
u("p", w, [d(v(e.names) + " ", 1), u("span", {
class: "d-recipe-emoji-row__tooltip-label",
textContent: v(a.reactionLabel(e))
}, null, 8, T)])
]),
_: 2
}, 1024)])]),
_: 2
}, 1032, ["onShown"])]))), 128)), g(e.$slots, "picker")]);
}
var k = /* @__PURE__ */ e(b, [["render", O]]);
//#endregion
export { k as default };
//# sourceMappingURL=emoji-row.js.map