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

Dialpad's Dialtone design system monorepo

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue3 = require("@dialpad/dialtone-icons/vue3");
const message_input_button = require("./message_input_button.vue.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
const stack = require("../../../components/stack/stack.vue.cjs");
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeMesageInputTopbar",
  components: {
    DtStack: stack.default,
    DtIconListBullet: vue3.DtIconListBullet,
    DtIconBold: vue3.DtIconBold,
    DtIconItalic: vue3.DtIconItalic,
    DtIconStrikethrough: vue3.DtIconStrikethrough,
    DtIconListOrdered: vue3.DtIconListOrdered,
    DtIconQuote: vue3.DtIconQuote,
    DtIconCode: vue3.DtIconCode,
    DtIconCodeBlock: vue3.DtIconCodeBlock,
    DtRecipeMessageInputButton: message_input_button.default
  },
  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__ */ vue.createElementVNode("div", { class: "d-recipe-message-input--button-group-divider" }, null, -1);
const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "d-recipe-message-input--button-group-divider" }, null, -1);
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "d-recipe-message-input--button-group-divider" }, null, -1);
const _hoisted_4 = /* @__PURE__ */ vue.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 = vue.resolveComponent("dt-icon-bold");
  const _component_dt_recipe_message_input_button = vue.resolveComponent("dt-recipe-message-input-button");
  const _component_dt_icon_italic = vue.resolveComponent("dt-icon-italic");
  const _component_dt_icon_strikethrough = vue.resolveComponent("dt-icon-strikethrough");
  const _component_dt_icon_list_bullet = vue.resolveComponent("dt-icon-list-bullet");
  const _component_dt_icon_list_ordered = vue.resolveComponent("dt-icon-list-ordered");
  const _component_dt_icon_quote = vue.resolveComponent("dt-icon-quote");
  const _component_dt_icon_code = vue.resolveComponent("dt-icon-code");
  const _component_dt_icon_code_block = vue.resolveComponent("dt-icon-code-block");
  const _component_dt_stack = vue.resolveComponent("dt-stack");
  return vue.openBlock(), vue.createBlock(_component_dt_stack, {
    direction: "row",
    gap: "200",
    class: "d-recipe-message-input__button-stack"
  }, {
    default: vue.withCtx(() => [
      vue.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: vue.withCtx(() => [
          vue.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"]),
      vue.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: vue.withCtx(() => [
          vue.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"]),
      vue.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: vue.withCtx(() => [
          vue.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,
      vue.renderSlot(_ctx.$slots, "link"),
      _hoisted_2,
      vue.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: vue.withCtx(() => [
          vue.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"]),
      vue.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: vue.withCtx(() => [
          vue.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,
      vue.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: vue.withCtx(() => [
          vue.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,
      vue.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: vue.withCtx(() => [
          vue.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"]),
      vue.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: vue.withCtx(() => [
          vue.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__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtRecipeMessageInputTopbar;
//# sourceMappingURL=message_input_topbar.vue.cjs.map