@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.58 kB
Source Map (JSON)
{"version":3,"file":"tab.vue.cjs","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"],"names":["DtButton","TAB_IMPORTANCE_MODIFIERS","_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_renderSlot"],"mappings":";;;;;;AAiCA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,UAAAA,OAAQ;AAAA,EACT;AAAA,EAED,QAAQ,CAAC,gBAAgB,UAAU;AAAA,EAEnC,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,gCACLC,eAAwB;AAAA;EAE3B;AAAA,EAED,UAAU;AAAA,IACR,eAAgB;AACd,aAAO;AAAA,QACL,OAAO,WAAS;AACd,eAAK,MAAM,SAAS,KAAK;AAAA,QAC1B;AAAA,QAED,OAAO,WAAS;AACd,eAAK,SAAS,KAAK,EAAE;AACrB,eAAK,MAAM,SAAS,KAAK;AAAA,QAC1B;AAAA;IAEJ;AAAA,IAED,aAAc;AACZ,aAAO,KAAK,aAAa,aAAa,KAAK;AAAA,IAC5C;AAAA,EACF;AAAA,EAED,UAAW;AACT,QAAI,KAAK,UAAU;AACjB,WAAK,aAAa,WAAW,KAAK;AAAA,IACpC;AAAA,EACD;AACH;;;AA/IE,SAAAC,cAAA,GAAAC,gBAqBY,sBArBZC,IAAAA,WAqBY;AAAA,IApBT,cAAc,OAAE,EAAA;AAAA,IAChB,OAAK;AAAA;;SAAoC,MAAwB,yBAAC,QAAQ,GAAG,SAAU;AAAA;MAAiB,OAAQ;AAAA;IAOjH,MAAK;AAAA,IACJ,oBAAkB,SAAU,UAAA;AAAA,IAC5B,6BAA2B,OAAO,OAAA;AAAA,IAClC,cAAY,OAAK;AAAA,IAClB,WAAQ;AAAA,IACP,UAAU,SAAU,aAAA,MAAA;AAAA,IACpB,UAAU,SAAA,aAAa,YAAY,OAAQ;AAAA,KACpC,KAAM,QACdC,IAAAA,WAAM,SAAY,YAAA,CAAA,GAAA;AAAA,IAlBtB,SAAAC,IAAA,QAqBI,MAAQ;AAAA,MAARC,eAAQ,KAAA,QAAA,SAAA;AAAA;IArBZ,GAAA;AAAA;;;;"}