@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 3.87 kB
Source Map (JSON)
{"version":3,"file":"tab.cjs","names":[],"sources":["../../../components/tab/tab.vue"],"sourcesContent":["<template>\n <dt-button\n :id=\"`dt-tab-${id}`\"\n :class=\"[\n 'd-tab',\n {\n [TAB_IMPORTANCE_MODIFIERS.selected]: isSelected,\n },\n tabClass,\n ]\"\n role=\"tab\"\n :aria-selected=\"`${isSelected}`\"\n :aria-controls=\"`dt-panel-${panelId}`\"\n :aria-label=\"label\"\n data-qa=\"dt-tab\"\n :tabindex=\"isSelected ? '0' : '-1'\"\n :disabled=\"groupContext.disabled || disabled\"\n v-bind=\"$attrs\"\n v-on=\"tabListeners\"\n >\n <!-- @slot default slot, defaults contains dt-button -->\n <slot />\n </dt-button>\n</template>\n\n<script>\nimport { TAB_IMPORTANCE_MODIFIERS } from './tabs_constants';\nimport { DtButton } from '../button';\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: 'DtTab',\n components: {\n DtButton,\n },\n\n inject: ['groupContext', 'setFocus'],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Id of the tab\n */\n id: {\n type: String,\n required: true,\n },\n\n /**\n * Id of the associated content panel\n */\n panelId: {\n type: String,\n required: true,\n },\n\n /**\n * Describes the tab\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * Controls the state of the tab\n * @values true, false\n */\n selected: {\n type: Boolean,\n default: false,\n },\n\n /**\n * If true, disables the tab\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Used to customize the tab element\n */\n tabClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n emits: [\n /**\n * Native button focus in event\n *\n * @event focus\n * @type {FocusEvent}\n */\n 'focus',\n\n /**\n * Native button click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n TAB_IMPORTANCE_MODIFIERS,\n };\n },\n\n computed: {\n tabListeners () {\n return {\n click: event => {\n this.$emit('click', event);\n },\n\n focus: event => {\n this.setFocus(this.id);\n this.$emit('focus', event);\n },\n };\n },\n\n isSelected () {\n return this.groupContext.selected === this.panelId;\n },\n },\n\n mounted () {\n if (this.selected) {\n this.groupContext.selected = this.panelId;\n }\n },\n};\n</script>\n"],"mappings":"4RAiCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,QACN,WAAY,CACV,SAAA,EAAA,QACD,CAED,OAAQ,CAAC,eAAgB,WAAW,CAEpC,aAAc,GAEd,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,GACX,CAKD,QAAS,CACP,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CACF,CAED,MAAO,CAOL,QAQA,QACD,CAED,MAAQ,CACN,MAAO,CACL,yBAAA,EAAA,yBACD,EAGH,SAAU,CACR,cAAgB,CACd,MAAO,CACL,MAAO,GAAS,CACd,KAAK,MAAM,QAAS,EAAM,EAG5B,MAAO,GAAS,CACd,KAAK,SAAS,KAAK,GAAG,CACtB,KAAK,MAAM,QAAS,EAAM,EAE7B,EAGH,YAAc,CACZ,OAAO,KAAK,aAAa,WAAa,KAAK,SAE9C,CAED,SAAW,CACL,KAAK,WACP,KAAK,aAAa,SAAW,KAAK,UAGvC,6GA1Ha,GAAA,EAAA,EAAA,YAAA,CApBT,GAAE,UAAY,EAAA,KACd,MAAK,WAAoC,EAAA,yBAAyB,UAAW,EAAA,WAAA,CAA2B,EAAA,UAOzG,KAAK,MACJ,gBAAa,GAAK,EAAA,aAClB,gBAAa,YAAc,EAAA,UAC3B,aAAY,EAAA,MACb,UAAQ,SACP,SAAU,EAAA,WAAU,IAAA,KACpB,SAAU,EAAA,aAAa,UAAY,EAAA,UAC5B,EAAA,QAAA,EAAA,EAAA,YACW,EAAb,aAAY,CAAA,CAAA,2BAGV,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}