@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
95 lines (94 loc) • 2.55 kB
JavaScript
import Modal from "../../common/mixins/modal.js";
import { returnFirstEl } from "../../common/utils.js";
import { withDirectives, openBlock, createElementBlock, normalizeClass, renderSlot, vShow } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
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(returnFirstEl(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 !== returnFirstEl(this.$el) ? current.parentNode : null;
}
return isFirstElement;
}
}
};
const _hoisted_1 = ["id", "tabindex", "aria-labelledby", "aria-hidden"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return withDirectives((openBlock(), createElementBlock("div", {
id: `dt-panel-${$props.id}`,
role: "tabpanel",
tabindex: $data.isFirstElementFocusable ? -1 : 0,
"aria-labelledby": `dt-tab-${$props.tabId}`,
"aria-hidden": `${$options.hidePanel}`,
class: normalizeClass($props.tabPanelClass),
"data-qa": "dt-tab-panel"
}, [
renderSlot(_ctx.$slots, "default")
], 10, _hoisted_1)), [
[vShow, !$options.hidePanel]
]);
}
const tab_panel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
tab_panel as default
};
//# sourceMappingURL=tab_panel.vue.js.map