antdv-next 1.0.0-beta.3 → 1.0.0-rc.1

package/dist/app/App.d.mts

@@ -1,11 +1,11 @@
 import { ComponentBaseProps } from "../config-provider/context.mjs";
 import { AppConfig } from "./context.mjs";
-import * as vue228 from "vue";
+import * as vue239 from "vue";
 
 //#region src/app/App.d.ts
 interface AppProps extends ComponentBaseProps, AppConfig {
   component?: any;
 }
-declare const App$1: vue228.DefineSetupFnComponent<AppProps, {}, {}, AppProps & {}, vue228.PublicProps>;
+declare const App$1: vue239.DefineSetupFnComponent<AppProps, {}, {}, AppProps & {}, vue239.PublicProps>;
 //#endregion
 export { App$1 as App, AppProps };

package/dist/app/App.mjs

@@ -43,13 +43,13 @@ const App$1 = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 		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 React component string.");
-		const Component$1 = component === false ? Fragment : component;
+		const Component = component === false ? Fragment : component;
 		const rootProps = {
 			...restAttrs,
 			class: customClassName,
 			style
 		};
-		return createVNode(AppConfigProvider, mergedAppConfig.value, { default: () => [createVNode(Component$1, component === false ? void 0 : rootProps, { default: () => [
+		return createVNode(AppConfigProvider, mergedAppConfig.value, { default: () => [createVNode(Component, component === false ? void 0 : rootProps, { default: () => [
 			createVNode(MessageContextHolder, null, null),
 			createVNode(NotificationContextHolder, null, null),
 			createVNode(ModalContextHolder, null, null),

package/dist/auto-complete/index.d.mts

@@ -1,25 +1,37 @@
 import { VueNode } from "../_util/type.mjs";
-import { SemanticClassNames, SemanticClassNamesType, SemanticStyles, SemanticStylesType } from "../_util/hooks/useMergeSemantic.mjs";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.mjs";
 import "../_util/hooks/index.mjs";
 import { InputStatus } from "../_util/statusUtils.mjs";
-import { InternalSelectProps } from "../select/index.mjs";
-import * as vue67 from "vue";
+import { InternalSelectProps, SelectPopupSemanticClassNames, SelectPopupSemanticStyles } from "../select/index.mjs";
+import * as vue65 from "vue";
 import { App, CSSProperties, SlotsType } from "vue";
 import { Option as Option$1, SelectProps } from "@v-c/select";
 
 //#region src/auto-complete/index.d.ts
-type AutoCompleteSemanticName = 'root' | 'prefix' | 'input' | 'placeholder' | 'content';
-type PopupSemantic = 'root' | 'listItem' | 'list';
+interface AutoCompleteSemanticClassNames {
+  root?: string;
+  prefix?: string;
+  input?: string;
+  placeholder?: string;
+  content?: string;
+}
+interface AutoCompleteSemanticStyles {
+  root?: CSSProperties;
+  prefix?: CSSProperties;
+  input?: CSSProperties;
+  placeholder?: CSSProperties;
+  content?: CSSProperties;
+}
 interface DataSourceItemObject {
   value: string;
   text: string;
 }
 type DataSourceItemType = DataSourceItemObject | VueNode;
-type AutoCompleteClassNamesType = SemanticClassNamesType<AutoCompleteProps, AutoCompleteSemanticName, {
-  popup?: SemanticClassNames<PopupSemantic>;
+type AutoCompleteClassNamesType = SemanticClassNamesType<AutoCompleteProps, AutoCompleteSemanticClassNames, {
+  popup?: SelectPopupSemanticClassNames;
 }>;
-type AutoCompleteStylesType = SemanticStylesType<AutoCompleteProps, AutoCompleteSemanticName, {
-  popup?: SemanticStyles<PopupSemantic>;
+type AutoCompleteStylesType = SemanticStylesType<AutoCompleteProps, AutoCompleteSemanticStyles, {
+  popup?: SelectPopupSemanticStyles;
 }>;
 type RcEventKeys = 'onClear' | 'onKeyUp' | 'onKeyDown' | 'onBlur' | 'onClick' | 'onActive' | 'onChange' | 'onDeselect' | 'onInputKeyDown' | 'onMouseDown' | 'onMouseLeave' | 'onMouseEnter' | 'onFocus' | 'onPopupScroll' | 'onPopupVisibleChange' | 'onSelect' | 'onSearch';
 interface AutoCompleteProps extends Omit<InternalSelectProps, 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue' | 'classes' | 'styles' | 'getInputElement' | 'getRawInputElement' | RcEventKeys> {
@@ -66,9 +78,9 @@ interface AutoCompleteEmits {
 interface AutoCompleteSlots {
   default?: () => any;
 }
-declare const InternalAutoComplete: vue67.DefineSetupFnComponent<AutoCompleteProps, AutoCompleteEmits, SlotsType<AutoCompleteSlots>, AutoCompleteProps & {
+declare const InternalAutoComplete: vue65.DefineSetupFnComponent<AutoCompleteProps, AutoCompleteEmits, SlotsType<AutoCompleteSlots>, AutoCompleteProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue67.PublicProps>;
+}, vue65.PublicProps>;
 declare const AutoComplete: typeof InternalAutoComplete & {
   Option: typeof Option$1;
   install: (app: App) => void;

package/dist/auto-complete/index.mjs

@@ -105,7 +105,7 @@ const InternalAutoComplete = /* @__PURE__ */ defineComponent((props, { slots, em
 			popup: {
 				root: {
 					...props.dropdownStyle,
-					...mergedStyles.value.popup?.root
+					...mergedStyles?.value?.popup?.root
 				},
 				list: mergedStyles.value.popup?.list,
 				listItem: mergedStyles.value.popup?.listItem

package/dist/avatar/Avatar.d.mts

@@ -1,7 +1,7 @@
 import { VueNode } from "../_util/type.mjs";
 import { ComponentBaseProps } from "../config-provider/context.mjs";
 import { AvatarSize } from "./AvatarContext.mjs";
-import * as vue324 from "vue";
+import * as vue245 from "vue";
 import { SlotsType } from "vue";
 
 //#region src/avatar/Avatar.d.ts
@@ -34,8 +34,8 @@ interface AvatarSlots {
   src: () => any;
   default: () => any;
 }
-declare const Avatar: vue324.DefineSetupFnComponent<AvatarProps, AvatarEmits, SlotsType<AvatarSlots>, AvatarProps & {
+declare const Avatar: vue245.DefineSetupFnComponent<AvatarProps, AvatarEmits, SlotsType<AvatarSlots>, AvatarProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue324.PublicProps>;
+}, vue245.PublicProps>;
 //#endregion
 export { Avatar, AvatarEmits, AvatarProps, AvatarSlots };

package/dist/avatar/AvatarGroup.d.mts

@@ -1,7 +1,7 @@
 import { PopoverProps } from "../popover/index.mjs";
 import { ComponentBaseProps } from "../config-provider/context.mjs";
 import { AvatarSize } from "./AvatarContext.mjs";
-import * as vue322 from "vue";
+import * as vue247 from "vue";
 import { CSSProperties } from "vue";
 
 //#region src/avatar/AvatarGroup.d.ts
@@ -19,6 +19,6 @@ interface AvatarGroupProps extends ComponentBaseProps {
   size?: AvatarSize;
   shape?: 'circle' | 'square';
 }
-declare const AvatarGroup: vue322.DefineSetupFnComponent<AvatarGroupProps, {}, {}, AvatarGroupProps & {}, vue322.PublicProps>;
+declare const AvatarGroup: vue247.DefineSetupFnComponent<AvatarGroupProps, {}, {}, AvatarGroupProps & {}, vue247.PublicProps>;
 //#endregion
 export { AvatarGroup, AvatarGroupProps };

package/dist/avatar/style/index.mjs

@@ -6,14 +6,14 @@ import { unit } from "@antdv-next/cssinjs";
 //#region src/avatar/style/index.ts
 const genBaseStyle = (token) => {
 	const { antCls, componentCls, iconCls, avatarBg, avatarColor, containerSize, containerSizeLG, containerSizeSM, textFontSize, textFontSizeLG, textFontSizeSM, iconFontSize, iconFontSizeLG, iconFontSizeSM, borderRadius, borderRadiusLG, borderRadiusSM, lineWidth, lineType } = token;
-	const avatarSizeStyle = (size, fontSize, iconFontSize$1, radius) => ({
+	const avatarSizeStyle = (size, fontSize, iconFontSize, radius) => ({
 		width: size,
 		height: size,
 		borderRadius: "50%",
 		fontSize,
 		[`&${componentCls}-square`]: { borderRadius: radius },
 		[`&${componentCls}-icon`]: {
-			fontSize: iconFontSize$1,
+			fontSize: iconFontSize,
 			[`> ${iconCls}`]: { margin: 0 }
 		}
 	});

package/dist/badge/Ribbon.d.mts

@@ -1,23 +1,39 @@
 import { EmptyEmit, VueNode } from "../_util/type.mjs";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.mjs";
+import "../_util/hooks/index.mjs";
 import { PresetColorType } from "../_util/colors.mjs";
 import { ComponentBaseProps } from "../config-provider/context.mjs";
-import * as vue71 from "vue";
+import * as vue67 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { LiteralUnion } from "@v-c/util/dist/type";
 
 //#region src/badge/Ribbon.d.ts
+type RibbonPlacement = 'start' | 'end';
+interface RibbonSemanticClassNames {
+  root?: string;
+  content?: string;
+  indicator?: string;
+}
+interface RibbonSemanticStyles {
+  root?: CSSProperties;
+  content?: CSSProperties;
+  indicator?: CSSProperties;
+}
+type RibbonClassNamesType = SemanticClassNamesType<RibbonProps, RibbonSemanticClassNames>;
+type RibbonStylesType = SemanticStylesType<RibbonProps, RibbonSemanticStyles>;
 interface RibbonProps extends ComponentBaseProps {
-  style?: CSSProperties;
   text?: VueNode;
   color?: LiteralUnion<PresetColorType>;
-  placement?: 'start' | 'end';
+  placement?: RibbonPlacement;
+  classes?: RibbonClassNamesType;
+  styles?: RibbonStylesType;
 }
 interface RibbonSlots {
   default?: () => any;
   text?: () => any;
 }
-declare const _default: vue71.DefineSetupFnComponent<RibbonProps, EmptyEmit, SlotsType<RibbonSlots>, RibbonProps & {
+declare const _default: vue67.DefineSetupFnComponent<RibbonProps, EmptyEmit, SlotsType<RibbonSlots>, RibbonProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue71.PublicProps>;
+}, vue67.PublicProps>;
 //#endregion
 export { RibbonProps, _default };

package/dist/badge/Ribbon.mjs

@@ -1,20 +1,32 @@
-import { useConfig } from "../config-provider/context.mjs";
-import { getSlotPropsFnRun } from "../_util/tools.mjs";
+import { useComponentBaseConfig } from "../config-provider/context.mjs";
+import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.mjs";
+import "../_util/hooks/index.mjs";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.mjs";
 import { isPresetColor } from "../_util/colors.mjs";
 import ribbon_default from "./style/ribbon.mjs";
-import { computed, createVNode, defineComponent, mergeProps } from "vue";
-import { classNames } from "@v-c/util";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { getAttrStyleAndClass } from "@v-c/util/dist/props-util";
 
 //#region src/badge/Ribbon.tsx
+const defaults = { placement: "end" };
 var Ribbon_default = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
-	const configContext = useConfig();
-	const prefixCls = computed(() => configContext.value.getPrefixCls("ribbon", props.prefixCls));
+	const { styles, classes: ribbonClassNames } = toPropsRefs(props, "classes", "styles");
+	const { prefixCls, class: contextClassName, style: contextStyle, direction, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("ribbon", props);
 	const wrapperCls = computed(() => `${prefixCls.value}-wrapper`);
 	const [hashId, cssVarCls] = ribbon_default(prefixCls, wrapperCls);
+	const mergedProps = computed(() => {
+		return props;
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, ribbonClassNames), useToArr(contextStyles, styles), useToProps(mergedProps));
 	return () => {
-		const placement = props.placement ?? "end";
-		const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+		const { placement = "end", color } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
 		const colorInPreset = isPresetColor(props.color, false);
+		const ribbonCls = clsx(prefixCls.value, `${prefixCls.value}-placement-${placement}`, {
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+			[`${prefixCls.value}-color-${color}`]: colorInPreset
+		}, className, contextClassName.value, mergedClassNames.value.indicator);
 		const colorStyle = {};
 		const cornerColorStyle = {};
 		if (props.color && !colorInPreset) {
@@ -23,28 +35,27 @@ var Ribbon_default = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
 		}
 		const textNodes = getSlotPropsFnRun(slots, props, "text");
 		const children = slots.default?.();
-		return createVNode("div", { "class": classNames(wrapperCls.value, props.rootClass, hashId.value, cssVarCls.value) }, [children, createVNode("div", mergeProps(restAttrs, {
-			"class": classNames(prefixCls.value, `${prefixCls.value}-placement-${placement}`, {
-				[`${prefixCls.value}-rtl`]: configContext.value.direction === "rtl",
-				[`${prefixCls.value}-color-${props.color}`]: colorInPreset
-			}, attrClass, hashId.value),
+		return createVNode("div", {
+			"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,
-				props.style,
-				attrStyle
+				mergedStyles.value?.indicator,
+				contextStyle.value,
+				style
 			]
-		}), [createVNode("span", { "class": `${prefixCls.value}-text` }, [Array.isArray(textNodes) ? textNodes : textNodes ?? props.text]), createVNode("div", {
+		}), [createVNode("span", {
+			"class": clsx(`${prefixCls.value}-content`, mergedClassNames.value.content),
+			"style": mergedStyles.value?.content
+		}, [Array.isArray(textNodes) ? textNodes : textNodes ?? props.text]), createVNode("div", {
 			"class": `${prefixCls.value}-corner`,
 			"style": cornerColorStyle
 		}, null)])]);
 	};
 }, {
-	props: {
-		style: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
+	props: /* @__PURE__ */ mergeDefaults({
 		text: {
 			type: [
 				Function,
@@ -66,6 +77,16 @@ var Ribbon_default = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
 			required: false,
 			default: void 0
 		},
+		classes: {
+			type: [Object, Function],
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			required: false,
+			default: void 0
+		},
 		rootClass: {
 			type: String,
 			required: false,
@@ -76,7 +97,7 @@ var Ribbon_default = /* @__PURE__ */ defineComponent((props, { slots, attrs }) =
 			required: false,
 			default: void 0
 		}
-	},
+	}, defaults),
 	name: "ABadgeRibbon",
 	inheritAttrs: false
 });

package/dist/badge/SingleNumber.mjs

@@ -46,8 +46,9 @@ var SingleNumber_default = /* @__PURE__ */ defineComponent((props) => {
 				top: `${offset}00%`,
 				left: 0
 			} : void 0;
+			const spanKey = Number.isNaN(key) ? unitValue : key ?? unitValue;
 			return createVNode("span", {
-				"key": key ?? unitValue,
+				"key": spanKey,
 				"class": classNames(`${prefixCls}-only-unit`, { current }),
 				"style": style
 			}, [unitValue]);

package/dist/badge/index.d.mts

@@ -6,14 +6,21 @@ import "../theme/interface/index.mjs";
 import { PresetStatusColorType } from "../_util/colors.mjs";
 import { _default } from "./Ribbon.mjs";
 import { ComponentBaseProps } from "../config-provider/context.mjs";
-import * as vue69 from "vue";
-import { SlotsType } from "vue";
+import * as vue72 from "vue";
+import { CSSProperties, SlotsType } from "vue";
 import { LiteralUnion } from "@v-c/util/dist/type";
 
 //#region src/badge/index.d.ts
-type SemanticName = 'root' | 'indicator';
-type BadgeClassNamesType = SemanticClassNamesType<BadgeProps, SemanticName>;
-type BadgeStylesType = SemanticStylesType<BadgeProps, SemanticName>;
+interface BadgeSemanticClassNames {
+  root?: string;
+  indicator?: string;
+}
+interface BadgeSemanticStyles {
+  root?: CSSProperties;
+  indicator?: CSSProperties;
+}
+type BadgeClassNamesType = SemanticClassNamesType<BadgeProps, BadgeSemanticClassNames>;
+type BadgeStylesType = SemanticStylesType<BadgeProps, BadgeSemanticStyles>;
 interface BadgeProps extends ComponentBaseProps {
   /** Number to show in badge */
   count?: VueNode;
@@ -37,9 +44,9 @@ interface BadgeSlots {
   count?: () => any;
   text?: () => any;
 }
-declare const InternalBadge: vue69.DefineSetupFnComponent<BadgeProps, EmptyEmit, SlotsType<BadgeSlots>, BadgeProps & {
+declare const InternalBadge: vue72.DefineSetupFnComponent<BadgeProps, EmptyEmit, SlotsType<BadgeSlots>, BadgeProps & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue69.PublicProps>;
+}, vue72.PublicProps>;
 declare const Badge: typeof InternalBadge & {
   Ribbon: typeof _default;
 };

package/dist/badge/style/ribbon.mjs

@@ -26,7 +26,7 @@ const genRibbonStyle = (token) => {
 			"whiteSpace": "nowrap",
 			"backgroundColor": token.colorPrimary,
 			"borderRadius": token.borderRadiusSM,
-			[`${ribbonPrefixCls}-text`]: { color: token.badgeTextColor },
+			[`${ribbonPrefixCls}-content`]: { color: token.badgeTextColor },
 			[`${ribbonPrefixCls}-corner`]: {
 				position: "absolute",
 				top: "100%",

package/dist/breadcrumb/Breadcrumb.d.mts

@@ -4,7 +4,7 @@ import "../_util/hooks/index.mjs";
 import { DropdownProps } from "../dropdown/dropdown.mjs";
 import "../dropdown/index.mjs";
 import { BreadcrumbItemProps, MenuItem } from "./BreadcrumbItem.mjs";
-import * as vue234 from "vue";
+import * as vue237 from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { Key } from "@v-c/util/dist/type";
 
@@ -32,9 +32,18 @@ interface BreadcrumbSeparatorType {
   separator?: VueNode;
 }
 type ItemType = Partial<BreadcrumbItemType & BreadcrumbSeparatorType>;
-type BreadcrumbSemanticName = 'root' | 'item' | 'separator';
-type BreadcrumbClassNamesType<T extends AnyObject = AnyObject> = SemanticClassNamesType<BreadcrumbProps<T>, BreadcrumbSemanticName>;
-type BreadcrumbStylesType<T extends AnyObject = AnyObject> = SemanticStylesType<BreadcrumbProps<T>, BreadcrumbSemanticName>;
+interface BreadcrumbSemanticClassNames {
+  root?: string;
+  item?: string;
+  separator?: string;
+}
+interface BreadcrumbSemanticStyles {
+  root?: CSSProperties;
+  item?: CSSProperties;
+  separator?: CSSProperties;
+}
+type BreadcrumbClassNamesType<T extends AnyObject = AnyObject> = SemanticClassNamesType<BreadcrumbProps<T>, BreadcrumbSemanticClassNames>;
+type BreadcrumbStylesType<T extends AnyObject = AnyObject> = SemanticStylesType<BreadcrumbProps<T>, BreadcrumbSemanticStyles>;
 interface BreadcrumbProps<T extends AnyObject = AnyObject> {
   prefixCls?: string;
   params?: T;
@@ -43,6 +52,7 @@ interface BreadcrumbProps<T extends AnyObject = AnyObject> {
   items?: ItemType[];
   classes?: BreadcrumbClassNamesType<T>;
   styles?: BreadcrumbStylesType<T>;
+  dropdownIcon?: VueNode;
   itemRender?: (route: ItemType, params: T, routes: ItemType[], paths: string[]) => any;
   titleRender?: (params: {
     item: ItemType;
@@ -71,6 +81,7 @@ interface BreadcrumbSlots {
   }) => any;
   separator: () => any;
   default: () => any;
+  dropdownIcon: () => any;
   menuLabelRender?: (params: {
     item: ItemType;
     index: number;
@@ -82,8 +93,8 @@ interface BreadcrumbSlots {
     menu: MenuItem;
   }) => any;
 }
-declare const Breadcrumb: vue234.DefineSetupFnComponent<BreadcrumbProps<AnyObject>, BreadcrumbEmits, SlotsType<BreadcrumbSlots>, BreadcrumbProps<AnyObject> & {
+declare const Breadcrumb: vue237.DefineSetupFnComponent<BreadcrumbProps<AnyObject>, BreadcrumbEmits, SlotsType<BreadcrumbSlots>, BreadcrumbProps<AnyObject> & {
   [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, vue234.PublicProps>;
+}, vue237.PublicProps>;
 //#endregion
 export { Breadcrumb, BreadcrumbEmits, BreadcrumbProps, BreadcrumbSlots, ItemType };

package/dist/breadcrumb/Breadcrumb.mjs

@@ -10,6 +10,7 @@ import style_default from "./style/index.mjs";
 import { computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
 import { clsx } from "@v-c/util";
 import { filterEmpty } from "@v-c/util/dist/props-util";
+import { DownOutlined } from "@antdv-next/icons";
 import pickAttrs from "@v-c/util/dist/pickAttrs";
 
 //#region src/breadcrumb/Breadcrumb.tsx
@@ -25,7 +26,7 @@ function getPath(params, path) {
 	return mergedPath;
 }
 const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) => {
-	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, separator: contextSeparator } = useComponentBaseConfig("breadcrumb", props, ["separator"]);
+	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, separator: contextSeparator, dropdownIcon: contextDropdownIcon } = useComponentBaseConfig("breadcrumb", props, ["separator", "dropdownIcon"]);
 	const { classes, styles } = toPropsRefs(props, "classes", "styles");
 	const mergedSeparator = computed(() => {
 		const separator = getSlotPropsFnRun(slots, props, "separator");
@@ -50,6 +51,7 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit
 	return () => {
 		const { params = {}, rootClass } = props;
 		const itemRender = slots?.itemRender ?? props?.itemRender;
+		const mergedDropdownIcon = getSlotPropsFnRun(slots, props, "dropdownIcon") ?? contextDropdownIcon.value ?? createVNode(DownOutlined, null, null);
 		const children = filterEmpty(slots?.default?.() ?? []);
 		let crumbs;
 		const titleRender = slots?.titleRender ?? props?.titleRender;
@@ -59,7 +61,7 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit
 			const itemRenderRoutes = props?.items;
 			crumbs = mergedItems.value.map((item, index) => {
 				let _slot;
-				const { path, key, type, menu, onClick, class: itemClassName, style: style$1, dropdownProps } = item;
+				const { path, key, type, menu, onClick, class: itemClassName, style, dropdownProps } = item;
 				const handleClick = (event) => {
 					onClick?.(event);
 					emit("clickItem", item, event);
@@ -93,8 +95,9 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit
 					aria: true
 				}), {
 					"class": itemClassName,
-					"style": style$1,
+					"style": style,
 					"dropdownProps": dropdownProps,
+					"dropdownIcon": mergedDropdownIcon,
 					"href": href,
 					"separator": isLastItem ? "" : mergedSeparator.value,
 					"onClick": handleClick,
@@ -159,6 +162,18 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit
 			required: false,
 			default: void 0
 		},
+		dropdownIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
 		itemRender: {
 			type: Function,
 			required: false,

package/dist/breadcrumb/BreadcrumbItem.d.mts

@@ -24,6 +24,7 @@ interface BreadcrumbItemProps extends SeparatorType {
     items?: MenuItem[];
   };
   dropdownProps?: DropdownProps;
+  dropdownIcon?: VueNode;
   onClick?: (event: MouseEvent) => void;
   class?: string;
   style?: CSSProperties;

package/dist/breadcrumb/BreadcrumbItem.mjs

@@ -7,8 +7,8 @@ import dropdown_default from "../dropdown/index.mjs";
 import BreadcrumbSeparator_default from "./BreadcrumbSeparator.mjs";
 import { renderItem } from "./useItemRender.mjs";
 import { Fragment, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
 import { filterEmpty } from "@v-c/util/dist/props-util";
-import { DownOutlined } from "@antdv-next/icons";
 
 //#region src/breadcrumb/BreadcrumbItem.tsx
 function _isSlot(s) {
@@ -19,6 +19,7 @@ const InternalBreadcrumbItem = /* @__PURE__ */ defineComponent((props, { slots }
 	/** If overlay is have Wrap a Dropdown */
 	const renderBreadcrumbNode = (breadcrumbItem) => {
 		const { prefixCls, menu, dropdownProps, href } = props;
+		const dropdownIcon = getSlotPropsFnRun({}, props, "dropdownIcon");
 		if (menu) {
 			const mergeDropDownProps = { ...dropdownProps };
 			if (menu) {
@@ -41,17 +42,17 @@ const InternalBreadcrumbItem = /* @__PURE__ */ defineComponent((props, { slots }
 					})
 				};
 			}
-			return createVNode(dropdown_default, mergeProps({ "placement": "bottom" }, mergeDropDownProps), { default: () => [createVNode("span", { "class": `${prefixCls}-overlay-link` }, [breadcrumbItem, createVNode(DownOutlined, null, null)])] });
+			return createVNode(dropdown_default, mergeProps({ "placement": "bottom" }, mergeDropDownProps), { default: () => [createVNode("span", { "class": `${prefixCls}-overlay-link` }, [breadcrumbItem, dropdownIcon])] });
 		}
 		return breadcrumbItem;
 	};
 	return () => {
-		const { separator = "/" } = props;
+		const { separator = "/", prefixCls } = props;
 		const children = checkRenderNode(filterEmpty(slots?.default?.() ?? []));
 		const { classes: mergedClassNames, styles: mergedStyles } = breadcrumbContext.value;
 		const link = renderBreadcrumbNode(children);
 		if (isNonNullable_default(link)) return createVNode(Fragment, null, [createVNode("li", {
-			"class": mergedClassNames?.item,
+			"class": clsx(`${prefixCls}-item`, mergedClassNames?.item),
 			"style": mergedStyles?.item
 		}, [link]), !!separator && createVNode(BreadcrumbSeparator_default, null, _isSlot(separator) ? separator : { default: () => [separator] })]);
 		return null;
@@ -78,6 +79,18 @@ const InternalBreadcrumbItem = /* @__PURE__ */ defineComponent((props, { slots }
 			required: false,
 			default: void 0
 		},
+		dropdownIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
 		onClick: {
 			type: Function,
 			required: false,
@@ -131,6 +144,18 @@ const BreadcrumbItem = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			required: false,
 			default: void 0
 		},
+		dropdownIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
 		onClick: {
 			type: Function,
 			required: false,

package/dist/breadcrumb/style/index.mjs

@@ -8,17 +8,17 @@ const genBreadcrumbStyle = (token) => {
 	const { componentCls, iconCls, calc } = token;
 	return { [componentCls]: {
 		...resetComponent(token),
-		"color": token.itemColor,
-		"fontSize": token.fontSize,
+		color: token.itemColor,
+		fontSize: token.fontSize,
 		[iconCls]: { fontSize: token.iconFontSize },
-		"ol": {
+		ol: {
 			display: "flex",
 			flexWrap: "wrap",
 			margin: 0,
 			padding: 0,
 			listStyle: "none"
 		},
-		"a": {
+		[`${componentCls}-item a`]: {
 			"color": token.linkColor,
 			"transition": `color ${token.motionDurationMid}`,
 			"padding": `0 ${unit(token.paddingXXS)}`,
@@ -32,7 +32,7 @@ const genBreadcrumbStyle = (token) => {
 			},
 			...genFocusStyle(token)
 		},
-		"li:last-child": { color: token.lastItemColor },
+		[`${componentCls}-item:last-child`]: { color: token.lastItemColor },
 		[`${componentCls}-separator`]: {
 			marginInline: token.separatorMargin,
 			color: token.separatorColor