tabs

1import type { BooleanInput } from '@angular/cdk/coercion'
2 
3import { booleanAttribute, computed, Directive, input } from '@angular/core'
4import {
5  RdxTabsContentDirective,
6  RdxTabsListDirective,
7  RdxTabsRootDirective,
8  RdxTabsTriggerDirective,
9} from '@radix-ng/primitives/tabs'
10import { cn } from '~/lib/utils'
11 
12@Directive({
13  selector: '[ubTabs]',
14  standalone: true,
15  hostDirectives: [
16    {
17      directive: RdxTabsRootDirective,
18      inputs: ['defaultValue: defaultValue'],
19    },
20  ],
21})
22export class UbTabsDirective {
23  defaultValue = input<string>()
24}
25 
26@Directive({
27  selector: '[ubTabsList]',
28  standalone: true,
29  hostDirectives: [RdxTabsListDirective],
30  host: {
31    '[class]': 'computedClass()',
32  },
33})
34export class UbTabsListDirective {
35  readonly class = input<string>()
36  protected computedClass = computed(() =>
37    cn(
38      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
39      this.class(),
40    ),
41  )
42}
43 
44@Directive({
45  selector: '[ubTabsTrigger]',
46  standalone: true,
47  hostDirectives: [
48    { directive: RdxTabsTriggerDirective, inputs: ['value: value', 'disabled: disabled'] },
49  ],
50  host: {
51    '[class]': 'computedClass()',
52  },
53})
54export class UbTabsTriggerDirective {
55  readonly value = input.required<string>()
56  readonly disabled = input<boolean, BooleanInput>(false, {
57    transform: booleanAttribute,
58  })
59 
60  readonly class = input<string>()
61  protected computedClass = computed(() =>
62    cn(
63      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
64      this.class(),
65    ),
66  )
67}
68 
69@Directive({
70  selector: '[ubTabsContent]',
71  standalone: true,
72  hostDirectives: [
73    { directive: RdxTabsContentDirective, inputs: ['value: value'] },
74  ],
75  host: {
76    '[class]': 'computedClass()',
77  },
78})
79export class UbTabsContentDirective {
80  readonly value = input.required<string>()
81 
82  readonly class = input<string>()
83  protected computedClass = computed(() =>
84    cn(
85      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
86      this.class(),
87    ),
88  )
89}