@sdata/web-vue 3.12.0 → 3.14.0

package/es/back-top/back-top.vue_vue_type_script_setup_true_lang.js

@@ -89,7 +89,11 @@ var back_top_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					key: 0,
 					class: normalizeClass(unref(prefixCls)),
 					onClick: scrollToTop
-				}, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("button", { class: normalizeClass(`${unref(prefixCls)}-btn`) }, [createVNode(unref(IconToTop))], 2)])], 2)) : createCommentVNode("", true)]),
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("button", {
+					type: "button",
+					class: normalizeClass(`${unref(prefixCls)}-btn`),
+					"aria-label": "Back to top"
+				}, [createVNode(unref(IconToTop))], 2)])], 2)) : createCommentVNode("", true)]),
 				_: 3
 			});
 		};

package/es/back-top/style/index.css

@@ -32,7 +32,7 @@
   border-radius: var(--sd-border-radius-circle);
   outline: none;
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-back-top-btn:hover {
   background-color: rgb(var(--sd-primary-5));

package/es/back-top/style/index.scss

@@ -21,7 +21,8 @@ $backtop-prefix-cls: string.unquote('#{theme.$prefix}-back-top');
     border-radius: $backtop-button-border-radius;
     outline: none;
     cursor: pointer;
-    transition: all theme.$transition-duration-2 theme.$transition-timing-function-linear;
+    transition: background-color theme.$transition-duration-2
+      theme.$transition-timing-function-standard;
 
     &:hover {
       background-color: $backtop-button-color-bg_hover;

package/es/badge/badge.js

@@ -126,9 +126,12 @@ var badge_default = /* @__PURE__ */ defineComponent({
 					[`${prefixCls}-status-${statusValue}`]: statusValue,
 					[`${prefixCls}-color-${colorValue}`]: colorValue
 				}],
-				"style": mergedStyle
+				"style": mergedStyle,
+				"aria-hidden": "true"
 			}, null), textValue && createVNode("span", { "class": `${prefixCls}-status-text` }, [textValue])]);
 			if ((dotValue || colorValue) && countValue > 0) return createVNode("span", {
+				"role": "status",
+				"aria-label": String(countValue),
 				"class": [`${prefixCls}-dot`, { [`${prefixCls}-color-${colorValue}`]: colorValue }],
 				"style": mergedStyle
 			}, null);

package/es/badge/style/index.css

@@ -144,7 +144,7 @@
 
 @keyframes sd-badge-scale {
   from {
-    transform: scale(0, 0);
+    transform: scale(0.5, 0.5);
   }
   to {
     transform: scale(1, 1);
@@ -152,7 +152,7 @@
 }
 .badge-zoom-enter,
 .badge-zoom-appear {
-  transform: translate(50%, -50%) scale(0.2, 0.2);
+  transform: translate(50%, -50%) scale(0.5, 0.5);
   transform-origin: center;
 }
 
@@ -171,7 +171,7 @@
 }
 
 .badge-zoom-exit-active {
-  transform: translate(50%, -50%) scale(0.2, 0.2);
+  transform: translate(50%, -50%) scale(0.5, 0.5);
   transform-origin: center;
   opacity: 0;
   transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);

package/es/badge/style/index.scss

@@ -159,7 +159,7 @@ $badge-prefix-cls: string.unquote('#{theme.$prefix}-badge');
 
 @keyframes #{theme.$prefix}-badge-scale {
   from {
-    transform: scale(0, 0);
+    transform: scale(0.5, 0.5);
   }
 
   to {
@@ -169,7 +169,7 @@ $badge-prefix-cls: string.unquote('#{theme.$prefix}-badge');
 
 .badge-zoom-enter,
 .badge-zoom-appear {
-  transform: translate(50%, -50%) scale(0.2, 0.2);
+  transform: translate(50%, -50%) scale(0.5, 0.5);
   // opacity: 0;
   transform-origin: center;
 }
@@ -191,7 +191,7 @@ $badge-prefix-cls: string.unquote('#{theme.$prefix}-badge');
 }
 
 .badge-zoom-exit-active {
-  transform: translate(50%, -50%) scale(0.2, 0.2);
+  transform: translate(50%, -50%) scale(0.5, 0.5);
   transform-origin: center;
   opacity: 0;
   transition:

package/es/breadcrumb/breadcrumb.js

@@ -105,6 +105,7 @@ var breadcrumb_default = /* @__PURE__ */ defineComponent({
 		return () => {
 			return createVNode("div", {
 				"role": "list",
+				"aria-label": "Breadcrumb",
 				"class": prefixCls
 			}, [slots.default ? renderByChildren() : renderByRoutes()]);
 		};

package/es/button/button.vue.d.ts

@@ -1,19 +1,22 @@
 import type { PropType } from 'vue';
+import type { TooltipProps } from '../tooltip';
 import { Status, Size, BorderShape } from '../_utils/constant';
 import { ButtonTypes } from './constants';
-declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_17: {}, __VLS_19: {}, __VLS_21: {};
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {}, __VLS_24: {}, __VLS_26: {}, __VLS_28: {}, __VLS_31: {};
 type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_6) => any;
+    icon?: (props: typeof __VLS_13) => any;
 } & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_15) => any;
 } & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_17) => any;
 } & {
-    icon?: (props: typeof __VLS_17) => any;
+    icon?: (props: typeof __VLS_24) => any;
 } & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_26) => any;
 } & {
-    default?: (props: typeof __VLS_21) => any;
+    default?: (props: typeof __VLS_28) => any;
+} & {
+    tooltip?: (props: typeof __VLS_31) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     type: {
@@ -52,6 +55,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
     href: StringConstructor;
+    tooltip: {
+        type: PropType<string | TooltipProps>;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (_ev: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -91,6 +97,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
     href: StringConstructor;
+    tooltip: {
+        type: PropType<string | TooltipProps>;
+    };
 }>> & Readonly<{
     onClick?: ((_ev: MouseEvent) => any) | undefined;
 }>, {

package/es/button/button.vue_vue_type_script_setup_true_lang.js

@@ -5,8 +5,9 @@ import { getPrefixCls } from "../_utils/global-config.js";
 import { isString } from "../_utils/is.js";
 import IconLoading from "../icon/icon-loading/index.js";
 import { useSize } from "../_hooks/use-size.js";
+import Tooltip from "../tooltip/index.js";
 import { buttonGroupInjectionKey } from "./context.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, normalizeClass, onMounted, onUpdated, openBlock, ref, renderSlot, toRefs, unref } from "vue";
+import { cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, guardReactiveProps, inject, normalizeClass, normalizeProps, onMounted, onUpdated, openBlock, ref, renderSlot, resolveDynamicComponent, toRefs, unref, useSlots, withCtx } from "vue";
 //#region components/button/button.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["href"];
 var _hoisted_2 = { key: 2 };
@@ -94,7 +95,12 @@ var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		* @zh 设置跳转链接。设置此属性时，按钮渲染为a标签。
 		* @en Set up a jump link. When this property is set, the button is rendered as `<a>`
 		*/
-		href: String
+		href: String,
+		/**
+		* @zh 按钮的文字气泡配置。传入字符串时作为气泡内容；传入对象时可完整继承 Tooltip 的所有属性。
+		* @en Tooltip configuration for the button. A string is used as the tooltip content; an object inherits all Tooltip props.
+		*/
+		tooltip: { type: [String, Object] }
 	},
 	emits: ["click"],
 	setup(__props, { emit: __emit }) {
@@ -108,6 +114,24 @@ var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		*/
 		const { size, disabled } = toRefs(props);
 		const prefixCls = getPrefixCls("btn");
+		const PassThrough = defineComponent({
+			name: "ButtonPassThrough",
+			inheritAttrs: false,
+			setup: (_, { slots, attrs }) => () => {
+				var _slots$default;
+				const vnodes = (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
+				return (vnodes === null || vnodes === void 0 ? void 0 : vnodes.length) ? cloneVNode(vnodes[0], attrs) : void 0;
+			}
+		});
+		const slots = useSlots();
+		const hasTooltip = computed(() => props.tooltip != null || Boolean(slots.tooltip));
+		const tooltipWrapper = computed(() => hasTooltip.value ? Tooltip : PassThrough);
+		const tooltipBindings = computed(() => {
+			if (!hasTooltip.value) return;
+			const tooltip = props.tooltip;
+			if (isString(tooltip)) return { content: tooltip };
+			return tooltip !== null && tooltip !== void 0 ? tooltip : {};
+		});
 		const configContext = inject(configProviderInjectionKey, void 0);
 		const groupContext = inject(buttonGroupInjectionKey, void 0);
 		const autoInsertSpaceInButton = computed(() => Boolean(configContext === null || configContext === void 0 ? void 0 : configContext.autoInsertSpaceInButton));
@@ -159,35 +183,42 @@ var button_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			emit("click", ev);
 		};
 		return (_ctx, _cache) => {
-			return __props.href ? (openBlock(), createElementBlock("a", {
-				key: 0,
-				ref_key: "buttonRef",
-				ref: buttonRef,
-				class: normalizeClass([cls.value, { [`${unref(prefixCls)}-only-icon`]: _ctx.$slots.icon && !_ctx.$slots.default }]),
-				href: unref(mergedDisabled) || __props.loading ? void 0 : __props.href,
-				onClick: handleClick
-			}, [__props.loading || _ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
-				key: 0,
-				class: normalizeClass(`${unref(prefixCls)}-icon`)
-			}, [__props.loading ? (openBlock(), createBlock(unref(IconLoading), {
-				key: 0,
-				spin: ""
-			})) : renderSlot(_ctx.$slots, "icon", { key: 1 })], 2)) : createCommentVNode("", true), !isTwoCNChar.value ? renderSlot(_ctx.$slots, "default", { key: 1 }) : (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")]))], 10, _hoisted_1)) : (openBlock(), createElementBlock("button", {
-				key: 1,
-				ref_key: "buttonRef",
-				ref: buttonRef,
-				class: normalizeClass([cls.value, { [`${unref(prefixCls)}-only-icon`]: _ctx.$slots.icon && !_ctx.$slots.default }]),
-				type: __props.htmlType,
-				disabled: unref(mergedDisabled),
-				autofocus: __props.autofocus,
-				onClick: handleClick
-			}, [__props.loading || _ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
-				key: 0,
-				class: normalizeClass(`${unref(prefixCls)}-icon`)
-			}, [__props.loading ? (openBlock(), createBlock(unref(IconLoading), {
-				key: 0,
-				spin: true
-			})) : renderSlot(_ctx.$slots, "icon", { key: 1 })], 2)) : createCommentVNode("", true), !isTwoCNChar.value ? renderSlot(_ctx.$slots, "default", { key: 1 }) : (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "default")]))], 10, _hoisted_3));
+			return openBlock(), createBlock(resolveDynamicComponent(tooltipWrapper.value), normalizeProps(guardReactiveProps(tooltipBindings.value)), createSlots({
+				default: withCtx(() => [__props.href ? (openBlock(), createElementBlock("a", {
+					key: 0,
+					ref_key: "buttonRef",
+					ref: buttonRef,
+					class: normalizeClass([cls.value, { [`${unref(prefixCls)}-only-icon`]: _ctx.$slots.icon && !_ctx.$slots.default }]),
+					href: unref(mergedDisabled) || __props.loading ? void 0 : __props.href,
+					onClick: handleClick
+				}, [__props.loading || _ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-icon`)
+				}, [__props.loading ? (openBlock(), createBlock(unref(IconLoading), {
+					key: 0,
+					spin: ""
+				})) : renderSlot(_ctx.$slots, "icon", { key: 1 })], 2)) : createCommentVNode("", true), !isTwoCNChar.value ? renderSlot(_ctx.$slots, "default", { key: 1 }) : (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")]))], 10, _hoisted_1)) : (openBlock(), createElementBlock("button", {
+					key: 1,
+					ref_key: "buttonRef",
+					ref: buttonRef,
+					class: normalizeClass([cls.value, { [`${unref(prefixCls)}-only-icon`]: _ctx.$slots.icon && !_ctx.$slots.default }]),
+					type: __props.htmlType,
+					disabled: unref(mergedDisabled),
+					autofocus: __props.autofocus,
+					onClick: handleClick
+				}, [__props.loading || _ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-icon`)
+				}, [__props.loading ? (openBlock(), createBlock(unref(IconLoading), {
+					key: 0,
+					spin: true
+				})) : renderSlot(_ctx.$slots, "icon", { key: 1 })], 2)) : createCommentVNode("", true), !isTwoCNChar.value ? renderSlot(_ctx.$slots, "default", { key: 1 }) : (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "default")]))], 10, _hoisted_3))]),
+				_: 2
+			}, [_ctx.$slots.tooltip ? {
+				name: "content",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "tooltip")]),
+				key: "0"
+			} : void 0]), 1040);
 		};
 	}
 }));

package/es/button/index.d.ts

@@ -40,6 +40,9 @@ declare const Button: {
             default: boolean;
         };
         href: StringConstructor;
+        tooltip: {
+            type: import("vue").PropType<string | import("../tooltip/interface.ts").TooltipProps>;
+        };
     }>> & Readonly<{
         onClick?: ((_ev: MouseEvent) => any) | undefined;
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -95,6 +98,9 @@ declare const Button: {
             default: boolean;
         };
         href: StringConstructor;
+        tooltip: {
+            type: import("vue").PropType<string | import("../tooltip/interface.ts").TooltipProps>;
+        };
     }>> & Readonly<{
         onClick?: ((_ev: MouseEvent) => any) | undefined;
     }>, {}, {}, {}, {}, {
@@ -145,6 +151,9 @@ declare const Button: {
         default: boolean;
     };
     href: StringConstructor;
+    tooltip: {
+        type: import("vue").PropType<string | import("../tooltip/interface.ts").TooltipProps>;
+    };
 }>> & Readonly<{
     onClick?: ((_ev: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -169,6 +178,8 @@ declare const Button: {
         default?: (props: {}) => any;
     } & {
         default?: (props: {}) => any;
+    } & {
+        tooltip?: (props: {}) => any;
     };
 }) & {
     Group: {

package/es/button/interface.d.ts

@@ -1,3 +1,4 @@
+import type { TooltipProps } from '../tooltip';
 import { Size, Status, BorderShape } from '../_utils/constant';
 import { ButtonTypes } from './constants';
 export interface ButtonProps {
@@ -12,4 +13,5 @@ export interface ButtonProps {
     htmlType?: 'button' | 'submit' | 'reset';
     autofocus?: boolean;
     href?: string;
+    tooltip?: string | TooltipProps;
 }

package/es/button/style/index.css

@@ -32,7 +32,7 @@
   white-space: nowrap;
   outline: none;
   cursor: pointer;
-  transition: all 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), 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), transform 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
   appearance: none;
   user-select: none;
 }
@@ -40,7 +40,7 @@
   color: currentcolor;
 }
 .sd-btn:active {
-  transition: none;
+  transform: scale(0.97);
 }
 .sd-btn-long {
   display: flex;
@@ -80,13 +80,10 @@
   background: #fff;
   border-radius: inherit;
   opacity: 0.4;
-  transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
   content: "";
   pointer-events: none;
 }
-.sd-btn-loading-fixed-width {
-  transition: none;
-}
 .sd-btn-two-chinese-chars > *:not(svg) {
   margin-right: -0.3em;
   letter-spacing: 0.3em;
@@ -909,6 +906,9 @@
 .sd-btn-group .sd-btn-dashed:active {
   z-index: 2;
 }
+.sd-btn-group .sd-btn:active {
+  transform: none;
+}
 .sd-btn-group .sd-btn:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -923,4 +923,13 @@
 
 :where(body, [sd-theme])[sd-theme=dark] .sd-btn-primary.sd-btn-disabled {
   color: rgba(255, 255, 255, 0.3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sd-btn:active {
+    transform: none;
+  }
+  .sd-btn .sd-icon-loading {
+    animation-duration: 3s;
+  }
 }

package/es/button/style/index.scss

@@ -63,7 +63,12 @@ $token-var-aliases: (
   white-space: nowrap;
   outline: none;
   cursor: pointer;
-  transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+  // 状态切换只过渡颜色与按压形变；box-shadow（聚焦环）保持即时切换以保证可见性
+  transition:
+    color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+    background-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+    border-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
+    transform theme.$transition-duration-1 theme.$transition-timing-function-standard;
   appearance: none;
   user-select: none;
 
@@ -72,7 +77,7 @@ $token-var-aliases: (
   }
 
   &:active {
-    transition: none;
+    transform: scale(0.97);
   }
 
   &-long {
@@ -119,16 +124,12 @@ $token-var-aliases: (
       background: #fff;
       border-radius: inherit;
       opacity: 0.4;
-      transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-standard;
       content: '';
       pointer-events: none;
     }
   }
 
-  &-loading-fixed-width {
-    transition: none;
-  }
-
   &-two-chinese-chars > *:not(svg) {
     margin-right: -0.3em;
     letter-spacing: 0.3em;
@@ -324,6 +325,11 @@ $token-var-aliases: (
     }
   }
 
+  // 按钮组是连体控件，单个按钮按压形变会与相邻按钮产生缝隙，故禁用形变
+  .#{$btn-prefix-cls}:active {
+    transform: none;
+  }
+
   .#{$btn-prefix-cls}:first-child {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -344,3 +350,15 @@ $token-var-aliases: (
     color: rgb(255 255 255 / 30%);
   }
 }
+
+// 减少动态偏好：去掉按压形变（位移），保留颜色过渡（有助于理解状态）；
+// 放慢加载图标旋转，避免快速循环带来的不适，但仍可表达加载态
+@media (prefers-reduced-motion: reduce) {
+  .#{$btn-prefix-cls}:active {
+    transform: none;
+  }
+
+  .#{$btn-prefix-cls} .#{theme.$prefix}-icon-loading {
+    animation-duration: 3s;
+  }
+}

package/es/calendar/style/event.scss

@@ -56,7 +56,7 @@ $calendar-css-prefix: string.unquote('--#{theme.$prefix}-calendar');
 }
 
 [class*='-calendar-delete-btn-enter-from'] {
-  transform: scale(0) rotate(-90deg);
+  transform: scale(0.5) rotate(-90deg);
 }
 
 [class*='-calendar-delete-btn-enter-to'] {
@@ -64,6 +64,6 @@ $calendar-css-prefix: string.unquote('--#{theme.$prefix}-calendar');
 }
 
 [class*='-calendar-delete-btn-leave-active'] {
-  transform: scale(0);
+  transform: scale(0.5);
   transition: 0.3s ease-in-out;
 }

package/es/calendar/style/index.css

@@ -1626,7 +1626,7 @@
 }
 
 [class*=-calendar-delete-btn-enter-from] {
-  transform: scale(0) rotate(-90deg);
+  transform: scale(0.5) rotate(-90deg);
 }
 
 [class*=-calendar-delete-btn-enter-to] {
@@ -1634,6 +1634,6 @@
 }
 
 [class*=-calendar-delete-btn-leave-active] {
-  transform: scale(0);
+  transform: scale(0.5);
   transition: 0.3s ease-in-out;
 }