@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
106 lines (105 loc) • 2.64 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const tabs_constants = require("./tabs_constants.cjs");
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const button = require("../button/button.vue.cjs");
const _sfc_main = {
name: "DtTab",
components: {
DtButton: button.default
},
inject: ["groupContext", "setFocus"],
inheritAttrs: false,
props: {
/**
* Id of the tab
*/
id: {
type: String,
required: true
},
/**
* Id of the associated content panel
*/
panelId: {
type: String,
required: true
},
/**
* Describes the tab
*/
label: {
type: String,
default: ""
},
/**
* Controls the state of the tab
* @values true, false
*/
selected: {
type: Boolean,
default: false
},
/**
* If true, disables the tab
* @values true, false
*/
disabled: {
type: Boolean,
default: false
},
/**
* Used to customize the tab element
*/
tabClass: {
type: [String, Array, Object],
default: ""
}
},
data() {
return {
TAB_IMPORTANCE_MODIFIERS: tabs_constants.TAB_IMPORTANCE_MODIFIERS
};
},
computed: {
isSelected() {
return this.groupContext.selected === this.panelId;
},
tabListeners() {
return {
...this.$listeners,
click: (event) => {
this.$emit("click", event);
},
focus: (event) => {
this.setFocus(this.id);
this.$emit("focus", event);
}
};
}
},
mounted() {
if (this.selected) {
this.groupContext.selected = this.panelId;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("dt-button", _vm._g(_vm._b({ class: [
"d-tab",
{
[_vm.TAB_IMPORTANCE_MODIFIERS.selected]: _vm.isSelected
},
_vm.tabClass
], attrs: { "id": `dt-tab-${_vm.id}`, "role": "tab", "aria-selected": `${_vm.isSelected}`, "aria-controls": `dt-panel-${_vm.panelId}`, "aria-label": _vm.label, "data-qa": "dt-tab", "tabindex": _vm.isSelected ? "0" : "-1", "disabled": _vm.groupContext.disabled || _vm.disabled } }, "dt-button", _vm.$attrs, false), _vm.tabListeners), [_vm._t("default")], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtTab = __component__.exports;
exports.default = DtTab;
//# sourceMappingURL=tab.vue.cjs.map