@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
177 lines (176 loc) • 4.61 kB
JavaScript
import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { TAB_LIST_IMPORTANCE_MODIFIERS as t, TAB_LIST_KIND_MODIFIERS as n, TAB_LIST_SIZES as r, TAB_LIST_SIZE_MODIFIERS as i } from "./tabs-constants.js";
import { createElementBlock as a, createElementVNode as o, mergeProps as s, openBlock as c, renderSlot as l, withKeys as u } from "vue";
//#region components/tab/tab_group.vue
var d = {
compatConfig: { MODE: 3 },
name: "DtTabGroup",
provide() {
return {
groupContext: this.provideObj,
setFocus: this.setFocus
};
},
props: {
label: {
type: String,
default: ""
},
selected: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: !1
},
inverted: {
type: Boolean,
default: !1
},
borderless: {
type: Boolean,
default: !1
},
size: {
type: String,
default: "default",
validate(e) {
return r.includes(e);
}
},
tabListClass: {
type: [
String,
Array,
Object
],
default: ""
},
tabListChildProps: {
type: Object,
default: () => ({})
}
},
emits: ["change", "before-change"],
data() {
return {
provideObj: {
selected: "",
disabled: !1
},
focusId: null,
tabs: [],
TAB_LIST_SIZE_MODIFIERS: i,
TAB_LIST_KIND_MODIFIERS: n,
TAB_LIST_IMPORTANCE_MODIFIERS: t
};
},
watch: {
disabled: {
immediate: !0,
handler() {
this.provideObj.disabled = this.disabled;
}
},
selected: {
immediate: !0,
handler() {
this.provideObj.selected = this.selected;
}
}
},
mounted() {
this.updateSelected();
},
updated() {
this.updateSelected();
},
methods: {
updateSelected() {
this.provideObj.selected || (this.provideObj.selected = this.selected), this.tabs = this.getTabChildren();
},
setFocus(e) {
this.focusId = e;
},
getTabChildren() {
return Array.from(this.$refs.tabs.querySelectorAll(".d-tab")).map((e) => ({
context: e,
panelId: e.getAttribute("aria-controls")?.replace("dt-panel-", ""),
tabId: e.getAttribute("id")?.replace("dt-tab-", ""),
isSelected: e.getAttribute("aria-selected") === "true"
}));
},
onChange() {
this.$emit("change", { ...this.provideObj });
},
tabLeft() {
let e = this.getFocusedTabIndex();
if (e === -1) return;
let t = e - 1 < 0 ? this.tabs.length - 1 : e - 1;
this.selectFocusOnTab(t);
},
tabRight() {
let e = this.getFocusedTabIndex();
if (e === -1) return;
let t = e + 1 > this.tabs.length - 1 ? 0 : e + 1;
this.selectFocusOnTab(t);
},
selectFocusOnTab(e) {
let { context: t } = this.tabs[e];
t.focus();
},
selectTab(e) {
if (this.isSameTabClicked() || (this.$emit("before-change", e), e.defaultPrevented)) return;
let t = this.getFocusedTabIndex();
this.selectTabByIndex(t), this.onChange();
},
selectTabByIndex(e) {
let { context: t, panelId: n } = this.tabs[e];
this.provideObj.selected = n, t.focus();
},
getFocusedTabIndex() {
let e = this.tabs.findIndex((e) => this.focusId ? e.tabId === `${this.focusId}` : e.isSelected);
return e === -1 ? 0 : e;
},
onHomeButton() {
this.tabs.length !== 0 && this.tabs[0]?.context?.focus();
},
onEndButton() {
this.tabs.length !== 0 && this.tabs[this.tabs.length - 1]?.context?.focus();
},
isSameTabClicked() {
let e = this.tabs[this.getFocusedTabIndex()];
return this.provideObj.selected === e.panelId;
}
}
}, f = { "data-qa": "dt-tab-group" }, p = ["aria-label"];
function m(e, t, n, r, i, d) {
return c(), a("div", f, [o("div", s({
ref: "tabs",
class: [
"d-tablist",
i.TAB_LIST_SIZE_MODIFIERS[n.size],
{
[i.TAB_LIST_KIND_MODIFIERS.inverted]: n.inverted,
[i.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: n.borderless
},
n.tabListClass
]
}, n.tabListChildProps, {
role: "tablist",
"aria-label": n.label,
onKeyup: [
t[0] || (t[0] = u((...e) => d.tabLeft && d.tabLeft(...e), ["left"])),
t[1] || (t[1] = u((...e) => d.tabRight && d.tabRight(...e), ["right"])),
t[2] || (t[2] = u((...e) => d.selectTab && d.selectTab(...e), ["enter"])),
t[3] || (t[3] = u((...e) => d.selectTab && d.selectTab(...e), ["space"]))
],
onClick: t[4] || (t[4] = (...e) => d.selectTab && d.selectTab(...e)),
onKeydown: [t[5] || (t[5] = u((...e) => d.onHomeButton && d.onHomeButton(...e), ["home"])), t[6] || (t[6] = u((...e) => d.onEndButton && d.onEndButton(...e), ["end"]))]
}), [l(e.$slots, "tabs")], 16, p), l(e.$slots, "default")]);
}
var h = /* @__PURE__ */ e(d, [["render", m]]);
//#endregion
export { h as default };
//# sourceMappingURL=tab-group.js.map