@dialpad/dialtone/dist/vue3/recipes/conversation_view/emoji_row/emoji_row.vue.js

Dialpad's Dialtone design system monorepo

import { REACTIONS_ATTRIBUTES } from "./emoji_row_constants.js";
import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, createVNode, withCtx, normalizeClass, createElementVNode, toDisplayString, createTextVNode, renderSlot } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
import DtTooltip from "../../../components/tooltip/tooltip.vue.js";
import DtButton from "../../../components/button/button.vue.js";
import DtEmoji from "../../../components/emoji/emoji.vue.js";
import DtEmojiTextWrapper from "../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js";
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeEmojiRow",
  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },
  mixins: [],
  props: {
    /**
     * Provide an array of reaction objects to be shown.
     */
    reactions: {
      type: Array,
      default: () => [],
      validator: (reactions) => {
        for (const reaction of reactions) {
          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== void 0);
          if (!validInput) return false;
        }
        return true;
      }
    }
  },
  emits: [
    "emoji-clicked",
    "emoji-hovered"
  ],
  methods: {
    emojiClicked(reaction) {
      this.$emit("emoji-clicked", reaction.emojiUnicodeOrShortname);
    },
    emojiHovered(reaction, state) {
      this.$emit("emoji-hovered", {
        reaction: reaction.emojiUnicodeOrShortname,
        state
      });
    }
  }
};
const _hoisted_1 = { class: "d-recipe-emoji-row" };
const _hoisted_2 = ["reaction"];
const _hoisted_3 = { "aria-hidden": "true" };
const _hoisted_4 = { class: "d-recipe-emoji-row__emoji" };
const _hoisted_5 = { class: "d-recipe-emoji-row__reaction-number" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_dt_emoji_text_wrapper = resolveComponent("dt-emoji-text-wrapper");
  const _component_dt_emoji = resolveComponent("dt-emoji");
  const _component_dt_button = resolveComponent("dt-button");
  const _component_dt_tooltip = resolveComponent("dt-tooltip");
  return openBlock(), createElementBlock("span", _hoisted_1, [
    (openBlock(true), createElementBlock(Fragment, null, renderList($props.reactions, (reaction) => {
      return openBlock(), createElementBlock("span", {
        key: reaction.unicodeOutput,
        reaction
      }, [
        createVNode(_component_dt_tooltip, {
          class: "d-recipe-emoji-row__tooltip",
          "content-class": "d-recipe-emoji-row__tooltip-content",
          sticky: "popper",
          onShown: (shown) => $options.emojiHovered(reaction, shown)
        }, {
          anchor: withCtx(({ attrs }) => [
            createVNode(_component_dt_button, {
              importance: "clear",
              size: "sm",
              "data-qa": "feed-item-reaction-button",
              class: normalizeClass([
                "d-recipe-emoji-row__reaction",
                reaction.isSelected ? "d-recipe-emoji-row__reaction--selected" : ""
              ]),
              "aria-label": reaction.ariaLabel,
              attrs,
              onClick: ($event) => $options.emojiClicked(reaction)
            }, {
              default: withCtx(() => [
                createElementVNode("span", _hoisted_4, [
                  createVNode(_component_dt_emoji, {
                    size: "200",
                    code: reaction.emojiUnicodeOrShortname
                  }, null, 8, ["code"])
                ]),
                createElementVNode("span", _hoisted_5, toDisplayString(reaction.num), 1)
              ]),
              _: 2
            }, 1032, ["class", "aria-label", "attrs", "onClick"])
          ]),
          default: withCtx(() => [
            createElementVNode("span", _hoisted_3, [
              createVNode(_component_dt_emoji_text_wrapper, { size: "200" }, {
                default: withCtx(() => [
                  createTextVNode(toDisplayString(reaction.tooltip), 1)
                ]),
                _: 2
              }, 1024)
            ])
          ]),
          _: 2
        }, 1032, ["onShown"])
      ], 8, _hoisted_2);
    }), 128)),
    renderSlot(_ctx.$slots, "picker")
  ]);
}
const emoji_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  emoji_row as default
};
//# sourceMappingURL=emoji_row.vue.js.map