@v-c/tabs 0.0.2

package/dist/TabPanelList/index.js

@@ -0,0 +1,3 @@
+import index_vue_vue_type_script_setup_true_lang_default from "./index.vue_vue_type_script_setup_true_lang.js";
+var TabPanelList_default = index_vue_vue_type_script_setup_true_lang_default;
+export { TabPanelList_default as default };

package/dist/TabPanelList/index.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,105 @@
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_TabContext = require("../TabContext.cjs");
+const require_TabPane = require("./TabPane.cjs");
+let vue = require("vue");
+let __v_c_util_dist_RenderComponent = require("@v-c/util/dist/RenderComponent");
+__v_c_util_dist_RenderComponent = require_rolldown_runtime.__toESM(__v_c_util_dist_RenderComponent);
+let __v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
+var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "index",
+	props: {
+		activeKey: {},
+		id: {},
+		animated: {},
+		tabPosition: {},
+		destroyOnHidden: { type: Boolean },
+		contentStyle: {},
+		contentClassName: {}
+	},
+	setup(__props) {
+		const { id, activeKey, animated, tabPosition, destroyOnHidden, contentStyle, contentClassName } = (0, vue.toRefs)(__props);
+		const ctx = require_TabContext.useTabContext();
+		const tabs = (0, vue.computed)(() => ctx?.value.tabs || []);
+		const prefixCls = (0, vue.computed)(() => ctx?.value.prefixCls || "");
+		const tabPaneAnimated = (0, vue.computed)(() => animated.value?.tabPane === true);
+		const tabPanePrefixCls = (0, vue.computed)(() => `${prefixCls.value}-tabpane`);
+		const transitionProps = (0, vue.computed)(() => {
+			if (!tabPaneAnimated.value) return {};
+			if (animated.value?.tabPaneMotion) return animated.value.tabPaneMotion;
+			return (0, __v_c_util_dist_utils_transition.getTransitionProps)(tabPanePrefixCls.value);
+		});
+		function shouldDestroyOnHidden(item) {
+			return !!(!item.forceRender && (destroyOnHidden.value ?? item.destroyOnHidden) === true);
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)([`${prefixCls.value}-content-holder`]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([
+				`${prefixCls.value}-content`,
+				`${prefixCls.value}-content-${(0, vue.unref)(tabPosition)}`,
+				{ [`${prefixCls.value}-content-animated`]: tabPaneAnimated.value }
+			]) }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(tabs.value, (item) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: item.key }, [tabPaneAnimated.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Transition, (0, vue.mergeProps)({
+					key: 0,
+					ref_for: true
+				}, transitionProps.value), {
+					default: (0, vue.withCtx)(() => [(shouldDestroyOnHidden(item) ? item.key === (0, vue.unref)(activeKey) : true) ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)(require_TabPane.default, {
+						key: 0,
+						id: (0, vue.unref)(id),
+						"prefix-cls": tabPanePrefixCls.value,
+						"tab-key": item.key,
+						animated: tabPaneAnimated.value,
+						active: item.key === (0, vue.unref)(activeKey),
+						style: (0, vue.normalizeStyle)({
+							...(0, vue.unref)(contentStyle) || {},
+							...item.style || {}
+						}),
+						"class-name": [
+							(0, vue.unref)(contentClassName),
+							item.className,
+							item.key !== (0, vue.unref)(activeKey) && `${tabPanePrefixCls.value}-hidden`
+						]
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(__v_c_util_dist_RenderComponent.default), { render: item.children }, null, 8, ["render"])]),
+						_: 2
+					}, 1032, [
+						"id",
+						"prefix-cls",
+						"tab-key",
+						"animated",
+						"active",
+						"style",
+						"class-name"
+					])), [[vue.vShow, shouldDestroyOnHidden(item) ? true : item.key === (0, vue.unref)(activeKey) || item.forceRender]]) : (0, vue.createCommentVNode)("", true)]),
+					_: 2
+				}, 1040)) : (0, vue.createCommentVNode)("", true), !tabPaneAnimated.value && (shouldDestroyOnHidden(item) ? item.key === (0, vue.unref)(activeKey) : true) ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createBlock)(require_TabPane.default, {
+					key: 1,
+					id: (0, vue.unref)(id),
+					"prefix-cls": tabPanePrefixCls.value,
+					"tab-key": item.key,
+					animated: tabPaneAnimated.value,
+					active: item.key === (0, vue.unref)(activeKey),
+					style: (0, vue.normalizeStyle)({
+						...(0, vue.unref)(contentStyle) || {},
+						...item.style || {}
+					}),
+					"class-name": [
+						(0, vue.unref)(contentClassName),
+						item.className,
+						item.key !== (0, vue.unref)(activeKey) && `${tabPanePrefixCls.value}-hidden`
+					]
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(__v_c_util_dist_RenderComponent.default), { render: item.children }, null, 8, ["render"])]),
+					_: 2
+				}, 1032, [
+					"id",
+					"prefix-cls",
+					"tab-key",
+					"animated",
+					"active",
+					"style",
+					"class-name"
+				])), [[vue.vShow, shouldDestroyOnHidden(item) ? true : item.key === (0, vue.unref)(activeKey) || item.forceRender]]) : (0, vue.createCommentVNode)("", true)], 64);
+			}), 128))], 2)], 2);
+		};
+	}
+});
+exports.default = index_vue_vue_type_script_setup_true_lang_default;

package/dist/TabPanelList/index.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,103 @@
+import { useTabContext } from "../TabContext.js";
+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";
+var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "index",
+	props: {
+		activeKey: {},
+		id: {},
+		animated: {},
+		tabPosition: {},
+		destroyOnHidden: { type: Boolean },
+		contentStyle: {},
+		contentClassName: {}
+	},
+	setup(__props) {
+		const { id, activeKey, animated, tabPosition, destroyOnHidden, contentStyle, contentClassName } = toRefs(__props);
+		const ctx = useTabContext();
+		const tabs = computed(() => ctx?.value.tabs || []);
+		const prefixCls = computed(() => ctx?.value.prefixCls || "");
+		const tabPaneAnimated = computed(() => animated.value?.tabPane === true);
+		const tabPanePrefixCls = computed(() => `${prefixCls.value}-tabpane`);
+		const transitionProps = computed(() => {
+			if (!tabPaneAnimated.value) return {};
+			if (animated.value?.tabPaneMotion) return animated.value.tabPaneMotion;
+			return getTransitionProps(tabPanePrefixCls.value);
+		});
+		function shouldDestroyOnHidden(item) {
+			return !!(!item.forceRender && (destroyOnHidden.value ?? item.destroyOnHidden) === true);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([`${prefixCls.value}-content-holder`]) }, [createElementVNode("div", { class: normalizeClass([
+				`${prefixCls.value}-content`,
+				`${prefixCls.value}-content-${unref(tabPosition)}`,
+				{ [`${prefixCls.value}-content-animated`]: tabPaneAnimated.value }
+			]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (item) => {
+				return openBlock(), createElementBlock(Fragment, { key: item.key }, [tabPaneAnimated.value ? (openBlock(), createBlock(Transition, mergeProps({
+					key: 0,
+					ref_for: true
+				}, transitionProps.value), {
+					default: withCtx(() => [(shouldDestroyOnHidden(item) ? item.key === unref(activeKey) : true) ? withDirectives((openBlock(), createBlock(TabPane_default, {
+						key: 0,
+						id: unref(id),
+						"prefix-cls": tabPanePrefixCls.value,
+						"tab-key": item.key,
+						animated: tabPaneAnimated.value,
+						active: item.key === unref(activeKey),
+						style: normalizeStyle({
+							...unref(contentStyle) || {},
+							...item.style || {}
+						}),
+						"class-name": [
+							unref(contentClassName),
+							item.className,
+							item.key !== unref(activeKey) && `${tabPanePrefixCls.value}-hidden`
+						]
+					}, {
+						default: withCtx(() => [createVNode(unref(RenderComponent), { render: item.children }, null, 8, ["render"])]),
+						_: 2
+					}, 1032, [
+						"id",
+						"prefix-cls",
+						"tab-key",
+						"animated",
+						"active",
+						"style",
+						"class-name"
+					])), [[vShow, shouldDestroyOnHidden(item) ? true : item.key === unref(activeKey) || item.forceRender]]) : createCommentVNode("", true)]),
+					_: 2
+				}, 1040)) : createCommentVNode("", true), !tabPaneAnimated.value && (shouldDestroyOnHidden(item) ? item.key === unref(activeKey) : true) ? withDirectives((openBlock(), createBlock(TabPane_default, {
+					key: 1,
+					id: unref(id),
+					"prefix-cls": tabPanePrefixCls.value,
+					"tab-key": item.key,
+					animated: tabPaneAnimated.value,
+					active: item.key === unref(activeKey),
+					style: normalizeStyle({
+						...unref(contentStyle) || {},
+						...item.style || {}
+					}),
+					"class-name": [
+						unref(contentClassName),
+						item.className,
+						item.key !== unref(activeKey) && `${tabPanePrefixCls.value}-hidden`
+					]
+				}, {
+					default: withCtx(() => [createVNode(unref(RenderComponent), { render: item.children }, null, 8, ["render"])]),
+					_: 2
+				}, 1032, [
+					"id",
+					"prefix-cls",
+					"tab-key",
+					"animated",
+					"active",
+					"style",
+					"class-name"
+				])), [[vShow, shouldDestroyOnHidden(item) ? true : item.key === unref(activeKey) || item.forceRender]]) : createCommentVNode("", true)], 64);
+			}), 128))], 2)], 2);
+		};
+	}
+});
+export { index_vue_vue_type_script_setup_true_lang_default as default };

package/dist/Tabs.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_Tabs_vue_vue_type_script_setup_true_lang = require("./Tabs.vue_vue_type_script_setup_true_lang.cjs");
+var Tabs_default = require_Tabs_vue_vue_type_script_setup_true_lang.default;
+exports.default = Tabs_default;

package/dist/Tabs.js

@@ -0,0 +1,3 @@
+import Tabs_vue_vue_type_script_setup_true_lang_default from "./Tabs.vue_vue_type_script_setup_true_lang.js";
+var Tabs_default = Tabs_vue_vue_type_script_setup_true_lang_default;
+export { Tabs_default as default };

package/dist/Tabs.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,194 @@
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_TabContext = require("./TabContext.cjs");
+const require_useAnimateConfig = require("./hooks/useAnimateConfig.cjs");
+const require_utils = require("./utils.cjs");
+const require_Wrapper = require("./TabNavList/Wrapper.cjs");
+const require_index = require("./TabPanelList/index.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+let __v_c_util_dist_hooks_useMergedState = require("@v-c/util/dist/hooks/useMergedState");
+__v_c_util_dist_hooks_useMergedState = require_rolldown_runtime.__toESM(__v_c_util_dist_hooks_useMergedState);
+let __v_c_util_dist_isMobile = require("@v-c/util/dist/isMobile");
+__v_c_util_dist_isMobile = require_rolldown_runtime.__toESM(__v_c_util_dist_isMobile);
+let __v_c_util_dist_omit = require("@v-c/util/dist/omit");
+__v_c_util_dist_omit = require_rolldown_runtime.__toESM(__v_c_util_dist_omit);
+var _hoisted_1 = ["id"];
+var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "Tabs",
+	inheritAttrs: false,
+	__name: "Tabs",
+	props: {
+		prefixCls: { default: "vc-tabs" },
+		className: {},
+		style: {},
+		classNames: {},
+		styles: {},
+		id: {},
+		items: {},
+		activeKey: {},
+		defaultActiveKey: {},
+		direction: {},
+		animated: {
+			type: [Boolean, Object],
+			default: void 0
+		},
+		renderTabBar: {},
+		tabBarExtraContent: { type: [
+			Object,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		] },
+		tabBarGutter: {},
+		tabBarStyle: {},
+		tabPosition: { default: "top" },
+		destroyOnHidden: {
+			type: Boolean,
+			default: void 0
+		},
+		onChange: {},
+		onTabClick: {},
+		onTabScroll: {},
+		editable: {},
+		getPopupContainer: {},
+		locale: {},
+		more: {},
+		popupClassName: {},
+		indicator: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { id, items, direction, defaultActiveKey, tabPosition, editable, locale, tabBarGutter, more, animated, styles, prefixCls, className, activeKey, tabBarStyle, tabBarExtraContent, destroyOnHidden, renderTabBar, onChange, onTabClick, onTabScroll, getPopupContainer, popupClassName, indicator, classNames: tabsClassNames } = (0, vue.toRefs)(props);
+		const restProps = (0, vue.computed)(() => {
+			return (0, __v_c_util_dist_omit.default)(props, [
+				"id",
+				"prefixCls",
+				"className",
+				"items",
+				"direction",
+				"activeKey",
+				"defaultActiveKey",
+				"editable",
+				"animated",
+				"tabPosition",
+				"tabBarGutter",
+				"tabBarStyle",
+				"tabBarExtraContent",
+				"locale",
+				"more",
+				"destroyOnHidden",
+				"renderTabBar",
+				"onChange",
+				"onTabClick",
+				"onTabScroll",
+				"getPopupContainer",
+				"popupClassName",
+				"indicator",
+				"classNames",
+				"styles"
+			]);
+		});
+		const tabs = (0, vue.computed)(() => (items.value || []).filter((item) => item && typeof item === "object" && "key" in item));
+		const rtl = (0, vue.computed)(() => direction.value === "rtl");
+		const mergedAnimated = (0, vue.computed)(() => require_useAnimateConfig.default(animated.value));
+		const mobile = (0, vue.ref)(false);
+		(0, vue.onMounted)(() => {
+			mobile.value = (0, __v_c_util_dist_isMobile.default)();
+		});
+		const defaultKey = (0, vue.computed)(() => defaultActiveKey.value ?? tabs.value[0]?.key);
+		const [mergedActiveKey, setMergedActiveKey] = (0, __v_c_util_dist_hooks_useMergedState.default)("", {
+			defaultValue: activeKey.value ?? defaultKey.value,
+			value: activeKey
+		});
+		const activeIndex = (0, vue.ref)(tabs.value.findIndex((item) => item.key === mergedActiveKey.value));
+		(0, vue.watch)([
+			(0, vue.computed)(() => tabs.value.map((tab) => tab.key).join("_")),
+			mergedActiveKey,
+			activeIndex
+		], async () => {
+			await (0, vue.nextTick)();
+			activeIndex.value = tabs.value.findIndex((item) => item.key === mergedActiveKey.value);
+			let newActiveIndex = tabs.value.findIndex((tab) => tab.key === mergedActiveKey.value);
+			if (newActiveIndex === -1) {
+				newActiveIndex = Math.max(0, Math.min(activeIndex.value, tabs.value.length - 1));
+				setMergedActiveKey(tabs.value[newActiveIndex]?.key);
+			}
+			activeIndex.value = newActiveIndex;
+		}, { immediate: true });
+		const [mergedId, setMergedId] = (0, __v_c_util_dist_hooks_useMergedState.default)(null, { value: id.value });
+		(0, vue.onMounted)(() => {
+			const uuid = require_utils.getUUid();
+			setMergedId(`vc-tabs-${process.env.NODE_ENV === "test" ? "test" : uuid}`);
+			require_utils.setUUid(uuid + 1);
+		});
+		function onInternalTabClick(key, e) {
+			onTabClick.value?.(key, e);
+			const isActiveChanged = key !== mergedActiveKey.value;
+			setMergedActiveKey(key);
+			if (isActiveChanged) onChange.value?.(key);
+		}
+		const sharedProps = (0, vue.computed)(() => ({
+			id: mergedId.value,
+			activeKey: mergedActiveKey.value,
+			animated: mergedAnimated.value,
+			tabPosition: tabPosition.value,
+			rtl: rtl.value,
+			mobile: mobile.value
+		}));
+		const tabNavBarProps = (0, vue.computed)(() => {
+			return {
+				...sharedProps.value,
+				editable: editable.value,
+				locale: locale.value,
+				more: more.value,
+				tabBarGutter: tabBarGutter.value,
+				onTabClick: onInternalTabClick,
+				onTabScroll: onTabScroll.value,
+				extra: tabBarExtraContent.value,
+				style: tabBarStyle.value,
+				getPopupContainer: getPopupContainer.value,
+				popupClassName: (0, __v_c_util.clsx)([popupClassName.value, tabsClassNames.value?.popup]),
+				indicator: indicator.value,
+				styles: styles.value,
+				classNames: tabsClassNames.value
+			};
+		});
+		const memoizedValue = (0, vue.computed)(() => {
+			return {
+				tabs: tabs.value,
+				prefixCls: prefixCls.value
+			};
+		});
+		const tabRef = (0, vue.ref)();
+		require_TabContext.provideTabContext(memoizedValue);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
+				id: (0, vue.unref)(id),
+				ref_key: "tabRef",
+				ref: tabRef,
+				class: [
+					(0, vue.unref)(prefixCls),
+					`${(0, vue.unref)(prefixCls)}-${(0, vue.unref)(tabPosition)}`,
+					{
+						[`${(0, vue.unref)(prefixCls)}-mobile`]: mobile.value,
+						[`${(0, vue.unref)(prefixCls)}-editable`]: (0, vue.unref)(editable),
+						[`${(0, vue.unref)(prefixCls)}-rtl`]: rtl.value
+					},
+					(0, vue.unref)(className)
+				]
+			}, restProps.value), [(0, vue.createVNode)(require_Wrapper.default, (0, vue.mergeProps)(tabNavBarProps.value, { "render-tab-bar": (0, vue.unref)(renderTabBar) }), null, 16, ["render-tab-bar"]), (0, vue.createVNode)(require_index.default, (0, vue.mergeProps)({ "destroy-on-hidden": (0, vue.unref)(destroyOnHidden) }, sharedProps.value, {
+				"content-style": (0, vue.unref)(styles)?.content,
+				"content-class-name": (0, vue.unref)(tabsClassNames)?.content,
+				animated: mergedAnimated.value
+			}), null, 16, [
+				"destroy-on-hidden",
+				"content-style",
+				"content-class-name",
+				"animated"
+			])], 16, _hoisted_1);
+		};
+	}
+});
+exports.default = Tabs_vue_vue_type_script_setup_true_lang_default;

package/dist/Tabs.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,190 @@
+import { provideTabContext } from "./TabContext.js";
+import useAnimateConfig from "./hooks/useAnimateConfig.js";
+import { getUUid, setUUid } from "./utils.js";
+import Wrapper_default from "./TabNavList/Wrapper.js";
+import TabPanelList_default from "./TabPanelList/index.js";
+import { computed, createElementBlock, createVNode, defineComponent, mergeProps, nextTick, onMounted, openBlock, ref, toRefs, unref, watch } from "vue";
+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";
+var _hoisted_1 = ["id"];
+var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "Tabs",
+	inheritAttrs: false,
+	__name: "Tabs",
+	props: {
+		prefixCls: { default: "vc-tabs" },
+		className: {},
+		style: {},
+		classNames: {},
+		styles: {},
+		id: {},
+		items: {},
+		activeKey: {},
+		defaultActiveKey: {},
+		direction: {},
+		animated: {
+			type: [Boolean, Object],
+			default: void 0
+		},
+		renderTabBar: {},
+		tabBarExtraContent: { type: [
+			Object,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		] },
+		tabBarGutter: {},
+		tabBarStyle: {},
+		tabPosition: { default: "top" },
+		destroyOnHidden: {
+			type: Boolean,
+			default: void 0
+		},
+		onChange: {},
+		onTabClick: {},
+		onTabScroll: {},
+		editable: {},
+		getPopupContainer: {},
+		locale: {},
+		more: {},
+		popupClassName: {},
+		indicator: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { id, items, direction, defaultActiveKey, tabPosition, editable, locale, tabBarGutter, more, animated, styles, prefixCls, className, activeKey, tabBarStyle, tabBarExtraContent, destroyOnHidden, renderTabBar, onChange, onTabClick, onTabScroll, getPopupContainer, popupClassName, indicator, classNames: tabsClassNames } = toRefs(props);
+		const restProps = computed(() => {
+			return omit(props, [
+				"id",
+				"prefixCls",
+				"className",
+				"items",
+				"direction",
+				"activeKey",
+				"defaultActiveKey",
+				"editable",
+				"animated",
+				"tabPosition",
+				"tabBarGutter",
+				"tabBarStyle",
+				"tabBarExtraContent",
+				"locale",
+				"more",
+				"destroyOnHidden",
+				"renderTabBar",
+				"onChange",
+				"onTabClick",
+				"onTabScroll",
+				"getPopupContainer",
+				"popupClassName",
+				"indicator",
+				"classNames",
+				"styles"
+			]);
+		});
+		const tabs = computed(() => (items.value || []).filter((item) => item && typeof item === "object" && "key" in item));
+		const rtl = computed(() => direction.value === "rtl");
+		const mergedAnimated = computed(() => useAnimateConfig(animated.value));
+		const mobile = ref(false);
+		onMounted(() => {
+			mobile.value = isMobile();
+		});
+		const defaultKey = computed(() => defaultActiveKey.value ?? tabs.value[0]?.key);
+		const [mergedActiveKey, setMergedActiveKey] = useMergedState("", {
+			defaultValue: activeKey.value ?? defaultKey.value,
+			value: activeKey
+		});
+		const activeIndex = ref(tabs.value.findIndex((item) => item.key === mergedActiveKey.value));
+		watch([
+			computed(() => tabs.value.map((tab) => tab.key).join("_")),
+			mergedActiveKey,
+			activeIndex
+		], async () => {
+			await nextTick();
+			activeIndex.value = tabs.value.findIndex((item) => item.key === mergedActiveKey.value);
+			let newActiveIndex = tabs.value.findIndex((tab) => tab.key === mergedActiveKey.value);
+			if (newActiveIndex === -1) {
+				newActiveIndex = Math.max(0, Math.min(activeIndex.value, tabs.value.length - 1));
+				setMergedActiveKey(tabs.value[newActiveIndex]?.key);
+			}
+			activeIndex.value = newActiveIndex;
+		}, { immediate: true });
+		const [mergedId, setMergedId] = useMergedState(null, { value: id.value });
+		onMounted(() => {
+			const uuid = getUUid();
+			setMergedId(`vc-tabs-${process.env.NODE_ENV === "test" ? "test" : uuid}`);
+			setUUid(uuid + 1);
+		});
+		function onInternalTabClick(key, e) {
+			onTabClick.value?.(key, e);
+			const isActiveChanged = key !== mergedActiveKey.value;
+			setMergedActiveKey(key);
+			if (isActiveChanged) onChange.value?.(key);
+		}
+		const sharedProps = computed(() => ({
+			id: mergedId.value,
+			activeKey: mergedActiveKey.value,
+			animated: mergedAnimated.value,
+			tabPosition: tabPosition.value,
+			rtl: rtl.value,
+			mobile: mobile.value
+		}));
+		const tabNavBarProps = computed(() => {
+			return {
+				...sharedProps.value,
+				editable: editable.value,
+				locale: locale.value,
+				more: more.value,
+				tabBarGutter: tabBarGutter.value,
+				onTabClick: onInternalTabClick,
+				onTabScroll: onTabScroll.value,
+				extra: tabBarExtraContent.value,
+				style: tabBarStyle.value,
+				getPopupContainer: getPopupContainer.value,
+				popupClassName: clsx([popupClassName.value, tabsClassNames.value?.popup]),
+				indicator: indicator.value,
+				styles: styles.value,
+				classNames: tabsClassNames.value
+			};
+		});
+		const memoizedValue = computed(() => {
+			return {
+				tabs: tabs.value,
+				prefixCls: prefixCls.value
+			};
+		});
+		const tabRef = ref();
+		provideTabContext(memoizedValue);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				id: unref(id),
+				ref_key: "tabRef",
+				ref: tabRef,
+				class: [
+					unref(prefixCls),
+					`${unref(prefixCls)}-${unref(tabPosition)}`,
+					{
+						[`${unref(prefixCls)}-mobile`]: mobile.value,
+						[`${unref(prefixCls)}-editable`]: unref(editable),
+						[`${unref(prefixCls)}-rtl`]: rtl.value
+					},
+					unref(className)
+				]
+			}, restProps.value), [createVNode(Wrapper_default, mergeProps(tabNavBarProps.value, { "render-tab-bar": unref(renderTabBar) }), null, 16, ["render-tab-bar"]), createVNode(TabPanelList_default, mergeProps({ "destroy-on-hidden": unref(destroyOnHidden) }, sharedProps.value, {
+				"content-style": unref(styles)?.content,
+				"content-class-name": unref(tabsClassNames)?.content,
+				animated: mergedAnimated.value
+			}), null, 16, [
+				"destroy-on-hidden",
+				"content-style",
+				"content-class-name",
+				"animated"
+			])], 16, _hoisted_1);
+		};
+	}
+});
+export { Tabs_vue_vue_type_script_setup_true_lang_default as default };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/hooks/useAnimateConfig.cjs

@@ -0,0 +1,28 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let __v_c_util_dist_warning = require("@v-c/util/dist/warning");
+function useAnimateConfig(animated = {
+	inkBar: true,
+	tabPane: false
+}) {
+	let mergedAnimated;
+	if (animated === false) mergedAnimated = {
+		inkBar: false,
+		tabPane: false
+	};
+	else if (animated === true) mergedAnimated = {
+		inkBar: true,
+		tabPane: false
+	};
+	else mergedAnimated = {
+		inkBar: true,
+		...typeof animated === "object" ? animated : {}
+	};
+	if (mergedAnimated.tabPaneMotion && mergedAnimated.tabPane === void 0) mergedAnimated.tabPane = true;
+	if (!mergedAnimated.tabPaneMotion && mergedAnimated.tabPane) {
+		if (process.env.NODE_ENV !== "production") (0, __v_c_util_dist_warning.warning)(false, "`animated.tabPane` is true but `animated.tabPaneMotion` is not provided. Motion will not work.");
+		mergedAnimated.tabPane = false;
+	}
+	return mergedAnimated;
+}
+exports.default = useAnimateConfig;

package/dist/hooks/useAnimateConfig.d.ts

@@ -0,0 +1,2 @@
+import { AnimatedConfig, TabsProps } from '../interface';
+export default function useAnimateConfig(animated?: TabsProps['animated']): AnimatedConfig;