From a8dec1d082ff21a1906984658b17acd3e670638d Mon Sep 17 00:00:00 2001 From: shiv9604 Date: Sun, 15 Dec 2024 02:32:00 +0530 Subject: [PATCH 1/8] fix(demo): add example 2 for implementation without tui-form classes --- .../modules/markup/form/examples/2/index.html | 308 ++++++++++++++++++ .../modules/markup/form/examples/2/index.less | 26 ++ .../modules/markup/form/examples/2/index.ts | 124 +++++++ .../demo/src/modules/markup/form/index.html | 6 + 4 files changed, 464 insertions(+) create mode 100644 projects/demo/src/modules/markup/form/examples/2/index.html create mode 100644 projects/demo/src/modules/markup/form/examples/2/index.less create mode 100644 projects/demo/src/modules/markup/form/examples/2/index.ts diff --git a/projects/demo/src/modules/markup/form/examples/2/index.html b/projects/demo/src/modules/markup/form/examples/2/index.html new file mode 100644 index 000000000000..0b6964671cc4 --- /dev/null +++ b/projects/demo/src/modules/markup/form/examples/2/index.html @@ -0,0 +1,308 @@ +
+
+ + + + + + +
+
+
+
+

A header

+
+ + Textfield + + + + +
+
+ + Input date + + + + +
+
+
+ Input password + +
+
+ + Input money + + +
+
+
+ + Some slider + +
+ from 50 000 ₽ + to 3 000 000 ₽ +
+
Some additional text
+ +
+
+
+ + Choose a person + + + +
{{ data.firstName }} {{ data.lastName }}
+ + +
+
+ Input phone + +
+
+

Header

+
+ + +
+
+ Input time +
+
+ + + + +
+

Header

+
+ +
+
+ +
+

Header

+
+ + Textfield + + + +
+
+ + +
+
+
+ + + +
+
diff --git a/projects/demo/src/modules/markup/form/examples/2/index.less b/projects/demo/src/modules/markup/form/examples/2/index.less new file mode 100644 index 000000000000..8f118fadcd6e --- /dev/null +++ b/projects/demo/src/modules/markup/form/examples/2/index.less @@ -0,0 +1,26 @@ +@import '@taiga-ui/core/styles/taiga-ui-local'; + +:host { + display: block; +} + +.stepper { + margin-bottom: 2rem; +} + +.uppercase-name { + text-transform: uppercase; +} + +.account { + display: flex; + flex: 1; + justify-content: space-between; +} + +.ticks-labels { + .tui-slider-ticks-labels(); + + color: var(--tui-text-secondary); + margin-top: 0.25rem; +} diff --git a/projects/demo/src/modules/markup/form/examples/2/index.ts b/projects/demo/src/modules/markup/form/examples/2/index.ts new file mode 100644 index 000000000000..28b5867ac28b --- /dev/null +++ b/projects/demo/src/modules/markup/form/examples/2/index.ts @@ -0,0 +1,124 @@ +import {AsyncPipe} from '@angular/common'; +import {Component} from '@angular/core'; +import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {TuiAmountPipe, TuiCurrency, TuiCurrencyPipe} from '@taiga-ui/addon-commerce'; +import {TuiDay, TuiTime} from '@taiga-ui/cdk'; +import {TuiButton, TuiError, TuiGroup, TuiLabel} from '@taiga-ui/core'; +import { + TuiBlock, + TuiCheckbox, + TuiDataListWrapper, + TuiFieldErrorPipe, + TuiRadio, + TuiStepper, +} from '@taiga-ui/kit'; +import { + TuiInputDateModule, + TuiInputModule, + TuiInputNumberModule, + TuiInputPasswordModule, + TuiInputPhoneModule, + TuiInputSliderModule, + TuiInputTimeModule, + TuiSelectModule, + TuiTextfieldControllerModule, +} from '@taiga-ui/legacy'; + +class User { + constructor( + protected readonly firstName: string, + protected readonly lastName: string, + ) {} + + protected toString(): string { + return `${this.firstName} ${this.lastName}`; + } +} + +class Account { + constructor( + protected readonly id: string, + protected readonly name: string, + protected readonly amount: number, + protected readonly currency: TuiCurrency, + protected readonly cardSvg: string, + ) {} +} + +@Component({ + standalone: true, + imports: [ + AsyncPipe, + ReactiveFormsModule, + TuiAmountPipe, + TuiBlock, + TuiButton, + TuiCheckbox, + TuiCurrencyPipe, + TuiDataListWrapper, + TuiError, + TuiFieldErrorPipe, + TuiGroup, + TuiInputDateModule, + TuiInputModule, + TuiInputNumberModule, + TuiInputPasswordModule, + TuiInputPhoneModule, + TuiInputSliderModule, + TuiInputTimeModule, + TuiLabel, + TuiRadio, + TuiSelectModule, + TuiStepper, + TuiTextfieldControllerModule, + ], + templateUrl: './index.html', + styleUrls: ['./index.less'], + changeDetection, +}) +export default class Example { + protected readonly svgIcons = { + common: 'https://ng-web-apis.github.io/dist/assets/images/common.svg', + universal: 'https://ng-web-apis.github.io/dist/assets/images/universal.svg', + intersection: + 'https://ng-web-apis.github.io/dist/assets/images/intersection-observer.svg', + mutation: + 'https://ng-web-apis.github.io/dist/assets/images/mutation-observer.svg', + }; + + protected persons = [new User('Roman', 'Sedov'), new User('Alex', 'Inkin')]; + + protected accounts = [ + new Account('1', 'Common', 24876.55, TuiCurrency.Ruble, this.svgIcons.common), + new Account('2', 'Universal', 335, TuiCurrency.Dollar, this.svgIcons.universal), + new Account( + '3', + 'Intersection', + 10000, + TuiCurrency.Euro, + this.svgIcons.intersection, + ), + new Account('4', 'Mutation', 100, TuiCurrency.Pound, this.svgIcons.mutation), + ]; + + protected testForm = new FormGroup({ + nameValue: new FormControl('', Validators.required), + textValue: new FormControl('', Validators.required), + passwordValue: new FormControl('', Validators.required), + phoneValue: new FormControl('', Validators.required), + moneyValue: new FormControl('100', Validators.required), + periodValue: new FormControl(new TuiDay(2017, 2, 15), Validators.required), + timeValue: new FormControl(new TuiTime(12, 30), Validators.required), + personValue: new FormControl(this.persons[0]), + quantityValue: new FormControl(50_000, Validators.required), + radioValue: new FormControl('with-commission'), + accountWherefrom: new FormControl(null), + accountWhere: new FormControl(null), + checkboxValue: new FormControl(false), + osnoValue: new FormControl(true), + usnValue: new FormControl(false), + eshnValue: new FormControl(false), + envdValue: new FormControl(false), + }); +} diff --git a/projects/demo/src/modules/markup/form/index.html b/projects/demo/src/modules/markup/form/index.html index bd97a4416d7c..9acbe0b3f949 100644 --- a/projects/demo/src/modules/markup/form/index.html +++ b/projects/demo/src/modules/markup/form/index.html @@ -94,5 +94,11 @@ [component]="1 | tuiComponent" [content]="1 | tuiExample" /> + From 488195c1faacc44cdc5dc190a359f016c9d3a577 Mon Sep 17 00:00:00 2001 From: shiv9604 Date: Sun, 15 Dec 2024 02:36:09 +0530 Subject: [PATCH 2/8] fix(demo): remove tui-form classes & integrate form layout component --- .../modules/markup/form/examples/2/index.html | 529 +++++++++--------- .../modules/markup/form/examples/2/index.less | 101 ++++ .../modules/markup/form/examples/2/index.ts | 16 +- .../layout/components/form/form.styles.less | 6 +- 4 files changed, 387 insertions(+), 265 deletions(-) diff --git a/projects/demo/src/modules/markup/form/examples/2/index.html b/projects/demo/src/modules/markup/form/examples/2/index.html index 0b6964671cc4..b8dc70016d7e 100644 --- a/projects/demo/src/modules/markup/form/examples/2/index.html +++ b/projects/demo/src/modules/markup/form/examples/2/index.html @@ -30,270 +30,277 @@ -
-
-
-

A header

-
- - Textfield - - - - -
-
- - Input date - - - - -
-
-
- Input password - -
-
- - Input money - - -
-
-
- - Some slider - -
- from 50 000 ₽ - to 3 000 000 ₽ -
-
Some additional text
- +
+

A header

+
+ + + Textfield + + + + + + + Input date + + + + +
+
+ Input password + +
+
+ + Input money + + +
+
+
+ + Some slider + +
+ from 50 000 ₽ + to 3 000 000 ₽ +
+
Some additional text
+ +
+
+
+ + Choose a person + -
-
-
- - Choose a person - - - -
{{ data.firstName }} {{ data.lastName }}
- - -
-
- Input phone - -
-
-

Header

-
+ - - -
-
- Input time -
-
- - - - -
-

Header

-
- -
-
- -
-

Header

-
- - Textfield - - - -
-
- - -
+
{{ data.firstName }} {{ data.lastName }}
+ +
+
+ Input phone + +
+
+
+

Header

+
+
+ + +
+
+ Input time +
+
+ + + + +
+
+

Header

+
+ + +
+

Header

+
+
+ + Textfield + + + +
+
+ +
Date: Sun, 15 Dec 2024 13:51:47 +0530 Subject: [PATCH 3/8] fix(demo): add depreciation warning --- projects/demo/src/modules/markup/form/index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/projects/demo/src/modules/markup/form/index.html b/projects/demo/src/modules/markup/form/index.html index 9acbe0b3f949..40bd769c96ea 100644 --- a/projects/demo/src/modules/markup/form/index.html +++ b/projects/demo/src/modules/markup/form/index.html @@ -3,6 +3,12 @@ type="markup" > + + If you need Form, it is recommended to use with form layout implementation as mentioned below. + @taiga-ui/styles/taiga-ui-global.less + styles is on track to be deprecated. + +
From caaabcb88c205ea79df4eb2113c887237b526a23 Mon Sep 17 00:00:00 2001 From: shiv9604 Date: Sun, 15 Dec 2024 13:53:02 +0530 Subject: [PATCH 4/8] fix(demo): move form component to layouts --- projects/demo/src/modules/app/demo-routes.ts | 2 +- projects/demo/src/modules/app/pages.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/demo/src/modules/app/demo-routes.ts b/projects/demo/src/modules/app/demo-routes.ts index e056dd65fac4..2e5ba739123f 100644 --- a/projects/demo/src/modules/app/demo-routes.ts +++ b/projects/demo/src/modules/app/demo-routes.ts @@ -59,7 +59,7 @@ export const DemoRoute = { Expand: '/components/expand', ElasticContainer: '/components/elastic-container', FieldError: '/pipes/field-error', - FormLayout: '/components/form', + FormLayout: '/layout/form', InputFiles: '/components/input-files', InputColor: '/components/input-color', Group: '/components/group', diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index d978607349e5..415843961836 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -422,7 +422,7 @@ export const pages: DocRoutePages = [ route: DemoRoute.Filter, }, { - section: 'Components', + section: 'Layout', title: 'Form', keywords: 'форма, поле, кнопка, группировка, группа', route: DemoRoute.FormLayout, From 92b69dd3a8bb78e5e0d24b3a8adec105ef54410b Mon Sep 17 00:00:00 2001 From: shiv9604 Date: Sun, 15 Dec 2024 13:53:52 +0530 Subject: [PATCH 5/8] fix(demo): refactor warning message --- projects/demo/src/modules/markup/form/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/demo/src/modules/markup/form/index.html b/projects/demo/src/modules/markup/form/index.html index 40bd769c96ea..3b840545f24c 100644 --- a/projects/demo/src/modules/markup/form/index.html +++ b/projects/demo/src/modules/markup/form/index.html @@ -4,9 +4,9 @@ > - If you need Form, it is recommended to use with form layout implementation as mentioned below. + If you need Form, it is recommended to use with form layout as mentioned in respective section below. @taiga-ui/styles/taiga-ui-global.less - styles is on track to be deprecated. + styles are on track to be deprecated.
From 052ee33738c7a913b371bfb85b34c5d6c292038e Mon Sep 17 00:00:00 2001 From: shiv9604 Date: Wed, 18 Dec 2024 15:37:24 +0530 Subject: [PATCH 6/8] fix(demo): replace other tui-form instances --- .../multi-select/examples/9/index.html | 2 +- .../pipes/field-error/examples/5/index.html | 27 ++++++++++--------- .../pipes/field-error/examples/5/index.ts | 2 ++ 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/projects/demo/src/modules/components/multi-select/examples/9/index.html b/projects/demo/src/modules/components/multi-select/examples/9/index.html index d92dc87f5abd..04bb4eae9b24 100644 --- a/projects/demo/src/modules/components/multi-select/examples/9/index.html +++ b/projects/demo/src/modules/components/multi-select/examples/9/index.html @@ -34,7 +34,7 @@ let-data="data" >
-
+