@v-c/tabs 1.2.0 → 1.3.0

package/dist/TabNavList/AddButton.vue.d.ts

@@ -0,0 +1,6 @@
+import { AddButtonProps } from '../interface';
+declare const __VLS_export: import('vue').DefineComponent<AddButtonProps, {
+    buttonRef: import('vue').Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AddButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/TabNavList/AddButton.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { createCommentVNode, createElementBlock, createVNode, defineComponent, n
 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({
+var AddButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "AddButton",
 	inheritAttrs: false,
 	__name: "AddButton",

package/dist/TabNavList/ExtraContent.vue.d.ts

@@ -0,0 +1,6 @@
+import { ExtraContentProps } from '../interface';
+declare const __VLS_export: import('vue').DefineComponent<ExtraContentProps, {
+    extraContentRef: import('vue').Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ExtraContentProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/TabNavList/ExtraContent.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { computed, createCommentVNode, createElementBlock, createVNode, defineCo
 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({
+var ExtraContent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ExtraContent",
 	props: {
 		position: {},

package/dist/TabNavList/OperationNode.vue.d.ts

@@ -0,0 +1,8 @@
+import { MoreProps, OperationNodeProps } from '../interface';
+declare const __VLS_export: import('vue').DefineComponent<OperationNodeProps, {
+    operationNodeRef: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<OperationNodeProps> & Readonly<{}>, {
+    more: MoreProps;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/TabNavList/OperationNode.vue_vue_type_script_setup_true_lang.js

@@ -12,7 +12,7 @@ var _hoisted_1 = [
 	"aria-controls",
 	"aria-expanded"
 ];
-var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var OperationNode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "OperationNode",
 	props: {
 		prefixCls: {},
@@ -97,6 +97,16 @@ var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			});
 		});
 		const moreIconNode = computed(() => moreProps.value?.icon || "More");
+		const overlayNode = computed(() => {
+			const popupRender = moreProps.value?.popupRender;
+			if (!popupRender) return menuNode.value;
+			return popupRender(menuNode.value, {
+				restTabs: props.tabs,
+				onClose: () => {
+					open.value = false;
+				}
+			});
+		});
 		const moreStyle = computed(() => {
 			const style = { marginInlineStart: tabBarGutter.value ? `${tabBarGutter.value}px` : "0px" };
 			if (!props.tabs.length) {
@@ -168,7 +178,7 @@ var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			}, [!unref(mobile) ? (openBlock(), createBlock(unref(DropDown), mergeProps({
 				key: 0,
 				"prefix-cls": dropdownPrefix.value,
-				overlay: menuNode.value,
+				overlay: overlayNode.value,
 				visible: __props.tabs.length ? open.value : false,
 				"overlay-class-name": overlayClassName.value,
 				"overlay-style": unref(popupStyle),

package/dist/TabNavList/TabNode.vue.d.ts

@@ -0,0 +1,4 @@
+import { TabNodeProps } from '../interface';
+declare const __VLS_export: import('vue').DefineComponent<TabNodeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/TabNavList/TabNode.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { computed, createBlock, defineComponent, h, onMounted, openBlock, ref, t
 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({
+var TabNode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "TabNode",
 	inheritAttrs: false,
 	__name: "TabNode",

package/dist/TabNavList/Wrapper.vue.d.ts

@@ -0,0 +1,4 @@
+import { TabNavListWrapperProps } from '../interface';
+declare const __VLS_export: import('vue').DefineComponent<TabNavListWrapperProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabNavListWrapperProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/TabNavList/Wrapper.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,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({
+var Wrapper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "TabNavListWrapper",
 	inheritAttrs: false,
 	__name: "Wrapper",

package/dist/TabNavList/index.vue.d.ts

@@ -0,0 +1,4 @@
+import { TabNavListProps } from '../interface';
+declare const __VLS_export: import('vue').DefineComponent<TabNavListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabNavListProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/TabNavList/index.vue_vue_type_script_setup_true_lang.js

@@ -13,7 +13,7 @@ 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({
+var index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "TabNavList",
 	inheritAttrs: false,
 	__name: "index",
@@ -211,7 +211,8 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			const enabledKeys = getEnabledKeys(tabs.value);
 			const currentIndex = enabledKeys.indexOf(focusKey.value || activeKey.value);
 			const len = enabledKeys.length;
-			focusKey.value = enabledKeys[(currentIndex + offset + len) % len];
+			const nextIndex = (currentIndex + offset + len) % len;
+			focusKey.value = enabledKeys[nextIndex];
 		}
 		function handleRemoveTab(removalKey, e) {
 			if (!removalKey) return;

package/dist/TabPanelList/TabPane.vue.d.ts

@@ -0,0 +1,4 @@
+import { TabPaneProps } from '../interface';
+declare const __VLS_export: import('vue').DefineComponent<TabPaneProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabPaneProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/TabPanelList/TabPane.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,7 @@ var _hoisted_1 = [
 	"aria-labelledby",
 	"aria-hidden"
 ];
-var TabPane_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var TabPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "TabPane",
 	inheritAttrs: false,
 	__name: "TabPane",

package/dist/TabPanelList/index.vue.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'vue';
+import { AnimatedConfig, TabPosition } from '../interface';
+interface TabPanelListProps {
+    activeKey: string;
+    id: string | null;
+    animated?: AnimatedConfig;
+    tabPosition?: TabPosition;
+    destroyOnHidden?: boolean;
+    bodyStyle?: CSSProperties;
+    bodyClassName?: string;
+    contentStyle?: CSSProperties;
+    contentClassName?: string;
+}
+declare const __VLS_export: import('vue').DefineComponent<TabPanelListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabPanelListProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/TabPanelList/index.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import { Fragment, Transition, computed, createBlock, createCommentVNode, create
 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({
+var index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "index",
 	props: {
 		activeKey: {},
@@ -12,11 +12,13 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		animated: {},
 		tabPosition: {},
 		destroyOnHidden: { type: Boolean },
+		bodyStyle: {},
+		bodyClassName: {},
 		contentStyle: {},
 		contentClassName: {}
 	},
 	setup(__props) {
-		const { id, activeKey, animated, tabPosition, destroyOnHidden, contentStyle, contentClassName } = toRefs(__props);
+		const { id, activeKey, animated, tabPosition, destroyOnHidden, bodyStyle, bodyClassName, contentStyle, contentClassName } = toRefs(__props);
 		const ctx = useTabContext();
 		const tabs = computed(() => ctx?.value.tabs || []);
 		const prefixCls = computed(() => ctx?.value.prefixCls || "");
@@ -41,11 +43,15 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			return visitedKeys.has(item.key);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass([`${prefixCls.value}-body-holder`]) }, [createElementVNode("div", { class: normalizeClass([
-				`${prefixCls.value}-body`,
-				`${prefixCls.value}-body-${unref(tabPosition)}`,
-				{ [`${prefixCls.value}-body-animated`]: tabPaneAnimated.value }
-			]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (item) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([`${prefixCls.value}-body-holder`]) }, [createElementVNode("div", {
+				class: normalizeClass([
+					`${prefixCls.value}-body`,
+					`${prefixCls.value}-body-${unref(tabPosition)}`,
+					{ [`${prefixCls.value}-body-animated`]: tabPaneAnimated.value },
+					unref(bodyClassName)
+				]),
+				style: normalizeStyle(unref(bodyStyle))
+			}, [(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
@@ -107,7 +113,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					"style",
 					"class-name"
 				])), [[vShow, shouldDestroyOnHidden(item) ? true : item.key === unref(activeKey) || item.forceRender]]) : createCommentVNode("", true)], 64);
-			}), 128))], 2)], 2);
+			}), 128))], 6)], 2);
 		};
 	}
 });

package/dist/Tabs.vue.d.ts

@@ -0,0 +1,9 @@
+import { TabsProps } from './interface';
+declare const __VLS_export: import('vue').DefineComponent<TabsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabsProps> & Readonly<{}>, {
+    prefixCls: string;
+    animated: boolean | import('./interface').AnimatedConfig;
+    destroyOnHidden: boolean;
+    tabPosition: import('./interface').TabPosition;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/Tabs.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,7 @@ 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({
+var Tabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "Tabs",
 	__name: "Tabs",
 	props: {
@@ -175,11 +175,15 @@ var Tabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 					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, {
+				"body-style": unref(styles)?.body,
+				"body-class-name": unref(tabsClassNames)?.body,
 				"content-style": unref(styles)?.content,
 				"content-class-name": unref(tabsClassNames)?.content,
 				animated: mergedAnimated.value
 			}), null, 16, [
 				"destroy-on-hidden",
+				"body-style",
+				"body-class-name",
 				"content-style",
 				"content-class-name",
 				"animated"

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { TabPaneProps, TabsProps } from './interface';
 import { default as Tabs } from './Tabs.vue';
 export type { TabPaneProps, TabsProps };
-export type { AnimatedConfig, EditableConfig, GetIndicatorSize, MoreProps, Tab } from './interface';
+export type { AnimatedConfig, EditableConfig, GetIndicatorSize, MoreProps, PopupRender, Tab } from './interface';
 export default Tabs;

package/dist/interface.d.ts

@@ -62,8 +62,13 @@ export interface Tab extends Omit<TabPaneProps, 'tab'> {
     label: VueNode;
 }
 export type moreIcon = VueNode;
+export type PopupRender = (menu: VueNode, info: {
+    restTabs: Tab[];
+    onClose: () => void;
+}) => VueNode;
 export type MoreProps = {
     icon?: moreIcon;
+    popupRender?: PopupRender;
 } & Omit<DropdownProps, 'children'>;
 export interface OperationNodeProps {
     prefixCls: string;
@@ -114,7 +119,7 @@ export interface TabNodeProps {
 }
 export type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 export type GetIndicatorSize = number | ((origin: number) => number);
-export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header' | 'remove';
+export type SemanticName = 'popup' | 'item' | 'indicator' | 'body' | 'content' | 'header' | 'remove';
 export type RenderTabBar = (props: Record<string, any>, TabNavListComponent: any) => VueNode;
 export interface IndicatorConfig {
     size?: GetIndicatorSize;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/tabs",
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "tabs ui component for react",
   "publishConfig": {
     "access": "public"
@@ -37,11 +37,11 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/dropdown": "^1.0.2",
-    "@v-c/menu": "^1.2.1",
-    "@v-c/overflow": "^1.1.0",
-    "@v-c/resize-observer": "^1.1.2",
-    "@v-c/util": "^1.0.19"
+    "@v-c/dropdown": "^1.0.5",
+    "@v-c/menu": "^1.3.0",
+    "@v-c/overflow": "^1.1.1",
+    "@v-c/resize-observer": "^1.1.3",
+    "@v-c/util": "^1.1.0"
   },
   "scripts": {
     "build": "vite build",