# Campos Especiais Implementados

Este documento lista todos os campos especiais implementados no sistema, suas características e como utilizá-los.

## Campos com Máscaras

### CPF
- **Nome do campo:** `cpf`
- **Máscara:** 999.999.999-99
- **Uso:**
```php
<x-form.input-masked 
    type="text" 
    name="cpf" 
    label="CPF" 
    data-mask="cpf" />
```

### CEP
- **Nome do campo:** `cep`
- **Máscara:** 99999-999
- **Uso:**
```php
<x-form.input-masked 
    type="text" 
    name="cep" 
    label="CEP" 
    data-mask="cep" />
```

### CPF/CNPJ
- **Nome do campo:** `cpf_cnpj`
- **Máscara:** Automática baseada no comprimento
- **Características:** Alterna automaticamente entre máscara de CPF e CNPJ
- **Uso:**
```php
<x-form.input-masked 
    type="text" 
    name="cpf_cnpj" 
    label="CPF/CNPJ" 
    data-mask="cpf_cnpj" />
```

### Telefone
- **Nomes aceitos:** `fone`, `telefone`, `fone1`, `fone2`, `celular`, `whatsapp`
- **Máscara:** (99) 9999-9999 ou (99) 99999-9999
- **Características:** Alterna automaticamente entre 8 e 9 dígitos
- **Uso:**
```php
<x-form.input-masked 
    type="text" 
    name="telefone" 
    label="Telefone" 
    data-mask="telefone" />
```

## Campos de Upload

### Imagem com Preview
- **Nome do campo:** qualquer nome terminado em `imagem` ou `foto`
- **Características:**
  - Preview automático da imagem
  - Validação de tipo de arquivo
  - Mensagem de arquivo atual
  - Limite de 2MB por padrão
- **Uso:**
```php
<x-form.image-upload 
    name="foto" 
    label="Foto" 
    :value="$model->foto ?? null" 
    :required="true" />
```

## Campos de Texto Rico

### Editor TinyMCE
- **Nome do campo:** `descricao`
- **Características:**
  - Editor visual completo
  - Upload de imagens
  - Formatação de texto
- **Uso:**
```php
<x-form.rich-editor 
    name="descricao" 
    label="Descrição" 
    :value="$model->descricao ?? ''" />
```

## Campos de Data

### Datepicker
- **Nomes aceitos:** `data` ou qualquer campo começando com `data_`
- **Características:**
  - Calendário interativo
  - Formato brasileiro (dd/mm/yyyy)
  - Responsivo
- **Uso:**
```php
<x-form.datepicker 
    name="data_nascimento" 
    label="Data de Nascimento" 
    :value="$model->data_nascimento ?? null" />
```

### Período
- **Nome do campo:** `periodo`
- **Características:**
  - Seleção de intervalo de datas
  - Formato brasileiro
- **Uso:**
```php
<x-form.daterangepicker 
    name="periodo" 
    label="Período" 
    :start-date="$startDate ?? null"
    :end-date="$endDate ?? null" />
```

## Campos de Status

### Checkbox Personalizado
- **Nome do campo:** `status`
- **Características:**
  - Switch toggle estilizado
  - Animação suave
  - Similar ao usado em users/create
- **Uso:**
```php
<x-form.toggle-switch 
    name="status" 
    label="Status" 
    :checked="$model->status ?? true" />
```

## Campos de Seleção

### UF
- **Nome do campo:** `uf`
- **Características:**
  - Lista completa de estados brasileiros
  - Usa siglas como valor
- **Uso:**
```php
<x-form.uf-select 
    name="uf" 
    label="Estado" 
    :value="$model->uf ?? null" />
```

### Tags
- **Nome do campo:** `tags`
- **Características:**
  - Seleção múltipla
  - Busca integrada
  - Criação de novas tags
- **Uso:**
```php
<x-form.tag-select 
    name="tags" 
    label="Tags" 
    :value="$model->tags ?? []" />
```

## Campos Monetários

### Valor/Preço
- **Nomes aceitos:** `valor`, `preco`, `montante`
- **Máscara:** R$ 99.999,99
- **Uso:**
```php
<x-form.input-masked 
    type="text" 
    name="valor" 
    label="Valor" 
    data-mask="money" />
```

### Percentual
- **Nome do campo:** `percentual`
- **Máscara:** 99,99%
- **Uso:**
```php
<x-form.input-masked 
    type="text" 
    name="percentual" 
    label="Percentual" 
    data-mask="percent" />
```

## Campos de Segurança

### Senha
- **Nome do campo:** `senha`, `password`
- **Características:**
  - Campo de confirmação automático
  - Botão de visualizar/ocultar senha
  - Validação de força da senha
- **Uso:**
```php
<x-form.password-field 
    name="senha" 
    label="Senha" 
    :require-confirmation="true" />
```

## Validações Backend

```php
public function rules()
{
    return [
        'cpf' => ['required', 'cpf'],
        'cpf_cnpj' => ['required', 'cpf_ou_cnpj'],
        'telefone' => ['required', 'celular_com_ddd'],
        'cep' => ['required', 'formato_cep'],
        'senha' => ['required', 'min:8', 'confirmed'],
        'imagem' => ['image', 'max:2048'], // 2MB
        'uf' => ['required', 'uf'],
        'data_*' => ['required', 'date_format:d/m/Y'],
        'status' => ['boolean'],
        'valor' => ['required', 'numeric', 'min:0'],
        'percentual' => ['required', 'numeric', 'min:0', 'max:100'],
        'tags' => ['array'],
        'tags.*' => ['string', 'max:255'],
    ];
}
```

## Observações Importantes

1. **Máscaras**: Implementadas usando jQuery Mask Plugin
2. **Validação**: Todos os campos possuem validação tanto no frontend quanto no backend
3. **Responsividade**: Todos os componentes são responsivos
4. **Acessibilidade**: Implementada seguindo WCAG
5. **Customização**: Todos os componentes aceitam atributos adicionais via props 

# Componentes Especiais Implementados

## Componentes de Formulário

### Upload de Imagem
- **Componente**: `<x-form.image-upload>`
- **Arquivo CSS**: `global-components.css`
- **Características**:
  - Preview da imagem
  - Drag & drop
  - Botão de remoção
  - Feedback visual
  - Responsivo
  - Suporte a múltiplos formatos

### Upload de Arquivo
- **Componente**: `<x-form.file-upload>`
- **Arquivo CSS**: `global-components.css`
- **Características**:
  - Drag & drop
  - Exibição do nome e tamanho
  - Ícone por tipo de arquivo
  - Feedback visual
  - Responsivo

### Select com Relacionamento
- **Componente**: `<x-form.select-relationship>`
- **Arquivo CSS**: `global-components.css`
- **Características**:
  - Carregamento dinâmico
  - Animação de seta
  - Estados de hover e focus
  - Responsivo

### Checkbox Personalizado
- **Componente**: `<x-form.checkbox>`
- **Arquivo CSS**: `global-components.css`
- **Características**:
  - Animação de check
  - Estados de hover
  - Acessível
  - Responsivo

## Componentes de Interface

### Barra de Pesquisa
- **Componente**: `<x-search-bar>`
- **Arquivo CSS**: `global-components.css`
- **Características**:
  - Ícone animado
  - Estados de hover e focus
  - Responsivo
  - Acessível

### Informações de Paginação
- **Componente**: `<x-pagination-info>`
- **Arquivo CSS**: `global-components.css`
- **Características**:
  - Layout flexível
  - Responsivo
  - Informações claras

### Botões de Importação/Exportação
- **Componente**: `<x-import-export-buttons>`
- **Arquivo CSS**: `global-components.css`
- **Características**:
  - Ícones animados
  - Estados de hover
  - Layout responsivo
  - Feedback visual

## Características Globais

### Acessibilidade
- Suporte a navegação por teclado
- Estados de foco visíveis
- Rótulos ARIA
- Contraste adequado

### Responsividade
- Adaptação para mobile
- Breakpoints consistentes
- Layout fluido
- Touch-friendly

### Feedback Visual
- Animações suaves
- Estados de hover
- Indicadores de loading
- Mensagens de erro/sucesso

### Temas
- Suporte a modo claro/escuro
- Variáveis CSS
- Cores personalizáveis
- Consistência visual

## Próximos Passos

1. Implementar novos componentes:
   - Modal
   - Tooltip
   - Dropdown
   - Tabs
   - Accordion

2. Melhorias planejadas:
   - Validação em tempo real
   - Suporte a internacionalização
   - Testes de acessibilidade
   - Documentação interativa