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

Dialpad's Dialtone design system monorepo

import { DtIconListBullet as x, DtIconBold as O, DtIconItalic as v, DtIconStrikethrough as y, DtIconListOrdered as g, DtIconQuote as h, DtIconCode as L, DtIconCodeBlock as f } from "@dialpad/dialtone-icons/vue3";
import S from "./message-input-button.js";
import { resolveComponent as c, openBlock as T, createBlock as q, withCtx as a, createVNode as o, renderSlot as C, createElementVNode as s } from "vue";
import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import I from "../stack/stack.js";
const A = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeMesageInputTopbar",
  components: {
    DtStack: I,
    DtIconListBullet: x,
    DtIconBold: O,
    DtIconItalic: v,
    DtIconStrikethrough: y,
    DtIconListOrdered: g,
    DtIconQuote: h,
    DtIconCode: L,
    DtIconCodeBlock: f,
    DtRecipeMessageInputButton: S
  },
  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"]
}, j = /* @__PURE__ */ s("div", { class: "d-recipe-message-input--button-group-divider" }, null, -1), z = /* @__PURE__ */ s("div", { class: "d-recipe-message-input--button-group-divider" }, null, -1), Q = /* @__PURE__ */ s("div", { class: "d-recipe-message-input--button-group-divider" }, null, -1), M = /* @__PURE__ */ s("div", { class: "d-recipe-message-input--button-group-divider" }, null, -1);
function R(n, e, t, w, E, N) {
  const d = c("dt-icon-bold"), l = c("dt-recipe-message-input-button"), u = c("dt-icon-italic"), r = c("dt-icon-strikethrough"), b = c("dt-icon-list-bullet"), k = c("dt-icon-list-ordered"), p = c("dt-icon-quote"), _ = c("dt-icon-code"), m = c("dt-icon-code-block"), B = c("dt-stack");
  return T(), q(B, {
    direction: "row",
    gap: "200",
    class: "d-recipe-message-input__button-stack"
  }, {
    default: a(() => [
      o(l, {
        "aria-label": t.boldButtonOptions.ariaLabel,
        "tooltip-text": t.boldButtonOptions.tooltipText,
        "keyboard-shortcut-text": t.boldButtonOptions.keyboardShortcutText,
        "data-qa": "bold",
        "is-active": t.isSelectionActive("bold"),
        onClick: e[0] || (e[0] = (i) => n.$emit("click", "bold", i))
      }, {
        icon: a(() => [
          o(d, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      o(l, {
        "aria-label": t.italicButtonOptions.ariaLabel,
        "tooltip-text": t.italicButtonOptions.tooltipText,
        "keyboard-shortcut-text": t.italicButtonOptions.keyboardShortcutText,
        "data-qa": "italic",
        "is-active": t.isSelectionActive("italic"),
        onClick: e[1] || (e[1] = (i) => n.$emit("click", "italic", i))
      }, {
        icon: a(() => [
          o(u, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      o(l, {
        "aria-label": t.strikeButtonOptions.ariaLabel,
        "tooltip-text": t.strikeButtonOptions.tooltipText,
        "keyboard-shortcut-text": t.strikeButtonOptions.keyboardShortcutText,
        "data-qa": "strikethrough",
        "is-active": t.isSelectionActive("strike"),
        onClick: e[2] || (e[2] = (i) => n.$emit("click", "strike", i))
      }, {
        icon: a(() => [
          o(r, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      j,
      C(n.$slots, "link"),
      z,
      o(l, {
        "aria-label": t.bulletListButtonOptions.ariaLabel,
        "tooltip-text": t.bulletListButtonOptions.tooltipText,
        "keyboard-shortcut-text": t.bulletListButtonOptions.keyboardShortcutText,
        "data-qa": "bullet-list",
        "is-active": t.isSelectionActive("bulletList"),
        onClick: e[3] || (e[3] = (i) => n.$emit("click", "bulletList", i))
      }, {
        icon: a(() => [
          o(b, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      o(l, {
        "aria-label": t.orderedListButtonOptions.ariaLabel,
        "tooltip-text": t.orderedListButtonOptions.tooltipText,
        "keyboard-shortcut-text": t.orderedListButtonOptions.keyboardShortcutText,
        "data-qa": "ordered-list",
        "is-active": t.isSelectionActive("orderedList"),
        onClick: e[4] || (e[4] = (i) => n.$emit("click", "orderedList", i))
      }, {
        icon: a(() => [
          o(k, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      Q,
      o(l, {
        "aria-label": t.blockQuoteButtonOptions.ariaLabel,
        "tooltip-text": t.blockQuoteButtonOptions.tooltipText,
        "keyboard-shortcut-text": t.blockQuoteButtonOptions.keyboardShortcutText,
        "data-qa": "blockquote",
        "is-active": t.isSelectionActive("blockquote"),
        onClick: e[5] || (e[5] = (i) => n.$emit("click", "blockquote", i))
      }, {
        icon: a(() => [
          o(p, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      M,
      o(l, {
        "aria-label": t.codeButtonOptions.ariaLabel,
        "tooltip-text": t.codeButtonOptions.tooltipText,
        "keyboard-shortcut-text": t.codeButtonOptions.keyboardShortcutText,
        "data-qa": "code",
        "is-active": t.isSelectionActive("code"),
        onClick: e[6] || (e[6] = (i) => n.$emit("click", "code", i))
      }, {
        icon: a(() => [
          o(_, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"]),
      o(l, {
        "aria-label": t.codeBlockButtonOptions.ariaLabel,
        "tooltip-text": t.codeBlockButtonOptions.tooltipText,
        "keyboard-shortcut-text": t.codeBlockButtonOptions.keyboardShortcutText,
        "data-qa": "code-block",
        "is-active": t.isSelectionActive("codeBlock"),
        onClick: e[7] || (e[7] = (i) => n.$emit("click", "codeBlock", i))
      }, {
        icon: a(() => [
          o(m, {
            class: "d-recipe-message-input__button-stack-icon",
            size: "200"
          })
        ]),
        _: 1
      }, 8, ["aria-label", "tooltip-text", "keyboard-shortcut-text", "is-active"])
    ]),
    _: 3
  });
}
const K = /* @__PURE__ */ D(A, [["render", R]]);
export {
  K as default
};
//# sourceMappingURL=message-input-topbar.js.map