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

Dialpad's Dialtone design system monorepo

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const emoji_row_constants = require("./emoji_row_constants.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
const tooltip = require("../../../components/tooltip/tooltip.vue.cjs");
const button = require("../../../components/button/button.vue.cjs");
const emoji = require("../../../components/emoji/emoji.vue.cjs");
const emoji_text_wrapper = require("../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs");
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeEmojiRow",
  components: { DtTooltip: tooltip.default, DtButton: button.default, DtEmoji: emoji.default, DtEmojiTextWrapper: emoji_text_wrapper.default },
  mixins: [],
  props: {
    /**
     * Provide an array of reaction objects to be shown.
     */
    reactions: {
      type: Array,
      default: () => [],
      validator: (reactions) => {
        for (const reaction of reactions) {
          const validInput = emoji_row_constants.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 = vue.resolveComponent("dt-emoji-text-wrapper");
  const _component_dt_emoji = vue.resolveComponent("dt-emoji");
  const _component_dt_button = vue.resolveComponent("dt-button");
  const _component_dt_tooltip = vue.resolveComponent("dt-tooltip");
  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.reactions, (reaction) => {
      return vue.openBlock(), vue.createElementBlock("span", {
        key: reaction.unicodeOutput,
        reaction
      }, [
        vue.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: vue.withCtx(({ attrs }) => [
            vue.createVNode(_component_dt_button, {
              importance: "clear",
              size: "sm",
              "data-qa": "feed-item-reaction-button",
              class: vue.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: vue.withCtx(() => [
                vue.createElementVNode("span", _hoisted_4, [
                  vue.createVNode(_component_dt_emoji, {
                    size: "200",
                    code: reaction.emojiUnicodeOrShortname
                  }, null, 8, ["code"])
                ]),
                vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(reaction.num), 1)
              ]),
              _: 2
            }, 1032, ["class", "aria-label", "attrs", "onClick"])
          ]),
          default: vue.withCtx(() => [
            vue.createElementVNode("span", _hoisted_3, [
              vue.createVNode(_component_dt_emoji_text_wrapper, { size: "200" }, {
                default: vue.withCtx(() => [
                  vue.createTextVNode(vue.toDisplayString(reaction.tooltip), 1)
                ]),
                _: 2
              }, 1024)
            ])
          ]),
          _: 2
        }, 1032, ["onShown"])
      ], 8, _hoisted_2);
    }), 128)),
    vue.renderSlot(_ctx.$slots, "picker")
  ]);
}
const emoji_row = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = emoji_row;
//# sourceMappingURL=emoji_row.vue.cjs.map