@sdata/web-vue 3.12.0 → 3.14.0

package/es/input-tag/input-tag.js

@@ -7,15 +7,17 @@ import icon_hover_default from "../_components/icon-hover.js";
 import IconClose from "../icon/icon-close/index.js";
 import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import feedback_icon_default from "../_components/feedback-icon.js";
+import { isReadonlyModificationKey, useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
 import { useSize } from "../_hooks/use-size.js";
 import { INPUT_EVENTS } from "../_utils/constant.js";
 import { Backspace, Enter } from "../_utils/keycode.js";
 import { omit } from "../_utils/omit.js";
 import pick from "../_utils/pick.js";
+import Tooltip from "../tooltip/index.js";
 import Ellipsis from "../ellipsis/index.js";
 import Tag from "../tag/index.js";
 import { getValueData } from "./utils.js";
-import { TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
+import { TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, onMounted, reactive, ref, toRef, toRefs, watch } from "vue";
 //#region components/input-tag/input-tag.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -84,7 +86,7 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		* @en Whether it is read-only mode
 		*/
 		readonly: {
-			type: Boolean,
+			type: [Boolean, String],
 			default: false
 		},
 		/**
@@ -150,7 +152,8 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		baseCls: String,
 		focused: Boolean,
 		disabledInput: Boolean,
-		uninjectFormItemContext: Boolean
+		uninjectFormItemContext: Boolean,
+		inputAttrs: Object
 	},
 	emits: {
 		"update:modelValue": (_value) => true,
@@ -233,6 +236,8 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		});
 		const { mergedSize } = useSize(_mergedSize);
 		const { mergedAllowClear } = useAllowClear(allowClear);
+		const { tipVisible, show: showReadonlyTip } = useReadonlyTip(toRef(props, "readonly"), mergedDisabled);
+		const readonlyTipText = useReadonlyTipText(toRef(props, "readonly"));
 		const mergedFieldNames = computed(() => _objectSpread2(_objectSpread2({}, DEFAULT_FIELD_NAMES), props.fieldNames));
 		const _focused = ref(false);
 		const _value = ref(props.defaultValue);
@@ -443,6 +448,7 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			return -1;
 		};
 		const handleKeyDown = (e) => {
+			if (props.readonly && !mergedDisabled.value && isReadonlyModificationKey(e)) showReadonlyTip();
 			if (mergedDisabled.value || props.readonly) return;
 			const keyCode = e.key || e.code;
 			if (!isComposition.value && computedInputValue.value && keyCode === Enter.key) handlePressEnter(e);
@@ -515,9 +521,13 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			});
 		});
 		const isCompressedResponsiveTag = (index, value) => isResponsiveMaxTagCount.value && !isOverflowCounterTag(value) && hiddenTagCount.value > 0 && index === 0 && responsiveTagMaxWidth.value > 0;
-		const render = () => {
+		const render = () => createVNode(Tooltip, {
+			"popupVisible": tipVisible.value,
+			"content": readonlyTipText.value,
+			"position": "top"
+		}, { default: () => {
 			var _slots$suffix;
-			return createVNode("span", mergeProps({
+			return [createVNode("span", mergeProps({
 				"ref": wrapperRef,
 				"class": cls.value,
 				"onMousedown": handleMousedown
@@ -558,42 +568,45 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 				}, { class: [`${prefixCls}-inner`, {
 					[`${prefixCls}-inner-responsive`]: isResponsiveMaxTagCount.value,
 					[`${prefixCls}-nowrap`]: props.tagNowrap
-				}] }), { default: () => [tags.value.map((item, index) => {
-					let _slot;
-					return createVNode(Tag, mergeProps({
-						"key": `tag-${item.value}`,
-						"class": [`${prefixCls}-tag`, {
-							[`${prefixCls}-tag-counter`]: isOverflowCounterTag(item.value),
-							[`${prefixCls}-tag-overflow`]: isCompressedResponsiveTag(index, item.value)
-						}],
-						"closable": isClosableTag(item),
-						"visible": true,
-						"nowrap": props.tagNowrap || isResponsiveMaxTagCount.value,
-						"style": getTagStyle(index)
-					}, item.tagProps, { "onClose": (ev) => handleRemove(item.value, index, ev) }), _isSlot(_slot = renderTagContent(item, index)) ? _slot : { default: () => [_slot] });
-				}), createVNode("input", mergeProps(inputAttrs.value, {
-					"ref": inputRef,
-					"key": "input-tag-input",
-					"class": `${prefixCls}-input`,
-					"style": getInputStyle.value,
-					"placeholder": valueData.value.length === 0 ? props.placeholder : void 0,
-					"disabled": mergedDisabled.value,
-					"readonly": props.readonly || props.disabledInput,
-					"onInput": handleInput,
-					"onKeydown": handleKeyDown,
-					"onFocus": handleFocus,
-					"onBlur": handleBlur,
-					"onCompositionstart": handleComposition,
-					"onCompositionupdate": handleComposition,
-					"onCompositionend": handleComposition
-				}), null)] }),
+				}] }), { default: () => {
+					var _props$inputAttrs;
+					return [tags.value.map((item, index) => {
+						let _slot;
+						return createVNode(Tag, mergeProps({
+							"key": `tag-${item.value}`,
+							"class": [`${prefixCls}-tag`, {
+								[`${prefixCls}-tag-counter`]: isOverflowCounterTag(item.value),
+								[`${prefixCls}-tag-overflow`]: isCompressedResponsiveTag(index, item.value)
+							}],
+							"closable": isClosableTag(item),
+							"visible": true,
+							"nowrap": props.tagNowrap || isResponsiveMaxTagCount.value,
+							"style": getTagStyle(index)
+						}, item.tagProps, { "onClose": (ev) => handleRemove(item.value, index, ev) }), _isSlot(_slot = renderTagContent(item, index)) ? _slot : { default: () => [_slot] });
+					}), createVNode("input", mergeProps(inputAttrs.value, (_props$inputAttrs = props.inputAttrs) !== null && _props$inputAttrs !== void 0 ? _props$inputAttrs : {}, {
+						"ref": inputRef,
+						"key": "input-tag-input",
+						"class": `${prefixCls}-input`,
+						"style": getInputStyle.value,
+						"placeholder": valueData.value.length === 0 ? props.placeholder : void 0,
+						"disabled": mergedDisabled.value,
+						"readonly": !!(props.readonly || props.disabledInput),
+						"onInput": handleInput,
+						"onKeydown": handleKeyDown,
+						"onFocus": handleFocus,
+						"onBlur": handleBlur,
+						"onCompositionstart": handleComposition,
+						"onCompositionupdate": handleComposition,
+						"onCompositionend": handleComposition
+					}), null)];
+				} }),
 				showClearBtn.value && createVNode(icon_hover_default, mergeProps({ "class": `${prefixCls}-clear-btn` }, {
 					onClick: handleClear,
 					onMousedown: (e) => e.stopPropagation()
 				}), { default: () => [createVNode(IconClose, null, null)] }),
 				(slots.suffix || Boolean(feedback.value)) && createVNode("span", { "class": `${prefixCls}-suffix` }, [(_slots$suffix = slots.suffix) === null || _slots$suffix === void 0 ? void 0 : _slots$suffix.call(slots), Boolean(feedback.value) && createVNode(feedback_icon_default, { "type": feedback.value }, null)])
-			]);
-		};
+			])];
+		} });
 		return {
 			inputRef,
 			render

package/es/input-tag/style/index.css

@@ -44,7 +44,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);
@@ -489,7 +489,7 @@
   border: 1px solid transparent;
   border-radius: var(--sd-border-radius-small);
   cursor: text;
-  transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: 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), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-input-tag:hover {
   background-color: var(--sd-color-fill-3);
@@ -574,7 +574,7 @@
 }
 .sd-input-tag .sd-input-tag-clear-btn > svg {
   position: relative;
-  transition: color 0.1s cubic-bezier(0, 0, 1, 1);
+  transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-input-tag:hover .sd-input-tag-clear-btn {
   visibility: visible;
@@ -808,7 +808,7 @@
 }
 
 .input-tag-zoom-enter-from {
-  transform: scale(0.5, 0.5);
+  transform: scale(0.94, 0.94);
   opacity: 0;
 }
 
@@ -818,7 +818,7 @@
 }
 
 .input-tag-zoom-enter-active {
-  transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 
 .input-tag-zoom-leave-from {
@@ -827,15 +827,15 @@
 }
 
 .input-tag-zoom-leave-to {
-  transform: scale(0.5, 0.5);
+  transform: scale(0.94, 0.94);
   opacity: 0;
 }
 
 .input-tag-zoom-leave-active {
   position: absolute;
-  transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+  transition: transform 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 
 .input-tag-zoom-move {
-  transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+  transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
 }

package/es/input-tag/style/index.scss

@@ -8,8 +8,9 @@ $input-tag-prefix-cls: string.unquote('#{theme.$prefix}-input-tag');
   @include input-tag-style($input-tag-prefix-cls);
 }
 
+// 标签入场/退场：从 scale(0.94) 起步而非 scale(0.5)，轻微弹出即可
 .input-tag-zoom-enter-from {
-  transform: scale(0.5, 0.5);
+  transform: scale(0.94, 0.94);
   opacity: 0;
 }
 
@@ -19,7 +20,9 @@ $input-tag-prefix-cls: string.unquote('#{theme.$prefix}-input-tag');
 }
 
 .input-tag-zoom-enter-active {
-  transition: all theme.$transition-duration-3 theme.$transition-timing-function-standard;
+  transition:
+    transform theme.$transition-duration-3 theme.$transition-timing-function-standard,
+    opacity theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
 .input-tag-zoom-leave-from {
@@ -28,15 +31,18 @@ $input-tag-prefix-cls: string.unquote('#{theme.$prefix}-input-tag');
 }
 
 .input-tag-zoom-leave-to {
-  transform: scale(0.5, 0.5);
+  transform: scale(0.94, 0.94);
   opacity: 0;
 }
 
 .input-tag-zoom-leave-active {
   position: absolute;
-  transition: all theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
+  transition:
+    transform theme.$transition-duration-3 theme.$transition-timing-function-standard,
+    opacity theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
+// 列表重排（FLIP）只过渡 transform
 .input-tag-zoom-move {
-  transition: all theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
+  transition: transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
 }

package/es/layout/sider.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { configProviderInjectionKey } from "../config-provider/context.js";
 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 { useScrollbar } from "../_hooks/use-scrollbar.js";
 import Scrollbar from "../scrollbar/index.js";
 import IconRight from "../icon/icon-right/index.js";
@@ -11,6 +12,9 @@ import { LayoutContextInjectionKey, SiderContextInjectionKey } from "./context.j
 import IconMenu from "../icon/icon-menu/index.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toRef, unref, watch, withCtx } from "vue";
 //#region components/layout/sider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-expanded"];
+var _hoisted_2 = ["aria-expanded"];
+var _hoisted_3 = ["aria-expanded"];
 var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "LayoutSider" }), {}, {
 	__name: "sider",
 	props: {
@@ -182,6 +186,12 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		const toggle = () => {
 			handleSetCollapsed(!mergedCollapsed.value, "clickTrigger");
 		};
+		const handleTriggerKeydown = (ev) => {
+			if (isActivationKey(ev)) {
+				ev.preventDefault();
+				toggle();
+			}
+		};
 		const below = ref(false);
 		const setupResponsive = () => {
 			const { breakpoint } = props;
@@ -369,8 +379,13 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			}, 16, ["visible"]), renderTrigger.value ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				class: normalizeClass(`${unref(prefixCls)}-temporary-trigger`),
-				onClick: toggle
-			}, [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(unref(IconMenu))])], 2)) : createCommentVNode("", true)], 64)) : __props.rail ? (openBlock(), createElementBlock("div", {
+				role: "button",
+				tabindex: "0",
+				"aria-expanded": !mergedCollapsed.value,
+				"aria-label": "Toggle sidebar",
+				onClick: toggle,
+				onKeydown: handleTriggerKeydown
+			}, [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(unref(IconMenu))])], 42, _hoisted_1)) : createCommentVNode("", true)], 64)) : __props.rail ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: normalizeClass(railOverlayCls.value),
 				style: normalizeStyle(railOverlayStyle.value)
@@ -405,13 +420,23 @@ var sider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 					key: 0,
 					class: normalizeClass([`${unref(prefixCls)}-zero-width-trigger`, `${unref(prefixCls)}-zero-width-trigger-${__props.reverseArrow ? "right" : "left"}`]),
 					style: normalizeStyle(__props.zeroWidthTriggerStyle),
-					onClick: toggle
-				}, [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(unref(IconMenu))])], 6)) : (openBlock(), createElementBlock("div", {
+					role: "button",
+					tabindex: "0",
+					"aria-expanded": !mergedCollapsed.value,
+					"aria-label": "Toggle sidebar",
+					onClick: toggle,
+					onKeydown: handleTriggerKeydown
+				}, [renderSlot(_ctx.$slots, "trigger", {}, () => [createVNode(unref(IconMenu))])], 46, _hoisted_2)) : (openBlock(), createElementBlock("div", {
 					key: 1,
 					class: normalizeClass(`${unref(prefixCls)}-trigger`),
 					style: normalizeStyle({ width: siderWidth.value }),
-					onClick: toggle
-				}, [renderSlot(_ctx.$slots, "trigger", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(defaultTriggerComponent.value)))])], 6))], 64)) : createCommentVNode("", true)
+					role: "button",
+					tabindex: "0",
+					"aria-expanded": !mergedCollapsed.value,
+					"aria-label": "Toggle sidebar",
+					onClick: toggle,
+					onKeydown: handleTriggerKeydown
+				}, [renderSlot(_ctx.$slots, "trigger", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(defaultTriggerComponent.value)))])], 46, _hoisted_3))], 64)) : createCommentVNode("", true)
 			], 64))], 38);
 		};
 	}

package/es/layout/style/index.css

@@ -124,7 +124,7 @@
   line-height: 44px;
   text-align: center;
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-layout-sider-zero-width-trigger {
   position: absolute;
@@ -147,7 +147,7 @@
   position: absolute;
   inset: 0;
   background: transparent;
-  transition: all 0.3s;
+  transition: background-color 0.3s ease;
   content: "";
 }
 .sd-layout-sider-zero-width-trigger:hover::after {

package/es/layout/style/index.scss

@@ -123,7 +123,9 @@ $text-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
     line-height: $layout-sider-trigger-height;
     text-align: center;
     cursor: pointer;
-    transition: all $layout-motion-duration-mid theme.$transition-timing-function-standard;
+    transition:
+      color $layout-motion-duration-mid theme.$transition-timing-function-standard,
+      background-color $layout-motion-duration-mid theme.$transition-timing-function-standard;
   }
 
   &-zero-width-trigger {
@@ -147,7 +149,7 @@ $text-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
       position: absolute;
       inset: 0;
       background: transparent;
-      transition: all $layout-motion-duration-slow;
+      transition: background-color $layout-motion-duration-slow ease;
       content: '';
     }
 

package/es/link/style/index.css

@@ -27,7 +27,7 @@
   background-color: transparent;
   border-radius: var(--sd-border-radius-small);
   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);
 }
 .sd-link:hover {
   color: rgb(var(--sd-link-6));

package/es/link/style/index.scss

@@ -17,7 +17,9 @@ $link-prefix-cls: string.unquote('#{theme.$prefix}-link');
   background-color: global.$color-transparent;
   border-radius: $link-border-radius;
   cursor: pointer;
-  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;
 
   &:hover {
     color: $link-color-text_hover;

package/es/locale/interface.d.ts

@@ -116,6 +116,7 @@ export interface ValidateMessage {
 }
 export interface SdLang {
     locale: string;
+    readonlyTip?: string;
     empty: {
         description: string;
     };

package/es/locale/lang/en-us.js

@@ -71,6 +71,7 @@ var calendarLang = {
 };
 var lang = {
 	locale: "en-US",
+	readonlyTip: "Read-only mode",
 	empty: { description: "No Data" },
 	drawer: {
 		okText: "Ok",

package/es/locale/lang/zh-cn.js

@@ -70,6 +70,7 @@ var calendarLang = {
 };
 var lang = {
 	locale: "zh-CN",
+	readonlyTip: "当前为只读模式",
 	empty: { description: "暂无数据" },
 	drawer: {
 		okText: "确定",

package/es/locale/lang/zh-tw.js

@@ -70,6 +70,7 @@ var calendarLang = {
 };
 var lang = {
 	locale: "zh-TW",
+	readonlyTip: "目前為唯讀模式",
 	empty: { description: "無資料" },
 	drawer: {
 		okText: "確認",

package/es/mention/index.d.ts

@@ -28,6 +28,10 @@ declare const Mention: {
             type: BooleanConstructor;
             default: boolean;
         };
+        readonly: {
+            type: (StringConstructor | BooleanConstructor)[];
+            default: boolean;
+        };
         allowClear: {
             type: BooleanConstructor;
             default: boolean;
@@ -57,6 +61,7 @@ declare const Mention: {
     }, import("vue").PublicProps, {
         type: "input" | "textarea";
         split: string;
+        readonly: string | boolean;
         data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
         disabled: boolean;
         prefix: string | string[];
@@ -95,6 +100,10 @@ declare const Mention: {
             type: BooleanConstructor;
             default: boolean;
         };
+        readonly: {
+            type: (StringConstructor | BooleanConstructor)[];
+            default: boolean;
+        };
         allowClear: {
             type: BooleanConstructor;
             default: boolean;
@@ -116,6 +125,7 @@ declare const Mention: {
     }, {
         type: "input" | "textarea";
         split: string;
+        readonly: string | boolean;
         data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
         disabled: boolean;
         prefix: string | string[];
@@ -151,6 +161,10 @@ declare const Mention: {
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
     allowClear: {
         type: BooleanConstructor;
         default: boolean;
@@ -180,6 +194,7 @@ declare const Mention: {
 }, string, {
     type: "input" | "textarea";
     split: string;
+    readonly: string | boolean;
     data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
     disabled: boolean;
     prefix: string | string[];

package/es/mention/mention.d.ts

@@ -26,6 +26,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
     allowClear: {
         type: BooleanConstructor;
         default: boolean;
@@ -70,6 +74,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
     allowClear: {
         type: BooleanConstructor;
         default: boolean;
@@ -85,6 +93,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     type: "input" | "textarea";
     split: string;
+    readonly: string | boolean;
     data: (string | number | SelectOptionData | SelectOptionGroup)[];
     disabled: boolean;
     prefix: string | string[];

package/es/mention/mention.js

@@ -4,11 +4,11 @@ import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction, isNull, isUndefined } from "../_utils/is.js";
 import resize_observer_default from "../_components/resize-observer.js";
 import { useAllowClear } from "../_hooks/use-allow-clear.js";
+import Trigger from "../trigger/index.js";
 import Input from "../input/index.js";
 import { getKeyFromValue } from "../select/utils.js";
 import { useSelect } from "../select/hooks/use-select.js";
 import select_dropdown_default from "../select/select-dropdown.js";
-import Trigger from "../trigger/index.js";
 import { getSizeStyles } from "../textarea/utils.js";
 import Textarea from "../textarea/index.js";
 import { getLastMeasureIndex, getTextBeforeSelection, isValidSearch } from "./utils.js";
@@ -76,6 +76,14 @@ var mention_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		/**
+		* @zh 是否为只读状态
+		* @en Whether it is read-only
+		*/
+		readonly: {
+			type: [Boolean, String],
+			default: false
+		},
+		/**
 		* @zh 是否允许清空输入框
 		* @en Whether to allow the input to be cleared
 		* @version 2.23.0
@@ -170,6 +178,7 @@ var mention_default = /* @__PURE__ */ defineComponent({
 		const filterOption = ref(true);
 		const handleInput = (value, e) => {
 			var _eventHandlers$value, _eventHandlers$value$;
+			if (props.readonly) return;
 			const text = getTextBeforeSelection(e.target);
 			const lastMeasure = getLastMeasureIndex(text, props.prefix);
 			if (lastMeasure.location > -1) {
@@ -268,6 +277,8 @@ var mention_default = /* @__PURE__ */ defineComponent({
 				},
 				"key": item.key,
 				"class": cls,
+				"role": "option",
+				"aria-disabled": item.disabled || void 0,
 				"onClick": (ev) => {
 					if (!item.disabled) handleSelect(item.key, ev);
 				},
@@ -308,6 +319,7 @@ var mention_default = /* @__PURE__ */ defineComponent({
 					"allowClear": mergedAllowClear.value,
 					"modelValue": computedValue.value,
 					"disabled": mergedDisabled.value,
+					"readonly": props.readonly,
 					"onInput": handleInput,
 					"onClear": handleClear,
 					"onFocus": onFocus,
@@ -347,6 +359,13 @@ var mention_default = /* @__PURE__ */ defineComponent({
 					"allowClear": mergedAllowClear.value,
 					"modelValue": computedValue.value,
 					"disabled": mergedDisabled.value,
+					"readonly": props.readonly,
+					"inputAttrs": {
+						"role": "combobox",
+						"aria-haspopup": "listbox",
+						"aria-expanded": computedPopupVisible.value,
+						"aria-autocomplete": "list"
+					},
 					"onInput": handleInput,
 					"onClear": handleClear,
 					"onFocus": onFocus,

package/es/menu/base-menu.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,10 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNumber, isObject } from "../_utils/is.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import { omit } from "../_utils/omit.js";
-import useMergeState from "../_hooks/use-merge-state.js";
 import usePickSlots from "../_hooks/use-pick-slots.js";
+import useMergeState from "../_hooks/use-merge-state.js";
 import { MenuInjectionKey } from "./context.js";
 import { provideLevel } from "./hooks/use-level.js";
 import useMenuDataCollector from "./hooks/use-menu-data-collector.js";
@@ -13,6 +14,7 @@ import IconMenuUnfold from "../icon/icon-menu-unfold/index.js";
 import useMenuOpenState from "./hooks/use-menu-open-state.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, provide, reactive, renderSlot, toRefs, unref, useSlots } from "vue";
 //#region components/menu/base-menu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role"];
 /**
 * @displayName Menu
 */
@@ -242,6 +244,26 @@ var base_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			const width = computedCollapsed.value ? pxCollapsedWidth : objectStyle === null || objectStyle === void 0 ? void 0 : objectStyle.width;
 			return [objectStyle ? omit(objectStyle, ["width"]) : style.value, { width }];
 		});
+		const expandIconDown = usePickSlots(slots, "expand-icon-down");
+		const expandIconRight = usePickSlots(slots, "expand-icon-right");
+		const onMenuKeydown = (e) => {
+			const horizontal = mode.value === "horizontal";
+			const forward = horizontal ? e.key === KEYBOARD_KEY.ARROW_RIGHT : e.key === KEYBOARD_KEY.ARROW_DOWN;
+			const backward = horizontal ? e.key === KEYBOARD_KEY.ARROW_LEFT : e.key === KEYBOARD_KEY.ARROW_UP;
+			if (!forward && !backward && e.key !== KEYBOARD_KEY.HOME && e.key !== KEYBOARD_KEY.END) return;
+			const container = e.currentTarget;
+			const items = Array.from(container.querySelectorAll("[role=\"menuitem\"]")).filter((el) => el.tabIndex === 0);
+			if (!items.length) return;
+			const current = e.target;
+			const idx = items.indexOf(current);
+			e.preventDefault();
+			let target;
+			if (e.key === KEYBOARD_KEY.HOME) target = items[0];
+			else if (e.key === KEYBOARD_KEY.END) target = items[items.length - 1];
+			else if (forward) target = items[idx < 0 ? 0 : Math.min(idx + 1, items.length - 1)];
+			else if (backward) target = items[idx < 0 ? 0 : Math.max(idx - 1, 0)];
+			target === null || target === void 0 || target.focus();
+		};
 		provide(MenuInjectionKey, reactive({
 			theme,
 			mode,
@@ -258,8 +280,8 @@ var base_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			ellipsis,
 			ellipsisProps,
 			popupMaxHeight,
-			expandIconDown: usePickSlots(slots, "expand-icon-down"),
-			expandIconRight: usePickSlots(slots, "expand-icon-right"),
+			expandIconDown,
+			expandIconRight,
 			onMenuItemClick: (key) => {
 				setSelectedKeys([key]);
 				emit("update:selectedKeys", [key]);
@@ -274,7 +296,11 @@ var base_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		}));
 		provideLevel(1);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ class: classNames.value }, _ctx.$attrs, { style: computedStyle.value }), [createElementVNode("div", { class: normalizeClass(`${computedPrefixCls.value}-inner`) }, [renderSlot(_ctx.$slots, "default")], 2), computedHasCollapseButton.value ? (openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock("div", mergeProps({ class: classNames.value }, _ctx.$attrs, { style: computedStyle.value }), [createElementVNode("div", {
+				class: normalizeClass(`${computedPrefixCls.value}-inner`),
+				role: !unref(inTrigger) && unref(mode) === "horizontal" ? "menubar" : "menu",
+				onKeydown: onMenuKeydown
+			}, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1), computedHasCollapseButton.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: normalizeClass(`${computedPrefixCls.value}-collapse-button`),
 				onClick: onCollapseBtnClick