From 384890b8d026332f2f588b260ca78f9a8e18c2f2 Mon Sep 17 00:00:00 2001 From: waterplea Date: Fri, 1 Mar 2024 17:45:40 +0400 Subject: [PATCH 1/4] feat(kit): `Skeleton` add new directive --- .../components/main/main.template.html | 2 +- projects/demo/src/modules/app/app.routes.ts | 17 +- projects/demo/src/modules/app/pages.ts | 13 +- .../directives/skeleton/examples/1/index.html | 60 ++++++ .../directives/skeleton/examples/1/index.less | 6 + .../directives/skeleton/examples/1/index.ts | 14 ++ .../directives/skeleton/examples/2/index.html | 33 ++++ .../directives/skeleton/examples/2/index.less | 0 .../directives/skeleton/examples/2/index.ts | 14 ++ .../skeleton/examples/import/import.md | 13 ++ .../skeleton/examples/import/insert.md | 3 + .../directives/skeleton/skeleton.component.ts | 12 ++ .../directives/skeleton/skeleton.module.ts | 44 +++++ .../skeleton/skeleton.template.html | 30 +++ .../markup/skeleton/examples/1/index.html | 180 ------------------ .../markup/skeleton/examples/1/index.less | 39 ---- .../markup/skeleton/examples/1/index.ts | 31 --- .../markup/skeleton/examples/2/index.html | 163 ---------------- .../markup/skeleton/examples/2/index.less | 12 -- .../markup/skeleton/examples/2/index.ts | 36 ---- .../markup/skeleton/skeleton.component.ts | 22 --- .../markup/skeleton/skeleton.module.ts | 51 ----- .../markup/skeleton/skeleton.template.html | 64 ------- projects/kit/directives/index.ts | 1 + projects/kit/directives/skeleton/index.ts | 2 + .../kit/directives/skeleton/ng-package.json | 5 + .../directives/skeleton/skeleton.component.ts | 13 ++ .../directives/skeleton/skeleton.directive.ts | 38 ++++ .../directives/skeleton/skeleton.style.less | 37 ++++ 29 files changed, 342 insertions(+), 613 deletions(-) create mode 100644 projects/demo/src/modules/directives/skeleton/examples/1/index.html create mode 100644 projects/demo/src/modules/directives/skeleton/examples/1/index.less create mode 100644 projects/demo/src/modules/directives/skeleton/examples/1/index.ts create mode 100644 projects/demo/src/modules/directives/skeleton/examples/2/index.html create mode 100644 projects/demo/src/modules/directives/skeleton/examples/2/index.less create mode 100644 projects/demo/src/modules/directives/skeleton/examples/2/index.ts create mode 100644 projects/demo/src/modules/directives/skeleton/examples/import/import.md create mode 100644 projects/demo/src/modules/directives/skeleton/examples/import/insert.md create mode 100644 projects/demo/src/modules/directives/skeleton/skeleton.component.ts create mode 100644 projects/demo/src/modules/directives/skeleton/skeleton.module.ts create mode 100644 projects/demo/src/modules/directives/skeleton/skeleton.template.html delete mode 100644 projects/demo/src/modules/markup/skeleton/examples/1/index.html delete mode 100644 projects/demo/src/modules/markup/skeleton/examples/1/index.less delete mode 100644 projects/demo/src/modules/markup/skeleton/examples/1/index.ts delete mode 100644 projects/demo/src/modules/markup/skeleton/examples/2/index.html delete mode 100644 projects/demo/src/modules/markup/skeleton/examples/2/index.less delete mode 100644 projects/demo/src/modules/markup/skeleton/examples/2/index.ts delete mode 100644 projects/demo/src/modules/markup/skeleton/skeleton.component.ts delete mode 100644 projects/demo/src/modules/markup/skeleton/skeleton.module.ts delete mode 100644 projects/demo/src/modules/markup/skeleton/skeleton.template.html create mode 100644 projects/kit/directives/skeleton/index.ts create mode 100644 projects/kit/directives/skeleton/ng-package.json create mode 100644 projects/kit/directives/skeleton/skeleton.component.ts create mode 100644 projects/kit/directives/skeleton/skeleton.directive.ts create mode 100644 projects/kit/directives/skeleton/skeleton.style.less diff --git a/projects/addon-doc/components/main/main.template.html b/projects/addon-doc/components/main/main.template.html index 89071aae931e..f156aeaa1fd7 100644 --- a/projects/addon-doc/components/main/main.template.html +++ b/projects/addon-doc/components/main/main.template.html @@ -1,5 +1,5 @@ - +
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 947ee4a2ead3..3689d51f0a22 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -614,6 +614,15 @@ export const ROUTES: Routes = [ title: 'Sensitive', }, }, + { + path: 'directives/skeleton', + loadChildren: async () => + (await import('../directives/skeleton/skeleton.module')) + .ExampleTuiSkeletonModule, + data: { + title: 'Skeleton', + }, + }, { path: 'components/input-inline', loadChildren: async () => @@ -1344,14 +1353,6 @@ export const ROUTES: Routes = [ title: 'Shadows', }, }, - { - path: 'skeleton', - loadChildren: async () => - (await import('../markup/skeleton/skeleton.module')).SkeletonModule, - data: { - title: 'Skeleton', - }, - }, { path: 'spaces', loadChildren: async () => diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index b9ac82ddce1d..937ca3cfd094 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -124,12 +124,6 @@ export const pages: TuiDocPages = [ keywords: 'верстка, markup, таблицы, tables', route: '/tables', }, - { - section: 'Foundations', - title: 'Skeleton', - keywords: 'верстка, markup, скелетон, loader, загрузка, skeleton', - route: '/skeleton', - }, { section: 'Foundations', title: 'Form', @@ -1381,6 +1375,13 @@ export const pages: TuiDocPages = [ keywords: 'sensitive, pixel, mask, пиксель, маска', route: '/directives/sensitive', }, + { + section: 'Tools', + title: 'Skeleton', + keywords: + 'верстка, markup, скелетон, loader, загрузка, skeleton, shimmer', + route: 'directives/skeleton', + }, ], }, { diff --git a/projects/demo/src/modules/directives/skeleton/examples/1/index.html b/projects/demo/src/modules/directives/skeleton/examples/1/index.html new file mode 100644 index 000000000000..2e2e59623288 --- /dev/null +++ b/projects/demo/src/modules/directives/skeleton/examples/1/index.html @@ -0,0 +1,60 @@ + +

+ + + + +

+
+

+ + Card + Subtitle + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. +
+

+ + +

+

+ Chip + Dale +

diff --git a/projects/demo/src/modules/directives/skeleton/examples/1/index.less b/projects/demo/src/modules/directives/skeleton/examples/1/index.less new file mode 100644 index 000000000000..8619a7446494 --- /dev/null +++ b/projects/demo/src/modules/directives/skeleton/examples/1/index.less @@ -0,0 +1,6 @@ +p { + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; +} diff --git a/projects/demo/src/modules/directives/skeleton/examples/1/index.ts b/projects/demo/src/modules/directives/skeleton/examples/1/index.ts new file mode 100644 index 000000000000..6410cc34e2ff --- /dev/null +++ b/projects/demo/src/modules/directives/skeleton/examples/1/index.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-skeleton-example-1', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiSkeletonExample1 { + protected skeleton = false; +} diff --git a/projects/demo/src/modules/directives/skeleton/examples/2/index.html b/projects/demo/src/modules/directives/skeleton/examples/2/index.html new file mode 100644 index 000000000000..7eea9a23319c --- /dev/null +++ b/projects/demo/src/modules/directives/skeleton/examples/2/index.html @@ -0,0 +1,33 @@ +

+ You can pass + boolean + to toggle skeleton for elements. For multi line text you can use + string + to serve as a placeholder underneath the text skeleton or a + number + to generate this many random sized words, while your actual text is loading +

+ + +

+ + {{ skeleton ? '' : 'This text will be replaced by a placeholder.' }} + +

+ + + {{ skeleton ? '' : 'This text will be replaced by a skeleton made of 20 random length non-breaking spaces.' }} + diff --git a/projects/demo/src/modules/directives/skeleton/examples/2/index.less b/projects/demo/src/modules/directives/skeleton/examples/2/index.less new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/projects/demo/src/modules/directives/skeleton/examples/2/index.ts b/projects/demo/src/modules/directives/skeleton/examples/2/index.ts new file mode 100644 index 000000000000..b4b188b28ea4 --- /dev/null +++ b/projects/demo/src/modules/directives/skeleton/examples/2/index.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-skeleton-example-2', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiSkeletonExample2 { + protected skeleton = false; +} diff --git a/projects/demo/src/modules/directives/skeleton/examples/import/import.md b/projects/demo/src/modules/directives/skeleton/examples/import/import.md new file mode 100644 index 000000000000..538fc7a9f26e --- /dev/null +++ b/projects/demo/src/modules/directives/skeleton/examples/import/import.md @@ -0,0 +1,13 @@ +```ts +import {NgModule} from '@angular/core'; +import {TuiSkeletonDirective} from '@taiga-ui/kit'; +// ... + +@NgModule({ + imports: [ + // ... + TuiSkeletonDirective, + ], +}) +export class MyModule {} +``` diff --git a/projects/demo/src/modules/directives/skeleton/examples/import/insert.md b/projects/demo/src/modules/directives/skeleton/examples/import/insert.md new file mode 100644 index 000000000000..2737b0eeb04d --- /dev/null +++ b/projects/demo/src/modules/directives/skeleton/examples/import/insert.md @@ -0,0 +1,3 @@ +```html +Loading.. +``` diff --git a/projects/demo/src/modules/directives/skeleton/skeleton.component.ts b/projects/demo/src/modules/directives/skeleton/skeleton.component.ts new file mode 100644 index 000000000000..1eb9b1453ced --- /dev/null +++ b/projects/demo/src/modules/directives/skeleton/skeleton.component.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; + +@Component({ + selector: 'skeleton', + templateUrl: './skeleton.template.html', + changeDetection, +}) +export class ExampleTuiSkeletonComponent { + protected readonly import = import('./examples/import/import.md?raw'); + protected readonly template = import('./examples/import/insert.md?raw'); +} diff --git a/projects/demo/src/modules/directives/skeleton/skeleton.module.ts b/projects/demo/src/modules/directives/skeleton/skeleton.module.ts new file mode 100644 index 000000000000..d3f209777569 --- /dev/null +++ b/projects/demo/src/modules/directives/skeleton/skeleton.module.ts @@ -0,0 +1,44 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {TuiExamplePipe, TuiSetupComponent} from '@demo/utils'; +import {tuiGetDocModules} from '@taiga-ui/addon-doc'; +import { + TuiButtonModule, + TuiCardModule, + TuiChipModule, + TuiHeaderDirective, + TuiLabelDirective, + TuiSurfaceModule, + TuiTitleModule, + TuiToggleModule, +} from '@taiga-ui/experimental'; +import {TuiAvatarComponent, TuiBadgeDirective, TuiSkeletonDirective} from '@taiga-ui/kit'; + +import {TuiSkeletonExample1} from './examples/1'; +import {TuiSkeletonExample2} from './examples/2'; +import {ExampleTuiSkeletonComponent} from './skeleton.component'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + tuiGetDocModules(ExampleTuiSkeletonComponent), + TuiSetupComponent, + TuiExamplePipe, + TuiLabelDirective, + TuiToggleModule, + TuiAvatarComponent, + TuiCardModule, + TuiTitleModule, + TuiSurfaceModule, + TuiHeaderDirective, + TuiButtonModule, + TuiChipModule, + TuiBadgeDirective, + TuiSkeletonDirective, + ], + declarations: [ExampleTuiSkeletonComponent, TuiSkeletonExample1, TuiSkeletonExample2], + exports: [ExampleTuiSkeletonComponent], +}) +export class ExampleTuiSkeletonModule {} diff --git a/projects/demo/src/modules/directives/skeleton/skeleton.template.html b/projects/demo/src/modules/directives/skeleton/skeleton.template.html new file mode 100644 index 000000000000..4198082fcb9f --- /dev/null +++ b/projects/demo/src/modules/directives/skeleton/skeleton.template.html @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + diff --git a/projects/demo/src/modules/markup/skeleton/examples/1/index.html b/projects/demo/src/modules/markup/skeleton/examples/1/index.html deleted file mode 100644 index 8b543be1ed7b..000000000000 --- a/projects/demo/src/modules/markup/skeleton/examples/1/index.html +++ /dev/null @@ -1,180 +0,0 @@ -
- - - -
- --tui-skeleton-radius: - - -
-
- -
-
-
- -
-
-
- - -
-
-

- A category -

-

- {{ skeletonVisible ? '' : 'Title' }} -

-

- {{ skeletonVisible ? '' : placeholder }} -

-

- - Link - -

-
-
- -
-
- -
-
-
-
-
-

- {{ skeletonVisible ? '' : 'Another title' }} -

-

- {{ skeletonVisible ? '' : 'And some new text again' }} -

-
-
- -
-
- -
-
-
-
-
-

- {{ skeletonVisible ? '' : 'One more title' }} -

-

- {{ skeletonVisible ? '' : 'All right, I get it' }} -

-
-
- -
-
-
diff --git a/projects/demo/src/modules/markup/skeleton/examples/1/index.less b/projects/demo/src/modules/markup/skeleton/examples/1/index.less deleted file mode 100644 index 611a12755242..000000000000 --- a/projects/demo/src/modules/markup/skeleton/examples/1/index.less +++ /dev/null @@ -1,39 +0,0 @@ -.container { - max-width: 62.5rem; - padding: 1.5rem; - - &_dark { - background-image: linear-gradient(225deg, #3023ae, #c86dd7); - - & * { - color: var(--tui-text-01-night); - } - } -} - -.island { - width: 100%; -} - -.some-figure { - border-radius: 100%; - width: 3rem; - height: 3rem; - background-color: var(--tui-secondary-active); -} - -.island-content { - width: 100%; -} - -.header, -.skeleton-options { - display: flex; - align-items: center; -} - -.radius-option { - width: 3.75rem; - margin-left: 0.625rem; - text-align: center; -} diff --git a/projects/demo/src/modules/markup/skeleton/examples/1/index.ts b/projects/demo/src/modules/markup/skeleton/examples/1/index.ts deleted file mode 100644 index 740f3fd08d46..000000000000 --- a/projects/demo/src/modules/markup/skeleton/examples/1/index.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {Component} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; - -@Component({ - selector: 'tui-skeleton-example-1', - templateUrl: './index.html', - styleUrls: ['./index.less'], - encapsulation, - changeDetection, -}) -export class TuiSkeletonExample1 { - protected radius = 0; - - protected testForm = new FormGroup({ - testValue: new FormControl(true), - }); - - protected skeletonVisible = false; - protected lightMode = false; - protected placeholder = 'Some paragraph with information'; - - protected showSkeleton(): void { - this.skeletonVisible = !this.skeletonVisible; - } - - protected toggleLight(): void { - this.lightMode = !this.lightMode; - } -} diff --git a/projects/demo/src/modules/markup/skeleton/examples/2/index.html b/projects/demo/src/modules/markup/skeleton/examples/2/index.html deleted file mode 100644 index 065e9cbdcdd2..000000000000 --- a/projects/demo/src/modules/markup/skeleton/examples/2/index.html +++ /dev/null @@ -1,163 +0,0 @@ -

- - -

-
-
-
-
-
-

- A header -

-
- - Some input - - -
-
-
- - Some password input - -
-
- - Some number input - -
-
-
- - Some textfield - -
-
- - - - -
-
- - -
-
-
-
-
-
diff --git a/projects/demo/src/modules/markup/skeleton/examples/2/index.less b/projects/demo/src/modules/markup/skeleton/examples/2/index.less deleted file mode 100644 index ebd848f53a49..000000000000 --- a/projects/demo/src/modules/markup/skeleton/examples/2/index.less +++ /dev/null @@ -1,12 +0,0 @@ -:host { - display: block; -} - -.container { - padding: 1.5rem; - - &_dark { - background-image: linear-gradient(225deg, #3023ae, #c86dd7); - color: var(--tui-text-01-night); - } -} diff --git a/projects/demo/src/modules/markup/skeleton/examples/2/index.ts b/projects/demo/src/modules/markup/skeleton/examples/2/index.ts deleted file mode 100644 index 6c5a60cef273..000000000000 --- a/projects/demo/src/modules/markup/skeleton/examples/2/index.ts +++ /dev/null @@ -1,36 +0,0 @@ -import {Component} from '@angular/core'; -import {FormControl, FormGroup, Validators} from '@angular/forms'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiTime} from '@taiga-ui/cdk'; - -@Component({ - selector: 'tui-skeleton-example-2', - templateUrl: './index.html', - styleUrls: ['./index.less'], - encapsulation, - changeDetection, -}) -export class TuiSkeletonExample2 { - protected testForm = new FormGroup({ - nameValue: new FormControl('', Validators.required), - passwordValue: new FormControl('', Validators.required), - moneyValue: new FormControl('100', Validators.required), - timeValue: new FormControl(new TuiTime(12, 30), Validators.required), - osnoValue: new FormControl(false), - usnValue: new FormControl(false), - eshnValue: new FormControl(false), - envdValue: new FormControl(false), - }); - - protected skeletonVisible = false; - protected lightMode = false; - - protected showSkeleton(): void { - this.skeletonVisible = !this.skeletonVisible; - } - - protected toggleLight(): void { - this.lightMode = !this.lightMode; - } -} diff --git a/projects/demo/src/modules/markup/skeleton/skeleton.component.ts b/projects/demo/src/modules/markup/skeleton/skeleton.component.ts deleted file mode 100644 index a60e46f29e45..000000000000 --- a/projects/demo/src/modules/markup/skeleton/skeleton.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import {Component} from '@angular/core'; -import {changeDetection} from '@demo/emulate/change-detection'; -import type {TuiDocExample} from '@taiga-ui/addon-doc'; - -@Component({ - selector: 'skeleton', - templateUrl: './skeleton.template.html', - changeDetection, -}) -export class SkeletonComponent { - protected readonly example1: TuiDocExample = { - TypeScript: import('./examples/1/index.ts?raw'), - HTML: import('./examples/1/index.html?raw'), - LESS: import('./examples/1/index.less?raw'), - }; - - protected readonly example2: TuiDocExample = { - TypeScript: import('./examples/2/index.ts?raw'), - HTML: import('./examples/2/index.html?raw'), - LESS: import('./examples/2/index.less?raw'), - }; -} diff --git a/projects/demo/src/modules/markup/skeleton/skeleton.module.ts b/projects/demo/src/modules/markup/skeleton/skeleton.module.ts deleted file mode 100644 index 3d219cc5407f..000000000000 --- a/projects/demo/src/modules/markup/skeleton/skeleton.module.ts +++ /dev/null @@ -1,51 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc'; -import { - TuiButtonModule, - TuiLinkModule, - TuiModeModule, - TuiTextfieldControllerModule, -} from '@taiga-ui/core'; -import {TuiCheckboxModule, TuiLabelDirective} from '@taiga-ui/experimental'; -import { - TuiInputModule, - TuiInputNumberModule, - TuiInputPasswordModule, - TuiInputTimeModule, - TuiIslandModule, - TuiToggleModule, -} from '@taiga-ui/kit'; - -import {StylesInfoModule} from '../../app/styles-info/styles-info.module'; -import {TuiSkeletonExample1} from './examples/1'; -import {TuiSkeletonExample2} from './examples/2'; -import {SkeletonComponent} from './skeleton.component'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - ReactiveFormsModule, - StylesInfoModule, - TuiModeModule, - TuiInputTimeModule, - TuiButtonModule, - TuiInputPasswordModule, - TuiInputModule, - TuiInputNumberModule, - TuiIslandModule, - TuiLinkModule, - TuiToggleModule, - TuiAddonDocModule, - RouterModule.forChild(tuiGenerateRoutes(SkeletonComponent)), - TuiTextfieldControllerModule, - TuiLabelDirective, - TuiCheckboxModule, - ], - declarations: [SkeletonComponent, TuiSkeletonExample1, TuiSkeletonExample2], - exports: [SkeletonComponent], -}) -export class SkeletonModule {} diff --git a/projects/demo/src/modules/markup/skeleton/skeleton.template.html b/projects/demo/src/modules/markup/skeleton/skeleton.template.html deleted file mode 100644 index f2a0673db77d..000000000000 --- a/projects/demo/src/modules/markup/skeleton/skeleton.template.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - -
-

- Use - .tui-skeleton - class on an element to add skeleton of the same size above it. -

-

You can also use the following modifiers:

-
-
    -
  • - .tui-skeleton - : -
      -
    • - .tui-skeleton_light - : style for dark background -
      • -
    • - .tui-skeleton_rounded - : rounded as an element -
      • -
    • - .tui-skeleton_short - : short mode -
      • -
    • - .tui-skeleton_center - : short centered mode -
      • -
    • - .tui-skeleton_text - : for containers with texts -
      • -
    -
    • -
  • - if you want to use border-radius for skeleton you can use - --tui-skeleton-radius - css variable -
    • -
- - - - - - - - - - diff --git a/projects/kit/directives/index.ts b/projects/kit/directives/index.ts index 9ae46358330b..d41ce43fc927 100644 --- a/projects/kit/directives/index.ts +++ b/projects/kit/directives/index.ts @@ -5,6 +5,7 @@ export * from '@taiga-ui/kit/directives/lazy-loading'; export * from '@taiga-ui/kit/directives/present'; export * from '@taiga-ui/kit/directives/project-class'; export * from '@taiga-ui/kit/directives/sensitive'; +export * from '@taiga-ui/kit/directives/skeleton'; export * from '@taiga-ui/kit/directives/unfinished-validator'; export * from '@taiga-ui/kit/directives/unmask-handler'; export * from '@taiga-ui/kit/directives/value-accessor'; diff --git a/projects/kit/directives/skeleton/index.ts b/projects/kit/directives/skeleton/index.ts new file mode 100644 index 000000000000..c870bb959ba7 --- /dev/null +++ b/projects/kit/directives/skeleton/index.ts @@ -0,0 +1,2 @@ +export * from './skeleton.component'; +export * from './skeleton.directive'; diff --git a/projects/kit/directives/skeleton/ng-package.json b/projects/kit/directives/skeleton/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/kit/directives/skeleton/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/kit/directives/skeleton/skeleton.component.ts b/projects/kit/directives/skeleton/skeleton.component.ts new file mode 100644 index 000000000000..8d74f3fd3e0f --- /dev/null +++ b/projects/kit/directives/skeleton/skeleton.component.ts @@ -0,0 +1,13 @@ +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; + +@Component({ + standalone: true, + template: '', + styleUrls: ['./skeleton.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'tui-skeleton-styles', + }, +}) +export class TuiSkeletonComponent {} diff --git a/projects/kit/directives/skeleton/skeleton.directive.ts b/projects/kit/directives/skeleton/skeleton.directive.ts new file mode 100644 index 000000000000..c0264ccd5f24 --- /dev/null +++ b/projects/kit/directives/skeleton/skeleton.directive.ts @@ -0,0 +1,38 @@ +import {Directive, Input} from '@angular/core'; +import {CHAR_NO_BREAK_SPACE, tuiPure, tuiWithStyles} from '@taiga-ui/cdk'; + +import {TuiSkeletonComponent} from './skeleton.component'; + +@Directive({ + standalone: true, + selector: '[tuiSkeleton]', + host: { + tuiSkeleton: '', + '[class._skeleton]': 'tuiSkeleton', + '[attr.data-tui-skeleton]': 'getPlaceholder(tuiSkeleton)', + }, +}) +export class TuiSkeletonDirective { + protected readonly nothing = tuiWithStyles(TuiSkeletonComponent); + + @Input() + public tuiSkeleton: boolean | number | string = false; + + @tuiPure + protected getPlaceholder(value: boolean | number | string): string | null { + switch (typeof value) { + case 'number': + return Array.from({length: value}) + .map(() => CHAR_NO_BREAK_SPACE.repeat(getLength())) + .join(' '); + case 'string': + return value; + default: + return null; + } + } +} + +function getLength(): number { + return Math.floor(Math.random() * (15 - 5 + 1)) + 5; +} diff --git a/projects/kit/directives/skeleton/skeleton.style.less b/projects/kit/directives/skeleton/skeleton.style.less new file mode 100644 index 000000000000..e26931d056cd --- /dev/null +++ b/projects/kit/directives/skeleton/skeleton.style.less @@ -0,0 +1,37 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +@keyframes tuiSkeleton { + from { + opacity: 0.03; + } + + to { + opacity: 0.06; + } +} + +[tuiSkeleton] { + &._skeleton { + color: transparent; + background: var(--tui-base-01) !important; + box-shadow: none !important; + filter: contrast(0) brightness(0); + animation: tuiSkeleton ease-in-out 1s infinite alternate; + + &[data-tui-skeleton] { + background: transparent !important; + + &:before { + content: attr(data-tui-skeleton); + background: var(--tui-base-01); + font-size: smaller; + box-decoration-break: clone; + border-radius: 0.25rem; + } + } + } +} + +[tuiTheme='night'] [tuiSkeleton]._skeleton { + filter: contrast(0) brightness(0) invert(1); +} From 466d2692ee1df0755fd958ff913cebef4f206795 Mon Sep 17 00:00:00 2001 From: waterplea Date: Mon, 18 Mar 2024 17:27:33 +0700 Subject: [PATCH 2/4] chore: comments --- .../directives/skeleton/examples/2/index.html | 9 --------- .../directives/skeleton/examples/2/index.less | 0 .../directives/skeleton/examples/2/index.ts | 1 - .../directives/skeleton/skeleton.module.ts | 2 ++ .../directives/skeleton/skeleton.template.html | 10 ++++++++++ .../directives/skeleton/skeleton.directive.ts | 18 +++++++++++++++--- 6 files changed, 27 insertions(+), 13 deletions(-) delete mode 100644 projects/demo/src/modules/directives/skeleton/examples/2/index.less diff --git a/projects/demo/src/modules/directives/skeleton/examples/2/index.html b/projects/demo/src/modules/directives/skeleton/examples/2/index.html index 7eea9a23319c..d5d2e811395d 100644 --- a/projects/demo/src/modules/directives/skeleton/examples/2/index.html +++ b/projects/demo/src/modules/directives/skeleton/examples/2/index.html @@ -1,12 +1,3 @@ -

- You can pass - boolean - to toggle skeleton for elements. For multi line text you can use - string - to serve as a placeholder underneath the text skeleton or a - number - to generate this many random sized words, while your actual text is loading -