antdv-next 1.5.0 → 1.5.2

package/dist/dropdown/dropdown.js

@@ -1,7 +1,7 @@
 import { devUseWarning } from "../_util/warning.js";
 import { useComponentBaseConfig } from "../config-provider/context.js";
 import useToken from "../theme/useToken.js";
-import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
 import { ZIndexProvider } from "../_util/zindexContext.js";
 import { useZIndex } from "../_util/hooks/useZIndex.js";
 import getPlacements from "../_util/placements.js";
@@ -27,7 +27,8 @@ const Dropdown = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs })
 	const mergedProps = computed(() => {
 		return props;
 	});
-	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps));
 	const memoPlacement = computed(() => {
 		const { placement } = props;
 		if (!placement) return direction.value === "rtl" ? "bottomRight" : "bottomLeft";
@@ -71,10 +72,7 @@ const Dropdown = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs })
 		emit("openChange", false, { source: "menu" });
 	};
 	const mergedRootStyles = computed(() => {
-		return {
-			...contextStyle.value,
-			...mergedStyles.value.root
-		};
+		return { ...mergedStyles.value.root };
 	});
 	const [zIndex, contextZIndex] = useZIndex("Dropdown", computed(() => mergedRootStyles.value.zIndex));
 	const memoTransitionName = computed(() => {

package/dist/empty/index.d.ts

@@ -31,6 +31,9 @@ interface EmptyProps extends ComponentBaseProps {
   image?: VueNode;
   description?: VueNode;
 }
+interface EmptyRef {
+  nativeElement: HTMLDivElement;
+}
 interface EmptySlots {
   image: () => any;
   description: () => any;
@@ -42,4 +45,4 @@ declare const _default: typeof Empty & {
   PRESENTED_IMAGE_SIMPLE: typeof simpleEmptyImg;
 };
 //#endregion
-export { EmptyClassNamesType, EmptyProps, EmptySemanticClassNames, EmptySemanticName, EmptySemanticStyles, EmptySlots, EmptyStylesType, SemanticName, TransferLocale, _default as default };
+export { EmptyClassNamesType, EmptyProps, EmptyRef, EmptySemanticClassNames, EmptySemanticName, EmptySemanticStyles, EmptySlots, EmptyStylesType, SemanticName, TransferLocale, _default as default };

package/dist/empty/index.js

@@ -5,13 +5,13 @@ import useLocale from "../locale/useLocale.js";
 import Empty$1 from "./empty.js";
 import Simple from "./simple.js";
 import style_default from "./style/index.js";
-import { computed, createVNode, defineComponent, mergeDefaults, mergeProps } from "vue";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
 import { classNames } from "@v-c/util";
 import { filterEmpty } from "@v-c/util/dist/props-util";
 //#region src/empty/index.tsx
 const defaultEmptyImg = createVNode(Empty$1, null, null);
 const simpleEmptyImg = createVNode(Simple, null, null);
-const Empty = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+const Empty = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
 	const componentConfig = useComponentConfig("empty");
 	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("empty", props);
 	const { classes, styles } = toPropsRefs$1(props, "classes", "styles");
@@ -19,6 +19,8 @@ const Empty = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	const contextStyleRoot = useSemanticRootStyle(contextStyle);
 	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(computed(() => props)));
 	const [locale] = useLocale("Empty");
+	const nativeElementRef = shallowRef();
+	expose({ nativeElement: nativeElementRef });
 	return () => {
 		const des = getSlotPropsFnRun(slots, props, "description") ?? locale?.value?.description;
 		const alt = typeof des === "string" ? des : "empty";
@@ -32,6 +34,7 @@ const Empty = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 		else imageNode = mergedImage;
 		const children = filterEmpty(slots?.default?.() ?? []);
 		return createVNode("div", mergeProps({
+			"ref": nativeElementRef,
 			"class": classNames(hashId.value, cssVarCls.value, prefixCls.value, contextClassName.value, {
 				[`${prefixCls.value}-normal`]: mergedImage === simpleEmptyImg,
 				[`${prefixCls.value}-rtl`]: direction.value === "rtl"

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

@@ -6,6 +6,8 @@ interface BackTopProps extends Omit<FloatButtonProps, 'target'>, ComponentBasePr
   visibilityHeight?: number;
   target?: () => HTMLElement | Window | Document;
   duration?: number;
+  /** @default false */
+  showProgress?: boolean;
 }
 interface BackTopEmits {
   click: (e: MouseEvent) => void;

package/dist/float-button/BackTop.js

@@ -1,12 +1,12 @@
-import throttleByAnimationFrame from "../_util/throttleByAnimationFrame.js";
 import { useComponentBaseConfig, useConfig } from "../config-provider/context.js";
+import { genCssVar } from "../theme/util/genStyleUtils.js";
 import { getAttrStyleAndClass as getAttrStyleAndClass$1, pureAttrs } from "../_util/hooks/useMergeSemantic.js";
 import { toPropsRefs as toPropsRefs$1 } from "../_util/tools.js";
-import getScroll from "../_util/getScroll.js";
 import scrollTo from "../_util/scrollTo.js";
 import { useGroupContext } from "./context.js";
 import FloatButton, { floatButtonPrefixCls } from "./FloatButton.js";
-import { Transition, computed, createVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import useScroll from "./hooks/useScroll.js";
+import { Transition, computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
 import { filterEmpty } from "@v-c/util/dist/props-util";
 import { VerticalAlignTopOutlined } from "@antdv-next/icons";
 import { getTransitionProps } from "@v-c/util/dist/utils/transition";
@@ -14,49 +14,20 @@ import { omit } from "es-toolkit";
 //#region src/float-button/BackTop.tsx
 const defaultIcon = createVNode(VerticalAlignTopOutlined, null, null);
 const BackTopWithInstall = /* @__PURE__ */ defineComponent((props, { attrs, slots, emit, expose }) => {
-	const { backTopIcon } = useComponentBaseConfig("floatButton", props, ["backTopIcon"], floatButtonPrefixCls);
+	const { prefixCls, backTopIcon } = useComponentBaseConfig("floatButton", props, ["backTopIcon"], floatButtonPrefixCls);
 	const globalConfig = useConfig();
 	const groupContext = useGroupContext();
 	const { target, visibilityHeight, duration } = toPropsRefs$1(props, "target", "visibilityHeight", "duration");
-	const visible = shallowRef((visibilityHeight.value ?? 400) === 0);
 	const floatButtonRef = shallowRef(null);
 	expose({ nativeElement: computed(() => floatButtonRef.value?.nativeElement ?? null) });
 	const getDefaultTarget = () => floatButtonRef.value?.nativeElement?.ownerDocument ?? (typeof window !== "undefined" ? window : void 0);
-	const container = shallowRef(null);
 	const mergedVisibility = computed(() => visibilityHeight.value ?? 400);
-	const handleScroll = throttleByAnimationFrame((event) => {
-		const scrollTop = getScroll(event?.target ?? container.value ?? getDefaultTarget());
-		visible.value = scrollTop >= mergedVisibility.value;
-	});
-	const bindScroll = () => {
-		const targetNode = target.value?.() ?? getDefaultTarget();
-		if (targetNode) {
-			container.value = targetNode;
-			targetNode.addEventListener?.("scroll", handleScroll);
-			handleScroll({ target: targetNode });
-		}
-	};
-	const removeScroll = () => {
-		container.value?.removeEventListener?.("scroll", handleScroll);
-		container.value = null;
-	};
-	onMounted(() => {
-		bindScroll();
-	});
-	onBeforeUnmount(() => {
-		handleScroll.cancel();
-		removeScroll();
-	});
-	watch(target, () => {
-		removeScroll();
-		bindScroll();
-	});
-	const triggerCheck = () => {
-		const node = container.value ?? getDefaultTarget();
-		if (node) handleScroll({ target: node });
-	};
-	watch(mergedVisibility, () => {
-		triggerCheck();
+	const showProgress = computed(() => props.showProgress ?? false);
+	const getTarget = computed(() => target.value || getDefaultTarget);
+	const { scrollProgress, visible } = useScroll({
+		getTarget,
+		showProgress,
+		visibilityHeight: mergedVisibility
 	});
 	const mergedShape = computed(() => groupContext?.value?.shape ?? props.shape ?? "circle");
 	const mergedIcon = computed(() => {
@@ -66,10 +37,15 @@ const BackTopWithInstall = /* @__PURE__ */ defineComponent((props, { attrs, slot
 	});
 	const rootPrefixCls = computed(() => globalConfig.value?.getPrefixCls?.());
 	const transitionProps = computed(() => getTransitionProps(`${rootPrefixCls.value}-fade`));
+	const progressStyle = computed(() => {
+		if (!showProgress.value) return;
+		const [varName] = genCssVar(rootPrefixCls.value ?? "ant", floatButtonPrefixCls);
+		return { [varName("progress")]: `${scrollProgress.value}turn` };
+	});
 	const scrollToTop = (e) => {
 		const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)");
 		scrollTo(0, {
-			getContainer: target.value || getDefaultTarget,
+			getContainer: getTarget.value,
 			duration: prefersReducedMotion?.matches ? 0 : duration.value ?? 450
 		});
 		emit("click", e);
@@ -79,11 +55,12 @@ const BackTopWithInstall = /* @__PURE__ */ defineComponent((props, { attrs, slot
 		return createVNode(Transition, transitionProps.value, { default: () => visible.value ? createVNode(FloatButton, mergeProps(pureAttrs(attrs), omit(props, [
 			"visibilityHeight",
 			"target",
-			"duration"
+			"duration",
+			"showProgress"
 		]), {
 			"ref": floatButtonRef,
-			"class": className,
-			"style": style,
+			"class": [className, { [`${prefixCls.value}-progress`]: showProgress.value }],
+			"style": [progressStyle.value, style],
 			"shape": mergedShape.value,
 			"icon": mergedIcon.value,
 			"onClick": scrollToTop
@@ -103,6 +80,11 @@ const BackTopWithInstall = /* @__PURE__ */ defineComponent((props, { attrs, slot
 			type: Number,
 			required: false
 		},
+		showProgress: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
 		icon: {
 			type: [
 				Function,

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

@@ -38,6 +38,9 @@ interface FloatButtonGroupProps extends Omit<FloatButtonProps, 'classes' | 'styl
   placement?: 'top' | 'left' | 'right' | 'bottom';
   style?: CSSProperties;
 }
+interface FloatButtonGroupRef {
+  nativeElement: HTMLDivElement;
+}
 interface FloatButtonGroupSlots {
   default?: () => any;
   closeIcon?: () => any;
@@ -56,4 +59,4 @@ interface FloatButtonGroupEmitsProps {
 declare const InternalFloatButtonGroup: import("vue").DefineSetupFnComponent<FloatButtonGroupProps, FloatButtonGroupEmits, SlotsType<FloatButtonGroupSlots>, FloatButtonGroupProps, import("vue").PublicProps>;
 declare const FloatButtonGroup: typeof InternalFloatButtonGroup;
 //#endregion
-export { FloatButtonGroupClassNamesType, FloatButtonGroupEmits, FloatButtonGroupEmitsProps, FloatButtonGroupProps, FloatButtonGroupSemanticClassNames, FloatButtonGroupSemanticName, FloatButtonGroupSemanticStyles, FloatButtonGroupSlots, FloatButtonGroupStylesType, FloatButtonGroup as default };
+export { FloatButtonGroupClassNamesType, FloatButtonGroupEmits, FloatButtonGroupEmitsProps, FloatButtonGroupProps, FloatButtonGroupRef, FloatButtonGroupSemanticClassNames, FloatButtonGroupSemanticName, FloatButtonGroupSemanticStyles, FloatButtonGroupSlots, FloatButtonGroupStylesType, FloatButtonGroup as default };

package/dist/float-button/FloatButtonGroup.js

@@ -1,5 +1,5 @@
 import { useComponentBaseConfig } from "../config-provider/context.js";
-import { pureAttrs, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { pureAttrs, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
 import { useZIndex } from "../_util/hooks/useZIndex.js";
 import { getSlotPropsFnRun, toPropsRefs as toPropsRefs$1 } from "../_util/tools.js";
 import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
@@ -36,7 +36,7 @@ const groupOmittedProps = [
 	"style",
 	"rootClass"
 ];
-const FloatButtonGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) => {
+const FloatButtonGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit, expose }) => {
 	const { class: contextClassName, style: contextStyle, classes: contextClasses, styles: contextStyles, direction, closeIcon: contextCloseIcon, prefixCls } = useComponentBaseConfig("floatButtonGroup", props, ["closeIcon"], floatButtonPrefixCls);
 	const groupPrefixCls = computed(() => `${prefixCls.value}-group`);
 	const listCls = computed(() => `${groupPrefixCls.value}-list`);
@@ -69,6 +69,7 @@ const FloatButtonGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs,
 		emit("openChange", nextOpen);
 	};
 	const groupRef = shallowRef();
+	expose({ nativeElement: groupRef });
 	const handleDocClick = (event) => {
 		if (!clickTrigger.value) return;
 		if (groupRef.value?.contains(event.target)) return;
@@ -106,7 +107,8 @@ const FloatButtonGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs,
 		shape: mergedShape.value,
 		placement: mergedPlacement.value
 	}));
-	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClasses, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClasses, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps));
 	const listContext = computed(() => ({
 		shape: mergedShape.value,
 		individual: individual.value,
@@ -187,7 +189,6 @@ const FloatButtonGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs,
 				[`${groupPrefixCls.value}-menu-mode`]: !!triggerMode.value
 			}),
 			"style": [
-				contextStyle.value,
 				mergedStyles.value.root,
 				props.style,
 				attrs.style,

package/dist/float-button/hooks/useScroll.d.ts

@@ -0,0 +1,16 @@
+import { Ref } from "vue";
+//#region src/float-button/hooks/useScroll.d.ts
+type ScrollTarget = HTMLElement | Window | Document;
+interface UseScrollOptions {
+  /** Reactive getter of the scroll container */
+  getTarget: Ref<() => ScrollTarget | null | undefined>;
+  showProgress: Ref<boolean>;
+  visibilityHeight: Ref<number>;
+}
+declare function getScrollProgress(target?: ScrollTarget | null): number;
+declare function useScroll(options: UseScrollOptions): {
+  scrollProgress: import("vue").ShallowRef<number, number>;
+  visible: import("vue").ShallowRef<boolean, boolean>;
+};
+//#endregion
+export { ScrollTarget, UseScrollOptions, useScroll as default, getScrollProgress };

package/dist/float-button/hooks/useScroll.js

@@ -0,0 +1,80 @@
+import throttleByAnimationFrame from "../../_util/throttleByAnimationFrame.js";
+import getScroll, { isDocument, isWindow } from "../../_util/getScroll.js";
+import { onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+//#region src/float-button/hooks/useScroll.ts
+function getScrollElement(target) {
+	if (!target) return null;
+	if (isWindow(target)) return target.document.documentElement;
+	if (isDocument(target)) return target.documentElement;
+	if (target instanceof HTMLElement) return target;
+	return null;
+}
+function getScrollProgress(target) {
+	const scrollElement = getScrollElement(target);
+	if (!scrollElement) return 0;
+	const scrollTop = getScroll(target ?? null);
+	const maxScroll = Math.max(scrollElement.scrollHeight - scrollElement.clientHeight, 0);
+	return maxScroll > 0 ? Math.min(Math.max(scrollTop / maxScroll, 0), 1) : 0;
+}
+function useScroll(options) {
+	const { getTarget, showProgress, visibilityHeight } = options;
+	const visible = shallowRef(visibilityHeight.value === 0);
+	const scrollProgress = shallowRef(0);
+	let container = null;
+	let handleScroll = null;
+	const syncScrollState = () => {
+		visible.value = getScroll(container) >= visibilityHeight.value;
+		if (showProgress.value) scrollProgress.value = getScrollProgress(container);
+	};
+	const unbindScroll = () => {
+		handleScroll?.cancel();
+		if (container && handleScroll) container.removeEventListener("scroll", handleScroll);
+		container = null;
+		handleScroll = null;
+	};
+	const bindScroll = () => {
+		unbindScroll();
+		container = getTarget.value?.() ?? null;
+		handleScroll = throttleByAnimationFrame(syncScrollState);
+		syncScrollState();
+		container?.addEventListener("scroll", handleScroll);
+	};
+	let handleResize = null;
+	const unbindResize = () => {
+		if (handleResize) {
+			window.removeEventListener("resize", handleResize);
+			handleResize.cancel();
+			handleResize = null;
+		}
+	};
+	const bindResize = () => {
+		unbindResize();
+		if (!showProgress.value || typeof window === "undefined") return;
+		handleResize = throttleByAnimationFrame(() => {
+			scrollProgress.value = getScrollProgress(getTarget.value?.());
+		});
+		window.addEventListener("resize", handleResize);
+	};
+	onMounted(() => {
+		bindScroll();
+		bindResize();
+	});
+	onBeforeUnmount(() => {
+		unbindScroll();
+		unbindResize();
+	});
+	watch([
+		getTarget,
+		showProgress,
+		visibilityHeight
+	], () => {
+		bindScroll();
+		bindResize();
+	});
+	return {
+		scrollProgress,
+		visible
+	};
+}
+//#endregion
+export { useScroll as default, getScrollProgress };

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

@@ -1,4 +1,4 @@
 import FloatButton, { FloatButtonProps, FloatButtonRef } from "./FloatButton.js";
-import FloatButtonGroup, { FloatButtonGroupProps } from "./FloatButtonGroup.js";
+import FloatButtonGroup, { FloatButtonGroupProps, FloatButtonGroupRef } from "./FloatButtonGroup.js";
 import BackTopWithInstall from "./BackTop.js";
-export { BackTopWithInstall as BackTop, FloatButtonGroup, type FloatButtonGroupProps, type FloatButtonProps, type FloatButtonRef, FloatButton as default };
+export { BackTopWithInstall as BackTop, FloatButtonGroup, type FloatButtonGroupProps, type FloatButtonGroupRef, type FloatButtonProps, type FloatButtonRef, FloatButton as default };

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

@@ -4,6 +4,8 @@ import { unit } from "@antdv-next/cssinjs";
 const genFloatButtonStyle = (token) => {
 	const { componentCls, floatButtonSize, iconCls, antCls, floatButtonIconSize } = token;
 	const [varName, varRef] = genCssVar(antCls, "float-btn");
+	const [, buttonVarRef] = genCssVar(antCls, "btn");
+	const getProgressBackground = (backgroundColor) => [`linear-gradient(${backgroundColor}, ${backgroundColor})`, `conic-gradient(${token.colorPrimary} ${varRef("progress", "0turn")}, ${token.colorBorderSecondary} 0)`].join(", ");
 	const badgeCls = `${componentCls}-badge`;
 	const R = Math.SQRT2;
 	const offsetR = (R - 1) / R;
@@ -33,6 +35,27 @@ const genFloatButtonStyle = (token) => {
 		},
 		"&:empty": { display: "none" },
 		[`${componentCls}-icon`]: { lineHeight: 1 },
+		[`&${antCls}-btn${componentCls}-progress`]: {
+			borderWidth: unit(token.lineWidthBold),
+			borderColor: "transparent",
+			backgroundImage: getProgressBackground(buttonVarRef("bg-color")),
+			backgroundOrigin: "border-box",
+			backgroundClip: "padding-box, border-box",
+			[`&:not(:disabled):not(${antCls}-btn-disabled)`]: {
+				"&:hover": {
+					borderColor: "transparent",
+					backgroundImage: getProgressBackground(buttonVarRef("bg-color-hover"))
+				},
+				"&:active": {
+					borderColor: "transparent",
+					backgroundImage: getProgressBackground(buttonVarRef("bg-color-active"))
+				}
+			},
+			[`&:disabled, &${antCls}-btn-disabled`]: {
+				borderColor: "transparent",
+				backgroundImage: getProgressBackground(buttonVarRef("bg-color-disabled"))
+			}
+		},
 		[`&${componentCls}-icon-only`]: { [iconCls]: { fontSize: floatButtonIconSize } },
 		[`${componentCls}-content`]: { fontSize: token.fontSizeSM },
 		[badgeCls]: {

package/dist/form/ErrorList.js

@@ -71,7 +71,7 @@ const ErrorList = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			...collapseMotion,
 			name: `${prefixCls.value}-show-help-item`
 		};
-		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) => {
+		return createVNode(Transition, transitionProps, { default: () => [!!filledKeyFullKeyList.length && createVNode("div", mergeProps(helpProps, { "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,
@@ -80,7 +80,7 @@ const ErrorList = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 					...props.helpItemStyle,
 					...itemStyle
 				}
-			}, [error]);
+			}, [typeof error === "function" ? error() : error]);
 		})) ? _slot : { default: () => [_slot] })])] });
 	};
 }, {

package/dist/form/FormItem/ItemHolder.js

@@ -28,7 +28,7 @@ const ItemHolder = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 		}
 	}, { immediate: true });
 	const onErrorVisibleChanged = (visible) => {
-		if (!visible) marginBottom.value = null;
+		if (!visible && !hasError.value) marginBottom.value = null;
 	};
 	function getValidateState(isDebounce = false) {
 		return getStatus(isDebounce ? props?.errors : props?.meta?.errors, isDebounce ? props?.warnings : props?.meta?.warnings, props?.meta, "", !!props?.hasFeedback, props?.validateStatus);

package/dist/form/FormItem/index.js

@@ -1,9 +1,9 @@
 import { useComponentBaseConfig } from "../../config-provider/context.js";
 import { getSlotPropsFnRun } from "../../_util/tools.js";
 import useCSSVarCls from "../../config-provider/hooks/useCSSVarCls.js";
-import { checkRenderNode } from "../../_util/vueNode.js";
 import { useFormContext, useFormItemProvider, useNoStyleItemContext } from "../context.js";
 import { getFieldId, initialValueFormat, toArray, toNamePathStr } from "../util.js";
+import { useFormInstance } from "../hooks/useForm.js";
 import style_default from "../style/index.js";
 import { getNamePath, getValue, setValue } from "../utils/valueUtil.js";
 import { validateRules } from "../utils/validateUtil.js";
@@ -29,6 +29,7 @@ function genEmptyMeta() {
 }
 const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	const formContext = useFormContext();
+	const formInstance = useFormInstance();
 	const mergedValidateTrigger = computed(() => {
 		const { trigger, validateTrigger } = props;
 		return validateTrigger !== void 0 ? validateTrigger : trigger !== void 0 ? trigger : formContext.value?.validateTrigger;
@@ -63,29 +64,14 @@ const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs
 	const validateDisabled = shallowRef(false);
 	const subFieldErrors = shallowRef({});
 	const initialValue = shallowRef(initialValueFormat(formContext.value?.getFieldValue?.(namePath.value)));
-	const mergedRules = computed(() => {
+	const getMergedRules = () => {
 		const collectedRules = [];
 		const formRules = formContext.value?.rules ? getValue(formContext.value.rules, namePath.value) : void 0;
 		if (formRules) collectedRules.push(...Array.isArray(formRules) ? formRules : [formRules]);
 		if (props.rules) collectedRules.push(...props.rules);
-		if (props.required !== void 0) {
-			let ruleType = collectedRules.find((r) => r.type)?.type;
-			if (!ruleType) {
-				const currentValue = hasName.value ? formContext.value?.getFieldValue?.(namePath.value) ?? getValue(formContext.value?.model ?? {}, namePath.value) : void 0;
-				if (typeof currentValue === "number") ruleType = "number";
-				else if (typeof currentValue === "boolean") ruleType = "boolean";
-				else if (Array.isArray(currentValue)) ruleType = "array";
-			}
-			const requiredRule = {
-				required: !!props.required,
-				...ruleType ? { type: ruleType } : {}
-			};
-			if (mergedValidateTrigger.value !== void 0) requiredRule.validateTrigger = mergedValidateTrigger.value || [];
-			collectedRules.push(requiredRule);
-		}
-		return collectedRules;
-	});
-	const isRequired = computed(() => mergedRules.value.some((rule) => rule?.required && !rule?.warningOnly));
+		return collectedRules.map((rule) => typeof rule === "function" ? rule(formInstance) : rule);
+	};
+	const isRequired = computed(() => getMergedRules().some((rule) => rule?.required && !rule?.warningOnly));
 	const messageVariables = computed(() => {
 		let variables = {};
 		if (typeof props.label === "string") variables.label = props.label;
@@ -123,7 +109,7 @@ const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs
 	};
 	const validateRulesInner = (options = {}) => {
 		if (!namePath.value.length) return Promise.resolve();
-		let filteredRules = mergedRules.value;
+		let filteredRules = getMergedRules();
 		const { triggerName, validateOnly = false } = options;
 		if (triggerName) if (mergedValidateTrigger.value === false) filteredRules = [];
 		else filteredRules = filteredRules.filter((rule) => {
@@ -179,7 +165,7 @@ const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs
 	};
 	const triggerValidate = (triggerName) => {
 		if (mergedValidateTrigger.value === false) return;
-		if (!mergedRules.value.some((rule) => getRuleTriggerList(rule).includes(triggerName))) return;
+		if (!getMergedRules().some((rule) => getRuleTriggerList(rule).includes(triggerName))) return;
 		validateRulesInner({ triggerName }).catch((e) => e);
 	};
 	const clearValidate = () => {
@@ -275,7 +261,7 @@ const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs
 				namePath: () => namePath.value,
 				getValue: () => fieldValue.value,
 				getMeta: () => meta.value,
-				rules: () => mergedRules.value,
+				rules: () => getMergedRules(),
 				isFieldDirty: () => meta.value.touched || meta.value.validated || initialValue.value !== void 0,
 				validateRules: (options) => validateRulesInner(options),
 				resetField,
@@ -315,17 +301,17 @@ const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs
 		triggerFocus: onFieldFocus
 	});
 	return () => {
-		return renderLayout(checkRenderNode(filterEmpty(slots.default?.() ?? [])), fieldId.value, isRequired.value);
+		return renderLayout(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];
+		if (Array.isArray(baseChildren) && baseChildren.length === 1 && isVNode(baseChildren[0])) {
+			const child = baseChildren[0];
 			const childProps = child.props || {};
 			const _onBlur = childProps.onBlur;
 			const _onFocus = childProps.onFocus;
 			if (_onBlur) delete child.props.onBlur;
 			if (_onFocus) delete child.props.onFocus;
-			baseChildren = createVNode(child, {
+			const newChildProps = {
 				id: childProps.id || currentFieldId,
 				onBlur: (...args) => {
 					onFieldBlur();
@@ -342,7 +328,19 @@ const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs
 					else _onFocus?.(...args);
 				},
 				ref: setItemInstance
-			});
+			};
+			const helpNode = getSlotPropsFnRun(slots, props, "help");
+			const extraNode = getSlotPropsFnRun(slots, props, "extra");
+			const { errors: itemErrors, warnings: itemWarnings } = mergedErrorList.value;
+			if (currentFieldId && (helpNode || itemErrors.length > 0 || itemWarnings.length > 0 || extraNode)) {
+				const describedbyArr = [];
+				if (helpNode || itemErrors.length > 0) describedbyArr.push(`${currentFieldId}_help`);
+				if (extraNode) describedbyArr.push(`${currentFieldId}_extra`);
+				newChildProps["aria-describedby"] = describedbyArr.join(" ");
+			}
+			if (itemErrors.length > 0) newChildProps["aria-invalid"] = "true";
+			if (props.required ?? isRequiredMark) newChildProps["aria-required"] = "true";
+			baseChildren = [createVNode(child, newChildProps)];
 		}
 		if (props.noStyle && !props.hidden) return createVNode(StatusProvider, {
 			"prefixCls": prefixCls.value,

package/dist/form/context.d.ts

@@ -71,7 +71,7 @@ declare function useFormItemPrefixContext(): Ref<{
   prefixCls: string;
 }>;
 declare function useVariantContextProvider(variant: Ref<Variant | undefined>): void;
-declare function useVariantContext(): Ref<"outlined" | "filled" | "borderless" | "underlined" | undefined, "outlined" | "filled" | "borderless" | "underlined" | undefined>;
+declare function useVariantContext(): Ref<"outlined" | "borderless" | "filled" | "underlined" | undefined, "outlined" | "borderless" | "filled" | "underlined" | undefined>;
 interface FormItemStatusContextProps {
   isFormItemInput?: boolean;
   status?: ValidateStatus;

package/dist/form/hooks/useVariant.d.ts

@@ -2,8 +2,8 @@ import { ConfigProviderProps } from "../../config-provider/define.js";
 import { Variant } from "../../config-provider/context.js";
 import { Ref } from "vue";
 //#region src/form/hooks/useVariant.d.ts
-type VariantComponents = keyof Pick<ConfigProviderProps, 'input' | 'inputNumber' | 'textArea' | 'mentions' | 'select' | 'cascader' | 'treeSelect' | 'datePicker' | 'timePicker' | 'rangePicker' | 'card'>;
-declare function useVariant(component: VariantComponents, variant?: Ref<Variant | undefined>, legacyBordered?: Ref<boolean | undefined> | boolean): readonly [import("vue").ComputedRef<"outlined" | "filled" | "borderless" | "underlined">, import("vue").ComputedRef<boolean>];
+type VariantComponents = keyof Pick<ConfigProviderProps, 'input' | 'inputPassword' | 'inputSearch' | 'otp' | 'inputNumber' | 'textArea' | 'mentions' | 'select' | 'cascader' | 'treeSelect' | 'datePicker' | 'timePicker' | 'rangePicker' | 'card'>;
+declare function useVariant(component: VariantComponents, variant?: Ref<Variant | undefined>, legacyBordered?: Ref<boolean | undefined> | boolean, fallbackComponent?: VariantComponents): readonly [import("vue").ComputedRef<"outlined" | "borderless" | "filled" | "underlined">, import("vue").ComputedRef<boolean>, import("vue").ComputedRef<boolean>];
 declare const useVariants: typeof useVariant;
 //#endregion
 export { useVariant as default, useVariants };

package/dist/form/hooks/useVariant.js

@@ -2,17 +2,27 @@ import { Variants, useConfig } from "../../config-provider/context.js";
 import { useVariantContext } from "../context.js";
 import { computed } from "vue";
 //#region src/form/hooks/useVariant.ts
-function useVariant(component, variant, legacyBordered) {
+function useVariant(component, variant, legacyBordered, fallbackComponent) {
 	const config = useConfig();
 	const formVariant = useVariantContext();
+	const configComponentVariant = computed(() => {
+		const componentConfigVariant = config.value?.[component]?.variant;
+		const fallbackConfigVariant = fallbackComponent ? config.value?.[fallbackComponent]?.variant : void 0;
+		return componentConfigVariant ?? fallbackConfigVariant;
+	});
 	const mergedVariant = computed(() => {
 		if (typeof variant?.value !== "undefined") return variant.value;
 		if ((typeof legacyBordered === "object" ? legacyBordered.value : legacyBordered) === false) return "borderless";
-		const componentConfigVariant = config.value?.[component]?.variant;
-		const globalVariant = config.value?.variant;
-		return formVariant.value ?? componentConfigVariant ?? globalVariant ?? "outlined";
+		return formVariant.value ?? configComponentVariant.value ?? config.value?.variant ?? "outlined";
 	});
-	return [mergedVariant, computed(() => Variants.includes(mergedVariant.value))];
+	return [
+		mergedVariant,
+		computed(() => Variants.includes(mergedVariant.value)),
+		computed(() => {
+			const borderedValue = typeof legacyBordered === "object" ? legacyBordered.value : legacyBordered;
+			return typeof variant?.value !== "undefined" || borderedValue === false || typeof formVariant.value !== "undefined" || typeof configComponentVariant.value !== "undefined" || typeof config.value?.variant !== "undefined";
+		})
+	];
 }
 const useVariants = useVariant;
 //#endregion