@sdata/web-vue 4.4.3 → 4.5.0

package/es/index.css

@@ -5825,7 +5825,7 @@ body.sd-tour-active .sd-tour-popover * {
   border-top: none;
 }
 .sd-tabs-content-animation {
-  transition: margin 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tabs-horizontal.sd-tabs-justify {
   display: flex;

package/es/tabs/index.d.ts

@@ -329,55 +329,7 @@ declare const Tabs: {
         extra(): unknown;
     };
 }) & {
-    TabPane: {
-        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-            title: StringConstructor;
-            disabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            closable: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            destroyOnHide: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-            disabled: boolean;
-            closable: boolean;
-            destroyOnHide: boolean;
-        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import("vue").ExtractPropTypes<{
-            title: StringConstructor;
-            disabled: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            closable: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            destroyOnHide: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-        }>> & Readonly<{}>, {}, {}, {}, {}, {
-            disabled: boolean;
-            closable: boolean;
-            destroyOnHide: boolean;
-        }>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    TabPane: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         title: StringConstructor;
         disabled: {
             type: BooleanConstructor;
@@ -391,17 +343,25 @@ declare const Tabs: {
             type: BooleanConstructor;
             default: boolean;
         };
-    }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        title: StringConstructor;
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        closable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        destroyOnHide: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
         disabled: boolean;
         closable: boolean;
         destroyOnHide: boolean;
-    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-        $slots: {
-            default?: (props: {}) => any;
-        } & {
-            default?: (props: {}) => any;
-        };
-    });
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     install: (app: App, options?: SDOptions) => void;
 };
 export type TabsInstance = InstanceType<typeof _Tabs>;

package/es/tabs/style/index.css

@@ -407,7 +407,7 @@
   border-top: none;
 }
 .sd-tabs-content-animation {
-  transition: margin 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tabs-horizontal.sd-tabs-justify {
   display: flex;

package/es/tabs/style/index.scss

@@ -627,7 +627,8 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
   }
 
   &-content-animation {
-    transition: margin theme.$transition-duration-2 theme.$transition-timing-function-standard;
+    // transform 位移动画由合成器处理，避免重型面板逐帧 reflow
+    transition: transform theme.$transition-duration-2 theme.$transition-timing-function-standard;
   }
 
   &-horizontal#{&}-justify {

package/es/tabs/tab-pane.vue.d.ts

@@ -1,10 +1,4 @@
-declare var __VLS_7: {}, __VLS_9: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
-} & {
-    default?: (props: typeof __VLS_9) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     disabled: {
         type: BooleanConstructor;
@@ -37,11 +31,5 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     closable: boolean;
     destroyOnHide: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/es/tabs/tab-pane.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/es
 import { getPrefixCls } from "../_utils/global-config.js";
 import Scrollbar from "../scrollbar/index.js";
 import { tabsInjectionKey } from "./context.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, getCurrentInstance, inject, mergeProps, normalizeClass, onBeforeUnmount, onUpdated, openBlock, reactive, ref, renderSlot, toRefs, unref, useSlots, watch, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, inject, mergeProps, normalizeClass, onBeforeUnmount, onUpdated, openBlock, reactive, ref, toRefs, unref, useSlots, watch, withCtx } from "vue";
 //#region components/tabs/tab-pane.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"id",
@@ -76,6 +76,27 @@ var tab_pane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			return scrollbar !== false && scrollbar !== void 0;
 		});
 		const paneCls = computed(() => [`${prefixCls}-pane`, { [`${prefixCls}-pane-scroll`]: hasPaneScrollbar.value }]);
+		/**
+		* 非激活时冻结面板内容：复用上次渲染的同一批 vnode 引用，Vue 渲染器对
+		* 相同引用会整体跳过 patch，避免切换标签时重型面板子树被反复重建和 diff。
+		* 面板激活期间始终渲染最新内容并同步缓存，重新激活时自动补上隐藏期间
+		* 错过的父作用域数据更新。
+		*/
+		const PaneContent = defineComponent({
+			name: "TabPaneContent",
+			setup() {
+				let cache = null;
+				return () => {
+					var _cache2, _slots$default3, _slots$default4;
+					if (active.value) {
+						var _slots$default, _slots$default2;
+						cache = (_slots$default = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)) !== null && _slots$default !== void 0 ? _slots$default : null;
+						return cache;
+					}
+					return (_cache2 = cache) !== null && _cache2 !== void 0 ? _cache2 : cache = (_slots$default3 = (_slots$default4 = slots.default) === null || _slots$default4 === void 0 ? void 0 : _slots$default4.call(slots)) !== null && _slots$default3 !== void 0 ? _slots$default3 : null;
+				};
+			}
+		});
 		const data = reactive({
 			key,
 			title,
@@ -119,9 +140,9 @@ var tab_pane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				key: 0,
 				"outer-class": `${unref(prefixCls)}-pane-scrollbar`
 			}, paneScrollbarProps.value), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 16, ["outer-class"])) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 2)) : createCommentVNode("", true)], 10, _hoisted_1);
+				default: withCtx(() => [createVNode(unref(PaneContent))]),
+				_: 1
+			}, 16, ["outer-class"])) : (openBlock(), createBlock(unref(PaneContent), { key: 1 }))], 2)) : createCommentVNode("", true)], 10, _hoisted_1);
 		};
 	}
 }));

package/es/tabs/tabs.vue_vue_type_script_setup_true_lang.js

@@ -130,6 +130,12 @@ var tabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			const index = tabKeys.value.indexOf(computedActiveKey.value);
 			return index === -1 ? 0 : index;
 		});
+		const configContext = inject(configProviderInjectionKey, void 0);
+		const rtl = computed(() => {
+			var _configContext$rtl;
+			return (_configContext$rtl = configContext === null || configContext === void 0 ? void 0 : configContext.rtl) !== null && _configContext$rtl !== void 0 ? _configContext$rtl : false;
+		});
+		const contentStyle = computed(() => ({ transform: `translateX(${rtl.value ? "" : "-"}${activeIndex.value * 100}%)` }));
 		const { scrollbarProps } = useScrollbar(toRef(props, "scrollbar"));
 		const paneScrollbar = computed(() => props.fullHeight && props.scrollbar !== false ? scrollbarProps.value : false);
 		const addItem = (id, data) => {
@@ -164,11 +170,6 @@ var tabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			if (props.autoSwitch) nextTick(() => handleChange(tabKeys.value[tabKeys.value.length - 1]));
 		};
 		const handleDelete = (key, event) => emit("delete", key, event);
-		const configContext = inject(configProviderInjectionKey, void 0);
-		const rtl = computed(() => {
-			var _configContext$rtl;
-			return (_configContext$rtl = configContext === null || configContext === void 0 ? void 0 : configContext.rtl) !== null && _configContext$rtl !== void 0 ? _configContext$rtl : false;
-		});
 		const cls = computed(() => [
 			prefixCls,
 			`${prefixCls}-${mergedDirection.value}`,
@@ -190,7 +191,7 @@ var tabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineContent), null, {
 				default: withCtx(() => [createElementVNode("div", { class: normalizeClass([`${unref(prefixCls)}-content`, { [`${unref(prefixCls)}-content-hide`]: props.hideContent }]) }, [createElementVNode("div", {
 					class: normalizeClass([`${unref(prefixCls)}-content-list`, { [`${unref(prefixCls)}-content-animation`]: props.animation }]),
-					style: normalizeStyle(rtl.value ? { marginRight: `-${activeIndex.value * 100}%` } : { marginLeft: `-${activeIndex.value * 100}%` })
+					style: normalizeStyle(contentStyle.value)
 				}, [createVNode(VNodeRenderer, { content: getChildren() }, null, 8, ["content"])], 6)], 2)]),
 				_: 1
 			}), createElementVNode("div", mergeProps(unref(attrs), { class: cls.value }), [

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "4.4.2",
+  "version": "4.4.3",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "4.4.3",
+  "version": "4.5.0",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",