@sdata/web-vue 3.12.0 → 3.13.0

package/es/modal/modal.vue_vue_type_script_setup_true_lang.js

@@ -9,12 +9,12 @@ import IconCloseCircleFill from "../icon/icon-close-circle-fill/index.js";
 import IconExclamationCircleFill from "../icon/icon-exclamation-circle-fill/index.js";
 import IconInfoCircleFill from "../icon/icon-info-circle-fill/index.js";
 import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
-import Button from "../button/index.js";
-import { KEYBOARD_KEY } from "../_utils/keyboard.js";
+import { useI18n } from "../locale/index.js";
 import client_only_default from "../_components/client-only.js";
 import usePopupManager from "../_hooks/use-popup-manager.js";
 import { useTeleportContainer } from "../_hooks/use-teleport-container.js";
-import { useI18n } from "../locale/index.js";
+import Button from "../button/index.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import Ellipsis from "../ellipsis/index.js";
 import { useConfigProviderProp } from "../_hooks/use-config-provider-prop.js";
 import { useOverflow } from "../_hooks/use-overflow.js";

package/es/pagination/pagination.js

@@ -1,7 +1,7 @@
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNumber } from "../_utils/is.js";
-import { useSize } from "../_hooks/use-size.js";
 import { useI18n } from "../locale/index.js";
+import { useSize } from "../_hooks/use-size.js";
 import { useConfigProviderProp } from "../_hooks/use-config-provider-prop.js";
 import page_item_ellipsis_default from "./page-item-ellipsis.js";
 import page_item_step_default from "./page-item-step.js";

package/es/popconfirm/popconfirm.vue_vue_type_script_setup_true_lang.js

@@ -6,9 +6,9 @@ import IconCloseCircleFill from "../icon/icon-close-circle-fill/index.js";
 import IconExclamationCircleFill from "../icon/icon-exclamation-circle-fill/index.js";
 import IconInfoCircleFill from "../icon/icon-info-circle-fill/index.js";
 import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
-import Button from "../button/index.js";
-import Trigger from "../trigger/index.js";
 import { useI18n } from "../locale/index.js";
+import Trigger from "../trigger/index.js";
+import Button from "../button/index.js";
 import { computed, createBlock, createCommentVNode, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, withCtx } from "vue";
 //#region components/popconfirm/popconfirm.vue?vue&type=script&setup=true&lang.ts
 var popconfirm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Popconfirm" }), {}, {

package/es/popover/popover.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
+import Trigger from "../trigger/index.js";
 import { useScrollbar } from "../_hooks/use-scrollbar.js";
 import Scrollbar from "../scrollbar/index.js";
-import Trigger from "../trigger/index.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, toRefs, unref, withCtx } from "vue";
 //#region components/popover/popover.vue?vue&type=script&setup=true&lang.ts
 var popover_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Popover" }), {}, {

package/es/rate/index.d.ts

@@ -28,7 +28,7 @@ declare const Rate: {
             default: boolean;
         };
         readonly: {
-            type: BooleanConstructor;
+            type: (StringConstructor | BooleanConstructor)[];
             default: boolean;
         };
         disabled: {
@@ -47,7 +47,7 @@ declare const Rate: {
         change: (_value: number) => true;
         hoverChange: (_value: number) => true;
     }, import("vue").PublicProps, {
-        readonly: boolean;
+        readonly: string | boolean;
         disabled: boolean;
         defaultValue: number;
         modelValue: number;
@@ -88,7 +88,7 @@ declare const Rate: {
             default: boolean;
         };
         readonly: {
-            type: BooleanConstructor;
+            type: (StringConstructor | BooleanConstructor)[];
             default: boolean;
         };
         disabled: {
@@ -103,7 +103,7 @@ declare const Rate: {
         "onUpdate:modelValue"?: ((_value: number) => any) | undefined;
         onHoverChange?: ((_value: number) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
-        readonly: boolean;
+        readonly: string | boolean;
         disabled: boolean;
         defaultValue: number;
         modelValue: number;
@@ -141,7 +141,7 @@ declare const Rate: {
         default: boolean;
     };
     readonly: {
-        type: BooleanConstructor;
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     disabled: {
@@ -160,7 +160,7 @@ declare const Rate: {
     change: (_value: number) => true;
     hoverChange: (_value: number) => true;
 }, string, {
-    readonly: boolean;
+    readonly: string | boolean;
     disabled: boolean;
     defaultValue: number;
     modelValue: number;

package/es/rate/rate.d.ts

@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     readonly: {
-        type: BooleanConstructor;
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     disabled: {
@@ -65,7 +65,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     readonly: {
-        type: BooleanConstructor;
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     disabled: {
@@ -80,7 +80,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:modelValue"?: ((_value: number) => any) | undefined;
     onHoverChange?: ((_value: number) => any) | undefined;
 }>, {
-    readonly: boolean;
+    readonly: string | boolean;
     disabled: boolean;
     defaultValue: number;
     modelValue: number;

package/es/rate/rate.js

@@ -2,6 +2,8 @@ import { useFormItem } from "../_hooks/use-form-item.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNull, isObject, isString, isUndefined } from "../_utils/is.js";
 import { useAllowClear } from "../_hooks/use-allow-clear.js";
+import { useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
+import Tooltip from "../tooltip/index.js";
 import IconFaceFrownFill from "../icon/icon-face-frown-fill/index.js";
 import IconFaceMehFill from "../icon/icon-face-meh-fill/index.js";
 import IconFaceSmileFill from "../icon/icon-face-smile-fill/index.js";
@@ -66,7 +68,7 @@ var rate_default = /* @__PURE__ */ defineComponent({
 		* @en Whether it is readonly
 		*/
 		readonly: {
-			type: Boolean,
+			type: [Boolean, String],
 			default: false
 		},
 		/**
@@ -110,6 +112,8 @@ var rate_default = /* @__PURE__ */ defineComponent({
 		const prefixCls = getPrefixCls("rate");
 		const { mergedDisabled: _mergedDisabled, eventHandlers } = useFormItem({ disabled: toRef(props, "disabled") });
 		const { mergedAllowClear } = useAllowClear(allowClear);
+		const { tipVisible, show: showReadonlyTip } = useReadonlyTip(toRef(props, "readonly"), _mergedDisabled);
+		const readonlyTipText = useReadonlyTipText(toRef(props, "readonly"));
 		const _value = ref(props.defaultValue);
 		const animation = ref(false);
 		watch(modelValue, (value) => {
@@ -194,14 +198,16 @@ var rate_default = /* @__PURE__ */ defineComponent({
 			return createVNode(IconStarFill, null, null);
 		};
 		const renderCharacter = (index) => {
-			const leftProps = mergedDisabled.value ? {} : {
+			const interactive = !mergedDisabled.value;
+			const readonlyOnly = props.readonly && !_mergedDisabled.value;
+			const leftProps = interactive ? {
 				onMouseenter: () => handleMouseEnter(index, true),
 				onClick: () => handleClick(index, true)
-			};
-			const rightProps = mergedDisabled.value ? {} : {
+			} : readonlyOnly ? { onClick: () => showReadonlyTip() } : {};
+			const rightProps = interactive ? {
 				onMouseenter: () => handleMouseEnter(index, false),
 				onClick: () => handleClick(index, false)
-			};
+			} : readonlyOnly ? { onClick: () => showReadonlyTip() } : {};
 			const style = animation.value ? { animationDelay: `${50 * index}ms` } : void 0;
 			const parseDisplayIndex = Math.ceil(displayIndex.value) - 1;
 			const leftStyle = customColor.value && props.allowHalf && index + .5 === displayIndex.value ? { color: customColor.value[parseDisplayIndex] } : void 0;
@@ -225,10 +231,14 @@ var rate_default = /* @__PURE__ */ defineComponent({
 			[`${prefixCls}-readonly`]: props.readonly,
 			[`${prefixCls}-disabled`]: _mergedDisabled.value
 		}]);
-		return () => createVNode("div", {
+		return () => createVNode(Tooltip, {
+			"popupVisible": tipVisible.value,
+			"content": readonlyTipText.value,
+			"position": "top"
+		}, { default: () => [createVNode("div", {
 			"class": cls.value,
 			"onMouseleave": resetHoverIndex
-		}, [indexArray.value.map((_, index) => renderCharacter(index))]);
+		}, [indexArray.value.map((_, index) => renderCharacter(index))])] });
 	}
 });
 //#endregion

package/es/scrollbar/style/index.css

@@ -695,24 +695,45 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   height: 100%;
 }
 .sd-scrollbar .os-scrollbar {
-  --os-size: 6px;
-  --os-handle-bg: var(--sd-color-neutral-4);
-  --os-handle-bg-hover: var(--sd-color-neutral-5);
-  --os-handle-bg-active: var(--sd-color-neutral-6);
+  --os-size: var(--sd-scrollbar-size, 6px);
+  --os-handle-bg: var(
+    --sd-scrollbar-thumb-color,
+    var(--sd-color-neutral-4)
+  );
+  --os-handle-bg-hover: var(
+    --sd-scrollbar-thumb-color-hover,
+    var(--sd-color-neutral-5)
+  );
+  --os-handle-bg-active: var(
+    --sd-scrollbar-thumb-color-active,
+    var(--sd-color-neutral-6)
+  );
   --os-track-bg: transparent;
   --os-track-bg-hover: transparent;
   --os-track-bg-active: transparent;
   --os-padding-axis: 0;
   --os-padding-perpendicular: 0;
-  --os-handle-border-radius: 6px;
+  --os-handle-border-radius: var(
+    --sd-scrollbar-thumb-radius,
+    6px
+  );
 }
 .sd-scrollbar .os-scrollbar-handle {
   transition: background-color 0.16s ease, opacity 0.16s ease;
 }
 .sd-scrollbar .sd-scrollbar-theme-embed {
-  --os-handle-perpendicular-size: 6px;
-  --os-handle-perpendicular-size-hover: 6px;
-  --os-handle-perpendicular-size-active: 6px;
+  --os-handle-perpendicular-size: var(
+    --sd-scrollbar-size,
+    6px
+  );
+  --os-handle-perpendicular-size-hover: var(
+    --sd-scrollbar-size,
+    6px
+  );
+  --os-handle-perpendicular-size-active: var(
+    --sd-scrollbar-size,
+    6px
+  );
   --os-handle-interactive-area-offset: 0;
 }
 .sd-scrollbar .sd-scrollbar-theme-track {
@@ -721,16 +742,37 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   --os-track-bg-hover: var(--sd-color-neutral-1);
   --os-track-bg-active: var(--sd-color-neutral-1);
   --os-track-border: 1px solid var(--sd-color-neutral-3);
-  --os-handle-perpendicular-size: 6px;
+  --os-handle-perpendicular-size: var(
+    --sd-scrollbar-size,
+    6px
+  );
   --os-padding-axis: -1px;
 }
 .sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-theme-embed {
-  --os-handle-bg: var(--sd-color-neutral-4);
-  --os-handle-bg-hover: var(--sd-color-neutral-5);
-  --os-handle-bg-active: var(--sd-color-neutral-6);
+  --os-handle-bg: var(
+    --sd-scrollbar-thumb-color,
+    var(--sd-color-neutral-4)
+  );
+  --os-handle-bg-hover: var(
+    --sd-scrollbar-thumb-color-hover,
+    var(--sd-color-neutral-5)
+  );
+  --os-handle-bg-active: var(
+    --sd-scrollbar-thumb-color-active,
+    var(--sd-color-neutral-6)
+  );
 }
 .sd-scrollbar.sd-scrollbar-type-track .sd-scrollbar-theme-track {
-  --os-handle-bg: var(--sd-color-neutral-4);
-  --os-handle-bg-hover: var(--sd-color-neutral-5);
-  --os-handle-bg-active: var(--sd-color-neutral-6);
+  --os-handle-bg: var(
+    --sd-scrollbar-thumb-color,
+    var(--sd-color-neutral-4)
+  );
+  --os-handle-bg-hover: var(
+    --sd-scrollbar-thumb-color-hover,
+    var(--sd-color-neutral-5)
+  );
+  --os-handle-bg-active: var(
+    --sd-scrollbar-thumb-color-active,
+    var(--sd-color-neutral-6)
+  );
 }

package/es/scrollbar/style/index.scss

@@ -4,6 +4,12 @@
 
 $scroll-prefix-cls: string.unquote('#{theme.$prefix}-scrollbar');
 
+// Scrollbar design tokens are exposed as `--sd-scrollbar-*` CSS variables so
+// they can be shared with the global native-scrollbar baseline (see
+// `style/normalize.scss`) and overridden at runtime. Each `--os-*` mapping
+// reads the shared variable and falls back to the component token, so the
+// component renders identically when the variables are not set upstream and
+// stays in sync with native scrollbars when they are.
 .#{$scroll-prefix-cls} {
   position: relative;
   width: 100%;
@@ -18,16 +24,28 @@ $scroll-prefix-cls: string.unquote('#{theme.$prefix}-scrollbar');
   }
 
   .os-scrollbar {
-    --os-size: #{$scrollbar-thumb-bar-size};
-    --os-handle-bg: #{$scrollbar-thumb-bar-bg_color};
-    --os-handle-bg-hover: #{$scrollbar-thumb-bar-bg_color_hover};
-    --os-handle-bg-active: #{$scrollbar-thumb-bar-bg_color_active};
+    --os-size: var(#{theme.$sd-cssvars-prefix}-scrollbar-size, #{$scrollbar-thumb-bar-size});
+    --os-handle-bg: var(
+      #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color,
+      #{$scrollbar-thumb-bar-bg_color}
+    );
+    --os-handle-bg-hover: var(
+      #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-hover,
+      #{$scrollbar-thumb-bar-bg_color_hover}
+    );
+    --os-handle-bg-active: var(
+      #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-active,
+      #{$scrollbar-thumb-bar-bg_color_active}
+    );
     --os-track-bg: transparent;
     --os-track-bg-hover: transparent;
     --os-track-bg-active: transparent;
     --os-padding-axis: 0;
     --os-padding-perpendicular: 0;
-    --os-handle-border-radius: #{$scrollbar-thumb-bar-border_radius};
+    --os-handle-border-radius: var(
+      #{theme.$sd-cssvars-prefix}-scrollbar-thumb-radius,
+      #{$scrollbar-thumb-bar-border_radius}
+    );
   }
 
   .os-scrollbar-handle {
@@ -37,9 +55,18 @@ $scroll-prefix-cls: string.unquote('#{theme.$prefix}-scrollbar');
   }
 
   .#{$scroll-prefix-cls}-theme-embed {
-    --os-handle-perpendicular-size: #{$scrollbar-thumb-bar-size};
-    --os-handle-perpendicular-size-hover: #{$scrollbar-thumb-bar-size};
-    --os-handle-perpendicular-size-active: #{$scrollbar-thumb-bar-size};
+    --os-handle-perpendicular-size: var(
+      #{theme.$sd-cssvars-prefix}-scrollbar-size,
+      #{$scrollbar-thumb-bar-size}
+    );
+    --os-handle-perpendicular-size-hover: var(
+      #{theme.$sd-cssvars-prefix}-scrollbar-size,
+      #{$scrollbar-thumb-bar-size}
+    );
+    --os-handle-perpendicular-size-active: var(
+      #{theme.$sd-cssvars-prefix}-scrollbar-size,
+      #{$scrollbar-thumb-bar-size}
+    );
     --os-handle-interactive-area-offset: 0;
   }
 
@@ -49,24 +76,45 @@ $scroll-prefix-cls: string.unquote('#{theme.$prefix}-scrollbar');
     --os-track-bg-hover: #{$scrollbar-track-bg_color};
     --os-track-bg-active: #{$scrollbar-track-bg_color};
     --os-track-border: #{$scrollbar-track-border_size} solid #{$scrollbar-track-border_color};
-    --os-handle-perpendicular-size: #{$scrollbar-thumb-bar-size};
+    --os-handle-perpendicular-size: var(
+      #{theme.$sd-cssvars-prefix}-scrollbar-size,
+      #{$scrollbar-thumb-bar-size}
+    );
     --os-padding-axis: #{($scrollbar-track-size - $scrollbar-thumb-bar-size) * 0.5 -
       $scrollbar-track-border_size};
   }
 
   &#{&}-type-embed {
     .#{$scroll-prefix-cls}-theme-embed {
-      --os-handle-bg: #{$scrollbar-thumb-bar-bg_color};
-      --os-handle-bg-hover: #{$scrollbar-thumb-bar-bg_color_hover};
-      --os-handle-bg-active: #{$scrollbar-thumb-bar-bg_color_active};
+      --os-handle-bg: var(
+        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color,
+        #{$scrollbar-thumb-bar-bg_color}
+      );
+      --os-handle-bg-hover: var(
+        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-hover,
+        #{$scrollbar-thumb-bar-bg_color_hover}
+      );
+      --os-handle-bg-active: var(
+        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-active,
+        #{$scrollbar-thumb-bar-bg_color_active}
+      );
     }
   }
 
   &#{&}-type-track {
     .#{$scroll-prefix-cls}-theme-track {
-      --os-handle-bg: #{$scrollbar-thumb-bar-bg_color};
-      --os-handle-bg-hover: #{$scrollbar-thumb-bar-bg_color_hover};
-      --os-handle-bg-active: #{$scrollbar-thumb-bar-bg_color_active};
+      --os-handle-bg: var(
+        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color,
+        #{$scrollbar-thumb-bar-bg_color}
+      );
+      --os-handle-bg-hover: var(
+        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-hover,
+        #{$scrollbar-thumb-bar-bg_color_hover}
+      );
+      --os-handle-bg-active: var(
+        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-active,
+        #{$scrollbar-thumb-bar-bg_color_active}
+      );
     }
   }
 }

package/es/sd-vue.js

@@ -4,6 +4,9 @@ import Affix from "./affix/index.js";
 import Alert from "./alert/index.js";
 import anchor_link_default from "./anchor/anchor-link.js";
 import Anchor from "./anchor/index.js";
+import { addI18nMessages, getLocale, useLocale } from "./locale/index.js";
+import Trigger from "./trigger/index.js";
+import Tooltip from "./tooltip/index.js";
 import input_group_default from "./input/input-group.js";
 import input_password_default from "./input/input-password.js";
 import button_group_default from "./button/button-group.js";
@@ -12,7 +15,6 @@ import input_search_default from "./input/input-search.js";
 import Input from "./input/index.js";
 import Scrollbar from "./scrollbar/index.js";
 import Spin from "./spin/index.js";
-import Trigger from "./trigger/index.js";
 import AutoComplete from "./auto-complete/index.js";
 import Popover from "./popover/index.js";
 import AvatarGroup from "./avatar/avatar-group.js";
@@ -20,7 +22,6 @@ import Avatar from "./avatar/index.js";
 import BackTop from "./back-top/index.js";
 import Badge from "./badge/index.js";
 import BorderBeam from "./border-beam/index.js";
-import { addI18nMessages, getLocale, useLocale } from "./locale/index.js";
 import Empty from "./empty/index.js";
 import dropdown_button_default from "./dropdown/dropdown-button.js";
 import dropdown_group_default from "./dropdown/dropdown-group.js";
@@ -29,7 +30,6 @@ import dropdown_submenu_default from "./dropdown/dropdown-submenu.js";
 import Dropdown from "./dropdown/index.js";
 import breadcrumb_item_default from "./breadcrumb/breadcrumb-item.js";
 import Breadcrumb from "./breadcrumb/index.js";
-import Tooltip from "./tooltip/index.js";
 import Ellipsis, { PerformantEllipsis } from "./ellipsis/index.js";
 import Calendar from "./calendar/index.js";
 import card_grid_default from "./card/card-grid.js";

package/es/secret/secret.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
+import Tooltip from "../tooltip/index.js";
 import IconEye from "../icon/icon-eye/index.js";
 import IconEyeInvisible from "../icon/icon-eye-invisible/index.js";
-import Tooltip from "../tooltip/index.js";
 import { PerformantEllipsis } from "../ellipsis/index.js";
 import Copy from "../copy/index.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, toDisplayString, unref, useModel, withCtx } from "vue";

package/es/select/index.d.ts

@@ -36,6 +36,10 @@ declare const Select: {
             type: BooleanConstructor;
             default: boolean;
         };
+        readonly: {
+            type: (StringConstructor | BooleanConstructor)[];
+            default: boolean;
+        };
         error: {
             type: BooleanConstructor;
             default: boolean;
@@ -179,6 +183,7 @@ declare const Select: {
     }, import("vue").PublicProps, {
         options: import("./interface").SelectOption[];
         error: boolean;
+        readonly: string | boolean;
         popupVisible: boolean;
         defaultPopupVisible: boolean;
         disabled: boolean;
@@ -1290,6 +1295,10 @@ declare const Select: {
             type: BooleanConstructor;
             default: boolean;
         };
+        readonly: {
+            type: (StringConstructor | BooleanConstructor)[];
+            default: boolean;
+        };
         error: {
             type: BooleanConstructor;
             default: boolean;
@@ -1418,6 +1427,7 @@ declare const Select: {
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         options: import("./interface").SelectOption[];
         error: boolean;
+        readonly: string | boolean;
         popupVisible: boolean;
         defaultPopupVisible: boolean;
         disabled: boolean;
@@ -1486,6 +1496,10 @@ declare const Select: {
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
     error: {
         type: BooleanConstructor;
         default: boolean;
@@ -1629,6 +1643,7 @@ declare const Select: {
 }, string, {
     options: import("./interface").SelectOption[];
     error: boolean;
+    readonly: string | boolean;
     popupVisible: boolean;
     defaultPopupVisible: boolean;
     disabled: boolean;

package/es/select/select.d.ts

@@ -39,6 +39,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
     error: {
         type: BooleanConstructor;
         default: boolean;
@@ -198,6 +202,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: (StringConstructor | BooleanConstructor)[];
+        default: boolean;
+    };
     error: {
         type: BooleanConstructor;
         default: boolean;
@@ -326,6 +334,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     options: SelectOption[];
     error: boolean;
+    readonly: string | boolean;
     popupVisible: boolean;
     defaultPopupVisible: boolean;
     disabled: boolean;

package/es/select/select.js

@@ -6,16 +6,18 @@ import virtual_list_default from "../_components/virtual-list/index.js";
 import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import { useDropdownVirtualListProps } from "../_hooks/use-dropdown-virtual-list-props.js";
 import { resolveDropdownVirtualListProps } from "../_utils/virtual-dropdown.js";
+import { useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
+import Trigger from "../trigger/index.js";
+import Tooltip from "../tooltip/index.js";
 import { getKeyFromValue, hasEmptyStringKey, isGroupOptionInfo, isValidOption } from "./utils.js";
 import { useSelect } from "./hooks/use-select.js";
 import select_dropdown_default from "./select-dropdown.js";
-import Trigger from "../trigger/index.js";
 import { useTrigger } from "../_hooks/use-trigger.js";
 import Checkbox from "../checkbox/index.js";
 import select_view_default from "../_components/select-view/select-view.js";
 import { useAllowSearch } from "../_hooks/use-allow-search.js";
 import { debounce } from "../_utils/debounce.js";
-import { computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, ref, toRefs, watch, watchEffect } from "vue";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, ref, toRef, toRefs, watch, watchEffect } from "vue";
 //#region components/select/select.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -76,6 +78,14 @@ var select_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		/**
+		* @zh 是否为只读状态
+		* @en Whether it is read-only
+		*/
+		readonly: {
+			type: [Boolean, String],
+			default: false
+		},
 		error: {
 			type: Boolean,
 			default: false
@@ -213,13 +223,22 @@ var select_default = /* @__PURE__ */ defineComponent({
 		const resolvedVirtualListProps = computed(() => {
 			return resolveDropdownVirtualListProps(mergedDropdownVirtualListProps.value, props.triggerProps, DEFAULT_SELECT_VIRTUAL_ITEM_SIZE);
 		});
-		const { computedPopupVisible, handlePopupVisibleChange } = useTrigger({
+		const { computedPopupVisible, handlePopupVisibleChange: _handlePopupVisibleChange } = useTrigger({
 			popupVisible,
 			defaultPopupVisible,
 			show,
 			defaultShow,
 			emit
 		});
+		const { tipVisible, show: showReadonlyTip } = useReadonlyTip(toRef(props, "readonly"), mergedDisabled);
+		const readonlyTipText = useReadonlyTipText(toRef(props, "readonly"));
+		const handlePopupVisibleChange = (visible) => {
+			if (visible && props.readonly && !mergedDisabled.value) {
+				showReadonlyTip();
+				return;
+			}
+			_handlePopupVisibleChange(visible);
+		};
 		const _value = ref(props.defaultValue);
 		const computedValueObjects = computed(() => {
 			var _props$modelValue;
@@ -525,7 +544,11 @@ var select_default = /* @__PURE__ */ defineComponent({
 				return (_selectViewRef$value2 = selectViewRef.value) === null || _selectViewRef$value2 === void 0 || (_selectViewRef$value3 = _selectViewRef$value2.blur) === null || _selectViewRef$value3 === void 0 ? void 0 : _selectViewRef$value3.call(_selectViewRef$value2);
 			}
 		});
-		return () => createVNode(Trigger, mergeProps({
+		return () => createVNode(Tooltip, {
+			"popupVisible": tipVisible.value,
+			"content": readonlyTipText.value,
+			"position": "top"
+		}, { default: () => [createVNode(Trigger, mergeProps({
 			"trigger": "click",
 			"position": "bl",
 			"popupOffset": 4,
@@ -578,7 +601,7 @@ var select_default = /* @__PURE__ */ defineComponent({
 				})];
 			},
 			content: renderDropDown
-		});
+		})] });
 	}
 });
 //#endregion