@v-c/tabs 1.0.1 → 1.1.0-rc.1

package/dist/TabContext.js

@@ -1,4 +1,5 @@
 import { inject, provide } from "vue";
+//#region src/TabContext.ts
 var TabContextKey = Symbol("TabContext");
 function provideTabContext(value) {
 	provide(TabContextKey, value);
@@ -6,4 +7,5 @@ function provideTabContext(value) {
 function useTabContext() {
 	return inject(TabContextKey, {});
 }
+//#endregion
 export { provideTabContext, useTabContext };

package/dist/TabNavList/AddButton.js

@@ -1,3 +1,5 @@
 import AddButton_vue_vue_type_script_setup_true_lang_default from "./AddButton.vue_vue_type_script_setup_true_lang.js";
+//#region src/TabNavList/AddButton.vue
 var AddButton_default = AddButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
 export { AddButton_default as default };

package/dist/TabNavList/AddButton.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, toRefs, unref } from "vue";
 import { RenderComponent } from "@v-c/util";
+//#region src/TabNavList/AddButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
 var AddButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "AddButton",
@@ -32,4 +33,5 @@ var AddButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		};
 	}
 });
+//#endregion
 export { AddButton_vue_vue_type_script_setup_true_lang_default as default };

package/dist/TabNavList/ExtraContent.js

@@ -1,3 +1,5 @@
 import ExtraContent_vue_vue_type_script_setup_true_lang_default from "./ExtraContent.vue_vue_type_script_setup_true_lang.js";
+//#region src/TabNavList/ExtraContent.vue
 var ExtraContent_default = ExtraContent_vue_vue_type_script_setup_true_lang_default;
+//#endregion
 export { ExtraContent_default as default };

package/dist/TabNavList/ExtraContent.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, isVNode, normalizeClass, openBlock, ref, toRefs, unref } from "vue";
 import RenderComponent from "@v-c/util/dist/RenderComponent";
 import { ensureValidVNode } from "@v-c/util/dist/vnode";
+//#region src/TabNavList/ExtraContent.vue?vue&type=script&setup=true&lang.ts
 var ExtraContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ExtraContent",
 	props: {
@@ -46,4 +47,5 @@ var ExtraContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		};
 	}
 });
+//#endregion
 export { ExtraContent_vue_vue_type_script_setup_true_lang_default as default };

package/dist/TabNavList/OperationNode.js

@@ -1,3 +1,5 @@
 import OperationNode_vue_vue_type_script_setup_true_lang_default from "./OperationNode.vue_vue_type_script_setup_true_lang.js";
+//#region src/TabNavList/OperationNode.vue
 var OperationNode_default = OperationNode_vue_vue_type_script_setup_true_lang_default;
+//#endregion
 export { OperationNode_default as default };

package/dist/TabNavList/OperationNode.vue_vue_type_script_setup_true_lang.js

@@ -6,6 +6,7 @@ import RenderComponent$1 from "@v-c/util/dist/RenderComponent";
 import DropDown from "@v-c/dropdown";
 import Menu from "@v-c/menu";
 import KeyCode from "@v-c/util/dist/KeyCode";
+//#region src/TabNavList/OperationNode.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"id",
 	"aria-controls",
@@ -31,7 +32,9 @@ var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		tabMoving: { type: Boolean },
 		getPopupContainer: {},
 		popupClassName: {},
-		popupStyle: {}
+		popupStyle: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -78,7 +81,8 @@ var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					"type": "button",
 					"aria-label": removeAriaLabel.value || "remove",
 					"tabindex": 0,
-					"class": `${dropdownPrefix.value}-menu-item-remove`,
+					"class": clsx(`${dropdownPrefix.value}-menu-item-remove`, props.classNames?.remove),
+					"style": props.styles?.remove,
 					"onClick": (e) => {
 						e.stopPropagation();
 						onRemoveTab(e, key);
@@ -94,12 +98,12 @@ var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		});
 		const moreIconNode = computed(() => moreProps.value?.icon || "More");
 		const moreStyle = computed(() => {
-			const style$1 = { marginInlineStart: tabBarGutter.value ? `${tabBarGutter.value}px` : "0px" };
+			const style = { marginInlineStart: tabBarGutter.value ? `${tabBarGutter.value}px` : "0px" };
 			if (!props.tabs.length) {
-				style$1.visibility = "hidden";
-				style$1.order = 1;
+				style.visibility = "hidden";
+				style.order = 1;
 			}
-			return style$1;
+			return style;
 		});
 		function selectOffset(offset) {
 			const enabledTabs = props.tabs.filter((tab) => !tab.disabled);
@@ -202,4 +206,5 @@ var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		};
 	}
 });
+//#endregion
 export { OperationNode_vue_vue_type_script_setup_true_lang_default as default };

package/dist/TabNavList/TabNode.js

@@ -1,3 +1,5 @@
 import TabNode_vue_vue_type_script_setup_true_lang_default from "./TabNode.vue_vue_type_script_setup_true_lang.js";
+//#region src/TabNavList/TabNode.vue
 var TabNode_default = TabNode_vue_vue_type_script_setup_true_lang_default;
+//#endregion
 export { TabNode_default as default };

package/dist/TabNavList/TabNode.vue_vue_type_script_setup_true_lang.js

@@ -2,6 +2,7 @@ import { genDataNodeKey, getRemovable } from "../utils.js";
 import { computed, createBlock, defineComponent, h, onMounted, openBlock, ref, toRefs, unref, watch } from "vue";
 import RenderComponent from "@v-c/util/dist/RenderComponent";
 import { isEmptyElement } from "@v-c/util/dist/props-util";
+//#region src/TabNavList/TabNode.vue?vue&type=script&setup=true&lang.ts
 var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "TabNode",
 	inheritAttrs: false,
@@ -34,7 +35,9 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		onFocus: { type: Function },
 		onBlur: { type: Function },
 		style: {},
-		className: {}
+		className: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -52,6 +55,7 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const cls = computed(() => [
 			tabPrefix.value,
 			props.className,
+			props.classNames?.item,
 			{
 				[`${tabPrefix.value}-with-remove`]: removable.value,
 				[`${tabPrefix.value}-active`]: active.value,
@@ -59,6 +63,10 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				[`${tabPrefix.value}-focus`]: focus.value
 			}
 		]);
+		const mergedStyle = computed(() => ({
+			...props.styles?.item,
+			...props.style
+		}));
 		function onRemove(event) {
 			event.preventDefault();
 			event.stopPropagation();
@@ -104,7 +112,8 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				"type": "button",
 				"aria-label": props.removeAriaLabel || "remove",
 				"tabindex": active.value ? 0 : -1,
-				"class": [`${tabPrefix.value}-remove`],
+				"class": [`${tabPrefix.value}-remove`, props.classNames?.remove],
+				"style": props.styles?.remove,
 				"onClick": (e) => {
 					e.stopPropagation();
 					onRemove(e);
@@ -114,7 +123,7 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				"key": tab.value.key,
 				"data-node-key": genDataNodeKey(tab.value.key),
 				"class": cls.value,
-				"style": props.style,
+				"style": mergedStyle.value,
 				"onClick": onInternalClick
 			}, children);
 		});
@@ -124,4 +133,5 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		};
 	}
 });
+//#endregion
 export { TabNode_vue_vue_type_script_setup_true_lang_default as default };

package/dist/TabNavList/Wrapper.js

@@ -1,3 +1,5 @@
 import Wrapper_vue_vue_type_script_setup_true_lang_default from "./Wrapper.vue_vue_type_script_setup_true_lang.js";
+//#region src/TabNavList/Wrapper.vue
 var Wrapper_default = Wrapper_vue_vue_type_script_setup_true_lang_default;
+//#endregion
 export { Wrapper_default as default };

package/dist/TabNavList/Wrapper.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import TabNavList_default from "./index.js";
 import { computed, createBlock, defineComponent, h, openBlock, unref } from "vue";
 import RenderComponent from "@v-c/util/dist/RenderComponent";
+//#region src/TabNavList/Wrapper.vue?vue&type=script&setup=true&lang.ts
 var Wrapper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "TabNavListWrapper",
 	inheritAttrs: false,
@@ -49,4 +50,5 @@ var Wrapper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		};
 	}
 });
+//#endregion
 export { Wrapper_vue_vue_type_script_setup_true_lang_default as default };

package/dist/TabNavList/index.js

@@ -1,3 +1,5 @@
 import index_vue_vue_type_script_setup_true_lang_default from "./index.vue_vue_type_script_setup_true_lang.js";
+//#region src/TabNavList/index.vue
 var TabNavList_default = index_vue_vue_type_script_setup_true_lang_default;
+//#endregion
 export { TabNavList_default as default };

package/dist/TabNavList/index.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
 import { useTabContext } from "../TabContext.js";
-import useIndicator_default from "../hooks/useIndicator.js";
+import useIndicator from "../hooks/useIndicator.js";
 import useOffsets from "../hooks/useOffsets.js";
 import useTouchMove from "../hooks/useTouchMove.js";
 import useVisibleRange from "../hooks/useVisibleRange.js";
@@ -8,9 +8,10 @@ import AddButton_default from "./AddButton.js";
 import ExtraContent_default from "./ExtraContent.js";
 import OperationNode_default from "./OperationNode.js";
 import TabNode_default from "./TabNode.js";
-import { computed, createBlock, createElementVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, shallowRef, toRefs, unref, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createElementVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, shallowRef, toRefs, unref, useSlots, watch, withCtx } from "vue";
 import RenderComponent from "@v-c/util/dist/RenderComponent";
 import ResizeObserver from "@v-c/resize-observer";
+//#region src/TabNavList/index.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-orientation"];
 var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "TabNavList",
@@ -51,6 +52,17 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const props = __props;
 		const { className, style, id, animated, activeKey, rtl, extra, editable, locale, tabPosition, tabBarGutter: tabBarGutterProp, children, onTabClick, onTabScroll, indicator, classNames: tabsClassNames, styles, mobile, more, getPopupContainer, popupClassName } = toRefs(props);
 		const tabBarGutter = computed(() => tabBarGutterProp.value ? `${tabBarGutterProp.value}px` : void 0);
+		const slots = useSlots();
+		const defaultSlotWrapper = computed(() => {
+			if (!slots.default) return void 0;
+			return (node) => {
+				const slotResult = slots.default?.(node);
+				if (!slotResult) return node;
+				if (Array.isArray(slotResult)) return slotResult.length ? h(Fragment, null, slotResult) : node;
+				return slotResult;
+			};
+		});
+		const renderWrapper = computed(() => children.value ?? defaultSlotWrapper.value);
 		const ctx = useTabContext();
 		const tabs = computed(() => ctx?.value.tabs || []);
 		const prefixCls = computed(() => ctx?.value.prefixCls || "");
@@ -77,8 +89,11 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const tabOffsets = useOffsets(tabs, tabSizes, firstTabContentSize);
 		const operationsRef = ref(null);
 		const innerAddButtonRef = ref(null);
-		function getUnitValue(size, tabPositionTopOrBottom$1) {
-			return size[tabPositionTopOrBottom$1 ? 0 : 1];
+		/**
+		* Convert `SizeInfo` to unit value. Such as [123, 456] with `top` position get `123`
+		*/
+		function getUnitValue(size, tabPositionTopOrBottom) {
+			return size[tabPositionTopOrBottom ? 0 : 1];
 		}
 		const containerExcludeExtraSizeValue = computed(() => getUnitValue(containerExcludeExtraSize.value, tabPositionTopOrBottom.value));
 		const tabContentSizeValue = computed(() => getUnitValue(tabContentSize.value, tabPositionTopOrBottom.value));
@@ -285,7 +300,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			if (!rtl.value) wrap.scrollLeft = 0;
 			wrap.scrollTop = 0;
 		}
-		const inkStyle = useIndicator_default({
+		const inkStyle = useIndicator({
 			activeTabOffset: computed(() => tabOffsets.value.get(activeKey.value)),
 			horizontal: isHorizontal,
 			indicator,
@@ -414,15 +429,20 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 									key: tab.key,
 									tab,
 									className: unref(tabsClassNames)?.item,
-									style: i === 0 ? unref(styles)?.item : {
-										...isHorizontal.value ? { marginInlineStart: tabBarGutter.value } : { marginTop: tabBarGutter.value },
-										...unref(styles)?.item || {}
+									style: i === 0 ? void 0 : isHorizontal.value ? { marginInlineStart: tabBarGutter.value } : { marginTop: tabBarGutter.value },
+									classNames: {
+										item: unref(tabsClassNames)?.item,
+										remove: unref(tabsClassNames)?.remove
+									},
+									styles: {
+										item: unref(styles)?.item,
+										remove: unref(styles)?.remove
 									},
 									closable: tab.closable,
 									editable: unref(editable),
 									active: tab.key === unref(activeKey),
 									focus: tab.key === focusKey.value,
-									renderWrapper: unref(children),
+									renderWrapper: renderWrapper.value,
 									removeAriaLabel: unref(locale)?.removeAriaLabel,
 									tabCount: tabs.value.filter((t) => !t.disabled).length,
 									currentPosition: i + 1,
@@ -475,7 +495,9 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						tabs: hiddenTabs.value,
 						"class-name": [unref(tabsClassNames)?.operations, !hasDropdown.value ? operationsHiddenClassName.value : void 0],
 						"popup-style": unref(styles)?.popup,
-						"tab-moving": !!lockAnimation.value
+						"tab-moving": !!lockAnimation.value,
+						"class-names": { remove: unref(tabsClassNames)?.remove },
+						styles: { remove: unref(styles)?.remove }
 					}, {
 						id: unref(id),
 						rtl: unref(rtl),
@@ -494,7 +516,9 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						"tabs",
 						"class-name",
 						"popup-style",
-						"tab-moving"
+						"tab-moving",
+						"class-names",
+						"styles"
 					]),
 					createVNode(ExtraContent_default, {
 						ref_key: "extraRightRef",
@@ -502,12 +526,12 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						position: "right",
 						"prefix-cls": prefixCls.value,
 						extra: unref(extra)
-					}, null, 8, ["prefix-cls", "extra"]),
-					createVNode(unref(RenderComponent), { render: unref(children) }, null, 8, ["render"])
+					}, null, 8, ["prefix-cls", "extra"])
 				], 46, _hoisted_1)]),
 				_: 1
 			});
 		};
 	}
 });
+//#endregion
 export { index_vue_vue_type_script_setup_true_lang_default as default };

package/dist/TabPanelList/TabPane.js

@@ -1,3 +1,5 @@
 import TabPane_vue_vue_type_script_setup_true_lang_default from "./TabPane.vue_vue_type_script_setup_true_lang.js";
+//#region src/TabPanelList/TabPane.vue
 var TabPane_default = TabPane_vue_vue_type_script_setup_true_lang_default;
+//#endregion
 export { TabPane_default as default };

package/dist/TabPanelList/TabPane.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { computed, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, unref, useSlots } from "vue";
 import RenderComponent from "@v-c/util/dist/RenderComponent";
 import { ensureValidVNode } from "@v-c/util/dist/vnode";
+//#region src/TabPanelList/TabPane.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"id",
 	"tabindex",
@@ -80,4 +81,5 @@ var TabPane_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		};
 	}
 });
+//#endregion
 export { TabPane_vue_vue_type_script_setup_true_lang_default as default };

package/dist/TabPanelList/index.js

@@ -1,3 +1,5 @@
 import index_vue_vue_type_script_setup_true_lang_default from "./index.vue_vue_type_script_setup_true_lang.js";
+//#region src/TabPanelList/index.vue
 var TabPanelList_default = index_vue_vue_type_script_setup_true_lang_default;
+//#endregion
 export { TabPanelList_default as default };

package/dist/TabPanelList/index.vue_vue_type_script_setup_true_lang.js

@@ -3,6 +3,7 @@ import TabPane_default from "./TabPane.js";
 import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, toRefs, unref, vShow, withCtx, withDirectives } from "vue";
 import RenderComponent from "@v-c/util/dist/RenderComponent";
 import { getTransitionProps } from "@v-c/util/dist/utils/transition";
+//#region src/TabPanelList/index.vue?vue&type=script&setup=true&lang.ts
 var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "index",
 	props: {
@@ -100,4 +101,5 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		};
 	}
 });
+//#endregion
 export { index_vue_vue_type_script_setup_true_lang_default as default };

package/dist/Tabs.js

@@ -1,3 +1,5 @@
 import Tabs_vue_vue_type_script_setup_true_lang_default from "./Tabs.vue_vue_type_script_setup_true_lang.js";
+//#region src/Tabs.vue
 var Tabs_default = Tabs_vue_vue_type_script_setup_true_lang_default;
+//#endregion
 export { Tabs_default as default };

package/dist/Tabs.vue_vue_type_script_setup_true_lang.js

@@ -8,6 +8,7 @@ import { clsx } from "@v-c/util";
 import useMergedState from "@v-c/util/dist/hooks/useMergedState";
 import isMobile from "@v-c/util/dist/isMobile";
 import omit from "@v-c/util/dist/omit";
+//#region src/Tabs.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["id"];
 var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "Tabs",
@@ -186,4 +187,5 @@ var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		};
 	}
 });
+//#endregion
 export { Tabs_vue_vue_type_script_setup_true_lang_default as default };

package/dist/hooks/useAnimateConfig.js

@@ -1,4 +1,5 @@
 import { warning } from "@v-c/util/dist/warning";
+//#region src/hooks/useAnimateConfig.ts
 function useAnimateConfig(animated = {
 	inkBar: true,
 	tabPane: false
@@ -23,4 +24,5 @@ function useAnimateConfig(animated = {
 	}
 	return mergedAnimated;
 }
+//#endregion
 export { useAnimateConfig as default };

package/dist/hooks/useIndicator.js

@@ -1,5 +1,6 @@
 import { nextTick, onUnmounted, ref, watch } from "vue";
 import raf from "@v-c/util/dist/raf";
+//#region src/hooks/useIndicator.ts
 function useIndicator(options) {
 	const { activeTabOffset, horizontal, rtl, indicator } = options;
 	const inkStyle = ref();
@@ -61,5 +62,5 @@ function useIndicator(options) {
 	});
 	return inkStyle;
 }
-var useIndicator_default = useIndicator;
-export { useIndicator_default as default };
+//#endregion
+export { useIndicator as default };

package/dist/hooks/useOffsets.js

@@ -1,4 +1,5 @@
 import { shallowRef, watch } from "vue";
+//#region src/hooks/useOffsets.ts
 var DEFAULT_SIZE = {
 	width: 0,
 	height: 0,
@@ -34,4 +35,5 @@ function useOffsets(tabs, tabSizes, holderScrollWidth) {
 	}, { immediate: true });
 	return mapRef;
 }
+//#endregion
 export { useOffsets as default };

package/dist/hooks/useTouchMove.js

@@ -1,4 +1,5 @@
 import { onMounted, onUnmounted, ref } from "vue";
+//#region src/hooks/useTouchMove.ts
 var MIN_SWIPE_DISTANCE = .1;
 var STOP_SWIPE_DISTANCE = .01;
 var REFRESH_INTERVAL = 20;
@@ -45,9 +46,7 @@ function useTouchMove(elRef, onOffset) {
 		if (lo) {
 			const distanceX = lo.x / (lastTimeDiff.value || 1);
 			const distanceY = lo.y / (lastTimeDiff.value || 1);
-			const absX = Math.abs(distanceX);
-			const absY = Math.abs(distanceY);
-			if (Math.max(absX, absY) < MIN_SWIPE_DISTANCE) return;
+			if (Math.max(Math.abs(distanceX), Math.abs(distanceY)) < MIN_SWIPE_DISTANCE) return;
 			let currentX = distanceX;
 			let currentY = distanceY;
 			motionRef.value = window.setInterval(() => {
@@ -114,4 +113,5 @@ function useTouchMove(elRef, onOffset) {
 		});
 	});
 }
+//#endregion
 export { useTouchMove as default };

package/dist/hooks/useVisibleRange.js

@@ -1,4 +1,5 @@
 import { computed, shallowRef, watch } from "vue";
+//#region src/hooks/useVisibleRange.ts
 var DEFAULT_SIZE = {
 	width: 0,
 	height: 0,
@@ -46,4 +47,5 @@ function useVisibleRange(tabOffsets, visibleTabContentValue, transform, tabConte
 	}, { immediate: true });
 	return rangeRef;
 }
+//#endregion
 export { useVisibleRange as default };

package/dist/index.js

@@ -1,3 +1,5 @@
 import Tabs_default from "./Tabs.js";
+//#region src/index.ts
 var src_default = Tabs_default;
+//#endregion
 export { src_default as default };

package/dist/interface.d.ts

@@ -84,6 +84,8 @@ export interface OperationNodeProps {
     getPopupContainer?: (node: HTMLElement) => HTMLElement;
     popupClassName?: string;
     popupStyle?: CSSProperties;
+    classNames?: Partial<Record<'remove', string>>;
+    styles?: Partial<Record<'remove', CSSProperties>>;
 }
 export interface TabNodeProps {
     id: string | null;
@@ -107,10 +109,12 @@ export interface TabNodeProps {
     onBlur: FocusEventHandler;
     style?: CSSProperties;
     className?: string;
+    classNames?: Partial<Record<'item' | 'remove', string>>;
+    styles?: Partial<Record<'item' | 'remove', CSSProperties>>;
 }
 export type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 export type GetIndicatorSize = number | ((origin: number) => number);
-export type SemanticName = string;
+export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header' | 'remove';
 export type RenderTabBar = (props: Record<string, any>, TabNavListComponent: any) => VueNode;
 export interface IndicatorConfig {
     size?: GetIndicatorSize;

package/dist/utils.js

@@ -1,11 +1,16 @@
 import { isEmptyElement } from "@v-c/util/dist/props-util";
-const tabsGlobal = { uuid: 0 };
+//#region src/utils.ts
+var tabsGlobal = { uuid: 0 };
 function setUUid(uuid) {
 	tabsGlobal.uuid = uuid;
 }
 function getUUid() {
 	return tabsGlobal.uuid;
 }
+/**
+* We trade Map as deps which may change with same value but different ref object.
+* We should make it as hash for deps
+*/
 function stringify(obj) {
 	let tgt;
 	if (obj instanceof Map) {
@@ -24,4 +29,5 @@ var VC_TABS_DOUBLE_QUOTE = "TABS_DQ";
 function genDataNodeKey(key) {
 	return String(key).replace(/"/g, VC_TABS_DOUBLE_QUOTE);
 }
+//#endregion
 export { genDataNodeKey, getRemovable, getUUid, setUUid, stringify, tabsGlobal };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/tabs",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.1.0-rc.1",
   "description": "tabs ui component for react",
   "publishConfig": {
     "access": "public"
@@ -32,11 +32,11 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/menu": "^1.0.7",
+    "@v-c/menu": "^1.1.0-rc.1",
     "@v-c/dropdown": "^1.0.2",
-    "@v-c/overflow": "^1.0.3",
     "@v-c/resize-observer": "^1.0.8",
-    "@v-c/util": "^1.0.9"
+    "@v-c/overflow": "^1.0.5",
+    "@v-c/util": "^1.0.19"
   },
   "scripts": {
     "build": "vite build",