@dev-tcloud/tcloud-ui 6.23.1 → 6.23.2
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.
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
## Caracteristicas
|
|
4
4
|
|
|
5
|
-
O `TCloudUiMarkReadmeComponent` e um componente standalone
|
|
5
|
+
O `TCloudUiMarkReadmeComponent` e um componente standalone responsavel por carregar um arquivo Markdown via `HttpClient` e renderiza-lo com `ngx-markdown`.
|
|
6
6
|
|
|
7
7
|
Funcionalidades principais:
|
|
8
|
-
-
|
|
9
|
-
- Renderiza o conteudo
|
|
10
|
-
-
|
|
11
|
-
-
|
|
8
|
+
- Carrega o arquivo informado em `pathName`.
|
|
9
|
+
- Renderiza o conteudo Markdown com suporte a highlight de blocos de codigo.
|
|
10
|
+
- Pode exibir o conteudo dentro de um accordion ou diretamente na pagina.
|
|
11
|
+
- Exibe indicador de carregamento durante a busca do arquivo.
|
|
12
|
+
- Permite definir um titulo para a documentacao por meio de `description`.
|
|
12
13
|
|
|
13
14
|
## Instalacao
|
|
14
15
|
|
|
@@ -26,15 +27,16 @@ import { TCloudUiMarkReadmeComponent } from 'tcloud-ui';
|
|
|
26
27
|
export class ExemploComponent {}
|
|
27
28
|
```
|
|
28
29
|
|
|
29
|
-
Se a aplicacao utilizar a configuracao standalone da biblioteca, mantenha `provideTCloudUi(...)` no bootstrap para disponibilizar os providers necessarios.
|
|
30
|
-
|
|
31
30
|
## Propriedades (API)
|
|
32
31
|
|
|
33
32
|
### Inputs
|
|
34
33
|
|
|
35
34
|
| Nome | Tipo | Descricao | Valor Default |
|
|
36
35
|
|------|------|-----------|---------------|
|
|
37
|
-
|
|
|
36
|
+
| pathName | `string` | Caminho do arquivo Markdown que sera carregado, por exemplo `tcloud-ui/docs/tcloud-ui-mark-readme.md`. | `''` |
|
|
37
|
+
| description | `string` | Texto exibido como titulo do accordion ou cabecalho da documentacao. | `''` |
|
|
38
|
+
| useAccordion | `boolean` | Define se o conteudo sera exibido dentro de `tcloud-ui-accordion`. Quando `false`, renderiza o Markdown diretamente na pagina. | `true` |
|
|
39
|
+
| open | `boolean` | Estado inicial do accordion quando `useAccordion` estiver habilitado. | `false` |
|
|
38
40
|
|
|
39
41
|
### Outputs
|
|
40
42
|
|
|
@@ -45,11 +47,22 @@ Este componente nao possui `@Output()` publicos.
|
|
|
45
47
|
### Uso Basico
|
|
46
48
|
|
|
47
49
|
```html
|
|
48
|
-
<tcloud-ui-mark-readme
|
|
50
|
+
<tcloud-ui-mark-readme
|
|
51
|
+
[pathName]="'tcloud-ui/docs/tcloud-ui-mark-readme.md'"
|
|
52
|
+
[description]="'tcloud-ui-mark-readme'">
|
|
53
|
+
</tcloud-ui-mark-readme>
|
|
49
54
|
```
|
|
50
55
|
|
|
51
56
|
### Uso Avancado
|
|
52
57
|
|
|
58
|
+
```html
|
|
59
|
+
<tcloud-ui-mark-readme
|
|
60
|
+
[useAccordion]="false"
|
|
61
|
+
[pathName]="selectedPath"
|
|
62
|
+
[description]="selectedTitle">
|
|
63
|
+
</tcloud-ui-mark-readme>
|
|
64
|
+
```
|
|
65
|
+
|
|
53
66
|
```typescript
|
|
54
67
|
import { Component } from '@angular/core';
|
|
55
68
|
import { TCloudUiMarkReadmeComponent } from 'tcloud-ui';
|
|
@@ -58,13 +71,12 @@ import { TCloudUiMarkReadmeComponent } from 'tcloud-ui';
|
|
|
58
71
|
selector: 'app-exemplo',
|
|
59
72
|
standalone: true,
|
|
60
73
|
imports: [TCloudUiMarkReadmeComponent],
|
|
61
|
-
|
|
62
|
-
<tcloud-ui-mark-readme [componentName]="selectedDoc"></tcloud-ui-mark-readme>
|
|
63
|
-
`
|
|
74
|
+
templateUrl: './app-exemplo.component.html'
|
|
64
75
|
})
|
|
65
|
-
export class
|
|
66
|
-
|
|
76
|
+
export class AppExemploComponent {
|
|
77
|
+
selectedPath = 'tcloud-ui/docs/tcloud-ui-accordion.md';
|
|
78
|
+
selectedTitle = 'tcloud-ui-accordion';
|
|
67
79
|
}
|
|
68
80
|
```
|
|
69
81
|
|
|
70
|
-
Neste formato, a pagina pode
|
|
82
|
+
Neste formato, a pagina pode controlar dinamicamente qual documento sera carregado e optar por renderiza-lo sem accordion, como na pagina de demonstracao do componente.
|
|
@@ -9760,6 +9760,8 @@ class TCloudUiMarkReadmeComponent {
|
|
|
9760
9760
|
this.loading = false;
|
|
9761
9761
|
this.ID = 'mark-readme-content';
|
|
9762
9762
|
this.changelogContent = '';
|
|
9763
|
+
this.useAccordion = true;
|
|
9764
|
+
this.open = false;
|
|
9763
9765
|
this._pathName = '';
|
|
9764
9766
|
this._description = '';
|
|
9765
9767
|
}
|
|
@@ -9835,7 +9837,7 @@ class TCloudUiMarkReadmeComponent {
|
|
|
9835
9837
|
});
|
|
9836
9838
|
}
|
|
9837
9839
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TCloudUiMarkReadmeComponent, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9838
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TCloudUiMarkReadmeComponent, isStandalone: true, selector: "tcloud-ui-mark-readme", inputs: { pathName: "pathName", description: "description" }, ngImport: i0, template: "<
|
|
9840
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TCloudUiMarkReadmeComponent, isStandalone: true, selector: "tcloud-ui-mark-readme", inputs: { useAccordion: "useAccordion", open: "open", pathName: "pathName", description: "description" }, ngImport: i0, template: "<div *ngIf=\"message\" [innerHTML]=\"message\"></div>\n\n<ng-container *ngIf=\"useAccordion\">\n <br><div><hr></div><br>\n <tcloud-ui-accordion [show]=\"open\">\n <tcloud-ui-accordion-title>\n {{ description }}\n </tcloud-ui-accordion-title>\n \n <tcloud-ui-accordion-body>\n <div>\n <tcloud-ui-loading [loading]=\"loading\" [mode]=\"'inline'\"></tcloud-ui-loading>\n <markdown\n [id]=\"ID\"\n [data]=\"changelogContent\"\n (ready)=\"onMarkdownReady()\">\n </markdown>\n </div>\n </tcloud-ui-accordion-body>\n </tcloud-ui-accordion>\n</ng-container>\n\n<div *ngIf=\"!useAccordion\">\n <h3 *ngIf=\"description\" [innerHTML]=\"description\"></h3>\n <tcloud-ui-loading [loading]=\"loading\" [mode]=\"'inline'\"></tcloud-ui-loading>\n <markdown\n [id]=\"ID\"\n [data]=\"changelogContent\"\n (ready)=\"onMarkdownReady()\">\n </markdown>\n</div>\n\n\n", styles: [".hljs{color:#383a42;background:#fafafa}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#e45649}.hljs-built_in,.hljs-builtin-name,.hljs-class,.hljs-title{color:#c18401}.hljs-comment,.hljs-quote,.hljs-deletion{color:#a0a1a7;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-section,.hljs-link,.hljs-emphasis{color:#a626a4}.hljs-addition,.hljs-string,.hljs-symbol{color:#50a14f}.hljs-code{color:#383a42}.hljs-meta-string{color:#50a14f}.hljs-regexp{color:#0184bc}.hljs-name{color:#4078f2}.hljs-type,.hljs-attr-name,.hljs-selector-pseudo{color:#e45649}.hljs-subst{color:#383a42}.hljs-tag{color:#e45649}.hljs-tag .hljs-name,.hljs-tag .hljs-attr{color:#383a42}.hljs-template-tag,.hljs-template-variable{color:#a626a4}#mark-readme-content{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;color:#333}#mark-readme-content h1,#mark-readme-content h2,#mark-readme-content h3,#mark-readme-content h4,#mark-readme-content h5,#mark-readme-content h6{margin-top:1.5em;margin-bottom:.5em;font-weight:600;line-height:1.25}#mark-readme-content h1{font-size:2em;border-bottom:1px solid #eaecef;padding-bottom:.3em}#mark-readme-content h2{font-size:1.5em;border-bottom:1px solid #eaecef;padding-bottom:.3em}#mark-readme-content h3{font-size:1.25em}#mark-readme-content p{margin:.5em 0}#mark-readme-content ul,#mark-readme-content ol{padding-left:2em;margin:.5em 0}#mark-readme-content ul li,#mark-readme-content ol li{margin:.25em 0}#mark-readme-content a{color:#0366d6;text-decoration:none}#mark-readme-content a:hover{text-decoration:underline}#mark-readme-content code{background-color:#f6f8fa;border-radius:3px;padding:.2em .4em;font-family:Courier New,Courier,monospace;font-size:.9em;color:#24292e;white-space:normal}#mark-readme-content pre{background-color:#fafafa!important;border:1px solid #ddd!important;border-radius:6px!important;overflow:auto!important;padding:16px!important;margin:1em 0!important;font-family:Courier New,Courier,monospace!important;font-size:.9em!important;line-height:1.45!important;white-space:pre-wrap!important;word-wrap:break-word!important;overflow-wrap:break-word!important;display:block!important}#mark-readme-content pre code{background-color:transparent!important;padding:0!important;margin:0!important;border-radius:0!important;color:inherit!important;display:block!important;white-space:pre-wrap!important;word-break:break-word!important;word-spacing:normal!important;overflow-wrap:break-word!important;tab-size:4!important;-moz-tab-size:4!important;border:none!important;font-family:Courier New,Courier,monospace!important;font-size:.9em!important;line-height:1.45!important}#mark-readme-content pre code.language-typescript,#mark-readme-content pre code.language-html,#mark-readme-content pre code.language-css,#mark-readme-content pre code.language-scss,#mark-readme-content pre code.language-javascript,#mark-readme-content pre code.language-json,#mark-readme-content pre code.language-bash{color:inherit!important}#mark-readme-content table{border-collapse:collapse;width:100%;margin:1em 0}#mark-readme-content table thead{background-color:#f6f8fa;font-weight:600}#mark-readme-content table th,#mark-readme-content table td{border:1px solid #ddd;padding:12px;text-align:left}#mark-readme-content table tr:nth-child(2n){background-color:#f9fafb}#mark-readme-content table tr:hover{background-color:#f0f3f8}#mark-readme-content blockquote{border-left:4px solid #ddd;color:#666;padding:.5em 1em;margin:1em 0}#mark-readme-content hr{border:none;border-top:2px solid #eaecef;margin:2em 0}#mark-readme-content img{max-width:100%;height:auto}.p-relative{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i3.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: TCloudUiAccordionComponent, selector: "tcloud-ui-accordion", inputs: ["disabled", "show", "loading"], outputs: ["onAction"] }, { kind: "component", type: TCloudUiAccordionTitleComponent, selector: "tcloud-ui-accordion-title" }, { kind: "component", type: TCloudUiAccordionBodyComponent, selector: "tcloud-ui-accordion-body" }, { kind: "component", type: TCloudUiLoadingComponent, selector: "tcloud-ui-loading", inputs: ["gif", "mode", "onlyInline", "onlyIcon", "full", "loading"] }] }); }
|
|
9839
9841
|
}
|
|
9840
9842
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TCloudUiMarkReadmeComponent, decorators: [{
|
|
9841
9843
|
type: Component,
|
|
@@ -9846,8 +9848,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
9846
9848
|
TCloudUiAccordionTitleComponent,
|
|
9847
9849
|
TCloudUiAccordionBodyComponent,
|
|
9848
9850
|
TCloudUiLoadingComponent
|
|
9849
|
-
], template: "<
|
|
9850
|
-
}], ctorParameters: () => [{ type: i1$2.HttpClient }], propDecorators: {
|
|
9851
|
+
], template: "<div *ngIf=\"message\" [innerHTML]=\"message\"></div>\n\n<ng-container *ngIf=\"useAccordion\">\n <br><div><hr></div><br>\n <tcloud-ui-accordion [show]=\"open\">\n <tcloud-ui-accordion-title>\n {{ description }}\n </tcloud-ui-accordion-title>\n \n <tcloud-ui-accordion-body>\n <div>\n <tcloud-ui-loading [loading]=\"loading\" [mode]=\"'inline'\"></tcloud-ui-loading>\n <markdown\n [id]=\"ID\"\n [data]=\"changelogContent\"\n (ready)=\"onMarkdownReady()\">\n </markdown>\n </div>\n </tcloud-ui-accordion-body>\n </tcloud-ui-accordion>\n</ng-container>\n\n<div *ngIf=\"!useAccordion\">\n <h3 *ngIf=\"description\" [innerHTML]=\"description\"></h3>\n <tcloud-ui-loading [loading]=\"loading\" [mode]=\"'inline'\"></tcloud-ui-loading>\n <markdown\n [id]=\"ID\"\n [data]=\"changelogContent\"\n (ready)=\"onMarkdownReady()\">\n </markdown>\n</div>\n\n\n", styles: [".hljs{color:#383a42;background:#fafafa}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#e45649}.hljs-built_in,.hljs-builtin-name,.hljs-class,.hljs-title{color:#c18401}.hljs-comment,.hljs-quote,.hljs-deletion{color:#a0a1a7;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-section,.hljs-link,.hljs-emphasis{color:#a626a4}.hljs-addition,.hljs-string,.hljs-symbol{color:#50a14f}.hljs-code{color:#383a42}.hljs-meta-string{color:#50a14f}.hljs-regexp{color:#0184bc}.hljs-name{color:#4078f2}.hljs-type,.hljs-attr-name,.hljs-selector-pseudo{color:#e45649}.hljs-subst{color:#383a42}.hljs-tag{color:#e45649}.hljs-tag .hljs-name,.hljs-tag .hljs-attr{color:#383a42}.hljs-template-tag,.hljs-template-variable{color:#a626a4}#mark-readme-content{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;color:#333}#mark-readme-content h1,#mark-readme-content h2,#mark-readme-content h3,#mark-readme-content h4,#mark-readme-content h5,#mark-readme-content h6{margin-top:1.5em;margin-bottom:.5em;font-weight:600;line-height:1.25}#mark-readme-content h1{font-size:2em;border-bottom:1px solid #eaecef;padding-bottom:.3em}#mark-readme-content h2{font-size:1.5em;border-bottom:1px solid #eaecef;padding-bottom:.3em}#mark-readme-content h3{font-size:1.25em}#mark-readme-content p{margin:.5em 0}#mark-readme-content ul,#mark-readme-content ol{padding-left:2em;margin:.5em 0}#mark-readme-content ul li,#mark-readme-content ol li{margin:.25em 0}#mark-readme-content a{color:#0366d6;text-decoration:none}#mark-readme-content a:hover{text-decoration:underline}#mark-readme-content code{background-color:#f6f8fa;border-radius:3px;padding:.2em .4em;font-family:Courier New,Courier,monospace;font-size:.9em;color:#24292e;white-space:normal}#mark-readme-content pre{background-color:#fafafa!important;border:1px solid #ddd!important;border-radius:6px!important;overflow:auto!important;padding:16px!important;margin:1em 0!important;font-family:Courier New,Courier,monospace!important;font-size:.9em!important;line-height:1.45!important;white-space:pre-wrap!important;word-wrap:break-word!important;overflow-wrap:break-word!important;display:block!important}#mark-readme-content pre code{background-color:transparent!important;padding:0!important;margin:0!important;border-radius:0!important;color:inherit!important;display:block!important;white-space:pre-wrap!important;word-break:break-word!important;word-spacing:normal!important;overflow-wrap:break-word!important;tab-size:4!important;-moz-tab-size:4!important;border:none!important;font-family:Courier New,Courier,monospace!important;font-size:.9em!important;line-height:1.45!important}#mark-readme-content pre code.language-typescript,#mark-readme-content pre code.language-html,#mark-readme-content pre code.language-css,#mark-readme-content pre code.language-scss,#mark-readme-content pre code.language-javascript,#mark-readme-content pre code.language-json,#mark-readme-content pre code.language-bash{color:inherit!important}#mark-readme-content table{border-collapse:collapse;width:100%;margin:1em 0}#mark-readme-content table thead{background-color:#f6f8fa;font-weight:600}#mark-readme-content table th,#mark-readme-content table td{border:1px solid #ddd;padding:12px;text-align:left}#mark-readme-content table tr:nth-child(2n){background-color:#f9fafb}#mark-readme-content table tr:hover{background-color:#f0f3f8}#mark-readme-content blockquote{border-left:4px solid #ddd;color:#666;padding:.5em 1em;margin:1em 0}#mark-readme-content hr{border:none;border-top:2px solid #eaecef;margin:2em 0}#mark-readme-content img{max-width:100%;height:auto}.p-relative{position:relative}\n"] }]
|
|
9852
|
+
}], ctorParameters: () => [{ type: i1$2.HttpClient }], propDecorators: { useAccordion: [{
|
|
9853
|
+
type: Input
|
|
9854
|
+
}], open: [{
|
|
9855
|
+
type: Input
|
|
9856
|
+
}], pathName: [{
|
|
9851
9857
|
type: Input
|
|
9852
9858
|
}], description: [{
|
|
9853
9859
|
type: Input
|