@sdata/web-vue 3.12.0 → 3.14.0

package/es/trigger/trigger.js

@@ -4,6 +4,7 @@ import { getPrefixCls } from "../_utils/global-config.js";
 import { isEmptyChildren, mergeFirstChild } from "../_utils/vue-utils.js";
 import { off, on } from "../_utils/dom.js";
 import { throttleByRaf } from "../_utils/throttle-by-raf.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import { omit } from "../_utils/omit.js";
 import client_only_default from "../_components/client-only.js";
 import { useFirstElement } from "../_hooks/use-first-element.js";
@@ -14,7 +15,7 @@ import { useResizeObserver as useResizeObserver$1 } from "../_hooks/use-resize-o
 import { useTeleportContainer } from "../_hooks/use-teleport-container.js";
 import { triggerInjectionKey } from "./context.js";
 import { getArrowStyle, getElementScrollRect, getPopupStyle, getScrollElements, getTransformOrigin } from "./utils.js";
-import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, inject, mergeProps, nextTick, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, reactive, ref, vShow, watch, withDirectives } from "vue";
+import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, getCurrentInstance, inject, mergeProps, nextTick, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, reactive, ref, vShow, watch, withDirectives } from "vue";
 import { onClickOutside, useEventListener } from "@vueuse/core";
 //#region components/trigger/trigger.tsx
 var TRIGGER_EVENTS = [
@@ -301,6 +302,31 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		scrollToCloseDistance: {
 			type: Number,
 			default: 0
+		},
+		/**
+		* @zh 是否支持 ESC 键关闭弹出层
+		* @en Whether to close the popup with the ESC key
+		*/
+		escToClose: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 弹出层类型，用于触发器的 `aria-haspopup`。设置后会自动给触发器加 `aria-haspopup` / `aria-expanded` / `aria-controls`，并给弹出层加 id。
+		* @en Popup type for the trigger's `aria-haspopup`. When set, the trigger automatically gets `aria-haspopup` / `aria-expanded` / `aria-controls`, and the popup gets an id.
+		* @values true, 'menu', 'listbox', 'tree', 'grid', 'dialog'
+		*/
+		ariaHasPopup: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		/**
+		* @zh 是否给触发器加 `aria-describedby` 指向弹出层（tooltip 模式用）。弹出层显示时才挂。
+		* @en Whether to add `aria-describedby` on the trigger pointing to the popup (tooltip pattern). Only applied while the popup is visible.
+		*/
+		ariaDescribedbyPopup: {
+			type: Boolean,
+			default: false
 		}
 	},
 	emits: {
@@ -333,6 +359,7 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 	setup(props, { emit, slots, attrs }) {
 		const triggerEventAttrs = attrs;
 		const prefixCls = getPrefixCls("trigger");
+		const popupId = `${prefixCls}-popup-${getCurrentInstance().uid}`;
 		const popupAttrs = computed(() => omit(attrs, TRIGGER_EVENTS));
 		const configCtx = inject(configProviderInjectionKey, void 0);
 		const themePopupContainer = inject(themePopupContainerInjectionKey, void 0);
@@ -361,6 +388,16 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			var _props$popupVisible;
 			return (_props$popupVisible = props.popupVisible) !== null && _props$popupVisible !== void 0 ? _props$popupVisible : popupVisible.value;
 		});
+		const firstChildAria = computed(() => {
+			const aria = {};
+			if (props.ariaHasPopup !== void 0) {
+				aria["aria-haspopup"] = props.ariaHasPopup === true ? "true" : props.ariaHasPopup;
+				aria["aria-expanded"] = computedVisible.value;
+				aria["aria-controls"] = computedVisible.value ? popupId : void 0;
+			}
+			if (props.ariaDescribedbyPopup) aria["aria-describedby"] = computedVisible.value ? popupId : void 0;
+			return aria;
+		});
 		const { teleportContainer, containerRef } = useTeleportContainer({
 			popupContainer: mergedPopupContainer,
 			visible: computedVisible,
@@ -551,7 +588,12 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			if (getChildElements().some((element) => element.contains(target))) return;
 			changeVisible(false);
 		};
-		useEventListener(computed(() => typeof document === "undefined" ? void 0 : document), "contextmenu", handleOutsideContextmenu, { capture: true });
+		const documentRef = computed(() => typeof document === "undefined" ? void 0 : document);
+		useEventListener(documentRef, "contextmenu", handleOutsideContextmenu, { capture: true });
+		const handleKeydown = (ev) => {
+			if (props.escToClose && computedVisible.value && ev.key === KEYBOARD_KEY.ESC) changeVisible(false);
+		};
+		useEventListener(documentRef, "keydown", handleKeydown);
 		const isExceedThreshold = (oldPosition, element) => {
 			const [scrollTop, scrollLeft] = oldPosition;
 			const { scrollTop: newScrollTop, scrollLeft: newScrollLeft } = element;
@@ -663,19 +705,19 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		return () => {
 			var _slots$default, _slots$default2;
 			children.value = (_slots$default = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)) !== null && _slots$default !== void 0 ? _slots$default : [];
-			mergeFirstChild(children.value, {
-				class: triggerCls.value,
+			mergeFirstChild(children.value, _objectSpread2(_objectSpread2({ class: triggerCls.value }, firstChildAria.value), {}, {
 				onClick: handleClick,
 				onMouseenter: handleMouseEnter,
 				onMouseleave: handleMouseLeave,
 				onFocusin: handleFocusin,
 				onFocusout: handleFocusout,
 				onContextmenu: handleContextmenuWithContext
-			});
+			}));
 			return createVNode(Fragment, null, [props.autoFixPosition ? createVNode(resize_observer_v2_default, { "onResize": onTargetResize }, { default: () => [children.value] }) : children.value, createVNode(client_only_default, null, { default: () => [createVNode(Teleport, {
 				"to": teleportContainer.value,
 				"disabled": !props.renderToBody
 			}, { default: () => [(!props.unmountOnClose || computedVisible.value || mounted.value) && !hidePopup.value && createVNode(resize_observer_v2_default, { "onResize": handleResize }, { default: () => [createVNode("div", mergeProps({
+				"id": popupId,
 				"ref": popupRef,
 				"class": [`${prefixCls}-popup`, `${prefixCls}-position-${popupPosition.value}`],
 				"style": _objectSpread2(_objectSpread2({}, popupStyle.value), {}, {

package/es/typography/base.js

@@ -4,9 +4,9 @@ import { isObject } from "../_utils/is.js";
 import resize_observer_default from "../_components/resize-observer.js";
 import { caf, raf } from "../_utils/raf.js";
 import { omit } from "../_utils/omit.js";
+import Tooltip from "../tooltip/index.js";
 import useMergeState from "../_hooks/use-merge-state.js";
 import Popover from "../popover/index.js";
-import Tooltip from "../tooltip/index.js";
 import edit_content_default from "./edit-content.js";
 import operations_default from "./operations.js";
 import getInnerText from "./utils/getInnerText.js";

package/es/typography/edit-content.vue_vue_type_script_setup_true_lang.js

@@ -17,7 +17,7 @@ var edit_content_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const classNames = [`${getPrefixCls("typography")}-edit-content`];
-		const inputRef = ref();
+		const rootRef = ref();
 		function onChange(value) {
 			emit("update:text", value);
 			emit("change", value);
@@ -26,24 +26,27 @@ var edit_content_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			emit("end");
 		}
 		onMounted(() => {
-			if (!inputRef.value || !inputRef.value.$el) return;
-			const inputEl = inputRef.value.$el.querySelector("input");
+			var _rootRef$value;
+			const inputEl = (_rootRef$value = rootRef.value) === null || _rootRef$value === void 0 ? void 0 : _rootRef$value.querySelector("input");
 			if (!inputEl) return;
-			inputEl.focus && inputEl.focus();
+			inputEl.focus();
 			const { length } = inputEl.value;
 			inputEl.setSelectionRange(length, length);
 		});
 		const onBlur = onEnd;
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(classNames) }, [createVNode(unref(Input), {
-				ref_key: "inputRef",
-				ref: inputRef,
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(classNames)
+			}, [createVNode(unref(Input), {
 				"auto-size": "",
+				"input-attrs": { "aria-label": "Edit text" },
 				"model-value": __props.text,
 				onBlur: unref(onBlur),
 				onInput: onChange,
 				onKeydown: withKeys(onEnd, ["enter"])
-			}, null, 8, ["model-value", "onBlur"])]);
+			}, null, 8, ["model-value", "onBlur"])], 512);
 		};
 	}
 }));

package/es/typography/operations.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,6 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
+import { isActivationKey } from "../_utils/keyboard.js";
 import IconCheckCircleFill from "../icon/icon-check-circle-fill/index.js";
 import { useI18n } from "../locale/index.js";
 import Tooltip from "../tooltip/index.js";
@@ -7,6 +8,8 @@ import IconCopy from "../icon/icon-copy/index.js";
 import IconEdit from "../icon/icon-edit/index.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
 //#region components/typography/operations.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = ["aria-label"];
 var operations_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "TypographyOperations" }), {}, {
 	__name: "operations",
 	props: {
@@ -58,6 +61,24 @@ var operations_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		function onExpandClick() {
 			emit("expand");
 		}
+		function onEditKeydown(ev) {
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				onEditClick();
+			}
+		}
+		function onCopyKeydown(ev) {
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				onCopyClick();
+			}
+		}
+		function onExpandKeydown(ev) {
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				onExpandClick();
+			}
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
 				__props.editable ? (openBlock(), createBlock(unref(Tooltip), mergeProps({
@@ -66,8 +87,12 @@ var operations_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				}, __props.editTooltipProps), {
 					default: withCtx(() => [createElementVNode("span", {
 						class: normalizeClass(`${unref(prefixCls)}-operation-edit`),
-						onClick: withModifiers(onEditClick, ["stop"])
-					}, [createVNode(unref(IconEdit))], 2)]),
+						role: "button",
+						tabindex: "0",
+						"aria-label": unref(t)("typography.edit"),
+						onClick: withModifiers(onEditClick, ["stop"]),
+						onKeydown: onEditKeydown
+					}, [createVNode(unref(IconEdit))], 42, _hoisted_1)]),
 					_: 1
 				}, 16, ["content"])) : createCommentVNode("", true),
 				__props.copyable ? (openBlock(), createBlock(unref(Tooltip), normalizeProps(mergeProps({ key: 1 }, __props.copyTooltipProps)), {
@@ -77,15 +102,22 @@ var operations_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 							[`${unref(prefixCls)}-operation-copied`]: __props.isCopied,
 							[`${unref(prefixCls)}-operation-copy`]: !__props.isCopied
 						}),
-						onClick: withModifiers(onCopyClick, ["stop"])
-					}, [renderSlot(_ctx.$slots, "copy-icon", { copied: __props.isCopied }, () => [__props.isCopied ? (openBlock(), createBlock(unref(IconCheckCircleFill), { key: 0 })) : (openBlock(), createBlock(unref(IconCopy), { key: 1 }))])], 2)]),
+						role: "button",
+						tabindex: "0",
+						"aria-label": __props.isCopied ? unref(t)("typography.copied") : unref(t)("typography.copy"),
+						onClick: withModifiers(onCopyClick, ["stop"]),
+						onKeydown: onCopyKeydown
+					}, [renderSlot(_ctx.$slots, "copy-icon", { copied: __props.isCopied }, () => [__props.isCopied ? (openBlock(), createBlock(unref(IconCheckCircleFill), { key: 0 })) : (openBlock(), createBlock(unref(IconCopy), { key: 1 }))])], 42, _hoisted_2)]),
 					_: 3
 				}, 16)) : createCommentVNode("", true),
 				showExpand.value ? (openBlock(), createElementBlock("a", {
 					key: 2,
 					class: normalizeClass(`${unref(prefixCls)}-operation-expand`),
-					onClick: withModifiers(onExpandClick, ["stop"])
-				}, [renderSlot(_ctx.$slots, "expand-node", { expanded: __props.expanded }, () => [createTextVNode(toDisplayString(__props.expanded ? unref(t)("typography.collapse") : unref(t)("typography.expand")), 1)])], 2)) : createCommentVNode("", true)
+					role: "button",
+					tabindex: "0",
+					onClick: withModifiers(onExpandClick, ["stop"]),
+					onKeydown: onExpandKeydown
+				}, [renderSlot(_ctx.$slots, "expand-node", { expanded: __props.expanded }, () => [createTextVNode(toDisplayString(__props.expanded ? unref(t)("typography.collapse") : unref(t)("typography.expand")), 1)])], 34)) : createCommentVNode("", true)
 			], 64);
 		};
 	}

package/es/typography/style/index.css

@@ -134,7 +134,7 @@
   background-color: transparent;
   border-radius: 2px;
   cursor: pointer;
-  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-typography-operation-copy:hover {
   color: var(--sd-color-text-2);
@@ -150,7 +150,7 @@
   background-color: transparent;
   border-radius: 2px;
   cursor: pointer;
-  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-typography-operation-edit:hover {
   color: var(--sd-color-text-2);

package/es/typography/style/index.scss

@@ -152,7 +152,7 @@ $typography-prefix-cls: string.unquote('#{theme.$prefix}-typography');
     border-radius: 2px;
     cursor: pointer;
     transition: background-color theme.$transition-duration-1
-      theme.$transition-timing-function-linear;
+      theme.$transition-timing-function-standard;
 
     &:hover {
       color: $typography-color-icon-copy_hover;
@@ -172,7 +172,7 @@ $typography-prefix-cls: string.unquote('#{theme.$prefix}-typography');
     border-radius: 2px;
     cursor: pointer;
     transition: background-color theme.$transition-duration-1
-      theme.$transition-timing-function-linear;
+      theme.$transition-timing-function-standard;
 
     &:hover {
       color: $typography-color-icon-edit_hover;

package/es/upload/style/index.css

@@ -44,7 +44,7 @@
   background: var(--sd-color-fill-2);
   border: 1px dashed var(--sd-color-neutral-3);
   border-radius: var(--sd-border-radius-small);
-  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);
 }
 .sd-upload-picture-card:hover {
   color: var(--sd-color-text-2);
@@ -59,7 +59,7 @@
   background-color: var(--sd-color-fill-1);
   border: 1px dashed var(--sd-color-neutral-3);
   border-radius: var(--sd-border-radius-small);
-  transition: all 0.2s ease;
+  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
 }
 .sd-upload-drag .sd-icon-plus {
   margin-bottom: 24px;
@@ -159,7 +159,7 @@
   color: rgb(var(--sd-primary-6));
   font-size: 14px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease;
 }
 .sd-upload-icon-upload:active, .sd-upload-icon-upload:hover {
   color: rgb(var(--sd-primary-7));
@@ -205,7 +205,7 @@
   font-size: 14px;
   background-color: var(--sd-color-fill-1);
   border-radius: var(--sd-border-radius-small);
-  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-upload-list-item-file-icon {
   margin-right: 12px;
@@ -294,7 +294,7 @@
   padding-right: 0;
   overflow: hidden;
   vertical-align: top;
-  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-upload-list-picture-status-error .sd-upload-list-picture-mask {
   opacity: 1;
@@ -324,7 +324,7 @@
   background: rgba(0, 0, 0, 0.5);
   cursor: pointer;
   opacity: 0;
-  transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-upload-list-picture-operation {
   display: none;
@@ -380,7 +380,7 @@
   margin: 0;
   overflow: hidden;
   opacity: 0;
-  transition: opacity 0.1s cubic-bezier(0, 0, 1, 1), height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s, margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s;
+  transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s, margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s;
 }
 
 .sd-upload-list-item.sd-upload-slide-inline-enter {
@@ -388,7 +388,7 @@
 }
 .sd-upload-list-item.sd-upload-slide-inline-enter-active {
   opacity: 1;
-  transition: opacity 0.2s cubic-bezier(0, 0, 1, 1);
+  transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-upload-list-item.sd-upload-slide-inline-exit {
   opacity: 1;
@@ -397,5 +397,5 @@
   margin: 0;
   overflow: hidden;
   opacity: 0;
-  transition: opacity 0.1s cubic-bezier(0, 0, 1, 1), width 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s, margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s;
+  transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s, margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1) 0.1s;
 }

package/es/upload/style/index.scss

@@ -35,7 +35,10 @@ $upload-prefix-cls: string.unquote('#{theme.$prefix}-upload');
     background: $upload-picture-color-bg;
     border: $upload-picture-border-width $upload-picture-border-style $upload-picture-color-border;
     border-radius: $upload-picture-border-radius;
-    transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    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;
 
     &:hover {
       color: $upload-picture-color-text_hover;
@@ -52,7 +55,10 @@ $upload-prefix-cls: string.unquote('#{theme.$prefix}-upload');
     background-color: $upload-drag-color-bg;
     border: $upload-drag-border-width $upload-drag-border-style $upload-drag-color-border;
     border-radius: $upload-drag-border-radius;
-    transition: all theme.$transition-duration-2 ease;
+    transition:
+      color theme.$transition-duration-2 ease,
+      background-color theme.$transition-duration-2 ease,
+      border-color theme.$transition-duration-2 ease;
 
     .#{theme.$prefix}-icon-plus {
       margin-bottom: $upload-drag-margin-icon-bottom;
@@ -175,7 +181,7 @@ $upload-prefix-cls: string.unquote('#{theme.$prefix}-upload');
     color: $upload-text-item-color-reupload-icon;
     font-size: $upload-text-item-size-reupload-icon;
     cursor: pointer;
-    transition: all theme.$transition-duration-2 ease;
+    transition: color theme.$transition-duration-2 ease;
 
     &:active,
     &:hover {
@@ -225,7 +231,7 @@ $upload-prefix-cls: string.unquote('#{theme.$prefix}-upload');
       background-color: $upload-text-item-color-bg;
       border-radius: $upload-text-item-border-radius;
       transition: background-color theme.$transition-duration-1
-        theme.$transition-timing-function-linear;
+        theme.$transition-timing-function-standard;
     }
 
     &-file-icon {
@@ -348,7 +354,7 @@ $upload-prefix-cls: string.unquote('#{theme.$prefix}-upload');
     padding-right: 0;
     overflow: hidden;
     vertical-align: top;
-    transition: all theme.$transition-duration-2 theme.$transition-timing-function-standard;
+    transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
   }
 
   &-picture-status-error &-picture-mask {
@@ -381,7 +387,7 @@ $upload-prefix-cls: string.unquote('#{theme.$prefix}-upload');
       background: $upload-picture-item-color-operation_bg;
       cursor: pointer;
       opacity: 0;
-      transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-linear;
+      transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-standard;
     }
 
     &-operation {
@@ -468,7 +474,7 @@ $upload-prefix-cls: string.unquote('#{theme.$prefix}-upload');
   overflow: hidden;
   opacity: 0;
   transition:
-    opacity theme.$transition-duration-1 theme.$transition-timing-function-linear,
+    opacity theme.$transition-duration-1 theme.$transition-timing-function-standard,
     height theme.$transition-duration-3 theme.$transition-timing-function-standard
       theme.$transition-duration-1,
     margin theme.$transition-duration-3 theme.$transition-timing-function-standard
@@ -482,7 +488,7 @@ $upload-prefix-cls: string.unquote('#{theme.$prefix}-upload');
 
   &.#{$upload-prefix-cls}-slide-inline-enter-active {
     opacity: 1;
-    transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-linear;
+    transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
   }
 
   &.#{$upload-prefix-cls}-slide-inline-exit {
@@ -494,7 +500,7 @@ $upload-prefix-cls: string.unquote('#{theme.$prefix}-upload');
     overflow: hidden;
     opacity: 0;
     transition:
-      opacity theme.$transition-duration-1 theme.$transition-timing-function-linear,
+      opacity theme.$transition-duration-1 theme.$transition-timing-function-standard,
       width theme.$transition-duration-3 theme.$transition-timing-function-standard
         theme.$transition-duration-1,
       margin theme.$transition-duration-3 theme.$transition-timing-function-standard

package/es/upload/upload-button.js

@@ -1,7 +1,7 @@
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction, isPromise } from "../_utils/is.js";
-import Button from "../button/index.js";
 import { useI18n } from "../locale/index.js";
+import Button from "../button/index.js";
 import IconPlus from "../icon/icon-plus/index.js";
 import IconUpload from "../icon/icon-upload/index.js";
 import { getFiles, loopDirectory } from "./utils.js";

package/es/upload/upload-list-item.js

@@ -1,5 +1,6 @@
 import { getPrefixCls } from "../_utils/global-config.js";
 import icon_hover_default from "../_components/icon-hover.js";
+import { isActivationKey } from "../_utils/keyboard.js";
 import IconExclamationCircleFill from "../icon/icon-exclamation-circle-fill/index.js";
 import { useI18n } from "../locale/index.js";
 import Tooltip from "../tooltip/index.js";
@@ -93,13 +94,25 @@ var upload_list_item_default = /* @__PURE__ */ defineComponent({
 						"listType": props.listType
 					}, null)
 				]),
-				(uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showRemoveButton) && createVNode("span", { "class": `${itemCls}-operation` }, [createVNode(icon_hover_default, { "onClick": () => {
-					var _uploadCtx$onRemove;
-					return uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$onRemove = uploadCtx.onRemove) === null || _uploadCtx$onRemove === void 0 ? void 0 : _uploadCtx$onRemove.call(uploadCtx, props.file);
-				} }, { default: () => {
+				(uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showRemoveButton) && createVNode("span", { "class": `${itemCls}-operation` }, [createVNode("span", {
+					"role": "button",
+					"tabindex": "0",
+					"aria-label": "Remove",
+					"onClick": () => {
+						var _uploadCtx$onRemove;
+						return uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$onRemove = uploadCtx.onRemove) === null || _uploadCtx$onRemove === void 0 ? void 0 : _uploadCtx$onRemove.call(uploadCtx, props.file);
+					},
+					"onKeydown": (e) => {
+						if (isActivationKey(e)) {
+							var _uploadCtx$onRemove2;
+							e.preventDefault();
+							uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$onRemove2 = uploadCtx.onRemove) === null || _uploadCtx$onRemove2 === void 0 || _uploadCtx$onRemove2.call(uploadCtx, props.file);
+						}
+					}
+				}, [createVNode(icon_hover_default, null, { default: () => {
 					var _ref5, _uploadCtx$slots$remo, _uploadCtx$slots6, _uploadCtx$slots6$rem, _uploadCtx$customIcon9, _uploadCtx$customIcon10;
 					return [createVNode("span", { "class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-remove`] }, [(_ref5 = (_uploadCtx$slots$remo = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots6$rem = (_uploadCtx$slots6 = uploadCtx.slots)["remove-icon"]) === null || _uploadCtx$slots6$rem === void 0 ? void 0 : _uploadCtx$slots6$rem.call(_uploadCtx$slots6)) !== null && _uploadCtx$slots$remo !== void 0 ? _uploadCtx$slots$remo : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon9 = uploadCtx.customIcon) === null || _uploadCtx$customIcon9 === void 0 || (_uploadCtx$customIcon10 = _uploadCtx$customIcon9.removeIcon) === null || _uploadCtx$customIcon10 === void 0 ? void 0 : _uploadCtx$customIcon10.call(_uploadCtx$customIcon9)) !== null && _ref5 !== void 0 ? _ref5 : createVNode(IconDelete, null, null)])];
-				} })]),
+				} })])]),
 				uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots7$ext = (_uploadCtx$slots7 = uploadCtx.slots)["extra-button"]) === null || _uploadCtx$slots7$ext === void 0 ? void 0 : _uploadCtx$slots7$ext.call(_uploadCtx$slots7, { fileItem: props.file })
 			]);
 		};

package/es/upload/upload-picture-item.js

@@ -1,4 +1,5 @@
 import { getPrefixCls } from "../_utils/global-config.js";
+import { isActivationKey } from "../_utils/keyboard.js";
 import IconEye from "../icon/icon-eye/index.js";
 import IconImageClose from "../icon/icon-image-close/index.js";
 import IconDelete from "../icon/icon-delete/index.js";
@@ -23,6 +24,12 @@ var upload_picture_item_default = /* @__PURE__ */ defineComponent({
 		const itemCls = `${getPrefixCls("upload-list")}-picture`;
 		const cls = computed(() => [itemCls, { [`${itemCls}-status-error`]: props.file.status === "error" }]);
 		const uploadCtx = inject(uploadInjectionKey, void 0);
+		const onActionKeydown = (fn) => (e) => {
+			if (fn && isActivationKey(e)) {
+				e.preventDefault();
+				fn();
+			}
+		};
 		const renderCard = () => {
 			var _uploadCtx$slots$imag, _uploadCtx$slots, _uploadCtx$slots$imag2, _ref, _uploadCtx$slots$erro, _uploadCtx$slots2, _uploadCtx$slots2$err, _uploadCtx$customIcon, _uploadCtx$customIcon2, _ref2, _uploadCtx$slots$prev, _uploadCtx$slots3, _uploadCtx$slots3$pre, _uploadCtx$customIcon3, _uploadCtx$customIcon4, _ref3, _uploadCtx$slots$retr, _uploadCtx$slots4, _uploadCtx$slots4$ret, _uploadCtx$customIcon5, _uploadCtx$customIcon6, _ref4, _uploadCtx$slots$remo, _uploadCtx$slots5, _uploadCtx$slots5$rem, _uploadCtx$customIcon7, _uploadCtx$customIcon8, _uploadCtx$slots6, _uploadCtx$slots6$ext;
 			if (props.file.status === "uploading") return createVNode(upload_progress_default, {
@@ -35,15 +42,30 @@ var upload_picture_item_default = /* @__PURE__ */ defineComponent({
 			}, (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.imageLoading) ? { loading: uploadCtx.imageLoading } : void 0), null), createVNode("div", { "class": `${itemCls}-mask` }, [props.file.status === "error" && (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showCancelButton) && createVNode("div", { "class": `${itemCls}-error-tip` }, [createVNode("span", { "class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-error`] }, [(_ref = (_uploadCtx$slots$erro = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots2$err = (_uploadCtx$slots2 = uploadCtx.slots)["error-icon"]) === null || _uploadCtx$slots2$err === void 0 ? void 0 : _uploadCtx$slots2$err.call(_uploadCtx$slots2)) !== null && _uploadCtx$slots$erro !== void 0 ? _uploadCtx$slots$erro : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon = uploadCtx.customIcon) === null || _uploadCtx$customIcon === void 0 || (_uploadCtx$customIcon2 = _uploadCtx$customIcon.errorIcon) === null || _uploadCtx$customIcon2 === void 0 ? void 0 : _uploadCtx$customIcon2.call(_uploadCtx$customIcon)) !== null && _ref !== void 0 ? _ref : createVNode(IconImageClose, null, null)])]), createVNode("div", { "class": `${itemCls}-operation` }, [
 				props.file.status !== "error" && (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showPreviewButton) && createVNode("span", {
 					"class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-preview`],
-					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onPreview(props.file)
+					"role": "button",
+					"tabindex": "0",
+					"aria-label": "Preview",
+					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onPreview(props.file),
+					"onKeydown": onActionKeydown(() => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onPreview(props.file))
 				}, [(_ref2 = (_uploadCtx$slots$prev = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots3$pre = (_uploadCtx$slots3 = uploadCtx.slots)["preview-icon"]) === null || _uploadCtx$slots3$pre === void 0 ? void 0 : _uploadCtx$slots3$pre.call(_uploadCtx$slots3)) !== null && _uploadCtx$slots$prev !== void 0 ? _uploadCtx$slots$prev : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon3 = uploadCtx.customIcon) === null || _uploadCtx$customIcon3 === void 0 || (_uploadCtx$customIcon4 = _uploadCtx$customIcon3.previewIcon) === null || _uploadCtx$customIcon4 === void 0 ? void 0 : _uploadCtx$customIcon4.call(_uploadCtx$customIcon3)) !== null && _ref2 !== void 0 ? _ref2 : createVNode(IconEye, null, null)]),
 				["init", "error"].includes(props.file.status) && (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showRetryButton) && createVNode("span", {
 					"class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-upload`],
-					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onUpload(props.file)
+					"role": "button",
+					"tabindex": "0",
+					"aria-label": "Retry upload",
+					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onUpload(props.file),
+					"onKeydown": onActionKeydown(() => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onUpload(props.file))
 				}, [(_ref3 = (_uploadCtx$slots$retr = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots4$ret = (_uploadCtx$slots4 = uploadCtx.slots)["retry-icon"]) === null || _uploadCtx$slots4$ret === void 0 ? void 0 : _uploadCtx$slots4$ret.call(_uploadCtx$slots4)) !== null && _uploadCtx$slots$retr !== void 0 ? _uploadCtx$slots$retr : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon5 = uploadCtx.customIcon) === null || _uploadCtx$customIcon5 === void 0 || (_uploadCtx$customIcon6 = _uploadCtx$customIcon5.retryIcon) === null || _uploadCtx$customIcon6 === void 0 ? void 0 : _uploadCtx$customIcon6.call(_uploadCtx$customIcon5)) !== null && _ref3 !== void 0 ? _ref3 : createVNode(IconUpload, null, null)]),
 				!(uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.disabled) && (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showRemoveButton) && createVNode("span", {
 					"class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-remove`],
-					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onRemove(props.file)
+					"role": "button",
+					"tabindex": "0",
+					"aria-label": "Remove",
+					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onRemove(props.file),
+					"onKeydown": onActionKeydown(() => {
+						var _uploadCtx$onRemove;
+						return uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$onRemove = uploadCtx.onRemove) === null || _uploadCtx$onRemove === void 0 ? void 0 : _uploadCtx$onRemove.call(uploadCtx, props.file);
+					})
 				}, [(_ref4 = (_uploadCtx$slots$remo = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots5$rem = (_uploadCtx$slots5 = uploadCtx.slots)["remove-icon"]) === null || _uploadCtx$slots5$rem === void 0 ? void 0 : _uploadCtx$slots5$rem.call(_uploadCtx$slots5)) !== null && _uploadCtx$slots$remo !== void 0 ? _uploadCtx$slots$remo : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon7 = uploadCtx.customIcon) === null || _uploadCtx$customIcon7 === void 0 || (_uploadCtx$customIcon8 = _uploadCtx$customIcon7.removeIcon) === null || _uploadCtx$customIcon8 === void 0 ? void 0 : _uploadCtx$customIcon8.call(_uploadCtx$customIcon7)) !== null && _ref4 !== void 0 ? _ref4 : createVNode(IconDelete, null, null)]),
 				uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots6$ext = (_uploadCtx$slots6 = uploadCtx.slots)["extra-button"]) === null || _uploadCtx$slots6$ext === void 0 ? void 0 : _uploadCtx$slots6$ext.call(_uploadCtx$slots6, props.file)
 			])])]);

package/es/verification-code/index.d.ts

@@ -17,7 +17,10 @@ declare const VerificationCode: {
         };
         disabled: BooleanConstructor;
         masked: BooleanConstructor;
-        readonly: BooleanConstructor;
+        readonly: {
+            type: (StringConstructor | BooleanConstructor)[];
+            default: boolean;
+        };
         error: {
             type: BooleanConstructor;
             default: boolean;
@@ -41,7 +44,7 @@ declare const VerificationCode: {
     }, import("vue").PublicProps, {
         length: number;
         error: boolean;
-        readonly: boolean;
+        readonly: string | boolean;
         disabled: boolean;
         defaultValue: string;
         masked: boolean;
@@ -67,7 +70,10 @@ declare const VerificationCode: {
         };
         disabled: BooleanConstructor;
         masked: BooleanConstructor;
-        readonly: BooleanConstructor;
+        readonly: {
+            type: (StringConstructor | BooleanConstructor)[];
+            default: boolean;
+        };
         error: {
             type: BooleanConstructor;
             default: boolean;
@@ -86,7 +92,7 @@ declare const VerificationCode: {
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         length: number;
         error: boolean;
-        readonly: boolean;
+        readonly: string | boolean;
         disabled: boolean;
         defaultValue: string;
         masked: boolean;
@@ -109,7 +115,10 @@ declare const VerificationCode: {
     };
     disabled: BooleanConstructor;
     masked: BooleanConstructor;
-    readonly: BooleanConstructor;
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
     error: {
         type: BooleanConstructor;
         default: boolean;
@@ -133,7 +142,7 @@ declare const VerificationCode: {
 }, string, {
     length: number;
     error: boolean;
-    readonly: boolean;
+    readonly: string | boolean;
     disabled: boolean;
     defaultValue: string;
     masked: boolean;

package/es/verification-code/verification-code.d.ts

@@ -15,7 +15,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     disabled: BooleanConstructor;
     masked: BooleanConstructor;
-    readonly: BooleanConstructor;
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
     error: {
         type: BooleanConstructor;
         default: boolean;
@@ -46,7 +49,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     disabled: BooleanConstructor;
     masked: BooleanConstructor;
-    readonly: BooleanConstructor;
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
     error: {
         type: BooleanConstructor;
         default: boolean;
@@ -65,7 +71,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     length: number;
     error: boolean;
-    readonly: boolean;
+    readonly: string | boolean;
     disabled: boolean;
     defaultValue: string;
     masked: boolean;