@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
86 lines (85 loc) • 2.3 kB
JavaScript
import Modal from "../../common/mixins/modal.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
name: "DtTabPanel",
mixins: [Modal],
inject: ["groupContext"],
props: {
/**
* Id of the panel
*/
id: {
type: String,
required: true
},
/**
* Id of the associated tab
*/
tabId: {
type: String,
required: true
},
/**
* If true, hides the tab content
* @values true, false
*/
hidden: {
type: Boolean,
default: false
},
/**
* Used to customize the tab element
*/
tabPanelClass: {
type: [String, Array, Object],
default: ""
}
},
data() {
return {
isFirstElementFocusable: false
};
},
computed: {
hidePanel() {
return this.groupContext.selected !== this.id || this.hidden;
}
},
async mounted() {
const firstFocusableElement = await this.getFirstFocusableElement(this.$el);
if (!firstFocusableElement) {
this.isFirstElementFocusable = false;
} else {
this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);
}
},
methods: {
isFirstElementOfPanel(element) {
let current = element;
let isFirstElement = true;
while (current) {
if (current.previousElementSibling !== null) {
isFirstElement = false;
break;
}
current = current.parentNode !== this.$el ? current.parentNode : null;
}
return isFirstElement;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.hidePanel, expression: "!hidePanel" }], class: _vm.tabPanelClass, attrs: { "id": `dt-panel-${_vm.id}`, "role": "tabpanel", "tabindex": _vm.isFirstElementFocusable ? -1 : 0, "aria-labelledby": `dt-tab-${_vm.tabId}`, "aria-hidden": `${_vm.hidePanel}`, "data-qa": "dt-tab-panel" } }, [_vm._t("default")], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const tab_panel = __component__.exports;
export {
tab_panel as default
};
//# sourceMappingURL=tab_panel.vue.js.map