@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.08 kB
Source Map (JSON)
{"version":3,"file":"tab.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":["_sfc_main","DtButton","TAB_IMPORTANCE_MODIFIERS","event","_openBlock","_createBlock","_component_dt_button","_mergeProps","$props","$data","$options","_ctx","_toHandlers","_withCtx","_renderSlot"],"mappings":"iQAiCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,QACN,WAAY,CACV,SAAAC,EAAAA,SAGF,OAAQ,CAAC,eAAgB,UAAU,EAEnC,aAAc,GAEd,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,IAMZ,QAAS,CACP,KAAM,OACN,SAAU,IAMZ,MAAO,CACL,KAAM,OACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,KAIb,MAAO,CAOL,QAQA,SAGF,MAAQ,CACN,MAAO,0BACLC,EAAAA,yBAEJ,EAEA,SAAU,CACR,cAAgB,CACd,MAAO,CACL,MAAOC,GAAS,CACd,KAAK,MAAM,QAASA,CAAK,CAC3B,EAEA,MAAOA,GAAS,CACd,KAAK,SAAS,KAAK,EAAE,EACrB,KAAK,MAAM,QAASA,CAAK,CAC3B,EAEJ,EAEA,YAAc,CACZ,OAAO,KAAK,aAAa,WAAa,KAAK,OAC7C,GAGF,SAAW,CACL,KAAK,WACP,KAAK,aAAa,SAAW,KAAK,QAEtC,CACF,kEA/IE,OAAAC,YAAA,EAAAC,cAqBYC,EArBZC,EAAAA,WAqBY,CApBT,aAAcC,EAAA,EAAE,GAChB,MAAK,WAAoCC,EAAA,yBAAyB,QAAQ,EAAGC,EAAA,YAA2BF,EAAA,UAOzG,KAAK,MACJ,mBAAkBE,EAAA,UAAU,GAC5B,4BAA2BF,EAAA,OAAO,GAClC,aAAYA,EAAA,MACb,UAAQ,SACP,SAAUE,EAAA,WAAU,IAAA,KACpB,SAAUA,EAAA,aAAa,UAAYF,EAAA,UAC5BG,EAAA,OACRC,EAAAA,WAAMF,EAAA,YAAY,CAAA,EAAA,CAlBtB,QAAAG,EAAAA,QAqBI,IAAQ,CAARC,aAAQH,EAAA,OAAA,SAAA,IArBZ,EAAA"}