@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
132 lines (131 loc) • 3.03 kB
JavaScript
import { TAB_IMPORTANCE_MODIFIERS } from "./tabs_constants.js";
import { resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withCtx, renderSlot } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
import DtButton from "../button/button.vue.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtTab",
components: {
DtButton
},
inject: ["groupContext", "setFocus"],
inheritAttrs: false,
props: {
/**
* Id of the tab
*/
id: {
type: String,
required: true
},
/**
* Id of the associated content panel
*/
panelId: {
type: String,
required: true
},
/**
* Describes the tab
*/
label: {
type: String,
default: ""
},
/**
* Controls the state of the tab
* @values true, false
*/
selected: {
type: Boolean,
default: false
},
/**
* If true, disables the tab
* @values true, false
*/
disabled: {
type: Boolean,
default: false
},
/**
* Used to customize the tab element
*/
tabClass: {
type: [String, Array, Object],
default: ""
}
},
emits: [
/**
* Native button focus in event
*
* @event focus
* @type {FocusEvent}
*/
"focus",
/**
* Native button click event
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"click"
],
data() {
return {
TAB_IMPORTANCE_MODIFIERS
};
},
computed: {
tabListeners() {
return {
click: (event) => {
this.$emit("click", event);
},
focus: (event) => {
this.setFocus(this.id);
this.$emit("focus", event);
}
};
},
isSelected() {
return this.groupContext.selected === this.panelId;
}
},
mounted() {
if (this.selected) {
this.groupContext.selected = this.panelId;
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_button = resolveComponent("dt-button");
return openBlock(), createBlock(_component_dt_button, mergeProps({
id: `dt-tab-${$props.id}`,
class: [
"d-tab",
{
[$data.TAB_IMPORTANCE_MODIFIERS.selected]: $options.isSelected
},
$props.tabClass
],
role: "tab",
"aria-selected": `${$options.isSelected}`,
"aria-controls": `dt-panel-${$props.panelId}`,
"aria-label": $props.label,
"data-qa": "dt-tab",
tabindex: $options.isSelected ? "0" : "-1",
disabled: $options.groupContext.disabled || $props.disabled
}, _ctx.$attrs, toHandlers($options.tabListeners)), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["id", "class", "aria-selected", "aria-controls", "aria-label", "tabindex", "disabled"]);
}
const DtTab = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtTab as default
};
//# sourceMappingURL=tab.vue.js.map