@thibezer/ui-components-kit 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -1,31 +1,28 @@
 # Changelog
 
-## 2.4.0 — 2026-10-15
-
-### `<ui-canvas-cad>`: modos de edição de formas revisados
-
-**Correções**
-
-- **Alça de Bézier**: arrastá-la não inicia mais uma caixa de seleção (que, ao soltar, esvaziava a seleção e encerrava a edição).
-- **Círculo**: o popup passa a oferecer o botão **Editar**; a alça da borda fica onde foi solta (antes voltava para o leste do centro).
-- **Fantasma de inserção**: o duplo clique insere um vértice e não o converte mais em curva (`dblclick` até 600 ms depois da inserção é ignorado).
-- **Camada ou feição fechada durante a edição**: ocultar, bloquear ou remover a camada, ou bloquear a feição, encerra a edição (`cad-edicao-concluida`) e tira alças e HUD.
-- **Caneta**: o arraste da alça termina com o `mouseup` na janela; soltar o botão fora do mapa não deixa mais a alça seguindo o cursor.
-- **Snap em curvas**: feição com `curva` atrai pelos nós (vértice) e pelo meio do trecho curvo; os vértices de apoio amostrados só valem como aresta.
-- **Mudança externa no meio do arraste** (outro operador, API): a alça arrastada não é destruída; o gesto em curso vence ao soltar.
-- **Toque**: arrastar uma alça de edição move a alça, não o mapa.
-- **Tecla S** (e Enter) com vários canvases na página só valem no que está sob o mouse ou com foco. Com um único canvas nada muda.
-
-**Novidades**
-
-- **Desfazer/refazer/cancelar na edição**: Ctrl+Z, Ctrl+Shift+Z / Ctrl+Y e botões no HUD (100 gestos); **Cancelar** volta à geometria de quando a edição começou. Mudar a geometria por fora recomeça o histórico.
-- **Nó selecionado**: clique na alça destaca o nó; Delete/Backspace ou "Excluir nó" o exclui. Recusas (mínimo de nós, ponto, círculo) avisam no HUD.
-- **Mais formas de entrar na edição**: duplo clique na feição (novo `cad-feicao-duplo-clique`, cancelável), Enter com uma feição selecionada e botão **Editar** na barra (`ferramentas="editar"` ou `"todas"`). `cad-edicao-recusada` ganha o motivo `sem-selecao`.
-- **Retângulo**: arrastar um canto de um retângulo alinhado aos eixos mantém o retângulo (Shift solta).
-- **Fantasmas** não aparecem em segmentos com menos de 24 px na tela e voltam ao aproximar o zoom.
-- **Ferramentas de desenho avisam no HUD** quando recusam o clique (círculo abaixo de 2 m, cantos alinhados, centro repetido) ou quando Enter/duplo clique chega com pontos de menos.
-- A dica do HUD de edição cita Shift (que precisa ser apertado **durante** o arraste).
-- O HUD de edição passa a ter vários botões (Desfazer, Refazer, Excluir nó, Cancelar, Concluir): quem buscava o botão pelo seletor `#cm-vertex-edit-hud button` deve usar `[data-acao="concluir"]`.
+## 2.5.0
+
+### `<ui-tabela>`: robustez, modo remoto e ordenação
+
+- **Render protegido**: exceção em `coluna.render` deixa só a célula vazia (com `console.error`); o scroll virtual não trava mais após um erro de render.
+- **Modo remoto**: `fetchOpcoes` (headers, credentials...), `fetcher` (substitui o `fetch`), `carregarDoEndpoint()`/`recarregar()` resolvem `true`/`false` (antes `void`; nunca rejeitam) e `carregarDoEndpoint(url)` passa a guardar a URL como `src`. `ui-fetch-erro` ganha `origem` (`rede`, `http`, `json`, `render`) e `status`. Novo evento `ui-fetch-cancelado`. Abortar (desconexão ou nova requisição) libera `carregando`; mesma URL em andamento é reaproveitada (sem requisição duplicada ao registrar o elemento depois do HTML).
+- **Ordenação**: `ui-sort` agora é cancelável (`preventDefault()` desfaz); atributo/propriedade `ordenacao-remota` para ordenar no servidor. `TabelaColuna.tipo` (`numero`, `data`, `booleano`, `texto`) e `TabelaColuna.comparador`. `Date`, `dd/mm/aaaa` (com `tipo: 'data'`) e booleanos ordenam pelo valor; `Intl.Collator` reutilizado; **nulos ficam sempre no fim** (antes iam para o início em `desc`).
+- **Filtro**: ignora acentos; datas entram na busca; `TabelaColuna.textoFiltro` torna pesquisável o texto formatado por `render`; filtra antes de ordenar (mais rápido).
+- **Dados do consumidor**: `colunas` é copiado (redimensionar não altera nem falha com objetos congelados/reativos/compartilhados; `tabela.colunas` devolve a cópia interna); entradas `null`/`undefined` em `dados` são descartadas.
+- **Seleção**: `id` nulo não marca várias linhas; a identidade do objeto tem prioridade sobre a chave; novo `ui-selecao-atualizada` quando os dados recarregados trazem outro objeto do mesmo registro.
+- **Cliques**: botões dentro do shadow DOM de custom elements na célula não selecionam a linha (`composedPath`).
+- **Redimensionamento**: clique na alça sem arrastar não emite `ui-column-resize` (antes `"undefined"`); desconectar durante o arraste não bloqueia mais a ordenação; o popover só emite se a largura mudou.
+- Eventos do `<ui-tabela>` documentados no README.
+
+### `<ui-tabela>`: estética, usabilidade e acessibilidade
+
+- **Cabeçalho**: sem as larguras fixas de 90px/70px; o vão texto-seta vem de `--ui-tabela-th-gap` (6px) e a seta de `--ui-tabela-th-icone` (16px). Só colunas ordenáveis têm ícone (dois chevrons, o ativo em destaque); `aria-sort="none"` nas ordenáveis inativas. O `sticky` ficou só nos `<th>`.
+- **Tokens**: `--ui-tabela-zebra`, `--ui-tabela-hover`, `--ui-tabela-selecionada(-hover)`, `--ui-tabela-cor-foco`. Zebrado visível nos dois temas; texto do botão "Aplicar" usa `--ui-cor-texto-sobre-primaria`. `tabular-nums` e `--ui-fonte-base`.
+- **Estados**: erro de carregamento visível (`part="erro"`, `role="alert"`, "Tentar novamente"; atributo `texto-erro`); overlay de carregamento com a cor do tema, `role="status"` e `texto-carregando`; vazio mantém o cabeçalho e o filtro sem resultado usa `texto-sem-resultados` (também anunciado a leitores de tela).
+- **Linhas**: `cursor: pointer`, hover só com `(hover: hover)`, foco de teclado (cor do texto) distinto da seleção (primária), texto das células não é selecionado ao clicar (opt-in: `selecionar-texto`).
+- **ARIA**: `role="grid"`, `aria-rowcount/colcount`, `aria-rowindex`, `aria-selected` (mantém `aria-current`), espaçadores `aria-hidden`, contêiner `role="region"` com o `aria-label`.
+- **Redimensionamento**: toque/caneta (Pointer Events), traço visível em repouso, alça focável (`role="separator"`; ←/→ ajustam, Shift = passo maior, Enter abre o diálogo) e clique na alça não ordena. Diálogo de largura com rótulo, campo numérico, validação inline, posição dentro da janela e retorno do foco.
+- `prefers-reduced-motion` (sem transições; spinner lento) e alvos de toque maiores com `pointer: coarse`. Removido o CSS morto do menu de contexto.
 
 ## 2.3.0 — 2026-10-14
 

package/README.md

@@ -453,6 +453,35 @@ tabela.filtrar('M-01'); // Filtra instantaneamente em todas as colunas
 tabela.recarregar();   // Recarrega os dados da API remota
 ```
 
+**Autenticação e opções do `fetch`** (o `src` sozinho faz um `GET` sem headers):
+
+```javascript
+tabela.fetchOpcoes = { headers: { Authorization: `Bearer ${token}` }, credentials: 'include' };
+// ou troque a função de busca (renovação de token, mocks):
+tabela.fetcher = (url, init) => meuFetchAutenticado(url, init);
+
+const ok = await tabela.carregarDoEndpoint('/api/v1/vertices'); // true em sucesso; nunca rejeita
+```
+
+**Ordenação no servidor**: `<ui-tabela ordenacao-remota>` (ou `tabela.ordenacaoRemota = true`) atualiza o indicador e emite `ui-sort`, mas não reordena; busque os dados já ordenados. Sem o atributo, chame `evento.preventDefault()` em `ui-sort` para recusar a ordenação.
+
+**Eventos de `<ui-tabela>`** (todos `bubbles` e `composed`; só `ui-sort` é cancelável):
+
+| Evento | `detail` | Quando |
+|---|---|---|
+| `ui-sort` (cancelável) | `{ idColuna, direcao }` | Clique no cabeçalho ordenável. `direcao: 'original'` com `idColuna: null` = ordenação removida |
+| `ui-column-resize` | `{ idColuna, largura }` (`"120px"` ou `"auto"`) | Fim do arraste, popover ou duplo clique; não dispara em clique sem arrastar |
+| `ui-linha-clique` | `{ item, indice }` | Clique/Enter/Espaço numa linha. `indice` é a posição **exibida** (após ordenar/filtrar): use `item` |
+| `ui-linha-selecionada` | `{ item, indice }` | `rolarPara(..., { selecionar: true })` |
+| `ui-selecao-removida` | `{ item }` | O item selecionado saiu dos `dados` |
+| `ui-selecao-atualizada` | `{ item, anterior }` | Os dados foram recarregados e o registro selecionado agora é outro objeto |
+| `ui-fetch-start` | `{ url }` | Início da requisição do `src` |
+| `ui-fetch-sucesso` | `{ url, total, dados }` | Dados recebidos |
+| `ui-fetch-erro` | `{ url, erro, origem, status? }` | Falha. `origem`: `rede`, `http` (com `status`), `json` ou `render` |
+| `ui-fetch-cancelado` | `{ url }` | Requisição abortada ou substituída (fecha o par do `ui-fetch-start`) |
+
+Boas práticas: trate `dados` como imutável (atribua sempre um array novo), mantenha `chave-id` única e não nula, memorize `colunas` (atribuí-las de novo refaz a tabela) e coloque controles interativos das células com `data-prevent-select` se não quiser que o clique selecione a linha. `render` devolvendo `string` vira texto (não HTML); devolva um `HTMLElement` novo por chamada.
+
 ---
 
 ## 💻 Exemplos de Uso por Tecnologia
@@ -694,7 +723,7 @@ window.addEventListener('message', (event) => {
 | `<ui-tooltip>` | Dica contextual inteligente (Hover PC / Toque Mobile). O texto vira `aria-description` do gatilho (lido pelo leitor de tela, também repassado pelo `<ui-botao>`); **Esc** fecha sem mover o foco; o balão não some ao levar o ponteiro até ele. | `texto`, `posicao`, `gatilho` | - |
 | `<ui-skeleton>` | Placeholder de carregamento animado com pulsos. | `tipo`, `largura`, `altura`, `animado` | - |
 | `<ui-stat>` | Cartão KPI de estatísticas, métricas e tendências. | `rotulo`, `valor`, `variacao`, `tendencia` (`alta`, `baixa`, `neutro`) | - |
-| `<ui-tabela>` | Tabela orientada a dados, virtualizada tipo Excel. **Teclado**: cabeçalhos ordenáveis são botões (Tab + Enter/Espaço, com `aria-sort`); nas linhas, ↑/↓, Home/End e PageUp/PageDown movem o foco e Enter/Espaço selecionam (`aria-current`). A seleção é mantida ao ordenar e filtrar. Nome acessível via `aria-label`. | `colunas`, `dados`, `src`, `densidade`, `aria-label` | `ui-sort`, `ui-column-resize`, `ui-linha-clique` |
+| `<ui-tabela>` | Tabela orientada a dados, virtualizada tipo Excel. **Teclado**: cabeçalhos ordenáveis são botões (Tab + Enter/Espaço, com `aria-sort`); nas linhas, ↑/↓, Home/End e PageUp/PageDown movem o foco e Enter/Espaço selecionam (`aria-current`). A seleção é mantida ao ordenar e filtrar. Nome acessível via `aria-label`. | `colunas`, `dados`, `src`, `densidade`, `aria-label` | `ui-sort`, `ui-column-resize`, `ui-linha-clique` (demais eventos: ver seção 4) |
 | `<ui-tabela-propriedades>` | Inspetor de propriedades técnicas padrão AutoCAD & Revit com cálculos matemáticos inline (+, -, *, /, ^, %), arraste de valor contínuo (scrubbing), splitter redimensionável e editores CAD. | `categorias`, `tipo-objeto`, `splitter-pos`, `modo-aplicar`, `filtro` | `ui-propriedade-alterada`, `ui-aplicar`, `ui-desfazer`, `ui-editar-tipo`, `ui-acao-clique`, `ui-quick-select`, `ui-calculadora` |
 | `<ui-ribbon>` | Barra de ferramentas em abas e grupos (estilo AutoCAD / Word / Excel): botões grandes e pequenos em colunas de 3, toggles, menus suspensos, abas contextuais, modo recolhido (duplo clique na aba) e navegação por teclado (roving tabindex). | `abas`, `aba-ativa`, `recolhido`, `compacto` | `ui-ferramenta`, `ui-aba-change` |
 | `<ui-paleta-ferramentas>` | Paleta de ferramentas (estilo Illustrator / Photoshop): seleção exclusiva, grupos com flyout (clique longo, botão direito ou seta), 1 ou 2 colunas, vertical/horizontal e atalhos de teclado que percorrem o grupo. | `ferramentas`, `valor`, `orientacao`, `colunas`, `tamanho`, `atalhos` | `ui-change`, `ui-selecionar`, `ui-ferramenta` |
@@ -702,7 +731,7 @@ window.addEventListener('message', (event) => {
 | `<ui-seletor-cor>` | Painel de cor flutuante: abas Preenchimento/Traço (ou cor única), prévia antes × depois, hexadecimal, seletor do sistema, opacidade, cores do projeto, paleta e "sem cor". Abra com `abrirSeletorCor({ ancora, ... })`: um por vez, Esc/clique fora confirmam, Cancelar restaura, `X` alterna o alvo. | `abrirSeletorCor()`, `fecharSeletorCor()`, `configurar()`, `modo` (`duplo`, `simples`), `alvo`, `preenchimento`, `traco`, `cor`, `opacidade`, `mostrarOpacidade`, `misto`, `coresProjeto`, `paleta` | `ui-cor-input`, `ui-cor-confirmar`, `ui-cor-cancelar`, `ui-alvo-change` |
 | `<ui-mapa>` | Mapa geográfico interativo com camadas OpenStreetMap. | `lat`, `lng`, `zoom`, `camadas` | - |
 | `<ui-camadas>` | Painel de camadas vetoriais CAD/GIS com hierarquia em árvore, barra de arraste vertical (`redimensionavel`), estabilidade de altura sem colapso, drag-and-drop, métricas geodésicas e persistência no LocalStorage. | `redimensionavel`, `altura`, `min-altura`, `max-altura`, `flutuante`, `colapsado`, `camada-ativa`, `persistir` | `ui-redimensionar-altura`, `ui-camada-selecionada`, `ui-camada-visibilidade`, `ui-camadas-reordenadas`, `ui-acao-massa` |
-| `<ui-canvas-cad>` | Mesa CAD/GIS para poligonais, vértices geodésicos e **feições genéricas** (ponto, linha, polígono, círculo, texto) que você cria: seleção por clique e caixa, popup, edição de vértices (duplo clique ou Enter abre; desfazer/refazer/cancelar), snap, 15 ferramentas de desenho/medição, oficial × prévia, cursores remotos e culling/clusters para 100 mil feições. Linha multiparte, feição `oculta`, selo de texto e contorno de ponto. Nenhuma camada vem pronta. Guia: [`docs/guia-migracao-mapengine.md`](docs/guia-migracao-mapengine.md). | `pontos`, `segmentos`, `ferramentas`, `sem-camadas-padrao`, `sem-painel-camadas`, `sem-barra-rapida`, `sem-atalho-snap`, `aceitar-origem`, `inicializarAgora()`, `definirFeicoes()`, `aplicarLote()`, `definirFerramenta()`, `editarVertices()`, `definirMargensHud()`, `definirEstilosExternos()`, `fitBounds()` | `ui-ponto-selecionado`, `cad-selecao`, `cad-feicao-selecionada`, `cad-feicao-criada`, `cad-feicao-atualizada`, `cad-feicao-hover`, `cad-feicao-menu`, `cad-snap`, `cad-previas` e outros (ver `docs/canvas-cad-eventos.md`) |
+| `<ui-canvas-cad>` | Mesa CAD/GIS para poligonais, vértices geodésicos e **feições genéricas** (ponto, linha, polígono, círculo, texto) que você cria: seleção por clique e caixa, popup, edição de vértices, snap, 15 ferramentas de desenho/medição, oficial × prévia, cursores remotos e culling/clusters para 100 mil feições. Linha multiparte, feição `oculta`, selo de texto e contorno de ponto. Nenhuma camada vem pronta. Guia: [`docs/guia-migracao-mapengine.md`](docs/guia-migracao-mapengine.md). | `pontos`, `segmentos`, `ferramentas`, `sem-camadas-padrao`, `sem-painel-camadas`, `sem-barra-rapida`, `sem-atalho-snap`, `aceitar-origem`, `inicializarAgora()`, `definirFeicoes()`, `aplicarLote()`, `definirFerramenta()`, `editarVertices()`, `definirMargensHud()`, `definirEstilosExternos()`, `fitBounds()` | `ui-ponto-selecionado`, `cad-selecao`, `cad-feicao-selecionada`, `cad-feicao-criada`, `cad-feicao-atualizada`, `cad-feicao-hover`, `cad-feicao-menu`, `cad-snap`, `cad-previas` e outros (ver `docs/canvas-cad-eventos.md`) |
 
 #### `<ui-canvas-cad>`: montar só com API pública (2.1)