@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.38 kB
Source Map (JSON)
{"version":3,"file":"EditorToolbarDropdownButton.cjs","names":[],"sources":["../../../recipes/conversation_view/editor/EditorToolbarDropdownButton.vue"],"sourcesContent":["<template>\n <dt-dropdown\n :data-qa=\"dropdownDataQa || `${dataQa}-dropdown`\"\n padding=\"small\"\n navigation-type=\"arrow-keys\"\n placement=\"bottom-start\"\n @opened=\"onDropdownOpened\"\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 #list=\"{ close: dropdownClose }\">\n <slot\n name=\"list\"\n :close=\"(cb) => { pendingCallback = cb; dropdownClose(); }\"\n />\n </template>\n </dt-dropdown>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\n\nexport default {\n name: 'EditorToolbardropdownButton',\n\n components: {\n DtButton,\n DtDropdown,\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 * dropdown specific data QA attribute\n */\n dropdownDataQa: {\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 onDropdownOpened (isOpen) {\n if (!isOpen && typeof this.pendingCallback === 'function') {\n this.pendingCallback();\n this.pendingCallback = null;\n }\n },\n },\n};\n</script>\n"],"mappings":"gSA4CA,IAAK,EAAU,CACb,KAAM,8BAEN,WAAY,CACV,SAAA,EAAA,QACA,WAAA,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,eAAgB,CACd,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,iBAAkB,EAAQ,CACpB,CAAC,GAAU,OAAO,KAAK,iBAAoB,aAC7C,KAAK,iBAAiB,CACtB,KAAK,gBAAkB,OAG5B,CACF,4LA7Fe,EAAA,CAnCX,UAAS,EAAA,gBAAc,GAAO,EAAA,OAAM,WACrC,QAAQ,QACR,kBAAgB,aAChB,UAAU,eACT,SAAQ,EAAA,mBAEE,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,MAAA,EAAA,EAAA,UAIP,CAAA,MAJsB,KAAa,EAAA,EAAA,EAAA,YAInC,EAAA,OAAA,OAAA,CADC,MAAQ,GAAE,CAAO,EAAA,gBAAkB,EAAI,GAAa"}