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