sard 1.0.0 → 1.0.2

package/components/table/table.js

@@ -0,0 +1,402 @@
+import { createBem } from "../../utils/bem.js";
+import { isFunction } from "../../utils/is.js";
+import { getLeafNodes, mapTreeToGrid } from "../../utils/tree.js";
+import { useScrollSide } from "../../use/useScrollSide.js";
+import { defaultTableProps, tableContextKey } from "./common.js";
+import { useColumnProvide } from "./useColumn.js";
+import table_col_default from "./table-col.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, provide, reactive, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, vShow, withDirectives } from "vue";
+//#region packages/sard/components/table/table.vue
+const _hoisted_1 = ["rowspan", "colspan"];
+const _hoisted_2 = ["rowspan", "colspan"];
+var table_default = /*@__PURE__*/ defineComponent({
+	__name: "table",
+	props: /*@__PURE__*/ mergeDefaults({
+		columns: {
+			type: Array,
+			required: false
+		},
+		data: {
+			type: Array,
+			required: false
+		},
+		height: {
+			type: [String, Number],
+			required: false
+		},
+		maxHeight: {
+			type: [String, Number],
+			required: false
+		},
+		striped: {
+			type: Boolean,
+			required: false
+		},
+		bordered: {
+			type: Boolean,
+			required: false
+		},
+		underlined: {
+			type: Boolean,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		showHeader: {
+			type: Boolean,
+			required: false
+		},
+		rowClassName: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		},
+		rowStyle: {
+			type: [Object, Function],
+			required: false
+		},
+		cellClassName: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		},
+		cellStyle: {
+			type: [Object, Function],
+			required: false
+		},
+		headerRowClassName: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		},
+		headerRowStyle: {
+			type: [Object, Function],
+			required: false
+		},
+		headerCellClassName: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		},
+		headerCellStyle: {
+			type: [Object, Function],
+			required: false
+		},
+		spanMethod: {
+			type: Function,
+			required: false
+		}
+	}, defaultTableProps),
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("table");
+		provide(tableContextKey, reactive({}));
+		const isFixedStart = (col) => {
+			return col.fixed === true || col.fixed === "start";
+		};
+		const isFixedEnd = (col) => {
+			return col.fixed === "end";
+		};
+		const getAlignStyle = (column, isHeader) => {
+			const style = {};
+			if (column.align) if (isHeader && column.headerAlign) style.textAlign = column.headerAlign;
+			else style.textAlign = column.align;
+			return style;
+		};
+		const processedColumns = computed(() => {
+			const propagateFixed = (cols, parentFixed) => {
+				return cols.map((col) => {
+					const fixed = col.fixed || parentFixed || false;
+					const processed = {
+						...col,
+						fixed
+					};
+					if (col.columns) processed.columns = propagateFixed(col.columns, fixed);
+					return processed;
+				});
+			};
+			return propagateFixed(props.columns);
+		});
+		const headerRows = computed(() => {
+			return mapTreeToGrid(processedColumns.value, (column, rowspan, colspan, left, right) => {
+				return {
+					column,
+					rowspan,
+					colspan,
+					left,
+					right
+				};
+			}, "columns");
+		});
+		const leafColumns = computed(() => {
+			const leafs = getLeafNodes(processedColumns.value, "columns");
+			let firstFixedStart = -1;
+			let lastFixedStart = -1;
+			let firstFixedEnd = -1;
+			leafs.forEach((col, i) => {
+				if (isFixedStart(col)) {
+					if (firstFixedStart === -1) firstFixedStart = i;
+					lastFixedStart = i;
+				} else if (isFixedEnd(col)) {
+					if (firstFixedEnd === -1) firstFixedEnd = i;
+				}
+			});
+			return leafs.map((col, i) => ({
+				...col,
+				fixedFirst: isFixedEnd(col) && i === firstFixedEnd,
+				fixedLast: isFixedStart(col) && i === lastFixedStart
+			}));
+		});
+		const { cols } = useColumnProvide();
+		const bodyCells = computed(() => {
+			const data = props.data || [];
+			const columns = leafColumns.value;
+			const rowCount = data.length;
+			const colCount = columns.length;
+			if (!rowCount || !colCount) return [];
+			if (!props.spanMethod) return data.map((row, ri) => columns.map((col, ci) => ({
+				row,
+				column: col,
+				rowIndex: ri,
+				columnIndex: ci,
+				rowspan: 1,
+				colspan: 1,
+				render: true
+			})));
+			const covered = /* @__PURE__ */ new Set();
+			const result = [];
+			for (let ri = 0; ri < rowCount; ri++) {
+				const rowCells = [];
+				for (let ci = 0; ci < colCount; ci++) {
+					if (covered.has(`${ri},${ci}`)) {
+						rowCells.push({
+							row: data[ri],
+							column: columns[ci],
+							rowIndex: ri,
+							columnIndex: ci,
+							rowspan: 0,
+							colspan: 0,
+							render: false
+						});
+						continue;
+					}
+					let rowspan = 1;
+					let colspan = 1;
+					const span = props.spanMethod({
+						row: data[ri],
+						rowIndex: ri,
+						column: columns[ci],
+						columnIndex: ci
+					});
+					if (Array.isArray(span)) [rowspan, colspan] = span;
+					else if (span) {
+						rowspan = span.rowspan;
+						colspan = span.colspan;
+					}
+					for (let r = ri; r < ri + rowspan && r < rowCount; r++) for (let c = ci; c < ci + colspan && c < colCount; c++) if (r !== ri || c !== ci) covered.add(`${r},${c}`);
+					rowCells.push({
+						row: data[ri],
+						column: columns[ci],
+						rowIndex: ri,
+						columnIndex: ci,
+						rowspan,
+						colspan,
+						render: true
+					});
+				}
+				result.push(rowCells);
+			}
+			return result;
+		});
+		const getHeaderRowClassName = (row, rowIndex) => {
+			return isFunction(props.headerRowClassName) ? props.headerRowClassName({
+				row,
+				rowIndex
+			}) : props.headerRowClassName;
+		};
+		const getHeaderRowStyle = (row, rowIndex) => {
+			return isFunction(props.headerRowStyle) ? props.headerRowStyle({
+				row,
+				rowIndex
+			}) : props.headerRowStyle;
+		};
+		const getHeaderCellStyle = (row, rowIndex, column, columnIndex, left, right) => {
+			const style = {};
+			if (column.fixed) {
+				const isStart = isFixedStart(column);
+				style[isStart ? "insetInlineStart" : "insetInlineEnd"] = (isStart ? cols.slice(0, left) : cols.slice(right)).reduce((total, member) => total + member.width, 0) + "px";
+			}
+			return [
+				style,
+				getAlignStyle(column, true),
+				isFunction(props.headerCellStyle) ? props.headerCellStyle({
+					row,
+					rowIndex,
+					column,
+					columnIndex
+				}) : props.headerCellStyle
+			];
+		};
+		const getHeaderCellClassName = (row, rowIndex, column, columnIndex, left, right) => {
+			const spannedCols = leafColumns.value.slice(left, right);
+			const isFirst = spannedCols.some((col) => col.fixedFirst);
+			const isLast = spannedCols.some((col) => col.fixedLast);
+			const isFixed = spannedCols.some((col) => col.fixed);
+			return [
+				bem.e("cell"),
+				bem.is("first", isFirst),
+				bem.is("last", isLast),
+				bem.is("fixed", isFixed),
+				isFunction(props.headerCellClassName) ? props.headerCellClassName({
+					row,
+					rowIndex,
+					column,
+					columnIndex
+				}) : props.headerCellClassName
+			];
+		};
+		const getBodyRowClassName = (row, rowIndex) => {
+			return isFunction(props.rowClassName) ? props.rowClassName({
+				row,
+				rowIndex
+			}) : props.rowClassName;
+		};
+		const getBodyRowStyle = (row, rowIndex) => {
+			return isFunction(props.rowStyle) ? props.rowStyle({
+				row,
+				rowIndex
+			}) : props.rowStyle;
+		};
+		const getCellStyle = (row, rowIndex, column, columnIndex) => {
+			const style = {};
+			if (column.fixed) {
+				const isStart = isFixedStart(column);
+				style[isStart ? "insetInlineStart" : "insetInlineEnd"] = (isStart ? cols.slice(0, columnIndex) : cols.slice(columnIndex + 1)).reduce((total, member) => total + member.width, 0) + "px";
+			}
+			return [
+				style,
+				getAlignStyle(column),
+				isFunction(props.cellStyle) ? props.cellStyle({
+					row,
+					rowIndex,
+					column,
+					columnIndex
+				}) : props.cellStyle
+			];
+		};
+		const getCellClassName = (row, rowIndex, column, columnIndex) => {
+			return [
+				bem.e("cell"),
+				bem.is("first", column.fixedFirst),
+				bem.is("last", column.fixedLast),
+				bem.is("fixed", column.fixed),
+				isFunction(props.cellClassName) ? props.cellClassName({
+					row,
+					rowIndex,
+					column,
+					columnIndex
+				}) : props.cellClassName
+			];
+		};
+		const scrollSide = useScrollSide(useTemplateRef("scroll"), { direction: "horizontal" });
+		const tableClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("bordered", props.bordered),
+				bem.m("underlined", props.underlined && !props.bordered),
+				bem.m("striped", props.striped),
+				bem.m(props.size, props.size),
+				bem.m("scroll-" + scrollSide.horizontal)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(tableClass.value) }, [createElementVNode("div", { class: normalizeClass(unref(bem).e("wrapper")) }, [createElementVNode("div", {
+				ref: "scroll",
+				class: normalizeClass(unref(bem).e("scroll"))
+			}, [createElementVNode("table", null, [
+				createElementVNode("colgroup", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(leafColumns.value, (column, index) => {
+					return openBlock(), createBlock(table_col_default, {
+						key: index,
+						index,
+						column
+					}, null, 8, ["index", "column"]);
+				}), 128))]),
+				__props.showHeader ? (openBlock(), createElementBlock("thead", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("header"))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(headerRows.value, (row, rowIndex) => {
+					return openBlock(), createElementBlock("tr", {
+						class: normalizeClass(getHeaderRowClassName(row, rowIndex)),
+						style: normalizeStyle(getHeaderRowStyle(row, rowIndex))
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(row, ({ column, rowspan, colspan, left, right }, columnIndex) => {
+						return openBlock(), createElementBlock("th", {
+							key: columnIndex,
+							rowspan,
+							colspan,
+							style: normalizeStyle(getHeaderCellStyle(row, rowIndex, column, columnIndex, left, right)),
+							class: normalizeClass(getHeaderCellClassName(row, rowIndex, column, columnIndex, left, right))
+						}, toDisplayString(column.label), 15, _hoisted_1);
+					}), 128))], 6);
+				}), 256))], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("tbody", { class: normalizeClass(unref(bem).e("body")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (row, rowIndex) => {
+					return openBlock(), createElementBlock("tr", {
+						key: rowIndex,
+						class: normalizeClass(getBodyRowClassName(row, rowIndex)),
+						style: normalizeStyle(getBodyRowStyle(row, rowIndex))
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(bodyCells.value[rowIndex], (cell, columnIndex) => {
+						return withDirectives((openBlock(), createElementBlock("td", {
+							key: columnIndex,
+							rowspan: cell.rowspan || void 0,
+							colspan: cell.colspan || void 0,
+							style: normalizeStyle(getCellStyle(cell.row, cell.rowIndex, cell.column, cell.columnIndex)),
+							class: normalizeClass(getCellClassName(cell.row, cell.rowIndex, cell.column, cell.columnIndex))
+						}, [cell.column.slot && _ctx.$slots[cell.column.slot] ? renderSlot(_ctx.$slots, cell.column.slot, {
+							key: 0,
+							row: cell.row,
+							column: cell.column,
+							rowIndex: cell.rowIndex,
+							columnIndex: cell.columnIndex
+						}) : cell.column.formatter ? (openBlock(), createBlock(resolveDynamicComponent(() => cell.column.formatter({
+							row: cell.row,
+							rowIndex: cell.rowIndex,
+							column: cell.column,
+							columnIndex: cell.columnIndex
+						})), { key: 1 })) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(cell.column.prop && cell.row[cell.column.prop]), 1)], 64))], 14, _hoisted_2)), [[vShow, cell.render]]);
+					}), 128))], 6);
+				}), 128))], 2)
+			])], 2)], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { table_default as default };

package/components/table/useColumn.d.ts

@@ -0,0 +1,17 @@
+import { type InjectionKey } from 'vue';
+import type { TableColProps, TableColumnProps } from './common';
+export interface TableColumnMember<T = any> {
+    width: number;
+    index: number;
+    column: TableColumnProps<T>;
+}
+export interface TableColumnContext<T = any> {
+    members: TableColumnMember<T>[];
+    addMember: (item: TableColumnMember<T>) => void;
+    removeMember: (item: TableColumnMember<T>) => void;
+}
+export declare const tableColumnContextKey: InjectionKey<TableColumnContext>;
+export declare function useColumnProvide<T>(): {
+    cols: import("vue").Reactive<TableColumnMember<T>[]>;
+};
+export declare function useColumnConsume(props: TableColProps): TableColumnMember<any>;

package/components/table/useColumn.js

@@ -0,0 +1,43 @@
+import { inject, onBeforeMount, onBeforeUnmount, provide, reactive, toRef } from "vue";
+//#region packages/sard/components/table/useColumn.ts
+const tableColumnContextKey = Symbol("tableColumnContext");
+function useColumnProvide() {
+	const members = reactive([]);
+	const sort = () => {
+		members.sort((a, b) => a.index - b.index);
+	};
+	provide(tableColumnContextKey, {
+		members,
+		addMember(number) {
+			if (!members.includes(number)) {
+				members.push(number);
+				sort();
+			}
+		},
+		removeMember(member) {
+			const index = members.indexOf(member);
+			if (index !== -1) {
+				members.splice(index, 1);
+				sort();
+			}
+		}
+	});
+	return { cols: members };
+}
+function useColumnConsume(props) {
+	const { addMember, removeMember } = inject(tableColumnContextKey, null);
+	const member = reactive({
+		width: 0,
+		index: toRef(() => props.index),
+		column: toRef(() => props.column)
+	});
+	onBeforeMount(() => {
+		addMember(member);
+	});
+	onBeforeUnmount(() => {
+		removeMember(member);
+	});
+	return member;
+}
+//#endregion
+export { tableColumnContextKey, useColumnConsume, useColumnProvide };

package/components/tabs/common.d.ts

@@ -0,0 +1,39 @@
+import type { InjectionKey } from 'vue';
+import { type DefaultProps } from '../config';
+export interface TabsProps {
+    modelValue?: unknown;
+    options?: TabProps[];
+    type?: 'line' | 'pill' | 'card';
+    scrollable?: boolean;
+}
+export declare const defaultTabsProps: DefaultProps<TabsProps>;
+export interface TabsSlots {
+    default?(): any;
+    line?(): any;
+}
+export interface TabsEmits {
+    (e: 'update:modelValue', value: unknown): void;
+    (e: 'change', value: unknown): void;
+}
+export interface TabProps {
+    label?: string;
+    value: unknown;
+    disabled?: boolean;
+}
+export interface TabSlots {
+    default?(): any;
+}
+export interface TabEmits {
+    (e: 'click', event: MouseEvent): void;
+}
+export interface TabMember {
+    el: HTMLElement;
+    value: unknown;
+}
+export interface TabContext {
+    value: unknown;
+    select: (member: TabMember, initial?: boolean) => void;
+    addMember: (member: TabMember) => void;
+    removeMember: (member: TabMember) => void;
+}
+export declare const tabContextKey: InjectionKey<TabContext>;

package/components/tabs/common.js

@@ -0,0 +1,5 @@
+//#region packages/sard/components/tabs/common.ts
+const defaultTabsProps = { type: "line" };
+const tabContextKey = Symbol("tabContext");
+//#endregion
+export { defaultTabsProps, tabContextKey };

package/components/tabs/index.css

@@ -0,0 +1 @@
+:root{--s-tabs-tab-height:var(--s-content-height);--s-tabs-tab-font-size:var(--s-font-size);--s-tabs-tab-line-height:var(--s-line-height-snug);--s-tabs-tab-color:var(--s-text-color-secondary);--s-tabs-tab-color-active:var(--s-text-color-emphasis);--s-tabs-tab-padding-x:var(--s-size);--s-tabs-pill-tab-height:30px;--s-tabs-pill-tab-bg-current:var(--s-color-primary);--s-tabs-pill-tab-color-current:var(--s-white);--s-tabs-card-tab-height:30px;--s-tabs-card-color-primary:var(--s-color-primary);--s-tabs-card-border-radius:var(--s-border-radius);--s-tabs-line-width:40px;--s-tabs-line-height:3px;--s-tabs-line-bg:var(--s-color-primary);--s-tabs-line-duration:var(--s-duration)}.s-tabs{display:flex;overflow-y:hidden;overflow-x:auto}.s-tabs__wrapper{position:relative;display:inline-flex;flex-wrap:nowrap;min-width:100%}.s-tabs--scrollable .s-tabs__wrapper{min-width:auto}.s-tabs__line{position:absolute;bottom:0;z-index:10;display:flex;justify-content:center;align-items:flex-end;width:var(--s-tabs-line-width);height:var(--s-tabs-line-height);background:var(--s-tabs-line-bg);line-height:1;pointer-events:none;transform:translateX(-50%);transition:left var(--s-tabs-line-duration)}.s-tabs__tab{position:relative;display:flex;z-index:2;flex:1;height:var(--s-tabs-tab-height);justify-content:center;align-items:center;padding:0 var(--s-tabs-tab-padding-x);font-size:var(--s-tabs-tab-font-size);line-height:var(--s-tabs-tab-line-height);color:var(--s-tabs-tab-color);white-space:nowrap;cursor:pointer}.s-tabs__tab:is(.is-active){font-weight:var(--s-font-weight-bold);color:var(--s-tabs-tab-color-active);background:var(--s-tab-bg-active)}.s-tabs__tab:is(.is-disabled){color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-tabs--scrollable .s-tabs__tab{flex:0}.s-tabs--pill .s-tabs__tab{height:var(--s-tabs-pill-tab-height);border-radius:var(--s-border-radius-full)}.s-tabs--pill .s-tabs__tab:is(.is-active){color:var(--s-tabs-pill-tab-color-current);background:var(--s-tabs-pill-tab-bg-current)}.s-tabs--card .s-tabs__tab{height:var(--s-tabs-card-tab-height);border:1px solid var(--s-tabs-card-color-primary);border-inline-start-width:0;color:var(--s-tabs-card-color-primary)}:root:not([dir=rtl]) .s-tabs--card .s-tabs__tab:first-child{border-top-left-radius:var(--s-tabs-card-border-radius);border-bottom-left-radius:var(--s-tabs-card-border-radius)}:root[dir=rtl] .s-tabs--card .s-tabs__tab:first-child{border-top-right-radius:var(--s-tabs-card-border-radius);border-bottom-right-radius:var(--s-tabs-card-border-radius)}.s-tabs--card .s-tabs__tab:first-child{border-inline-start-width:1px}:root:not([dir=rtl]) .s-tabs--card .s-tabs__tab:last-child{border-top-right-radius:var(--s-tabs-card-border-radius);border-bottom-right-radius:var(--s-tabs-card-border-radius)}:root[dir=rtl] .s-tabs--card .s-tabs__tab:last-child{border-top-left-radius:var(--s-tabs-card-border-radius);border-bottom-left-radius:var(--s-tabs-card-border-radius)}.s-tabs--card .s-tabs__tab:is(.is-active){color:var(--s-white);background:var(--s-tabs-card-color-primary)}

package/components/tabs/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _Tabs from './tabs.vue';
+import _Tab from './tab.vue';
+export declare const Tabs: EnhancedComponent<typeof _Tabs>;
+export declare const Tab: EnhancedComponent<typeof _Tab>;
+export default Tabs;
+export type { TabsProps, TabsSlots, TabsEmits, TabProps, TabSlots, TabEmits } from './common';

package/components/tabs/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import tab_default from "./tab.js";
+import tabs_default from "./tabs.js";
+//#region packages/sard/components/tabs/index.ts
+const Tabs = enhanceComponent(tabs_default);
+const Tab = enhanceComponent(tab_default);
+//#endregion
+export { Tab, Tabs, Tabs as default };

package/components/tabs/tab.d.ts

@@ -0,0 +1,15 @@
+import { type TabProps, type TabSlots } from '../tabs/common';
+type __VLS_Slots = TabSlots;
+declare const __VLS_base: import("vue").DefineComponent<TabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TabProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/tabs/tab.js

@@ -0,0 +1,62 @@
+import { createBem } from "../../utils/bem.js";
+import { tabContextKey } from "./common.js";
+import { computed, createElementBlock, createTextVNode, defineComponent, inject, normalizeClass, onMounted, onUnmounted, openBlock, reactive, renderSlot, toDisplayString, toRef, useTemplateRef } from "vue";
+//#region packages/sard/components/tabs/tab.vue
+var tab_default = /*@__PURE__*/ defineComponent({
+	__name: "tab",
+	props: {
+		label: {
+			type: String,
+			required: false
+		},
+		value: {
+			type: null,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("tabs");
+		const context = inject(tabContextKey);
+		if (!context) throw new Error("Tab must be included in Tabs.");
+		const isActive = computed(() => {
+			return context.value === props.value;
+		});
+		const member = reactive({
+			el: useTemplateRef("tab"),
+			value: toRef(() => props.value)
+		});
+		const onClick = (event) => {
+			emit("click", event);
+			if (!props.disabled) context.select(member);
+		};
+		onMounted(() => {
+			context.addMember(member);
+		});
+		onUnmounted(() => {
+			context.removeMember(member);
+		});
+		const tabClass = computed(() => {
+			return [
+				bem.e("tab"),
+				bem.is("active", isActive.value),
+				bem.is("disabled", props.disabled)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "tab",
+				class: normalizeClass(tabClass.value),
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 2);
+		};
+	}
+});
+//#endregion
+export { tab_default as default };

package/components/tabs/tabs.d.ts

@@ -0,0 +1,22 @@
+import { type TabsProps, type TabsSlots } from './common';
+type __VLS_Slots = TabsSlots;
+declare const __VLS_base: import("vue").DefineComponent<TabsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: unknown) => any;
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<TabsProps> & Readonly<{
+    onChange?: ((value: unknown) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+}>, {
+    options: import("./common").TabProps[];
+    type: "line" | "pill" | "card";
+    modelValue: {};
+    scrollable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};