feat(layout): Form add new component (#9933)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Dec 9, 2024 · 52ab367 · 52ab367
1 parent 1092bcc
commit 52ab367
Show file tree

Hide file tree

Showing 26 changed files with 455 additions and 45 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -3,7 +3,7 @@
     "import": ["@taiga-ui/cspell-config/cspell.config.js"],
     "files": ["*/*.*"],
     "ignorePaths": ["**/projects/i18n/languages/**", "**/addon-commerce/utils/get-currency-symbol.ts"],
-    "ignoreWords": ["Wachovia", "bottomsheet", "appbar", "qwertypgj_", "antialiasing"],
+    "ignoreWords": ["Wachovia", "bottomsheet", "appbar", "qwertypgj_", "antialiasing", "xxxs"],
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [
         {

diff --git a/projects/cdk/utils/di/create-options.ts b/projects/cdk/utils/di/create-options.ts
@@ -1,9 +1,12 @@
-import type {FactoryProvider, InjectionToken} from '@angular/core';
+import type {FactoryProvider, InjectionToken, ProviderToken} from '@angular/core';
 import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';
 
 export function tuiCreateOptions<T>(
     defaults: T,
-): [token: InjectionToken<T>, provider: (item: Partial<T>) => FactoryProvider] {
+): [
+    token: InjectionToken<T>,
+    provider: (item: Partial<T> | ProviderToken<Partial<T>>) => FactoryProvider,
+] {
     const token = tuiCreateToken(defaults);
 
     return [token, (options) => tuiProvideOptions(token, options, defaults)];

diff --git a/projects/cdk/utils/miscellaneous/provide-options.ts b/projects/cdk/utils/miscellaneous/provide-options.ts
@@ -1,16 +1,16 @@
-import type {FactoryProvider, InjectionToken} from '@angular/core';
+import type {FactoryProvider, InjectionToken, ProviderToken} from '@angular/core';
 import {inject} from '@angular/core';
 
 export function tuiProvideOptions<T>(
     provide: InjectionToken<T>,
-    options: Partial<T>,
+    options: Partial<T> | ProviderToken<Partial<T>>,
     fallback: T,
 ): FactoryProvider {
     return {
         provide,
         useFactory: (): T => ({
             ...(inject(provide, {optional: true, skipSelf: true}) || fallback),
-            ...options,
+            ...(inject(options as any, {optional: true}) || options),
         }),
     };
 }
diff --git a/projects/core/components/button/button.options.ts b/projects/core/components/button/button.options.ts
@@ -1,5 +1,4 @@
-import type {FactoryProvider} from '@angular/core';
-import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';
+import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';
 import type {TuiAppearanceOptions} from '@taiga-ui/core/directives/appearance';
 import type {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core/types';
 
@@ -12,10 +11,6 @@ export const TUI_BUTTON_DEFAULT_OPTIONS: TuiButtonOptions = {
     size: 'l',
 };
 
-export const TUI_BUTTON_OPTIONS = tuiCreateToken(TUI_BUTTON_DEFAULT_OPTIONS);
-
-export function tuiButtonOptionsProvider(
-    options: Partial<TuiButtonOptions>,
-): FactoryProvider {
-    return tuiProvideOptions(TUI_BUTTON_OPTIONS, options, TUI_BUTTON_DEFAULT_OPTIONS);
-}
+export const [TUI_BUTTON_OPTIONS, tuiButtonOptionsProvider] = tuiCreateOptions(
+    TUI_BUTTON_DEFAULT_OPTIONS,
+);
diff --git a/projects/core/components/notification/notification.options.ts b/projects/core/components/notification/notification.options.ts
@@ -1,6 +1,5 @@
-import type {Provider} from '@angular/core';
 import type {TuiStringHandler} from '@taiga-ui/cdk/types';
-import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';
+import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';
 import type {TuiAppearanceOptions} from '@taiga-ui/core/directives/appearance';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 
@@ -31,14 +30,5 @@ export const TUI_NOTIFICATION_DEFAULT_OPTIONS: TuiNotificationOptions = {
 /**
  * Default parameters for notification alert component
  */
-export const TUI_NOTIFICATION_OPTIONS = tuiCreateToken(TUI_NOTIFICATION_DEFAULT_OPTIONS);
-
-export function tuiNotificationOptionsProvider(
-    options: Partial<TuiNotificationOptions>,
-): Provider {
-    return tuiProvideOptions(
-        TUI_NOTIFICATION_OPTIONS,
-        options,
-        TUI_NOTIFICATION_DEFAULT_OPTIONS,
-    );
-}
+export const [TUI_NOTIFICATION_OPTIONS, tuiNotificationOptionsProvider] =
+    tuiCreateOptions(TUI_NOTIFICATION_DEFAULT_OPTIONS);
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -324,6 +324,11 @@ export const ROUTES: Routes = [
         loadComponent: async () => import('../components/input-color'),
         title: 'InputColor',
     }),
+    route({
+        path: DemoRoute.FormLayout,
+        loadComponent: async () => import('../components/form'),
+        title: 'Form',
+    }),
     route({
         path: DemoRoute.Group,
         loadComponent: async () => import('../components/group'),
@@ -746,7 +751,7 @@ export const ROUTES: Routes = [
     route({
         path: DemoRoute.Form,
         loadComponent: async () => import('../markup/form'),
-        title: 'Form',
+        title: 'Form ',
     }),
     route({
         path: DemoRoute.Lists,

diff --git a/projects/demo/src/modules/app/demo-routes.ts b/projects/demo/src/modules/app/demo-routes.ts
@@ -59,6 +59,7 @@ export const DemoRoute = {
     Expand: '/components/expand',
     ElasticContainer: '/components/elastic-container',
     FieldError: '/pipes/field-error',
+    FormLayout: '/components/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
@@ -421,6 +421,12 @@ export const pages: DocRoutePages = [
         keywords: 'фильтр, filters',
         route: DemoRoute.Filter,
     },
+    {
+        section: 'Components',
+        title: 'Form',
+        keywords: 'форма, поле, кнопка, группировка, группа',
+        route: DemoRoute.FormLayout,
+    },
     {
         section: 'Components',
         title: 'Group',

diff --git a/projects/demo/src/modules/components/form/examples/1/index.html b/projects/demo/src/modules/components/form/examples/1/index.html
@@ -0,0 +1,87 @@
+<form
+    tuiAppearance="floating"
+    tuiCardLarge
+    tuiForm="m"
+    [formGroup]="form"
+    [style.max-width.rem]="32"
+>
+    <header tuiHeader>
+        <h2 tuiTitle>
+            Registration form
+            <span tuiSubtitle>Tell us about yourself</span>
+        </h2>
+        <span tuiAccessories>
+            <tui-segmented>
+                <label>
+                    <input
+                        formControlName="basic"
+                        type="radio"
+                        [value]="true"
+                    />
+                    Brief
+                </label>
+                <label>
+                    <input
+                        formControlName="basic"
+                        type="radio"
+                        [value]="false"
+                    />
+                    Detailed
+                </label>
+            </tui-segmented>
+        </span>
+    </header>
+    <tui-notification appearance="warning">
+        <h3 tuiTitle>
+            Authenticity required
+            <span tuiSubtitle>Please be honest and use your real data</span>
+        </h3>
+    </tui-notification>
+    <tui-textfield>
+        <label tuiLabel>Name</label>
+        <input
+            formControlName="name"
+            placeholder="John Wick"
+            tuiTextfield
+        />
+    </tui-textfield>
+    <tui-error
+        formControlName="name"
+        [error]="[] | tuiFieldError | async"
+    />
+    <ng-container *ngIf="!form.controls.basic.value">
+        <tui-textfield>
+            <label tuiLabel>Email</label>
+            <input
+                formControlName="email"
+                placeholder="[email protected]"
+                tuiTextfield
+                type="email"
+            />
+        </tui-textfield>
+        <label tuiLabel>
+            <input
+                formControlName="subscribe"
+                tuiSwitch
+                type="checkbox"
+            />
+            Subscribe for newsletter
+            <tui-icon tuiTooltip="We will not send you spam, pinky promise!" />
+        </label>
+    </ng-container>
+    <footer>
+        <button
+            appearance="secondary"
+            tuiButton
+            type="button"
+        >
+            Cancel
+        </button>
+        <button
+            tuiButton
+            type="submit"
+        >
+            Submit
+        </button>
+    </footer>
+</form>
diff --git a/projects/demo/src/modules/components/form/examples/1/index.ts b/projects/demo/src/modules/components/form/examples/1/index.ts
@@ -0,0 +1,50 @@
+import {AsyncPipe, NgIf} from '@angular/common';
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {
+    TuiAppearance,
+    TuiButton,
+    TuiError,
+    TuiIcon,
+    TuiNotification,
+    TuiTextfield,
+    TuiTitle,
+} from '@taiga-ui/core';
+import {TuiFieldErrorPipe, TuiSegmented, TuiSwitch, TuiTooltip} from '@taiga-ui/kit';
+import {TuiCardLarge, TuiForm, TuiHeader} from '@taiga-ui/layout';
+
+@Component({
+    standalone: true,
+    imports: [
+        AsyncPipe,
+        NgIf,
+        ReactiveFormsModule,
+        TuiAppearance,
+        TuiButton,
+        TuiCardLarge,
+        TuiError,
+        TuiFieldErrorPipe,
+        TuiForm,
+        TuiHeader,
+        TuiIcon,
+        TuiNotification,
+        TuiSegmented,
+        TuiSwitch,
+        TuiTextfield,
+        TuiTitle,
+        TuiTooltip,
+    ],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly form = new FormGroup({
+        name: new FormControl('', Validators.required),
+        email: new FormControl(''),
+        subscribe: new FormControl(false),
+        basic: new FormControl(true),
+    });
+}
diff --git a/projects/demo/src/modules/components/form/examples/import/import.md b/projects/demo/src/modules/components/form/examples/import/import.md
@@ -0,0 +1,18 @@
+```ts
+import {TuiAppearance} from '@taiga-ui/core';
+import {TuiCardLarge, TuiForm} from '@taiga-ui/layout';
+
+// ...
+
+@Component({
+  standalone: true,
+  imports: [
+    // ...
+    TuiCardLarge,
+    TuiAppearance,
+    TuiForm,
+  ],
+  // ...
+})
+export class Example {}
+```
diff --git a/projects/demo/src/modules/components/form/examples/import/template.md b/projects/demo/src/modules/components/form/examples/import/template.md
@@ -0,0 +1,9 @@
+```html
+<form
+  tuiAppearance="floating"
+  tuiCardLarge
+  tuiForm="l"
+>
+  <!-- Form content -->
+</form>
+```
diff --git a/projects/demo/src/modules/components/form/index.html b/projects/demo/src/modules/components/form/index.html
@@ -0,0 +1,24 @@
+<tui-doc-page
+    header="Form"
+    package="LAYOUT"
+    type="components"
+>
+    <tui-notification appearance="warning">
+        Size sets DI options, therefore it only works for static values like
+        <code>tuiForm="m"</code>
+        . If you need dynamic binding for the size, you would have to set it for buttons, segmented control and header
+        manually as well.
+    </tui-notification>
+    <ng-template pageTab>
+        <tui-doc-example
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [fullsize]="true"
+            [heading]="example"
+            [id]="example | tuiKebab"
+        />
+    </ng-template>
+
+    <tui-setup *pageTab="'Setup'" />
+</tui-doc-page>
diff --git a/projects/demo/src/modules/components/form/index.less b/projects/demo/src/modules/components/form/index.less
@@ -0,0 +1,3 @@
+.bar {
+    block-size: 6.25rem;
+}
diff --git a/projects/demo/src/modules/components/form/index.ts b/projects/demo/src/modules/components/form/index.ts
@@ -0,0 +1,14 @@
+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',
+    styleUrls: ['./index.less'],
+    changeDetection,
+})
+export default class Page {
+    protected readonly examples = ['Basic'];
+}