@dialpad/dialtone/dist/vue2/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/vue2";
import DtRecipeMessageInputButton from "./message_input_button.vue.js";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtStack from "../../../components/stack/stack.vue.js";
const _sfc_main = {
  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"]
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("dt-stack", { staticClass: "d-recipe-message-input__button-stack", attrs: { "direction": "row", "gap": "200" } }, [_c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.boldButtonOptions.ariaLabel, "tooltip-text": _vm.boldButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.boldButtonOptions.keyboardShortcutText, "data-qa": "bold", "is-active": _vm.isSelectionActive("bold") }, on: { "click": function($event) {
    return _vm.$emit("click", "bold", $event);
  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("dt-icon-bold", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.italicButtonOptions.ariaLabel, "tooltip-text": _vm.italicButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.italicButtonOptions.keyboardShortcutText, "data-qa": "italic", "is-active": _vm.isSelectionActive("italic") }, on: { "click": function($event) {
    return _vm.$emit("click", "italic", $event);
  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("dt-icon-italic", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.strikeButtonOptions.ariaLabel, "tooltip-text": _vm.strikeButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.strikeButtonOptions.keyboardShortcutText, "data-qa": "strikethrough", "is-active": _vm.isSelectionActive("strike") }, on: { "click": function($event) {
    return _vm.$emit("click", "strike", $event);
  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("dt-icon-strikethrough", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
  }, proxy: true }]) }), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _vm._t("link"), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.bulletListButtonOptions.ariaLabel, "tooltip-text": _vm.bulletListButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.bulletListButtonOptions.keyboardShortcutText, "data-qa": "bullet-list", "is-active": _vm.isSelectionActive("bulletList") }, on: { "click": function($event) {
    return _vm.$emit("click", "bulletList", $event);
  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("dt-icon-list-bullet", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.orderedListButtonOptions.ariaLabel, "tooltip-text": _vm.orderedListButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.orderedListButtonOptions.keyboardShortcutText, "data-qa": "ordered-list", "is-active": _vm.isSelectionActive("orderedList") }, on: { "click": function($event) {
    return _vm.$emit("click", "orderedList", $event);
  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("dt-icon-list-ordered", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
  }, proxy: true }]) }), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.blockQuoteButtonOptions.ariaLabel, "tooltip-text": _vm.blockQuoteButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.blockQuoteButtonOptions.keyboardShortcutText, "data-qa": "blockquote", "is-active": _vm.isSelectionActive("blockquote") }, on: { "click": function($event) {
    return _vm.$emit("click", "blockquote", $event);
  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("dt-icon-quote", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
  }, proxy: true }]) }), _c("div", { staticClass: "d-recipe-message-input--button-group-divider" }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.codeButtonOptions.ariaLabel, "tooltip-text": _vm.codeButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.codeButtonOptions.keyboardShortcutText, "data-qa": "code", "is-active": _vm.isSelectionActive("code") }, on: { "click": function($event) {
    return _vm.$emit("click", "code", $event);
  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("dt-icon-code", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
  }, proxy: true }]) }), _c("dt-recipe-message-input-button", { attrs: { "aria-label": _vm.codeBlockButtonOptions.ariaLabel, "tooltip-text": _vm.codeBlockButtonOptions.tooltipText, "keyboard-shortcut-text": _vm.codeBlockButtonOptions.keyboardShortcutText, "data-qa": "code-block", "is-active": _vm.isSelectionActive("codeBlock") }, on: { "click": function($event) {
    return _vm.$emit("click", "codeBlock", $event);
  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_c("dt-icon-code-block", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { "size": "200" } })];
  }, proxy: true }]) })], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const DtRecipeMessageInputTopbar = __component__.exports;
export {
  DtRecipeMessageInputTopbar as default
};
//# sourceMappingURL=message_input_topbar.vue.js.map