@dev-tcloud/tcloud-ui 7.5.2 → 7.6.0

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 (9) hide show
  1. package/docs/tcloud-ui-popover.md +24 -0
  2. package/docs/tcloud-ui-tab-menu.md +73 -23
  3. package/fesm2022/dev-tcloud-tcloud-ui.mjs +156 -41
  4. package/fesm2022/dev-tcloud-tcloud-ui.mjs.map +1 -1
  5. package/js/tcloud-ui-app.js +65 -65
  6. package/package.json +1 -1
  7. package/scss/components/custom/tab-menu.scss +33 -27
  8. package/scss/tcloud-revitalizacao/components/_tc-rev-input-control.scss +10 -6
  9. package/types/dev-tcloud-tcloud-ui.d.ts +50 -5
package/docs/tcloud-ui-popover.md CHANGED
@@ -52,6 +52,7 @@ export class ExampleModule {}
52
52
  | `position` | `'top' \| 'right' \| 'bottom' \| 'left'` | Define o lado em que o popover será aberto. | `'bottom'` |
53
53
  | `align` | `'start' \| 'center' \| 'end'` | Define o alinhamento do painel em relação ao trigger. | `'start'` |
54
54
  | `maxWidth` | `number \| string` | Define a largura do painel aberto. Números são tratados como pixels. | `320` |
55
+ | `appearance` | `'default' \| 'compact' \| 'menu' \| 'borderless'` | Define a variante visual do painel interno. | `'default'` |
55
56
  | `disabled` | `boolean` | Desabilita a abertura do popover. | `false` |
56
57
  | `showCloseIcon` | `boolean` | Exibe um botão `X` para fechar o popover. | `false` |
57
58
  | `open` | `boolean` | Permite controlar a abertura via binding externo. | `false` |
@@ -66,6 +67,29 @@ export class ExampleModule {}
66
67
 
67
68
  O popover fecha ao clicar fora do componente ou ao pressionar `ESC`. Quando `showCloseIcon` for `true`, um botão `X` também é exibido dentro do painel.
68
69
 
70
+ ## Aparência do painel
71
+
72
+ Use `appearance` para escolher uma variante oficial do painel interno sem precisar de `::ng-deep` nos consumidores.
73
+
74
+ | Valor | Uso recomendado |
75
+ |---|---|
76
+ | `default` | Conteúdo comum, com padding e borda padrão. |
77
+ | `compact` | Conteúdos menores com padding reduzido. |
78
+ | `menu` | Menus de ações ou listas compactas, com padding vertical mínimo. |
79
+ | `borderless` | Conteúdos que já possuem seu próprio espaçamento/borda. |
80
+
81
+ ```html
82
+ <tcloud-ui-popover position="bottom" align="end" maxWidth="180px" appearance="menu">
83
+ <button type="button" popover-trigger>Ações</button>
84
+
85
+ <div popover-content>
86
+ <button type="button">Editar</button>
87
+ <button type="button">Duplicar</button>
88
+ <button type="button">Remover</button>
89
+ </div>
90
+ </tcloud-ui-popover>
91
+ ```
92
+
69
93
  ## Alinhamento e largura
70
94
 
71
95
  Use `position` para definir o lado de abertura e `align` para definir a borda de ancoragem. Por exemplo, com `position="bottom"` e `align="end"`, o painel abre abaixo do trigger e cresce para a esquerda, mantendo a borda direita alinhada ao botão.
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,37 @@ 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]="'environment-details'" [full]="true">
127
+ <tcloud-ui-tab-head
128
+ [bottom_line]="false"
129
+ [background]="true"
130
+ tabOptionActiveTextTone="inverse">
131
+ <tcloud-ui-tab-option tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-option>
132
+ <tcloud-ui-tab-option tab="monitoring">Monitoramento</tcloud-ui-tab-option>
133
+ <tcloud-ui-tab-option tab="log">Log</tcloud-ui-tab-option>
134
+ <tcloud-ui-tab-option tab="database">Banco de dados</tcloud-ui-tab-option>
135
+ <tcloud-ui-tab-option tab="executed-actions">Ações executadas</tcloud-ui-tab-option>
136
+ <tcloud-ui-tab-option tab="backup">Backup</tcloud-ui-tab-option>
137
+ <tcloud-ui-tab-option tab="infrastructure">Infraestrutura</tcloud-ui-tab-option>
138
+ <tcloud-ui-tab-option tab="security">Segurança</tcloud-ui-tab-option>
139
+ <tcloud-ui-tab-option tab="manage">Gerenciar</tcloud-ui-tab-option>
140
+ </tcloud-ui-tab-head>
141
+
142
+ <tcloud-ui-tab-content tab="environment-details">Detalhes do ambiente</tcloud-ui-tab-content>
143
+ </tcloud-ui-tab-menu>
144
+ ```
145
+
98
146
  ### Com registro na URL
147
+
99
148
  ```html
100
149
  <tcloud-ui-tab-menu [active]="'tab-1'" [registerInUrl]="true"></tcloud-ui-tab-menu>
101
150
  ```
102
151
 
103
152
  ## Tipos auxiliares
153
+
104
154
  ```ts
105
155
  export interface ITab {
106
156
  id: string;