@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 8.59 kB
Source Map (JSON)
{"version":3,"file":"message-input-link.cjs","names":[],"sources":["../../../recipes/conversation_view/message_input/message_input_link.vue"],"sourcesContent":["<template>\n <dt-popover\n :open=\"isOpen\"\n placement=\"bottom-start\"\n content-class=\"d-recipe-message-input__link-popover\"\n data-qa=\"dt-message-input-link-popover\"\n :show-close-button=\"false\"\n @opened=\"$emit('opened', $event)\"\n >\n <template #anchor>\n <dt-recipe-message-input-button\n :aria-label=\"anchorButtonLabel['aria-label']\"\n :tooltip-text=\"anchorButtonLabel['tooltip-text']\"\n :keyboard-shortcut-text=\"linkButtonOptions.keyboardShortcutText\"\n data-qa=\"message-input-link-btn\"\n :is-active=\"isSelectionActive('link')\"\n @click=\"isOpen = true\"\n >\n <template #icon>\n <dt-icon-link2\n class=\"d-recipe-message-input__button-stack-icon\"\n size=\"200\"\n />\n </template>\n </dt-recipe-message-input-button>\n </template>\n\n <template #content>\n <dt-stack gap=\"500\">\n <div\n class=\"d-recipe-message-input__link-dialog-title\"\n >\n {{ i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE') }}\n </div>\n <dt-input\n v-model=\"linkText\"\n :input-aria-label=\"textInputLabel\"\n size=\"xs\"\n data-qa=\"dt-message-input-link-text-input\"\n :label=\"textInputLabel\"\n input-wrapper-class=\"d-recipe-message-input__link-input\"\n @click.stop\n @focus.stop\n @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n />\n <dt-input\n v-model=\"linkInput\"\n :input-aria-label=\"linkInputLabel\"\n size=\"xs\"\n data-qa=\"dt-message-input-link-input\"\n :placeholder=\"linkInputPlaceHolder\"\n :label=\"linkInputLabel\"\n input-wrapper-class=\"d-recipe-message-input__link-input\"\n @click.stop\n @focus.stop\n @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n />\n <dt-stack\n direction=\"row\"\n class=\"d-recipe-message-input__link-dialog-buttons\"\n >\n <dt-button\n :aria-label=\"removeButtonLabel\"\n :title=\"removeButtonLabel\"\n importance=\"clear\"\n kind=\"danger\"\n size=\"md\"\n data-qa=\"dt-message-input-link-remove-btn\"\n @click=\"$emit('remove-link', linkText, linkInput)\"\n >\n {{ removeButtonLabel }}\n </dt-button>\n <dt-stack\n direction=\"row\"\n gap=\"400\"\n >\n <dt-button\n :aria-label=\"cancelButtonLabel\"\n :title=\"cancelButtonLabel\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"md\"\n data-qa=\"dt-message-input-link-cancel-btn\"\n @click=\"isOpen = false\"\n >\n {{ cancelButtonLabel }}\n </dt-button>\n <dt-button\n size=\"md\"\n :aria-label=\"confirmButtonLabel\"\n :title=\"confirmButtonLabel\"\n data-qa=\"dt-message-input-link-confirm-btn\"\n @click=\"$emit('set-link', linkText, linkInput)\"\n >\n {{ confirmButtonLabel }}\n </dt-button>\n </dt-stack>\n </dt-stack>\n </dt-stack>\n </template>\n </dt-popover>\n</template>\n\n<script>\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { DtStack } from '@/components/stack';\nimport { DtIconLink2 } 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: 'MessageInputLink',\n\n components: {\n DtPopover,\n DtInput,\n DtButton,\n DtStack,\n DtIconLink2,\n DtRecipeMessageInputButton,\n },\n\n props: {\n open: {\n type: Boolean,\n default: false,\n },\n\n linkButtonOptions: {\n type: Object,\n required: true,\n },\n\n isSelectionActive: {\n type: Function,\n default: () => {},\n },\n },\n\n emits: ['set-link', 'remove-link', 'opened'],\n\n data () {\n return {\n linkText: '',\n linkInput: '',\n isOpen: false,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n anchorButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL'); },\n textInputLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL'); },\n linkInputLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL'); },\n linkInputPlaceHolder () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER'); },\n removeButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL'); },\n cancelButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL'); },\n confirmButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL'); },\n },\n\n watch: {\n open: {\n immediate: true,\n handler (value) {\n this.isOpen = value;\n },\n },\n },\n\n methods: {\n setInitialValues (linkText, linkInput) {\n this.linkText = linkText;\n this.linkInput = linkInput;\n },\n },\n};\n</script>\n"],"mappings":"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"}