chore: updated shadcn tabs for showcase

radix-ng · Jan 5, 2025 · 6187ae7 · 6187ae7
1 parent 6889f40
commit 6187ae7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 23 deletions.
diff --git a/apps/shadcn-docs/src/content/components/tabs/examples/tabs-example.component.ts b/apps/shadcn-docs/src/content/components/tabs/examples/tabs-example.component.ts
@@ -27,13 +27,13 @@ import { ShTabsModule } from '@radix-ng/shadcn/tabs';
         ShButtonDirective
     ],
     template: `
-        <div class="w-[350px]" shTabs shDefaultValue="account">
-            <div class="grid w-full grid-cols-2" shTabsList>
+        <sh-tabs class="w-[350px]" shDefaultValue="account">
+            <sh-tabs-list class="grid w-full grid-cols-2">
                 <button shTabsTrigger shValue="account">Account</button>
                 <button shTabsTrigger shValue="password">Password</button>
-            </div>
+            </sh-tabs-list>
 
-            <div shTabsContent shValue="account">
+            <sh-tabs-content shValue="account">
                 <shCard class="block">
                     <shCardHeader>
                         <shCardTitle>Account</shCardTitle>
@@ -55,9 +55,9 @@ import { ShTabsModule } from '@radix-ng/shadcn/tabs';
                         <button shButton>Save changes</button>
                     </shCardFooter>
                 </shCard>
-            </div>
+            </sh-tabs-content>
 
-            <div shTabsContent shValue="password">
+            <sh-tabs-content shValue="password">
                 <shCard class="block">
                     <shCardHeader>
                         <shCardTitle>Password</shCardTitle>
@@ -79,8 +79,8 @@ import { ShTabsModule } from '@radix-ng/shadcn/tabs';
                         <button shButton>Save password</button>
                     </shCardFooter>
                 </shCard>
-            </div>
-        </div>
+            </sh-tabs-content>
+        </sh-tabs>
     `
 })
 export class TabsExampleComponent {}
diff --git a/packages/shadcn/tabs/index.ts b/packages/shadcn/tabs/index.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import {
-    ShTabsContentDirective,
+    ShTabsContentComponent,
     ShTabsDirective,
     ShTabsListDirective,
     ShTabsTriggerDirective
@@ -10,7 +10,7 @@ export * from './src/tabs.directive';
 
 const tabsImports = [
     ShTabsDirective,
-    ShTabsContentDirective,
+    ShTabsContentComponent,
     ShTabsTriggerDirective,
     ShTabsListDirective
 ];

diff --git a/packages/shadcn/tabs/src/tabs.directive.ts b/packages/shadcn/tabs/src/tabs.directive.ts
@@ -1,4 +1,4 @@
-import { computed, Directive, Input, input } from '@angular/core';
+import { Component, computed, Directive, Input, input } from '@angular/core';
 import {
     RdxTabsContentDirective,
     RdxTabsListDirective,
@@ -10,7 +10,7 @@ import { cva } from 'class-variance-authority';
 
 // TabsPrimitive.Root
 @Directive({
-    selector: '[shTabs]',
+    selector: 'sh-tabs,[shTabs]',
     standalone: true,
     hostDirectives: [{ directive: RdxTabsRootDirective, inputs: ['defaultValue: shDefaultValue'] }]
 })
@@ -23,7 +23,7 @@ const tabsListVariants = cva(
     'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground'
 );
 @Directive({
-    selector: '[shTabsList]',
+    selector: 'sh-tabs-list,[shTabsList]',
     standalone: true,
     hostDirectives: [RdxTabsListDirective],
     host: {
@@ -56,17 +56,18 @@ export class ShTabsTriggerDirective {
 const tabsContentVariants = cva(
     'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
 );
-@Directive({
-    selector: '[shTabsContent]',
-    standalone: true,
-    hostDirectives: [{ directive: RdxTabsContentDirective, inputs: ['value: shValue'] }],
-    host: {
-        '[class]': 'computedClass()'
-    }
+@Component({
+    selector: 'sh-tabs-content,[shTabsContent]',
+    imports: [RdxTabsContentDirective],
+    template: `
+        <div [class]="computedClass()" [value]="shValue()" rdxTabsContent>
+            <ng-content />
+        </div>
+    `
 })
-export class ShTabsContentDirective {
+export class ShTabsContentComponent {
     readonly shValue = input.required<string>();
 
-    readonly class = input<string>();
-    protected computedClass = computed(() => cn(tabsContentVariants(), this.class()));
+    readonly classContent = input<string>();
+    protected computedClass = computed(() => cn(tabsContentVariants(), this.classContent()));
 }