antdv-next 0.0.111 → 1.0.0-alpha.1

package/dist/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,89 @@
+import { AnyObject, VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { DropdownProps } from "../dropdown/dropdown.js";
+import "../dropdown/index.js";
+import { BreadcrumbItemProps, MenuItem } from "./BreadcrumbItem.js";
+import * as vue225 from "vue";
+import { CSSProperties, SlotsType } from "vue";
+import { Key } from "@v-c/util/dist/type";
+
+//#region src/breadcrumb/Breadcrumb.d.ts
+interface BreadcrumbItemType {
+  key?: Key;
+  /**
+   * Different with `path`. Directly set the link of this item.
+   */
+  href?: string;
+  /**
+   * Different with `href`. It will concat all prev `path` to the current one.
+   */
+  path?: string;
+  title?: VueNode;
+  menu?: BreadcrumbItemProps['menu'];
+  class?: string;
+  style?: CSSProperties;
+  dropdownProps?: DropdownProps;
+  onClick?: (event: MouseEvent) => void;
+  [key: `data-${string}`]: string;
+}
+interface BreadcrumbSeparatorType {
+  type: 'separator';
+  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 BreadcrumbProps<T extends AnyObject = AnyObject> {
+  prefixCls?: string;
+  params?: T;
+  separator?: VueNode;
+  rootClass?: string;
+  items?: ItemType[];
+  classes?: BreadcrumbClassNamesType<T>;
+  styles?: BreadcrumbStylesType<T>;
+  itemRender?: (route: ItemType, params: T, routes: ItemType[], paths: string[]) => any;
+  titleRender?: (params: {
+    item: ItemType;
+    index: number;
+  }) => any;
+  menuLabelRender?: (params: {
+    item: ItemType;
+    index: number;
+    menu: MenuItem;
+  }) => any;
+  menuExtraRender?: (params: {
+    item: ItemType;
+    index: number;
+    menu: MenuItem;
+  }) => any;
+}
+interface BreadcrumbEmits {
+  clickItem: (item: ItemType, event: MouseEvent) => void;
+  [keys: string]: (...args: any[]) => any;
+}
+interface BreadcrumbSlots {
+  itemRender: (route: ItemType, params: AnyObject, routes: ItemType[], paths: string[]) => any;
+  titleRender: (params: {
+    item: ItemType;
+    index: number;
+  }) => any;
+  separator: () => any;
+  default: () => any;
+  menuLabelRender?: (params: {
+    item: ItemType;
+    index: number;
+    menu: MenuItem;
+  }) => any;
+  menuExtraRender?: (params: {
+    item: ItemType;
+    index: number;
+    menu: MenuItem;
+  }) => any;
+}
+declare const Breadcrumb: vue225.DefineSetupFnComponent<BreadcrumbProps<AnyObject>, BreadcrumbEmits, SlotsType<BreadcrumbSlots>, BreadcrumbProps<AnyObject> & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue225.PublicProps>;
+//#endregion
+export { Breadcrumb, BreadcrumbEmits, BreadcrumbItemType, BreadcrumbProps, BreadcrumbSlots };

package/dist/breadcrumb/Breadcrumb.js

@@ -0,0 +1,191 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass as getAttrStyleAndClass$1, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import { useBreadcrumbProvider } from "./BreadcrumbContext.js";
+import BreadcrumbSeparator_default from "./BreadcrumbSeparator.js";
+import useItemRender from "./useItemRender.js";
+import BreadcrumbItem_default, { InternalBreadcrumbItem } from "./BreadcrumbItem.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+
+//#region src/breadcrumb/Breadcrumb.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function getPath(params, path) {
+	if (path === void 0) return path;
+	let mergedPath = (path || "").replace(/^\//, "");
+	Object.keys(params).forEach((key) => {
+		mergedPath = mergedPath.replace(`:${key}`, params[key]);
+	});
+	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 { classes, styles } = toPropsRefs(props, "classes", "styles");
+	const mergedSeparator = computed(() => {
+		const separator = getSlotPropsFnRun(slots, props, "separator");
+		const contextSep = getSlotPropsFnRun({}, { separator: contextSeparator.value }, "separator");
+		return separator ?? contextSep ?? "/";
+	});
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const mergedItems = computed(() => props.items ?? []);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			separator: mergedSeparator.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	useBreadcrumbProvider(computed(() => {
+		return {
+			classes: mergedClassNames.value,
+			styles: mergedStyles.value
+		};
+	}));
+	return () => {
+		const { params = {}, rootClass } = props;
+		const itemRender = slots?.itemRender ?? props?.itemRender;
+		const children = filterEmpty(slots?.default?.() ?? []);
+		let crumbs;
+		const titleRender = slots?.titleRender ?? props?.titleRender;
+		const mergedItemRender = useItemRender(prefixCls.value, itemRender, titleRender);
+		if (mergedItems.value && mergedItems.value.length > 0) {
+			const paths = [];
+			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 handleClick = (event) => {
+					onClick?.(event);
+					emit("clickItem", item, event);
+				};
+				const itemSeparator = getSlotPropsFnRun({}, { separator: item.separator }, "separator");
+				const mergedPath = getPath(params || {}, path);
+				if (mergedPath !== void 0) paths.push(mergedPath);
+				const mergedKey = key ?? index;
+				if (type === "separator") return createVNode(BreadcrumbSeparator_default, { "key": mergedKey }, _isSlot(itemSeparator) ? itemSeparator : { default: () => [itemSeparator] });
+				const itemProps = {};
+				const isLastItem = index === mergedItems.value.length - 1;
+				if (menu) {
+					const menuLabelRender = slots?.menuLabelRender ?? props.menuLabelRender;
+					if (menuLabelRender) menu.labelRender = (menuItem) => menuLabelRender({
+						item,
+						index,
+						menu: menuItem
+					});
+					const menuExtraRender = slots?.menuExtraRender ?? props.menuExtraRender;
+					if (menuExtraRender) menu.extraRender = (menuItem) => menuExtraRender({
+						item,
+						index,
+						menu: menuItem
+					});
+					itemProps.menu = menu;
+				}
+				let { href } = item;
+				if (paths.length && mergedPath !== void 0) href = `#/${paths.join("/")}`;
+				return createVNode(InternalBreadcrumbItem, mergeProps({ "key": mergedKey }, itemProps, pickAttrs(item, {
+					data: true,
+					aria: true
+				}), {
+					"class": itemClassName,
+					"style": style$1,
+					"dropdownProps": dropdownProps,
+					"href": href,
+					"separator": isLastItem ? "" : mergedSeparator.value,
+					"onClick": handleClick,
+					"prefixCls": prefixCls.value
+				}), _isSlot(_slot = mergedItemRender(item, params, itemRenderRoutes, paths, href, index)) ? _slot : { default: () => [_slot] });
+			});
+		} else {
+			const childrenLength = children.length;
+			crumbs = children.map((element, index) => {
+				if (!element || !isVNode(element)) return element;
+				return createVNode(element, {
+					separator: index === childrenLength - 1 ? "" : mergedSeparator.value,
+					key: index
+				});
+			});
+		}
+		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,
+			...contextStyle.value,
+			...style
+		};
+		return createVNode("nav", mergeProps({
+			"class": breadcrumbClassName,
+			"style": mergedStyle
+		}, restAttrs), [createVNode("ol", null, [crumbs])]);
+	};
+}, {
+	emits: ["clickItem"],
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		params: { required: false },
+		separator: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		itemRender: {
+			type: Function,
+			required: false
+		},
+		titleRender: {
+			type: Function,
+			required: false
+		},
+		menuLabelRender: {
+			type: Function,
+			required: false
+		},
+		menuExtraRender: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "ABreadcrumb",
+	inheritAttrs: false
+});
+Breadcrumb.Item = BreadcrumbItem_default;
+Breadcrumb.Separator = BreadcrumbSeparator_default;
+Breadcrumb.install = (app) => {
+	app.component(Breadcrumb.name, Breadcrumb);
+	app.component(BreadcrumbItem_default.name, BreadcrumbItem_default);
+	app.component(BreadcrumbSeparator_default.name, BreadcrumbSeparator_default);
+};
+var Breadcrumb_default = Breadcrumb;
+
+//#endregion
+export { Breadcrumb_default as default };

package/dist/breadcrumb/BreadcrumbContext.js

@@ -0,0 +1,13 @@
+import { inject, provide, ref } from "vue";
+
+//#region src/breadcrumb/BreadcrumbContext.ts
+const BreadcrumbContextKey = Symbol("BreadcrumbContext");
+function useBreadcrumbProvider(value) {
+	provide(BreadcrumbContextKey, value);
+}
+function useBreadcrumbContext() {
+	return inject(BreadcrumbContextKey, ref({}));
+}
+
+//#endregion
+export { useBreadcrumbContext, useBreadcrumbProvider };

package/dist/breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,32 @@
+import { VueNode } from "../_util/type.js";
+import { DropdownProps } from "../dropdown/dropdown.js";
+import "../dropdown/index.js";
+import { CSSProperties } from "vue";
+import { Key } from "@v-c/util/dist/type";
+
+//#region src/breadcrumb/BreadcrumbItem.d.ts
+interface SeparatorType {
+  separator?: VueNode;
+  key?: Key;
+}
+type MenuType = NonNullable<DropdownProps['menu']>;
+interface MenuItem {
+  key?: Key;
+  title?: VueNode;
+  label?: VueNode;
+  path?: string;
+  href?: string;
+}
+interface BreadcrumbItemProps extends SeparatorType {
+  prefixCls?: string;
+  href?: string;
+  menu?: Omit<MenuType, 'items'> & {
+    items?: MenuItem[];
+  };
+  dropdownProps?: DropdownProps;
+  onClick?: (event: MouseEvent) => void;
+  class?: string;
+  style?: CSSProperties;
+}
+//#endregion
+export { BreadcrumbItemProps, MenuItem, SeparatorType };

package/dist/breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,161 @@
+import { useBaseConfig } from "../config-provider/context.js";
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import { checkRenderNode } from "../_util/vueNode.js";
+import isNonNullable_default from "../_util/isNonNullable.js";
+import { useBreadcrumbContext } from "./BreadcrumbContext.js";
+import dropdown_default from "../dropdown/index.js";
+import BreadcrumbSeparator_default from "./BreadcrumbSeparator.js";
+import { renderItem } from "./useItemRender.js";
+import { Fragment, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import { DownOutlined } from "@antdv-next/icons";
+
+//#region src/breadcrumb/BreadcrumbItem.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const InternalBreadcrumbItem = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const breadcrumbContext = useBreadcrumbContext();
+	/** If overlay is have Wrap a Dropdown */
+	const renderBreadcrumbNode = (breadcrumbItem) => {
+		const { prefixCls, menu, dropdownProps, href } = props;
+		if (menu) {
+			const mergeDropDownProps = { ...dropdownProps };
+			if (menu) {
+				const { items,...menuProps } = menu || {};
+				mergeDropDownProps.menu = {
+					...menuProps,
+					items: items?.map(({ key, title, label, path,...itemProps }, index) => {
+						let mergedLabel = getSlotPropsFnRun({ label: title }, { label }, "label");
+						if (path) {
+							(function() {
+								return mergedLabel;
+							})();
+							mergedLabel = createVNode("a", { "href": `${href}${path}` }, [mergedLabel]);
+						}
+						return {
+							...itemProps,
+							key: key ?? index,
+							label: mergedLabel
+						};
+					})
+				};
+			}
+			return createVNode(dropdown_default, mergeProps({ "placement": "bottom" }, mergeDropDownProps), { default: () => [createVNode("span", { "class": `${prefixCls}-overlay-link` }, [breadcrumbItem, createVNode(DownOutlined, null, null)])] });
+		}
+		return breadcrumbItem;
+	};
+	return () => {
+		const { separator = "/" } = 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,
+			"style": mergedStyles?.item
+		}, [link]), separator && createVNode(BreadcrumbSeparator_default, null, _isSlot(separator) ? separator : { default: () => [separator] })]);
+		return null;
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		href: {
+			type: String,
+			required: false
+		},
+		menu: {
+			type: Object,
+			required: false
+		},
+		dropdownProps: {
+			type: Object,
+			required: false
+		},
+		onClick: {
+			type: Function,
+			required: false
+		},
+		class: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		separator: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		}
+	},
+	name: "InternalBreadcrumbItem",
+	inheritAttrs: false
+});
+const BreadcrumbItem = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const { prefixCls } = useBaseConfig("breadcrumb", props);
+	return () => {
+		let _slot;
+		const { href,...restProps } = props;
+		const children = checkRenderNode(filterEmpty(slots?.default?.() ?? []));
+		return createVNode(InternalBreadcrumbItem, restProps, _isSlot(_slot = renderItem(prefixCls.value, restProps, children, href)) ? _slot : { default: () => [_slot] });
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		href: {
+			type: String,
+			required: false
+		},
+		menu: {
+			type: Object,
+			required: false
+		},
+		dropdownProps: {
+			type: Object,
+			required: false
+		},
+		onClick: {
+			type: Function,
+			required: false
+		},
+		class: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		separator: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		}
+	},
+	name: "ABreadcrumbItem",
+	inheritAttrs: false
+});
+BreadcrumbItem.__ANT_BREADCRUMB_ITEM = true;
+var BreadcrumbItem_default = BreadcrumbItem;
+
+//#endregion
+export { InternalBreadcrumbItem, BreadcrumbItem_default as default };

package/dist/breadcrumb/BreadcrumbSeparator.js

@@ -0,0 +1,27 @@
+import { useBaseConfig } from "../config-provider/context.js";
+import { useBreadcrumbContext } from "./BreadcrumbContext.js";
+import { createVNode, defineComponent } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/breadcrumb/BreadcrumbSeparator.tsx
+const BreadcrumbSeparator = /* @__PURE__ */ defineComponent((_, { slots }) => {
+	const { prefixCls } = useBaseConfig("breadcrumb");
+	const breadcrumbContext = useBreadcrumbContext();
+	return () => {
+		const { classes: mergedClassNames, styles: mergedStyles } = breadcrumbContext.value;
+		const children = filterEmpty(slots?.default?.() ?? []);
+		return createVNode("li", {
+			"class": clsx(`${prefixCls.value}-separator`, mergedClassNames?.separator),
+			"style": mergedStyles?.separator
+		}, [children.length === 1 ? children[0] === "" ? children : children[0] : children.length === 0 ? "/" : children]);
+	};
+}, {
+	name: "BreadcrumbSeparator",
+	inheritAttrs: false
+});
+BreadcrumbSeparator.__ANT_BREADCRUMB_SEPARATOR = true;
+var BreadcrumbSeparator_default = BreadcrumbSeparator;
+
+//#endregion
+export { BreadcrumbSeparator_default as default };

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+import { BreadcrumbItemProps, SeparatorType } from "./BreadcrumbItem.js";
+import { Breadcrumb, BreadcrumbEmits, BreadcrumbItemType, BreadcrumbProps, BreadcrumbSlots } from "./Breadcrumb.js";

package/dist/breadcrumb/index.js

@@ -0,0 +1,7 @@
+import Breadcrumb_default from "./Breadcrumb.js";
+
+//#region src/breadcrumb/index.tsx
+var breadcrumb_default = Breadcrumb_default;
+
+//#endregion
+export { breadcrumb_default as default };

package/dist/breadcrumb/style/index.d.ts

@@ -0,0 +1,43 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/breadcrumb/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 面包屑项文字颜色
+   * @descEN Text color of Breadcrumb item
+   */
+  itemColor: string;
+  /**
+   * @desc 图标大小
+   * @descEN Icon size
+   */
+  iconFontSize: number;
+  /**
+   * @desc 链接文字颜色
+   * @descEN Text color of link
+   */
+  linkColor: string;
+  /**
+   * @desc 链接文字悬浮颜色
+   * @descEN Color of hovered link
+   */
+  linkHoverColor: string;
+  /**
+   * @desc 最后一项文字颜色
+   * @descEN Text color of the last item
+   */
+  lastItemColor: string;
+  /**
+   * @desc 分隔符外间距
+   * @descEN Margin of separator
+   */
+  separatorMargin: number;
+  /**
+   * @desc 分隔符颜色
+   * @descEN Color of separator
+   */
+  separatorColor: string;
+}
+//#endregion
+export { ComponentToken };

package/dist/breadcrumb/style/index.js

@@ -0,0 +1,78 @@
+import { genFocusStyle, resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/breadcrumb/style/index.ts
+const genBreadcrumbStyle = (token) => {
+	const { componentCls, iconCls, calc } = token;
+	return { [componentCls]: {
+		...resetComponent(token),
+		"color": token.itemColor,
+		"fontSize": token.fontSize,
+		[iconCls]: { fontSize: token.iconFontSize },
+		"ol": {
+			display: "flex",
+			flexWrap: "wrap",
+			margin: 0,
+			padding: 0,
+			listStyle: "none"
+		},
+		"a": {
+			"color": token.linkColor,
+			"transition": `color ${token.motionDurationMid}`,
+			"padding": `0 ${unit(token.paddingXXS)}`,
+			"borderRadius": token.borderRadiusSM,
+			"height": token.fontHeight,
+			"display": "inline-block",
+			"marginInline": calc(token.marginXXS).mul(-1).equal(),
+			"&:hover": {
+				color: token.linkHoverColor,
+				backgroundColor: token.colorBgTextHover
+			},
+			...genFocusStyle(token)
+		},
+		"li:last-child": { color: token.lastItemColor },
+		[`${componentCls}-separator`]: {
+			marginInline: token.separatorMargin,
+			color: token.separatorColor
+		},
+		[`${componentCls}-link`]: { [`
+          > ${iconCls} + span,
+          > ${iconCls} + a
+        `]: { marginInlineStart: token.marginXXS } },
+		[`${componentCls}-overlay-link`]: {
+			"borderRadius": token.borderRadiusSM,
+			"height": token.fontHeight,
+			"display": "inline-block",
+			"padding": `0 ${unit(token.paddingXXS)}`,
+			"marginInline": calc(token.marginXXS).mul(-1).equal(),
+			[`> ${iconCls}`]: {
+				marginInlineStart: token.marginXXS,
+				fontSize: token.fontSizeIcon
+			},
+			"&:hover": {
+				color: token.linkHoverColor,
+				backgroundColor: token.colorBgTextHover,
+				a: { color: token.linkHoverColor }
+			},
+			"a": { "&:hover": { backgroundColor: "transparent" } }
+		},
+		[`&${token.componentCls}-rtl`]: { direction: "rtl" }
+	} };
+};
+const prepareComponentToken = (token) => ({
+	itemColor: token.colorTextDescription,
+	lastItemColor: token.colorText,
+	iconFontSize: token.fontSize,
+	linkColor: token.colorTextDescription,
+	linkHoverColor: token.colorText,
+	separatorColor: token.colorTextDescription,
+	separatorMargin: token.marginXS
+});
+var style_default = genStyleHooks("Breadcrumb", (token) => {
+	return genBreadcrumbStyle(mergeToken(token, {}));
+}, prepareComponentToken);
+
+//#endregion
+export { style_default as default };

package/dist/breadcrumb/useItemRender.js

@@ -0,0 +1,44 @@
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import { checkRenderNode } from "../_util/vueNode.js";
+import { createVNode, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+
+//#region src/breadcrumb/useItemRender.tsx
+function getBreadcrumbName(route, params, titleRender, index) {
+	const title = getSlotPropsFnRun({}, { title: route.title }, "title");
+	const _renderTitle = checkRenderNode(titleRender?.({
+		item: route,
+		index
+	}));
+	const _title = _renderTitle !== void 0 ? _renderTitle : title;
+	if (_title === void 0 || _title === null) return null;
+	const paramsKeys = Object.keys(params).join("|");
+	return typeof _title === "object" ? _title : String(_title).replace(new RegExp(`:(${paramsKeys})`, "g"), (replacement, key) => params[key] || replacement);
+}
+function renderItem(prefixCls, item, children, href) {
+	if (children === null || children === void 0) return null;
+	const { class: className, onClick,...restItem } = item;
+	const passedProps = {
+		...pickAttrs(restItem, {
+			data: true,
+			aria: true
+		}),
+		onClick
+	};
+	if (href !== void 0) return createVNode("a", mergeProps(passedProps, {
+		"class": clsx(`${prefixCls}-link`, className),
+		"href": href
+	}), [children]);
+	return createVNode("span", mergeProps(passedProps, { "class": clsx(`${prefixCls}-link`, className) }), [children]);
+}
+function useItemRender(prefixCls, itemRender, titleRender) {
+	const mergedItemRender = (item, params, routes, path, href, index) => {
+		if (itemRender) return itemRender(item, params, routes, path);
+		return renderItem(prefixCls, item, getBreadcrumbName(item, params, titleRender, index), href);
+	};
+	return mergedItemRender;
+}
+
+//#endregion
+export { useItemRender as default, renderItem };