feat(addon-doc): allow adding extra tabs with DI

taiga-family · Oct 8, 2024 · 1df6c82 · 1df6c82
1 parent 48048de
commit 1df6c82
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/projects/addon-doc/components/page/page.component.ts b/projects/addon-doc/components/page/page.component.ts
@@ -1,4 +1,4 @@
-import {NgForOf, NgIf, NgTemplateOutlet} from '@angular/common';
+import {KeyValuePipe, NgForOf, NgIf, NgTemplateOutlet} from '@angular/common';
 import type {QueryList} from '@angular/core';
 import {
     ChangeDetectionStrategy,
@@ -7,18 +7,19 @@ import {
     inject,
     Input,
 } from '@angular/core';
-import {RouterLink, RouterLinkActive} from '@angular/router';
+import {ActivatedRoute, RouterLink, RouterLinkActive} from '@angular/router';
 import {TUI_DOC_DEFAULT_TABS, TUI_DOC_SUPPORT_LANGUAGE} from '@taiga-ui/addon-doc/tokens';
 import {EMPTY_QUERY} from '@taiga-ui/cdk/constants';
 import {TuiReplacePipe} from '@taiga-ui/cdk/pipes/replace';
 import {TuiAutoColorPipe} from '@taiga-ui/core/pipes/auto-color';
 import {TuiChip} from '@taiga-ui/kit/components/chip';
 import {TuiTabs} from '@taiga-ui/kit/components/tabs';
+import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 
 import {TuiDocSeeAlso} from '../internal/see-also';
 import {TuiDocSourceCode} from '../internal/source-code/source-code.component';
 import {TuiDocLanguageSwitcher} from '../language-switcher';
-import {PAGE_PROVIDERS, PAGE_SEE_ALSO} from './page.providers';
+import {PAGE_PROVIDERS, PAGE_SEE_ALSO, TUI_DOC_TABS} from './page.providers';
 import {TuiDocPageTabConnector} from './page-tab.directive';
 
 @Component({
@@ -37,13 +38,16 @@ import {TuiDocPageTabConnector} from './page-tab.directive';
         TuiDocSourceCode,
         TuiReplacePipe,
         TuiTabs,
+        KeyValuePipe,
+        PolymorpheusOutlet,
     ],
     templateUrl: './page.template.html',
     styleUrls: ['./page.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: PAGE_PROVIDERS,
 })
 export class TuiDocPage {
+    protected readonly tabs = inject(TUI_DOC_TABS)(inject(ActivatedRoute).snapshot);
     protected readonly supportLanguage = inject(TUI_DOC_SUPPORT_LANGUAGE);
     protected readonly defaultTabs = inject(TUI_DOC_DEFAULT_TABS);
     protected readonly from = / /g;

diff --git a/projects/addon-doc/components/page/page.providers.ts b/projects/addon-doc/components/page/page.providers.ts
@@ -1,7 +1,14 @@
 import type {Provider} from '@angular/core';
 import {ElementRef} from '@angular/core';
+import type {ActivatedRouteSnapshot} from '@angular/router';
 import {TUI_DOC_SEE_ALSO} from '@taiga-ui/addon-doc/tokens';
+import type {TuiHandler} from '@taiga-ui/cdk';
 import {tuiCreateToken} from '@taiga-ui/cdk/utils/miscellaneous';
+import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
+
+export const TUI_DOC_TABS = tuiCreateToken<
+    TuiHandler<ActivatedRouteSnapshot, Record<string, PolymorpheusContent>>
+>(() => ({}));
 
 /**
  * Array if related page titles

diff --git a/projects/addon-doc/components/page/page.template.html b/projects/addon-doc/components/page/page.template.html
@@ -46,6 +46,16 @@ <h1 class="t-title">
                 </a>
             </ng-container>
         </ng-container>
+        <ng-container *ngFor="let tab of tabs | keyvalue">
+            <a
+                *tuiItem
+                routerLinkActive
+                tuiTab
+                [routerLink]="tab.key"
+            >
+                {{ tab.key }}
+            </a>
+        </ng-container>
     </tui-tabs-with-more>
 
     <div
@@ -76,4 +86,9 @@ <h1 class="t-title">
             [ngTemplateOutlet]="tab.template"
         />
     </ng-container>
+    <ng-container *ngFor="let tab of tabs | keyvalue; index as index">
+        <ng-container *ngIf="index + tabConnectors.length === activeItemIndex">
+            <ng-container *polymorpheusOutlet="tab.value as text">{{ text }}</ng-container>
+        </ng-container>
+    </ng-container>
 </div>