@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
95 lines (94 loc) • 2.7 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const modal = require("../../common/mixins/modal.cjs");
const common_utils = require("../../common/utils.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtTabPanel",
mixins: [modal.default],
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(common_utils.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 !== common_utils.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 vue.withDirectives((vue.openBlock(), vue.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: vue.normalizeClass($props.tabPanelClass),
"data-qa": "dt-tab-panel"
}, [
vue.renderSlot(_ctx.$slots, "default")
], 10, _hoisted_1)), [
[vue.vShow, !$options.hidePanel]
]);
}
const tab_panel = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = tab_panel;
//# sourceMappingURL=tab_panel.vue.cjs.map