@dev-tcloud/tcloud-ui 7.5.1 → 7.5.3

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 (7) hide show
  1. package/docs/tcloud-ui-tab-menu.md +75 -23
  2. package/fesm2022/dev-tcloud-tcloud-ui.mjs +239 -42
  3. package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
  4. package/js/tcloud-ui-app.js +65 -64
  5. package/package.json +1 -1
  6. package/scss/components/custom/tab-menu.scss +33 -27
  7. package/types/dev-tcloud-tcloud-ui.d.ts +53 -5
package/docs/tcloud-ui-tab-menu.md CHANGED
@@ -1,16 +1,19 @@
1
1
  # Tab Menu
2
2
 
3
3
  ## Características
4
+
4
5
  - Sistema de abas standalone com cabeçalho, títulos/subtítulos e conteúdos associados.
5
6
  - Gerencia estado via serviço interno (TabMenuService) com suporte a loading, scroll, linha inferior e modo full.
6
7
  - Suporta registrar aba ativa na URL (`registerInUrl`) e alternar aba programaticamente por `active`.
7
- - Componentes auxiliares: `tcloud-ui-tab-head`, `tcloud-ui-tab-title`, `tcloud-ui-tab-subtitle`, `tcloud-ui-tab-content`.
8
+ - Componentes auxiliares: `tcloud-ui-tab-head`, `tcloud-ui-tab-title`, `tcloud-ui-tab-subtitle`, `tcloud-ui-tab-option`, `tcloud-ui-tab-content`.
8
9
 
9
10
  ## Instalação
11
+
10
12
  ```ts
11
13
  import {
12
14
  TCloudUiTabMenuComponent,
13
15
  TCloudUiTabHeadComponent,
16
+ TCloudUiTabOptionComponent,
14
17
  TCloudUiTabTitleComponent,
15
18
  TCloudUiTabSubtitleComponent,
16
19
  TCloudUiTabContentComponent
@@ -22,6 +25,7 @@ import {
22
25
  imports: [
23
26
  TCloudUiTabMenuComponent,
24
27
  TCloudUiTabHeadComponent,
28
+ TCloudUiTabOptionComponent,
25
29
  TCloudUiTabTitleComponent,
26
30
  TCloudUiTabSubtitleComponent,
27
31
  TCloudUiTabContentComponent
@@ -32,42 +36,62 @@ export class ExampleComponent {}
32
36
  ```
33
37
 
34
38
  ## Propriedades (API)
39
+
35
40
  ### `tcloud-ui-tab-menu`
36
- | Nome | Tipo | Descrição | Valor Default |
37
- | --- | --- | --- | --- |
38
- | registerInUrl | boolean | Atualiza query param `tab` com a aba ativa. | false |
39
- | loading | boolean | Propaga estado de carregamento para abas. | false |
40
- | active | string | Id da aba ativa inicial (aceita atualização). | '' |
41
- | full | boolean | Habilita modo full (layout mais largo). | false |
41
+
42
+ | Nome | Tipo | Descrição | Valor Default |
43
+ | ------------- | ------- | --------------------------------------------- | ------------- |
44
+ | registerInUrl | boolean | Atualiza query param `tab` com a aba ativa. | false |
45
+ | loading | boolean | Propaga estado de carregamento para abas. | false |
46
+ | active | string | Id da aba ativa inicial (aceita atualização). | '' |
47
+ | full | boolean | Habilita modo full (layout mais largo). | false |
42
48
 
43
49
  ### `tcloud-ui-tab-head`
44
- | Nome | Tipo | Descrição | Valor Default |
45
- | --- | --- | --- | --- |
46
- | scroll | boolean | Controla scroll horizontal do cabeçalho. | true |
47
- | background | boolean | Aplica fundo padrão. | true |
48
- | backgroundColor | '#FFFFFF'\|'#F1F1F1'\|'white'\|'transparent' | Cor de fundo quando `background=true`. | 'transparent' (ajustado para branco/cinza) |
49
- | bottom_line | boolean | Exibe linha inferior. | false |
50
+
51
+ | Nome | Tipo | Descrição | Valor Default |
52
+ | --------------- | -------------------------------------------- | ---------------------------------------- | ------------------------------------------ |
53
+ | scroll | boolean | Controla scroll horizontal do cabeçalho. | true |
54
+ | background | boolean | Aplica fundo padrão. | true |
55
+ | backgroundColor | '#FFFFFF'\|'#F1F1F1'\|'white'\|'transparent' | Cor de fundo quando `background=true`. | 'transparent' (ajustado para branco/cinza) |
56
+ | bottom_line | boolean | Exibe linha inferior. | false |
57
+ | tabOptionTextTone | 'default'\|'inverse' | Tom semântico do texto dos `tcloud-ui-tab-option` filhos (`default` escuro, `inverse` claro). | 'default' |
58
+ | tabOptionActiveTextTone | 'default'\|'inverse' | Tom semântico do texto ativo dos `tcloud-ui-tab-option` filhos (`default` claro, `inverse` escuro). | 'default' |
50
59
 
51
60
  ### `tcloud-ui-tab-title` / `tcloud-ui-tab-subtitle`
52
- | Nome | Tipo | Descrição | Valor Default |
53
- | --- | --- | --- | --- |
54
- | tab | string | Identificador da aba. | '' |
55
- | disabled | boolean | Desabilita seleção da aba. | false |
61
+
62
+ | Nome | Tipo | Descrição | Valor Default |
63
+ | -------- | ------- | -------------------------- | ------------- |
64
+ | tab | string | Identificador da aba. | '' |
65
+ | disabled | boolean | Desabilita seleção da aba. | false |
66
+
67
+ ### `tcloud-ui-tab-option`
68
+
69
+ | Nome | Tipo | Descrição | Valor Default |
70
+ | -------------- | -------------------- | ------------------------------------------------------------------- | ------------- |
71
+ | tab | string | Identificador da aba. | '' |
72
+ | disabled | boolean | Desabilita seleção da aba. | false |
73
+ | textTone | 'default'\|'inverse' | Override opcional do tom definido no `tcloud-ui-tab-head`. | herdado |
74
+ | activeTextTone | 'default'\|'inverse' | Override opcional do tom ativo definido no `tcloud-ui-tab-head`. | herdado |
56
75
 
57
76
  ### `tcloud-ui-tab-content`
58
- | Nome | Tipo | Descrição | Valor Default |
59
- | --- | --- | --- | --- |
60
- | tab | string | Identificador da aba que o conteúdo representa. | '' |
61
- | hideContent | boolean | Esconde conteúdo mantendo estrutura. | false |
77
+
78
+ | Nome | Tipo | Descrição | Valor Default |
79
+ | ----------- | ------- | ----------------------------------------------- | ------------- |
80
+ | tab | string | Identificador da aba que o conteúdo representa. | '' |
81
+ | hideContent | boolean | Esconde conteúdo mantendo estrutura. | false |
62
82
 
63
83
  ### Outputs
84
+
64
85
  `TCloudUiTabMenuComponent`:
65
- | Nome | Tipo de Evento | Descrição |
66
- | --- | --- | --- |
86
+
87
+ | Nome | Tipo de Evento | Descrição |
88
+ | -------- | -------------------- | ---------------------------------- |
67
89
  | onChange | EventEmitter<string> | Emite o id da aba ativa ao trocar. |
68
90
 
69
91
  ## Exemplos de Uso
92
+
70
93
  ### Uso Básico
94
+
71
95
  ```html
72
96
  <tcloud-ui-tab-menu [active]="'tab-1'" (onChange)="onTab($event)">
73
97
  <tcloud-ui-tab-head [bottom_line]="true" [background]="true">
@@ -81,6 +105,7 @@ export class ExampleComponent {}
81
105
  ```
82
106
 
83
107
  ### Subtítulos, full e desabilitado
108
+
84
109
  ```html
85
110
  <tcloud-ui-tab-menu [active]="'a1'" [full]="true">
86
111
  <tcloud-ui-tab-head [bottom_line]="false" [background]="false">
@@ -95,12 +120,39 @@ export class ExampleComponent {}
95
120
  </tcloud-ui-tab-menu>
96
121
  ```
97
122
 
123
+ ### Menu horizontal preenchido
124
+
125
+ ```html
126
+ <tcloud-ui-tab-menu [active]="'security'" [full]="true">
127
+ <tcloud-ui-tab-head
128
+ [scroll]="false"
129
+ [bottom_line]="false"
130
+ [background]="true"
131
+ tabOptionTextTone="default"
132
+ tabOptionActiveTextTone="default">
133
+ <tcloud-ui-tab-option tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-option>
134
+ <tcloud-ui-tab-option tab="monitoring">Monitoramento</tcloud-ui-tab-option>
135
+ <tcloud-ui-tab-option tab="log">Log</tcloud-ui-tab-option>
136
+ <tcloud-ui-tab-option tab="database">Banco de dados</tcloud-ui-tab-option>
137
+ <tcloud-ui-tab-option tab="executed-actions">Ações executadas</tcloud-ui-tab-option>
138
+ <tcloud-ui-tab-option tab="backup">Backup</tcloud-ui-tab-option>
139
+ <tcloud-ui-tab-option tab="infrastructure">Infraestrutura</tcloud-ui-tab-option>
140
+ <tcloud-ui-tab-option tab="security">Segurança</tcloud-ui-tab-option>
141
+ <tcloud-ui-tab-option tab="manage">Gerenciar</tcloud-ui-tab-option>
142
+ </tcloud-ui-tab-head>
143
+
144
+ <tcloud-ui-tab-content tab="security">Conteúdo de segurança</tcloud-ui-tab-content>
145
+ </tcloud-ui-tab-menu>
146
+ ```
147
+
98
148
  ### Com registro na URL
149
+
99
150
  ```html
100
151
  <tcloud-ui-tab-menu [active]="'tab-1'" [registerInUrl]="true"></tcloud-ui-tab-menu>
101
152
  ```
102
153
 
103
154
  ## Tipos auxiliares
155
+
104
156
  ```ts
105
157
  export interface ITab {
106
158
  id: string;