@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
242 lines (241 loc) • 7.14 kB
JavaScript
import { TAB_LIST_SIZES, TAB_LIST_SIZE_MODIFIERS, TAB_LIST_KIND_MODIFIERS, TAB_LIST_IMPORTANCE_MODIFIERS } from "./tabs_constants.js";
import { openBlock, createElementBlock, createElementVNode, mergeProps, withKeys, renderSlot } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
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: false
},
/**
* If true, applies inverted styles to the tab group
* @values true, false
*/
inverted: {
type: Boolean,
default: false
},
/**
* If true, applies borderless styles to the tab group
* @values true, false
*/
borderless: {
type: Boolean,
default: false
},
/**
* If provided, applies size styles to the tab group
* @values default, sm
*/
size: {
type: String,
default: "default",
validate(size) {
return TAB_LIST_SIZES.includes(size);
}
},
/**
* 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: false
// disable group
},
focusId: null,
tabs: [],
TAB_LIST_SIZE_MODIFIERS,
TAB_LIST_KIND_MODIFIERS,
TAB_LIST_IMPORTANCE_MODIFIERS
};
},
watch: {
disabled: {
immediate: true,
handler() {
this.provideObj.disabled = this.disabled;
}
},
selected: {
immediate: true,
handler() {
this.provideObj.selected = this.selected;
}
}
},
mounted() {
this.updateSelected();
},
beforeUpdate() {
this.updateSelected();
},
methods: {
updateSelected() {
if (!this.provideObj.selected) {
this.provideObj.selected = this.selected;
}
this.tabs = this.getTabChildren();
},
setFocus(focusId) {
this.focusId = focusId;
},
getTabChildren() {
const tabs = Array.from(this.$refs.tabs.querySelectorAll(".d-tab"));
return tabs.map((el) => {
var _a, _b;
return {
context: el,
panelId: (_a = el.getAttribute("aria-controls")) == null ? void 0 : _a.replace("dt-panel-", ""),
tabId: (_b = el.getAttribute("id")) == null ? void 0 : _b.replace("dt-tab-", ""),
isSelected: el.getAttribute("aria-selected") === "true"
};
});
},
onChange() {
this.$emit("change", { ...this.provideObj });
},
tabLeft() {
const index = this.getFocusedTabIndex();
if (index === -1) return;
const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;
this.selectFocusOnTab(indexElement);
},
tabRight() {
const index = this.getFocusedTabIndex();
if (index === -1) return;
const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;
this.selectFocusOnTab(indexElement);
},
selectFocusOnTab(index) {
const { context } = this.tabs[index];
context.focus();
},
selectTab(event) {
if (this.isSameTabClicked()) return;
this.$emit("before-change", event);
if (event.defaultPrevented) return;
const index = this.getFocusedTabIndex();
this.selectTabByIndex(index);
this.onChange();
},
selectTabByIndex(index) {
const { context, panelId } = this.tabs[index];
this.provideObj.selected = panelId;
context.focus();
},
getFocusedTabIndex() {
return this.tabs.findIndex((context) => this.focusId ? context.tabId === `${this.focusId}` : context.isSelected);
},
onHomeButton() {
var _a, _b;
if (this.tabs.length === 0) return;
(_b = (_a = this.tabs[0]) == null ? void 0 : _a.context) == null ? void 0 : _b.focus();
},
onEndButton() {
var _a, _b;
if (this.tabs.length === 0) return;
(_b = (_a = this.tabs[this.tabs.length - 1]) == null ? void 0 : _a.context) == null ? void 0 : _b.focus();
},
isSameTabClicked() {
const tab = this.tabs[this.getFocusedTabIndex()];
return this.provideObj.selected === tab.panelId;
}
}
};
const _hoisted_1 = { "data-qa": "dt-tab-group" };
const _hoisted_2 = ["aria-label"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", mergeProps({
ref: "tabs",
class: [
"d-tablist",
$data.TAB_LIST_SIZE_MODIFIERS[$props.size],
{
[$data.TAB_LIST_KIND_MODIFIERS.inverted]: $props.inverted,
[$data.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: $props.borderless
},
$props.tabListClass
]
}, $props.tabListChildProps, {
role: "tablist",
"aria-label": $props.label,
onKeyup: [
_cache[0] || (_cache[0] = withKeys((...args) => $options.tabLeft && $options.tabLeft(...args), ["left"])),
_cache[1] || (_cache[1] = withKeys((...args) => $options.tabRight && $options.tabRight(...args), ["right"])),
_cache[2] || (_cache[2] = withKeys((...args) => $options.selectTab && $options.selectTab(...args), ["enter"])),
_cache[3] || (_cache[3] = withKeys((...args) => $options.selectTab && $options.selectTab(...args), ["space"]))
],
onClick: _cache[4] || (_cache[4] = (...args) => $options.selectTab && $options.selectTab(...args)),
onKeydown: [
_cache[5] || (_cache[5] = withKeys((...args) => $options.onHomeButton && $options.onHomeButton(...args), ["home"])),
_cache[6] || (_cache[6] = withKeys((...args) => $options.onEndButton && $options.onEndButton(...args), ["end"]))
]
}), [
renderSlot(_ctx.$slots, "tabs")
], 16, _hoisted_2),
renderSlot(_ctx.$slots, "default")
]);
}
const DtTabGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtTabGroup as default
};
//# sourceMappingURL=tab_group.vue.js.map