@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

dialtone.dialpad.com

1 lines • 11.1 kB

Source Map (JSON)

{"version":3,"file":"tab_group.vue.cjs","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"dt-tab-group\"\n >\n \n <div\n ref=\"tabs\"\n :class=\"[\n 'd-tablist',\n TAB_LIST_SIZE_MODIFIERS[size],\n {\n [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n },\n tabListClass,\n ]\"\n v-bind=\"tabListChildProps\"\n role=\"tablist\"\n :aria-label=\"label\"\n @keyup.left=\"tabLeft\"\n @keyup.right=\"tabRight\"\n @keyup.enter=\"selectTab\"\n @keyup.space=\"selectTab\"\n @click=\"selectTab\"\n @keydown.home=\"onHomeButton\"\n @keydown.end=\"onEndButton\"\n >\n \n <slot name=\"tabs\" />\n </div>\n \n <slot />\n </div>\n</template>\n\n<script>\nimport {\n TAB_LIST_SIZES,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\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: 'DtTabGroup',\n\n provide () {\n return {\n groupContext: this.provideObj,\n setFocus: this.setFocus,\n };\n },\n\n props: {\n /**\n * Identifies the tab group\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * The id of the selected tab panel which should be displayed\n */\n selected: {\n type: String,\n default: '',\n },\n\n /**\n * If true, disables the tab group\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If true, applies inverted styles to the tab group\n * @values true, false\n */\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If true, applies borderless styles to the tab group\n * @values true, false\n */\n borderless: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If provided, applies size styles to the tab group\n * @values default, sm\n */\n size: {\n type: String,\n default: 'default',\n validate (size) {\n return TAB_LIST_SIZES.includes(size);\n },\n },\n\n /**\n * Pass through classes, used to customize the tab list\n */\n tabListClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /**\n * Pass through props, used to customize the tab list\n */\n tabListChildProps: {\n type: Object,\n default: () => ({}),\n },\n },\n\n emits: [\n /**\n * Change tab event with the arguments: selected id of the current tab and disabled value\n *\n * @event change\n * @type {Object}\n */\n 'change',\n\n /**\n * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n *\n * @event before-change\n * @type {Event}\n */\n 'before-change',\n ],\n\n data () {\n return {\n provideObj: {\n selected: '', // the currently displayed tab id\n disabled: false, // disable group\n },\n\n focusId: null,\n tabs: [],\n TAB_LIST_SIZE_MODIFIERS,\n TAB_LIST_KIND_MODIFIERS,\n TAB_LIST_IMPORTANCE_MODIFIERS,\n };\n },\n\n watch: {\n disabled: {\n immediate: true,\n handler () {\n this.provideObj.disabled = this.disabled;\n },\n },\n\n selected: {\n immediate: true,\n handler () {\n this.provideObj.selected = this.selected;\n },\n },\n },\n\n mounted () {\n this.updateSelected();\n },\n\n beforeUpdate () {\n this.updateSelected();\n },\n\n methods: {\n updateSelected () {\n /**\n * Prevent override tab selected by default\n */\n if (!this.provideObj.selected) {\n this.provideObj.selected = this.selected;\n }\n this.tabs = this.getTabChildren();\n },\n\n setFocus (focusId) {\n this.focusId = focusId;\n },\n\n getTabChildren () {\n const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n return tabs\n .map(el => {\n return ({\n context: el,\n panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n isSelected: el.getAttribute('aria-selected') === 'true',\n });\n });\n },\n\n onChange () {\n this.$emit('change', { ...this.provideObj });\n },\n\n tabLeft () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n this.selectFocusOnTab(indexElement);\n },\n\n tabRight () {\n const index = this.getFocusedTabIndex();\n if (index === -1) return;\n\n const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n this.selectFocusOnTab(indexElement);\n },\n\n selectFocusOnTab (index) {\n const { context } = this.tabs[index];\n context.focus();\n },\n\n selectTab (event) {\n if (this.isSameTabClicked()) return;\n\n this.$emit('before-change', event);\n if (event.defaultPrevented) return;\n\n const index = this.getFocusedTabIndex();\n\n this.selectTabByIndex(index);\n this.onChange();\n },\n\n selectTabByIndex (index) {\n const { context, panelId } = this.tabs[index];\n this.provideObj.selected = panelId;\n context.focus();\n },\n\n getFocusedTabIndex () {\n return this.tabs.findIndex((context) =>\n this.focusId ? context.tabId === `${this.focusId}` : context.isSelected);\n },\n\n onHomeButton () {\n if (this.tabs.length === 0) return;\n this.tabs[0]?.context?.focus();\n },\n\n onEndButton () {\n if (this.tabs.length === 0) return;\n this.tabs[this.tabs.length - 1]?.context?.focus();\n },\n\n isSameTabClicked () {\n const tab = this.tabs[this.getFocusedTabIndex()];\n return this.provideObj.selected === tab.panelId;\n },\n },\n};\n</script>\n"],"names":["TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","_withKeys","_renderSlot"],"mappings":"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"}