@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 12.4 kB
Source Map (JSON)
{"version":3,"file":"message-input-topbar.cjs","sources":["../../../recipes/conversation_view/message_input/message_input_topbar.vue"],"sourcesContent":["<template>\n <dt-stack\n direction=\"row\"\n gap=\"200\"\n class=\"d-recipe-message-input__button-stack\"\n >\n <dt-recipe-message-input-button\n :aria-label=\"boldButtonLabel['aria-label']\"\n :tooltip-text=\"boldButtonLabel['tooltip-text']\"\n :keyboard-shortcut-text=\"boldButtonOptions.keyboardShortcutText\"\n data-qa=\"bold\"\n :is-active=\"isSelectionActive('bold')\"\n @click=\"$emit('click', 'bold', $event)\"\n >\n <template #icon>\n <dt-icon-bold\n class=\"d-recipe-message-input__button-stack-icon\"\n size=\"200\"\n />\n </template>\n </dt-recipe-message-input-button>\n <dt-recipe-message-input-button\n :aria-label=\"italicButtonLabel['aria-label']\"\n :tooltip-text=\"italicButtonLabel['tooltip-text']\"\n :keyboard-shortcut-text=\"italicButtonOptions.keyboardShortcutText\"\n data-qa=\"italic\"\n :is-active=\"isSelectionActive('italic')\"\n @click=\"$emit('click', 'italic', $event)\"\n >\n <template #icon>\n <dt-icon-italic\n class=\"d-recipe-message-input__button-stack-icon\"\n size=\"200\"\n />\n </template>\n </dt-recipe-message-input-button>\n <dt-recipe-message-input-button\n :aria-label=\"strikeButtonLabel['aria-label']\"\n :tooltip-text=\"strikeButtonLabel['tooltip-text']\"\n :keyboard-shortcut-text=\"strikeButtonOptions.keyboardShortcutText\"\n data-qa=\"strikethrough\"\n :is-active=\"isSelectionActive('strike')\"\n @click=\"$emit('click', 'strike', $event)\"\n >\n <template #icon>\n <dt-icon-strikethrough\n class=\"d-recipe-message-input__button-stack-icon\"\n size=\"200\"\n />\n </template>\n </dt-recipe-message-input-button>\n <div class=\"d-recipe-message-input--button-group-divider\" />\n\n <!-- @slot special slot for link button, since links require a custom dialog -->\n <slot name=\"link\" />\n\n <div class=\"d-recipe-message-input--button-group-divider\" />\n\n <dt-recipe-message-input-button\n :aria-label=\"bulletListButtonLabel['aria-label']\"\n :tooltip-text=\"bulletListButtonLabel['tooltip-text']\"\n :keyboard-shortcut-text=\"bulletListButtonOptions.keyboardShortcutText\"\n data-qa=\"bullet-list\"\n :is-active=\"isSelectionActive('bulletList')\"\n @click=\"$emit('click', 'bulletList', $event)\"\n >\n <template #icon>\n <dt-icon-list-bullet\n class=\"d-recipe-message-input__button-stack-icon\"\n size=\"200\"\n />\n </template>\n </dt-recipe-message-input-button>\n <dt-recipe-message-input-button\n :aria-label=\"orderedListButtonLabel['aria-label']\"\n :tooltip-text=\"orderedListButtonLabel['tooltip-text']\"\n :keyboard-shortcut-text=\"orderedListButtonOptions.keyboardShortcutText\"\n data-qa=\"ordered-list\"\n :is-active=\"isSelectionActive('orderedList')\"\n @click=\"$emit('click', 'orderedList', $event)\"\n >\n <template #icon>\n <dt-icon-list-ordered\n class=\"d-recipe-message-input__button-stack-icon\"\n size=\"200\"\n />\n </template>\n </dt-recipe-message-input-button>\n <div class=\"d-recipe-message-input--button-group-divider\" />\n\n <dt-recipe-message-input-button\n :aria-label=\"blockQuoteButtonLabel['aria-label']\"\n :tooltip-text=\"blockQuoteButtonLabel['tooltip-text']\"\n :keyboard-shortcut-text=\"blockQuoteButtonOptions.keyboardShortcutText\"\n data-qa=\"blockquote\"\n :is-active=\"isSelectionActive('blockquote')\"\n @click=\"$emit('click', 'blockquote', $event)\"\n >\n <template #icon>\n <dt-icon-quote\n class=\"d-recipe-message-input__button-stack-icon\"\n size=\"200\"\n />\n </template>\n </dt-recipe-message-input-button>\n\n <div class=\"d-recipe-message-input--button-group-divider\" />\n\n <dt-recipe-message-input-button\n :aria-label=\"codeButtonLabel['aria-label']\"\n :tooltip-text=\"codeButtonLabel['tooltip-text']\"\n :keyboard-shortcut-text=\"codeButtonOptions.keyboardShortcutText\"\n data-qa=\"code\"\n :is-active=\"isSelectionActive('code')\"\n @click=\"$emit('click', 'code', $event)\"\n >\n <template #icon>\n <dt-icon-code\n class=\"d-recipe-message-input__button-stack-icon\"\n size=\"200\"\n />\n </template>\n </dt-recipe-message-input-button>\n <dt-recipe-message-input-button\n :aria-label=\"codeBlockButtonLabel['aria-label']\"\n :tooltip-text=\"codeBlockButtonLabel['tooltip-text']\"\n :keyboard-shortcut-text=\"codeBlockButtonOptions.keyboardShortcutText\"\n data-qa=\"code-block\"\n :is-active=\"isSelectionActive('codeBlock')\"\n @click=\"$emit('click', 'codeBlock', $event)\"\n >\n <template #icon>\n <dt-icon-code-block\n class=\"d-recipe-message-input__button-stack-icon\"\n size=\"200\"\n />\n </template>\n </dt-recipe-message-input-button>\n </dt-stack>\n</template>\n\n<script>\nimport { DtStack } from '@/components/stack';\nimport {\n DtIconListBullet,\n DtIconBold,\n DtIconItalic,\n DtIconStrikethrough,\n DtIconListOrdered,\n DtIconQuote,\n DtIconCode,\n DtIconCodeBlock,\n} from '@dialpad/dialtone-icons/vue3';\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeMessageInputTopbar',\n components: {\n DtStack,\n DtIconListBullet,\n DtIconBold,\n DtIconItalic,\n DtIconStrikethrough,\n DtIconListOrdered,\n DtIconQuote,\n DtIconCode,\n DtIconCodeBlock,\n DtRecipeMessageInputButton,\n },\n\n props: {\n boldButtonOptions: {\n type: Object,\n default: () => ({}),\n },\n\n italicButtonOptions: {\n type: Object,\n default: () => ({}),\n },\n\n strikeButtonOptions: {\n type: Object,\n default: () => ({}),\n },\n\n bulletListButtonOptions: {\n type: Object,\n default: () => ({}),\n },\n\n orderedListButtonOptions: {\n type: Object,\n default: () => ({}),\n },\n\n blockQuoteButtonOptions: {\n type: Object,\n default: () => ({}),\n },\n\n codeButtonOptions: {\n type: Object,\n default: () => ({}),\n },\n\n codeBlockButtonOptions: {\n type: Object,\n default: () => ({}),\n },\n\n isSelectionActive: {\n type: Function,\n default: () => {},\n },\n },\n\n emits: ['click'],\n\n data () {\n return {\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n boldButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BOLD_BUTTON_LABEL'); },\n italicButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_ITALIC_BUTTON_LABEL'); },\n strikeButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_STRIKETHROUGH_BUTTON_LABEL'); },\n bulletListButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BULLET_LIST_BUTTON_LABEL'); },\n orderedListButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_ORDERED_LIST_BUTTON_LABEL'); },\n blockQuoteButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_BLOCK_QUOTE_BUTTON_LABEL'); },\n codeButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_CODE_BUTTON_LABEL'); },\n codeBlockButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_CODE_BLOCK_BUTTON_LABEL'); },\n },\n};\n</script>\n"],"names":["_sfc_main","DtStack","DtIconListBullet","DtIconBold","DtIconItalic","DtIconStrikethrough","DtIconListOrdered","DtIconQuote","DtIconCode","DtIconCodeBlock","DtRecipeMessageInputButton","DialtoneLocalization","_createElementVNode","_createBlock","_component_dt_stack","_withCtx","_createVNode","_component_dt_recipe_message_input_button","$options","$props","_cache","$event","_ctx","_component_dt_icon_bold","_component_dt_icon_italic","_component_dt_icon_strikethrough","_hoisted_1","_renderSlot","_hoisted_2","_component_dt_icon_list_bullet","_component_dt_icon_list_ordered","_hoisted_3","_component_dt_icon_quote","_hoisted_4","_component_dt_icon_code","_component_dt_icon_code_block"],"mappings":"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"}