JS Module

SWContent

Busca dados JSON de qualquer endpoint e renderiza automaticamente em um <template> HTML com interpolação {{campo}}. Sem escrever JavaScript — apenas declarando atributos no HTML.

Como funciona

Atributo
sw-content="/api/posts"

→

fetch JSON
GET /api/posts

→

Clona <template>
preenche {{campo}}

→

Insere no DOM

A API pode retornar um array simples ou um objeto estruturado com { dados: [], total, pagina, paginas } para paginação automática.

1. Uso básico

Adicione sw-content com a URL do endpoint JSON. O <template> interno define o layout de cada item.

2. Template externo

Use sw-content-tmpl apontando para um <template> em qualquer lugar da página. Útil quando múltiplos blocos compartilham o mesmo layout de card.

3. Estado vazio e erro

Personalize a mensagem caso a lista venha vazia ou ocorra uma falha de conexão.

4. Triggers de carregamento

Valor	Comportamento
`load`	Carrega automaticamente ao iniciar (padrão).
`click`	Carrega ao clicar em um botão configurado via `sw-content-btn`.
`visible`	Carrega quando o elemento entra na tela (Intersection Observer / Lazy Load).

5. Paginação automática

Adicione o atributo sw-content-paginate. O módulo injeta os botões ← Anterior e Próxima → automaticamente com suporte a endpoints PHP/Laravel.

Formato esperado na resposta da sua API JSON (PHP / Laravel / Node):

6. API JavaScript

// Recarregar bloco via JS
const el = document.querySelector('[sw-content]');
SWContent.load(el);

// Recarregar ao alterar um filtro
document.querySelector('#filtro').addEventListener('change', e => {
    el.setAttribute('sw-content', '/api/posts?tipo=' + e.target.value);
    SWContent.load(el);
});

// Escutar evento após renderizar
el.addEventListener('sw:content:loaded', e => {
    console.log('Dados carregados:', e.detail.dados);
});

7. Interpolação em atributos HTML

O marcador {{campo}} funciona perfeitamente em textos e em atributos HTML — como href, src, class, data-*, etc.

8. Quick Reference

Atributo / Método	Onde	Descrição
`sw-content="/api/..."`	div/section	Ativa o módulo e define o endpoint JSON.
`sw-content-tmpl="#sel"`	div	Seletor do `<template>` (padrão: filho direto).
`sw-content-trigger`	div	`load` \| `click` \| `visible` (padrão: `load`).
`sw-content-btn="#sel"`	div	Seletor do botão que dispara a busca no modo `click`.
`sw-content-empty="msg"`	div	Mensagem quando a lista vier vazia.
`sw-content-err="msg"`	div	Mensagem exibida em caso de erro de rede.
`sw-content-paginate`	div	Ativa botões de paginação automática.
`{{campo}}`	template	Interpolação substituída pelo campo correspondente do JSON.
`SWContent.load(el)`	JS API	Força a recarga do bloco de conteúdo.