antdv-next 1.4.6 → 1.5.1

package/dist/app/App.js

@@ -41,9 +41,10 @@ const App = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) =>
 	return () => {
 		const { rootClass } = props;
 		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const hasRootProps = Boolean(className || rootClass || style || contextClassName.value || contextStyle.value);
 		const customClassName = clsx(hashId.value, prefixCls.value, className, rootClass, cssVarCls.value, { [`${prefixCls.value}-rtl`]: direction.value === "rtl" });
 		const { component = "div" } = props;
-		devUseWarning("App")(!(cssVarCls.value && component === false), "usage", "When using cssVar, ensure `component` is assigned a valid Vue component string.");
+		devUseWarning("App")(!(cssVarCls.value && component === false && hasRootProps), "usage", "When using cssVar, ensure `component` is assigned a valid Vue component string.");
 		const Component = component === false ? Fragment : component;
 		const rootProps = {
 			...restAttrs,

package/dist/avatar/AvatarGroup.d.ts

@@ -17,6 +17,9 @@ interface AvatarGroupProps extends ComponentBaseProps {
   size?: AvatarSize;
   shape?: 'circle' | 'square';
 }
+interface AvatarGroupRef {
+  nativeElement: HTMLDivElement;
+}
 declare const AvatarGroup: import("vue").DefineSetupFnComponent<AvatarGroupProps, {}, {}, AvatarGroupProps & {}, import("vue").PublicProps>;
 //#endregion
-export { AvatarGroupProps, AvatarGroup as default };
+export { AvatarGroupProps, AvatarGroupRef, AvatarGroup as default };

package/dist/avatar/AvatarGroup.js

@@ -5,11 +5,11 @@ import { useAvatarProvider } from "./AvatarContext.js";
 import style_default from "./style/index.js";
 import Avatar from "./Avatar.js";
 import Popover from "../popover/index.js";
-import { computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, shallowRef } from "vue";
 import { clsx } from "@v-c/util";
 import { filterEmpty } from "@v-c/util/dist/props-util";
 //#region src/avatar/AvatarGroup.tsx
-const AvatarGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+const AvatarGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
 	const { prefixCls, direction } = useComponentBaseConfig("avatar", props);
 	const groupPrefixCls = computed(() => `${prefixCls.value}-group`);
 	const rootCls = useCSSVarCls(prefixCls);
@@ -20,6 +20,8 @@ const AvatarGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =>
 			shape: props.shape
 		};
 	}));
+	const nativeElementRef = shallowRef();
+	expose({ nativeElement: nativeElementRef });
 	return () => {
 		const { rootClass, max } = props;
 		const children = filterEmpty(slots?.default?.() ?? []);
@@ -48,12 +50,12 @@ const AvatarGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =>
 				"key": "avatar-popover-key",
 				"destroyOnHidden": true
 			}, popoverProps), { default: () => [createVNode(Avatar, { "style": mergeStyle }, { default: () => [`+${numOfChildren - mergeCount}`] })] }));
-			return createVNode("div", mergeProps(restAttrs, {
+			return createVNode("div", mergeProps({ "ref": nativeElementRef }, restAttrs, {
 				"class": cls,
 				"style": style
 			}), [childrenShow]);
 		}
-		return createVNode("div", mergeProps(restAttrs, {
+		return createVNode("div", mergeProps({ "ref": nativeElementRef }, restAttrs, {
 			"class": cls,
 			"style": style
 		}), [childrenWithProps]);

package/dist/avatar/index.d.ts

@@ -1,9 +1,9 @@
 import Avatar$1, { AvatarEmits, AvatarProps, AvatarSlots } from "./Avatar.js";
-import AvatarGroup, { AvatarGroupProps } from "./AvatarGroup.js";
+import AvatarGroup, { AvatarGroupProps, AvatarGroupRef } from "./AvatarGroup.js";
 //#region src/avatar/index.d.ts
 type CompoundedComponent = typeof Avatar$1 & {
   Group: typeof AvatarGroup;
 };
 declare const Avatar: CompoundedComponent;
 //#endregion
-export { type AvatarEmits, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSlots, Avatar as default };
+export { type AvatarEmits, AvatarGroup, type AvatarGroupProps, type AvatarGroupRef, type AvatarProps, type AvatarSlots, Avatar as default };

package/dist/badge/Ribbon.d.ts

@@ -27,10 +27,13 @@ interface RibbonProps extends ComponentBaseProps {
   classes?: RibbonClassNamesType;
   styles?: RibbonStylesType;
 }
+interface RibbonRef {
+  nativeElement: HTMLDivElement;
+}
 interface RibbonSlots {
   default?: () => any;
   text?: () => any;
 }
 declare const _default: import("vue").DefineSetupFnComponent<RibbonProps, EmptyEmit, SlotsType<RibbonSlots>, RibbonProps, import("vue").PublicProps>;
 //#endregion
-export { RibbonClassNamesType, RibbonProps, RibbonSemanticClassNames, RibbonSemanticName, RibbonSemanticStyles, RibbonSlots, RibbonStylesType, _default as default };
+export { RibbonClassNamesType, RibbonProps, RibbonRef, RibbonSemanticClassNames, RibbonSemanticName, RibbonSemanticStyles, RibbonSlots, RibbonStylesType, _default as default };

package/dist/badge/Ribbon.js

@@ -1,12 +1,12 @@
 import { useComponentBaseConfig } from "../config-provider/context.js";
-import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
 import { getSlotPropsFnRun, toPropsRefs as toPropsRefs$1 } from "../_util/tools.js";
 import { isPresetColor } from "../_util/colors.js";
 import ribbon_default from "./style/ribbon.js";
-import { computed, createVNode, defineComponent, mergeDefaults, mergeProps } from "vue";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
 import { clsx } from "@v-c/util";
 import { getAttrStyleAndClass } from "@v-c/util/dist/props-util";
-var Ribbon_default = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+var Ribbon_default = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
 	const { styles, classes: ribbonClassNames } = toPropsRefs$1(props, "classes", "styles");
 	const { prefixCls, class: contextClassName, style: contextStyle, direction, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("ribbon", props);
 	const wrapperCls = computed(() => `${prefixCls.value}-wrapper`);
@@ -14,10 +14,14 @@ var Ribbon_default = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
 	const mergedProps = computed(() => {
 		return props;
 	});
-	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, ribbonClassNames), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const contextIndicatorStyle = useSemanticRootStyle(contextStyle, "indicator");
+	const indicatorStyle = useSemanticRootStyle(computed(() => attrs.style), "indicator");
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, ribbonClassNames), useToArr(contextStyles, contextIndicatorStyle, styles, indicatorStyle), useToProps(mergedProps));
+	const nativeElementRef = shallowRef();
+	expose({ nativeElement: nativeElementRef });
 	return () => {
 		const { placement = "end", color } = props;
-		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const { className, restAttrs } = getAttrStyleAndClass(attrs);
 		const colorInPreset = isPresetColor(props.color, false);
 		const ribbonCls = clsx(prefixCls.value, `${prefixCls.value}-placement-${placement}`, {
 			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
@@ -32,16 +36,12 @@ var Ribbon_default = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
 		const textNodes = getSlotPropsFnRun(slots, props, "text");
 		const children = slots.default?.();
 		return createVNode("div", {
+			"ref": nativeElementRef,
 			"class": clsx(wrapperCls.value, props.rootClass, hashId.value, cssVarCls.value, mergedClassNames.value?.root),
 			"style": mergedStyles.value?.root
 		}, [children, createVNode("div", mergeProps(restAttrs, {
 			"class": clsx(ribbonCls, hashId.value),
-			"style": [
-				colorStyle,
-				mergedStyles.value?.indicator,
-				contextStyle.value,
-				style
-			]
+			"style": [colorStyle, mergedStyles.value?.indicator]
 		}), [createVNode("span", {
 			"class": clsx(`${prefixCls.value}-content`, mergedClassNames.value.content),
 			"style": mergedStyles.value?.content

package/dist/badge/index.d.ts

@@ -5,7 +5,7 @@ import { PresetColorKey } from "../theme/interface/presetColors.js";
 import "../theme/interface/index.js";
 import { SizeType } from "../config-provider/SizeContext.js";
 import { PresetStatusColorType } from "../_util/colors.js";
-import _default, { RibbonProps, RibbonSlots } from "./Ribbon.js";
+import _default, { RibbonProps, RibbonRef, RibbonSlots } from "./Ribbon.js";
 import { ComponentBaseProps } from "../config-provider/context.js";
 import { CSSProperties, SlotsType } from "vue";
 import { LiteralUnion } from "@v-c/util/dist/type";
@@ -51,5 +51,6 @@ declare const Badge: typeof InternalBadge & {
 };
 declare const BadgeRibbon: import("vue").DefineSetupFnComponent<RibbonProps, EmptyEmit, SlotsType<RibbonSlots>, RibbonProps, import("vue").PublicProps>;
 type BadgeRibbonProps = RibbonProps;
+type BadgeRibbonRef = RibbonRef;
 //#endregion
-export { BadgeClassNamesType, BadgeProps, BadgeRibbon, BadgeRibbonProps, BadgeSemanticClassNames, BadgeSemanticName, BadgeSemanticStyles, BadgeSlots, BadgeStylesType, Badge as default };
+export { BadgeClassNamesType, BadgeProps, BadgeRibbon, BadgeRibbonProps, BadgeRibbonRef, BadgeSemanticClassNames, BadgeSemanticName, BadgeSemanticStyles, BadgeSlots, BadgeStylesType, Badge as default };

package/dist/badge/index.js

@@ -1,6 +1,6 @@
 import { devUseWarning, isDev } from "../_util/warning.js";
 import { useComponentBaseConfig } from "../config-provider/context.js";
-import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
 import { clsx as clsx$1, getSlotPropsFnRun, toPropsRefs as toPropsRefs$1 } from "../_util/tools.js";
 import { isPresetColor } from "../_util/colors.js";
 import { formatUnit } from "../_util/styleUtils.js";
@@ -19,7 +19,6 @@ const InternalBadge = /* @__PURE__ */ defineComponent((props, { slots, attrs, ex
 	const { class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, prefixCls, direction, getPrefixCls } = useComponentBaseConfig("badge", props);
 	const { classes, styles } = toPropsRefs$1(props, "classes", "styles");
 	const mergedProps = computed(() => props);
-	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
 	const badgeRef = shallowRef();
 	expose({ badgeRef });
 	const [hashId, cssVarCls] = style_default(prefixCls);
@@ -63,34 +62,37 @@ const InternalBadge = /* @__PURE__ */ defineComponent((props, { slots, attrs, ex
 	watchEffect(() => {
 		if (!isHidden.value) isDotRef.value = showAsDot.value;
 	});
-	const mergedStyle = computed(() => {
-		if (!props.offset) return {
-			...contextStyle.value,
-			...attrs.style
-		};
+	const childrenNodes = computed(() => filterEmpty(slots.default?.() ?? []));
+	const hasTextSlot = computed(() => textNodes.value.length > 0);
+	const showStatusTextNode = computed(() => !isHidden.value && (hasTextSlot.value ? true : props.text === 0 ? props.showZero : !!props.text && props.text !== true));
+	const isStatusBadge = computed(() => Boolean(!childrenNodes.value.length && hasStatus.value && (showStatusTextNode.value || hasStatusValue.value || !ignoreCount.value)));
+	const offsetStyle = computed(() => {
+		if (!props.offset) return;
 		const horizontalOffset = Number.parseInt(props.offset[0], 10);
-		const insetInlineEndUnit = formatUnit(direction.value === "rtl" ? horizontalOffset : -horizontalOffset);
-		const offsetStyle = {
-			marginTop: formatUnit(props.offset[1]),
-			insetInlineEnd: insetInlineEndUnit
-		};
+		const insetInlineEnd = direction.value === "rtl" ? horizontalOffset : -horizontalOffset;
 		return {
-			...contextStyle.value,
-			...offsetStyle,
-			...attrs.style
+			marginTop: formatUnit(props.offset[1]),
+			insetInlineEnd: formatUnit(insetInlineEnd)
 		};
 	});
+	const mergedStyle = computed(() => ({
+		...offsetStyle.value,
+		...contextStyle.value,
+		...attrs.style
+	}));
+	const legacyStyleKey = computed(() => isStatusBadge.value ? "root" : "indicator");
+	const contextLegacyStyle = useSemanticRootStyle(contextStyle, legacyStyleKey);
+	const componentLegacyStyle = useSemanticRootStyle(computed(() => attrs.style), legacyStyleKey);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextLegacyStyle, styles, componentLegacyStyle), useToProps(mergedProps));
 	const displayCount = computed(() => displayCountRef.value);
 	const isInternalColor = computed(() => isPresetColor(props.color, false));
 	return () => {
 		const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
-		const children = filterEmpty(slots.default?.() ?? []);
+		const children = childrenNodes.value;
 		let livingCount = countCacheRef.value;
 		if (typeof livingCount === "function") livingCount = livingCount();
 		const fallbackTitleNode = typeof livingCount === "string" || typeof livingCount === "number" ? livingCount : void 0;
 		const titleNode = props.title === null || props.title === false ? void 0 : props.title ?? fallbackTitleNode;
-		const hasTextSlot = textNodes.value.length > 0;
-		const showStatusTextNode = !isHidden.value && (hasTextSlot ? true : props.text === 0 ? props.showZero : !!props.text && props.text !== true);
 		const statusCls = clsx$1(mergedClassNames.value.indicator, {
 			[`${prefixCls.value}-status-dot`]: hasStatus.value,
 			[`${prefixCls.value}-status-${props.status}`]: !!props.status,
@@ -107,18 +109,18 @@ const InternalBadge = /* @__PURE__ */ defineComponent((props, { slots, attrs, ex
 			statusStyle.color = props.color;
 		}
 		const renderStatusText = (style) => {
-			if (!showStatusTextNode) return null;
+			if (!showStatusTextNode.value) return null;
 			return createVNode("span", {
 				"class": `${prefixCls.value}-status-text`,
 				"style": style
-			}, [hasTextSlot ? textNodes.value : props.text]);
+			}, [hasTextSlot.value ? textNodes.value : props.text]);
 		};
-		if (!children.length && hasStatus.value && (showStatusTextNode || hasStatusValue.value || !ignoreCount.value)) {
-			const statusTextColor = mergedStyle.value?.color;
+		if (isStatusBadge.value) {
+			const statusTextColor = mergedStyles.value.root?.color;
 			return createVNode("span", mergeProps(restAttrs, {
 				"ref": badgeRef,
 				"class": badgeClassName,
-				"style": [mergedStyles.value.root, mergedStyle.value]
+				"style": [offsetStyle.value, mergedStyles.value.root]
 			}), [createVNode("span", {
 				"class": statusCls,
 				"style": [mergedStyles.value.indicator, statusStyle]
@@ -151,8 +153,8 @@ const InternalBadge = /* @__PURE__ */ defineComponent((props, { slots, attrs, ex
 				"count": displayCount.value,
 				"title": titleNode,
 				"style": [
+					offsetStyle.value,
 					mergedStyles.value?.indicator,
-					mergedStyle.value,
 					scrollNumberStyle
 				]
 			}, _isSlot(clonedNode) ? clonedNode : { default: () => [clonedNode] }) : null }),

package/dist/border-beam/BorderBeam.d.ts

@@ -5,7 +5,11 @@ interface BorderBeamProps {
   prefixCls?: string;
   rootClass?: string;
   color?: BorderBeamColor;
+  count?: number;
+  duration?: number;
+  lineWidth?: number | string;
   outset?: number | string;
+  size?: number | string;
 }
 interface BorderBeamSlots {
   default?: () => any;

package/dist/border-beam/BorderBeam.js

@@ -1,14 +1,18 @@
 import { useComponentBaseConfig } from "../config-provider/context.js";
 import { genCssVar } from "../theme/util/genStyleUtils.js";
-import isNonNullable from "../_util/isNonNullable.js";
-import useBorderSize from "./hooks/useBorderSize.js";
+import { isNonNullable, isNumber } from "../_util/is.js";
 import { getBorderBeamGradient } from "./util.js";
+import useBorderSize from "./hooks/useBorderSize.js";
 import style_default from "./style/index.js";
 import { Fragment, Teleport, cloneVNode, computed, createVNode, defineComponent, isVNode, shallowRef } from "vue";
 import { clsx } from "@v-c/util";
 import { filterEmpty } from "@v-c/util/dist/props-util";
 import { unrefElement } from "@vueuse/core";
+import { unit } from "@antdv-next/cssinjs";
 //#region src/border-beam/BorderBeam.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 function getInset(width) {
 	return typeof width === "string" ? `calc(-1 * ${width})` : `-${width}px`;
 }
@@ -19,30 +23,46 @@ const BorderBeam = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 	const [hashId, cssVarCls] = style_default(prefixCls);
 	const varName = computed(() => genCssVar(rootCls.value, "border-beam")[0]);
 	const hostDom = shallowRef(null);
-	const borderInfo = useBorderSize(hostDom);
+	const borderWidth = useBorderSize(hostDom);
 	const beamGradient = computed(() => getBorderBeamGradient(props.color));
+	const mergedCount = computed(() => {
+		const { count = 1 } = props;
+		return isNumber(count) && Number.isFinite(count) && count >= 1 ? Math.floor(count) : 1;
+	});
+	const mergedDuration = computed(() => {
+		const { duration } = props;
+		return isNumber(duration) && duration > 0 ? duration : 6;
+	});
 	const insetOffset = computed(() => {
 		const { outset } = props;
 		if (isNonNullable(outset)) return getInset(outset);
-		return borderInfo.value.borderWidth.map(getInset).join(" ");
+		return borderWidth.value.map(getInset).join(" ");
 	});
 	const setHostDom = (el) => {
 		hostDom.value = unrefElement(el) ?? null;
 	};
 	return () => {
+		let _slot;
+		const { duration, lineWidth, size } = props;
 		const children = filterEmpty(slots.default?.() ?? []);
-		const beamStyle = {
+		const count = mergedCount.value;
+		const getBeamStyle = (index) => ({
 			...contextStyle?.value ?? {},
 			...attrs.style ?? {},
 			...beamGradient.value && { [varName.value("beam-gradient")]: beamGradient.value },
-			[varName.value("inset-offset")]: insetOffset.value,
-			[varName.value("border-radius")]: borderInfo.value.borderRadius
-		};
-		const beamNode = hostDom.value ? createVNode(Teleport, { "to": hostDom.value }, { default: () => [createVNode("div", {
+			...isNumber(duration) && duration > 0 && { [varName.value("duration")]: `${duration}s` },
+			...isNonNullable(lineWidth) && { [varName.value("line-width")]: unit(lineWidth) },
+			...isNonNullable(size) && { [varName.value("size")]: unit(size) },
+			...index > 0 && { [varName.value("delay")]: `${-mergedDuration.value * index / count}s` },
+			[varName.value("inset-offset")]: insetOffset.value
+		});
+		const beamCls = clsx(prefixCls.value, contextClassName?.value, props.rootClass, attrs.class, hashId.value, cssVarCls.value);
+		const beamNode = hostDom.value ? createVNode(Teleport, { "to": hostDom.value }, _isSlot(_slot = Array.from({ length: count }, (_, index) => createVNode("div", {
+			"key": index,
 			"aria-hidden": "true",
-			"class": clsx(prefixCls.value, contextClassName?.value, props.rootClass, attrs.class, hashId.value, cssVarCls.value),
-			"style": beamStyle
-		}, null)] }) : null;
+			"class": beamCls,
+			"style": getBeamStyle(index)
+		}, null))) ? _slot : { default: () => [_slot] }) : null;
 		const renderChild = () => {
 			if (children.length !== 1 || !isVNode(children[0])) return children;
 			const child = children[0];
@@ -64,9 +84,25 @@ const BorderBeam = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 			type: [String, Array],
 			required: false
 		},
+		count: {
+			type: Number,
+			required: false
+		},
+		duration: {
+			type: Number,
+			required: false
+		},
+		lineWidth: {
+			type: [Number, String],
+			required: false
+		},
 		outset: {
 			type: [Number, String],
 			required: false
+		},
+		size: {
+			type: [Number, String],
+			required: false
 		}
 	},
 	name: "ABorderBeam",

package/dist/border-beam/hooks/useBorderSize.d.ts

@@ -1,10 +1,6 @@
+import { BorderWidth } from "../util.js";
 import { Ref } from "vue";
 //#region src/border-beam/hooks/useBorderSize.d.ts
-type BorderWidth = readonly [number, number, number, number];
-interface BorderInfo {
-  borderWidth: BorderWidth;
-  borderRadius: string;
-}
-declare function useBorderSize(domNode: Ref<HTMLElement | SVGElement | null | undefined>): import("vue").ShallowRef<BorderInfo, BorderInfo>;
+declare function useBorderSize(domNode: Ref<HTMLElement | SVGElement | null | undefined>): import("vue").ShallowRef<BorderWidth, BorderWidth>;
 //#endregion
-export { BorderInfo, BorderWidth, useBorderSize as default };
+export { useBorderSize as default };

package/dist/border-beam/hooks/useBorderSize.js

@@ -1,40 +1,46 @@
+import { isNumber } from "../../_util/is.js";
+import { isSameBorderWidth } from "../util.js";
 import { shallowRef, watch } from "vue";
 //#region src/border-beam/hooks/useBorderSize.ts
-const DEFAULT_BORDER_INFO = {
-	borderWidth: [
-		0,
-		0,
-		0,
-		0
-	],
-	borderRadius: "0px"
-};
-function parseBorderWidth(value) {
-	const size = Number.parseFloat(value);
-	return Number.isFinite(size) ? size : 0;
+const DEFAULT_BORDER_WIDTH = [
+	0,
+	0,
+	0,
+	0
+];
+function normalizeValue(val) {
+	const size = Number.parseFloat(val);
+	return isNumber(size) ? size : 0;
 }
 function useBorderSize(domNode) {
-	const borderInfo = shallowRef(DEFAULT_BORDER_INFO);
+	const borderWidth = shallowRef(DEFAULT_BORDER_WIDTH);
+	const setBorderWidth = (next) => {
+		if (!isSameBorderWidth(borderWidth.value, next)) borderWidth.value = next;
+	};
 	watch(domNode, (node) => {
 		if (!node) {
-			borderInfo.value = DEFAULT_BORDER_INFO;
+			setBorderWidth(DEFAULT_BORDER_WIDTH);
 			return;
 		}
-		const { borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderRadius } = getComputedStyle(node);
-		borderInfo.value = {
-			borderWidth: [
-				parseBorderWidth(borderTopWidth),
-				parseBorderWidth(borderRightWidth),
-				parseBorderWidth(borderBottomWidth),
-				parseBorderWidth(borderLeftWidth)
-			],
-			borderRadius
-		};
+		let computedStyle;
+		try {
+			computedStyle = getComputedStyle(node);
+		} catch {
+			setBorderWidth(DEFAULT_BORDER_WIDTH);
+			return;
+		}
+		const { borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth } = computedStyle;
+		setBorderWidth([
+			normalizeValue(borderTopWidth),
+			normalizeValue(borderRightWidth),
+			normalizeValue(borderBottomWidth),
+			normalizeValue(borderLeftWidth)
+		]);
 	}, {
 		immediate: true,
 		flush: "post"
 	});
-	return borderInfo;
+	return borderWidth;
 }
 //#endregion
 export { useBorderSize as default };

package/dist/border-beam/style/index.js

@@ -1,25 +1,25 @@
 import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.js";
 import { genNoMotionRawStyle } from "../../style/motion/util.js";
 import "../util.js";
-import { Keyframes } from "@antdv-next/cssinjs";
+import { Keyframes, unit } from "@antdv-next/cssinjs";
 //#region src/border-beam/style/index.ts
+const antBorderBeamMove = new Keyframes("antBorderBeamMove", {
+	from: { offsetDistance: "0%" },
+	to: { offsetDistance: "100%" }
+});
 const genBorderBeamStyle = (token) => {
-	const { componentCls, antCls } = token;
+	const { componentCls, antCls, colorPrimary, colorPrimaryHover, lineWidth } = token;
 	const [, varRef] = genCssVar(antCls, "border-beam");
-	const defaultBeamGradient = `linear-gradient(to left, ${token.colorPrimary} 0%, ${token.colorPrimaryHover} 70%, transparent)`;
-	const antBorderBeamMove = new Keyframes("antBorderBeamMove", {
-		from: { offsetDistance: "0%" },
-		to: { offsetDistance: "100%" }
-	});
+	const defaultBeamGradient = `linear-gradient(to left, ${colorPrimary} 0%, ${colorPrimaryHover} 70%, transparent)`;
 	return { [componentCls]: {
 		display: "none",
 		position: "absolute",
 		inset: varRef("inset-offset", "0px"),
-		borderRadius: varRef("border-radius", "0px"),
+		borderRadius: "inherit",
 		zIndex: 1,
 		overflow: "hidden",
 		pointerEvents: "none",
-		padding: token.lineWidth,
+		padding: varRef("line-width", unit(lineWidth)),
 		"@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor))": {
 			WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
 			WebkitMaskComposite: "xor",
@@ -33,16 +33,17 @@ const genBorderBeamStyle = (token) => {
 					position: "absolute",
 					top: 0,
 					left: 0,
-					width: 100,
+					width: varRef("size", "100px"),
 					aspectRatio: "1 / 1",
 					opacity: .95,
 					backgroundImage: varRef("beam-gradient", defaultBeamGradient),
 					offsetAnchor: "90% 50%",
 					offsetDistance: "0%",
-					offsetPath: "rect(0 auto auto 0 round 100px)",
+					offsetPath: `rect(0 auto auto 0 round ${varRef("size", "100px")})`,
 					offsetRotate: "auto",
 					animationName: antBorderBeamMove,
-					animationDuration: "6s",
+					animationDuration: varRef("duration", `6s`),
+					animationDelay: varRef("delay", "0s"),
 					animationTimingFunction: "linear",
 					animationIterationCount: "infinite",
 					willChange: "offset-distance"

package/dist/border-beam/util.d.ts

@@ -5,7 +5,10 @@ interface BorderBeamGradientItem {
 }
 type BorderBeamGradient = BorderBeamGradientItem[];
 type BorderBeamColor = string | BorderBeamGradient;
+type BorderWidth = readonly [number, number, number, number];
+declare const DEFAULT_BORDER_BEAM_DURATION = 6;
 declare const MAX_BEAM_COLOR_STOP_PERCENT = 70;
 declare function getBorderBeamGradient(value?: BorderBeamColor): string | undefined;
+declare function isSameBorderWidth(left: BorderWidth, right: BorderWidth): boolean;
 //#endregion
-export { BorderBeamColor, BorderBeamGradient, BorderBeamGradientItem, MAX_BEAM_COLOR_STOP_PERCENT, getBorderBeamGradient };
+export { BorderBeamColor, BorderBeamGradient, BorderBeamGradientItem, BorderWidth, DEFAULT_BORDER_BEAM_DURATION, MAX_BEAM_COLOR_STOP_PERCENT, getBorderBeamGradient, isSameBorderWidth };

package/dist/border-beam/util.js

@@ -1,10 +1,12 @@
+import { isString } from "../_util/is.js";
 //#region src/border-beam/util.ts
+const DEFAULT_BORDER_BEAM_DURATION = 6;
 const MAX_BEAM_COLOR_STOP_PERCENT = 70;
 function getLinearGradient(...colorStops) {
 	return `linear-gradient(to left, ${colorStops.join(", ")}, transparent)`;
 }
 function normalizeBorderBeamColor(value) {
-	return typeof value === "string" ? [{
+	return isString(value) ? [{
 		color: value,
 		percent: 0
 	}] : value ?? [];
@@ -30,5 +32,8 @@ function getBorderBeamGradient(value) {
 	const normalizedStops = normalizeGradientItems(normalizeBorderBeamColor(value));
 	return normalizedStops.length ? getLinearGradient(...normalizedStops.map((item) => `${item.color} ${item.percent}%`)) : void 0;
 }
+function isSameBorderWidth(left, right) {
+	return left[0] === right[0] && left[1] === right[1] && left[2] === right[2] && left[3] === right[3];
+}
 //#endregion
-export { MAX_BEAM_COLOR_STOP_PERCENT, getBorderBeamGradient };
+export { DEFAULT_BORDER_BEAM_DURATION, MAX_BEAM_COLOR_STOP_PERCENT, getBorderBeamGradient, isSameBorderWidth };

package/dist/breadcrumb/Breadcrumb.d.ts

@@ -76,6 +76,9 @@ interface BreadcrumbProps<T extends AnyObject = AnyObject> extends BreadcrumbEmi
     menu: MenuItem;
   }) => any;
 }
+interface BreadcrumbRef {
+  nativeElement: HTMLElement;
+}
 interface BreadcrumbEmits {
   clickItem: (item: ItemType, event: MouseEvent) => void;
   [keys: string]: (...args: any[]) => any;
@@ -107,4 +110,4 @@ declare const Breadcrumb: import("vue").DefineSetupFnComponent<BreadcrumbProps<A
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("vue").PublicProps>;
 //#endregion
-export { BreadcrumbClassNamesType, BreadcrumbEmits, BreadcrumbEmitsProps, _default as BreadcrumbItem, BreadcrumbItemRenderContext, BreadcrumbItemType, BreadcrumbProps, BreadcrumbSemanticClassNames, BreadcrumbSemanticName, BreadcrumbSemanticStyles, _default$1 as BreadcrumbSeparator, BreadcrumbSeparatorType, BreadcrumbSlots, BreadcrumbStylesType, InternalRouteType, ItemType, Breadcrumb as default };
+export { BreadcrumbClassNamesType, BreadcrumbEmits, BreadcrumbEmitsProps, _default as BreadcrumbItem, BreadcrumbItemRenderContext, BreadcrumbItemType, BreadcrumbProps, BreadcrumbRef, BreadcrumbSemanticClassNames, BreadcrumbSemanticName, BreadcrumbSemanticStyles, _default$1 as BreadcrumbSeparator, BreadcrumbSeparatorType, BreadcrumbSlots, BreadcrumbStylesType, InternalRouteType, ItemType, Breadcrumb as default };

package/dist/breadcrumb/Breadcrumb.js

@@ -6,7 +6,7 @@ import BreadcrumbSeparator from "./BreadcrumbSeparator.js";
 import useItemRender from "./useItemRender.js";
 import BreadcrumbItem, { InternalBreadcrumbItem } from "./BreadcrumbItem.js";
 import style_default from "./style/index.js";
-import { cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps, shallowRef } from "vue";
 import { clsx } from "@v-c/util";
 import { filterEmpty } from "@v-c/util/dist/props-util";
 import { DownOutlined } from "@antdv-next/icons";
@@ -23,7 +23,7 @@ function getPath(params, path) {
 	});
 	return mergedPath;
 }
-const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) => {
+const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit, expose }) => {
 	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, separator: contextSeparator, dropdownIcon: contextDropdownIcon } = useComponentBaseConfig("breadcrumb", props, ["separator", "dropdownIcon"]);
 	const { classes, styles } = toPropsRefs$1(props, "classes", "styles");
 	const mergedSeparator = computed(() => {
@@ -47,6 +47,8 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit
 			styles: mergedStyles.value
 		};
 	}));
+	const nativeElementRef = shallowRef();
+	expose({ nativeElement: nativeElementRef });
 	return () => {
 		const { params = {}, rootClass } = props;
 		const itemRender = slots?.itemRender ? (route, slotParams, routes, paths) => slots.itemRender?.({
@@ -122,12 +124,15 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit
 			});
 		}
 		const { className, style, restAttrs } = getAttrStyleAndClass$1(attrs);
+		const breadcrumbClassName = clsx(prefixCls.value, contextClassName.value, { [`${prefixCls}-rtl`]: direction.value === "rtl" }, className, rootClass, mergedClassNames.value?.root, hashId.value, cssVarCls.value);
+		const mergedStyle = {
+			...mergedStyles.value?.root,
+			...style
+		};
 		return createVNode("nav", mergeProps({
-			"class": clsx(prefixCls.value, contextClassName.value, { [`${prefixCls}-rtl`]: direction.value === "rtl" }, className, rootClass, mergedClassNames.value?.root, hashId.value, cssVarCls.value),
-			"style": {
-				...mergedStyles.value?.root,
-				...style
-			}
+			"ref": nativeElementRef,
+			"class": breadcrumbClassName,
+			"style": mergedStyle
 		}, restAttrs), [createVNode("ol", null, [crumbs])]);
 	};
 }, {

package/dist/breadcrumb/index.d.ts

@@ -1,4 +1,4 @@
 import _default, { BreadcrumbItemProps, SeparatorType } from "./BreadcrumbItem.js";
 import _default$1 from "./BreadcrumbSeparator.js";
-import Breadcrumb, { BreadcrumbEmits, BreadcrumbItemRenderContext, BreadcrumbProps, BreadcrumbSlots, ItemType } from "./Breadcrumb.js";
-export { type BreadcrumbEmits, _default as BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbItemRenderContext, type ItemType as BreadcrumbItemType, type BreadcrumbProps, _default$1 as BreadcrumbSeparator, type BreadcrumbSlots, type SeparatorType, Breadcrumb as default };
+import Breadcrumb, { BreadcrumbEmits, BreadcrumbItemRenderContext, BreadcrumbProps, BreadcrumbRef, BreadcrumbSlots, ItemType } from "./Breadcrumb.js";
+export { type BreadcrumbEmits, _default as BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbItemRenderContext, type ItemType as BreadcrumbItemType, type BreadcrumbProps, type BreadcrumbRef, _default$1 as BreadcrumbSeparator, type BreadcrumbSlots, type SeparatorType, Breadcrumb as default };