@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
233 lines (232 loc) • 6.4 kB
JavaScript
import { TAB_LIST_IMPORTANCE_MODIFIERS as b, TAB_LIST_KIND_MODIFIERS as o, TAB_LIST_SIZE_MODIFIERS as u, TAB_LIST_SIZES as c } from "./tabs-constants.js";
import { createElementBlock as h, openBlock as f, createElementVNode as I, renderSlot as r, mergeProps as T, withKeys as i } from "vue";
import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const m = {
compatConfig: { MODE: 3 },
name: "DtTabGroup",
provide() {
return {
groupContext: this.provideObj,
setFocus: this.setFocus
};
},
props: {
/**
* Identifies the tab group
*/
label: {
type: String,
default: ""
},
/**
* The id of the selected tab panel which should be displayed
*/
selected: {
type: String,
default: ""
},
/**
* If true, disables the tab group
* @values true, false
*/
disabled: {
type: Boolean,
default: !1
},
/**
* If true, applies inverted styles to the tab group
* @values true, false
*/
inverted: {
type: Boolean,
default: !1
},
/**
* If true, applies borderless styles to the tab group
* @values true, false
*/
borderless: {
type: Boolean,
default: !1
},
/**
* If provided, applies size styles to the tab group
* @values default, sm
*/
size: {
type: String,
default: "default",
validate(t) {
return c.includes(t);
}
},
/**
* Pass through classes, used to customize the tab list
*/
tabListClass: {
type: [String, Array, Object],
default: ""
},
/**
* Pass through props, used to customize the tab list
*/
tabListChildProps: {
type: Object,
default: () => ({})
}
},
emits: [
/**
* Change tab event with the arguments: selected id of the current tab and disabled value
*
* @event change
* @type {Object}
*/
"change",
/**
* Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.
*
* @event before-change
* @type {Event}
*/
"before-change"
],
data() {
return {
provideObj: {
selected: "",
// the currently displayed tab id
disabled: !1
// disable group
},
focusId: null,
tabs: [],
TAB_LIST_SIZE_MODIFIERS: u,
TAB_LIST_KIND_MODIFIERS: o,
TAB_LIST_IMPORTANCE_MODIFIERS: b
};
},
watch: {
disabled: {
immediate: !0,
handler() {
this.provideObj.disabled = this.disabled;
}
},
selected: {
immediate: !0,
handler() {
this.provideObj.selected = this.selected;
}
}
},
mounted() {
this.updateSelected();
},
beforeUpdate() {
this.updateSelected();
},
methods: {
updateSelected() {
this.provideObj.selected || (this.provideObj.selected = this.selected), this.tabs = this.getTabChildren();
},
setFocus(t) {
this.focusId = t;
},
getTabChildren() {
return Array.from(this.$refs.tabs.querySelectorAll(".d-tab")).map((e) => {
var d, n;
return {
context: e,
panelId: (d = e.getAttribute("aria-controls")) == null ? void 0 : d.replace("dt-panel-", ""),
tabId: (n = e.getAttribute("id")) == null ? void 0 : n.replace("dt-tab-", ""),
isSelected: e.getAttribute("aria-selected") === "true"
};
});
},
onChange() {
this.$emit("change", { ...this.provideObj });
},
tabLeft() {
const t = this.getFocusedTabIndex();
if (t === -1) return;
const e = t - 1 < 0 ? this.tabs.length - 1 : t - 1;
this.selectFocusOnTab(e);
},
tabRight() {
const t = this.getFocusedTabIndex();
if (t === -1) return;
const e = t + 1 > this.tabs.length - 1 ? 0 : t + 1;
this.selectFocusOnTab(e);
},
selectFocusOnTab(t) {
const { context: e } = this.tabs[t];
e.focus();
},
selectTab(t) {
if (this.isSameTabClicked() || (this.$emit("before-change", t), t.defaultPrevented)) return;
const e = this.getFocusedTabIndex();
this.selectTabByIndex(e), this.onChange();
},
selectTabByIndex(t) {
const { context: e, panelId: d } = this.tabs[t];
this.provideObj.selected = d, e.focus();
},
getFocusedTabIndex() {
const t = this.tabs.findIndex(
(e) => this.focusId ? e.tabId === `${this.focusId}` : e.isSelected
);
return t === -1 ? 0 : t;
},
onHomeButton() {
var t, e;
this.tabs.length !== 0 && ((e = (t = this.tabs[0]) == null ? void 0 : t.context) == null || e.focus());
},
onEndButton() {
var t, e;
this.tabs.length !== 0 && ((e = (t = this.tabs[this.tabs.length - 1]) == null ? void 0 : t.context) == null || e.focus());
},
isSameTabClicked() {
const t = this.tabs[this.getFocusedTabIndex()];
return this.provideObj.selected === t.panelId;
}
}
}, S = { "data-qa": "dt-tab-group" }, p = ["aria-label"];
function O(t, e, d, n, l, s) {
return f(), h("div", S, [
I("div", T({
ref: "tabs",
class: [
"d-tablist",
l.TAB_LIST_SIZE_MODIFIERS[d.size],
{
[l.TAB_LIST_KIND_MODIFIERS.inverted]: d.inverted,
[l.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: d.borderless
},
d.tabListClass
]
}, d.tabListChildProps, {
role: "tablist",
"aria-label": d.label,
onKeyup: [
e[0] || (e[0] = i((...a) => s.tabLeft && s.tabLeft(...a), ["left"])),
e[1] || (e[1] = i((...a) => s.tabRight && s.tabRight(...a), ["right"])),
e[2] || (e[2] = i((...a) => s.selectTab && s.selectTab(...a), ["enter"])),
e[3] || (e[3] = i((...a) => s.selectTab && s.selectTab(...a), ["space"]))
],
onClick: e[4] || (e[4] = (...a) => s.selectTab && s.selectTab(...a)),
onKeydown: [
e[5] || (e[5] = i((...a) => s.onHomeButton && s.onHomeButton(...a), ["home"])),
e[6] || (e[6] = i((...a) => s.onEndButton && s.onEndButton(...a), ["end"]))
]
}), [
r(t.$slots, "tabs")
], 16, p),
r(t.$slots, "default")
]);
}
const F = /* @__PURE__ */ g(m, [["render", O]]);
export {
F as default
};
//# sourceMappingURL=tab-group.js.map