From 6cba52c140bc182cb8014809116356fb49c3c6e2 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Tue, 20 Aug 2024 19:08:58 +0400 Subject: [PATCH] feat(kit): `ButtonSelect` add new directive (#8559) Co-authored-by: taiga-family-bot --- .../table/caption/caption.component.ts | 11 +++++ .../table/caption/caption.style.less | 16 +++++++ .../table/directives/table.directive.ts | 2 + .../addon-table/components/table/index.ts | 1 + .../addon-table/components/table/table.ts | 2 + .../components/table/tbody/tbody.component.ts | 5 -- .../components/table/examples/7/index.html | 38 +++++++++++++++ .../components/table/examples/7/index.less | 0 .../components/table/examples/7/index.ts | 48 +++++++++++++++++++ .../src/modules/components/table/index.ts | 1 + .../pagination/pagination.component.ts | 2 +- .../pagination/pagination.style.less | 16 ++++++- .../pagination/pagination.template.html | 1 + .../button-select/button-select.directive.ts | 35 ++++++++++++++ .../kit/directives/button-select/index.ts | 1 + .../directives/button-select/ng-package.json | 5 ++ projects/kit/directives/index.ts | 1 + 17 files changed, 178 insertions(+), 7 deletions(-) create mode 100644 projects/addon-table/components/table/caption/caption.component.ts create mode 100644 projects/addon-table/components/table/caption/caption.style.less create mode 100644 projects/demo/src/modules/components/table/examples/7/index.html create mode 100644 projects/demo/src/modules/components/table/examples/7/index.less create mode 100644 projects/demo/src/modules/components/table/examples/7/index.ts create mode 100644 projects/kit/directives/button-select/button-select.directive.ts create mode 100644 projects/kit/directives/button-select/index.ts create mode 100644 projects/kit/directives/button-select/ng-package.json diff --git a/projects/addon-table/components/table/caption/caption.component.ts b/projects/addon-table/components/table/caption/caption.component.ts new file mode 100644 index 000000000000..7aeb8944cb3d --- /dev/null +++ b/projects/addon-table/components/table/caption/caption.component.ts @@ -0,0 +1,11 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + standalone: true, + selector: 'caption[tuiCaption]', + template: '', + styleUrls: ['./caption.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TuiTableCaption {} diff --git a/projects/addon-table/components/table/caption/caption.style.less b/projects/addon-table/components/table/caption/caption.style.less new file mode 100644 index 000000000000..e294dcb40e33 --- /dev/null +++ b/projects/addon-table/components/table/caption/caption.style.less @@ -0,0 +1,16 @@ +caption[tuiCaption] { + caption-side: bottom; + text-align: left; + padding: 0.75rem 0; + color: var(--tui-text-secondary); + + > *:not(:first-child) { + margin-inline-start: 0.5rem; + } + + tui-pagination:not(:first-child), + tui-pager:not(:first-child) { + display: inline-flex; + vertical-align: middle; + } +} diff --git a/projects/addon-table/components/table/directives/table.directive.ts b/projects/addon-table/components/table/directives/table.directive.ts index fdfbd0155156..6cb72579bf88 100644 --- a/projects/addon-table/components/table/directives/table.directive.ts +++ b/projects/addon-table/components/table/directives/table.directive.ts @@ -14,6 +14,7 @@ import { import {WA_INTERSECTION_ROOT_MARGIN} from '@ng-web-apis/intersection-observer'; import type {TuiComparator} from '@taiga-ui/addon-table/types'; import {tuiProvide, tuiWithStyles} from '@taiga-ui/cdk/utils/miscellaneous'; +import {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button'; import type {TuiTextfieldOptions} from '@taiga-ui/core/components/textfield'; import {TUI_TEXTFIELD_OPTIONS} from '@taiga-ui/core/components/textfield'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; @@ -46,6 +47,7 @@ class TuiTableStyles {} useValue: '10000px 10000px 10000px 0px', }, tuiProvide(TUI_TEXTFIELD_OPTIONS, TuiTableDirective), + tuiButtonOptionsProvider({size: 's'}), tuiBadgeOptionsProvider({size: 'm', appearance: 'neutral'}), tuiChipOptionsProvider({size: 'xxs', appearance: 'neutral'}), tuiProgressOptionsProvider({size: 's', color: 'var(--tui-text-action)'}), diff --git a/projects/addon-table/components/table/index.ts b/projects/addon-table/components/table/index.ts index 132a418b4af7..02bf6a365587 100644 --- a/projects/addon-table/components/table/index.ts +++ b/projects/addon-table/components/table/index.ts @@ -1,3 +1,4 @@ +export * from './caption/caption.component'; export * from './directives/cell.directive'; export * from './directives/direction-order.directive'; export * from './directives/head.directive'; diff --git a/projects/addon-table/components/table/table.ts b/projects/addon-table/components/table/table.ts index 01f87b48e888..c4ab0667f5fd 100644 --- a/projects/addon-table/components/table/table.ts +++ b/projects/addon-table/components/table/table.ts @@ -1,3 +1,4 @@ +import {TuiTableCaption} from './caption/caption.component'; import {TuiTableCell} from './directives/cell.directive'; import {TuiTableDirectionOrder} from './directives/direction-order.directive'; import {TuiTableHead} from './directives/head.directive'; @@ -15,6 +16,7 @@ import {TuiTableTr} from './tr/tr.component'; export const TuiTable = [ TuiTableDirective, + TuiTableCaption, TuiTableTbody, TuiTableThGroup, TuiTableTh, diff --git a/projects/addon-table/components/table/tbody/tbody.component.ts b/projects/addon-table/components/table/tbody/tbody.component.ts index 6bd3bf67dce1..60a0520743e4 100644 --- a/projects/addon-table/components/table/tbody/tbody.component.ts +++ b/projects/addon-table/components/table/tbody/tbody.component.ts @@ -53,11 +53,6 @@ export class TuiTableTbody>> { @Output() public readonly openChange = new EventEmitter(); - protected readonly toContext = ( - $implicit: T, - index: number, - ): {$implicit: T; index: number} => ({$implicit, index}); - protected onClick(): void { this.open = !this.open; this.openChange.emit(this.open); diff --git a/projects/demo/src/modules/components/table/examples/7/index.html b/projects/demo/src/modules/components/table/examples/7/index.html new file mode 100644 index 000000000000..fb886a81557a --- /dev/null +++ b/projects/demo/src/modules/components/table/examples/7/index.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + +
+ 999 rows + + +
NameBalance
{{ item.name }}{{ item.balance | tuiFormatNumber | async }}
diff --git a/projects/demo/src/modules/components/table/examples/7/index.less b/projects/demo/src/modules/components/table/examples/7/index.less new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/projects/demo/src/modules/components/table/examples/7/index.ts b/projects/demo/src/modules/components/table/examples/7/index.ts new file mode 100644 index 000000000000..669c759fcad1 --- /dev/null +++ b/projects/demo/src/modules/components/table/examples/7/index.ts @@ -0,0 +1,48 @@ +import {AsyncPipe, NgForOf} from '@angular/common'; +import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiTable} from '@taiga-ui/addon-table'; +import type {TuiContext, TuiStringHandler} from '@taiga-ui/cdk'; +import {TuiButton, TuiFormatNumberPipe, TuiTextfield} from '@taiga-ui/core'; +import {TuiButtonSelect, TuiDataListWrapper, TuiPagination} from '@taiga-ui/kit'; + +@Component({ + standalone: true, + imports: [ + NgForOf, + AsyncPipe, + FormsModule, + TuiTable, + TuiFormatNumberPipe, + TuiButton, + TuiButtonSelect, + TuiPagination, + TuiDataListWrapper, + TuiTextfield, + ], + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export default class Example { + protected readonly data = [ + { + name: 'Alex Inkin', + balance: 1323525, + }, + { + name: 'Roman Sedov', + balance: 423242, + }, + ] as const; + + protected index = 4; + protected length = 10; + protected size = 10; + protected readonly items = [10, 50, 100]; + protected readonly content: TuiStringHandler> = ({$implicit}) => + `${$implicit} items per page`; +} diff --git a/projects/demo/src/modules/components/table/index.ts b/projects/demo/src/modules/components/table/index.ts index ecb44bcef048..266fc2477733 100644 --- a/projects/demo/src/modules/components/table/index.ts +++ b/projects/demo/src/modules/components/table/index.ts @@ -18,5 +18,6 @@ export default class Page { 'With tuiSortBy directive to work with column titles instead of sorters', 'Virtual scroll', 'Dynamic columns', + 'Footer', ]; } diff --git a/projects/kit/components/pagination/pagination.component.ts b/projects/kit/components/pagination/pagination.component.ts index d23c6f398d45..02b41820ec7c 100644 --- a/projects/kit/components/pagination/pagination.component.ts +++ b/projects/kit/components/pagination/pagination.component.ts @@ -267,7 +267,7 @@ export class TuiPagination { private tryChangeTo(direction: TuiHorizontalDirection): void { this.updateIndex( - tuiClamp(this.index + (direction === 'right' ? -1 : 1), 0, this.lastIndex), + tuiClamp(this.index + (direction === 'right' ? 1 : -1), 0, this.lastIndex), ); } diff --git a/projects/kit/components/pagination/pagination.style.less b/projects/kit/components/pagination/pagination.style.less index 0f00c6d8febb..c68d4bc481ec 100644 --- a/projects/kit/components/pagination/pagination.style.less +++ b/projects/kit/components/pagination/pagination.style.less @@ -17,6 +17,14 @@ margin: 0 0.125rem; flex-shrink: 0; + &:first-child { + margin-inline-start: 0; + } + + &:last-child { + margin-inline-end: 0; + } + &[data-size='xs'] { width: var(--tui-height-xs); } @@ -40,10 +48,16 @@ line-height: var(--tui-height-s); margin: 0 0.125rem; flex-shrink: 0; - color: var(--tui-text-tertiary); + color: var(--tui-text-action); text-align: center; cursor: default; + &_small { + width: var(--tui-height-xs); + height: var(--tui-height-xs); + line-height: var(--tui-height-xs); + } + &::before { content: '\2026'; } diff --git a/projects/kit/components/pagination/pagination.template.html b/projects/kit/components/pagination/pagination.template.html index e4082f9e10ed..121a01322a50 100644 --- a/projects/kit/components/pagination/pagination.template.html +++ b/projects/kit/components/pagination/pagination.template.html @@ -73,6 +73,7 @@
diff --git a/projects/kit/directives/button-select/button-select.directive.ts b/projects/kit/directives/button-select/button-select.directive.ts new file mode 100644 index 000000000000..5cd487d355cb --- /dev/null +++ b/projects/kit/directives/button-select/button-select.directive.ts @@ -0,0 +1,35 @@ +import {Directive} from '@angular/core'; +import {TuiControl} from '@taiga-ui/cdk/classes'; +import {tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous'; +import { + TUI_DATA_LIST_HOST, + type TuiDataListHost, +} from '@taiga-ui/core/components/data-list'; +import {TuiWithTextfieldDropdown} from '@taiga-ui/core/components/textfield'; +import { + TuiDropdownDirective, + tuiDropdownOpen, + tuiDropdownOptionsProvider, + TuiWithDropdownOpen, +} from '@taiga-ui/core/directives/dropdown'; + +@Directive({ + standalone: true, + selector: 'button[tuiButtonSelect]', + providers: [ + // TODO: Add checkmark once we properly implement new Select, then add to demo + tuiProvide(TUI_DATA_LIST_HOST, TuiButtonSelect), + tuiDropdownOptionsProvider({align: 'right'}), + ], + hostDirectives: [TuiDropdownDirective, TuiWithDropdownOpen, TuiWithTextfieldDropdown], +}) +export class TuiButtonSelect extends TuiControl implements TuiDataListHost { + private readonly open = tuiDropdownOpen(); + + public readonly size = 's'; + + public handleOption(option: T): void { + this.onChange(option); + this.open.set(false); + } +} diff --git a/projects/kit/directives/button-select/index.ts b/projects/kit/directives/button-select/index.ts new file mode 100644 index 000000000000..8287da42cd7a --- /dev/null +++ b/projects/kit/directives/button-select/index.ts @@ -0,0 +1 @@ +export * from './button-select.directive'; diff --git a/projects/kit/directives/button-select/ng-package.json b/projects/kit/directives/button-select/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/kit/directives/button-select/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/kit/directives/index.ts b/projects/kit/directives/index.ts index 563b3464ac9f..4f52b9b475f6 100644 --- a/projects/kit/directives/index.ts +++ b/projects/kit/directives/index.ts @@ -1,5 +1,6 @@ export * from '@taiga-ui/kit/directives/button-close'; export * from '@taiga-ui/kit/directives/button-group'; +export * from '@taiga-ui/kit/directives/button-select'; export * from '@taiga-ui/kit/directives/chevron'; export * from '@taiga-ui/kit/directives/connected'; export * from '@taiga-ui/kit/directives/data-list-dropdown-manager';