@dialpad/dialtone/dist/vue3/lib/tab/tab.js

Dialpad's Dialtone design system monorepo

import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import t from "../button/button.js";
import { TAB_IMPORTANCE_MODIFIERS as n } from "./tabs-constants.js";
import { createBlock as r, mergeProps as i, openBlock as a, renderSlot as o, resolveComponent as s, toHandlers as c, withCtx as l } from "vue";
//#region components/tab/tab.vue
var u = {
	compatConfig: { MODE: 3 },
	name: "DtTab",
	components: { DtButton: t },
	inject: ["groupContext", "setFocus"],
	inheritAttrs: !1,
	props: {
		id: {
			type: String,
			required: !0
		},
		panelId: {
			type: String,
			required: !0
		},
		label: {
			type: String,
			default: ""
		},
		selected: {
			type: Boolean,
			default: !1
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		tabClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		}
	},
	emits: ["focus", "click"],
	data() {
		return { TAB_IMPORTANCE_MODIFIERS: n };
	},
	computed: {
		tabListeners() {
			return {
				click: (e) => {
					this.$emit("click", e);
				},
				focus: (e) => {
					this.setFocus(this.id), this.$emit("focus", e);
				}
			};
		},
		isSelected() {
			return this.groupContext.selected === this.panelId;
		}
	},
	mounted() {
		this.selected && (this.groupContext.selected = this.panelId);
	}
};
function d(e, t, n, u, d, f) {
	let p = s("dt-button");
	return a(), r(p, i({
		id: `dt-tab-${n.id}`,
		class: [
			"d-tab",
			{ [d.TAB_IMPORTANCE_MODIFIERS.selected]: f.isSelected },
			n.tabClass
		],
		role: "tab",
		"aria-selected": `${f.isSelected}`,
		"aria-controls": `dt-panel-${n.panelId}`,
		"aria-label": n.label,
		"data-qa": "dt-tab",
		tabindex: f.isSelected ? "0" : "-1",
		disabled: f.groupContext.disabled || n.disabled
	}, e.$attrs, c(f.tabListeners)), {
		default: l(() => [o(e.$slots, "default")]),
		_: 3
	}, 16, [
		"id",
		"class",
		"aria-selected",
		"aria-controls",
		"aria-label",
		"tabindex",
		"disabled"
	]);
}
var f = /* @__PURE__ */ e(u, [["render", d]]);
//#endregion
export { f as default };

//# sourceMappingURL=tab.js.map