@dialpad/dialtone-vue/dist/lib/message-input/message-input-topbar.js

Vue component library for Dialpad's design system Dialtone

import { DtIconCodeBlock as i, DtIconCode as n, DtIconQuote as c, DtIconListOrdered as a, DtIconStrikethrough as s, DtIconItalic as r, DtIconBold as u, DtIconListBullet as l } from "@dialpad/dialtone-icons/vue2";
import d from "./message-input-button.js";
import { DialtoneLocalization as p } from "../../localization/index.js";
import { n as b } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import _ from "../stack/stack.js";
const k = {
  name: "DtRecipeMessageInputTopbar",
  components: {
    DtStack: _,
    DtIconListBullet: l,
    DtIconBold: u,
    DtIconItalic: r,
    DtIconStrikethrough: s,
    DtIconListOrdered: a,
    DtIconQuote: c,
    DtIconCode: n,
    DtIconCodeBlock: i,
    DtRecipeMessageInputButton: d
  },
  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"],
  data() {
    return {
      i18n: new p()
    };
  },
  computed: {
    boldButtonLabel() {
      return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_BOLD_BUTTON_LABEL");
    },
    italicButtonLabel() {
      return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_ITALIC_BUTTON_LABEL");
    },
    strikeButtonLabel() {
      return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_STRIKETHROUGH_BUTTON_LABEL");
    },
    bulletListButtonLabel() {
      return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_BULLET_LIST_BUTTON_LABEL");
    },
    orderedListButtonLabel() {
      return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_ORDERED_LIST_BUTTON_LABEL");
    },
    blockQuoteButtonLabel() {
      return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_BLOCK_QUOTE_BUTTON_LABEL");
    },
    codeButtonLabel() {
      return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_CODE_BUTTON_LABEL");
    },
    codeBlockButtonLabel() {
      return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_CODE_BLOCK_BUTTON_LABEL");
    }
  }
};
var L = function() {
  var t = this, e = t._self._c;
  return e("dt-stack", { staticClass: "d-recipe-message-input__button-stack", attrs: { direction: "row", gap: "200" } }, [e("dt-recipe-message-input-button", { attrs: { "aria-label": t.boldButtonLabel["aria-label"], "tooltip-text": t.boldButtonLabel["tooltip-text"], "keyboard-shortcut-text": t.boldButtonOptions.keyboardShortcutText, "data-qa": "bold", "is-active": t.isSelectionActive("bold") }, on: { click: function(o) {
    return t.$emit("click", "bold", o);
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [e("dt-icon-bold", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { size: "200" } })];
  }, proxy: !0 }]) }), e("dt-recipe-message-input-button", { attrs: { "aria-label": t.italicButtonLabel["aria-label"], "tooltip-text": t.italicButtonLabel["tooltip-text"], "keyboard-shortcut-text": t.italicButtonOptions.keyboardShortcutText, "data-qa": "italic", "is-active": t.isSelectionActive("italic") }, on: { click: function(o) {
    return t.$emit("click", "italic", o);
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [e("dt-icon-italic", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { size: "200" } })];
  }, proxy: !0 }]) }), e("dt-recipe-message-input-button", { attrs: { "aria-label": t.strikeButtonLabel["aria-label"], "tooltip-text": t.strikeButtonLabel["tooltip-text"], "keyboard-shortcut-text": t.strikeButtonOptions.keyboardShortcutText, "data-qa": "strikethrough", "is-active": t.isSelectionActive("strike") }, on: { click: function(o) {
    return t.$emit("click", "strike", o);
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [e("dt-icon-strikethrough", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { size: "200" } })];
  }, proxy: !0 }]) }), e("div", { staticClass: "d-recipe-message-input--button-group-divider" }), t._t("link"), e("div", { staticClass: "d-recipe-message-input--button-group-divider" }), e("dt-recipe-message-input-button", { attrs: { "aria-label": t.bulletListButtonLabel["aria-label"], "tooltip-text": t.bulletListButtonLabel["tooltip-text"], "keyboard-shortcut-text": t.bulletListButtonOptions.keyboardShortcutText, "data-qa": "bullet-list", "is-active": t.isSelectionActive("bulletList") }, on: { click: function(o) {
    return t.$emit("click", "bulletList", o);
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [e("dt-icon-list-bullet", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { size: "200" } })];
  }, proxy: !0 }]) }), e("dt-recipe-message-input-button", { attrs: { "aria-label": t.orderedListButtonLabel["aria-label"], "tooltip-text": t.orderedListButtonLabel["tooltip-text"], "keyboard-shortcut-text": t.orderedListButtonOptions.keyboardShortcutText, "data-qa": "ordered-list", "is-active": t.isSelectionActive("orderedList") }, on: { click: function(o) {
    return t.$emit("click", "orderedList", o);
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [e("dt-icon-list-ordered", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { size: "200" } })];
  }, proxy: !0 }]) }), e("div", { staticClass: "d-recipe-message-input--button-group-divider" }), e("dt-recipe-message-input-button", { attrs: { "aria-label": t.blockQuoteButtonLabel["aria-label"], "tooltip-text": t.blockQuoteButtonLabel["tooltip-text"], "keyboard-shortcut-text": t.blockQuoteButtonOptions.keyboardShortcutText, "data-qa": "blockquote", "is-active": t.isSelectionActive("blockquote") }, on: { click: function(o) {
    return t.$emit("click", "blockquote", o);
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [e("dt-icon-quote", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { size: "200" } })];
  }, proxy: !0 }]) }), e("div", { staticClass: "d-recipe-message-input--button-group-divider" }), e("dt-recipe-message-input-button", { attrs: { "aria-label": t.codeButtonLabel["aria-label"], "tooltip-text": t.codeButtonLabel["tooltip-text"], "keyboard-shortcut-text": t.codeButtonOptions.keyboardShortcutText, "data-qa": "code", "is-active": t.isSelectionActive("code") }, on: { click: function(o) {
    return t.$emit("click", "code", o);
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [e("dt-icon-code", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { size: "200" } })];
  }, proxy: !0 }]) }), e("dt-recipe-message-input-button", { attrs: { "aria-label": t.codeBlockButtonLabel["aria-label"], "tooltip-text": t.codeBlockButtonLabel["tooltip-text"], "keyboard-shortcut-text": t.codeBlockButtonOptions.keyboardShortcutText, "data-qa": "code-block", "is-active": t.isSelectionActive("codeBlock") }, on: { click: function(o) {
    return t.$emit("click", "codeBlock", o);
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [e("dt-icon-code-block", { staticClass: "d-recipe-message-input__button-stack-icon", attrs: { size: "200" } })];
  }, proxy: !0 }]) })], 2);
}, B = [], O = /* @__PURE__ */ b(
  k,
  L,
  B
);
const E = O.exports;
export {
  E as default
};
//# sourceMappingURL=message-input-topbar.js.map