antdv-next 1.0.0-alpha.4 → 1.0.0-beta.1

package/dist/float-button/style/button.js

@@ -4,18 +4,18 @@ import { unit } from "@antdv-next/cssinjs";
 //#region src/float-button/style/button.ts
 const genFloatButtonStyle = (token) => {
 	const { componentCls, floatButtonSize, iconCls, antCls, floatButtonIconSize } = token;
-	const getCssVar = genCssVar(antCls, "float-btn");
+	const [varName, varRef] = genCssVar(antCls, "float-btn");
 	const badgeCls = `${componentCls}-badge`;
 	const R = Math.SQRT2;
 	const offsetR = (R - 1) / R;
 	const offsetSquare = token.calc(token.borderRadius).mul(offsetR).equal();
 	const offsetCircle = token.calc(token.controlHeight).div(2).mul(offsetR).equal();
-	return { [componentCls]: [{ [getCssVar("size")]: unit(floatButtonSize) }, {
+	return { [componentCls]: [{ [varName("size")]: unit(floatButtonSize) }, {
 		"flexDirection": "column",
 		"margin": 0,
 		"padding": `${unit(token.paddingXXS)} 0`,
-		"width": `var(${getCssVar("size")})`,
-		"minHeight": `var(${getCssVar("size")})`,
+		"width": varRef("size"),
+		"minHeight": varRef("size"),
 		"height": "auto",
 		"wordBreak": "break-word",
 		"whiteSpace": "normal",

package/dist/float-button/style/group.js

@@ -7,11 +7,11 @@ const genGroupStyle = (token) => {
 	const { componentCls, antCls, floatButtonSize, padding } = token;
 	const groupCls = `${componentCls}-group`;
 	const listCls = `${groupCls}-list`;
-	const getCssVar = genCssVar(antCls, "float-btn");
+	const [varName, varRef] = genCssVar(antCls, "float-btn");
 	return { [groupCls]: [
 		{
-			[getCssVar("list-transform-start")]: `translate(0,${unit(floatButtonSize)})`,
-			[getCssVar("list-trigger-offset")]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`
+			[varName("list-transform-start")]: `translate(0,${unit(floatButtonSize)})`,
+			[varName("list-trigger-offset")]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`
 		},
 		{
 			...resetComponent(token),
@@ -40,7 +40,7 @@ const genGroupStyle = (token) => {
 					"transition": `all ${token.motionDurationSlow}`,
 					"&-enter, &-appear": {
 						"opacity": 0,
-						"transform": getCssVar("list-transform-start", true),
+						"transform": varRef("list-transform-start"),
 						"&-active": {
 							opacity: 1,
 							transform: `translate(0, 0)`
@@ -48,22 +48,22 @@ const genGroupStyle = (token) => {
 					},
 					"&-leave": { "&-active": {
 						opacity: 0,
-						transform: getCssVar("list-transform-start", true)
+						transform: varRef("list-transform-start")
 					} }
 				}
 			},
-			"&-top": { [listCls]: { bottom: getCssVar("list-trigger-offset", true) } },
+			"&-top": { [listCls]: { bottom: varRef("list-trigger-offset") } },
 			"&-bottom": { [listCls]: {
-				[getCssVar("list-transform-start")]: `translate(0, calc(${unit(floatButtonSize)} * -1))`,
-				top: getCssVar("list-trigger-offset", true)
+				[varName("list-transform-start")]: `translate(0, calc(${unit(floatButtonSize)} * -1))`,
+				top: varRef("list-trigger-offset")
 			} },
 			"&-left": { [listCls]: {
-				[getCssVar("list-transform-start")]: `translate(${unit(floatButtonSize)}, 0)`,
-				right: getCssVar("list-trigger-offset", true)
+				[varName("list-transform-start")]: `translate(${unit(floatButtonSize)}, 0)`,
+				right: varRef("list-trigger-offset")
 			} },
 			"&-right": { [listCls]: {
-				[getCssVar("list-transform-start")]: `translate(calc(${unit(floatButtonSize)} * -1), 0)`,
-				left: getCssVar("list-trigger-offset", true)
+				[varName("list-transform-start")]: `translate(calc(${unit(floatButtonSize)} * -1), 0)`,
+				left: varRef("list-trigger-offset")
 			} }
 		}
 	] };

package/dist/form/ErrorList.js

@@ -6,7 +6,7 @@ import motion_default from "../_util/motion.js";
 import isNonNullable_default from "../_util/isNonNullable.js";
 import { useFormItemPrefixContext } from "./context.js";
 import style_default from "./style/index.js";
-import { Transition, TransitionGroup, computed, createVNode, defineComponent, isVNode, vShow, withDirectives } from "vue";
+import { Transition, TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
 import { clsx } from "@v-c/util";
 import { getTransitionGroupProps, getTransitionProps } from "@v-c/util/dist/utils/transition";
 
@@ -67,22 +67,19 @@ const ErrorList = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 				props.onVisibleChanged?.(false);
 			}
 		};
-		const transitionGroupPropsName = `${prefixCls.value}-show-help-item`;
 		const transitionGroupProps = {
-			tag: "div",
-			class: clsx(baseClassName.value, cssVarCls.value, rootCls.value, rootClassName, hashId.value),
-			...getTransitionGroupProps(transitionGroupPropsName),
+			...getTransitionGroupProps(`${prefixCls.value}-show-help-item`),
 			...collapseMotion,
 			name: `${prefixCls.value}-show-help-item`
 		};
-		return createVNode(Transition, transitionProps, { default: () => [withDirectives(createVNode(TransitionGroup, transitionGroupProps, _isSlot(_slot = filledKeyFullKeyList.map((itemProps) => {
+		return createVNode(Transition, transitionProps, { default: () => [!!filledKeyFullKeyList.length && createVNode("div", { "class": clsx(baseClassName.value, cssVarCls.value, rootCls.value, rootClassName, hashId.value) }, [createVNode(TransitionGroup, mergeProps(transitionGroupProps, { "appear": true }), _isSlot(_slot = filledKeyFullKeyList.map((itemProps) => {
 			const { key, error, errorStatus, class: itemClassName, style: itemStyle } = itemProps;
 			return createVNode("div", {
 				"key": key,
 				"class": clsx(itemClassName, { [`${baseClassName.value}-${errorStatus}`]: !!errorStatus }),
 				"style": itemStyle
 			}, [error]);
-		})) ? _slot : { default: () => [_slot] }), [[vShow, !!filledKeyFullKeyList.length]])] });
+		})) ? _slot : { default: () => [_slot] })])] });
 	};
 }, {
 	props: {

package/dist/form/Form.d.ts

@@ -7,7 +7,7 @@ import { FormLabelAlign, ScrollFocusOptions } from "./interface.js";
 import { FieldData, InternalNamePath, NamePath, Rule, ValidateErrorEntity, ValidateMessages, ValidateOptions } from "./types.js";
 import { FeedbackIcons } from "./FormItem/index.js";
 import { ComponentBaseProps, Variant } from "../config-provider/context.js";
-import * as vue315 from "vue";
+import * as vue258 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/form/Form.d.ts
@@ -42,6 +42,7 @@ interface FormProps extends ComponentBaseProps {
   preserve?: boolean;
   clearOnDestroy?: boolean;
   validateOnRuleChange?: boolean;
+  autoComplete?: string | undefined;
 }
 interface FormEmits {
   finish: (values: Record<string, any>) => void;
@@ -79,9 +80,12 @@ interface FormInstance {
   validate: () => Promise<Record<string, any>>;
   submit: () => void;
   nativeElement: HTMLFormElement | undefined;
+  scrollToField: (fieldName: NamePath, options?: ScrollFocusOptions | boolean) => void;
+  focusField: (fieldName: NamePath) => void;
+  getFieldInstance: (name: NamePath) => any;
 }
-declare const InternalForm: vue315.DefineSetupFnComponent<FormProps, FormEmits, SlotsType<FormSlots>, FormProps & {
+declare const InternalForm: vue258.DefineSetupFnComponent<FormProps, FormEmits, SlotsType<FormSlots>, FormProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue315.PublicProps>;
+}, vue258.PublicProps>;
 //#endregion
 export { FormEmits, FormInstance, FormItemLayout, FormProps, FormSlots, InternalForm, RequiredMark };

package/dist/form/Form.js

@@ -178,29 +178,27 @@ const InternalForm = /* @__PURE__ */ defineComponent((props, { slots, expose, em
 		};
 	});
 	const nativeElementRef = shallowRef();
-	const scrollToField = (options, fieldName) => {
-		if (options) {
-			let defaultScrollToFirstError = { block: "nearest" };
-			if (typeof options === "object") defaultScrollToFirstError = {
-				...defaultScrollToFirstError,
-				...options
-			};
-			const targetId = getFieldId(fieldName, props.name);
-			const node = targetId ? document.getElementById(targetId) : null;
-			if (node) {
-				scrollIntoView(node, defaultScrollToFirstError);
-				if (defaultScrollToFirstError.focus !== false) try {
-					node.focus();
-				} catch {}
-			}
+	const scrollToField = (fieldName, options = {}) => {
+		let defaultScrollToFirstError = { block: "nearest" };
+		if (typeof options === "object") defaultScrollToFirstError = {
+			...defaultScrollToFirstError,
+			...options
+		};
+		const targetId = getFieldId(fieldName, props.name);
+		const node = targetId ? document.getElementById(targetId) : null;
+		if (node) {
+			scrollIntoView(node, defaultScrollToFirstError);
+			if (defaultScrollToFirstError.focus !== false) try {
+				node.focus();
+			} catch {}
 		}
 	};
 	const onInternalFinishFailed = (errorInfo) => {
 		emit("finishFailed", errorInfo);
 		if (errorInfo.errorFields?.length) {
 			const fieldName = errorInfo.errorFields?.[0]?.name;
-			if (props.scrollToFirstError !== void 0) scrollToField(props.scrollToFirstError, fieldName);
-			else if (contextScrollToFirstError.value !== void 0) scrollToField(contextScrollToFirstError.value, fieldName);
+			if (props.scrollToFirstError !== void 0) scrollToField(fieldName, props.scrollToFirstError);
+			else if (contextScrollToFirstError.value !== void 0) scrollToField(fieldName, contextScrollToFirstError.value);
 		}
 	};
 	const updateModelValue = (namePath, value) => {
@@ -265,6 +263,10 @@ const InternalForm = /* @__PURE__ */ defineComponent((props, { slots, expose, em
 	const submit = () => {
 		handleSubmit(new Event("submit"));
 	};
+	useFormContextProvider(formContextValue);
+	useVariantContextProvider(variant);
+	useDisabledContextProvider(disabled);
+	useSizeProvider(mergedSize);
 	expose({
 		getFieldValue: (name) => getFieldValue(getNamePath(name)),
 		getFieldsValue,
@@ -283,12 +285,22 @@ const InternalForm = /* @__PURE__ */ defineComponent((props, { slots, expose, em
 		validateFields,
 		validate: () => validateFields(),
 		submit,
-		nativeElement: nativeElementRef
+		nativeElement: nativeElementRef,
+		scrollToField: (name, options = {}) => {
+			scrollToField(getNamePath(name), options);
+		},
+		focusField: (name) => {
+			const targetId = getFieldId(getNamePath(name), props.name);
+			const node = targetId ? document.getElementById(targetId) : null;
+			if (node) try {
+				node.focus?.();
+			} finally {}
+		},
+		getFieldInstance: (name) => {
+			const targetId = getFieldId(getNamePath(name), props.name);
+			if (targetId) return fields.value?.[targetId];
+		}
 	});
-	useFormContextProvider(formContextValue);
-	useVariantContextProvider(variant);
-	useDisabledContextProvider(disabled);
-	useSizeProvider(mergedSize);
 	watch(() => rules.value, () => {
 		if (props.validateOnRuleChange) validateFields();
 	}, { deep: true });
@@ -457,6 +469,11 @@ const InternalForm = /* @__PURE__ */ defineComponent((props, { slots, expose, em
 			required: false,
 			default: void 0
 		},
+		autoComplete: {
+			type: [String, null],
+			required: false,
+			default: void 0
+		},
 		rootClass: {
 			type: String,
 			required: false,

package/dist/form/FormItem/ItemHolder.js

@@ -85,7 +85,6 @@ const ItemHolder = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 }, {
 	props: {
 		name: {
-			type: String,
 			required: false,
 			default: void 0
 		},

package/dist/form/FormItem/index.d.ts

@@ -1,9 +1,9 @@
-import { Rule } from "../types.js";
+import { NamePath, Rule } from "../types.js";
 import { FormItemLayout } from "../Form.js";
 import { FormItemInputProps } from "../FormItemInput.js";
 import { FormItemLabelProps, LabelTooltipType } from "../FormItemLabel.js";
 import { ComponentBaseProps } from "../../config-provider/context.js";
-import * as vue313 from "vue";
+import * as vue256 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/form/FormItem/index.d.ts
@@ -15,7 +15,7 @@ type FeedbackIcons = (itemStatus: {
   warnings?: any[];
 }) => { [key in ValidateStatus]?: any };
 interface BaseFormItemProps {
-  name?: string;
+  name?: NamePath;
   rules?: Rule[];
   trigger?: string;
   validateTrigger?: string | string[] | false;
@@ -41,7 +41,7 @@ interface FormItemEmits {
 interface FormItemSlots {
   default: () => any;
 }
-declare const InternalFormItem: vue313.DefineSetupFnComponent<FormItemProps, FormItemEmits, SlotsType<FormItemSlots>, BaseFormItemProps & ComponentBaseProps & Omit<FormItemLabelProps, "requiredMark"> & FormItemInputProps & {
+declare const InternalFormItem: vue256.DefineSetupFnComponent<FormItemProps, FormItemEmits, SlotsType<FormItemSlots>, BaseFormItemProps & ComponentBaseProps & Omit<FormItemLabelProps, "requiredMark"> & FormItemInputProps & {
   noStyle?: boolean;
   id?: string;
   hasFeedback?: boolean | {
@@ -55,6 +55,6 @@ declare const InternalFormItem: vue313.DefineSetupFnComponent<FormItemProps, For
   layout?: FormItemLayout;
 } & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue313.PublicProps>;
+}, vue256.PublicProps>;
 //#endregion
 export { FeedbackIcons, InternalFormItem, ValidateStatus };

package/dist/form/FormItem/index.js

@@ -8,7 +8,7 @@ import { getNamePath, getValue, setValue } from "../utils/valueUtil.js";
 import { validateRules } from "../utils/validateUtil.js";
 import StatusProvider_default from "./StatusProvider.js";
 import ItemHolder_default from "./ItemHolder.js";
-import { computed, createVNode, defineComponent, isVNode, mergeProps, onBeforeUnmount, shallowRef, watch } from "vue";
+import { cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps, onBeforeUnmount, shallowRef, watch } from "vue";
 import { clsx } from "@v-c/util";
 import { filterEmpty } from "@v-c/util/dist/props-util";
 
@@ -70,7 +70,7 @@ const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs
 	const messageVariables = computed(() => {
 		let variables = {};
 		if (typeof props.label === "string") variables.label = props.label;
-		else if (props.name) variables.label = String(props.name);
+		else if (props.name) variables.label = Array.isArray(props.name) ? props.name.join(".") : String(props.name);
 		if (props.messageVariables) variables = {
 			...variables,
 			...props.messageVariables
@@ -178,7 +178,7 @@ const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs
 		updateMeta({ touched: true });
 		triggerValidate("change");
 	};
-	const onFieldFoucs = () => {
+	const onFieldFocus = () => {
 		updateMeta({ touched: true });
 		triggerValidate("focus");
 	};
@@ -212,44 +212,64 @@ const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs
 		};
 	});
 	const rootClassName = computed(() => clsx(cssVarCls.value, rootCls.value, hashId.value, props.rootClass));
-	const eventKey = `form-item-${fieldId.value || namePath.value.join("-") || Math.random().toString(36).slice(2)}`;
-	watch(hasName, (val) => {
-		if (val && formContext.value?.addField) formContext.value.addField(eventKey, {
-			onFieldBlur,
-			namePath: () => namePath.value,
-			getValue: () => fieldValue.value,
-			getMeta: () => meta.value,
-			rules: () => mergedRules.value,
-			validateRules: (options) => validateRulesInner(options),
-			resetField,
-			clearValidate,
-			setFieldState: (state) => {
-				if (state.errors) errors.value = state.errors;
-				if (state.warnings) warnings.value = state.warnings;
-				updateMeta({
-					...meta.value,
-					...state,
-					errors: state.errors ?? meta.value.errors,
-					warnings: state.warnings ?? meta.value.warnings
-				});
-			}
-		});
-		else formContext.value?.removeField?.(eventKey);
+	const eventKey = computed(() => `form-item-${fieldId.value || namePath.value.join("-") || Math.random().toString(36).slice(2)}`);
+	watch(hasName, (val, _, onCleanup) => {
+		if (val && formContext.value?.addField) {
+			formContext.value.addField(eventKey.value, {
+				onFieldBlur,
+				namePath: () => namePath.value,
+				getValue: () => fieldValue.value,
+				getMeta: () => meta.value,
+				rules: () => mergedRules.value,
+				validateRules: (options) => validateRulesInner(options),
+				resetField,
+				clearValidate,
+				setFieldState: (state) => {
+					if (state.errors) errors.value = state.errors;
+					if (state.warnings) warnings.value = state.warnings;
+					updateMeta({
+						...meta.value,
+						...state,
+						errors: state.errors ?? meta.value.errors,
+						warnings: state.warnings ?? meta.value.warnings
+					});
+				}
+			});
+			onCleanup(() => {
+				formContext.value?.removeField?.(eventKey.value);
+			});
+		} else formContext.value?.removeField?.(eventKey.value);
 	}, { immediate: true });
 	onBeforeUnmount(() => {
-		formContext.value?.removeField?.(eventKey);
+		formContext.value?.removeField?.(eventKey.value);
 	});
 	useFormItemProvider({
 		fieldId,
 		triggerBlur: onFieldBlur,
 		triggerChange: onFieldChange,
 		clearValidate,
-		triggerFocus: onFieldFoucs
+		triggerFocus: onFieldFocus
 	});
 	return () => {
 		return renderLayout(checkRenderNode(filterEmpty(slots.default?.() ?? [])), fieldId.value, isRequired.value);
 	};
 	function renderLayout(baseChildren, currentFieldId, isRequiredMark) {
+		if (Array.isArray(baseChildren) && baseChildren.length === 1 && isVNode(baseChildren[0]) || isVNode(baseChildren)) {
+			const child = isVNode(baseChildren) ? baseChildren : baseChildren[0];
+			const childProps = child.props || {};
+			baseChildren = cloneVNode(child, {
+				id: currentFieldId,
+				...childProps,
+				onBlur: (...args) => {
+					onFieldBlur();
+					if (childProps.onBlur) childProps.onBlur(...args);
+				},
+				onFocus: (...args) => {
+					onFieldFocus();
+					if (childProps.onFocus) childProps.onFocus(...args);
+				}
+			});
+		}
 		if (props.noStyle && !props.hidden) return createVNode(StatusProvider_default, {
 			"prefixCls": prefixCls.value,
 			"hasFeedback": props.hasFeedback,
@@ -284,7 +304,6 @@ const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs
 }, {
 	props: {
 		name: {
-			type: String,
 			required: false,
 			default: void 0
 		},

package/dist/form/FormItemInput.js

@@ -35,25 +35,23 @@ const FormItemInput = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		const children = filterEmpty(slots?.default?.() ?? []);
 		const mergedWrapperColFn = () => {
 			let mergedWrapper = { ...wrapperCol || formContext.value?.wrapperCol || {} };
-			if (label === null && !labelCol && !wrapperCol && formContext.value?.labelCol) {
-				[
-					void 0,
-					"xs",
-					"sm",
-					"md",
-					"lg",
-					"xl",
-					"xxl"
-				].forEach((size) => {
-					const _size = size ? [size] : [];
-					const formLabel = get(formContext?.value?.labelCol, _size);
-					const formLabelObj = typeof formLabel === "object" ? formLabel : {};
-					const wrapper = get(mergedWrapper, _size);
-					const wrapperObj = typeof wrapper === "object" ? wrapper : {};
-					if ("span" in formLabelObj && !("offset" in wrapperObj) && formLabelObj.span < GRID_MAX) mergedWrapper = set(mergedWrapper, [..._size, "offset"], formLabelObj.span);
-				});
-				return mergedWrapper;
-			}
+			if (label === null && !labelCol && !wrapperCol && formContext.value?.labelCol) [
+				void 0,
+				"xs",
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"xxl"
+			].forEach((size) => {
+				const _size = size ? [size] : [];
+				const formLabel = get(formContext?.value?.labelCol, _size);
+				const formLabelObj = typeof formLabel === "object" ? formLabel : {};
+				const wrapper = get(mergedWrapper, _size);
+				const wrapperObj = typeof wrapper === "object" ? wrapper : {};
+				if ("span" in formLabelObj && !("offset" in wrapperObj) && formLabelObj.span < GRID_MAX) mergedWrapper = set(mergedWrapper, [..._size, "offset"], formLabelObj.span);
+			});
+			return mergedWrapper;
 		};
 		const mergedWrapperCol = mergedWrapperColFn();
 		const className = clsx(`${baseClassName.value}-control`, mergedWrapperCol?.class);

package/dist/form/style/index.js

@@ -1,5 +1,5 @@
 import { resetComponent } from "../../style/index.js";
-import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.js";
 import { mergeToken } from "../../theme/internal.js";
 import collapse_default from "../../style/motion/collapse.js";
 import { zoomIn } from "../../style/motion/zoom.js";
@@ -66,6 +66,7 @@ const genFormStyle = (token) => {
 };
 const genFormItemStyle = (token) => {
 	const { formItemCls, iconCls, rootPrefixCls, antCls, labelRequiredMarkColor, labelColor, labelFontSize, labelHeight, labelColonMarginInlineStart, labelColonMarginInlineEnd, itemMarginBottom } = token;
+	const [varName] = genCssVar(antCls, "grid");
 	return { [formItemCls]: {
 		...resetComponent(token),
 		"marginBottom": itemMarginBottom,
@@ -138,7 +139,7 @@ const genFormItemStyle = (token) => {
 			}
 		},
 		[`${formItemCls}-control`]: {
-			["--ant-display"]: "flex",
+			[varName("display")]: "flex",
 			"flexDirection": "column",
 			"flexGrow": 1,
 			[`&:first-child:not([class^="'${rootPrefixCls}-col-'"]):not([class*="' ${rootPrefixCls}-col-'"])`]: { width: "100%" },

package/dist/form/utils/valueUtil.js

@@ -5,12 +5,15 @@ import setValue from "@v-c/util/dist/utils/set";
 //#region src/form/utils/valueUtil.ts
 /**
 * Convert name to internal supported format.
-* This function should keep since we still thinking if need support like `a.b.c` format.
+* Support formats:
 * 'a' => ['a']
+* 'a.b.c' => ['a', 'b', 'c']
 * 123 => [123]
 * ['a', 123] => ['a', 123]
+* ['a', 'b', 'c'] => ['a', 'b', 'c']
 */
 function getNamePath(path) {
+	if (typeof path === "string") return path.split(".");
 	return toArray(path);
 }
 /**

package/dist/grid/col.js

@@ -1,12 +1,16 @@
 import { useConfig } from "../config-provider/context.js";
+import { genCssVar } from "../theme/util/genStyleUtils.js";
 import { useColStyle } from "./style/index.js";
 import { useRowContext } from "./RowContext.js";
 import { computed, createVNode, defineComponent, mergeProps } from "vue";
 import { classNames } from "@v-c/util";
 
 //#region src/grid/col.tsx
+function isNumber(value) {
+	return typeof value === "number" && !Number.isNaN(value);
+}
 function parseFlex(flex) {
-	if (typeof flex === "number") return `${flex} ${flex} auto`;
+	if (isNumber(flex)) return `${flex} ${flex} auto`;
 	if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) return `0 0 ${flex}`;
 	return flex;
 }
@@ -22,6 +26,7 @@ const Col = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	const configCtx = useConfig();
 	const { gutter, wrap } = useRowContext();
 	const prefixCls = computed(() => configCtx.value?.getPrefixCls("col", props.prefixCls));
+	const [varName] = genCssVar(computed(() => configCtx.value?.getPrefixCls()).value, "col");
 	const [hashId, cssVarCls] = useColStyle(prefixCls);
 	return () => {
 		const { span, order, offset, push, pull, flex } = props;
@@ -43,7 +48,7 @@ const Col = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 			};
 			if (sizeProps.flex) {
 				sizeClassObj[`${prefixCls.value}-${size}-flex`] = true;
-				sizeStyle[`--${prefixCls.value}-${size}-flex`] = parseFlex(sizeProps.flex);
+				sizeStyle[varName(`${size}-flex`)] = parseFlex(sizeProps.flex);
 			}
 		});
 		const classes = classNames(prefixCls.value, {

package/dist/grid/index.d.ts

@@ -1,10 +1,10 @@
 import { Breakpoint } from "../_util/responsiveObserver.js";
 import { Col, ColProps, ColSize } from "./col.js";
 import { Row, RowProps } from "./row.js";
-import * as vue7 from "vue";
+import * as vue5 from "vue";
 
 //#region src/grid/index.d.ts
-declare function useBreakpoint(): vue7.Ref<{
+declare function useBreakpoint(): vue5.Ref<{
   xxl?: boolean | undefined;
   xl?: boolean | undefined;
   lg?: boolean | undefined;

package/dist/grid/row.d.ts

@@ -1,5 +1,5 @@
 import { Breakpoint } from "../_util/responsiveObserver.js";
-import * as vue8 from "vue";
+import * as vue9 from "vue";
 
 //#region src/grid/row.d.ts
 declare const _RowAligns: readonly ["top", "middle", "bottom", "stretch"];
@@ -16,6 +16,6 @@ interface RowProps {
   prefixCls?: string;
   wrap?: boolean;
 }
-declare const Row: vue8.DefineSetupFnComponent<RowProps, {}, {}, RowProps & {}, vue8.PublicProps>;
+declare const Row: vue9.DefineSetupFnComponent<RowProps, {}, {}, RowProps & {}, vue9.PublicProps>;
 //#endregion
 export { Row, RowProps };

package/dist/grid/style/index.js

@@ -1,4 +1,4 @@
-import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.js";
 import { mergeToken } from "../../theme/internal.js";
 import { unit } from "@antdv-next/cssinjs";
 
@@ -31,7 +31,9 @@ const genGridColStyle = (token) => {
 	} };
 };
 function genLoopGridColumnsStyle(token, sizeCls) {
-	const { prefixCls, componentCls, gridColumns } = token;
+	const { componentCls, gridColumns, antCls } = token;
+	const [gridVarName, gridVarRef] = genCssVar(antCls, "grid");
+	const [, colVarRef] = genCssVar(antCls, "col");
 	const gridColumnsStyle = {};
 	for (let i = gridColumns; i >= 0; i--) if (i === 0) {
 		gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = { display: "none" };
@@ -43,10 +45,10 @@ function genLoopGridColumnsStyle(token, sizeCls) {
 		gridColumnsStyle[`${componentCls}${sizeCls}-order-${i}`] = { order: 0 };
 	} else {
 		gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = [{
-			["--ant-display"]: "block",
+			[gridVarName("display")]: "block",
 			display: "block"
 		}, {
-			display: "var(--ant-display)",
+			display: gridVarRef("display"),
 			flex: `0 0 ${i / gridColumns * 100}%`,
 			maxWidth: `${i / gridColumns * 100}%`
 		}];
@@ -55,7 +57,7 @@ function genLoopGridColumnsStyle(token, sizeCls) {
 		gridColumnsStyle[`${componentCls}${sizeCls}-offset-${i}`] = { marginInlineStart: `${i / gridColumns * 100}%` };
 		gridColumnsStyle[`${componentCls}${sizeCls}-order-${i}`] = { order: i };
 	}
-	gridColumnsStyle[`${componentCls}${sizeCls}-flex`] = { flex: `var(--${prefixCls}${sizeCls}-flex)` };
+	gridColumnsStyle[`${componentCls}${sizeCls}-flex`] = { flex: colVarRef(`${sizeCls.replace(/-/, "")}-flex`) };
 	return gridColumnsStyle;
 }
 function genGridStyle(token, sizeCls) {

package/dist/image/PreviewGroup.d.ts

@@ -1,7 +1,7 @@
 import { MaskType } from "../_util/hooks/useMergedMask.js";
 import "../_util/hooks/index.js";
 import { DeprecatedPreviewConfig, ImageClassNamesType, ImageStylesType } from "./index.js";
-import * as vue331 from "vue";
+import * as vue260 from "vue";
 import { PreviewGroupProps } from "@v-c/image";
 
 //#region src/image/PreviewGroup.d.ts
@@ -17,6 +17,6 @@ interface PreviewGroupProps$1 extends Omit<PreviewGroupProps, 'preview' | 'style
   classes?: ImageClassNamesType;
   styles?: ImageStylesType;
 }
-declare const InternalPreviewGroup: vue331.DefineSetupFnComponent<PreviewGroupProps$1, {}, {}, PreviewGroupProps$1 & {}, vue331.PublicProps>;
+declare const InternalPreviewGroup: vue260.DefineSetupFnComponent<PreviewGroupProps$1, {}, {}, PreviewGroupProps$1 & {}, vue260.PublicProps>;
 //#endregion
 export { InternalPreviewGroup, PreviewGroupProps$1 as PreviewGroupProps };