diff --git a/packages/components-dev/table/module.ts b/packages/components-dev/table/module.ts index c30a2d95ca..cf0925fb4f 100644 --- a/packages/components-dev/table/module.ts +++ b/packages/components-dev/table/module.ts @@ -2,10 +2,22 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/ import { KbqButtonModule } from '@koobiq/components/button'; import { KbqComponentColors } from '@koobiq/components/core'; import { KbqTableModule } from '@koobiq/components/table'; +import { TableDisableHoverExample } from 'packages/docs-examples/components/table'; + +@Component({ + selector: 'dev-examples', + imports: [TableDisableHoverExample], + template: ` + +
+ `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DevDocsExamples {} @Component({ selector: 'dev-app', - imports: [KbqTableModule, KbqButtonModule], + imports: [KbqTableModule, KbqButtonModule, DevDocsExamples], templateUrl: './template.html', styleUrls: ['./styles.scss'], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/packages/components-dev/table/template.html b/packages/components-dev/table/template.html index ec38b8dd09..fbb10bc2b5 100644 --- a/packages/components-dev/table/template.html +++ b/packages/components-dev/table/template.html @@ -1,3 +1,5 @@ + +
default
diff --git a/packages/components/table/__screenshots__/01-dark.png b/packages/components/table/__screenshots__/01-dark.png index 3622743d4b..e1669e88cf 100644 Binary files a/packages/components/table/__screenshots__/01-dark.png and b/packages/components/table/__screenshots__/01-dark.png differ diff --git a/packages/components/table/__screenshots__/01-light.png b/packages/components/table/__screenshots__/01-light.png index 0f9216731c..3fd4b6ca93 100644 Binary files a/packages/components/table/__screenshots__/01-light.png and b/packages/components/table/__screenshots__/01-light.png differ diff --git a/packages/components/table/_table-theme.scss b/packages/components/table/_table-theme.scss index b495bbcda7..c2654f9bbd 100644 --- a/packages/components/table/_table-theme.scss +++ b/packages/components/table/_table-theme.scss @@ -16,7 +16,11 @@ & > td { color: var(--kbq-foreground-contrast); } + } + } + &:not(.kbq-table_disable-hover) > tbody { + & > tr { &.kbq-hovered td, &:hover td { background-color: var(--kbq-states-background-transparent-hover); diff --git a/packages/components/table/e2e.ts b/packages/components/table/e2e.ts index 868ffb5d99..acdc1a6ddb 100644 --- a/packages/components/table/e2e.ts +++ b/packages/components/table/e2e.ts @@ -136,6 +136,28 @@ import { KbqTableModule } from '@koobiq/components/table';
+ + +
+ + + + @for (th of [0, 1, 2, 3]; track $index) { + + } + + + + @for (tr of [0, 1]; track $index) { + + @for (td of [0, 1, 2, 3]; track $index) { + + } + + } + +
Header
Cell
+
`, styles: ` :host { diff --git a/packages/components/table/table.component.ts b/packages/components/table/table.component.ts index dcbeebc165..8d3f9aaa9c 100644 --- a/packages/components/table/table.component.ts +++ b/packages/components/table/table.component.ts @@ -1,4 +1,12 @@ -import { ChangeDetectionStrategy, Component, Directive, ViewEncapsulation, contentChild, input } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Directive, + ViewEncapsulation, + booleanAttribute, + contentChild, + input +} from '@angular/core'; import { KbqButton } from '@koobiq/components/button'; @Component({ @@ -9,12 +17,14 @@ import { KbqButton } from '@koobiq/components/button'; encapsulation: ViewEncapsulation.None, host: { class: 'kbq-table', - '[class.kbq-table_bordered]': 'border()' + '[class.kbq-table_bordered]': 'border()', + '[class.kbq-table_disable-hover]': 'disableHover()' }, exportAs: 'kbqTable' }) export class KbqTable { - readonly border = input(false); + readonly border = input(false, { transform: booleanAttribute }); + readonly disableHover = input(false, { transform: booleanAttribute }); } @Directive({ diff --git a/packages/components/table/table.en.md b/packages/components/table/table.en.md index bc3fe18d0c..5322caaaf1 100644 --- a/packages/components/table/table.en.md +++ b/packages/components/table/table.en.md @@ -13,3 +13,9 @@ In most cases, borders should be avoided, but sometimes they help support the la Borders are also useful in tables with complex structures — for example, when rows are grouped or some cells are merged vertically. + +### Disable hover + +Use `disableHover` to remove the background color change on row hover. This is useful when rows are not interactive and the hover highlight would be misleading. + + diff --git a/packages/components/table/table.ru.md b/packages/components/table/table.ru.md index 34e6b871d6..2df8528cae 100644 --- a/packages/components/table/table.ru.md +++ b/packages/components/table/table.ru.md @@ -13,3 +13,9 @@ Также линейки полезны в таблицах со сложной структурой. Например, когда строки собраны в группы или некоторые ячейки объединены по вертикали. + +### Отключение подсветки при наведении + +Если строки не являются интерактивными, подсветка при наведении может вводить в заблуждение. Атрибут `disableHover` позволяет убрать этот эффект. + + diff --git a/packages/docs-examples/components/table/index.ts b/packages/docs-examples/components/table/index.ts index b9d779d7ae..b6c5a87bda 100644 --- a/packages/docs-examples/components/table/index.ts +++ b/packages/docs-examples/components/table/index.ts @@ -1,14 +1,16 @@ import { NgModule } from '@angular/core'; +import { TableDisableHoverExample } from './table-disable-hover/table-disable-hover-example'; import { TableFullWidthExample } from './table-full-width/table-full-width-example'; import { TableOverviewExample } from './table-overview/table-overview-example'; import { TableWithBordersExample } from './table-with-borders/table-with-borders-example'; -export { TableFullWidthExample, TableOverviewExample, TableWithBordersExample }; +export { TableDisableHoverExample, TableFullWidthExample, TableOverviewExample, TableWithBordersExample }; const EXAMPLES = [ TableOverviewExample, TableWithBordersExample, - TableFullWidthExample + TableFullWidthExample, + TableDisableHoverExample ]; @NgModule({ diff --git a/packages/docs-examples/components/table/table-disable-hover/table-disable-hover-example.ts b/packages/docs-examples/components/table/table-disable-hover/table-disable-hover-example.ts new file mode 100644 index 0000000000..f3bddd81ac --- /dev/null +++ b/packages/docs-examples/components/table/table-disable-hover/table-disable-hover-example.ts @@ -0,0 +1,39 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { KbqTableModule } from '@koobiq/components/table'; + +/** + * @title Table without hover + */ +@Component({ + selector: 'table-disable-hover-example', + imports: [KbqTableModule], + template: ` + + + + + + + + + + @for (row of rows; track row.name) { + + + + + + } + +
FileOwnerModified
{{ row.name }}{{ row.owner }}{{ row.modified }}
+ `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class TableDisableHoverExample { + protected readonly rows = [ + { name: 'document.txt', owner: 'User 1', modified: '27 мая 2024' }, + { name: 'report-2023.pdf', owner: 'User 2', modified: '1 дек 2023' }, + { name: 'notes.doc', owner: 'User 3', modified: '7 мар 2024' }, + { name: 'archive.zip', owner: 'User 4', modified: '24 авг 2022' } + ]; +} diff --git a/tools/public_api_guard/components/table.api.md b/tools/public_api_guard/components/table.api.md index 9c9fb2c79f..f14fc8a45b 100644 --- a/tools/public_api_guard/components/table.api.md +++ b/tools/public_api_guard/components/table.api.md @@ -12,9 +12,11 @@ import { KbqButton } from '@koobiq/components/button'; // @public (undocumented) export class KbqTable { // (undocumented) - readonly border: i0.InputSignal; + readonly border: i0.InputSignalWithTransform; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + readonly disableHover: i0.InputSignalWithTransform; + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; }