@v-c/tabs 1.2.1 → 1.3.1

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

@@ -1,8 +1,8 @@
 import { createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, toRefs, unref } from "vue";
-import { RenderComponent } from "@v-c/util";
+import { RenderComponent, isVueRenderable } 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",
@@ -29,7 +29,7 @@ var AddButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				style: normalizeStyle(unref(style)),
 				"aria-label": unref(locale)?.addAriaLabel || "Add tab",
 				onClick: handleClick
-			}, [createVNode(unref(RenderComponent), { render: unref(editable).addIcon || "+" }, null, 8, ["render"])], 14, _hoisted_1)) : createCommentVNode("", true);
+			}, [createVNode(unref(RenderComponent), { render: unref(isVueRenderable)(unref(editable).addIcon) ? unref(editable).addIcon : "+" }, null, 8, ["render"])], 14, _hoisted_1)) : createCommentVNode("", true);
 		};
 	}
 });

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

@@ -1,7 +1,7 @@
 import { getRemovable } from "../utils.js";
 import AddButton_default from "./AddButton.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, toRefs, unref, useTemplateRef, watch, withCtx } from "vue";
-import { clsx } from "@v-c/util";
+import { clsx, isVueRenderable } from "@v-c/util";
 import RenderComponent$1 from "@v-c/util/dist/RenderComponent";
 import DropDown from "@v-c/dropdown";
 import Menu from "@v-c/menu";
@@ -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: {},
@@ -87,7 +87,7 @@ var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						e.stopPropagation();
 						onRemoveTab(e, key);
 					}
-				}, [closeIcon || editable.value?.removeIcon || "×"]) : null] });
+				}, [isVueRenderable(closeIcon) ? closeIcon : isVueRenderable(editable.value?.removeIcon) ? editable.value.removeIcon : "×"]) : null] });
 			}) });
 		});
 		const overlayClassName = computed(() => {
@@ -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,14 +178,14 @@ 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,
-				visible: __props.tabs.length ? open.value : false,
+				overlay: overlayNode.value,
+				open: __props.tabs.length ? open.value : false,
 				"overlay-class-name": overlayClassName.value,
 				"overlay-style": unref(popupStyle),
 				"mouse-enter-delay": .1,
 				"mouse-leave-delay": .1,
 				"get-popup-container": unref(getPopupContainer)
-			}, unref(moreProps), { onVisibleChange: _cache[0] || (_cache[0] = ($event) => open.value = $event) }), {
+			}, unref(moreProps), { onOpenChange: _cache[0] || (_cache[0] = ($event) => open.value = $event) }), {
 				default: withCtx(() => [createElementVNode("button", {
 					id: `${unref(id)}-more`,
 					type: "button",
@@ -190,7 +200,7 @@ var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			}, 16, [
 				"prefix-cls",
 				"overlay",
-				"visible",
+				"open",
 				"overlay-class-name",
 				"overlay-style",
 				"get-popup-container"

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

@@ -1,9 +1,10 @@
 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 { isVueRenderable } from "@v-c/util";
+import RenderComponent$1 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",
@@ -86,8 +87,8 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 				"aria-live": "polite",
 				"style": "width: 0; height: 0; position: absolute; overflow: hidden; opacity: 0;"
 			}, `Tab ${props.currentPosition} of ${props.tabCount}`));
-			if (tab.value.icon) btnChildren.push(h("span", { class: [`${tabPrefix.value}-icon`] }, [h(RenderComponent, { render: tab.value.icon })]));
-			if (tab.value.label) if (typeof tab.value.label === "string" && !isEmptyElement(tab.value.icon)) btnChildren.push(h("span", {}, tab.value.label));
+			if (isVueRenderable(tab.value.icon)) btnChildren.push(h("span", { class: [`${tabPrefix.value}-icon`] }, [h(RenderComponent$1, { render: tab.value.icon })]));
+			if (isVueRenderable(tab.value.label)) if (typeof tab.value.label === "string" && !isEmptyElement(tab.value.icon)) btnChildren.push(h("span", {}, tab.value.label));
 			else btnChildren.push(tab.value.label);
 			const children = [h("div", {
 				"id": tab.value.id && `${tab.value.id}-tab-${tab.value.key}`,
@@ -118,7 +119,7 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					e.stopPropagation();
 					onRemove(e);
 				}
-			}, [h(RenderComponent, { render: tab.value.closeIcon || editable.value && editable.value.removeIcon || "×" })]));
+			}, [h(RenderComponent$1, { render: isVueRenderable(tab.value.closeIcon) ? tab.value.closeIcon : isVueRenderable(editable.value?.removeIcon) ? editable.value.removeIcon : "×" })]));
 			return h("div", {
 				"key": tab.value.key,
 				"data-node-key": genDataNodeKey(tab.value.key),
@@ -129,7 +130,7 @@ var TabNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		});
 		const finalNode = computed(() => props.renderWrapper ? props.renderWrapper(node.value) : node.value);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(RenderComponent), { render: finalNode.value }, null, 8, ["render"]);
+			return openBlock(), createBlock(unref(RenderComponent$1), { render: finalNode.value }, null, 8, ["render"]);
 		};
 	}
 });

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: {},
@@ -67,11 +67,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 							...unref(contentStyle) || {},
 							...item.style || {}
 						}),
-						"class-name": [
-							unref(contentClassName),
-							item.className,
-							item.key !== unref(activeKey) && `${tabPanePrefixCls.value}-hidden`
-						]
+						"class-name": [unref(contentClassName), item.className]
 					}, {
 						default: withCtx(() => [createVNode(unref(RenderComponent), { render: item.children }, null, 8, ["render"])]),
 						_: 2
@@ -83,7 +79,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						"active",
 						"style",
 						"class-name"
-					])), [[vShow, shouldDestroyOnHidden(item) ? true : item.key === unref(activeKey) || item.forceRender]]) : createCommentVNode("", true)]),
+					])), [[vShow, shouldDestroyOnHidden(item) ? true : item.key === unref(activeKey)]]) : createCommentVNode("", true)]),
 					_: 2
 				}, 1040)) : createCommentVNode("", true), !tabPaneAnimated.value && shouldRender(item) ? withDirectives((openBlock(), createBlock(TabPane_default, {
 					key: 1,

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: {

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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/tabs",
   "type": "module",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "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/resize-observer": "^1.1.2",
-    "@v-c/util": "^1.0.19",
-    "@v-c/overflow": "^1.1.0"
+    "@v-c/dropdown": "^1.1.0",
+    "@v-c/menu": "^1.4.0",
+    "@v-c/util": "^1.2.0",
+    "@v-c/resize-observer": "^1.1.3",
+    "@v-c/overflow": "^1.1.2"
   },
   "scripts": {
     "build": "vite build",