@sdata/web-vue 4.4.0 → 4.4.2

package/es/ellipsis/ellipsis.vue_vue_type_script_setup_true_lang.js

@@ -5,9 +5,10 @@ import _objectWithoutProperties from "../_virtual/_@oxc-project_runtime@0.146.0/
 import resize_observer_v2_default from "../_components/resize-observer-v2.js";
 import { RichLineClamp } from "../clamp/index.js";
 import Tooltip from "../tooltip/index.js";
-import { computed, createBlock, createElementBlock, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUpdated, openBlock, renderSlot, resolveDynamicComponent, shallowRef, unref, watch, withCtx } from "vue";
+import { computed, createBlock, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUpdated, openBlock, renderSlot, resolveDynamicComponent, shallowRef, unref, watch, withCtx } from "vue";
 //#region components/ellipsis/ellipsis.vue?vue&type=script&setup=true&lang.ts
 var _excluded = ["disabled"];
+var INTERACTIVE_SELECTOR = "a,button,input,textarea,select,[role=\"button\"]";
 var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
 	name: "Ellipsis",
 	inheritAttrs: false
@@ -119,11 +120,33 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			if (triggerElement.clientWidth !== measurementWidth.value) measurementWidth.value = triggerElement.clientWidth;
 			if (nextPadding !== measurementPadding.value) measurementPadding.value = nextPadding;
 		}
+		let measurementSettled = false;
+		let measurementWaiters = [];
+		function flushMeasurementWaiters() {
+			const waiters = measurementWaiters;
+			measurementWaiters = [];
+			waiters.forEach((resolve) => resolve());
+		}
 		function handleClampChange(clamped) {
 			isEllipsis.value = clamped;
+			if (!measurementSettled && measurementHtml.value !== "") {
+				measurementSettled = true;
+				flushMeasurementWaiters();
+			}
+		}
+		function waitForMeasurement() {
+			if (measurementSettled) return Promise.resolve();
+			return new Promise((resolve) => {
+				measurementWaiters.push(resolve);
+			});
 		}
-		function handleClick() {
-			if (props.expandTrigger === "click" && (isEllipsis.value || expanded.value)) expanded.value = !expanded.value;
+		function handleClick(event) {
+			if (props.expandTrigger !== "click") return;
+			const triggerElement = triggerRef.value;
+			const target = event === null || event === void 0 ? void 0 : event.target;
+			const interactiveElement = target instanceof Element ? target.closest(INTERACTIVE_SELECTOR) : null;
+			if (interactiveElement && triggerElement && interactiveElement !== triggerElement && triggerElement.contains(interactiveElement)) return;
+			if (isEllipsis.value || expanded.value) expanded.value = !expanded.value;
 		}
 		function handleKeydown(event) {
 			if (isExpandable.value && (event.key === "Enter" || event.key === " ")) {
@@ -135,10 +158,14 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			expanded.value = false;
 			nextTick(syncMeasurement);
 		});
-		onMounted(() => void nextTick(syncMeasurement));
+		onMounted(() => {
+			nextTick(syncMeasurement);
+			window.setTimeout(flushMeasurementWaiters, 200);
+		});
 		onUpdated(() => void nextTick(syncMeasurement));
 		__expose({
 			triggerRef,
+			waitForMeasurement,
 			get triggerElement() {
 				return triggerRef.value;
 			}
@@ -164,7 +191,8 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 						default: withCtx(() => [isLineClamp.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock("span", {
 							key: 1,
 							class: normalizeClass(`${unref(prefixCls)}-content`)
-						}, [renderSlot(_ctx.$slots, "default")], 2)), createVNode(unref(RichLineClamp), {
+						}, [renderSlot(_ctx.$slots, "default")], 2)), (openBlock(), createBlock(unref(RichLineClamp), {
+							key: measurementHtml.value,
 							"data-ellipsis-measure": "",
 							"aria-hidden": "true",
 							html: measurementHtml.value,
@@ -175,7 +203,7 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 							"html",
 							"max-lines",
 							"style"
-						])]),
+						]))]),
 						_: 3
 					}, 16, [
 						"class",
@@ -204,7 +232,8 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					default: withCtx(() => [isLineClamp.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock("span", {
 						key: 1,
 						class: normalizeClass(`${unref(prefixCls)}-content`)
-					}, [renderSlot(_ctx.$slots, "default")], 2)), createVNode(unref(RichLineClamp), {
+					}, [renderSlot(_ctx.$slots, "default")], 2)), (openBlock(), createBlock(unref(RichLineClamp), {
+						key: measurementHtml.value,
 						"data-ellipsis-measure": "",
 						"aria-hidden": "true",
 						html: measurementHtml.value,
@@ -215,7 +244,7 @@ var ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 						"html",
 						"max-lines",
 						"style"
-					])]),
+					]))]),
 					_: 3
 				}, 16, [
 					"class",

package/es/ellipsis/index.d.ts

@@ -20,6 +20,7 @@ declare const Ellipsis: {
         };
     }>> & Readonly<{}>, {
         triggerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+        waitForMeasurement: () => Promise<void>;
         readonly triggerElement: HTMLElement | undefined;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
         tooltip: boolean | EllipsisTooltipProps;
@@ -47,6 +48,7 @@ declare const Ellipsis: {
         };
     }>> & Readonly<{}>, {
         triggerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+        waitForMeasurement: () => Promise<void>;
         readonly triggerElement: HTMLElement | undefined;
     }, {}, {}, {}, {
         tooltip: boolean | EllipsisTooltipProps;
@@ -71,6 +73,7 @@ declare const Ellipsis: {
     };
 }>> & Readonly<{}>, {
     triggerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    waitForMeasurement: () => Promise<void>;
     readonly triggerElement: HTMLElement | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     tooltip: boolean | EllipsisTooltipProps;

package/es/ellipsis/performant-ellipsis.vue_vue_type_script_setup_true_lang.js

@@ -83,11 +83,14 @@ var performant_ellipsis_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		};
 		const activate = function() {
 			var _ref = _asyncToGenerator(function* (interactionType) {
+				var _ellipsisRef$value2, _ellipsisRef$value2$w;
 				if (activated.value) return;
 				activated.value = true;
 				yield nextTick();
 				yield nextTick();
 				yield new Promise((resolve) => requestAnimationFrame(() => resolve()));
+				const measurement = (_ellipsisRef$value2 = ellipsisRef.value) === null || _ellipsisRef$value2 === void 0 || (_ellipsisRef$value2$w = _ellipsisRef$value2.waitForMeasurement) === null || _ellipsisRef$value2$w === void 0 ? void 0 : _ellipsisRef$value2$w.call(_ellipsisRef$value2);
+				if (measurement) yield measurement;
 				replayInteraction(interactionType);
 			});
 			return function activate(_x) {

package/es/empty/empty.vue_vue_type_script_setup_true_lang.js

@@ -26,10 +26,7 @@ var empty_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		const configCtx = inject(configProviderInjectionKey, void 0);
 		const getCustomEmpty = () => configCtx === null || configCtx === void 0 ? void 0 : configCtx.slots.empty;
 		return (_ctx, _cache) => {
-			return !__props.inConfigProvider && getCustomEmpty() && !slots.image && !__props.imgSrc && !__props.description ? (openBlock(), createBlock(resolveDynamicComponent(getCustomEmpty()), {
-				key: 0,
-				component: "empty"
-			})) : (openBlock(), createElementBlock("div", mergeProps({
+			return !__props.inConfigProvider && getCustomEmpty() && !slots.image && !__props.imgSrc && !__props.description ? (openBlock(), createBlock(resolveDynamicComponent(getCustomEmpty()), mergeProps({ key: 0 }, _ctx.$attrs, { component: "empty" }), null, 16)) : (openBlock(), createElementBlock("div", mergeProps({
 				key: 1,
 				class: unref(prefixCls)
 			}, _ctx.$attrs), [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-image`) }, [renderSlot(_ctx.$slots, "image", {}, () => [__props.imgSrc ? (openBlock(), createElementBlock("img", {

package/es/file-previewer/file-previewer.vue.d.ts

@@ -66,9 +66,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     close: typeof close;
     onLoad: typeof onPreviewLoad;
     onError: typeof onLoadError;
-    onImageLoad: typeof onPreviewLoad;
-    onPdfLoad: typeof onPreviewLoad;
-    onLoadError: typeof onLoadError;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     "update:visible": (_visible: boolean) => any;

package/es/file-previewer/file-previewer.vue_vue_type_script_setup_true_lang.js

@@ -345,7 +345,7 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			}
 		}
 		function close() {
-			if (fullscreen.value && !mergedVisible.value) return;
+			if (!mergedVisible.value) return;
 			emit("close");
 			setVisible(false);
 		}
@@ -453,10 +453,7 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		__expose({
 			close,
 			onLoad: onPreviewLoad,
-			onError: onLoadError,
-			onImageLoad: onPreviewLoad,
-			onPdfLoad: onPreviewLoad,
-			onLoadError
+			onError: onLoadError
 		});
 		return (_ctx, _cache) => {
 			return useImagePreview.value ? (openBlock(), createBlock(unref(Image), mergeProps({ key: currentSrc.value + "image" }, mergedImageProps.value, {
@@ -545,7 +542,7 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					key: 3,
 					class: normalizeClass(`${unref(prefixCls)}-error`),
 					role: "alert"
-				}, "文件预览加载失败", 2)) : createCommentVNode("", true)
+				}, toDisplayString(unref(t)("filePreview.loadFailed")), 3)) : createCommentVNode("", true)
 			], 46, _hoisted_1)) : createCommentVNode("", true)], 8, ["to", "disabled"]));
 		};
 	}

package/es/file-previewer/index.d.ts

@@ -103,9 +103,6 @@ declare const FilePreviewer: {
         close: () => void;
         onLoad: () => void;
         onError: () => void;
-        onImageLoad: () => void;
-        onPdfLoad: () => void;
-        onLoadError: () => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         close: () => any;
         "update:visible": (_visible: boolean) => any;
@@ -227,9 +224,6 @@ declare const FilePreviewer: {
         close: () => void;
         onLoad: () => void;
         onError: () => void;
-        onImageLoad: () => void;
-        onPdfLoad: () => void;
-        onLoadError: () => void;
     }, {}, {}, {}, {
         type: import("./types").FilePreviewerType;
         visible: boolean;
@@ -302,9 +296,6 @@ declare const FilePreviewer: {
     close: () => void;
     onLoad: () => void;
     onError: () => void;
-    onImageLoad: () => void;
-    onPdfLoad: () => void;
-    onLoadError: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     "update:visible": (_visible: boolean) => any;

package/es/form/context.d.ts

@@ -15,7 +15,6 @@ export interface FormContext {
     size: Size;
     rules?: Record<string, FieldRule | FieldRule[]>;
     fields: FormItemInfo[];
-    touchedFields: FormItemInfo[];
     addField: (field: FormItemInfo) => void;
     removeField: (field: FormItemInfo) => void;
     validateField: (field: string | string[], callback?: (errors: undefined | Record<string, ValidatedError>) => void) => Promise<undefined | Record<string, ValidatedError>>;
@@ -42,7 +41,7 @@ export interface FormItemInfo {
     disabled: boolean;
     error: boolean;
     labelWidth?: number;
-    validate: () => Promise<undefined | Record<string, ValidatedError>>;
+    validate: () => Promise<ValidatedError | undefined>;
     clearValidate: () => void;
     resetField: () => void;
     setField: (data: FieldData) => void;

package/es/form/form-item.vue_vue_type_script_setup_true_lang.js

@@ -326,12 +326,12 @@ var form_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			return new Promise((resolve) => {
 				schema.validate({ [_field]: _value }, (err) => {
 					var _err$_field$message;
-					const isError = Boolean(err === null || err === void 0 ? void 0 : err[_field]);
+					const hasError = Boolean(err === null || err === void 0 ? void 0 : err[_field]);
 					updateValidateState(_field, {
-						status: isError ? "error" : "",
+						status: hasError ? "error" : "",
 						message: (_err$_field$message = err === null || err === void 0 ? void 0 : err[_field].message) !== null && _err$_field$message !== void 0 ? _err$_field$message : ""
 					});
-					resolve(isError ? {
+					resolve(hasError ? {
 						label: props.label,
 						field: field.value,
 						value: err[_field].value,
@@ -443,7 +443,7 @@ var form_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			[`${prefixCls}-label-col-left`]: formCtx.labelAlign === "left",
 			[`${prefixCls}-label-col-flex`]: formCtx.autoLabelWidth || props.labelColFlex
 		}]);
-		const wrapperColCls = computed(() => [`${prefixCls}-wrapper-col`, { [`${prefixCls}-wrapper-col-flex`]: !mergedWrapperCol.value }]);
+		const wrapperColCls = `${prefixCls}-wrapper-col`;
 		return (_ctx, _cache) => {
 			var _ctx$$slots$help;
 			return __props.noStyle ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createBlock(unref(grid_row_default), mergeProps({
@@ -477,7 +477,7 @@ var form_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					])]),
 					_: 3
 				}, 16, ["class", "style"])) : createCommentVNode("", true), createVNode(unref(grid_col_default), mergeProps({
-					class: wrapperColCls.value,
+					class: wrapperColCls,
 					style: mergedWrapperStyle.value
 				}, mergedWrapperCol.value), {
 					default: withCtx(() => [
@@ -501,7 +501,7 @@ var form_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						}, [renderSlot(_ctx.$slots, "extra", {}, () => [createTextVNode(toDisplayString(__props.extra), 1)])], 2)) : createCommentVNode("", true)
 					]),
 					_: 3
-				}, 16, ["class", "style"])]),
+				}, 16, ["style"])]),
 				_: 3
 			}, 16, [
 				"class",

package/es/form/form.vue.d.ts

@@ -62,7 +62,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: StringConstructor;
     };
     scrollToFirstError: {
-        type: BooleanConstructor;
+        type: PropType<boolean | ScrollIntoViewOptions>;
         default: boolean;
     };
 }>, {
@@ -129,7 +129,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: StringConstructor;
     };
     scrollToFirstError: {
-        type: BooleanConstructor;
+        type: PropType<boolean | ScrollIntoViewOptions>;
         default: boolean;
     };
 }>> & Readonly<{
@@ -149,7 +149,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     wrapperColProps: Record<string, any>;
     labelAlign: "left" | "right";
     autoLabelWidth: boolean;
-    scrollToFirstError: boolean;
+    scrollToFirstError: boolean | ScrollIntoViewOptions;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/es/form/form.vue_vue_type_script_setup_true_lang.js

@@ -95,12 +95,12 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		*/
 		id: { type: String },
 		/**
-		* @zh 验证失败后滚动到第一个错误字段
-		* @en Scroll to the first error field after verification fails
+		* @zh 验证失败后滚动到第一个错误字段，支持传入 scrollIntoView 的选项对象
+		* @en Scroll to the first error field after verification fails; accepts a scrollIntoView options object
 		* @version 2.51.0
 		*/
 		scrollToFirstError: {
-			type: Boolean,
+			type: [Boolean, Object],
 			default: false
 		}
 	},
@@ -118,7 +118,6 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		const { mergedSize } = useSize(size);
 		const autoLabelWidth = computed(() => props.layout === "horizontal" && props.autoLabelWidth);
 		const fields = [];
-		const touchedFields = [];
 		const labelWidth = reactive({});
 		const maxLabelWidth = computed(() => Math.max(...Object.values(labelWidth)));
 		const addField = (formItemInfo) => {
@@ -152,10 +151,10 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		};
 		const scrollToField = (field, options) => {
 			const fieldNode = (formRef.value || document.body).querySelector(`#${getFormElementId(props.id, field)}`);
-			if (fieldNode) fieldNode.scrollIntoView({
+			if (fieldNode) fieldNode.scrollIntoView(_objectSpread2({
 				behavior: "smooth",
 				block: "nearest"
-			});
+			}, options));
 		};
 		const scrollToFirstError = (field) => {
 			const options = !isBoolean(props.scrollToFirstError) ? props.scrollToFirstError : void 0;
@@ -237,7 +236,6 @@ var form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			size: mergedSize,
 			rules,
 			fields,
-			touchedFields,
 			addField,
 			removeField,
 			validateField,

package/es/form/index.d.ts

@@ -50,7 +50,7 @@ declare const Form: {
             type: StringConstructor;
         };
         scrollToFirstError: {
-            type: BooleanConstructor;
+            type: import("vue").PropType<boolean | ScrollIntoViewOptions>;
             default: boolean;
         };
     }>> & Readonly<{
@@ -87,7 +87,7 @@ declare const Form: {
         wrapperColProps: Record<string, any>;
         labelAlign: "left" | "right";
         autoLabelWidth: boolean;
-        scrollToFirstError: boolean;
+        scrollToFirstError: boolean | ScrollIntoViewOptions;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -142,7 +142,7 @@ declare const Form: {
             type: StringConstructor;
         };
         scrollToFirstError: {
-            type: BooleanConstructor;
+            type: import("vue").PropType<boolean | ScrollIntoViewOptions>;
             default: boolean;
         };
     }>> & Readonly<{
@@ -169,7 +169,7 @@ declare const Form: {
         wrapperColProps: Record<string, any>;
         labelAlign: "left" | "right";
         autoLabelWidth: boolean;
-        scrollToFirstError: boolean;
+        scrollToFirstError: boolean | ScrollIntoViewOptions;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -221,7 +221,7 @@ declare const Form: {
         type: StringConstructor;
     };
     scrollToFirstError: {
-        type: BooleanConstructor;
+        type: import("vue").PropType<boolean | ScrollIntoViewOptions>;
         default: boolean;
     };
 }>> & Readonly<{
@@ -258,7 +258,7 @@ declare const Form: {
     wrapperColProps: Record<string, any>;
     labelAlign: "left" | "right";
     autoLabelWidth: boolean;
-    scrollToFirstError: boolean;
+    scrollToFirstError: boolean | ScrollIntoViewOptions;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default?: (props: {}) => any;

package/es/grid/grid-col.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
-import { isNumber, isObject, isString } from "../_utils/is.js";
+import { isNull, isNumber, isObject, isString, isUndefined } from "../_utils/is.js";
 import pick from "../_utils/pick.js";
 import { responsiveArray } from "../_utils/responsive-observe.js";
 import { RowContextInjectionKey } from "./context.js";
@@ -78,6 +78,7 @@ var grid_col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const props = __props;
 		const prefixCls = getPrefixCls("col");
 		const rowContext = inject(RowContextInjectionKey, {});
+		const hasBreakpointValue = (value) => !isUndefined(value) && !isNull(value);
 		const flexValue = computed(() => getAllowableFlexValue(props.flex));
 		const mergeClassName = computed(() => {
 			const { div } = rowContext;
@@ -85,7 +86,7 @@ var grid_col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			const result = {
 				[`${prefixCls}`]: !div,
 				[`${prefixCls}-order-${order}`]: order,
-				[`${prefixCls}-${span}`]: !div && !xs && !sm && !md && !lg && !xl && !xxl,
+				[`${prefixCls}-${span}`]: !div && !hasBreakpointValue(xs) && !hasBreakpointValue(sm) && !hasBreakpointValue(md) && !hasBreakpointValue(lg) && !hasBreakpointValue(xl) && !hasBreakpointValue(xxl),
 				[`${prefixCls}-offset-${offset}`]: offset && offset > 0
 			};
 			const screenList = {
@@ -98,8 +99,8 @@ var grid_col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			};
 			Object.keys(screenList).forEach((screen) => {
 				const screenValue = screenList[screen];
-				if (screenValue && isNumber(screenValue)) result[`${prefixCls}-${screen}-${screenValue}`] = true;
-				else if (screenValue && isObject(screenValue)) {
+				if (hasBreakpointValue(screenValue) && isNumber(screenValue)) result[`${prefixCls}-${screen}-${screenValue}`] = true;
+				else if (hasBreakpointValue(screenValue) && isObject(screenValue)) {
 					result[`${prefixCls}-${screen}-${screenValue.span}`] = screenValue.span;
 					result[`${prefixCls}-${screen}-offset-${screenValue.offset}`] = screenValue.offset;
 					result[`${prefixCls}-${screen}-order-${screenValue.order}`] = screenValue.order;

package/es/grid/hook/use-responsive-state.js

@@ -1,19 +1,27 @@
 import { isObject } from "../../_utils/is.js";
-import responsiveObserve, { responsiveArray } from "../../_utils/responsive-observe.js";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import responsiveObserve, { responsiveArray, responsiveMap } from "../../_utils/responsive-observe.js";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 //#region components/grid/hook/use-responsive-state.ts
 function isResponsiveValue(val) {
 	return isObject(val);
 }
-function useResponsiveState(val, defaultVal, fallbackToXs = false) {
-	const screens = ref({
+function getScreenSnapshot() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return {
 		xs: true,
 		sm: true,
 		md: true,
 		lg: true,
 		xl: true,
 		xxl: true
+	};
+	const snapshot = {};
+	Object.keys(responsiveMap).forEach((breakpoint) => {
+		snapshot[breakpoint] = window.matchMedia(responsiveMap[breakpoint]).matches;
 	});
+	return snapshot;
+}
+function useResponsiveState(val, defaultVal, fallbackToXs = false) {
+	const screens = ref(getScreenSnapshot());
 	const result = computed(() => {
 		let res = defaultVal;
 		if (isResponsiveValue(val.value)) for (let i = 0; i < responsiveArray.length; i++) {
@@ -35,6 +43,9 @@ function useResponsiveState(val, defaultVal, fallbackToXs = false) {
 	onUnmounted(() => {
 		if (subscribeToken) responsiveObserve.unsubscribe(subscribeToken);
 	});
+	watch(() => isResponsiveValue(val.value), (isResponsive) => {
+		if (isResponsive) screens.value = getScreenSnapshot();
+	});
 	return result;
 }
 //#endregion

package/es/grid/hook/use-responsive-value.js

@@ -1,11 +1,12 @@
-import { isNumber, isObject } from "../../_utils/is.js";
+import { isNull, isNumber, isObject, isUndefined } from "../../_utils/is.js";
 import { responsiveArray } from "../../_utils/responsive-observe.js";
 import { computed } from "vue";
 //#region components/grid/hook/use-responsive-value.ts
+var hasBreakpointValue = (value) => !isUndefined(value) && !isNull(value);
 function useResponsiveValue(props) {
 	return computed(() => {
 		const { val, key, xs, sm, md, lg, xl, xxl } = props.value;
-		if (!xs && !sm && !md && !lg && !xl && !xxl) return val;
+		if (!hasBreakpointValue(xs) && !hasBreakpointValue(sm) && !hasBreakpointValue(md) && !hasBreakpointValue(lg) && !hasBreakpointValue(xl) && !hasBreakpointValue(xxl)) return val;
 		const result = {};
 		responsiveArray.forEach((breakpoint) => {
 			const config = props.value[breakpoint];

package/es/icon/icon-arrow-up/icon-arrow-up.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,10 @@ var icon_arrow_up_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const innerStyle = computed(() => {
 			const styles = {};
 			if (__props.size) styles.fontSize = isNumber(__props.size) ? `${__props.size}px` : __props.size;
-			if (__props.rotate) styles.transform = `rotate(${__props.rotate}deg)`;
+			if (__props.rotate) {
+				styles.transform = `rotate(${__props.rotate}deg)`;
+				styles["--icon-rotate"] = `${__props.rotate}deg`;
+			}
 			return styles;
 		});
 		const onClick = (ev) => {

package/es/icon/icon-calendar/icon-calendar.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,10 @@ var icon_calendar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const innerStyle = computed(() => {
 			const styles = {};
 			if (__props.size) styles.fontSize = isNumber(__props.size) ? `${__props.size}px` : __props.size;
-			if (__props.rotate) styles.transform = `rotate(${__props.rotate}deg)`;
+			if (__props.rotate) {
+				styles.transform = `rotate(${__props.rotate}deg)`;
+				styles["--icon-rotate"] = `${__props.rotate}deg`;
+			}
 			return styles;
 		});
 		const onClick = (ev) => {

package/es/icon/icon-caret-down/icon-caret-down.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,10 @@ var icon_caret_down_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const innerStyle = computed(() => {
 			const styles = {};
 			if (__props.size) styles.fontSize = isNumber(__props.size) ? `${__props.size}px` : __props.size;
-			if (__props.rotate) styles.transform = `rotate(${__props.rotate}deg)`;
+			if (__props.rotate) {
+				styles.transform = `rotate(${__props.rotate}deg)`;
+				styles["--icon-rotate"] = `${__props.rotate}deg`;
+			}
 			return styles;
 		});
 		const onClick = (ev) => {

package/es/icon/icon-caret-left/icon-caret-left.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,10 @@ var icon_caret_left_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const innerStyle = computed(() => {
 			const styles = {};
 			if (__props.size) styles.fontSize = isNumber(__props.size) ? `${__props.size}px` : __props.size;
-			if (__props.rotate) styles.transform = `rotate(${__props.rotate}deg)`;
+			if (__props.rotate) {
+				styles.transform = `rotate(${__props.rotate}deg)`;
+				styles["--icon-rotate"] = `${__props.rotate}deg`;
+			}
 			return styles;
 		});
 		const onClick = (ev) => {

package/es/icon/icon-caret-right/icon-caret-right.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,10 @@ var icon_caret_right_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const innerStyle = computed(() => {
 			const styles = {};
 			if (__props.size) styles.fontSize = isNumber(__props.size) ? `${__props.size}px` : __props.size;
-			if (__props.rotate) styles.transform = `rotate(${__props.rotate}deg)`;
+			if (__props.rotate) {
+				styles.transform = `rotate(${__props.rotate}deg)`;
+				styles["--icon-rotate"] = `${__props.rotate}deg`;
+			}
 			return styles;
 		});
 		const onClick = (ev) => {

package/es/icon/icon-caret-up/icon-caret-up.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,10 @@ var icon_caret_up_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const innerStyle = computed(() => {
 			const styles = {};
 			if (__props.size) styles.fontSize = isNumber(__props.size) ? `${__props.size}px` : __props.size;
-			if (__props.rotate) styles.transform = `rotate(${__props.rotate}deg)`;
+			if (__props.rotate) {
+				styles.transform = `rotate(${__props.rotate}deg)`;
+				styles["--icon-rotate"] = `${__props.rotate}deg`;
+			}
 			return styles;
 		});
 		const onClick = (ev) => {

package/es/icon/icon-check/icon-check.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,10 @@ var icon_check_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const innerStyle = computed(() => {
 			const styles = {};
 			if (__props.size) styles.fontSize = isNumber(__props.size) ? `${__props.size}px` : __props.size;
-			if (__props.rotate) styles.transform = `rotate(${__props.rotate}deg)`;
+			if (__props.rotate) {
+				styles.transform = `rotate(${__props.rotate}deg)`;
+				styles["--icon-rotate"] = `${__props.rotate}deg`;
+			}
 			return styles;
 		});
 		const onClick = (ev) => {

package/es/icon/icon-check-circle-fill/icon-check-circle-fill.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,10 @@ var icon_check_circle_fill_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		const innerStyle = computed(() => {
 			const styles = {};
 			if (__props.size) styles.fontSize = isNumber(__props.size) ? `${__props.size}px` : __props.size;
-			if (__props.rotate) styles.transform = `rotate(${__props.rotate}deg)`;
+			if (__props.rotate) {
+				styles.transform = `rotate(${__props.rotate}deg)`;
+				styles["--icon-rotate"] = `${__props.rotate}deg`;
+			}
 			return styles;
 		});
 		const onClick = (ev) => {

package/es/icon/icon-clock-circle/icon-clock-circle.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,10 @@ var icon_clock_circle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const innerStyle = computed(() => {
 			const styles = {};
 			if (__props.size) styles.fontSize = isNumber(__props.size) ? `${__props.size}px` : __props.size;
-			if (__props.rotate) styles.transform = `rotate(${__props.rotate}deg)`;
+			if (__props.rotate) {
+				styles.transform = `rotate(${__props.rotate}deg)`;
+				styles["--icon-rotate"] = `${__props.rotate}deg`;
+			}
 			return styles;
 		});
 		const onClick = (ev) => {

package/es/icon/icon-close/icon-close.vue_vue_type_script_setup_true_lang.js

@@ -30,7 +30,10 @@ var icon_close_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const innerStyle = computed(() => {
 			const styles = {};
 			if (__props.size) styles.fontSize = isNumber(__props.size) ? `${__props.size}px` : __props.size;
-			if (__props.rotate) styles.transform = `rotate(${__props.rotate}deg)`;
+			if (__props.rotate) {
+				styles.transform = `rotate(${__props.rotate}deg)`;
+				styles["--icon-rotate"] = `${__props.rotate}deg`;
+			}
 			return styles;
 		});
 		const onClick = (ev) => {