@taiga-ui/addon-doc 4.52.0-canary.eb5ffe3 → 4.52.0-canary.facf139

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +31 -41
  2. package/fesm2022/taiga-ui-addon-doc-components.mjs +20 -22
  3. package/fesm2022/taiga-ui-addon-doc-components.mjs.map +1 -1
  4. package/package.json +1 -2
package/README.md CHANGED
@@ -11,7 +11,7 @@
11
11
  Install main packages:
12
12
 
13
13
  ```
14
- npm i @taiga-ui/{cdk,core,kit,addon-mobile}
14
+ npm i @taiga-ui/{cdk,core,kit}
15
15
  ```
16
16
 
17
17
  Install doc:
@@ -24,24 +24,22 @@ npm i @taiga-ui/addon-doc
24
24
 
25
25
  > You can also see [community made guide](https://habr.com/ru/company/europlan/blog/559804/) in Russian
26
26
 
27
- 1. Include `TuiDocMainModule` in your App module and use in your template:
27
+ 1. Include `TuiDocMain` in your App imports and use in your template:
28
28
 
29
29
  ```html
30
30
  <tui-doc-main>You can add content here, it will be shown below navigation in the sidebar</tui-doc-main>
31
31
  ```
32
32
 
33
- 2. Configure languages to highlight in your main module:
33
+ 2. Configure languages to highlight in your root providers:
34
34
 
35
35
  ```typescript
36
36
  import {Component} from '@angular/core';
37
- import {TuiDocMainModule} from '@taiga-ui/addon-doc';
38
- import {hljsLanguages} from './hljsLanguages';
39
- import {HIGHLIGHT_OPTIONS, HighlightLanguage} from 'ngx-highlightjs';
37
+ import {TuiDocMain} from '@taiga-ui/addon-doc';
38
+ import {HIGHLIGHT_OPTIONS} from 'ngx-highlightjs';
40
39
  import {App} from './app.component';
41
40
 
42
41
  @Component({
43
- standalone: true,
44
- imports: [TuiDocMainModule],
42
+ imports: [TuiDocMain],
45
43
  providers: [
46
44
  {
47
45
  provide: HIGHLIGHT_OPTIONS,
@@ -81,10 +79,10 @@ npm i @taiga-ui/addon-doc
81
79
 
82
80
  const appRoutes: Routes = [
83
81
  {
84
- path: 'super-page',
85
- loadChildren: async () => (await import('../super-page/super-page.module')).SuperModule,
82
+ path: 'doc-page-1',
83
+ loadComponent: async () => (await import('../doc-page-1')).DocPage,
86
84
  data: {
87
- title: 'Super Page',
85
+ title: 'Documentation page #1',
88
86
  },
89
87
  },
90
88
  // ...
@@ -96,42 +94,34 @@ npm i @taiga-ui/addon-doc
96
94
 
97
95
  5. Create pages.
98
96
 
99
- _Module:_
100
-
101
- ```ts
102
- import {TuiAddonDoc} from '@taiga-ui/addon-doc';
103
-
104
- @Component({
105
- standalone: true,
106
- imports: [TuiAddonDoc, SuperComponent],
107
- })
108
- export class App {}
109
- ```
110
-
111
97
  _Component:_
112
98
 
113
99
  ```ts
114
100
  // ..
115
101
 
116
102
  @Component({
117
- standalone: true,
118
- selector: 'super',
103
+ selector: 'first-doc-page',
119
104
  templateUrl: './super.component.html',
105
+ imports: [TuiAddonDoc],
120
106
  })
121
- export class Super {
107
+ export class DocPage {
122
108
  // Keys would be used as tabs for code example
123
109
  readonly example = {
124
110
  // import a file as a string
125
- TypeScript: import('./examples/1/index.ts?raw'),
126
- HTML: import('./examples/1/index.html?raw'),
111
+ TypeScript: import('./examples/1/index.ts?raw', {with: {loader: 'text'}}),
112
+ HTML: import('./examples/1/index.html', {with: {loader: 'text'}}),
113
+ LESS: '.box { color: red }',
127
114
  };
128
115
 
129
116
  readonly inputVariants = ['input 1', 'input 2'];
130
117
  }
131
118
  ```
132
119
 
133
- > You can use any tool to import a file as a string. For example, you can use
134
- > [Webpack Asset Modules](https://webpack.js.org/guides/asset-modules/).
120
+ > You can use any tool to import a file as a string. For example, you can use:
121
+ >
122
+ > - [Esbuild loaders](https://angular.dev/tools/cli/build-system-migration#file-extension-loader-customization)
123
+ > (recommended)
124
+ > - [Webpack Asset Modules](https://webpack.js.org/guides/asset-modules)
135
125
 
136
126
  _Template:_
137
127
 
@@ -139,7 +129,6 @@ npm i @taiga-ui/addon-doc
139
129
  <tui-doc-page
140
130
  header="Super"
141
131
  package="SUPER-PACKAGE"
142
- deprecated
143
132
  >
144
133
  <ng-template pageTab>
145
134
  <!-- default tab name would be used -->
@@ -158,17 +147,18 @@ npm i @taiga-ui/addon-doc
158
147
  <tui-doc-demo>
159
148
  <super-component [input]="input"></super-component>
160
149
  </tui-doc-demo>
161
- <tui-doc-documentation>
162
- <ng-template
163
- documentationPropertyName="input"
164
- documentationPropertyMode="input"
165
- documentationPropertyType="T"
166
- [documentationPropertyValues]="inputVariants"
167
- [(documentationPropertyValue)]="input"
150
+
151
+ <table tuiDocAPI>
152
+ <tr
153
+ name="[input]"
154
+ tuiDocAPIItem
155
+ type="T"
156
+ [items]="inputVariants"
157
+ [(value)]="input"
168
158
  >
169
- Some input
170
- </ng-template>
171
- </tui-doc-documentation>
159
+ Some input description
160
+ </tr>
161
+ </table>
172
162
  </ng-template>
173
163
  </tui-doc-page>
174
164
  ```