@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
226 lines (225 loc) • 6.56 kB
JavaScript
import { TAB_LIST_IMPORTANCE_MODIFIERS as i, TAB_LIST_KIND_MODIFIERS as a, TAB_LIST_SIZE_MODIFIERS as r, TAB_LIST_SIZES as d } from "./tabs-constants.js";
import { n as l } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const o = {
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 d.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: r,
TAB_LIST_KIND_MODIFIERS: a,
TAB_LIST_IMPORTANCE_MODIFIERS: i
};
},
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.$el.querySelectorAll(".d-tab")).map((t) => {
var e, n;
return {
context: t,
panelId: (e = t.getAttribute("aria-controls")) == null ? void 0 : e.replace("dt-panel-", ""),
tabId: (n = t.getAttribute("id")) == null ? void 0 : n.replace("dt-tab-", ""),
isSelected: t.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: n } = this.tabs[t];
this.provideObj.selected = n, 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;
}
}
};
var u = function() {
var e = this, n = e._self._c;
return n("div", { attrs: { "data-qa": "dt-tab-group" } }, [n("div", e._b({ class: [
"d-tablist",
e.TAB_LIST_SIZE_MODIFIERS[e.size],
{
[e.TAB_LIST_KIND_MODIFIERS.inverted]: e.inverted,
[e.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: e.borderless
},
e.tabListClass
], attrs: { role: "tablist", "aria-label": e.label }, on: { keyup: [function(s) {
return !s.type.indexOf("key") && e._k(s.keyCode, "left", 37, s.key, ["Left", "ArrowLeft"]) || "button" in s && s.button !== 0 ? null : e.tabLeft.apply(null, arguments);
}, function(s) {
return !s.type.indexOf("key") && e._k(s.keyCode, "right", 39, s.key, ["Right", "ArrowRight"]) || "button" in s && s.button !== 2 ? null : e.tabRight.apply(null, arguments);
}, function(s) {
return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.selectTab.apply(null, arguments);
}, function(s) {
return !s.type.indexOf("key") && e._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : e.selectTab.apply(null, arguments);
}], click: e.selectTab, keydown: [function(s) {
return !s.type.indexOf("key") && e._k(s.keyCode, "home", void 0, s.key, void 0) ? null : e.onHomeButton.apply(null, arguments);
}, function(s) {
return !s.type.indexOf("key") && e._k(s.keyCode, "end", void 0, s.key, void 0) ? null : e.onEndButton.apply(null, arguments);
}] } }, "div", e.tabListChildProps, !1), [e._t("tabs")], 2), e._t("default")], 2);
}, c = [], b = /* @__PURE__ */ l(
o,
u,
c
);
const p = b.exports;
export {
p as default
};
//# sourceMappingURL=tab-group.js.map