@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
79 lines (78 loc) • 1.89 kB
JavaScript
import s from "../../common/mixins/modal.js";
import { n } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const i = {
name: "DtTabPanel",
mixins: [s],
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 t = await this.getFirstFocusableElement(this.$el);
t ? this.isFirstElementFocusable = this.isFirstElementOfPanel(t) : this.isFirstElementFocusable = !1;
},
methods: {
isFirstElementOfPanel(t) {
let e = t, a = !0;
for (; e; ) {
if (e.previousElementSibling !== null) {
a = !1;
break;
}
e = e.parentNode !== this.$el ? e.parentNode : null;
}
return a;
}
}
};
var l = function() {
var e = this, a = e._self._c;
return a("div", { directives: [{ name: "show", rawName: "v-show", value: !e.hidePanel, expression: "!hidePanel" }], class: e.tabPanelClass, attrs: { id: `dt-panel-${e.id}`, role: "tabpanel", tabindex: e.isFirstElementFocusable ? -1 : 0, "aria-labelledby": `dt-tab-${e.tabId}`, "aria-hidden": `${e.hidePanel}`, "data-qa": "dt-tab-panel" } }, [e._t("default")], 2);
}, r = [], d = /* @__PURE__ */ n(
i,
l,
r
);
const m = d.exports;
export {
m as default
};
//# sourceMappingURL=tab-panel.js.map