@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.42 kB
Source Map (JSON)
{"version":3,"file":"EditorToolbarPopoverButton.cjs","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarPopoverButton.vue"],"sourcesContent":["<template>\n <dt-popover\n :data-qa=\"popoverDataQa || `${dataQa}-popover`\"\n padding=\"small\"\n navigation-type=\"arrow-keys\"\n placement=\"bottom-start\"\n :open-with-arrow-keys=\"true\"\n @opened=\"onPopoverOpened\"\n >\n <template #anchor=\"{ attrs }\">\n <dt-button\n ref=\"buttonRef\"\n v-dt-tooltip=\"{ message: tooltipMessage, placement: 'top', externalAnchorElement: $refs.buttonRef?.$el }\"\n v-bind=\"attrs\"\n :active=\"isActive\"\n :aria-label=\"tooltipMessage\"\n :data-qa=\"dataQa\"\n :tabindex=\"tabindex\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"xs\"\n @keydown.right.stop=\"$emit('shift-focus-right')\"\n @keydown.left.stop=\"$emit('shift-focus-left')\"\n >\n <template #icon>\n <component\n :is=\"icon\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <template #content=\"{ close: popoverClose }\">\n <slot\n name=\"content\"\n :close=\"(cb) => { pendingCallback = cb; popoverClose(); }\"\n />\n </template>\n </dt-popover>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\n\nexport default {\n name: 'EditorToolbarPopoverButton',\n\n components: {\n DtButton,\n DtPopover,\n },\n\n props: {\n /**\n * Whether the button is active\n */\n isActive: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Tooltip message\n */\n tooltipMessage: {\n type: String,\n required: true,\n },\n\n /**\n * Data QA attribute for testing\n */\n dataQa: {\n type: String,\n default: '',\n },\n\n /**\n * Popover specific data QA attribute\n */\n popoverDataQa: {\n type: String,\n default: '',\n },\n\n /**\n * Tab index for keyboard navigation\n */\n tabindex: {\n type: Number,\n default: -1,\n },\n\n /**\n * Icon component\n */\n icon: {\n type: Object,\n required: true,\n },\n },\n\n emits: [\n /**\n * Emitted when right arrow key is pressed\n */\n 'shift-focus-right',\n\n /**\n * Emitted when left arrow key is pressed\n */\n 'shift-focus-left',\n ],\n\n data () {\n return {\n pendingCallback: null,\n };\n },\n\n methods: {\n // Wait until the dropdown is fully closed so the modal's anchor focus\n // completes first, then the callback can override it (e.g. to focus the editor).\n onPopoverOpened (isOpen) {\n if (!isOpen && typeof this.pendingCallback === 'function') {\n this.pendingCallback();\n this.pendingCallback = null;\n }\n },\n },\n};\n</script>\n"],"mappings":"8RA6CA,IAAK,EAAU,CACb,KAAM,6BAEN,WAAY,CACV,SAAA,EAAA,QACA,UAAA,EAAA,QACD,CAED,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,eAAgB,CACd,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAKD,cAAe,CACb,KAAM,OACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CACF,CAED,MAAO,CAIL,oBAKA,mBACD,CAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAClB,EAGH,QAAS,CAGP,gBAAiB,EAAQ,CACnB,CAAC,GAAU,OAAO,KAAK,iBAAoB,aAC7C,KAAK,iBAAiB,CACtB,KAAK,gBAAkB,OAG5B,CACF,2LA7Fc,EAAA,CApCV,UAAS,EAAA,eAAa,GAAO,EAAA,OAAM,UACpC,QAAQ,QACR,kBAAgB,aAChB,UAAU,eACT,uBAAsB,GACtB,SAAQ,EAAA,kBAEE,QAAA,EAAA,EAAA,UAqBG,CArBO,WAAK,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAqBZ,GAAA,EAAA,EAAA,YAAA,CAnBV,IAAI,YAAW,CAEP,EAAK,CACZ,OAAQ,EAAA,SACR,aAAY,EAAA,eACZ,UAAS,EAAA,OACT,SAAU,EAAA,SACX,WAAW,QACX,KAAK,QACL,KAAK,KACJ,UAAO,CAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GAAa,EAAA,MAAK,oBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,eAAA,GACN,EAAA,MAAK,mBAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,OAAA,CAAA,EAAA,IAEd,MAAA,EAAA,EAAA,aAIP,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAFK,EAAA,KAAI,CAAA,CACT,KAAK,MAAK,CAAA,EAAA,CAAA,qEAfW,EAAA,eAAc,UAAA,MAAA,sBAA2C,EAAA,MAAM,WAAW,IAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAoB/F,SAAA,EAAA,EAAA,UAIP,CAAA,MAJyB,KAAY,EAAA,EAAA,EAAA,YAIrC,EAAA,OAAA,UAAA,CADC,MAAQ,GAAE,CAAO,EAAA,gBAAkB,EAAI,GAAY"}