From 98b627f0eb683fc414f72e718a3cc85aa7de5fdd Mon Sep 17 00:00:00 2001 From: splincode Date: Sun, 29 Sep 2024 18:40:09 +0300 Subject: [PATCH] feat(cdk): add `TuiRepeatTimes` pipe --- projects/cdk/pipes/index.ts | 1 + projects/cdk/pipes/repeat-times/index.ts | 12 ++++++++++++ projects/cdk/pipes/repeat-times/ng-package.json | 5 +++++ .../repeat-times/test/repeat-times.pipe.spec.ts | 16 ++++++++++++++++ projects/demo/src/modules/app/app.routes.ts | 5 +++++ projects/demo/src/modules/app/demo-routes.ts | 1 + projects/demo/src/modules/app/pages.ts | 6 ++++++ .../pipes/repeat-times/examples/1/index.html | 3 +++ .../pipes/repeat-times/examples/1/index.ts | 14 ++++++++++++++ .../repeat-times/examples/import/import.md | 15 +++++++++++++++ .../repeat-times/examples/import/template.md | 5 +++++ .../src/modules/pipes/repeat-times/index.html | 17 +++++++++++++++++ .../src/modules/pipes/repeat-times/index.ts | 11 +++++++++++ 13 files changed, 111 insertions(+) create mode 100644 projects/cdk/pipes/repeat-times/index.ts create mode 100644 projects/cdk/pipes/repeat-times/ng-package.json create mode 100644 projects/cdk/pipes/repeat-times/test/repeat-times.pipe.spec.ts create mode 100644 projects/demo/src/modules/pipes/repeat-times/examples/1/index.html create mode 100644 projects/demo/src/modules/pipes/repeat-times/examples/1/index.ts create mode 100644 projects/demo/src/modules/pipes/repeat-times/examples/import/import.md create mode 100644 projects/demo/src/modules/pipes/repeat-times/examples/import/template.md create mode 100644 projects/demo/src/modules/pipes/repeat-times/index.html create mode 100644 projects/demo/src/modules/pipes/repeat-times/index.ts diff --git a/projects/cdk/pipes/index.ts b/projects/cdk/pipes/index.ts index 69882befd883..da4ac658ec1c 100644 --- a/projects/cdk/pipes/index.ts +++ b/projects/cdk/pipes/index.ts @@ -2,5 +2,6 @@ export * from '@taiga-ui/cdk/pipes/filter'; export * from '@taiga-ui/cdk/pipes/is-present'; export * from '@taiga-ui/cdk/pipes/keys'; export * from '@taiga-ui/cdk/pipes/mapper'; +export * from '@taiga-ui/cdk/pipes/repeat-times'; export * from '@taiga-ui/cdk/pipes/replace'; export * from '@taiga-ui/cdk/pipes/to-array'; diff --git a/projects/cdk/pipes/repeat-times/index.ts b/projects/cdk/pipes/repeat-times/index.ts new file mode 100644 index 000000000000..7023a8d4cd82 --- /dev/null +++ b/projects/cdk/pipes/repeat-times/index.ts @@ -0,0 +1,12 @@ +import {Pipe, type PipeTransform} from '@angular/core'; +import {tuiClamp} from '@taiga-ui/cdk/utils'; + +@Pipe({ + standalone: true, + name: 'tuiRepeatTimes', +}) +export class TuiRepeatTimesPipe implements PipeTransform { + public transform(n: number): number[] { + return Array.from({length: tuiClamp(n, 0, n)}, (_, i) => i); + } +} diff --git a/projects/cdk/pipes/repeat-times/ng-package.json b/projects/cdk/pipes/repeat-times/ng-package.json new file mode 100644 index 000000000000..bebf62dcb5e5 --- /dev/null +++ b/projects/cdk/pipes/repeat-times/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/projects/cdk/pipes/repeat-times/test/repeat-times.pipe.spec.ts b/projects/cdk/pipes/repeat-times/test/repeat-times.pipe.spec.ts new file mode 100644 index 000000000000..fc8c5e709850 --- /dev/null +++ b/projects/cdk/pipes/repeat-times/test/repeat-times.pipe.spec.ts @@ -0,0 +1,16 @@ +import {TuiRepeatTimesPipe} from '@taiga-ui/cdk'; + +describe('TuiRepeatTimes pipe', () => { + const pipe = new TuiRepeatTimesPipe(); + + it('works', () => { + expect(pipe.transform(-2)).toEqual([]); + expect(pipe.transform(-1)).toEqual([]); + expect(pipe.transform(0)).toEqual([]); + expect(pipe.transform(1)).toEqual([0]); + expect(pipe.transform(2)).toEqual([0, 1]); + expect(pipe.transform(3)).toEqual([0, 1, 2]); + expect(pipe.transform(4)).toEqual([0, 1, 2, 3]); + expect(pipe.transform(5)).toEqual([0, 1, 2, 3, 4]); + }); +}); diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index da38a03588ea..b618ff9d2e7b 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -970,6 +970,11 @@ export const ROUTES: Routes = [ loadComponent: async () => import('../pipes/mapper'), title: 'Mapper', }), + route({ + path: DemoRoute.RepeatTimes, + loadComponent: async () => import('../pipes/repeat-times'), + title: 'RepeatTimes', + }), route({ path: DemoRoute.Stringify, loadComponent: async () => import('../pipes/stringify'), diff --git a/projects/demo/src/modules/app/demo-routes.ts b/projects/demo/src/modules/app/demo-routes.ts index e2f330554d80..4614207f9ac8 100644 --- a/projects/demo/src/modules/app/demo-routes.ts +++ b/projects/demo/src/modules/app/demo-routes.ts @@ -192,6 +192,7 @@ export const DemoRoute = { FormatNumber: '/pipes/format-number', IsPresent: '/pipes/is-present', Mapper: '/pipes/mapper', + RepeatTimes: '/pipes/repeat-times', Stringify: '/pipes/stringify', StringifyContent: '/pipes/stringify-content', Alert: '/components/alert', diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index bfbcb7df8e91..2b0dc33def72 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -1368,6 +1368,12 @@ export const pages: TuiDocRoutePages = [ keywords: 'mapper, мап, преобразование, пайп, pipe', route: DemoRoute.Mapper, }, + { + section: 'Tools', + title: 'RepeatTimes', + keywords: 'повторение, repeat, пайп, pipe', + route: DemoRoute.RepeatTimes, + }, { section: 'Tools', title: 'FieldError', diff --git a/projects/demo/src/modules/pipes/repeat-times/examples/1/index.html b/projects/demo/src/modules/pipes/repeat-times/examples/1/index.html new file mode 100644 index 000000000000..a3f3154b85d9 --- /dev/null +++ b/projects/demo/src/modules/pipes/repeat-times/examples/1/index.html @@ -0,0 +1,3 @@ + + {{ index }} + diff --git a/projects/demo/src/modules/pipes/repeat-times/examples/1/index.ts b/projects/demo/src/modules/pipes/repeat-times/examples/1/index.ts new file mode 100644 index 000000000000..2931819c12ce --- /dev/null +++ b/projects/demo/src/modules/pipes/repeat-times/examples/1/index.ts @@ -0,0 +1,14 @@ +import {NgForOf} from '@angular/common'; +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; +import {TuiRepeatTimesPipe} from '@taiga-ui/cdk'; + +@Component({ + standalone: true, + imports: [NgForOf, TuiRepeatTimesPipe], + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export default class Example {} diff --git a/projects/demo/src/modules/pipes/repeat-times/examples/import/import.md b/projects/demo/src/modules/pipes/repeat-times/examples/import/import.md new file mode 100644 index 000000000000..2c1951706072 --- /dev/null +++ b/projects/demo/src/modules/pipes/repeat-times/examples/import/import.md @@ -0,0 +1,15 @@ +```ts +import {TuiRepeatTimesPipe} from '@taiga-ui/cdk'; + +//... + +@Component({ + standalone: true, + imports: [ + // ... + TuiRepeatTimesPipe, + ], + // ... +}) +export class Example {} +``` diff --git a/projects/demo/src/modules/pipes/repeat-times/examples/import/template.md b/projects/demo/src/modules/pipes/repeat-times/examples/import/template.md new file mode 100644 index 000000000000..89392a3eaaaf --- /dev/null +++ b/projects/demo/src/modules/pipes/repeat-times/examples/import/template.md @@ -0,0 +1,5 @@ +```html +@for (index of 3 | tuiRepeatTimes; track index) { +
+} +``` diff --git a/projects/demo/src/modules/pipes/repeat-times/index.html b/projects/demo/src/modules/pipes/repeat-times/index.html new file mode 100644 index 000000000000..4eb6ac61ace4 --- /dev/null +++ b/projects/demo/src/modules/pipes/repeat-times/index.html @@ -0,0 +1,17 @@ + + + + + + + diff --git a/projects/demo/src/modules/pipes/repeat-times/index.ts b/projects/demo/src/modules/pipes/repeat-times/index.ts new file mode 100644 index 000000000000..a6af1afa2f68 --- /dev/null +++ b/projects/demo/src/modules/pipes/repeat-times/index.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiDemo} from '@demo/utils'; + +@Component({ + standalone: true, + imports: [TuiDemo], + templateUrl: './index.html', + changeDetection, +}) +export default class Page {}