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