@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
1 lines • 3.27 kB
Source Map (JSON)
{"version":3,"file":"tab-panel.cjs","sources":["../../../components/tab/tab_panel.vue"],"sourcesContent":["<template>\n <div\n v-show=\"!hidePanel\"\n :id=\"`dt-panel-${id}`\"\n role=\"tabpanel\"\n :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n :aria-labelledby=\"`dt-tab-${tabId}`\"\n :aria-hidden=\"`${hidePanel}`\"\n :class=\"tabPanelClass\"\n data-qa=\"dt-tab-panel\"\n >\n <!-- @slot Default slot for Tab Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n name: 'DtTabPanel',\n\n mixins: [Modal],\n\n inject: ['groupContext'],\n\n props: {\n /**\n * Id of the panel\n */\n id: {\n type: String,\n required: true,\n },\n\n /**\n * Id of the associated tab\n */\n tabId: {\n type: String,\n required: true,\n },\n\n /**\n * If true, hides the tab content\n * @values true, false\n */\n hidden: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Used to customize the tab element\n */\n tabPanelClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n data () {\n return {\n isFirstElementFocusable: false,\n };\n },\n\n computed: {\n hidePanel () {\n return this.groupContext.selected !== this.id || this.hidden;\n },\n },\n\n async mounted () {\n const firstFocusableElement = await this.getFirstFocusableElement(this.$el);\n\n if (!firstFocusableElement) {\n this.isFirstElementFocusable = false;\n } else {\n // If the first focusable element isn't the first element in the panel,\n // then we need to set the panel tabindex to 0.\n // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n }\n },\n\n methods: {\n isFirstElementOfPanel (element) {\n let current = element;\n let isFirstElement = true;\n\n while (current) {\n if (current.previousElementSibling !== null) {\n isFirstElement = false;\n break;\n }\n current = current.parentNode !== this.$el ? current.parentNode : null;\n }\n\n return isFirstElement;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","Modal","firstFocusableElement","element","current","isFirstElement"],"mappings":"qNAuBAA,EAAA,CACA,KAAA,aAEA,OAAA,CAAAC,EAAAA,OAAA,EAEA,OAAA,CAAA,cAAA,EAEA,MAAA,CAIA,GAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,MAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,OAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,cAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,wBAAA,EACA,CACA,EAEA,SAAA,CACA,WAAA,CACA,OAAA,KAAA,aAAA,WAAA,KAAA,IAAA,KAAA,MACA,CACA,EAEA,MAAA,SAAA,CACA,MAAAC,EAAA,MAAA,KAAA,yBAAA,KAAA,GAAA,EAEAA,EAMA,KAAA,wBAAA,KAAA,sBAAAA,CAAA,EALA,KAAA,wBAAA,EAOA,EAEA,QAAA,CACA,sBAAAC,EAAA,CACA,IAAAC,EAAAD,EACAE,EAAA,GAEA,KAAAD,GAAA,CACA,GAAAA,EAAA,yBAAA,KAAA,CACAC,EAAA,GACA,KACA,CACAD,EAAAA,EAAA,aAAA,KAAA,IAAAA,EAAA,WAAA,IACA,CAEA,OAAAC,CACA,CACA,CACA"}