chore(demo): Dropdown add reuse component & migrate example to new …

…approach
taiga-family · Sep 25, 2024 · 0d97543 · 0d97543
1 parent 61170a6
commit 0d97543
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 21 deletions.
diff --git a/projects/demo/src/components/dropdown/index.html b/projects/demo/src/components/dropdown/index.html
@@ -0,0 +1,75 @@
+<tr>
+    <td colspan="3">
+        <span tuiTitle>
+            <a
+                tuiLink
+                [routerLink]="routes.Dropdown"
+            >
+                <strong>Dropdown</strong>
+            </a>
+            <span tuiSubtitle>Applied as a host directive</span>
+        </span>
+    </td>
+</tr>
+<tr
+    name="[(tuiDropdownOpen)]"
+    tuiDocAPIItem
+    type="boolean"
+    [(value)]="open"
+>
+    Manual control/monitor for the dropdown being visible
+</tr>
+<tr
+    name="[tuiDropdownAlign]"
+    tuiDocAPIItem
+    type="tuiDropdownAlign"
+    [items]="aligns"
+    [(value)]="align"
+>
+    Align of dropdown (does not work together with
+    <code>limitWidth === 'fixed'</code>
+    )
+</tr>
+<tr
+    name="[tuiDropdownDirection]"
+    tuiDocAPIItem
+    type="TuiVerticalDirection | null"
+    [items]="directions"
+    [(value)]="direction"
+>
+    Set a vertical direction of dropdown
+</tr>
+<tr
+    name="[tuiDropdownLimitWidth]"
+    tuiDocAPIItem
+    type="TuiDropdownWidth"
+    [items]="limitWidths"
+    [(value)]="limitWidth"
+>
+    Limit width of dropdown
+</tr>
+<tr
+    name="[tuiDropdownMinHeight]"
+    tuiDocAPIItem
+    type="number"
+    [(value)]="minHeight"
+>
+    Minimum height to calculate that dropdown fits to set
+    <code>tuiDropdownDirection</code>
+</tr>
+<tr
+    name="[tuiDropdownMaxHeight]"
+    tuiDocAPIItem
+    type="number"
+    [(value)]="maxHeight"
+>
+    Maximum height of dropdown
+</tr>
+<tr
+    name="[tuiDropdownOffset]"
+    tuiDocAPIItem
+    type="number"
+    [(value)]="offset"
+>
+    Dropdown offset
+</tr>
diff --git a/projects/demo/src/components/dropdown/index.ts b/projects/demo/src/components/dropdown/index.ts
@@ -0,0 +1,44 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {DemoRoute} from '@demo/routes';
+import {TuiDocAPIItem} from '@taiga-ui/addon-doc';
+import {
+    TuiDropdown,
+    type TuiDropdownAlign,
+    type TuiDropdownWidth,
+    TuiLink,
+    TuiTitle,
+    type TuiVerticalDirection,
+} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    selector: 'tbody[tuiDocDropdown]',
+    imports: [RouterLink, TuiDocAPIItem, TuiDropdown, TuiLink, TuiTitle],
+    templateUrl: './index.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TuiDocDropdown {
+    protected readonly routes = DemoRoute;
+
+    protected readonly aligns: readonly TuiDropdownAlign[] = ['left', 'right', 'center'];
+    protected readonly directions: TuiVerticalDirection[] = ['bottom', 'top'];
+    protected readonly limitWidths: readonly TuiDropdownWidth[] = [
+        'auto',
+        'min',
+        'fixed',
+    ];
+
+    @Input()
+    public tuiDocDropdown: readonly string[] | '' = '';
+
+    public open = false;
+
+    public align: TuiDropdownAlign = 'left';
+    public direction: TuiVerticalDirection | null = null;
+    public limitWidth: TuiDropdownWidth = 'fixed';
+    public minHeight = 80;
+    public maxHeight = 400;
+    public offset = 4;
+    public appearance = '';
+}
diff --git a/projects/demo/src/modules/directives/dropdown/index.html b/projects/demo/src/modules/directives/dropdown/index.html
@@ -49,13 +49,13 @@
                     tuiButton
                     type="button"
                     [tuiDropdown]="dropdownContent"
-                    [tuiDropdownAlign]="dropdownAlign"
-                    [tuiDropdownDirection]="dropdownDirection"
-                    [tuiDropdownLimitWidth]="dropdownLimitWidth"
-                    [tuiDropdownManual]="open"
-                    [tuiDropdownMaxHeight]="dropdownMaxHeight"
-                    [tuiDropdownMinHeight]="dropdownMinHeight"
-                    [tuiDropdownOffset]="dropdownOffset"
+                    [tuiDropdownAlign]="dropdown.align"
+                    [tuiDropdownDirection]="dropdown.direction"
+                    [tuiDropdownLimitWidth]="dropdown.limitWidth"
+                    [tuiDropdownManual]="dropdown.open"
+                    [tuiDropdownMaxHeight]="dropdown.maxHeight"
+                    [tuiDropdownMinHeight]="dropdown.minHeight"
+                    [tuiDropdownOffset]="dropdown.offset"
                     (click)="onClick()"
                     (tuiObscured)="onObscured($event)"
                 >
@@ -78,24 +78,27 @@
                 </ng-template>
             </span>
         </tui-doc-demo>
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="tuiDropdownManual"
-                documentationPropertyType="boolean"
-                [(documentationPropertyValue)]="open"
+        <table tuiDocAPI>
+            <tr
+                name="[tuiDropdownManual]"
+                tuiDocAPIItem
+                type="boolean"
+                [(value)]="open"
             >
                 Show dropdown (basic manual implementation, see related pages for other options)
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="tuiDropdown"
-                documentationPropertyType="PolymorpheusContent"
+            </tr>
+            <tr
+                name="[tuiDropdown]"
+                tuiDocAPIItem
+                type="PolymorpheusContent"
             >
                 Content
-            </ng-template>
-            <dropdown-documentation />
-        </tui-doc-documentation>
+            </tr>
+            <tbody
+                #dropdown
+                tuiDocDropdown
+            ></tbody>
+        </table>
     </ng-template>
 
     <tui-setup *pageTab />

diff --git a/projects/demo/src/modules/directives/dropdown/index.ts b/projects/demo/src/modules/directives/dropdown/index.ts
@@ -1,4 +1,5 @@
 import {Component, forwardRef} from '@angular/core';
+import {TuiDocDropdown} from '@demo/components/dropdown';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {DemoRoute} from '@demo/routes';
 import {TuiDemo} from '@demo/utils';
@@ -16,6 +17,7 @@ import {DropdownDocumentation} from '../../components/abstract/dropdown-document
         TuiActiveZone,
         TuiButton,
         TuiDemo,
+        TuiDocDropdown,
         TuiDropdown,
         TuiObscured,
     ],