From cc6384a4643856f9991c787806e7e37500a2e650 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Tue, 26 Mar 2024 18:37:15 +0800 Subject: [PATCH] feat(kit): `AvatarOutline` add new directive (#7087) --- .../example/example-get-tabs.pipe.ts | 2 +- .../tests/core/error/error.spec.ts | 2 +- .../tests/core/textarea/textarea.spec.ts | 2 +- .../page-objects/documentation-api-page.po.ts | 5 +- .../components/avatar/examples/4/index.less | 0 .../components/avatar/examples/5/index.less | 0 .../components/avatar/examples/6/index.ts | 7 +- .../components/avatar/examples/7/index.html | 23 ++++++ .../components/avatar/examples/7/index.less | 4 + .../components/avatar/examples/7/index.ts | 14 ++++ .../examples/import/{module.md => import.md} | 0 .../src/modules/components/avatar/index.html | 81 ++----------------- .../src/modules/components/avatar/index.ts | 24 +++--- .../kit/components/avatar-labeled/index.ts | 1 - .../components/avatar-labeled/ng-package.json | 5 -- projects/kit/components/avatar-stack/index.ts | 1 - .../components/avatar-stack/ng-package.json | 5 -- .../avatar-labeled.component.ts | 0 .../avatar-labeled.styles.less | 0 .../avatar/avatar-outline.component.ts | 13 +++ .../avatar/avatar-outline.directive.ts | 25 ++++++ .../avatar/avatar-outline.styles.less | 37 +++++++++ .../avatar-stack.component.ts | 0 .../avatar-stack.style.less | 0 projects/kit/components/avatar/index.ts | 4 + projects/kit/components/index.ts | 2 - 26 files changed, 146 insertions(+), 111 deletions(-) create mode 100644 projects/demo/src/modules/components/avatar/examples/4/index.less create mode 100644 projects/demo/src/modules/components/avatar/examples/5/index.less create mode 100644 projects/demo/src/modules/components/avatar/examples/7/index.html create mode 100644 projects/demo/src/modules/components/avatar/examples/7/index.less create mode 100644 projects/demo/src/modules/components/avatar/examples/7/index.ts rename projects/demo/src/modules/components/avatar/examples/import/{module.md => import.md} (100%) delete mode 100644 projects/kit/components/avatar-labeled/index.ts delete mode 100644 projects/kit/components/avatar-labeled/ng-package.json delete mode 100644 projects/kit/components/avatar-stack/index.ts delete mode 100644 projects/kit/components/avatar-stack/ng-package.json rename projects/kit/components/{avatar-labeled => avatar}/avatar-labeled.component.ts (100%) rename projects/kit/components/{avatar-labeled => avatar}/avatar-labeled.styles.less (100%) create mode 100644 projects/kit/components/avatar/avatar-outline.component.ts create mode 100644 projects/kit/components/avatar/avatar-outline.directive.ts create mode 100644 projects/kit/components/avatar/avatar-outline.styles.less rename projects/kit/components/{avatar-stack => avatar}/avatar-stack.component.ts (100%) rename projects/kit/components/{avatar-stack => avatar}/avatar-stack.style.less (100%) diff --git a/projects/addon-doc/components/example/example-get-tabs.pipe.ts b/projects/addon-doc/components/example/example-get-tabs.pipe.ts index 23e15bf5c471..2e3312fd644b 100644 --- a/projects/addon-doc/components/example/example-get-tabs.pipe.ts +++ b/projects/addon-doc/components/example/example-get-tabs.pipe.ts @@ -4,6 +4,6 @@ import {Pipe} from '@angular/core'; @Pipe({name: 'tuiDocExampleGetTabs'}) export class TuiDocExampleGetTabsPipe implements PipeTransform { public transform(content: Record, defaultTab: string): string[] { - return [defaultTab, ...Object.keys(content)]; + return [defaultTab, ...Object.keys(content).filter(tab => content[tab])]; } } diff --git a/projects/demo-playwright/tests/core/error/error.spec.ts b/projects/demo-playwright/tests/core/error/error.spec.ts index 1cfdb29dba4f..cfbe6209e519 100644 --- a/projects/demo-playwright/tests/core/error/error.spec.ts +++ b/projects/demo-playwright/tests/core/error/error.spec.ts @@ -6,7 +6,7 @@ test.describe('TuiError', () => { await tuiGoto(page, 'components/error#base'); const example = new TuiDocumentationPagePO(page).getExample('#base'); - const checkbox = example.locator('tui-toggle input[type="checkbox"]'); + const checkbox = example.locator('input[tuiSwitch]'); const error = example.locator('tui-error'); await expect(error).not.toBeVisible(); diff --git a/projects/demo-playwright/tests/core/textarea/textarea.spec.ts b/projects/demo-playwright/tests/core/textarea/textarea.spec.ts index 43027b681e55..3ad215e0928a 100644 --- a/projects/demo-playwright/tests/core/textarea/textarea.spec.ts +++ b/projects/demo-playwright/tests/core/textarea/textarea.spec.ts @@ -27,7 +27,7 @@ test.describe('Textarea', () => { await expect(textAreaComponent).toHaveScreenshot('textarea-line-break.png'); - await page.locator('.t-row tui-toggle').first().click(); + await page.locator('.t-row input[tuiSwitch]').first().click(); await expect(textAreaComponent).toHaveScreenshot( 'textarea-line-break-disabled.png', diff --git a/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts b/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts index d0d4f0419ca6..1936c68254a0 100644 --- a/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts +++ b/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts @@ -136,6 +136,9 @@ export class TuiDocumentationApiPagePO { } public async getToggle(row: Locator): Promise { - return ((await row.locator('.t-cell_value tui-toggle').all()) ?? [])?.[0] ?? null; + return ( + ((await row.locator('.t-cell_value input[tuiSwitch]').all()) ?? [])?.[0] ?? + null + ); } } diff --git a/projects/demo/src/modules/components/avatar/examples/4/index.less b/projects/demo/src/modules/components/avatar/examples/4/index.less new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/projects/demo/src/modules/components/avatar/examples/5/index.less b/projects/demo/src/modules/components/avatar/examples/5/index.less new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/projects/demo/src/modules/components/avatar/examples/6/index.ts b/projects/demo/src/modules/components/avatar/examples/6/index.ts index 344cfb92d24d..f26b1c4d2a89 100644 --- a/projects/demo/src/modules/components/avatar/examples/6/index.ts +++ b/projects/demo/src/modules/components/avatar/examples/6/index.ts @@ -3,11 +3,7 @@ import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; import {TuiFallbackSrcPipe} from '@taiga-ui/core'; -import { - TuiAvatarComponent, - TuiAvatarLabeledComponent, - TuiFadeDirective, -} from '@taiga-ui/kit'; +import {TuiAvatarComponent, TuiAvatarLabeledComponent} from '@taiga-ui/kit'; @Component({ standalone: true, @@ -16,7 +12,6 @@ import { TuiFallbackSrcPipe, TuiAvatarLabeledComponent, TuiAvatarComponent, - TuiFadeDirective, ], templateUrl: './index.html', styleUrls: ['./index.less'], diff --git a/projects/demo/src/modules/components/avatar/examples/7/index.html b/projects/demo/src/modules/components/avatar/examples/7/index.html new file mode 100644 index 000000000000..d72112162993 --- /dev/null +++ b/projects/demo/src/modules/components/avatar/examples/7/index.html @@ -0,0 +1,23 @@ + + + + Alex Inkin + + + diff --git a/projects/demo/src/modules/components/avatar/examples/7/index.less b/projects/demo/src/modules/components/avatar/examples/7/index.less new file mode 100644 index 000000000000..e8c357f08e0d --- /dev/null +++ b/projects/demo/src/modules/components/avatar/examples/7/index.less @@ -0,0 +1,4 @@ +:host { + display: flex; + gap: 1rem; +} diff --git a/projects/demo/src/modules/components/avatar/examples/7/index.ts b/projects/demo/src/modules/components/avatar/examples/7/index.ts new file mode 100644 index 000000000000..39a979086c6c --- /dev/null +++ b/projects/demo/src/modules/components/avatar/examples/7/index.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiAvatarComponent, TuiAvatarOutlineDirective} from '@taiga-ui/kit'; + +@Component({ + standalone: true, + imports: [TuiAvatarComponent, TuiAvatarOutlineDirective], + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export default class ExampleComponent {} diff --git a/projects/demo/src/modules/components/avatar/examples/import/module.md b/projects/demo/src/modules/components/avatar/examples/import/import.md similarity index 100% rename from projects/demo/src/modules/components/avatar/examples/import/module.md rename to projects/demo/src/modules/components/avatar/examples/import/import.md diff --git a/projects/demo/src/modules/components/avatar/index.html b/projects/demo/src/modules/components/avatar/index.html index 2f330d08e00d..ec4dd62e2f16 100644 --- a/projects/demo/src/modules/components/avatar/index.html +++ b/projects/demo/src/modules/components/avatar/index.html @@ -5,60 +5,11 @@ > - - This example requires import of - TuiFallbackSrcPipe - - - - - - This example requires import of - TuiFadeDirective - - - - - - - - This example requires import of - TuiAvatarStackModule - - - - - - @@ -102,25 +53,5 @@ - -
    -
  1. -

    Import module:

    - - -
    2. - -
  2. -

    Add to the template:

    - - -
    3. -
- + diff --git a/projects/demo/src/modules/components/avatar/index.ts b/projects/demo/src/modules/components/avatar/index.ts index a1a7d3bf8350..ca8804ce31e4 100644 --- a/projects/demo/src/modules/components/avatar/index.ts +++ b/projects/demo/src/modules/components/avatar/index.ts @@ -2,28 +2,28 @@ import {Component, inject} from '@angular/core'; import type {SafeResourceUrl} from '@angular/platform-browser'; import {DomSanitizer} from '@angular/platform-browser'; import {changeDetection} from '@demo/emulate/change-detection'; -import {TuiComponentPipe, TuiExamplePipe} from '@demo/utils'; -import {TuiAddonDocModule} from '@taiga-ui/addon-doc'; +import {TuiDemoModule} from '@demo/utils'; import type {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core'; -import {TuiNotificationModule} from '@taiga-ui/core'; import {TuiAvatarComponent} from '@taiga-ui/kit'; @Component({ standalone: true, - imports: [ - TuiAddonDocModule, - TuiNotificationModule, - TuiAvatarComponent, - TuiExamplePipe, - TuiComponentPipe, - ], + imports: [TuiAvatarComponent, TuiDemoModule], templateUrl: './index.html', changeDetection, }) export default class ExampleComponent { private readonly sanitizer = inject(DomSanitizer); - protected readonly exampleModule = import('./examples/import/module.md?raw'); - protected readonly exampleHtml = import('./examples/import/template.md?raw'); + + protected readonly examples = [ + 'Content types', + 'Colors', + 'Sizes', + 'Stacking', + 'Options with DI', + 'Labeled', + 'Outline', + ]; protected readonly sizes: ReadonlyArray = [ 'xs', diff --git a/projects/kit/components/avatar-labeled/index.ts b/projects/kit/components/avatar-labeled/index.ts deleted file mode 100644 index 0bc5e4ce956e..000000000000 --- a/projects/kit/components/avatar-labeled/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './avatar-labeled.component'; diff --git a/projects/kit/components/avatar-labeled/ng-package.json b/projects/kit/components/avatar-labeled/ng-package.json deleted file mode 100644 index bebf62dcb5e5..000000000000 --- a/projects/kit/components/avatar-labeled/ng-package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "lib": { - "entryFile": "index.ts" - } -} diff --git a/projects/kit/components/avatar-stack/index.ts b/projects/kit/components/avatar-stack/index.ts deleted file mode 100644 index 9949099017ce..000000000000 --- a/projects/kit/components/avatar-stack/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './avatar-stack.component'; diff --git a/projects/kit/components/avatar-stack/ng-package.json b/projects/kit/components/avatar-stack/ng-package.json deleted file mode 100644 index bebf62dcb5e5..000000000000 --- a/projects/kit/components/avatar-stack/ng-package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "lib": { - "entryFile": "index.ts" - } -} diff --git a/projects/kit/components/avatar-labeled/avatar-labeled.component.ts b/projects/kit/components/avatar/avatar-labeled.component.ts similarity index 100% rename from projects/kit/components/avatar-labeled/avatar-labeled.component.ts rename to projects/kit/components/avatar/avatar-labeled.component.ts diff --git a/projects/kit/components/avatar-labeled/avatar-labeled.styles.less b/projects/kit/components/avatar/avatar-labeled.styles.less similarity index 100% rename from projects/kit/components/avatar-labeled/avatar-labeled.styles.less rename to projects/kit/components/avatar/avatar-labeled.styles.less diff --git a/projects/kit/components/avatar/avatar-outline.component.ts b/projects/kit/components/avatar/avatar-outline.component.ts new file mode 100644 index 000000000000..cc454eb73cf7 --- /dev/null +++ b/projects/kit/components/avatar/avatar-outline.component.ts @@ -0,0 +1,13 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + standalone: true, + template: '', + styleUrls: ['./avatar-outline.styles.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'tui-avatar-outline', + }, +}) +export class TuiAvatarOutlineComponent {} diff --git a/projects/kit/components/avatar/avatar-outline.directive.ts b/projects/kit/components/avatar/avatar-outline.directive.ts new file mode 100644 index 000000000000..e6ce313b7588 --- /dev/null +++ b/projects/kit/components/avatar/avatar-outline.directive.ts @@ -0,0 +1,25 @@ +import {Directive, Input} from '@angular/core'; +import {tuiWithStyles} from '@taiga-ui/cdk'; + +import {TuiAvatarOutlineComponent} from './avatar-outline.component'; + +@Directive({ + standalone: true, + selector: '[tuiAvatarOutline]', + host: { + '[style.--t-fill]': 'value', + '[class._outline]': 'value', + }, +}) +export class TuiAvatarOutlineDirective { + @Input() + public tuiAvatarOutline: string | null = ''; + + protected readonly nothing = tuiWithStyles(TuiAvatarOutlineComponent); + + protected get value(): string | null { + return this.tuiAvatarOutline === '' + ? 'var(--tui-primary)' + : this.tuiAvatarOutline; + } +} diff --git a/projects/kit/components/avatar/avatar-outline.styles.less b/projects/kit/components/avatar/avatar-outline.styles.less new file mode 100644 index 000000000000..c787de744e0a --- /dev/null +++ b/projects/kit/components/avatar/avatar-outline.styles.less @@ -0,0 +1,37 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +[tuiAvatarOutline] { + --t-outline: 0.1875rem; + --t-gap: 0.125rem; + + &[data-size='xs'], + &[data-size='s'], + &[data-size='m'] { + --t-outline: 0.125rem; + --t-gap: 0.0625rem; + } + + &._outline { + mask: radial-gradient( + closest-side, + #000, + #000 calc(100% - var(--t-gap) - var(--t-outline) - 0.5px), + transparent calc(100% - var(--t-gap) - var(--t-outline)), + transparent calc(100% - var(--t-outline) - 0.5px), + #000 calc(100% - var(--t-outline)) + ); + + &:after { + content: ''; + .fullsize(); + + background: var(--t-fill); + mask: radial-gradient( + closest-side, + transparent, + transparent calc(100% - var(--t-outline) - 0.5px), + #000 calc(100% - var(--t-outline)) + ); + } + } +} diff --git a/projects/kit/components/avatar-stack/avatar-stack.component.ts b/projects/kit/components/avatar/avatar-stack.component.ts similarity index 100% rename from projects/kit/components/avatar-stack/avatar-stack.component.ts rename to projects/kit/components/avatar/avatar-stack.component.ts diff --git a/projects/kit/components/avatar-stack/avatar-stack.style.less b/projects/kit/components/avatar/avatar-stack.style.less similarity index 100% rename from projects/kit/components/avatar-stack/avatar-stack.style.less rename to projects/kit/components/avatar/avatar-stack.style.less diff --git a/projects/kit/components/avatar/index.ts b/projects/kit/components/avatar/index.ts index 34f2945ff0d8..6ae24f52ac9f 100644 --- a/projects/kit/components/avatar/index.ts +++ b/projects/kit/components/avatar/index.ts @@ -1,2 +1,6 @@ export * from './avatar.component'; export * from './avatar.options'; +export * from './avatar-labeled.component'; +export * from './avatar-outline.component'; +export * from './avatar-outline.directive'; +export * from './avatar-stack.component'; diff --git a/projects/kit/components/index.ts b/projects/kit/components/index.ts index 8970ff5f1fe3..34b14cc837e3 100644 --- a/projects/kit/components/index.ts +++ b/projects/kit/components/index.ts @@ -2,8 +2,6 @@ export * from '@taiga-ui/kit/components/accordion'; export * from '@taiga-ui/kit/components/action'; export * from '@taiga-ui/kit/components/arrow'; export * from '@taiga-ui/kit/components/avatar'; -export * from '@taiga-ui/kit/components/avatar-labeled'; -export * from '@taiga-ui/kit/components/avatar-stack'; export * from '@taiga-ui/kit/components/badge'; export * from '@taiga-ui/kit/components/badge-notification'; export * from '@taiga-ui/kit/components/badged-content';