@yakuzaa/jade 0.1.11 → 0.1.13

package/commands/html.js

@@ -90,58 +90,86 @@ function gerarCSS(tema = {}) {
       ${gerarVariaveisCSS(tema)}
     }
 
-    body {
+    html, body {
+      height: 100%;
       font-family: var(--jade-fonte);
       background: var(--jade-cor-fundo);
       color: var(--jade-cor-texto);
-      min-height: 100dvh;
+      overflow: hidden;
     }
 
-    /* Layout principal */
-    #jade-app {
-      display: flex;
-      min-height: 100dvh;
-    }
-
-    /* Nav lateral */
-    #jade-nav {
-      width: 240px;
-      min-height: 100dvh;
+    /* ── Header fixo ─────────────────────────────── */
+    #jade-header {
+      position: fixed;
+      top: 0; left: 0; right: 0;
+      height: 52px;
       background: var(--jade-cor-fundo-nav);
       display: flex;
-      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      padding: 0 16px 0 8px;
+      z-index: 300;
+      box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.2);
       flex-shrink: 0;
-      position: sticky;
-      top: 0;
-      height: 100dvh;
-      overflow-y: auto;
     }
 
-    #jade-nav-header {
-      padding: 20px 16px 12px;
-      border-bottom: 1px solid rgba(255,255,255,0.08);
+    #jade-hamburger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      flex-shrink: 0;
+      border: none;
+      border-radius: var(--jade-raio);
+      background: transparent;
+      color: rgba(255,255,255,0.85);
+      cursor: pointer;
+      transition: background 0.15s;
     }
+    #jade-hamburger:hover { background: rgba(255,255,255,0.1); }
 
-    #jade-nav-titulo {
+    #jade-header-titulo {
       font-size: 0.875rem;
       font-weight: 700;
       color: #fff;
-      letter-spacing: 0.04em;
+      letter-spacing: 0.05em;
       text-transform: uppercase;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* ── Layout principal (abaixo do header) ─────── */
+    #jade-app {
+      display: flex;
+      height: calc(100dvh - 52px);
+      margin-top: 52px;
+      overflow: hidden;
     }
 
-    #jade-nav-versao {
-      font-size: 0.7rem;
-      color: rgba(255,255,255,0.35);
-      margin-top: 2px;
+    /* ── Nav lateral ─────────────────────────────── */
+    #jade-nav {
+      width: 240px;
+      height: 100%;
+      background: var(--jade-cor-fundo-nav);
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      overflow-y: auto;
+      transition: width 0.2s ease;
     }
 
+    /* O nav-header foi movido para o #jade-header global */
+    #jade-nav-header { display: none; }
+
     #jade-nav-lista {
       flex: 1;
-      padding: 8px 8px;
+      padding: 8px;
       display: flex;
       flex-direction: column;
       gap: 2px;
+      overflow-y: auto;
     }
 
     .jade-nav-item {
@@ -159,20 +187,44 @@ function gerarCSS(tema = {}) {
       cursor: pointer;
       text-align: left;
       transition: background 0.15s, color 0.15s;
+      flex-shrink: 0;
     }
-
     .jade-nav-item:hover {
       background: rgba(255,255,255,0.07);
       color: rgba(255,255,255,0.9);
     }
-
     .jade-nav-ativo {
       background: var(--jade-cor-primaria) !important;
       color: #fff !important;
     }
-
     .jade-nav-icone { display: flex; align-items: center; }
 
+    /* ── Área de conteúdo ────────────────────────── */
+    #jade-conteudo {
+      flex: 1;
+      min-width: 0;
+      height: 100%;
+      padding: 24px;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* ── Overlay drawer (mobile) ─────────────────── */
+    #jade-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      top: 52px;
+      background: rgba(0,0,0,0.45);
+      z-index: 199;
+      opacity: 0;
+      transition: opacity 0.25s;
+    }
+    #jade-overlay.visivel {
+      display: block;
+      opacity: 1;
+    }
+
     /* Toolbar */
     .jade-toolbar {
       display: flex;
@@ -186,6 +238,7 @@ function gerarCSS(tema = {}) {
     .jade-busca-form { display: flex; gap: 0; }
     .jade-busca-input {
       flex: 1;
+      min-width: 0;
       min-height: 44px;
       padding: 10px 14px;
       border: 1.5px solid var(--jade-cor-borda);
@@ -232,20 +285,12 @@ function gerarCSS(tema = {}) {
       letter-spacing: 0.05em;
     }
 
-    /* Área de conteúdo */
-    #jade-conteudo {
-      flex: 1;
-      min-width: 0;
-      padding: 24px;
-      overflow-y: auto;
-    }
-
     /* Carregando */
     #jade-carregando {
       display: flex;
       align-items: center;
       justify-content: center;
-      min-height: 100dvh;
+      height: 100dvh;
       color: var(--jade-cor-texto-muted);
       font-size: 0.9rem;
       gap: 10px;
@@ -261,40 +306,29 @@ function gerarCSS(tema = {}) {
 
     @keyframes jade-giro { to { transform: rotate(360deg); } }
 
-    /* Mobile: nav vira barra inferior */
-    @media (max-width: 640px) {
-      #jade-app { flex-direction: column-reverse; }
+    /* Mobile: hamburger + drawer overlay */
+    /* ── Desktop: sidebar pode ser colapsada ─────── */
+    #jade-nav.jade-nav-colapsada {
+      width: 0;
+      overflow: hidden;
+    }
 
+    /* ── Mobile: drawer slide-in (abaixo do header) ─ */
+    @media (max-width: 768px) {
       #jade-nav {
-        width: 100%;
-        min-height: auto;
-        height: auto;
-        position: sticky;
-        bottom: 0;
-        top: auto;
-        border-top: 1px solid rgba(255,255,255,0.1);
-      }
-
-      #jade-nav-header { display: none; }
-
-      #jade-nav-lista {
-        flex-direction: row;
-        overflow-x: auto;
-        padding: 6px 8px;
-        gap: 4px;
+        position: fixed;
+        top: 52px;
+        left: 0;
+        height: calc(100dvh - 52px);
+        z-index: 200;
+        transform: translateX(-100%);
+        transition: transform 0.25s ease;
+        box-shadow: 4px 0 16px rgba(0,0,0,0.3);
+        width: 240px !important;
       }
-
-      .jade-nav-item {
-        flex-direction: column;
-        gap: 2px;
-        padding: 6px 12px;
-        font-size: 0.7rem;
-        white-space: nowrap;
-        flex-shrink: 0;
+      #jade-nav.jade-nav-aberto {
+        transform: translateX(0);
       }
-
-      .jade-nav-icone { font-size: 1.2rem; }
-
       #jade-conteudo { padding: 16px; }
     }
   `.trim();
@@ -346,31 +380,98 @@ function coletarEntidades(telas) {
     for (const el of tela.elementos || []) {
       for (const prop of el.propriedades || []) {
         if (prop.chave === 'entidade' && prop.valor) nomes.add(String(prop.valor));
+        // Agrega referências em marcadores @funcao:Entidade:campo
+        if (typeof prop.valor === 'string' && prop.valor.startsWith('@')) {
+          const partes = prop.valor.slice(1).split(':');
+          if (partes[1]) nomes.add(partes[1]);
+        }
       }
     }
   }
   return [...nomes];
 }
 
+// Formata valor numérico de acordo com o campo (moeda vs número simples)
+function formatarValor(v, campo) {
+  if (typeof v !== 'number' || isNaN(v)) return String(v ?? '');
+  const campoLower = (campo || '').toLowerCase();
+  // Campos monetários
+  if (/preco|total|valor|custo|receita|despesa|salario|pagamento|desconto|subtotal|moeda/.test(campoLower)) {
+    return v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+  }
+  // Inteiro
+  if (Number.isInteger(v)) return v.toLocaleString('pt-BR');
+  return v.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+// Resolve marcadores @funcao:Entidade:campo nos descritores de tela
+function resolverAgregacoes(tela, dadosMap) {
+  for (const el of tela.elementos || []) {
+    for (const prop of el.propriedades) {
+      if (typeof prop.valor !== 'string' || !prop.valor.startsWith('@')) continue;
+      const [funcao, entidade, campo] = prop.valor.slice(1).split(':');
+      const registros = dadosMap[entidade] ?? [];
+      let resultado;
+      switch (funcao) {
+        case 'soma':
+          resultado = registros.reduce((s, r) => s + (Number(r[campo]) || 0), 0);
+          prop.valor = formatarValor(resultado, campo);
+          break;
+        case 'contagem':
+          resultado = registros.length;
+          prop.valor = resultado.toLocaleString('pt-BR');
+          break;
+        case 'media':
+          resultado = registros.length
+            ? registros.reduce((s, r) => s + (Number(r[campo]) || 0), 0) / registros.length
+            : 0;
+          prop.valor = formatarValor(resultado, campo);
+          break;
+        case 'maximo':
+          resultado = registros.length ? Math.max(...registros.map(r => Number(r[campo]) || 0)) : 0;
+          prop.valor = formatarValor(resultado, campo);
+          break;
+        case 'minimo':
+          resultado = registros.length ? Math.min(...registros.map(r => Number(r[campo]) || 0)) : 0;
+          prop.valor = formatarValor(resultado, campo);
+          break;
+      }
+    }
+  }
+}
+
 async function mudarTela(nome, telas, db, ui, navItems) {
   const idx = telas.findIndex(t => t.nome === nome);
   if (idx < 0) return;
 
-  navItems.forEach((btn, i) => btn.classList.toggle('jade-nav-ativo', i === idx));
+  // navItems mapeia para telasNav (filtradas), mas idx é em telas (completa)
+  // Encontra o índice correto no navItems pelo nome
+  const navIdx = navItems.findIndex(b => b.dataset.tela === nome);
+  navItems.forEach((btn, i) => btn.classList.toggle('jade-nav-ativo', i === navIdx));
 
   const tela = telas[idx];
   const container = document.getElementById('jade-conteudo');
   container.innerHTML = '';
 
+  // Carrega todas as entidades referenciadas (inclusive em marcadores @)
   const dadosMap = {};
   for (const el of tela.elementos || []) {
     for (const prop of el.propriedades || []) {
-      if (prop.chave === 'entidade' && prop.valor && !dadosMap[prop.valor]) {
-        dadosMap[prop.valor] = await db.find(String(prop.valor)).catch(() => []);
+      const refs = [];
+      if (prop.chave === 'entidade' && prop.valor) refs.push(String(prop.valor));
+      if (typeof prop.valor === 'string' && prop.valor.startsWith('@')) {
+        const partes = prop.valor.slice(1).split(':');
+        if (partes[1]) refs.push(partes[1]);
+      }
+      for (const ref of refs) {
+        if (!dadosMap[ref]) dadosMap[ref] = await db.find(ref).catch(() => []);
       }
     }
   }
 
+  // Resolve @soma, @contagem, @media antes de renderizar
+  resolverAgregacoes(tela, dadosMap);
+
   ui.renderizarTela(tela, container, dadosMap);
 }
 
@@ -401,6 +502,45 @@ async function iniciar() {
 
   document.getElementById('jade-carregando')?.remove();
   document.getElementById('jade-app').style.display = '';
+  document.getElementById('jade-header').style.display = '';
+
+  // ── Header + hambúrguer ──────────────────────────────────────────────────────
+  const hamburger = document.getElementById('jade-hamburger');
+  const overlay   = document.getElementById('jade-overlay');
+  const navEl     = document.getElementById('jade-nav');
+  const isMobile  = () => window.innerWidth <= 768;
+
+  const iconeMenu   = criarElementoIcone('menu', 22);
+  const iconeFechar = criarElementoIcone('fechar', 22);
+  if (iconeMenu) hamburger.appendChild(iconeMenu);
+
+  function abrirDrawer() {
+    navEl.classList.add('jade-nav-aberto');
+    overlay.classList.add('visivel');
+    hamburger.setAttribute('aria-expanded', 'true');
+    if (iconeMenu && iconeFechar && hamburger.firstChild)
+      hamburger.replaceChild(iconeFechar, hamburger.firstChild);
+  }
+  function fecharDrawer() {
+    navEl.classList.remove('jade-nav-aberto');
+    overlay.classList.remove('visivel');
+    hamburger.setAttribute('aria-expanded', 'false');
+    if (iconeMenu && hamburger.firstChild !== iconeMenu)
+      hamburger.replaceChild(iconeMenu, hamburger.firstChild);
+  }
+  function toggleSidebar() {
+    navEl.classList.toggle('jade-nav-colapsada');
+  }
+
+  hamburger.addEventListener('click', () => {
+    if (isMobile()) {
+      navEl.classList.contains('jade-nav-aberto') ? fecharDrawer() : abrirDrawer();
+    } else {
+      toggleSidebar();
+    }
+  });
+  overlay.addEventListener('click', fecharDrawer);
+  window.addEventListener('resize', () => { if (!isMobile()) fecharDrawer(); });
 
   if (telas.length === 0) {
     document.getElementById('jade-conteudo').innerHTML =
@@ -417,6 +557,7 @@ async function iniciar() {
     const btn = document.createElement('button');
     btn.className = 'jade-nav-item' + (i === 0 ? ' jade-nav-ativo' : '');
     btn.dataset.tela = tela.nome;
+    btn.setAttribute('role', 'listitem');
 
     const svgIcone = criarElementoIcone(nomeIcone(tela.nome), 18);
     const spanIcone = document.createElement('span');
@@ -428,7 +569,10 @@ async function iniciar() {
     spanLabel.textContent = tela.titulo || tela.nome;
     btn.appendChild(spanLabel);
 
-    btn.addEventListener('click', () => mudarTela(tela.nome, telas, db, ui, navItems));
+    btn.addEventListener('click', () => {
+      mudarTela(tela.nome, telas, db, ui, navItems);
+      fecharDrawer(); // fecha o drawer no mobile após navegar
+    });
     nav.appendChild(btn);
     navItems.push(btn);
   });
@@ -436,7 +580,10 @@ async function iniciar() {
   // Handler: jade:navegar — gaveta e navegar disparam este evento
   window.addEventListener('jade:navegar', (e) => {
     const nomeTela = e.detail?.tela;
-    if (nomeTela) mudarTela(nomeTela, telas, db, ui, navItems);
+    if (nomeTela) {
+      mudarTela(nomeTela, telas, db, ui, navItems);
+      fecharDrawer();
+    }
   });
 
   // Handler: jade:acao — dispara jade:acao:concluido após processar
@@ -496,13 +643,17 @@ ${gerarCSS(tema)}
     Carregando...
   </div>
 
+  <header id="jade-header" style="display:none">
+    <button id="jade-hamburger" aria-label="Abrir menu" aria-expanded="false"></button>
+    <span id="jade-header-titulo">${nome}</span>
+  </header>
+
+  <div id="jade-overlay" role="presentation"></div>
+
   <div id="jade-app" style="display:none">
-    <nav id="jade-nav">
-      <div id="jade-nav-header">
-        <div id="jade-nav-titulo">${nome}</div>
-        <div id="jade-nav-versao">feito com Jade DSL</div>
-      </div>
-      <div id="jade-nav-lista"></div>
+    <nav id="jade-nav" aria-label="Menu de navegação">
+      <div id="jade-nav-header"></div>
+      <div id="jade-nav-lista" role="list"></div>
     </nav>
     <main id="jade-conteudo"></main>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yakuzaa/jade",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Jade DSL — linguagem empresarial em português compilada para WebAssembly. Instala compilador + runtime + CLI.",
   "type": "module",
   "bin": {
@@ -17,7 +17,7 @@
     "postinstall": "node postinstall.js"
   },
   "dependencies": {
-    "@yakuzaa/jade-compiler": "^0.1.14",
+    "@yakuzaa/jade-compiler": "^0.1.15",
     "@yakuzaa/jade-runtime": "^0.1.8"
   },
   "keywords": [