Skip to content

Commit c302a5c

Browse files
immohammadjavedimmohammadjaved
authored
Merge pull request #7 from angularcafe/dev
UI directives converted to components
2 parents 23366a5 + 1e55678 commit c302a5c

10 files changed

Lines changed: 590 additions & 671 deletions

File tree

‎projects/docs/src/app/pages/docs/components/alert-dialog/alert-dialog.variants.ts‎

Lines changed: 83 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,25 @@ import { lucideTriangleAlert } from '@ng-icons/lucide';
1010
template: `
1111
<button uiButton variant="outline" [uiAlertDialogTrigger]="alertDialog">Open Alert Dialog</button>
1212
<ng-template #alertDialog let-close="close">
13-
<div uiAlertDialogOverlay>
14-
<div uiAlertDialog>
15-
<div uiAlertDialogHeader>
16-
<h1 uiAlertDialogTitle>Are you absolutely sure?</h1>
17-
<p uiAlertDialogDescription>
13+
<ui-alert-dialog-overlay>
14+
<ui-alert-dialog>
15+
<ui-alert-dialog-header>
16+
<ui-alert-dialog-title>Are you absolutely sure?</ui-alert-dialog-title>
17+
<ui-alert-dialog-description>
1818
This action cannot be undone. This will permanently delete your account
1919
and remove your data from our servers.
20-
</p>
21-
</div>
22-
<div uiAlertDialogFooter>
23-
<button uiAlertDialogCancel (click)="close()" uiButton variant="outline">Cancel</button>
24-
<button uiAlertDialogAction (click)="close()" uiButton>Delete Account</button>
25-
</div>
26-
</div>
27-
</div>
20+
</ui-alert-dialog-description>
21+
</ui-alert-dialog-header>
22+
<ui-alert-dialog-footer>
23+
<ui-alert-dialog-cancel>
24+
<button (click)="close()" uiButton variant="outline">Cancel</button>
25+
</ui-alert-dialog-cancel>
26+
<ui-alert-dialog-action>
27+
<button (click)="close()" uiButton>Delete Account</button>
28+
</ui-alert-dialog-action>
29+
</ui-alert-dialog-footer>
30+
</ui-alert-dialog>
31+
</ui-alert-dialog-overlay>
2832
</ng-template>
2933
`,
3034
imports: [UiAlertDialog, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogTrigger, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction, UiButton]
@@ -36,26 +40,30 @@ export class AlertDialogDefaultExample {}
3640
template: `
3741
<button uiButton variant="destructive" [uiAlertDialogTrigger]="alertDialog">Delete Account</button>
3842
<ng-template #alertDialog let-close="close">
39-
<div uiAlertDialogOverlay>
40-
<div uiAlertDialog>
41-
<div uiAlertDialogHeader>
42-
<div class="flex items-center gap-2">
43-
<span class="text-destructive">
44-
<ng-icon name="lucideTriangleAlert" size="20" />
45-
</span>
46-
<h1 uiAlertDialogTitle>Delete Account</h1>
47-
</div>
48-
<p uiAlertDialogDescription>
49-
This action cannot be undone. This will permanently delete your account
50-
and remove your data from our servers.
51-
</p>
52-
</div>
53-
<div uiAlertDialogFooter>
54-
<button uiAlertDialogCancel (click)="close()" uiButton variant="outline">Cancel</button>
55-
<button uiAlertDialogAction (click)="close()" uiButton variant="destructive">Delete Account</button>
56-
</div>
57-
</div>
58-
</div>
43+
<ui-alert-dialog-overlay>
44+
<ui-alert-dialog>
45+
<ui-alert-dialog-header>
46+
<div class="flex items-center gap-2">
47+
<span class="text-destructive">
48+
<ng-icon name="lucideTriangleAlert" size="20" />
49+
</span>
50+
<ui-alert-dialog-title>Delete Account</ui-alert-dialog-title>
51+
</div>
52+
<ui-alert-dialog-description>
53+
This action cannot be undone. This will permanently delete your account
54+
and remove your data from our servers.
55+
</ui-alert-dialog-description>
56+
</ui-alert-dialog-header>
57+
<ui-alert-dialog-footer>
58+
<ui-alert-dialog-cancel>
59+
<button (click)="close()" uiButton variant="outline">Cancel</button>
60+
</ui-alert-dialog-cancel>
61+
<ui-alert-dialog-action>
62+
<button (click)="close()" uiButton variant="destructive">Delete Account</button>
63+
</ui-alert-dialog-action>
64+
</ui-alert-dialog-footer>
65+
</ui-alert-dialog>
66+
</ui-alert-dialog-overlay>
5967
</ng-template>
6068
`,
6169
providers: [provideIcons({ lucideTriangleAlert })],
@@ -68,7 +76,7 @@ export const alertDialogMeta: IComponentMeta = {
6876
description: 'A modal dialog that interrupts the user with important content and expects a response.',
6977
installation: {
7078
package: 'alert-dialog',
71-
import: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/directives/alert-dialog';`,
79+
import: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/alert-dialog';`,
7280
usage: `<button [uiAlertDialogTrigger]="alertDialog">Open</button><ng-template #alertDialog let-close="close"><div uiAlertDialogOverlay><div uiAlertDialog>...</div></div></ng-template>`
7381
},
7482
api: {
@@ -86,29 +94,33 @@ export const alertDialogVariants: IVariant[] = [
8694
{
8795
title: 'Default',
8896
description: 'Basic alert dialog with header, description, and action buttons.',
89-
code: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/directives/alert-dialog';
90-
import { UiButton } from '@workspace/ui/directives/button';
97+
code: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/alert-dialog';
98+
import { UiButton } from '@workspace/ui/button';
9199
92100
@Component({
93101
selector: 'alert-dialog-default-example',
94102
template: \`
95103
<button uiButton variant="outline" [uiAlertDialogTrigger]="alertDialog">Open Alert Dialog</button>
96104
<ng-template #alertDialog let-close="close">
97-
<div uiAlertDialogOverlay>
98-
<div uiAlertDialog>
99-
<div uiAlertDialogHeader>
100-
<h1 uiAlertDialogTitle>Are you absolutely sure?</h1>
101-
<p uiAlertDialogDescription>
105+
<ui-alert-dialog-overlay>
106+
<ui-alert-dialog>
107+
<ui-alert-dialog-header>
108+
<ui-alert-dialog-title>Are you absolutely sure?</ui-alert-dialog-title>
109+
<ui-alert-dialog-description>
102110
This action cannot be undone. This will permanently delete your account
103111
and remove your data from our servers.
104-
</p>
105-
</div>
106-
<div uiAlertDialogFooter>
107-
<button uiAlertDialogCancel (click)="close()" uiButton variant="outline">Cancel</button>
108-
<button uiAlertDialogAction (click)="close()" uiButton>Delete Account</button>
109-
</div>
110-
</div>
111-
</div>
112+
</ui-alert-dialog-description>
113+
</ui-alert-dialog-header>
114+
<ui-alert-dialog-footer>
115+
<ui-alert-dialog-cancel>
116+
<button (click)="close()" uiButton variant="outline">Cancel</button>
117+
</ui-alert-dialog-cancel>
118+
<ui-alert-dialog-action>
119+
<button (click)="close()" uiButton>Delete Account</button>
120+
</ui-alert-dialog-action>
121+
</ui-alert-dialog-footer>
122+
</ui-alert-dialog>
123+
</ui-alert-dialog-overlay>
112124
</ng-template>
113125
\`,
114126
imports: [UiAlertDialog, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogTrigger, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction, UiButton]
@@ -119,8 +131,8 @@ export class AlertDialogDefaultExample {}`,
119131
{
120132
title: 'Destructive',
121133
description: 'Alert dialog with destructive action styling and warning icon.',
122-
code: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/directives/alert-dialog';
123-
import { UiButton } from '@workspace/ui/directives/button';
134+
code: `import { UiAlertDialog, UiAlertDialogTrigger, UiAlertDialogHeader, UiAlertDialogTitle, UiAlertDialogDescription, UiAlertDialogFooter, UiAlertDialogOverlay, UiAlertDialogCancel, UiAlertDialogAction } from '@workspace/ui/alert-dialog';
135+
import { UiButton } from '@workspace/ui/button';
124136
import { NgIcon, provideIcons } from '@ng-icons/core';
125137
import { lucideTriangle } from '@ng-icons/lucide';
126138
@@ -129,24 +141,30 @@ import { lucideTriangle } from '@ng-icons/lucide';
129141
template: \`
130142
<button uiButton variant="destructive" [uiAlertDialogTrigger]="alertDialog">Delete Account</button>
131143
<ng-template #alertDialog let-close="close">
132-
<div uiAlertDialogOverlay>
133-
<div uiAlertDialog>
134-
<div uiAlertDialogHeader>
144+
<ui-alert-dialog-overlay>
145+
<ui-alert-dialog>
146+
<ui-alert-dialog-header>
135147
<div class="flex items-center gap-2">
136-
<ng-icon name="lucideTriangleAlert" class="h-5 w-5 text-destructive"></ng-icon>
137-
<h1 uiAlertDialogTitle>Delete Account</h1>
148+
<span class="text-destructive">
149+
<ng-icon name="lucideTriangleAlert" size="20" />
150+
</span>
151+
<ui-alert-dialog-title>Delete Account</ui-alert-dialog-title>
138152
</div>
139-
<p uiAlertDialogDescription>
153+
<ui-alert-dialog-description>
140154
This action cannot be undone. This will permanently delete your account
141155
and remove your data from our servers.
142-
</p>
143-
</div>
144-
<div uiAlertDialogFooter>
145-
<button uiAlertDialogCancel (click)="close()" uiButton variant="outline">Cancel</button>
146-
<button uiAlertDialogAction (click)="close()" uiButton variant="destructive">Delete Account</button>
147-
</div>
148-
</div>
149-
</div>
156+
</ui-alert-dialog-description>
157+
</ui-alert-dialog-header>
158+
<ui-alert-dialog-footer>
159+
<ui-alert-dialog-cancel>
160+
<button (click)="close()" uiButton variant="outline">Cancel</button>
161+
</ui-alert-dialog-cancel>
162+
<ui-alert-dialog-action>
163+
<button (click)="close()" uiButton variant="destructive">Delete Account</button>
164+
</ui-alert-dialog-action>
165+
</ui-alert-dialog-footer>
166+
</ui-alert-dialog>
167+
</ui-alert-dialog-overlay>
150168
</ng-template>
151169
\`,
152170
providers: [provideIcons({ lucideTriangle })],

0 commit comments

Comments
 (0)