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

package/dist/float-button/BackTop.js

@@ -1,6 +1,6 @@
 import throttleByAnimationFrame_default from "../_util/throttleByAnimationFrame.js";
 import { useComponentBaseConfig, useConfig } from "../config-provider/context.js";
-import { pureAttrs } from "../_util/hooks/useMergeSemantic.js";
+import { getAttrStyleAndClass as getAttrStyleAndClass$1, pureAttrs } from "../_util/hooks/useMergeSemantic.js";
 import "../_util/hooks/index.js";
 import { toPropsRefs } from "../_util/tools.js";
 import getScroll_default from "../_util/getScroll.js";
@@ -75,12 +75,15 @@ const BackTopWithInstall = /* @__PURE__ */ defineComponent((props, { attrs, slot
 		emit("click", e);
 	};
 	return () => {
+		const { className, style } = getAttrStyleAndClass$1(attrs);
 		return createVNode(Transition, transitionProps.value, { default: () => visible.value ? createVNode(FloatButton_default, mergeProps(pureAttrs(attrs), omit(props, [
 			"visibilityHeight",
 			"target",
 			"duration"
 		]), {
 			"ref": floatButtonRef,
+			"class": className,
+			"style": style,
 			"shape": mergedShape.value,
 			"icon": mergedIcon.value,
 			"onClick": scrollToTop

package/dist/float-button/FloatButton.d.ts

@@ -7,7 +7,7 @@ import { ButtonSemanticName } from "../button/Button.js";
 import "../button/index.js";
 import { BadgeProps } from "../badge/index.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue324 from "vue";
+import * as vue254 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 
 //#region src/float-button/FloatButton.d.ts
@@ -54,9 +54,9 @@ interface FloatButtonEmits {
   blur: (e: FocusEvent) => void;
   [key: string]: (...args: any[]) => void;
 }
-declare const InternalFloatButton: vue324.DefineSetupFnComponent<FloatButtonProps, FloatButtonEmits, SlotsType<FloatButtonSlots>, FloatButtonProps & {
+declare const InternalFloatButton: vue254.DefineSetupFnComponent<FloatButtonProps, FloatButtonEmits, SlotsType<FloatButtonSlots>, FloatButtonProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue324.PublicProps>;
+}, vue254.PublicProps>;
 declare const FloatButton: typeof InternalFloatButton;
 //#endregion
 export { FloatButton, FloatButtonGroupTrigger, FloatButtonProps, FloatButtonRef };

package/dist/float-button/FloatButtonGroup.d.ts

@@ -3,7 +3,7 @@ import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMe
 import "../_util/hooks/index.js";
 import { FloatButtonGroupTrigger, FloatButtonProps } from "./FloatButton.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
-import * as vue322 from "vue";
+import * as vue252 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 
 //#region src/float-button/FloatButtonGroup.d.ts
@@ -31,9 +31,9 @@ interface FloatButtonGroupEmits {
   'click': (e: MouseEvent) => void;
   [key: string]: (...args: any[]) => void;
 }
-declare const InternalFloatButtonGroup: vue322.DefineSetupFnComponent<FloatButtonGroupProps, FloatButtonGroupEmits, SlotsType<FloatButtonGroupSlots>, FloatButtonGroupProps & {
+declare const InternalFloatButtonGroup: vue252.DefineSetupFnComponent<FloatButtonGroupProps, FloatButtonGroupEmits, SlotsType<FloatButtonGroupSlots>, FloatButtonGroupProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue322.PublicProps>;
+}, vue252.PublicProps>;
 declare const FloatButtonGroup: typeof InternalFloatButtonGroup;
 //#endregion
 export { FloatButtonGroup, FloatButtonGroupProps };

package/dist/float-button/PurePanel.js

@@ -11,7 +11,7 @@ import { omit } from "es-toolkit";
 //#region src/float-button/PurePanel.tsx
 const PureFloatButton = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	return () => {
-		if (props.backTop) return createVNode(BackTop_default, mergeProps(omit(props, ["backTop"]), { "visibilityHeight": 0 }, attrs), slots);
+		if (props.backTop) return createVNode(BackTop_default, mergeProps(attrs, omit(props, ["backTop"]), { "visibilityHeight": 0 }), slots);
 		return createVNode(FloatButton_default, mergeProps(omit(props, ["backTop"]), attrs), slots);
 	};
 }, {
@@ -134,7 +134,7 @@ const PurePanel = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 	const pureCls = computed(() => `${prefixCls.value}-pure`);
 	const renderItems = () => (props.items ?? []).map((item, index) => createVNode(PureFloatButton, mergeProps({ "key": index }, item), null));
 	return () => {
-		if (props.items && props.items.length) return createVNode(FloatButtonGroup_default, mergeProps(omit(props, [
+		if (props.items && props.items.length) return createVNode(FloatButtonGroup_default, mergeProps(pureAttrs(attrs), omit(props, [
 			"items",
 			"classes",
 			"styles"
@@ -142,12 +142,12 @@ const PurePanel = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
 			"class": clsx(attrs.class, pureCls.value),
 			"classes": props.classes,
 			"styles": props.styles
-		}, pureAttrs(attrs)), { default: () => renderItems() });
-		return createVNode(PureFloatButton, mergeProps(omit(props, ["items"]), {
+		}), { default: () => renderItems() });
+		return createVNode(PureFloatButton, mergeProps(pureAttrs(attrs), omit(props, ["items"]), {
 			"class": clsx(attrs.class, pureCls.value),
 			"classes": props.classes,
 			"styles": props.styles
-		}, pureAttrs(attrs)), slots);
+		}), slots);
 	};
 }, {
 	props: {

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 vue243 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: vue243.DefineSetupFnComponent<FormProps, FormEmits, SlotsType<FormSlots>, FormProps & {
+declare const InternalForm: vue258.DefineSetupFnComponent<FormProps, FormEmits, SlotsType<FormSlots>, FormProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue243.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 vue241 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: vue241.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: vue241.DefineSetupFnComponent<FormItemProps, For
   layout?: FormItemLayout;
 } & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue241.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/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/style/index.js

@@ -31,8 +31,9 @@ const genGridColStyle = (token) => {
 	} };
 };
 function genLoopGridColumnsStyle(token, sizeCls) {
-	const { prefixCls, componentCls, gridColumns, antCls } = token;
-	const [varName, varRef] = genCssVar(antCls, "grid");
+	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" };
@@ -44,10 +45,10 @@ function genLoopGridColumnsStyle(token, sizeCls) {
 		gridColumnsStyle[`${componentCls}${sizeCls}-order-${i}`] = { order: 0 };
 	} else {
 		gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = [{
-			[varName("display")]: "block",
+			[gridVarName("display")]: "block",
 			display: "block"
 		}, {
-			display: varRef("display"),
+			display: gridVarRef("display"),
 			flex: `0 0 ${i / gridColumns * 100}%`,
 			maxWidth: `${i / gridColumns * 100}%`
 		}];
@@ -56,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 vue298 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: vue298.DefineSetupFnComponent<PreviewGroupProps$1, {}, {}, PreviewGroupProps$1 & {}, vue298.PublicProps>;
+declare const InternalPreviewGroup: vue260.DefineSetupFnComponent<PreviewGroupProps$1, {}, {}, PreviewGroupProps$1 & {}, vue260.PublicProps>;
 //#endregion
 export { InternalPreviewGroup, PreviewGroupProps$1 as PreviewGroupProps };

package/dist/image/index.d.ts

@@ -3,7 +3,7 @@ import { VueNode } from "../_util/type.js";
 import { SemanticClassNames, SemanticClassNamesType, SemanticStyles, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
 import "../_util/hooks/index.js";
 import { InternalPreviewGroup, PreviewGroupProps as PreviewGroupProps$1 } from "./PreviewGroup.js";
-import * as vue106 from "vue";
+import * as vue92 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { ImageProps } from "@v-c/image";
 
@@ -58,14 +58,17 @@ interface ImageEmits {
 interface ImageSlots {
   fallback: () => any;
   placeholder: () => any;
+  imageRender: () => any;
+  cover: () => any;
+  actionsRender: () => OriginPreviewConfig['actionsRender'];
 }
-declare const Image: vue106.DefineSetupFnComponent<ImageProps$1, ImageEmits, SlotsType<ImageSlots>, ImageProps$1 & {
+declare const Image: vue92.DefineSetupFnComponent<ImageProps$1, ImageEmits, SlotsType<ImageSlots>, ImageProps$1 & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue106.PublicProps>;
+}, vue92.PublicProps>;
 declare const _default_1: typeof Image & {
   PreviewGroup: typeof InternalPreviewGroup;
 };
-declare const ImagePreviewGroup: vue106.DefineSetupFnComponent<PreviewGroupProps$1, {}, {}, PreviewGroupProps$1 & {}, vue106.PublicProps>;
+declare const ImagePreviewGroup: vue92.DefineSetupFnComponent<PreviewGroupProps$1, {}, {}, PreviewGroupProps$1 & {}, vue92.PublicProps>;
 type ImagePreviewGroupProps = PreviewGroupProps$1;
 //#endregion
 export { DeprecatedPreviewConfig, ImageClassNamesType, ImageEmits, ImagePreviewGroup, ImagePreviewGroupProps, ImageProps$1 as ImageProps, ImageSlots, ImageStylesType, PreviewConfig, _default_1 };

package/dist/image/index.js

@@ -77,6 +77,8 @@ const Image = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) =>
 				emit("click", e);
 			}
 		};
+		if (slots?.imageRender) mergedPreviewConfig.value.imageRender = slots.imageRender;
+		if ((mergedPreviewConfig.value?.mask || typeof mergedPreviewConfig.value?.mask === "boolean") && !mergedPreviewConfig.value.cover) mergedPreviewConfig.value.cover = slots?.cover?.();
 		return createVNode(VcImage, mergeProps(restAttrs, {
 			"prefixCls": prefixCls.value,
 			"preview": mergedPreviewConfig.value || false,