@dialpad/dialtone/dist/vue3/recipes/conversation_view/message_input/message_input_topbar.vue.js

Dialpad's Dialtone design system monorepo

import { DtIconListBullet, DtIconBold, DtIconItalic, DtIconStrikethrough, DtIconListOrdered, DtIconQuote, DtIconCode, DtIconCodeBlock } from "@dialpad/dialtone-icons/vue3";
import DtRecipeMessageInputButton from "./message_input_button.vue.js";
import { resolveComponent, openBlock, createBlock, withCtx, createVNode, renderSlot, createElementVNode } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
import DtStack from "../../../components/stack/stack.vue.js";
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeMesageInputTopbar",
  components: {
    DtStack,
    DtIconListBullet,
    DtIconBold,
    DtIconItalic,
    DtIconStrikethrough,
    DtIconListOrdered,
    DtIconQuote,
    DtIconCode,
    DtIconCodeBlock,
    DtRecipeMessageInputButton
  },
  props: {
    boldButtonOptions: {
      type: Object,
      default: () => ({})
    },
    italicButtonOptions: {
      type: Object,
      default: () => ({})
    },
    strikeButtonOptions: {
      type: Object,
      default: () => ({})
    },
    bulletListButtonOptions: {
      type: Object,
      default: () => ({})
    },
    orderedListButtonOptions: {
      type: Object,
      default: () => ({})
    },
    blockQuoteButtonOptions: {
      type: Object,
      default: () => ({})
    },
    codeButtonOptions: {
      type: Object,
      default: () => ({})
    },
    codeBlockButtonOptions: {
      type: Object,
      default: () => ({})
    },
    isSelectionActive: {
      type: Function,
      default: () => {
      }
    }
  },
  emits: ["click"]
};
const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { class: "d-recipe-message-input--button-group-divider" }, null, -1);
const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "d-recipe-message-input--button-group-divider" }, null, -1);
const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "d-recipe-message-input--button-group-divider" }, null, -1);
const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "d-recipe-message-input--button-group-divider" }, null, -1);
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_dt_icon_bold = resolveComponent("dt-icon-bold");
  const _component_dt_recipe_message_input_button = resolveComponent("dt-recipe-message-input-button");
  const _component_dt_icon_italic = resolveComponent("dt-icon-italic");
  const _component_dt_icon_strikethrough = resolveComponent("dt-icon-strikethrough");
  const _component_dt_icon_list_bullet = resolveComponent("dt-icon-list-bullet");
  const _component_dt_icon_list_ordered = resolveComponent("dt-icon-list-ordered");
  const _component_dt_icon_quote = resolveComponent("dt-icon-quote");
  const _component_dt_icon_code = resolveComponent("dt-icon-code");
  const _component_dt_icon_code_block = resolveComponent("dt-icon-code-block");
  const _component_dt_stack = resolveComponent("dt-stack");
  return openBlock(), createBlock(_component_dt_stack, {
    direction: "row",
    gap: "200",
    class: "d-recipe-message-input__button-stack"
  }, {
    default: withCtx(() => [
      createVNode(_component_dt_recipe_message_input_button, {
        "aria-label": $props.boldButtonOptions.ariaLabel,
        "tooltip-text": $props.boldButtonOptions.tooltipText,
        "keyboard-shortcut-text": $props.boldButtonOptions.keyboardShortcutText,
        "data-qa": "bold",
        "is-active": $props.isSelectionActive("bold"),
        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", "bold", $event))
      }, {
        icon: withCtx(() => [
          createVNode(_component_dt_icon_bold, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      createVNode(_component_dt_recipe_message_input_button, {
        "aria-label": $props.italicButtonOptions.ariaLabel,
        "tooltip-text": $props.italicButtonOptions.tooltipText,
        "keyboard-shortcut-text": $props.italicButtonOptions.keyboardShortcutText,
        "data-qa": "italic",
        "is-active": $props.isSelectionActive("italic"),
        onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", "italic", $event))
      }, {
        icon: withCtx(() => [
          createVNode(_component_dt_icon_italic, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      createVNode(_component_dt_recipe_message_input_button, {
        "aria-label": $props.strikeButtonOptions.ariaLabel,
        "tooltip-text": $props.strikeButtonOptions.tooltipText,
        "keyboard-shortcut-text": $props.strikeButtonOptions.keyboardShortcutText,
        "data-qa": "strikethrough",
        "is-active": $props.isSelectionActive("strike"),
        onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("click", "strike", $event))
      }, {
        icon: withCtx(() => [
          createVNode(_component_dt_icon_strikethrough, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      _hoisted_1,
      renderSlot(_ctx.$slots, "link"),
      _hoisted_2,
      createVNode(_component_dt_recipe_message_input_button, {
        "aria-label": $props.bulletListButtonOptions.ariaLabel,
        "tooltip-text": $props.bulletListButtonOptions.tooltipText,
        "keyboard-shortcut-text": $props.bulletListButtonOptions.keyboardShortcutText,
        "data-qa": "bullet-list",
        "is-active": $props.isSelectionActive("bulletList"),
        onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("click", "bulletList", $event))
      }, {
        icon: withCtx(() => [
          createVNode(_component_dt_icon_list_bullet, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      createVNode(_component_dt_recipe_message_input_button, {
        "aria-label": $props.orderedListButtonOptions.ariaLabel,
        "tooltip-text": $props.orderedListButtonOptions.tooltipText,
        "keyboard-shortcut-text": $props.orderedListButtonOptions.keyboardShortcutText,
        "data-qa": "ordered-list",
        "is-active": $props.isSelectionActive("orderedList"),
        onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("click", "orderedList", $event))
      }, {
        icon: withCtx(() => [
          createVNode(_component_dt_icon_list_ordered, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      _hoisted_3,
      createVNode(_component_dt_recipe_message_input_button, {
        "aria-label": $props.blockQuoteButtonOptions.ariaLabel,
        "tooltip-text": $props.blockQuoteButtonOptions.tooltipText,
        "keyboard-shortcut-text": $props.blockQuoteButtonOptions.keyboardShortcutText,
        "data-qa": "blockquote",
        "is-active": $props.isSelectionActive("blockquote"),
        onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("click", "blockquote", $event))
      }, {
        icon: withCtx(() => [
          createVNode(_component_dt_icon_quote, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      _hoisted_4,
      createVNode(_component_dt_recipe_message_input_button, {
        "aria-label": $props.codeButtonOptions.ariaLabel,
        "tooltip-text": $props.codeButtonOptions.tooltipText,
        "keyboard-shortcut-text": $props.codeButtonOptions.keyboardShortcutText,
        "data-qa": "code",
        "is-active": $props.isSelectionActive("code"),
        onClick: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("click", "code", $event))
      }, {
        icon: withCtx(() => [
          createVNode(_component_dt_icon_code, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      createVNode(_component_dt_recipe_message_input_button, {
        "aria-label": $props.codeBlockButtonOptions.ariaLabel,
        "tooltip-text": $props.codeBlockButtonOptions.tooltipText,
        "keyboard-shortcut-text": $props.codeBlockButtonOptions.keyboardShortcutText,
        "data-qa": "code-block",
        "is-active": $props.isSelectionActive("codeBlock"),
        onClick: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("click", "codeBlock", $event))
      }, {
        icon: withCtx(() => [
          createVNode(_component_dt_icon_code_block, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"])
    ]),
    _: 3
  });
}
const DtRecipeMessageInputTopbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  DtRecipeMessageInputTopbar as default
};
//# sourceMappingURL=message_input_topbar.vue.js.map