table

1import { computed, Directive, input } from '@angular/core'
2 
3import { cn } from '~/lib/utils'
4 
5@Directive({
6  selector: 'table[ubTable]',
7  standalone: true,
8  host: {
9    '[class]': 'computedClass()',
10  },
11})
12export class UbTableDirective {
13  readonly class = input<string>('')
14  protected computedClass = computed(() =>
15    cn('w-full caption-bottom text-sm', this.class()),
16  )
17}
18 
19@Directive({
20  selector: 'thead[ubTableHeader]',
21  standalone: true,
22  host: {
23    '[class]': 'computedClass()',
24  },
25})
26export class UbTableHeaderDirective {
27  readonly class = input<string>('')
28  protected computedClass = computed(() => cn('[&_tr]:border-b', this.class()))
29}
30 
31@Directive({
32  selector: 'tbody[ubTableBody]',
33  standalone: true,
34  host: {
35    '[class]': 'computedClass()',
36  },
37})
38export class UbTableBodyDirective {
39  readonly class = input<string>('')
40  protected computedClass = computed(() =>
41    cn('[&_tr:last-child]:border-0', this.class()),
42  )
43}
44 
45@Directive({
46  selector: 'tfoot[ubTableFooter]',
47  standalone: true,
48  host: {
49    '[class]': 'computedClass()',
50  },
51})
52export class UbTableFooterDirective {
53  readonly class = input<string>('')
54  protected computedClass = computed(() =>
55    cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', this.class()),
56  )
57}
58 
59@Directive({
60  selector: 'tr[ubTableRow]',
61  standalone: true,
62  host: {
63    '[class]': 'computedClass()',
64  },
65})
66export class UbTableRowDirective {
67  readonly class = input<string>('')
68  protected computedClass = computed(() =>
69    cn(
70      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
71      this.class(),
72    ),
73  )
74}
75 
76@Directive({
77  selector: 'th[ubTableHead]',
78  standalone: true,
79  host: {
80    '[class]': 'computedClass()',
81  },
82})
83export class UbTableHeadDirective {
84  readonly class = input<string>('')
85  protected computedClass = computed(() =>
86    cn(
87      'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
88      this.class(),
89    ),
90  )
91}
92 
93@Directive({
94  selector: 'td[ubTableCell]',
95  standalone: true,
96  host: {
97    '[class]': 'computedClass()',
98  },
99})
100export class UbTableCellDirective {
101  readonly class = input<string>('')
102  protected computedClass = computed(() =>
103    cn(
104      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
105      this.class(),
106    ),
107  )
108}
109 
110@Directive({
111  selector: 'caption[ubTableCaption]',
112  standalone: true,
113// … truncated