From a7fbdf527495c0b9d1352c6a0b729ea4032f8092 Mon Sep 17 00:00:00 2001 From: mdlufy Date: Thu, 3 Oct 2024 10:40:32 +0300 Subject: [PATCH] chore(demo): `Textfield` add API page --- .../demo/src/components/textfield/index.ts | 10 +-- .../modules/components/textfield/index.html | 66 ++++++++++++++++++- .../src/modules/components/textfield/index.ts | 20 +++++- .../textfield-controller/index.html | 54 ++++++++++++--- .../directives/textfield-controller/index.ts | 30 ++++++++- 5 files changed, 160 insertions(+), 20 deletions(-) diff --git a/projects/demo/src/components/textfield/index.ts b/projects/demo/src/components/textfield/index.ts index 2266d04f5516b..78ec829907f71 100644 --- a/projects/demo/src/components/textfield/index.ts +++ b/projects/demo/src/components/textfield/index.ts @@ -4,14 +4,8 @@ import {RouterLink} from '@angular/router'; import {DemoRoute} from '@demo/routes'; import {TuiDocAPIItem} from '@taiga-ui/addon-doc'; import type {TuiLooseUnion} from '@taiga-ui/cdk'; -import { - TUI_TEXTFIELD_OPTIONS, - TuiLink, - type TuiSizeL, - type TuiSizeS, - type TuiTextfieldOptions, - TuiTitle, -} from '@taiga-ui/core'; +import type {TuiSizeL, TuiSizeS, TuiTextfieldOptions} from '@taiga-ui/core'; +import {TUI_TEXTFIELD_OPTIONS, TuiLink, TuiTitle} from '@taiga-ui/core'; @Component({ standalone: true, diff --git a/projects/demo/src/modules/components/textfield/index.html b/projects/demo/src/modules/components/textfield/index.html index 812ad625366d9..2c99147362a64 100644 --- a/projects/demo/src/modules/components/textfield/index.html +++ b/projects/demo/src/modules/components/textfield/index.html @@ -20,5 +20,69 @@ /> - + + + + + + + + + + + Readonly state + + + Disabled state + + + Invalid state + + + Value + + + +
+
+ + diff --git a/projects/demo/src/modules/components/textfield/index.ts b/projects/demo/src/modules/components/textfield/index.ts index 32335801a3912..720477872cd9c 100644 --- a/projects/demo/src/modules/components/textfield/index.ts +++ b/projects/demo/src/modules/components/textfield/index.ts @@ -1,10 +1,23 @@ import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {TuiDocIcons} from '@demo/components/icons'; +import {TuiDocTextfield} from '@demo/components/textfield'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; +import {TuiIcon, TuiTextfield} from '@taiga-ui/core'; +import {TuiTooltip} from '@taiga-ui/kit'; @Component({ standalone: true, - imports: [TuiDemo], + imports: [ + FormsModule, + TuiDemo, + TuiDocIcons, + TuiDocTextfield, + TuiIcon, + TuiTextfield, + TuiTooltip, + ], templateUrl: './index.html', changeDetection, }) @@ -16,4 +29,9 @@ export default class Page { 'Interactive icons', 'Mask', ]; + + protected value = ''; + protected readonly = false; + protected disabled = false; + protected invalid = false; } diff --git a/projects/demo/src/modules/directives/textfield-controller/index.html b/projects/demo/src/modules/directives/textfield-controller/index.html index 5de40b2b32345..87d8476032ae1 100644 --- a/projects/demo/src/modules/directives/textfield-controller/index.html +++ b/projects/demo/src/modules/directives/textfield-controller/index.html @@ -47,19 +47,57 @@ Hello - - -
+ + + Shows a cross to reset a value + + + Right content (e.g. avatar with maximum size 32x32px) + + + Label is outside a component and made with + + Label + + + + Size + + diff --git a/projects/demo/src/modules/directives/textfield-controller/index.ts b/projects/demo/src/modules/directives/textfield-controller/index.ts index 61610789c490f..851c2b1258759 100644 --- a/projects/demo/src/modules/directives/textfield-controller/index.ts +++ b/projects/demo/src/modules/directives/textfield-controller/index.ts @@ -1,9 +1,9 @@ import {Component} from '@angular/core'; import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms'; -import {TuiDocTextfield} from '@demo/components/textfield'; import {changeDetection} from '@demo/emulate/change-detection'; import {DemoRoute} from '@demo/routes'; import {TuiDemo} from '@demo/utils'; +import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core'; import {TuiTextfield} from '@taiga-ui/core'; import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'; @@ -12,7 +12,6 @@ import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'; imports: [ ReactiveFormsModule, TuiDemo, - TuiDocTextfield, TuiInputModule, TuiTextfield, TuiTextfieldControllerModule, @@ -21,6 +20,33 @@ import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'; changeDetection, }) export default class Page { + protected readonly sizeVariants: ReadonlyArray = ['s', 'm', 'l']; + + protected readonly inputModeVariants: readonly string[] = ['text', 'numeric']; + + protected readonly maxLengthVariants: readonly number[] = [10]; + + protected readonly typeVariants: readonly string[] = [ + 'text', + 'email', + 'password', + 'tel', + 'url', + ]; + + protected type = this.typeVariants[0]!; + + protected readonly customContentVariants = ['', 'Bell']; + + protected customContentSelected = this.customContentVariants[0]!; + + protected cleaner = false; + protected exampleText = ''; + protected labelOutside = false; + protected size = this.sizeVariants[2]!; + protected inputMode = this.inputModeVariants[0]!; + protected maxLength: number | null = null; + protected readonly control = new FormControl('111', Validators.required); protected readonly routes = DemoRoute; }