@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
89 lines (88 loc) • 2.13 kB
JavaScript
import r from "../../common/mixins/modal.js";
import { returnFirstEl as l } from "../../common/utils/index.js";
import { withDirectives as s, createElementBlock as d, openBlock as o, normalizeClass as u, renderSlot as c, vShow as m } from "vue";
import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const f = {
compatConfig: { MODE: 3 },
name: "DtTabPanel",
mixins: [r],
inject: ["groupContext"],
props: {
/**
* Id of the panel
*/
id: {
type: String,
required: !0
},
/**
* Id of the associated tab
*/
tabId: {
type: String,
required: !0
},
/**
* If true, hides the tab content
* @values true, false
*/
hidden: {
type: Boolean,
default: !1
},
/**
* Used to customize the tab element
*/
tabPanelClass: {
type: [String, Array, Object],
default: ""
}
},
data() {
return {
isFirstElementFocusable: !1
};
},
computed: {
hidePanel() {
return this.groupContext.selected !== this.id || this.hidden;
}
},
async mounted() {
const e = await this.getFirstFocusableElement(l(this.$el));
e ? this.isFirstElementFocusable = this.isFirstElementOfPanel(e) : this.isFirstElementFocusable = !1;
},
methods: {
isFirstElementOfPanel(e) {
let t = e, a = !0;
for (; t; ) {
if (t.previousElementSibling !== null) {
a = !1;
break;
}
t = t.parentNode !== l(this.$el) ? t.parentNode : null;
}
return a;
}
}
}, h = ["id", "tabindex", "aria-labelledby", "aria-hidden"];
function p(e, t, a, F, n, i) {
return s((o(), d("div", {
id: `dt-panel-${a.id}`,
role: "tabpanel",
tabindex: n.isFirstElementFocusable ? -1 : 0,
"aria-labelledby": `dt-tab-${a.tabId}`,
"aria-hidden": `${i.hidePanel}`,
class: u(a.tabPanelClass),
"data-qa": "dt-tab-panel"
}, [
c(e.$slots, "default")
], 10, h)), [
[m, !i.hidePanel]
]);
}
const P = /* @__PURE__ */ b(f, [["render", p]]);
export {
P as default
};
//# sourceMappingURL=tab-panel.js.map