@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 3.83 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';\nimport { returnFirstEl } from '@/common/utils';\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 compatConfig: { MODE: 3 },\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(returnFirstEl(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 !== returnFirstEl(this.$el) ? current.parentNode : null;\n }\n\n return isFirstElement;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","Modal","firstFocusableElement","returnFirstEl","element","current","isFirstElement","_hoisted_1","_createElementBlock","$props","$data","$options","_normalizeClass","_renderSlot","_ctx"],"mappings":"kRAwBKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aAEN,OAAQ,CAACC,EAAAA,OAAK,EAEd,OAAQ,CAAC,cAAc,EAEvB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,IAMZ,MAAO,CACL,KAAM,OACN,SAAU,IAOZ,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,wBAAyB,GAE7B,EAEA,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,MACxD,GAGF,MAAM,SAAW,CACf,MAAMC,EAAwB,MAAM,KAAK,yBAAyBC,EAAAA,cAAc,KAAK,GAAG,CAAC,EAEpFD,EAMH,KAAK,wBAA0B,KAAK,sBAAsBA,CAAqB,EAL/E,KAAK,wBAA0B,EAOnC,EAEA,QAAS,CACP,sBAAuBE,EAAS,CAC9B,IAAIC,EAAUD,EACVE,EAAiB,GAErB,KAAOD,GAAS,CACd,GAAIA,EAAQ,yBAA2B,KAAM,CAC3CC,EAAiB,GACjB,KACF,CACAD,EAAUA,EAAQ,aAAeF,EAAAA,cAAc,KAAK,GAAG,EAAIE,EAAQ,WAAa,IAClF,CAEA,OAAOC,CACT,EAEJ,EA5GAC,EAAA,CAAA,KAAA,WAAA,kBAAA,aAAA,iEACEC,EAAAA,mBAYM,MAAA,CAVH,eAAgBC,EAAA,EAAE,GACnB,KAAK,WACJ,SAAUC,EAAA,wBAAuB,GAAA,EACjC,4BAA2BD,EAAA,KAAK,GAChC,iBAAgBE,EAAA,SAAS,GACzB,MARLC,EAAAA,eAQYH,EAAA,aAAa,EACrB,UAAQ,iBAGRI,aAAQC,EAAA,OAAA,SAAA,CAZZ,EAAA,GAAAP,CAAA,GAAA,WAEaI,EAAA,SAAS"}