Breadcrumb separator generator

.replit

@@ -0,0 +1,39 @@
+modules = ["vue-node-20", "nodejs-20", "web"]
+[agent]
+expertMode = true
+
+[nix]
+channel = "stable-25_05"
+
+[workflows]
+runButton = "Project"
+
+[[workflows.workflow]]
+name = "Project"
+mode = "parallel"
+author = "agent"
+
+[[workflows.workflow.tasks]]
+task = "workflow.run"
+args = "Dev Server"
+
+[[workflows.workflow]]
+name = "Dev Server"
+author = "agent"
+
+[[workflows.workflow.tasks]]
+task = "shell.exec"
+args = "npm run dev"
+waitForPort = 5000
+
+[workflows.workflow.metadata]
+outputType = "webview"
+
+[[ports]]
+localPort = 5000
+externalPort = 80
+
+[deployment]
+deploymentTarget = "static"
+build = ["npm", "run", "build"]
+publicDir = "site/dist"

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/demo/separator-indepent.vue

@@ -8,15 +8,18 @@ title:
 
 ## zh-CN
 
-使用 `Breadcrumb.Separator` 可以自定义分隔符。
+使用 `Breadcrumb.Separator` 可以自定义分隔符，也可以传入一个函数来动态生成分隔符。
 
 ## en-US
 
 The separator can be customized by setting the separator property: `Breadcrumb.Separator`.
+You can also pass a generator function that receives the previous item and index to dynamically generate separators.
 
 </docs>
 
 <template>
+  <p style="margin-bottom: 16px">Using Breadcrumb.Separator component for custom separators:</p>
+
   <a-breadcrumb separator="">
     <a-breadcrumb-item>Location</a-breadcrumb-item>
     <a-breadcrumb-separator>:</a-breadcrumb-separator>
@@ -26,4 +29,21 @@ The separator can be customized by setting the separator property: `Breadcrumb.S
     <a-breadcrumb-separator />
     <a-breadcrumb-item>An Application</a-breadcrumb-item>
   </a-breadcrumb>
+
+  <a-divider />
+
+  <p style="margin: 16px 0">Using a separator generator function:</p>
+
+  <a-breadcrumb :separator="separatorGenerator">
+    <a-breadcrumb-item>Home</a-breadcrumb-item>
+    <a-breadcrumb-item href="">Dashboard</a-breadcrumb-item>
+    <a-breadcrumb-item href="">Settings</a-breadcrumb-item>
+    <a-breadcrumb-item>Profile</a-breadcrumb-item>
+  </a-breadcrumb>
 </template>
+
+<script lang="ts" setup>
+import type { SeparatorGeneratorFunc } from '../index';
+
+const separatorGenerator: SeparatorGeneratorFunc = ({ index }) => String(index);
+</script>

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';
 

replit.md

@@ -0,0 +1,41 @@
+# Ant Design Vue
+
+## Overview
+This is the Ant Design Vue component library - an enterprise-class UI design language and Vue-based implementation. This repository contains both the component library source code and the documentation site.
+
+## Project Structure
+- `components/` - Vue 3 component library source code
+- `site/` - Vite-powered documentation site
+- `scripts/` - Build and utility scripts
+- `plugin/` - Custom Vite plugins for documentation processing
+- `antd-tools/` - Build tooling for the component library
+
+## Development Setup
+The project uses:
+- **Node.js 20** - JavaScript runtime
+- **Vite 3** - Development server and build tool
+- **Vue 3** - Frontend framework
+- **Less** - CSS preprocessing
+- **TypeScript** - Type-safe JavaScript
+
+## Running the Project
+The dev server runs on port 5000:
+```bash
+npm run dev
+```
+
+This starts the documentation site with hot reload for development.
+
+## Key Scripts
+- `npm run dev` - Start development server
+- `npm run build` - Build the documentation site for production
+- `npm run compile` - Compile the component library
+- `npm run test` - Run tests
+
+## Configuration
+- Vite config: `site/vite.config.ts`
+- TypeScript config: `tsconfig.json`
+- ESLint config: `.eslintrc.js`
+
+## Recent Changes
+- December 2024: Configured for Replit environment with port 5000

site/vite.config.ts

@@ -19,7 +19,8 @@ export default {
     },
   },
   server: {
-    host: true,
+    host: '0.0.0.0',
+    port: 5000,
   },
   plugins: [
     vueJsx({