@dev-tcloud/tcloud-ui 7.0.8 → 7.1.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 (3) hide show
  1. package/docs/tcloud-ui-dropdown-multi-level.md +98 -93
  2. package/js/tcloud-ui-app.js +60 -60
  3. package/package.json +1 -1
package/docs/tcloud-ui-dropdown-multi-level.md CHANGED
@@ -2,37 +2,40 @@
2
2
 
3
3
  ## Características
4
4
 
5
- O componente `tcloud-ui-dropdown-multi-level` é um componente de seleção de opção a partir de uma estrutura de dados hierárquica (menu multi-nível). Ele permite aninhamento de opções e seleção em sub-menus.
5
+ O componente `tcloud-ui-dropdown-multi-level` apresenta opções organizadas em um menu hierárquico. Os itens com filhos abrem um submenu e os itens selecionáveis emitem a opção escolhida com o contexto do item pai.
6
+
7
+ - Permite posicionar os submenus à direita ou à esquerda.
8
+ - Oferece os tamanhos `sm`, `md` e `lg`.
9
+ - Permite desabilitar o componente completo.
10
+ - Aceita conteúdo projetado para definir o texto do botão.
11
+ - Fecha o menu quando ocorre um clique fora do componente.
6
12
 
7
13
  ## Instalação
8
14
 
9
- Para utilizar o componente Dropdown Multi Level, importe o módulo `TCloudUiModule`:
15
+ Importe o componente standalone e os tipos utilizados a partir do pacote da biblioteca:
10
16
 
11
17
  ```typescript
12
- import { TCloudUiModule } from '@tcloud-ui/lib';
13
18
  import { Component } from '@angular/core';
14
-
15
- @Component({
16
- selector: 'app-example',
17
- standalone: true,
18
- imports: [TCloudUiModule],
19
- template: `<tcloud-ui-dropdown-multi-level [menu]="menuOptions">Opções</tcloud-ui-dropdown-multi-level>`
20
- })
21
- export class ExampleComponent {}
22
- ```
23
-
24
- Ou importe diretamente o componente e as interfaces de dados:
25
-
26
- ```typescript
27
- import { TCloudUiDropdownMultiLevelComponent, MultiLevelDropdownOption, MultiLevelDropdownSize } from '@tcloud-ui/lib';
19
+ import {
20
+ MultiLevelDropdownOption,
21
+ TCloudUiDropdownMultiLevelComponent
22
+ } from '@dev-tcloud/tcloud-ui';
28
23
 
29
24
  @Component({
30
25
  selector: 'app-example',
31
26
  standalone: true,
32
27
  imports: [TCloudUiDropdownMultiLevelComponent],
33
- template: `<tcloud-ui-dropdown-multi-level [menu]="menuOptions">Opções</tcloud-ui-dropdown-multi-level>`
28
+ template: `
29
+ <tcloud-ui-dropdown-multi-level [menu]="menuOptions">
30
+ Opções
31
+ </tcloud-ui-dropdown-multi-level>
32
+ `
34
33
  })
35
- export class ExampleComponent {}
34
+ export class ExampleComponent {
35
+ menuOptions: MultiLevelDropdownOption[] = [
36
+ { value: 'details', displayValue: 'Detalhes' }
37
+ ];
38
+ }
36
39
  ```
37
40
 
38
41
  ## Propriedades (API)
@@ -41,17 +44,17 @@ export class ExampleComponent {}
41
44
 
42
45
  | Nome | Tipo | Descrição | Valor Default |
43
46
  |------|------|-----------|---------------|
44
- | `menu` | `MultiLevelDropdownOption[]` | **Obrigatório**. Estrutura de opções (nós principais e filhos) do menu | - |
45
- | `subMenuPosition` | `'right' \| 'left'` | Posição de abertura do sub-menu em relação ao item pai | `'right'` |
46
- | `disabled` | `boolean` | Desabilita interações com o dropdown | `false` |
47
- | `size` | `MultiLevelDropdownSize` | Tamanho do dropdown: `'sm'` \| `'md'` \| `'lg'` | `'sm'` |
48
- | `initialValue` | `MultiLevelDropdownOption \| null` | Valor pré-selecionado | `null` |
47
+ | `menu` | `MultiLevelDropdownOption[]` | **Obrigatório**. Opções exibidas no menu e em seus submenus. | - |
48
+ | `subMenuPosition` | `'right' \| 'left'` | Lado em que os submenus são abertos. | `'right'` |
49
+ | `disabled` | `boolean` | Desabilita o botão que abre o menu. | `false` |
50
+ | `size` | `MultiLevelDropdownSize` | Define o tamanho do botão como `sm`, `md` ou `lg`. | `MultiLevelDropdownSize.sm` |
51
+ | `initialValue` | `MultiLevelDropdownOption \| null` | Entrada reservada para uma opção inicial. A implementação atual não aplica uma pré-seleção visual. | `null` |
49
52
 
50
53
  ### Outputs
51
54
 
52
55
  | Nome | Tipo de Evento | Descrição |
53
56
  |------|----------------|-----------|
54
- | `optionSelected` | `{ option: MultiLevelDropdownOption, parentOption: MultiLevelDropdownOption }` | Emitido quando uma opção é selecionada (apenas para itens que não possuem filhos) |
57
+ | `optionSelected` | `{ option: MultiLevelDropdownOption; parentOption: MultiLevelDropdownOption }` | Emitido ao selecionar uma opção. `option` contém o item escolhido e `parentOption`, seu item pai no menu. |
55
58
 
56
59
  ### Interfaces e Enums Exportados
57
60
 
@@ -71,13 +74,13 @@ export enum MultiLevelDropdownSize {
71
74
  }
72
75
  ```
73
76
 
74
- ## Características Técnicas
75
-
76
- - **Menu Hierárquico**: Suporte a opções com múltiplos níveis de aninhamento através da propriedade `children`.
77
- - **Posicionamento de Submenu**: Permite abrir submenus para a esquerda (`left`) ou direita (`right`).
78
- - **Seleção Restrita a Folhas**: Itens pai que possuem `children` não disparam evento de seleção e servem apenas para abrir submenus.
79
- - **Transclusão de Conteúdo (Content Projection)**: O botão de gatilho do menu utiliza `ng-content`, permitindo a customização livre do conteúdo do botão.
80
- - **Eventos com Contexto**: O evento `optionSelected` emite a opção final selecionada e também seu item pai direto.
77
+ | Campo | Descrição |
78
+ |-------|-----------|
79
+ | `id` | Identificador opcional da opção. |
80
+ | `value` | Valor associado à opção. |
81
+ | `displayValue` | Texto apresentado no menu. |
82
+ | `disabled` | Indica que a opção está desabilitada no modelo de dados. |
83
+ | `children` | Lista opcional de opções exibidas em um submenu. |
81
84
 
82
85
  ## Exemplos de Uso
83
86
 
@@ -85,102 +88,104 @@ export enum MultiLevelDropdownSize {
85
88
 
86
89
  ```typescript
87
90
  import { Component } from '@angular/core';
88
- import { TCloudUiModule, MultiLevelDropdownOption } from '@tcloud-ui/lib';
89
- import { CommonModule } from '@angular/common';
91
+ import {
92
+ MultiLevelDropdownOption,
93
+ TCloudUiDropdownMultiLevelComponent
94
+ } from '@dev-tcloud/tcloud-ui';
90
95
 
91
96
  @Component({
92
- selector: 'app-basic-multi-level-dropdown',
97
+ selector: 'app-dropdown-example',
93
98
  standalone: true,
94
- imports: [CommonModule, TCloudUiModule],
99
+ imports: [TCloudUiDropdownMultiLevelComponent],
95
100
  template: `
96
- <tcloud-ui-dropdown-multi-level
101
+ <tcloud-ui-dropdown-multi-level
97
102
  [menu]="menuOptions"
98
- (optionSelected)="onSelected($event)">
99
- Ações do Usuário
103
+ (optionSelected)="handleOptionSelected($event)">
104
+ Ações do usuário
100
105
  </tcloud-ui-dropdown-multi-level>
106
+
107
+ @if (selectedOption) {
108
+ <p>Última opção selecionada: {{ selectedOption.displayValue }}</p>
109
+ }
101
110
  `
102
111
  })
103
- export class BasicMultiLevelDropdownComponent {
112
+ export class DropdownExampleComponent {
104
113
  menuOptions: MultiLevelDropdownOption[] = [
105
114
  { value: 'home', displayValue: 'Início' },
106
- { value: 'settings', displayValue: 'Configurações' },
107
- {
108
- value: 'profile',
115
+ {
116
+ value: 'profile',
109
117
  displayValue: 'Perfil',
110
118
  children: [
111
- { value: 'view-profile', displayValue: 'Visualizar Perfil' },
112
- { value: 'edit-profile', displayValue: 'Editar Perfil' }
119
+ { value: 'view-profile', displayValue: 'Visualizar perfil' },
120
+ { value: 'edit-profile', displayValue: 'Editar perfil' }
113
121
  ]
114
122
  }
115
123
  ];
116
124
 
117
- onSelected(event: { option: MultiLevelDropdownOption, parentOption: MultiLevelDropdownOption }) {
118
- console.log('Selecionado:', event.option);
125
+ selectedOption: MultiLevelDropdownOption | null = null;
126
+
127
+ handleOptionSelected(event: {
128
+ option: MultiLevelDropdownOption;
129
+ parentOption: MultiLevelDropdownOption;
130
+ }): void {
131
+ this.selectedOption = event.option;
119
132
  }
120
133
  }
121
134
  ```
122
135
 
123
- ### Sub-menu Posicionado à Esquerda
136
+ ### Posicionamento do Submenu
124
137
 
125
- ```typescript
126
- import { Component } from '@angular/core';
127
- import { TCloudUiModule, MultiLevelDropdownOption } from '@tcloud-ui/lib';
138
+ Use `subMenuPosition="left"` quando o submenu precisar abrir à esquerda do item pai:
128
139
 
129
- @Component({
130
- selector: 'app-left-multi-level-dropdown',
131
- standalone: true,
132
- imports: [TCloudUiModule],
133
- template: `
134
- <tcloud-ui-dropdown-multi-level
135
- [menu]="menuOptions"
136
- subMenuPosition="left">
137
- Menu à Esquerda
138
- </tcloud-ui-dropdown-multi-level>
139
- `
140
- })
141
- export class LeftMultiLevelDropdownComponent {
142
- menuOptions: MultiLevelDropdownOption[] = [
143
- {
144
- value: 'export',
145
- displayValue: 'Exportar Dados',
146
- children: [
147
- { value: 'pdf', displayValue: 'Exportar como PDF' },
148
- { value: 'csv', displayValue: 'Exportar como CSV' }
149
- ]
150
- }
151
- ];
152
- }
140
+ ```html
141
+ <tcloud-ui-dropdown-multi-level
142
+ [menu]="menuOptions"
143
+ subMenuPosition="left"
144
+ (optionSelected)="handleOptionSelected($event)">
145
+ Menu à esquerda
146
+ </tcloud-ui-dropdown-multi-level>
153
147
  ```
154
148
 
155
- ### Tamanhos Diferentes
149
+ ### Tamanhos
156
150
 
157
151
  ```typescript
158
152
  import { Component } from '@angular/core';
159
- import { TCloudUiModule, MultiLevelDropdownOption, MultiLevelDropdownSize } from '@tcloud-ui/lib';
153
+ import {
154
+ MultiLevelDropdownOption,
155
+ MultiLevelDropdownSize,
156
+ TCloudUiDropdownMultiLevelComponent
157
+ } from '@dev-tcloud/tcloud-ui';
160
158
 
161
159
  @Component({
162
- selector: 'app-size-multi-level-dropdown',
160
+ selector: 'app-dropdown-sizes',
163
161
  standalone: true,
164
- imports: [TCloudUiModule],
162
+ imports: [TCloudUiDropdownMultiLevelComponent],
165
163
  template: `
166
- <tcloud-ui-dropdown-multi-level [menu]="menuOptions" [size]="sizes.sm">Pequeno</tcloud-ui-dropdown-multi-level>
167
- <tcloud-ui-dropdown-multi-level [menu]="menuOptions" [size]="sizes.md">Médio</tcloud-ui-dropdown-multi-level>
168
- <tcloud-ui-dropdown-multi-level [menu]="menuOptions" [size]="sizes.lg">Grande</tcloud-ui-dropdown-multi-level>
164
+ <tcloud-ui-dropdown-multi-level [menu]="menuOptions" [size]="sizes.sm">
165
+ Pequeno
166
+ </tcloud-ui-dropdown-multi-level>
167
+ <tcloud-ui-dropdown-multi-level [menu]="menuOptions" [size]="sizes.md">
168
+ Médio
169
+ </tcloud-ui-dropdown-multi-level>
170
+ <tcloud-ui-dropdown-multi-level [menu]="menuOptions" [size]="sizes.lg">
171
+ Grande
172
+ </tcloud-ui-dropdown-multi-level>
169
173
  `
170
174
  })
171
- export class SizeMultiLevelDropdownComponent {
172
- sizes = MultiLevelDropdownSize;
173
- menuOptions: MultiLevelDropdownOption[] = [
174
- { value: '1', displayValue: 'Opção 1' }
175
+ export class DropdownSizesComponent {
176
+ readonly sizes = MultiLevelDropdownSize;
177
+ readonly menuOptions: MultiLevelDropdownOption[] = [
178
+ { value: 'option', displayValue: 'Opção' }
175
179
  ];
176
180
  }
177
181
  ```
178
182
 
179
- ## Acessibilidade
180
-
181
- - O componente escuta eventos de clique no documento (`document:click`) para fechar o menu automaticamente caso o clique ocorra fora de seus limites (click-outside).
183
+ ### Estado Desabilitado
182
184
 
183
- ## Compatibilidade
184
-
185
- - **Angular**: 17+ (suporta control flow blocks como `@if` e `@for`, além de signal inputs)
186
- - **Browsers**: Todos os navegadores modernos
185
+ ```html
186
+ <tcloud-ui-dropdown-multi-level
187
+ [menu]="menuOptions"
188
+ [disabled]="true">
189
+ Desabilitado
190
+ </tcloud-ui-dropdown-multi-level>
191
+ ```