From 8611e56ed2aae0eb0b2ddf7e724fe0b2e48c44ee Mon Sep 17 00:00:00 2001 From: janrozic1 <37080465-janrozic1@users.noreply.replit.com> Date: Wed, 10 Dec 2025 09:26:55 +0000 Subject: [PATCH 1/7] Configure website to run on a specific port and host Update vite.config.ts to set the server host to '0.0.0.0' and the port to 5000. Replit-Commit-Author: Agent Replit-Commit-Session-Id: dc672fdb-19d2-4d5f-bae1-94760b303a1d Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 4199e6cc-ea1b-4ae0-a39a-563e8e0a14f2 Replit-Helium-Checkpoint-Created: true --- .replit | 34 ++++++++++++++++++++++++++++++++++ site/vite.config.ts | 3 ++- 2 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 .replit diff --git a/.replit b/.replit new file mode 100644 index 0000000000..bca856d5b3 --- /dev/null +++ b/.replit @@ -0,0 +1,34 @@ +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 diff --git a/site/vite.config.ts b/site/vite.config.ts index 5e913e7617..663c35088e 100644 --- a/site/vite.config.ts +++ b/site/vite.config.ts @@ -19,7 +19,8 @@ export default { }, }, server: { - host: true, + host: '0.0.0.0', + port: 5000, }, plugins: [ vueJsx({ From f1c9147fb1a4c3ed7345a726e62aef4c6f035cbf Mon Sep 17 00:00:00 2001 From: janrozic1 <37080465-janrozic1@users.noreply.replit.com> Date: Wed, 10 Dec 2025 09:42:15 +0000 Subject: [PATCH 2/7] Add documentation for project setup and development Create a replit.md file detailing the project's overview, structure, setup, and running instructions. Replit-Commit-Author: Agent Replit-Commit-Session-Id: dc672fdb-19d2-4d5f-bae1-94760b303a1d Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: d348c910-3467-43f6-b989-a881b6c6add0 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ce4e9cd-2415-4003-8bb8-55c9c88cea00/dc672fdb-19d2-4d5f-bae1-94760b303a1d/1GeIdCE Replit-Helium-Checkpoint-Created: true --- .replit | 9 +++++++++ replit.md | 41 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 replit.md diff --git a/.replit b/.replit index bca856d5b3..b6b28ddda9 100644 --- a/.replit +++ b/.replit @@ -32,3 +32,12 @@ outputType = "webview" [[ports]] localPort = 5000 externalPort = 80 + +[[ports]] +localPort = 42755 +externalPort = 3000 + +[deployment] +deploymentTarget = "static" +build = ["npm", "run", "build"] +publicDir = "site/dist" diff --git a/replit.md b/replit.md new file mode 100644 index 0000000000..dc7b8dbc1f --- /dev/null +++ b/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 From 5a213c3fd64fb1f931abb45a2faff3490953fdaa Mon Sep 17 00:00:00 2001 From: janrozic1 <37080465-janrozic1@users.noreply.replit.com> Date: Thu, 11 Dec 2025 14:01:23 +0000 Subject: [PATCH 3/7] 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 --- .replit | 4 ---- components/breadcrumb/Breadcrumb.tsx | 31 +++++++++++++++++++++------- components/breadcrumb/index.ts | 2 +- 3 files changed, 25 insertions(+), 12 deletions(-) diff --git a/.replit b/.replit index b6b28ddda9..7a95b0aba3 100644 --- a/.replit +++ b/.replit @@ -33,10 +33,6 @@ outputType = "webview" localPort = 5000 externalPort = 80 -[[ports]] -localPort = 42755 -externalPort = 3000 - [deployment] deploymentTarget = "static" build = ["npm", "run", "build"] diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index ad9e24b0de..19ee97eb3a 100644 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/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[]; } +export type SeparatorGeneratorFunc = (info: { prevItem: Route | VNode | null; index: number }) => string; + export const breadcrumbProps = () => ({ prefixCls: String, routes: { type: Array as PropType }, params: PropTypes.any, - separator: PropTypes.any, + separator: [String, Function] as PropType, 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({ > ); } - 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,7 +135,18 @@ 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) { @@ -139,7 +154,7 @@ export default defineComponent({ 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 }); }); } diff --git a/components/breadcrumb/index.ts b/components/breadcrumb/index.ts index 6ef68e149e..f65e09e335 100644 --- a/components/breadcrumb/index.ts +++ b/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'; From 60b1f1713f53bb500a2fef218d3f904e51891704 Mon Sep 17 00:00:00 2001 From: janrozic1 <37080465-janrozic1@users.noreply.replit.com> Date: Thu, 11 Dec 2025 14:19:38 +0000 Subject: [PATCH 4/7] Add example demonstrating dynamic separator generation in breadcrumbs Update demo file to showcase a breadcrumb component utilizing a separator generator function, allowing dynamic separator creation based on item index. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 6cc5c7da-6689-4391-8349-0b45bd1c8827 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: a866df52-256e-4538-b672-cbe03d4e2c3f Replit-Helium-Checkpoint-Created: true --- .../breadcrumb/demo/separator-indepent.vue | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/components/breadcrumb/demo/separator-indepent.vue b/components/breadcrumb/demo/separator-indepent.vue index 2f03d93825..ce0593fbe7 100644 --- a/components/breadcrumb/demo/separator-indepent.vue +++ b/components/breadcrumb/demo/separator-indepent.vue @@ -8,11 +8,12 @@ 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. @@ -26,4 +27,19 @@ The separator can be customized by setting the separator property: `Breadcrumb.S An Application + +

Using a separator generator function:

+ + + Home + Dashboard + Settings + Profile + + + From 9ca136bd27ea59e5fd5a71436d36f7b0854fc594 Mon Sep 17 00:00:00 2001 From: janrozic1 <37080465-janrozic1@users.noreply.replit.com> Date: Fri, 12 Dec 2025 07:02:05 +0000 Subject: [PATCH 5/7] Add a visual line separator above the new section Add an a-divider component to visually separate the new section demonstrating the separator generator function. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 6cc5c7da-6689-4391-8349-0b45bd1c8827 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: f161640c-7968-4322-a8a3-c3c25370a2f4 Replit-Helium-Checkpoint-Created: true --- .../targeted_element_1765522910746.png | Bin 0 -> 381 bytes components/breadcrumb/demo/separator-indepent.vue | 2 ++ 2 files changed, 2 insertions(+) create mode 100644 attached_assets/targeted_element_1765522910746.png diff --git a/attached_assets/targeted_element_1765522910746.png b/attached_assets/targeted_element_1765522910746.png new file mode 100644 index 0000000000000000000000000000000000000000..8d10be39c21ce61631cc2c9f1d170f870f1ca68e GIT binary patch literal 381 zcmeAS@N?(olHy`uVBq!ia0y~yVA=v?3vjRj$>%z6xEUB2jXYf(Ln;{GTr=crG2mfw zIPzcKx6#FW;t{_$J0H0)-mJLuruL_xf0(I z;mYl|ojnOA66UZ_cXw2?V2AJo7qG!btRlC3YHvb}bWms9tS1zZA%4(m8dQgaf}6v_ z-oj~43VsekV5erNEx2G7y`zv5;)w7A^|Fku+s^6vIze5Up}F9~wwT=uAG4@HJ-8ZZ z$<;&W)FHn8$GXQc!NFmn?19gkU=x9!aoBf&nStT||J09a9l$_j1BD(lgZ32$MfM%% R9s@-fJYD@<);T3K0RWa5ZpQ!s literal 0 HcmV?d00001 diff --git a/components/breadcrumb/demo/separator-indepent.vue b/components/breadcrumb/demo/separator-indepent.vue index ce0593fbe7..2cd8bf5d01 100644 --- a/components/breadcrumb/demo/separator-indepent.vue +++ b/components/breadcrumb/demo/separator-indepent.vue @@ -28,6 +28,8 @@ You can also pass a generator function that receives the previous item and index An Application + +

Using a separator generator function:

From 1d6dd3341b79f9b4db7620e863d2a2930bcf08ed Mon Sep 17 00:00:00 2001 From: janrozic1 <37080465-janrozic1@users.noreply.replit.com> Date: Fri, 12 Dec 2025 07:03:48 +0000 Subject: [PATCH 6/7] Add explanation and separator customization for breadcrumb component Enhance the Breadcrumb component by adding support for a generator function to dynamically create separators, and include usage examples and explanatory text in the demo. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 6cc5c7da-6689-4391-8349-0b45bd1c8827 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 32682b43-93c5-4c30-a291-774a507229bc Replit-Helium-Checkpoint-Created: true --- .../targeted_element_1765523011666.png | Bin 0 -> 1031 bytes .../breadcrumb/demo/separator-indepent.vue | 2 ++ 2 files changed, 2 insertions(+) create mode 100644 attached_assets/targeted_element_1765523011666.png diff --git a/attached_assets/targeted_element_1765523011666.png b/attached_assets/targeted_element_1765523011666.png new file mode 100644 index 0000000000000000000000000000000000000000..6241e9c749617f356916b62251283a1c3a6b2620 GIT binary patch literal 1031 zcmeAS@N?(olHy`uVBq!ia0y~yVA=v?i*c|4NyAcpF$MR^W7It&{A@B2t_tgJ{1wKBaUXnlm&iOpg@AaF_ z`ssVm@2c}Zzxn>w>v6v;um4)J^?cR0IJ*b@j4T2U3}B*BjQhfcZ9krDe9fT{u#}-# zv4Me!!z8q!ZQIK9w!cmgMT{)BGy)FWUA}Ow;oKAs1&|UD@slMZ<8x#XCnL)$;RH2^ zkfd3yT4X@3)p-IOU8S>4!eOqzg@cTMl>R9n;fz-Z1uGFgk8UE zI_t-tqOF@=CYq-ose2cEk=g4wpY5DLx1*7w_m=haO`Ub%_$IH%3y!`#e@gT1f48S5 z8=a(o@0HqgyfF06x{@0^)?V+fb*o*rYDXA9cj5M;Ss!+ut&MfR;&Z&jgS&hR-)#FU zhXPYwe%z`N2%Iqs=pzRq5A(k2sKUTVcbO|os;6j{Wj<^wTE6Mz!`TOd-!2Gt{${bP zYoB0-#1FUPNN&r#8Lva0FS&GfXiDVOr`)~l<5wGo|ESs+ zysm2Ts~tc08)Y>suFt)=Oa0XBQym{HeSBxg7RBnjUVriW=>PV2dQ2u~?;L$yGjS4k z*ze+6-)wWu<(=WTesmkvuDp=+vSY=}vQzOV;?CIJT=Q|}r(K(JZk+!<`Ah1ZuX!&X z?!5G$-9*4!;DIiOf`OZY>6Tf`FC=BbmD-|w0GSwHFXytMc~ zOS)=y16Y`%WA)}%Vd|BF+v|660IbjRX;P@;K>yy?E+x`1Ch^J{jlJNS3i%QO$? ziXDZ2mPXcTsrQ!j{+@35|C8Cv-_th5o_oFYg;ed{9g0PK*6%W(>BT)i{E9bvd#Lu` zqaSx4^Gt3w`yy__+brX|@U_d8lDmmNowd(v-q$$YcK)unsO3VRk5SzJQvYsuV*;i^ s4#6Mn3=IGOH>JO*1ZHP8P(Eg6=vrjJ>G8lS11Q4a>FVdQ&MBb@02#%(6951J literal 0 HcmV?d00001 diff --git a/components/breadcrumb/demo/separator-indepent.vue b/components/breadcrumb/demo/separator-indepent.vue index 2cd8bf5d01..8be0b8e560 100644 --- a/components/breadcrumb/demo/separator-indepent.vue +++ b/components/breadcrumb/demo/separator-indepent.vue @@ -18,6 +18,8 @@ You can also pass a generator function that receives the previous item and index