Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/9721 migrate tui table classes #10027

Closed
wants to merge 3 commits into from
Closed

Feature/9721 migrate tui table classes #10027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f9693bb
fix(demo): migrate tui-table classes in dropdown context
shiv9604 Dec 18, 2024
ab14e52
fix(demo): migrate tui-table classes from browser-support
shiv9604 Dec 18, 2024
143e782
fix(demo): migrate tui-table classes from filter pipe
shiv9604 Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions projects/demo/src/modules/directives/dropdown-context/examples/2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
<p>Right-click any table row.</p>

<table class="tui-table">
<tbody>
<tr class="tui-table__tr tui-table__tr_hover_disabled">
<table tuiTable>
<thead tuiTHead>
<tr tuiThGroup>
<th
*ngFor="let column of tableColumns"
class="tui-table__th"
tuiTh
>
{{ column }}
</th>
</tr>
</thead>
<tbody tuiTbody>
<tr
*ngFor="let rowInfo of tableData"
#dropdown="tuiDropdown"
tuiDropdownContext
class="tui-table__tr"
[tuiDropdown]="contextMenu"
>
<td
*ngFor="let value of getObjectValues(rowInfo)"
class="tui-table__td"
tuiTd
>
{{ value }}
</td>
Expand Down
16 changes: 16 additions & 0 deletions projects/demo/src/modules/directives/dropdown-context/examples/2/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
@import '@taiga-ui/core/styles/taiga-ui-local';

.context-menu {
inline-size: 8rem;
}

.icon {
border-width: 0.25rem;
}

[tuiTable] {
inline-size: 100%;
}

[tuiTh],
[tuiTd] {
border-inline-start: none;
border-inline-end: none;
}

[tuiTd] {
font: var(--tui-font-text-m) !important;
}
24 changes: 23 additions & 1 deletion projects/demo/src/modules/directives/dropdown-context/examples/2/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,34 @@ import {NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
TuiTable,
TuiTableHead,
TuiTableTbody,
TuiTableTd,
TuiTableTh,
TuiTableThGroup,
TuiTableTr,
} from '@taiga-ui/addon-table';
import {TuiDataList, TuiDialogService, TuiDropdown, TuiIcon} from '@taiga-ui/core';
import {TuiDataListDropdownManager} from '@taiga-ui/kit';

@Component({
standalone: true,
imports: [NgForOf, TuiDataList, TuiDataListDropdownManager, TuiDropdown, TuiIcon],
imports: [
NgForOf,
TuiDataList,
TuiDataListDropdownManager,
TuiDropdown,
TuiIcon,
TuiTable,
TuiTableHead,
TuiTableTbody,
TuiTableTd,
TuiTableTh,
TuiTableThGroup,
TuiTableTr,
],
templateUrl: './index.html',
styleUrls: ['./index.less'],
encapsulation,
Expand Down
42 changes: 20 additions & 22 deletions projects/demo/src/modules/info/browsers/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
<tui-doc-page header="Browser support">
<h2 class="tui-text_h4 tui-space_top-0 tui-space_bottom-3">Desktop</h2>
<table class="tui-table">
<tbody>
<tr class="tui-table__tr">
<th class="tui-table__th">Browser</th>
<th class="tui-table__th">Version</th>
<table tuiTable>
<thead tuiThead>
<tr tuiThGroup>
<th tuiTh>Browser</th>
<th tuiTh>Version</th>
</tr>
<tr
*ngFor="let browser of desktopBrowsers"
class="tui-table__tr"
>
<td class="tui-table__td">{{ browser.name }}</td>
<td class="tui-table__td">
</thead>
<tbody tuiTbody>
<tr *ngFor="let browser of desktopBrowsers">
<td tuiTd>{{ browser.name }}</td>
<td tuiTd>
<ng-container *ngIf="browser.version; else notSupported">
{{ browser.version }}
</ng-container>
Expand All @@ -20,18 +19,17 @@ <h2 class="tui-text_h4 tui-space_top-0 tui-space_bottom-3">Desktop</h2>
</tbody>
</table>
<h2 class="tui-text_h4 tui-space_top-6 tui-space_bottom-3">Mobile</h2>
<table class="tui-table">
<tbody>
<tr class="tui-table__tr">
<th class="tui-table__th">Browser</th>
<th class="tui-table__th">Version</th>
<table tuiTable>
<thead tuiThead>
<tr tuiThGroup>
<th tuiTh>Browser</th>
<th tuiTh>Version</th>
</tr>
<tr
*ngFor="let browser of mobileBrowsers"
class="tui-table__tr"
>
<td class="tui-table__td">{{ browser.name }}</td>
<td class="tui-table__td">{{ browser.version }}</td>
</thead>
<tbody tuiTbody>
<tr *ngFor="let browser of mobileBrowsers">
<td tuiTd>{{ browser.name }}</td>
<td tuiTd>{{ browser.version }}</td>
</tr>
</tbody>
</table>
Expand Down
19 changes: 19 additions & 0 deletions projects/demo/src/modules/info/browsers/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
@import '@taiga-ui/core/styles/taiga-ui-local';

[tuiTable] {
inline-size: 100%;
}

[tuiTh],
[tuiTd] {
border-inline-start: none;
border-inline-end: none;
}

[tuiTd] {
font: var(--tui-font-text-m) !important;
}

td {
inline-size: 18.75rem;
}
22 changes: 20 additions & 2 deletions projects/demo/src/modules/info/browsers/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,29 @@
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {TuiDemo} from '@demo/utils';
import {
TuiTable,
TuiTableHead,
TuiTableTbody,
TuiTableTd,
TuiTableTh,
TuiTableThGroup,
TuiTableTr,
} from '@taiga-ui/addon-table';

@Component({
standalone: true,
imports: [TuiDemo],
imports: [
TuiDemo,
TuiTable,
TuiTableHead,
TuiTableTbody,
TuiTableTd,
TuiTableTh,
TuiTableThGroup,
TuiTableTr,
],
templateUrl: './index.html',
styles: ['td {width: 18.75rem}'],
styleUrls: ['./index.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Page {
Expand Down
21 changes: 13 additions & 8 deletions projects/demo/src/modules/pipes/filter/examples/1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
<table class="tui-table table">
<thead>
<tr>
<th class="tui-table__th cell_name">Name</th>
<th class="tui-table__th cell_sum">Sum, $</th>
<table
tuiTable
[style.width.rem]="17"
>
<thead tuiThead>
<tr tuiThGroup>
<th tuiTh>Name</th>
<th tuiTh>Sum, $</th>
</tr>
</thead>
<tbody tuiTbody>
<tr *ngFor="let item of items | tuiFilter: matcher : 300">
<td class="tui-table__td cell_name">{{ item.name }}</td>
<td class="tui-table__td cell_sum">{{ item.price }}</td>
<td tuiTd>{{ item.name }}</td>
<td tuiTd>{{ item.price }}</td>
</tr>
</thead>
</tbody>
</table>
10 changes: 10 additions & 0 deletions projects/demo/src/modules/pipes/filter/examples/1/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@import '@taiga-ui/core/styles/taiga-ui-local';

[tuiTh],
[tuiTd] {
border: none;
}

[tuiTd] {
font: var(--tui-font-text-m) !important;
}
20 changes: 19 additions & 1 deletion projects/demo/src/modules/pipes/filter/examples/1/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
TuiTable,
TuiTableHead,
TuiTableTbody,
TuiTableTd,
TuiTableTh,
TuiTableThGroup,
} from '@taiga-ui/addon-table';
import {TuiFilterPipe} from '@taiga-ui/cdk';

export interface Item {
Expand All @@ -9,10 +17,20 @@
readonly price: number;
}

@Component({

Check failure on line 20 in projects/demo/src/modules/pipes/filter/examples/1/index.ts

View workflow job for this annotation

GitHub Actions / Lint 

Order in imports should be [NgForOf, TuiFilterPipe, TuiTable, TuiTableHead, TuiTableTbody, TuiTableTd, TuiTableTh, TuiTableThGroup]
standalone: true,
imports: [NgForOf, TuiFilterPipe],
imports: [
NgForOf,
TuiFilterPipe,
TuiTable,
TuiTableHead,
TuiTableThGroup,
TuiTableTh,
TuiTableTbody,
TuiTableTd,
],
templateUrl: './index.html',
styleUrls: ['./index.less'],
encapsulation,
changeDetection,
})
Expand Down
Loading