Skip to content

Commit ef216a1

Browse files
immohammadjavedimmohammadjaved
committed
core(registry): Update registry.json
1 parent 443f3c6 commit ef216a1

File tree

2 files changed

+197
-81
lines changed

2 files changed

+197
-81
lines changed

‎projects/docs/src/app/pages/docs/components/breadcrumb/breadcrumb.variants.ts‎

Lines changed: 158 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component } from '@angular/core';
2-
import { UiBreadcrumb, UiBreadcrumbItem, UiBreadcrumbLink, UiBreadcrumbPage, UiBreadcrumbSeparator, UiBreadcrumbList, UiBreadcrumbEllipsis } from 'ui';
2+
import { UiBreadcrumb, UiBreadcrumbItem, UiBreadcrumbLink, UiBreadcrumbPage, UiBreadcrumbSeparator, UiBreadcrumbList, UiBreadcrumbEllipsis, UiDropdownMenu, UiDropdownMenuTrigger, UiDropdownMenuItem } from 'ui';
33
import { IVariant, IComponentMeta } from '@components/component-preview/component-preview';
44
import { NgIcon, provideIcons } from '@ng-icons/core';
55
import { lucideChevronRight, lucideHouse, lucideFileText, lucideSettings, lucideEllipsis } from '@ng-icons/lucide';
@@ -85,9 +85,16 @@ export class BreadcrumbWithIconsExample {}
8585
<ng-icon name="lucideChevronRight" size="16" />
8686
</li>
8787
<li uiBreadcrumbItem>
88-
<span uiBreadcrumbEllipsis>
88+
<span uiBreadcrumbEllipsis [uiDropdownMenuTrigger]="menu">
8989
<ng-icon name="lucideEllipsis" size="16" />
9090
</span>
91+
<ng-template #menu>
92+
<div uiDropdownMenu class="w-56">
93+
<button uiDropdownMenuItem>Documentation </button>
94+
<button uiDropdownMenuItem>API</button>
95+
<button uiDropdownMenuItem>Examples</button>
96+
</div>
97+
</ng-template>
9198
</li>
9299
<li uiBreadcrumbSeparator>
93100
<ng-icon name="lucideChevronRight" size="16" />
@@ -104,97 +111,166 @@ export class BreadcrumbWithIconsExample {}
104111
</ol>
105112
</nav>
106113
`,
107-
imports: [UiBreadcrumb, UiBreadcrumbList, UiBreadcrumbItem, UiBreadcrumbLink, UiBreadcrumbPage, UiBreadcrumbSeparator, UiBreadcrumbEllipsis, NgIcon],
114+
imports: [UiBreadcrumb, UiBreadcrumbList, UiBreadcrumbItem, UiBreadcrumbLink, UiBreadcrumbPage, UiBreadcrumbSeparator, UiBreadcrumbEllipsis, NgIcon, UiDropdownMenu, UiDropdownMenuTrigger, UiDropdownMenuItem],
108115
providers: [provideIcons({ lucideChevronRight, lucideEllipsis })]
109116
})
110117
export class BreadcrumbCollapsedExample {}
111118

112119
export const breadcrumbVariants: IVariant[] = [
113120
{
114121
title: 'Default',
115-
component: BreadcrumbDefaultExample,
116-
code: `<nav uiBreadcrumb>
117-
<ol uiBreadcrumbList>
118-
<li uiBreadcrumbItem>
119-
<a uiBreadcrumbLink href="#">Home</a>
120-
</li>
121-
<li uiBreadcrumbSeparator>
122-
<ng-icon name="lucideChevronRight" size="16" />
123-
</li>
124-
<li uiBreadcrumbItem>
125-
<a uiBreadcrumbLink href="#">Components</a>
126-
</li>
127-
<li uiBreadcrumbSeparator>
128-
<ng-icon name="lucideChevronRight" size="16" />
129-
</li>
130-
<li uiBreadcrumbItem>
131-
<span uiBreadcrumbPage>Breadcrumb</span>
132-
</li>
133-
</ol>
134-
</nav>`
122+
description: 'A basic breadcrumb navigation showing the current page hierarchy.',
123+
code: `import {
124+
UiBreadcrumb,
125+
UiBreadcrumbList,
126+
UiBreadcrumbItem,
127+
UiBreadcrumbLink,
128+
UiBreadcrumbPage,
129+
UiBreadcrumbSeparator
130+
} from '@workspace/ui/directives/breadcrumb';
131+
import { NgIcon, provideIcons } from '@ng-icons/core';
132+
import { lucideChevronRight } from '@ng-icons/lucide';
133+
134+
@Component({
135+
selector: 'breadcrumb-default-example',
136+
template: \`
137+
<nav uiBreadcrumb>
138+
<ol uiBreadcrumbList>
139+
<li uiBreadcrumbItem>
140+
<a uiBreadcrumbLink href="#">Home</a>
141+
</li>
142+
<li uiBreadcrumbSeparator>
143+
<ng-icon name="lucideChevronRight" size="16" />
144+
</li>
145+
<li uiBreadcrumbItem>
146+
<a uiBreadcrumbLink href="#">Components</a>
147+
</li>
148+
<li uiBreadcrumbSeparator>
149+
<ng-icon name="lucideChevronRight" size="16" />
150+
</li>
151+
<li uiBreadcrumbItem>
152+
<span uiBreadcrumbPage>Breadcrumb</span>
153+
</li>
154+
</ol>
155+
</nav>
156+
\`,
157+
imports: [UiBreadcrumb, UiBreadcrumbList, UiBreadcrumbItem, UiBreadcrumbLink, UiBreadcrumbPage, UiBreadcrumbSeparator, NgIcon],
158+
providers: [provideIcons({ lucideChevronRight })]
159+
})
160+
export class BreadcrumbDefaultExample {}`,
161+
component: BreadcrumbDefaultExample
135162
},
136163
{
137164
title: 'With Icons',
138-
component: BreadcrumbWithIconsExample,
139-
code: `<nav uiBreadcrumb>
140-
<ol uiBreadcrumbList>
141-
<li uiBreadcrumbItem>
142-
<a uiBreadcrumbLink href="#" class="flex items-center gap-1">
143-
<ng-icon name="lucideHouse" size="16" />
144-
Home
145-
</a>
146-
</li>
147-
<li uiBreadcrumbSeparator>
148-
<ng-icon name="lucideChevronRight" size="16" />
149-
</li>
150-
<li uiBreadcrumbItem>
151-
<a uiBreadcrumbLink href="#" class="flex items-center gap-1">
152-
<ng-icon name="lucideFileText" size="16" />
153-
Documents
154-
</a>
155-
</li>
156-
<li uiBreadcrumbSeparator>
157-
<ng-icon name="lucideChevronRight" size="16" />
158-
</li>
159-
<li uiBreadcrumbItem>
160-
<span uiBreadcrumbPage class="flex items-center gap-1">
161-
<ng-icon name="lucideSettings" size="16" />
162-
Settings
163-
</span>
164-
</li>
165-
</ol>
166-
</nav>`
165+
description: 'Breadcrumb navigation with icons for each navigation level.',
166+
code: `import {
167+
UiBreadcrumb,
168+
UiBreadcrumbList,
169+
UiBreadcrumbItem,
170+
UiBreadcrumbLink,
171+
UiBreadcrumbPage,
172+
UiBreadcrumbSeparator
173+
} from '@workspace/ui/directives/breadcrumb';
174+
import { NgIcon, provideIcons } from '@ng-icons/core';
175+
import { lucideChevronRight, lucideHouse, lucideFileText, lucideSettings } from '@ng-icons/lucide';
176+
177+
@Component({
178+
selector: 'breadcrumb-with-icons-example',
179+
template: \`
180+
<nav uiBreadcrumb>
181+
<ol uiBreadcrumbList>
182+
<li uiBreadcrumbItem>
183+
<a uiBreadcrumbLink href="#" class="flex items-center gap-1">
184+
<ng-icon name="lucideHouse" size="16" />
185+
Home
186+
</a>
187+
</li>
188+
<li uiBreadcrumbSeparator>
189+
<ng-icon name="lucideChevronRight" size="16" />
190+
</li>
191+
<li uiBreadcrumbItem>
192+
<a uiBreadcrumbLink href="#" class="flex items-center gap-1">
193+
<ng-icon name="lucideFileText" size="16" />
194+
Documents
195+
</a>
196+
</li>
197+
<li uiBreadcrumbSeparator>
198+
<ng-icon name="lucideChevronRight" size="16" />
199+
</li>
200+
<li uiBreadcrumbItem>
201+
<span uiBreadcrumbPage class="flex items-center gap-1">
202+
<ng-icon name="lucideSettings" size="16" />
203+
Settings
204+
</span>
205+
</li>
206+
</ol>
207+
</nav>
208+
\`,
209+
imports: [UiBreadcrumb, UiBreadcrumbList, UiBreadcrumbItem, UiBreadcrumbLink, UiBreadcrumbPage, UiBreadcrumbSeparator, NgIcon],
210+
providers: [provideIcons({ lucideChevronRight, lucideHouse, lucideFileText, lucideSettings })]
211+
})
212+
export class BreadcrumbWithIconsExample {}`,
213+
component: BreadcrumbWithIconsExample
167214
},
168215
{
169216
title: 'Collapsed',
170-
component: BreadcrumbCollapsedExample,
171-
code: `<nav uiBreadcrumb>
172-
<ol uiBreadcrumbList>
173-
<li uiBreadcrumbItem>
174-
<a uiBreadcrumbLink href="#">Home</a>
175-
</li>
176-
<li uiBreadcrumbSeparator>
177-
<ng-icon name="lucideChevronRight" size="16" />
178-
</li>
179-
<li uiBreadcrumbItem>
180-
<span uiBreadcrumbEllipsis>
181-
<ng-icon name="lucideEllipsis" size="16" />
182-
</span>
183-
</li>
184-
<li uiBreadcrumbSeparator>
185-
<ng-icon name="lucideChevronRight" size="16" />
186-
</li>
187-
<li uiBreadcrumbItem>
188-
<a uiBreadcrumbLink href="#">Components</a>
189-
</li>
190-
<li uiBreadcrumbSeparator>
191-
<ng-icon name="lucideChevronRight" size="16" />
192-
</li>
193-
<li uiBreadcrumbItem>
194-
<span uiBreadcrumbPage>Breadcrumb</span>
195-
</li>
196-
</ol>
197-
</nav>`
217+
description: 'Breadcrumb with collapsed items shown in a dropdown menu for better space management.',
218+
code: `import {
219+
UiBreadcrumb,
220+
UiBreadcrumbList,
221+
UiBreadcrumbItem,
222+
UiBreadcrumbLink,
223+
UiBreadcrumbPage,
224+
UiBreadcrumbSeparator,
225+
UiBreadcrumbEllipsis
226+
} from '@workspace/ui/directives/breadcrumb';
227+
import { UiDropdownMenu, UiDropdownMenuTrigger, UiDropdownMenuItem } from '@workspace/ui/directives/dropdown-menu';
228+
import { NgIcon, provideIcons } from '@ng-icons/core';
229+
import { lucideChevronRight, lucideEllipsis } from '@ng-icons/lucide';
230+
231+
@Component({
232+
selector: 'breadcrumb-collapsed-example',
233+
template: \`
234+
<nav uiBreadcrumb>
235+
<ol uiBreadcrumbList>
236+
<li uiBreadcrumbItem>
237+
<a uiBreadcrumbLink href="#">Home</a>
238+
</li>
239+
<li uiBreadcrumbSeparator>
240+
<ng-icon name="lucideChevronRight" size="16" />
241+
</li>
242+
<li uiBreadcrumbItem>
243+
<span uiBreadcrumbEllipsis [uiDropdownMenuTrigger]="menu">
244+
<ng-icon name="lucideEllipsis" size="16" />
245+
</span>
246+
<ng-template #menu>
247+
<div uiDropdownMenu class="w-56">
248+
<button uiDropdownMenuItem>Documentation</button>
249+
<button uiDropdownMenuItem>API</button>
250+
<button uiDropdownMenuItem>Examples</button>
251+
</div>
252+
</ng-template>
253+
</li>
254+
<li uiBreadcrumbSeparator>
255+
<ng-icon name="lucideChevronRight" size="16" />
256+
</li>
257+
<li uiBreadcrumbItem>
258+
<a uiBreadcrumbLink href="#">Components</a>
259+
</li>
260+
<li uiBreadcrumbSeparator>
261+
<ng-icon name="lucideChevronRight" size="16" />
262+
</li>
263+
<li uiBreadcrumbItem>
264+
<span uiBreadcrumbPage>Breadcrumb</span>
265+
</li>
266+
</ol>
267+
</nav>
268+
\`,
269+
imports: [UiBreadcrumb, UiBreadcrumbList, UiBreadcrumbItem, UiBreadcrumbLink, UiBreadcrumbPage, UiBreadcrumbSeparator, UiBreadcrumbEllipsis, NgIcon, UiDropdownMenu, UiDropdownMenuTrigger, UiDropdownMenuItem],
270+
providers: [provideIcons({ lucideChevronRight, lucideEllipsis })]
271+
})
272+
export class BreadcrumbCollapsedExample {}`,
273+
component: BreadcrumbCollapsedExample
198274
}
199275
];
200276

@@ -203,7 +279,8 @@ export const breadcrumbMeta: IComponentMeta = {
203279
description: 'A navigation component that shows the current page location within a hierarchy.',
204280
installation: {
205281
package: 'breadcrumb',
206-
import: `import { UiBreadcrumb, UiBreadcrumbList, UiBreadcrumbItem, UiBreadcrumbLink, UiBreadcrumbPage, UiBreadcrumbSeparator, UiBreadcrumbEllipsis } from '@workspace/ui';`,
282+
import: `import { UiBreadcrumb, UiBreadcrumbList, UiBreadcrumbItem, UiBreadcrumbLink, UiBreadcrumbPage, UiBreadcrumbSeparator, UiBreadcrumbEllipsis } from '@workspace/ui/directives/breadcrumb';
283+
import { UiDropdownMenu, UiDropdownMenuTrigger, UiDropdownMenuItem } from '@workspace/ui/directives/dropdown-menu';`,
207284
usage: `<nav uiBreadcrumb>
208285
<ol uiBreadcrumbList>
209286
<li uiBreadcrumbItem>

‎registry.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,45 @@
173173
}
174174
],
175175
"dependencies": []
176+
},
177+
{
178+
"name": "dropdown-menu",
179+
"type": "registry:directive",
180+
"title": "Dropdown Menu Directive",
181+
"description": "A dropdown menu directive for creating interactive dropdown menus with support for submenus, shortcuts, labels, and separators",
182+
"files": [
183+
{
184+
"path": "directives/dropdown-menu.ts",
185+
"type": "registry:directive"
186+
}
187+
],
188+
"dependencies": []
189+
},
190+
{
191+
"name": "breadcrumb",
192+
"type": "registry:directive",
193+
"title": "Breadcrumb Directive",
194+
"description": "A breadcrumb directive for displaying navigation hierarchy and current page location",
195+
"files": [
196+
{
197+
"path": "directives/breadcrumb.ts",
198+
"type": "registry:directive"
199+
}
200+
],
201+
"dependencies": []
202+
},
203+
{
204+
"name": "label",
205+
"type": "registry:directive",
206+
"title": "Label Directive",
207+
"description": "A label directive for providing accessible labels and descriptions for form controls and other elements",
208+
"files": [
209+
{
210+
"path": "directives/label.ts",
211+
"type": "registry:directive"
212+
}
213+
],
214+
"dependencies": []
176215
}
177216
]
178217
}

0 commit comments

Comments
 (0)