@dev-tcloud/tcloud-ui 6.15.0 → 6.18.0

package/docs/tcloud-ui-empty-content.md

@@ -0,0 +1,412 @@
+# Empty Content
+
+## Características
+
+O componente `tcloud-ui-empty-content` é um componente simples e versátil para exibir mensagens de placeholder em áreas vazias da aplicação. Ideal para comunicar ao usuário que não há dados para exibir ou que uma seção está vazia.
+
+## Instalação
+
+Para utilizar o componente Empty Content, importe o módulo `TCloudUiModule`:
+
+```typescript
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `<tcloud-ui-empty-content>Nenhum item disponível</tcloud-ui-empty-content>`
+})
+export class ExampleComponent {}
+```
+
+Ou importe diretamente o componente:
+
+```typescript
+import { TCloudUiEmptyContentComponent } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiEmptyContentComponent],
+  template: `<tcloud-ui-empty-content>Nenhum item</tcloud-ui-empty-content>`
+})
+export class ExampleComponent {}
+```
+
+## Propriedades (API)
+
+O componente `tcloud-ui-empty-content` é um componente simples que aceita conteúdo via `<ng-content>`. Não possui inputs ou outputs específicos.
+
+**Características:**
+- Elemento semanticamente um `<div>`
+- Estilos pré-aplicados: padding, border-radius e cores neutras
+- Suporta qualquer conteúdo HTML/text via `<ng-content>`
+
+## Exemplos de Uso
+
+### Uso Básico
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+
+@Component({
+  selector: 'app-basic-empty',
+  standalone: true,
+  imports: [TCloudUiModule],
+  template: `
+    <tcloud-ui-empty-content>
+      Nenhum conteúdo para exibir
+    </tcloud-ui-empty-content>
+  `
+})
+export class BasicEmptyComponent {}
+```
+
+### Com Ícone e Texto Estruturado
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-empty-with-icon',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-empty-content>
+      <div class="empty-container">
+        <i class="fa-light fa-inbox"></i>
+        <h3>Nenhuma Mensagem</h3>
+        <p>Você não tem mensagens no momento</p>
+      </div>
+    </tcloud-ui-empty-content>
+  `,
+  styles: [`
+    .empty-container {
+      text-align: center;
+    }
+    
+    i {
+      font-size: 2rem;
+      color: var(--c-neutral-600);
+      margin-bottom: 1rem;
+    }
+    
+    h3 {
+      margin: 0.5rem 0;
+      color: var(--c-neutral-700);
+      font-size: 1.25rem;
+    }
+    
+    p {
+      margin: 0;
+      color: var(--c-neutral-600);
+      font-size: 0.875rem;
+    }
+  `]
+})
+export class EmptyWithIconComponent {}
+```
+
+### Lista Vazia com CTA
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-empty-list',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <tcloud-ui-empty-content>
+      <div class="empty-list">
+        <i class="fa-light fa-list"></i>
+        <h3>Nenhum Item na Lista</h3>
+        <p>Adicione seu primeiro item para começar</p>
+        <button class="btn-primary">+ Adicionar Item</button>
+      </div>
+    </tcloud-ui-empty-content>
+  `,
+  styles: [`
+    .empty-list {
+      text-align: center;
+      padding: 2rem 0;
+    }
+    
+    i {
+      font-size: 3rem;
+      color: var(--c-neutral-400);
+      margin-bottom: 1.5rem;
+      display: block;
+    }
+    
+    h3 {
+      margin: 0 0 0.5rem;
+      color: var(--c-neutral-800);
+      font-size: 1.5rem;
+    }
+    
+    p {
+      margin: 0 0 1.5rem;
+      color: var(--c-neutral-600);
+    }
+    
+    .btn-primary {
+      padding: 0.5rem 1rem;
+      background: var(--c-primary-500);
+      color: white;
+      border: none;
+      border-radius: var(--bor-radius-8);
+      cursor: pointer;
+      font-weight: 600;
+      transition: background 200ms ease;
+    }
+    
+    .btn-primary:hover {
+      background: var(--c-primary-600);
+    }
+  `]
+})
+export class EmptyListComponent {}
+```
+
+### Em Tabla Vazia
+
+```typescript
+import { Component } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-table-empty',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule],
+  template: `
+    <div class="table-container">
+      @if (items.length === 0) {
+        <tcloud-ui-empty-content>
+          <div class="empty-table">
+            <i class="fa-light fa-table"></i>
+            <p>Nenhum dado disponível na tabela</p>
+          </div>
+        </tcloud-ui-empty-content>
+      } @else {
+        <table>
+          <thead>
+            <tr>
+              <th>Nome</th>
+              <th>Email</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (item of items; track item.id) {
+              <tr>
+                <td>{{ item.name }}</td>
+                <td>{{ item.email }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      }
+    </div>
+  `,
+  styles: [`
+    .table-container {
+      border: 1px solid var(--c-neutral-300);
+      border-radius: var(--bor-radius-8);
+      overflow: hidden;
+    }
+    
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    
+    th, td {
+      padding: 1rem;
+      text-align: left;
+    }
+    
+    th {
+      background: var(--c-neutral-100);
+      font-weight: 600;
+      border-bottom: 1px solid var(--c-neutral-300);
+    }
+    
+    td {
+      border-bottom: 1px solid var(--c-neutral-200);
+    }
+    
+    .empty-table {
+      text-align: center;
+      padding: 2rem;
+    }
+    
+    .empty-table i {
+      font-size: 2.5rem;
+      color: var(--c-neutral-400);
+      margin-bottom: 1rem;
+      display: block;
+    }
+  `]
+})
+export class TableEmptyComponent {
+  items: any[] = [];
+}
+```
+
+### Procura Sem Resultados
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { TCloudUiModule } from '@tcloud-ui/lib';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-search-empty',
+  standalone: true,
+  imports: [CommonModule, TCloudUiModule, FormsModule],
+  template: `
+    <div class="search-container">
+      <input 
+        type="text" 
+        [(ngModel)]="searchTerm"
+        placeholder="Buscar produtos..."
+        class="search-input">
+      
+      @if (filteredResults.length === 0 && searchTerm.length > 0) {
+        <tcloud-ui-empty-content>
+          <div class="search-empty">
+            <i class="fa-light fa-search"></i>
+            <h4>Nenhum resultado encontrado</h4>
+            <p>Nenhum produto corresponde a "{{ searchTerm }}"</p>
+          </div>
+        </tcloud-ui-empty-content>
+      } @else if (filteredResults.length > 0) {
+        <div class="results">
+          @for (result of filteredResults; track result.id) {
+            <div class="result-item">{{ result.name }}</div>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .search-container {
+      width: 100%;
+    }
+    
+    .search-input {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid var(--c-neutral-300);
+      border-radius: var(--bor-radius-8);
+      margin-bottom: 1rem;
+      font-size: 1rem;
+    }
+    
+    .search-input:focus {
+      outline: none;
+      border-color: var(--c-primary-500);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+    
+    .search-empty {
+      text-align: center;
+      padding: 2rem;
+    }
+    
+    .search-empty i {
+      font-size: 2rem;
+      color: var(--c-neutral-500);
+      margin-bottom: 1rem;
+      display: block;
+    }
+    
+    .search-empty h4 {
+      margin: 0.5rem 0;
+      color: var(--c-neutral-700);
+    }
+    
+    .search-empty p {
+      margin: 0;
+      color: var(--c-neutral-600);
+      font-size: 0.875rem;
+    }
+    
+    .results {
+      display: grid;
+      gap: 0.5rem;
+    }
+    
+    .result-item {
+      padding: 0.75rem;
+      background: var(--c-neutral-100);
+      border-radius: var(--bor-radius-4);
+      border-left: 3px solid var(--c-primary-500);
+    }
+  `]
+})
+export class SearchEmptyComponent {
+  searchTerm = signal('');
+  allResults = [
+    { id: 1, name: 'Produto A' },
+    { id: 2, name: 'Produto B' },
+    { id: 3, name: 'Produto C' }
+  ];
+
+  get filteredResults() {
+    return this.allResults.filter(r => 
+      r.name.toLowerCase().includes(this.searchTerm.toLowerCase())
+    );
+  }
+}
+```
+
+## Estilos Aplicados
+
+O componente aplica automaticamente os seguintes estilos:
+
+- **Padding**: `var(--size-16)` (16px) nas direções horizontal e vertical
+- **Background**: `var(--c-neutral-200)` (cinza claro)
+- **Border Radius**: `var(--bor-radius-8)` (8px)
+- **Cor do Texto**: `var(--c-neutral-700)` (cinza escuro)
+- **Fonte**: Família padrão, tamanho pequeno
+- **Display**: Block
+
+## Casos de Uso
+
+- Placeholder de lista vazia
+- Mensagem de "sem resultados" em buscas
+- Conteúdo não carregado ou indisponível
+- Estado vazio de um dashboard
+- Seção de dados vazios
+- Feedback quando nenhum item foi encontrado
+- Estado inicial de um aplicativo
+- Placeholder em tabelas vazias
+- Mensagem quando filtros não retornam dados
+
+## Dicas de Customização
+
+1. **Cor de Fundo**: Os estilos padrão usam `var(--c-neutral-200)`. Para customizar, envolva o componente:
+   ```html
+   <div style="background: var(--c-primary-100);">
+     <tcloud-ui-empty-content>...</tcloud-ui-empty-content>
+   </div>
+   ```
+
+2. **Tamanho**: Use `width` e `min-height` no container externo:
+   ```html
+   <div style="min-height: 300px;">
+     <tcloud-ui-empty-content>...</tcloud-ui-empty-content>
+   </div>
+   ```
+
+3. **Conteúdo Estruturado**: Adicione `<div>` internas para melhor controle layout