@sdata/web-vue 3.12.0 → 3.14.0

package/es/tabs/index.d.ts

@@ -71,6 +71,14 @@ declare const Tabs: {
             type: import("vue").PropType<import("./interface").ScrollPosition>;
             default: string;
         };
+        fullHeight: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        scrollbar: {
+            type: import("vue").PropType<boolean | import("../index.ts").ScrollbarProps>;
+            default: boolean;
+        };
     }>> & Readonly<{
         onDelete?: ((_key: string | number, _ev: Event) => any) | undefined;
         onAdd?: ((_ev: Event) => any) | undefined;
@@ -88,9 +96,11 @@ declare const Tabs: {
         trigger: import("./interface").TabTriggerEvent;
         position: import("./interface").TabsPosition;
         direction: "horizontal" | "vertical";
+        scrollbar: boolean | import("../index.ts").ScrollbarProps;
         activeKey: string | number;
         animation: boolean;
         justify: boolean;
+        fullHeight: boolean;
         destroyOnHide: boolean;
         defaultActiveKey: string | number;
         editable: boolean;
@@ -175,6 +185,14 @@ declare const Tabs: {
             type: import("vue").PropType<import("./interface").ScrollPosition>;
             default: string;
         };
+        fullHeight: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        scrollbar: {
+            type: import("vue").PropType<boolean | import("../index.ts").ScrollbarProps>;
+            default: boolean;
+        };
     }>> & Readonly<{
         onDelete?: ((_key: string | number, _ev: Event) => any) | undefined;
         onAdd?: ((_ev: Event) => any) | undefined;
@@ -186,9 +204,11 @@ declare const Tabs: {
         trigger: import("./interface").TabTriggerEvent;
         position: import("./interface").TabsPosition;
         direction: "horizontal" | "vertical";
+        scrollbar: boolean | import("../index.ts").ScrollbarProps;
         activeKey: string | number;
         animation: boolean;
         justify: boolean;
+        fullHeight: boolean;
         destroyOnHide: boolean;
         defaultActiveKey: string | number;
         editable: boolean;
@@ -270,6 +290,14 @@ declare const Tabs: {
         type: import("vue").PropType<import("./interface").ScrollPosition>;
         default: string;
     };
+    fullHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollbar: {
+        type: import("vue").PropType<boolean | import("../index.ts").ScrollbarProps>;
+        default: boolean;
+    };
 }>> & Readonly<{
     onDelete?: ((_key: string | number, _ev: Event) => any) | undefined;
     onAdd?: ((_ev: Event) => any) | undefined;
@@ -287,9 +315,11 @@ declare const Tabs: {
     trigger: import("./interface").TabTriggerEvent;
     position: import("./interface").TabsPosition;
     direction: "horizontal" | "vertical";
+    scrollbar: boolean | import("../index.ts").ScrollbarProps;
     activeKey: string | number;
     animation: boolean;
     justify: boolean;
+    fullHeight: boolean;
     destroyOnHide: boolean;
     defaultActiveKey: string | number;
     editable: boolean;
@@ -369,6 +399,8 @@ declare const Tabs: {
     }, {}, 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;
         };
     });
     install: (app: App, options?: SDOptions) => void;

package/es/tabs/style/index.css

@@ -113,7 +113,7 @@
   line-height: 1.5715;
   outline: none;
   cursor: pointer;
-  transition: color 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tabs-tab-title {
   display: inline-block;
@@ -169,7 +169,7 @@
   background-color: transparent;
   border-radius: var(--sd-border-radius-small);
   opacity: 1;
-  transition: background-color 0.2s cubic-bezier(0, 0, 1, 1), opacity 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   content: "";
 }
 .sd-tabs-nav-type-line .sd-tabs-tab:hover .sd-tabs-tab-title::before {
@@ -195,7 +195,7 @@
   padding: 4px 16px;
   font-size: 14px;
   border: 1px solid var(--sd-color-neutral-3);
-  transition: padding 0.2s cubic-bezier(0, 0, 1, 1), color 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tabs-nav-type-card .sd-tabs-tab-closable, .sd-tabs-nav-type-card-gutter .sd-tabs-tab-closable {
   padding-right: 12px;
@@ -370,7 +370,7 @@
   height: 14px;
   background-color: var(--sd-color-fill-3);
   transform: translateY(-50%);
-  transition: all 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   content: "";
 }
 
@@ -407,7 +407,7 @@
   border-top: none;
 }
 .sd-tabs-content-animation {
-  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: margin 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tabs-horizontal.sd-tabs-justify {
   display: flex;
@@ -420,6 +420,35 @@
   height: 100%;
 }
 
+.sd-tabs-horizontal.sd-tabs-full-height {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.sd-tabs-horizontal.sd-tabs-full-height > .sd-tabs-nav {
+  flex-shrink: 0;
+}
+.sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-content {
+  flex: 1;
+  min-height: 0;
+}
+.sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-content-list {
+  height: 100%;
+}
+.sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-content-item-active {
+  height: 100%;
+}
+.sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-pane {
+  height: 100%;
+  overflow: auto;
+}
+.sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-pane-scroll {
+  overflow: hidden;
+}
+.sd-tabs-horizontal.sd-tabs-full-height .sd-tabs-pane-scrollbar {
+  height: 100%;
+}
+
 .sd-tabs-nav-size-mini.sd-tabs-nav-type-line .sd-tabs-nav-extra {
   font-size: 12px;
   line-height: 32px;

package/es/tabs/style/index.scss

@@ -181,7 +181,7 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
     line-height: 1.5715;
     outline: none;
     cursor: pointer;
-    transition: color theme.$transition-duration-2 theme.$transition-timing-function-linear;
+    transition: color theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
     &-title {
       display: inline-block;
@@ -261,8 +261,8 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
         border-radius: $tabs-line-border-radius;
         opacity: 1;
         transition:
-          background-color theme.$transition-duration-2 theme.$transition-timing-function-linear,
-          opacity theme.$transition-duration-2 theme.$transition-timing-function-linear;
+          background-color theme.$transition-duration-2 theme.$transition-timing-function-standard,
+          opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
         content: '';
       }
     }
@@ -318,8 +318,8 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
       font-size: $tabs-size-default-font-size_card;
       border: $tabs-card-border-width solid $tabs-card-color-title-border;
       transition:
-        padding theme.$transition-duration-2 theme.$transition-timing-function-linear,
-        color theme.$transition-duration-2 theme.$transition-timing-function-linear;
+        padding theme.$transition-duration-2 theme.$transition-timing-function-standard,
+        color theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
       &-closable {
         padding-right: $tabs-card-padding-title-right_editable;
@@ -574,7 +574,7 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
         height: $tabs-capsule-size-separator-height;
         background-color: $tabs-capsule-color-separator-bg;
         transform: translateY(-50%);
-        transition: all theme.$transition-duration-2 theme.$transition-timing-function-linear;
+        transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
         content: '';
       }
     }
@@ -627,7 +627,7 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
   }
 
   &-content-animation {
-    transition: all theme.$transition-duration-2 theme.$transition-timing-function-standard;
+    transition: margin theme.$transition-duration-2 theme.$transition-timing-function-standard;
   }
 
   &-horizontal#{&}-justify {
@@ -643,6 +643,44 @@ $tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
   }
 }
 
+// full-height：撑满父容器高度（仅水平方向），内容区域自动滚动
+.#{$tabs-prefix-cls}-horizontal.#{$tabs-prefix-cls}-full-height {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  > .#{$tabs-prefix-cls}-nav {
+    flex-shrink: 0;
+  }
+
+  .#{$tabs-prefix-cls}-content {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .#{$tabs-prefix-cls}-content-list {
+    height: 100%;
+  }
+
+  .#{$tabs-prefix-cls}-content-item-active {
+    height: 100%;
+  }
+
+  .#{$tabs-prefix-cls}-pane {
+    height: 100%;
+    overflow: auto;
+  }
+
+  // scrollbar !== false：使用 Scrollbar 组件，pane 不再原生滚动
+  .#{$tabs-prefix-cls}-pane-scroll {
+    overflow: hidden;
+  }
+
+  .#{$tabs-prefix-cls}-pane-scrollbar {
+    height: 100%;
+  }
+}
+
 @mixin for($data, $i: 1) {
   @if ($i <= list.length($data)) {
     $size: list.nth($data, $i);

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

@@ -1,6 +1,8 @@
-declare var __VLS_1: {};
+declare var __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     title: StringConstructor;

package/es/tabs/tab-pane.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,16 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
+import Scrollbar from "../scrollbar/index.js";
 import { tabsInjectionKey } from "./context.js";
-import { computed, createCommentVNode, createElementBlock, defineComponent, getCurrentInstance, inject, normalizeClass, onBeforeUnmount, onUpdated, openBlock, reactive, ref, renderSlot, toRefs, unref, useSlots, watch } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, getCurrentInstance, inject, mergeProps, normalizeClass, onBeforeUnmount, onUpdated, openBlock, reactive, ref, renderSlot, toRefs, unref, useSlots, watch, withCtx } from "vue";
 //#region components/tabs/tab-pane.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"aria-labelledby",
+	"aria-hidden",
+	"tabindex",
+	"inert"
+];
 var tab_pane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "TabPane" }), {}, {
 	__name: "tab-pane",
 	props: {
@@ -52,7 +60,22 @@ var tab_pane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const itemRef = ref();
 		const key = computed(() => instance === null || instance === void 0 ? void 0 : instance.vnode.key);
 		const active = computed(() => key.value === tabsCtx.activeKey);
+		const tabsId = computed(() => {
+			var _tabsCtx$tabsId;
+			return (_tabsCtx$tabsId = tabsCtx.tabsId) !== null && _tabsCtx$tabsId !== void 0 ? _tabsCtx$tabsId : "";
+		});
+		const panelId = computed(() => `${tabsId.value}-${key.value}-panel`);
+		const tabLabelledBy = computed(() => `${tabsId.value}-${key.value}-tab`);
 		const mounted = ref(tabsCtx.lazyLoad ? active.value : true);
+		const paneScrollbarProps = computed(() => {
+			const { scrollbar } = tabsCtx;
+			return scrollbar === false || scrollbar === void 0 ? {} : scrollbar;
+		});
+		const hasPaneScrollbar = computed(() => {
+			const { scrollbar } = tabsCtx;
+			return scrollbar !== false && scrollbar !== void 0;
+		});
+		const paneCls = computed(() => [`${prefixCls}-pane`, { [`${prefixCls}-pane-scroll`]: hasPaneScrollbar.value }]);
 		const data = reactive({
 			key,
 			title,
@@ -82,11 +105,23 @@ var tab_pane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			return openBlock(), createElementBlock("div", {
 				ref_key: "itemRef",
 				ref: itemRef,
-				class: normalizeClass([`${unref(prefixCls)}-content-item`, { [`${unref(prefixCls)}-content-item-active`]: active.value }])
+				class: normalizeClass([`${unref(prefixCls)}-content-item`, { [`${unref(prefixCls)}-content-item-active`]: active.value }]),
+				role: "tabpanel",
+				id: panelId.value,
+				"aria-labelledby": tabLabelledBy.value,
+				"aria-hidden": active.value ? void 0 : "true",
+				tabindex: active.value ? 0 : void 0,
+				inert: active.value ? void 0 : true
 			}, [mounted.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				class: normalizeClass(`${unref(prefixCls)}-pane`)
-			}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true)], 2);
+				class: normalizeClass(paneCls.value)
+			}, [hasPaneScrollbar.value ? (openBlock(), createBlock(unref(Scrollbar), mergeProps({
+				key: 0,
+				"outer-class": `${unref(prefixCls)}-pane-scrollbar`
+			}, paneScrollbarProps.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["outer-class"])) : renderSlot(_ctx.$slots, "default", { key: 1 })], 2)) : createCommentVNode("", true)], 10, _hoisted_1);
 		};
 	}
 }));

package/es/tabs/tabs-nav.js

@@ -4,6 +4,7 @@ import { isNumber, isUndefined } from "../_utils/is.js";
 import resize_observer_default from "../_components/resize-observer.js";
 import { off, on } from "../_utils/dom.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import IconPlus from "../icon/icon-plus/index.js";
 import tabs_button_default from "./tabs-button.js";
 import tabs_nav_ink_default from "./tabs-nav-ink.js";
@@ -171,6 +172,35 @@ var tabs_nav_default = /* @__PURE__ */ defineComponent({
 			const scrollDirection = type === "previous" !== isRtlHorizontal.value ? -1 : 1;
 			setOffset(offset.value + scrollDirection * wrapperLength.value);
 		};
+		const focusAndActivate = (key, ev) => {
+			const el = tabsRef.value[key];
+			if (el instanceof HTMLElement) el.focus();
+			emit("click", key, ev);
+		};
+		const handleListKeydown = (ev) => {
+			const enabled = props.tabs.filter((t) => !t.disabled);
+			if (enabled.length === 0) return;
+			const len = enabled.length;
+			const currentIdx = Math.max(0, enabled.findIndex((t) => t.key === activeKey.value));
+			let nextIdx = currentIdx;
+			const key = ev.key;
+			if (direction.value === "vertical") if (key === KEYBOARD_KEY.ARROW_DOWN) nextIdx = currentIdx + 1;
+			else if (key === KEYBOARD_KEY.ARROW_UP) nextIdx = currentIdx - 1;
+			else if (key === KEYBOARD_KEY.HOME) nextIdx = 0;
+			else if (key === KEYBOARD_KEY.END) nextIdx = len - 1;
+			else return;
+			else {
+				const rtl = isRtlHorizontal.value;
+				if (key === KEYBOARD_KEY.ARROW_RIGHT) nextIdx = rtl ? currentIdx - 1 : currentIdx + 1;
+				else if (key === KEYBOARD_KEY.ARROW_LEFT) nextIdx = rtl ? currentIdx + 1 : currentIdx - 1;
+				else if (key === KEYBOARD_KEY.HOME) nextIdx = 0;
+				else if (key === KEYBOARD_KEY.END) nextIdx = len - 1;
+				else return;
+			}
+			ev.preventDefault();
+			nextIdx = (nextIdx % len + len) % len;
+			focusAndActivate(enabled[nextIdx].key, ev);
+		};
 		const handleResize = () => {
 			getSize();
 			if (inkRef.value) inkRef.value.$forceUpdate();
@@ -229,7 +259,10 @@ var tabs_nav_default = /* @__PURE__ */ defineComponent({
 				}, [createVNode(resize_observer_default, { "onResize": handleResize }, { default: () => [createVNode("div", {
 					"ref": listRef,
 					"class": listCls.value,
-					"style": listStyle.value
+					"style": listStyle.value,
+					"role": "tablist",
+					"aria-orientation": direction.value === "vertical" ? "vertical" : "horizontal",
+					"onKeydown": handleListKeydown
 				}, [props.tabs.map((tab) => createVNode(tabs_tab_default, {
 					"key": tab.key,
 					"ref": (component) => {

package/es/tabs/tabs-tab.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,18 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import IconClose from "../icon/icon-close/index.js";
 import { tabsInjectionKey } from "./context.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, openBlock, renderSlot, unref, withCtx, withModifiers } from "vue";
 //#region components/tabs/tabs-tab.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"tabindex",
+	"aria-selected",
+	"aria-disabled",
+	"aria-controls"
+];
 var tabs_tab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "TabsTab" }), {}, {
 	__name: "tabs-tab",
 	props: {
@@ -21,11 +29,21 @@ var tabs_tab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const emit = __emit;
 		const prefixCls = getPrefixCls("tabs-tab");
 		const tabsCtx = inject(tabsInjectionKey, {});
+		const tabsId = computed(() => {
+			var _tabsCtx$tabsId;
+			return (_tabsCtx$tabsId = tabsCtx.tabsId) !== null && _tabsCtx$tabsId !== void 0 ? _tabsCtx$tabsId : "";
+		});
+		const tabId = computed(() => `${tabsId.value}-${props.tab.key}-tab`);
+		const panelId = computed(() => `${tabsId.value}-${props.tab.key}-panel`);
 		const handleClick = (e) => {
 			if (!props.tab.disabled) emit("click", props.tab.key, e);
 		};
 		const onKeyDown = (ev) => {
-			if (ev.key === "Enter") handleClick(ev);
+			if (ev.key === KEYBOARD_KEY.ENTER) handleClick(ev);
+			else if (ev.key === KEYBOARD_KEY.SPACE) {
+				ev.preventDefault();
+				handleClick(ev);
+			}
 		};
 		const eventHandlers = computed(() => {
 			return Object.assign(tabsCtx.trigger === "click" ? { onClick: handleClick } : { onMouseover: handleClick }, { onKeydown: onKeyDown });
@@ -40,8 +58,13 @@ var tabs_tab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		}]);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
-				tabindex: "0",
-				class: cls.value
+				id: tabId.value,
+				class: cls.value,
+				role: "tab",
+				tabindex: __props.active && !__props.tab.disabled ? 0 : -1,
+				"aria-selected": __props.active,
+				"aria-disabled": __props.tab.disabled || void 0,
+				"aria-controls": panelId.value
 			}, eventHandlers.value), [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-title`) }, [renderSlot(_ctx.$slots, "default")], 2), __props.editable && __props.tab.closable ? (openBlock(), createBlock(icon_hover_default, {
 				key: 0,
 				class: normalizeClass(`${unref(prefixCls)}-close-btn`),
@@ -49,7 +72,7 @@ var tabs_tab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			}, {
 				default: withCtx(() => [createVNode(unref(IconClose))]),
 				_: 1
-			}, 8, ["class"])) : createCommentVNode("", true)], 16);
+			}, 8, ["class"])) : createCommentVNode("", true)], 16, _hoisted_1);
 		};
 	}
 }));

package/es/tabs/tabs.d.ts

@@ -1,5 +1,6 @@
 import type { PropType } from 'vue';
 import type { Direction, Size } from '../_utils/constant';
+import type { ScrollbarProps } from '../scrollbar';
 import type { TabsPosition, TabsType, TabTriggerEvent, ScrollPosition } from './interface';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     activeKey: {
@@ -69,6 +70,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<ScrollPosition>;
         default: string;
     };
+    fullHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollbar: {
+        type: PropType<boolean | ScrollbarProps>;
+        default: boolean;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:activeKey': (_key: string | number) => true;
     change: (_key: string | number) => true;
@@ -143,6 +152,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<ScrollPosition>;
         default: string;
     };
+    fullHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollbar: {
+        type: PropType<boolean | ScrollbarProps>;
+        default: boolean;
+    };
 }>> & Readonly<{
     onDelete?: ((_key: string | number, _ev: Event) => any) | undefined;
     onAdd?: ((_ev: Event) => any) | undefined;
@@ -154,9 +171,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     trigger: TabTriggerEvent;
     position: TabsPosition;
     direction: "horizontal" | "vertical";
+    scrollbar: boolean | ScrollbarProps;
     activeKey: string | number;
     animation: boolean;
     justify: boolean;
+    fullHeight: boolean;
     destroyOnHide: boolean;
     defaultActiveKey: string | number;
     editable: boolean;

package/es/tabs/tabs.js

@@ -2,10 +2,11 @@ import { configProviderInjectionKey } from "../config-provider/context.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isUndefined } from "../_utils/is.js";
 import { useSize } from "../_hooks/use-size.js";
+import { useScrollbar } from "../_hooks/use-scrollbar.js";
 import { useChildrenComponents } from "../_hooks/use-children-components.js";
 import { tabsInjectionKey } from "./context.js";
 import tabs_nav_default from "./tabs-nav.js";
-import { computed, createVNode, defineComponent, inject, nextTick, provide, reactive, ref, toRefs } from "vue";
+import { computed, createVNode, defineComponent, getCurrentInstance, inject, nextTick, provide, reactive, ref, toRef, toRefs } from "vue";
 //#region components/tabs/tabs.tsx
 var tabs_default = /* @__PURE__ */ defineComponent({
 	name: "Tabs",
@@ -154,6 +155,23 @@ var tabs_default = /* @__PURE__ */ defineComponent({
 		scrollPosition: {
 			type: [String, Number],
 			default: "auto"
+		},
+		/**
+		* @zh 是否高度撑满父容器（仅在水平方向生效，内容区域自动滚动）
+		* @en Whether to fill the height of the parent container (only effective in horizontal direction, the content area scrolls automatically)
+		*/
+		fullHeight: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 内容区域是否使用 Scrollbar 组件滚动，可传入对象自定义滚动条配置。为 false 时使用原生 overflow 滚动。仅 `full-height` 为 true 时生效
+		* @en Whether the content area uses the Scrollbar component for scrolling, an object can be passed to customize the scrollbar. When false, native overflow scrolling is used. Only effective when `full-height` is true
+		* @defaultValue true
+		*/
+		scrollbar: {
+			type: [Boolean, Object],
+			default: true
 		}
 	},
 	emits: {
@@ -190,6 +208,7 @@ var tabs_default = /* @__PURE__ */ defineComponent({
 	setup(props, { emit, slots }) {
 		const { size, lazyLoad, destroyOnHide, trigger } = toRefs(props);
 		const prefixCls = getPrefixCls("tabs");
+		const tabsId = `${prefixCls}-${getCurrentInstance().uid}`;
 		const { mergedSize } = useSize(size);
 		const mergedPosition = computed(() => props.direction === "vertical" ? "left" : props.position);
 		const mergedDirection = computed(() => ["left", "right"].includes(mergedPosition.value) ? "vertical" : "horizontal");
@@ -222,13 +241,16 @@ var tabs_default = /* @__PURE__ */ defineComponent({
 			if (index === -1) return 0;
 			return index;
 		});
+		const { scrollbarProps } = useScrollbar(toRef(props, "scrollbar"));
 		provide(tabsInjectionKey, reactive({
 			lazyLoad,
 			destroyOnHide,
 			activeKey: computedActiveKey,
 			addItem,
 			removeItem,
-			trigger
+			trigger,
+			scrollbar: computed(() => props.fullHeight && props.scrollbar !== false ? scrollbarProps.value : false),
+			tabsId
 		}));
 		const handleChange = (key) => {
 			if (key !== computedActiveKey.value) {
@@ -270,6 +292,7 @@ var tabs_default = /* @__PURE__ */ defineComponent({
 			`${prefixCls}-size-${mergedSize.value}`,
 			{
 				[`${prefixCls}-justify`]: props.justify,
+				[`${prefixCls}-full-height`]: props.fullHeight,
 				[`${prefixCls}-rtl`]: rtl.value
 			}
 		]);

package/es/tag/index.d.ts

@@ -74,12 +74,12 @@ declare const Tag: {
             default: undefined;
         };
     }>> & Readonly<{
-        onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
+        onClose?: ((_ev: KeyboardEvent | MouseEvent) => any) | undefined;
         "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
         "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
         onCheck?: ((_checked: boolean, _ev: MouseEvent) => any) | undefined;
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-        close: (_ev: MouseEvent | KeyboardEvent) => any;
+        close: (_ev: KeyboardEvent | MouseEvent) => any;
         "update:visible": (_visible: boolean) => any;
         "update:checked": (_checked: boolean) => any;
         check: (_checked: boolean, _ev: MouseEvent) => any;
@@ -179,7 +179,7 @@ declare const Tag: {
             default: undefined;
         };
     }>> & Readonly<{
-        onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
+        onClose?: ((_ev: KeyboardEvent | MouseEvent) => any) | undefined;
         "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
         "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
         onCheck?: ((_checked: boolean, _ev: MouseEvent) => any) | undefined;
@@ -276,12 +276,12 @@ declare const Tag: {
         default: undefined;
     };
 }>> & Readonly<{
-    onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
+    onClose?: ((_ev: KeyboardEvent | MouseEvent) => any) | undefined;
     "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
     "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
     onCheck?: ((_checked: boolean, _ev: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (_ev: MouseEvent | KeyboardEvent) => any;
+    close: (_ev: KeyboardEvent | MouseEvent) => any;
     "update:visible": (_visible: boolean) => any;
     "update:checked": (_checked: boolean) => any;
     check: (_checked: boolean, _ev: MouseEvent) => any;

package/es/tag/style/index.css

@@ -39,7 +39,7 @@
 }
 .sd-tag-checkable {
   cursor: pointer;
-  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-tag-checkable:hover {
   background-color: var(--sd-color-fill-2);

package/es/tag/style/index.scss

@@ -68,7 +68,9 @@ $colors:
 
   &-checkable {
     cursor: pointer;
-    transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    transition:
+      background-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+      border-color theme.$transition-duration-1 theme.$transition-timing-function-standard;
   }
 
   &-checkable:hover {

package/es/tag/tag.vue.d.ts

@@ -84,7 +84,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (_ev: MouseEvent | KeyboardEvent) => any;
+    close: (_ev: KeyboardEvent | MouseEvent) => any;
     "update:visible": (_visible: boolean) => any;
     "update:checked": (_checked: boolean) => any;
     check: (_checked: boolean, _ev: MouseEvent) => any;
@@ -160,7 +160,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
     };
 }>> & Readonly<{
-    onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
+    onClose?: ((_ev: KeyboardEvent | MouseEvent) => any) | undefined;
     "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
     "onUpdate:checked"?: ((_checked: boolean) => any) | undefined;
     onCheck?: ((_checked: boolean, _ev: MouseEvent) => any) | undefined;