Skip to content

Commit

Permalink
tabs: Improved API by making brn an hostdirective of hlm (#77)
Browse files Browse the repository at this point in the history
  • Loading branch information
@elite-benni
elite-benni authored Dec 18, 2023
1 parent bee316d commit cb465a5
Show file tree
Hide file tree
Showing 18 changed files with 436 additions and 270 deletions.
142 changes: 119 additions & 23 deletions apps/app/src/app/pages/(components)/components/(tabs)/tabs--vertical.preview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,16 @@ import {
} from '@spartan-ng/ui-card-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import {
BrnTabsComponent,
BrnTabsContentDirective,
BrnTabsListComponent,
BrnTabsTriggerDirective,
} from '@spartan-ng/ui-tabs-brain';
import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm';
import { BrnTabsDirective } from '@spartan-ng/ui-tabs-brain';
import { HlmTabsContentDirective, HlmTabsListComponent, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm';

@Component({
selector: 'spartan-tabs-vertical',
standalone: true,
imports: [
BrnTabsComponent,
BrnTabsListComponent,
BrnTabsTriggerDirective,
BrnTabsContentDirective,
BrnTabsDirective,

HlmTabsListDirective,
HlmTabsListComponent,
HlmTabsTriggerDirective,
HlmTabsContentDirective,

Expand All @@ -48,13 +40,13 @@ import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective
class: 'block w-full max-w-lg min-h-[400px]',
},
template: `
<brn-tabs class="mx-auto flex max-w-3xl flex-row space-x-2" orientation="vertical" value="account">
<brn-tabs-list hlmTabsList orientation="vertical" aria-label="tabs example">
<button class="w-full" hlmTabsTrigger brnTabsTrigger="account">Account</button>
<button class="w-full" hlmTabsTrigger brnTabsTrigger="password">Password</button>
<button class="w-full" hlmTabsTrigger brnTabsTrigger="danger">Danger Zone</button>
</brn-tabs-list>
<div hlmTabsContent brnTabsContent="account">
<div brnTabs="account" class="mx-auto flex max-w-3xl flex-row space-x-2" orientation="vertical">
<hlm-tabs-list orientation="vertical" aria-label="tabs example">
<button class="w-full" hlmTabsTrigger="account">Account</button>
<button class="w-full" hlmTabsTrigger="password">Password</button>
<button class="w-full" hlmTabsTrigger="danger">Danger Zone</button>
</hlm-tabs-list>
<div hlmTabsContent="account">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Account</h3>
Expand All @@ -75,7 +67,7 @@ import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective
</div>
</section>
</div>
<div hlmTabsContent brnTabsContent="password">
<div hlmTabsContent="password">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Password</h3>
Expand All @@ -96,7 +88,7 @@ import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective
</div>
</section>
</div>
<div hlmTabsContent brnTabsContent="danger">
<div hlmTabsContent="danger">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Delete Account</h3>
Expand All @@ -107,10 +99,114 @@ import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective
</div>
</section>
</div>
</brn-tabs>
</div>
`,
})
export class TabsVerticalPreviewComponent {}

export const verticalCode = `
export const verticalCode = `import { Component } from '@angular/core';
import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import {
HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective,
HlmCardHeaderDirective,
HlmCardTitleDirective,
} from '@spartan-ng/ui-card-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import { BrnTabsDirective } from '@spartan-ng/ui-tabs-brain';
import { HlmTabsContentDirective, HlmTabsListComponent, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm';
@Component({
selector: 'spartan-tabs-vertical',
standalone: true,
imports: [
BrnTabsDirective,
HlmTabsListComponent,
HlmTabsTriggerDirective,
HlmTabsContentDirective,
HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective,
HlmCardHeaderDirective,
HlmCardTitleDirective,
HlmLabelDirective,
HlmInputDirective,
HlmButtonDirective,
HlmBadgeDirective,
],
host: {
class: 'block w-full max-w-lg min-h-[400px]',
},
template: \`
<div brnTabs="account" class="mx-auto flex max-w-3xl flex-row space-x-2" orientation="vertical">
<hlm-tabs-list orientation="vertical" aria-label="tabs example">
<button class="w-full" hlmTabsTrigger="account">Account</button>
<button class="w-full" hlmTabsTrigger="password">Password</button>
<button class="w-full" hlmTabsTrigger="danger">Danger Zone</button>
</hlm-tabs-list>
<div hlmTabsContent="account">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Account</h3>
<p hlmCardDescription>Make changes to your account here. Click save when you're done.</p>
</div>
<p hlmCardContent>
<label class="my-4 block" hlmLabel>
Name
<input class="mt-1.5 w-full" value="Pedro Duarte" hlmInput />
</label>
<label class="my-4 block" hlmLabel>
Username
<input class="mt-1.5 w-full" placeholder="@peduarte" hlmInput />
</label>
</p>
<div hlmCardFooter>
<button hlmBtn>Save Changes</button>
</div>
</section>
</div>
<div hlmTabsContent="password">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Password</h3>
<p hlmCardDescription>Change your password here. After saving, you'll be logged out.</p>
</div>
<p hlmCardContent>
<label class="my-4 block" hlmLabel>
Old Password
<input class="mt-1.5 w-full" type="password" hlmInput />
</label>
<label class="my-4 block" hlmLabel>
New Password
<input class="mt-1.5 w-full" type="password" hlmInput />
</label>
</p>
<div hlmCardFooter>
<button hlmBtn>Save Password</button>
</div>
</section>
</div>
<div hlmTabsContent="danger">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Delete Account</h3>
<p hlmCardDescription>Are you sure you want to delete your account? You cannot undo this action.</p>
</div>
<div hlmCardFooter>
<button variant="destructive" hlmBtn>Delete Account</button>
</div>
</section>
</div>
</div>
\`,
})
export class TabsVerticalPreviewComponent {}
`;
2 changes: 1 addition & 1 deletion apps/app/src/app/pages/(components)/components/(tabs)/tabs.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export const routeMeta: RouteMeta = {
<div spartanCodePreview firstTab>
<spartan-tabs-vertical />
</div>
<spartan-code secondTab [code]="defaultCode" />
<spartan-code secondTab [code]="verticalCode" />
</spartan-tabs>
<spartan-page-bottom-nav>
Expand Down
Loading

0 comments on commit cb465a5

Please sign in to comment.