feat(addon-table): fix for Cell and Title

taiga-family · Jul 11, 2024 · 035096a · 035096a
1 parent 6e8450d
commit 035096a
Show file tree

Hide file tree

Showing 9 changed files with 334 additions and 191 deletions.
diff --git a/projects/addon-table/components/table/directives/table.directive.ts b/projects/addon-table/components/table/directives/table.directive.ts
@@ -1,23 +1,37 @@
 import {
     AfterViewInit,
+    ChangeDetectionStrategy,
     ChangeDetectorRef,
+    Component,
     Directive,
     EventEmitter,
     HostBinding,
     Inject,
     Input,
     Output,
+    ViewEncapsulation,
 } from '@angular/core';
 import {IntersectionObserverService} from '@ng-web-apis/intersection-observer';
 import {TuiComparator} from '@taiga-ui/addon-table/types';
-import {AbstractTuiController} from '@taiga-ui/cdk';
+import {AbstractTuiController, TuiDirectiveStylesService} from '@taiga-ui/cdk';
 import {TUI_MODE, TuiBrightness} from '@taiga-ui/core';
 import {Observable} from 'rxjs';
 
 import {TUI_STUCK} from '../providers/stuck.provider';
 import {TUI_TABLE_PROVIDERS} from '../providers/table.providers';
 import {TUI_TABLE_OPTIONS, TuiTableOptions} from '../table.options';
 
+@Component({
+    template: '',
+    styleUrls: ['./table.style.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'tui-table',
+    },
+})
+class TuiTableStylesComponent {}
+
 @Directive({
     selector: 'table[tuiTable]',
     providers: TUI_TABLE_PROVIDERS,
@@ -54,8 +68,10 @@ export class TuiTableDirective<T extends Partial<Record<keyof T, any>>>
         @Inject(TUI_STUCK) readonly stuck$: Observable<boolean>,
         @Inject(TUI_TABLE_OPTIONS) private readonly options: TuiTableOptions,
         @Inject(ChangeDetectorRef) private readonly cdr: ChangeDetectorRef,
+        @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
     ) {
         super();
+        directiveStyles.addComponent(TuiTableStylesComponent);
     }
 
     @Input()

diff --git a/projects/addon-table/components/table/directives/table.style.less b/projects/addon-table/components/table/directives/table.style.less
@@ -0,0 +1,23 @@
+table[tuiTable] {
+    [tuiCell] {
+        padding: 0;
+    }
+
+    [tuiTitle] {
+        white-space: nowrap;
+
+        tui-icon {
+            font-size: 1rem;
+        }
+    }
+
+    [tuiSubtitle] {
+        color: var(--tui-text-02);
+    }
+
+    [tuiTh] [tuiCell],
+    [tuiTh] [tuiTitle] {
+        font: inherit;
+        color: inherit;
+    }
+}
diff --git a/projects/addon-table/components/table/td/td.component.ts b/projects/addon-table/components/table/td/td.component.ts
@@ -1,10 +1,5 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ContentChild,
-    HostBinding,
-} from '@angular/core';
-import {NgControl} from '@angular/forms';
+import {ChangeDetectionStrategy, Component, ContentChild} from '@angular/core';
+import {AbstractTuiControl, TuiControlDirective} from '@taiga-ui/cdk';
 
 @Component({
     selector: 'th[tuiTd], td[tuiTd]',
@@ -13,9 +8,14 @@ import {NgControl} from '@angular/forms';
     `,
     styleUrls: ['./td.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        '[class._editable]': 'current || legacy',
+    },
 })
 export class TuiTdComponent {
-    @HostBinding('class._editable')
-    @ContentChild(NgControl)
-    readonly control: unknown;
+    @ContentChild(TuiControlDirective)
+    protected readonly current: unknown;
+
+    @ContentChild(AbstractTuiControl)
+    protected readonly legacy: unknown;
 }
diff --git a/projects/addon-table/components/table/td/td.style.less b/projects/addon-table/components/table/td/td.style.less
@@ -2,20 +2,22 @@
 
 :host {
     position: relative;
-    height: var(--tui-height-m);
-    font: var(--tui-font-text-s);
     text-align: left;
-    padding: 0 0.75rem;
     background: var(--tui-base-01);
     border: 1px solid var(--tui-base-04);
     border-top: none;
     box-sizing: border-box;
     // Create new viewport for fixed positioning
     filter: opacity(1);
+
     .safari-only({
         transform: translate3d(0, 0, 0);
     });
 
+    &._editable {
+        padding: 0 !important;
+    }
+
     &:first-child {
         left: 0;
     }
@@ -71,13 +73,19 @@
 :host-context(table[data-size='l']) {
     font: var(--tui-font-text-m);
     height: var(--tui-height-l);
-    // Don't affect vertical padding for easier override
-    padding-left: 1rem;
-    padding-right: 1rem;
+    padding: 1rem;
+}
 
-    &._editable {
-        padding: 0;
-    }
+:host-context(table[data-size='m']) {
+    height: var(--tui-height-m);
+    font: var(--tui-font-text-s);
+    padding: 0.75rem;
+}
+
+:host-context(table[data-size='s']) {
+    height: var(--tui-height-s);
+    font: var(--tui-font-text-s);
+    padding: 0.25rem 0.5rem;
 }
 
 :host(td) {

diff --git a/projects/addon-table/components/table/th/th.style.less b/projects/addon-table/components/table/th/th.style.less
@@ -17,6 +17,7 @@
     border: 1px solid var(--tui-base-04);
     // Create new viewport for fixed positioning
     filter: opacity(1);
+
     .safari-only({
         transform: translate3d(0, 0, 0);
     });
@@ -64,6 +65,13 @@
     padding: 0 1rem;
 }
 
+:host-context(table[data-size='s']) {
+    height: var(--tui-height-s);
+    font: var(--tui-font-text-s);
+    font-weight: bold;
+    padding: 0 0.5rem;
+}
+
 :host-context(thead[tuiThead]) {
     position: sticky;
 }