Add option to generate breadcrumb separators dynamically

Update Breadcrumb component to accept a separator generator function as a prop, alongside existing string and slot options. Exports `SeparatorGeneratorFunc` type and refactors internal logic to handle dynamic separator generation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 6cc5c7da-6689-4391-8349-0b45bd1c8827
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a64ee559-eaf2-4dd6-beba-6d81591cda0a
Replit-Helium-Checkpoint-Created: true

Author: janrozic1

.replit

@@ -33,10 +33,6 @@ outputType = "webview"
 localPort = 5000
 externalPort = 80
 
-[[ports]]
-localPort = 42755
-externalPort = 3000
-
 [deployment]
 deploymentTarget = "static"
 build = ["npm", "run", "build"]

components/breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import type { PropType, ExtractPropTypes } from 'vue';
+import type { PropType, ExtractPropTypes, VNode } from 'vue';
 import { cloneVNode, defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { flattenChildren, getPropsSlot } from '../_util/props-util';
@@ -16,11 +16,13 @@ export interface Route {
   children?: Omit<Route, 'children'>[];
 }
 
+export type SeparatorGeneratorFunc = (info: { prevItem: Route | VNode | null; index: number }) => string;
+
 export const breadcrumbProps = () => ({
   prefixCls: String,
   routes: { type: Array as PropType<Route[]> },
   params: PropTypes.any,
-  separator: PropTypes.any,
+  separator: [String, Function] as PropType<string | SeparatorGeneratorFunc>,
   itemRender: {
     type: Function as PropType<
       (opt: { route: Route; params: unknown; routes: Route[]; paths: string[] }) => VueNode
@@ -90,7 +92,7 @@ export default defineComponent({
       itemRender = defaultItemRender,
     }: any) => {
       const paths = [];
-      return routes.map((route: Route) => {
+      return routes.map((route: Route, index: number) => {
         const path = getPath(route.path, params);
 
         if (path) {
@@ -114,7 +116,9 @@ export default defineComponent({
             ></Menu>
           );
         }
-        const itemProps: BreadcrumbItemProps = { separator };
+        const prevItem = index > 0 ? routes[index - 1] : null;
+        const itemSeparator = separator(prevItem, index);
+        const itemProps: BreadcrumbItemProps = { separator: itemSeparator };
         if (overlay) {
           itemProps.overlay = overlay;
         }
@@ -131,15 +135,26 @@ export default defineComponent({
       const { routes, params = {} } = props;
 
       const children = flattenChildren(getPropsSlot(slots, props));
-      const separator = getPropsSlot(slots, props, 'separator') ?? '/';
+      const separatorProp = props.separator;
+      const isSeparatorGenerator = typeof separatorProp === 'function';
+      const separator = isSeparatorGenerator
+        ? separatorProp
+        : (getPropsSlot(slots, props, 'separator') ?? '/');
+
+      const getSeparator = (prevItem: Route | VNode | null, index: number) => {
+        if (isSeparatorGenerator) {
+          return (separator as SeparatorGeneratorFunc)({ prevItem, index });
+        }
+        return separator;
+      };
 
       const itemRender = props.itemRender || slots.itemRender || defaultItemRender;
       if (routes && routes.length > 0) {
         // generated by route
         crumbs = genForRoutes({
           routes,
           params,
-          separator,
+          separator: getSeparator,
           itemRender,
         });
       } else if (children.length) {
@@ -150,7 +165,9 @@ export default defineComponent({
             'Breadcrumb',
             "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
           );
-          return cloneVNode(element, { separator, key: index });
+          const prevItem = index > 0 ? children[index - 1] : null;
+          const itemSeparator = getSeparator(prevItem, index);
+          return cloneVNode(element, { separator: itemSeparator, key: index });
         });
       }
 

components/breadcrumb/index.ts

@@ -3,7 +3,7 @@ import Breadcrumb from './Breadcrumb';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 
-export type { BreadcrumbProps } from './Breadcrumb';
+export type { BreadcrumbProps, SeparatorGeneratorFunc } from './Breadcrumb';
 export type { BreadcrumbItemProps } from './BreadcrumbItem';
 export type { BreadcrumbSeparatorProps } from './BreadcrumbSeparator';