@dialpad/dialtone/dist/vue3/lib/tab/tab-group.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"tab-group.cjs","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\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      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\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      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\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":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_mergeProps","$data","$props","_cache","_withKeys","args","$options","_renderSlot","_ctx"],"mappings":"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"}