nexabase-report 0.25.8 → 0.26.2

package/dist/{pptxgen.es-BQmRTWxX.js → pptxgen.es-DD01xTKF.js}

@@ -1,4 +1,4 @@
-import { c as rt, d as $t } from "./index-D73aFRdr.js";
+import { c as rt, d as $t } from "./index-DRt8rzWp.js";
 function nt(e) {
   throw new Error('Could not dynamically require "' + e + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }

package/docs/guide/crosstab.md

@@ -0,0 +1,157 @@
+# Crosstab (Tabla Dinámica)
+
+El Crosstab permite crear **tablas con crecimiento horizontal**, similares a las matrices de Crystal Reports o las pivot tables de Excel. Las columnas se generan dinámicalemente desde los datos, mientras que las filas se definen en diseño.
+
+## Concepto
+
+Un Crosstab pivotea datos de filas a columnas:
+
+```
+Datos de entrada:                    Crosstab resultante:
+┌──────────┬────────┬───────┐       ┌──────────┬────────┬────────┬────────┬───────┐
+│ Producto │ Mes    │ Venta │       │ Producto │ Ene    │ Feb    │ Mar    │ Total │
+├──────────┼────────┼───────┤       ├──────────┼────────┼────────┼────────┼───────┤
+│ Laptop   │ Ene    │ 1000  │  ──►  │ Laptop   │ 1000   │ 1200   │  950   │ 3150  │
+│ Laptop   │ Feb    │ 1200  │       │ Mouse    │  200   │  300   │  250   │  750  │
+│ Laptop   │ Mar    │  950  │       │ Teclado  │  150   │  180   │  120   │  450  │
+│ Mouse    │ Ene    │  200  │       └──────────┴────────┴────────┴────────┴───────┘
+│ Mouse    │ Feb    │  300  │
+│ Mouse    │ Mar    │  250  │
+│ Teclado  │ Ene    │  150  │
+│ Teclado  │ Feb    │  180  │
+│ Teclado  │ Mar    │  120  │
+└──────────┴────────┴───────┘
+```
+
+## Configuración en el Diseñador
+
+### Campos de Fila (Row Fields)
+Definen las filas del Crosstab. Puedes agregar múltiples campos para filas jerárquicas.
+
+| Campo | Descripción |
+|-------|-------------|
+| **Label** | Nombre que aparece como encabezado de la columna de fila |
+| **Binding** | Campo del dataSource que contiene el valor de la fila |
+
+### Campo de Columna (Column Field)
+El campo cuyos valores únicos se convierten en columnas del Crosstab. En el ejemplo anterior, `Mes` es el campo de columna.
+
+### Campos de Valor (Value Fields)
+Las métricas que se calculan en cada celda. Cada valor tiene:
+
+| Campo | Descripción |
+|-------|-------------|
+| **Label** | Nombre de la métrica |
+| **Binding** | Campo numérico a agregar |
+| **Aggregation** | Función de agregación: `sum`, `count`, `avg`, `min`, `max`, `first`, `last` |
+| **Format** | Patrón de formato (ej: `$#,##0.00`, `#,##0`, `0.00%`) |
+
+### Totales
+- **Mostrar Totales de Fila**: Agrega una columna "Total" al final de cada fila
+- **Mostrar Gran Total**: Agrega una fila de totales al final
+- **Etiqueta de Total**: Texto de la columna/fila de totales (default: "Total")
+
+### Diseño (Layout)
+- **Permitir salto de página**: Si el Crosstab es muy grande, se divide en múltiples páginas
+
+## Estilo del Crosstab
+
+El Crosstab soporta estilos personalizados:
+
+| Propiedad | Default | Descripción |
+|-----------|---------|-------------|
+| `headerBackground` | `#f3f4f6` | Fondo de la fila de encabezados de columna |
+| `headerColor` | `#111827` | Color de texto de encabezados de columna |
+| `headerBold` | `true` | Encabezados en negrita |
+| `rowHeaderBackground` | `#fafafa` | Fondo de las celdas de encabezado de fila |
+| `rowHeaderColor` | `#111827` | Color de texto de encabezados de fila |
+| `rowHeaderBold` | `true` | Encabezados de fila en negrita |
+| `alternateRows` | `true` | Filas con colores alternados (zebra) |
+| `alternateRowBackground` | `#f9fafb` | Color de filas alternas |
+| `borderColor` | `#d1d5db` | Color de bordes |
+| `borderWidth` | `1` | Ancho de borde en px |
+| `totalsBackground` | `#e8f4fd` | Fondo de celdas de total |
+| `totalsColor` | `#111827` | Color de texto de totales |
+| `totalsBold` | `true` | Totales en negrita |
+| `grandTotalBackground` | `#dbeafe` | Fondo de la fila de gran total |
+
+## Ejemplo Completo
+
+### Datos de entrada
+
+```json
+{
+  "ventas": [
+    { "producto": "Laptop", "region": "Norte", "mes": "Ene", "cantidad": 10, "precio": 100 },
+    { "producto": "Laptop", "region": "Norte", "mes": "Feb", "cantidad": 12, "precio": 100 },
+    { "producto": "Laptop", "region": "Sur", "mes": "Ene", "cantidad": 5, "precio": 100 },
+    { "producto": "Mouse", "region": "Norte", "mes": "Ene", "cantidad": 20, "precio": 15 },
+    { "producto": "Mouse", "region": "Sur", "mes": "Feb", "cantidad": 25, "precio": 15 }
+  ]
+}
+```
+
+### Configuración del Crosstab
+
+```json
+{
+  "type": "Crosstab",
+  "x": 0, "y": 0, "width": 600, "height": 200,
+  "crosstabConfig": {
+    "rowFields": [
+      { "binding": "producto", "label": "Producto" },
+      { "binding": "region", "label": "Región" }
+    ],
+    "columnField": "mes",
+    "valueFields": [
+      { "binding": "cantidad", "label": "Unidades", "aggregation": "sum", "format": "#,##0" },
+      { "binding": "precio", "label": "Precio Total", "aggregation": "sum", "format": "$#,##0.00" }
+    ],
+    "showTotals": true,
+    "showGrandTotals": true,
+    "totalsLabel": "Total",
+    "dataSource": "ventas"
+  },
+  "crosstabStyle": {
+    "headerBackground": "#1e40af",
+    "headerColor": "#ffffff",
+    "alternateRows": true,
+    "totalsBackground": "#dbeafe"
+  }
+}
+```
+
+### Resultado
+
+```
+┌──────────┬──────────┬─────────────────┬─────────────────┬─────────────────┬─────────────────┐
+│ Producto │ Región   │ Ene             │ Feb             │ Total           │                 │
+│          │          │ Unid. │ Precio  │ Unid. │ Precio  │ Unid. │ Precio  │                 │
+├──────────┼──────────┼───────┼─────────┼───────┼─────────┼───────┼─────────┤─────────────────┤
+│ Laptop   │ Norte    │    10 │ $1,000  │    12 │ $1,200  │    22 │ $2,200  │                 │
+│ Laptop   │ Sur      │     5 │   $500  │     - │     -   │     5 │   $500  │                 │
+│ Mouse    │ Norte    │    20 │   $300  │     - │     -   │    20 │   $300  │                 │
+│ Mouse    │ Sur      │     - │     -   │    25 │   $375  │    25 │   $375  │                 │
+├──────────┼──────────┼───────┼─────────┼───────┼─────────┼───────┼─────────┤─────────────────┤
+│ TOTAL    │          │    35 │ $1,800  │    37 │ $1,575  │    72 │ $3,375  │                 │
+└──────────┴──────────┴───────┴─────────┴───────┴─────────┴───────┴─────────┴─────────────────┘
+```
+
+## Exportación
+
+El Crosstab se exporta correctamente a todos los formatos:
+
+- **PDF**: Renderizado vectorial con jsPDF, incluyendo estilos, totales y bordes
+- **Excel**: pivotea los datos como una hoja separada en el workbook
+- **CSV**: Datos planos con encabezados pivotados
+- **Word**: Tabla docx con encabezados en negrita y filas de datos
+
+## Crecimiento Horizontal vs Vertical
+
+| Aspecto | Tabla Normal | Crosstab |
+|---------|-------------|----------|
+| **Columnas** | Fijas en diseño | Dinámicas (según datos) |
+| **Filas** | Crecen verticalmente | Definidas por rowFields |
+| **Agregación** | Manual (footer expressions) | Automática por celda |
+| **Uso ideal** | Listados detallados | Resúmenes pivoteados |
+| **Ejemplo** | Lista de facturas | Ventas por producto × mes |

package/docs/guide/subreport-tabs.md

@@ -0,0 +1,166 @@
+# SubReportes con Pestañas
+
+NexaDesigner permite abrir y editar SubReportes en **pestañas separadas**, similar a cómo funcionan las pestañas en un navegador o en IDEs como VS Code.
+
+## Concepto
+
+Un SubReporte es un reporte embebido dentro de otro reporte padre. Con el sistema de pestañas, puedes:
+
+1. **Abrir** un SubReporte en una nueva pestaña para editarlo cómodamente
+2. **Editar** el SubReporte de forma independiente (diseño, bandas, elementos)
+3. **Guardar** los cambios y que se reflejen automáticamente en el reporte padre
+
+```
+┌─────────────────────────────────────────────────────────┐
+│ [📁 Reporte Principal] [📄 Historial de Ventas] [×]     │ ← Pestañas
+├─────────────────────────────────────────────────────────┤
+│                                                         │
+│  ┌───────────────────────────────────────────────────┐  │
+│  │                                                   │  │
+│  │         Canvas del reporte activo                 │  │
+│  │                                                   │  │
+│  └───────────────────────────────────────────────────┘  │
+│                                                         │
+└─────────────────────────────────────────────────────────┘
+```
+
+## Cómo Usar
+
+### 1. Crear un SubReporte
+
+1. Selecciona **SubReport** en la toolbox (Insert → SubReport)
+2. Arrastra al canvas en la posición deseada
+3. En el panel de propiedades, carga el reporte:
+   - **Desde NexaBase**: Selecciona un reporte guardado en el dropdown
+   - **Desde archivo JSON**: Carga un archivo `.json` exportado
+
+### 2. Abrir en Pestaña
+
+Una vez que el SubReporte tiene una definición cargada:
+
+1. Selecciona el elemento SubReport en el canvas
+2. En el panel de propiedades, haz clic en **"Abrir en pestaña"**
+3. Se abre una nueva pestaña con el contenido del SubReporte
+
+### 3. Editar
+
+La pestaña del SubReporte funciona igual que el diseñador principal:
+- Agrega/elimina bandas (ReportHeader, DataBand, PageFooter, etc.)
+- Arrastra elementos desde la toolbox
+- Configura propiedades en el panel lateral
+- Usa el mismo motor de expresiones y binding
+
+### 4. Guardar
+
+Al guardar el reporte padre (NexaBase o JSON):
+- Los cambios en la pestaña del SubReporte se **sincronizan automáticamente** al elemento SubReport dentro del padre
+- No necesitas copiar/pegar manualmente
+- El guardado es atómico: padre + todos los SubReportes abiertos
+
+## Indicadores de Estado
+
+### Pestaña Activa
+- **Borde superior azul**: indica cuál pestaña estás viendo
+- **Negrita**: el reporte activo
+
+### Cambios Pendientes
+- **Punto naranja (●)**: la pestaña tiene cambios sin guardar
+- Aparece automáticamente cuando editas algo en el SubReporte
+
+### Cerrar Pestaña
+- **Botón ×**: cierra la pestaña del SubReporte
+- **No puedes cerrar** la pestaña principal (siempre está abierta)
+- Al cerrar, los cambios no guardados se pierden
+
+## Arquitectura
+
+### Modelo de Datos
+
+```
+NexaReportDefinition
+├── layout.bands[]
+│   ├── Band1.elements[]
+│   │   ├── SubReport (element)
+│   │   │   ├── subReportId: "report_123"          ← ID de NexaBase (diseño)
+│   │   │   ├── subReportDefinition: {...}          ← Definición inline (render)
+│   │   │   ├── subReportDataSource: "historico"    ← Alias del dataSource padre
+│   │   │   └── subReportBindings: [...]            ← Filtros master/child
+```
+
+### Flujo de Sincronización
+
+```
+┌─────────────┐     openSubReportTab()     ┌─────────────┐
+│  Reporte    │ ──────────────────────────► │  Pestaña    │
+│  Padre      │                            │  SubReporte │
+│             │ ◄────────────────────────── │             │
+│  (main)     │   syncSubReportToParent()   │  (sub_xxx)  │
+└─────────────┘                            └─────────────┘
+       │                                         │
+       │  handleSave()                           │  Editar
+       ▼                                         ▼
+┌─────────────┐                            ┌─────────────┐
+│  NexaBase   │                            │  Canvas     │
+│  (guarda)   │                            │  WYSIWYG    │
+└─────────────┘                            └─────────────┘
+```
+
+### Sincronización
+
+Cuando guardas el reporte padre:
+
+1. **Recorre todas las pestañas** abiertas
+2. Para cada SubReporte, busca el elemento `SubReport` correspondiente en el padre
+3. **Actualiza** `subReportDefinition` con la definición actual de la pestaña
+4. **Guarda** el reporte padre completo (incluyendo todas las definiciones de SubReportes)
+
+## Ejemplo: Reporte con SubReporte de Historial
+
+### Estructura
+
+```
+Reporte Principal (Factura)
+├── ReportHeader
+│   ├── Text: "FACTURA #{{numero}}"
+│   ├── Text: "Fecha: {{fecha}}"
+│   └── Image: Logo empresa
+├── DataBand (dataSource: "clientes")
+│   ├── Text: "Cliente: {{nombre}}"
+│   ├── Text: "Email: {{email}}"
+│   └── SubReport (y: 200)
+│       ├── subReportDataSource: "historico"
+│       ├── subReportBindings: [{ masterField: "cliente_id", childField: "cliente_id" }]
+│       └── subReportDefinition: { ... }  ← Se edita en pestaña separada
+└── PageFooter
+    └── Text: "Página {{Page}} de {{TotalPages}}"
+```
+
+### SubReporte (Historial de Ventas)
+
+```
+SubReport: Historial de Ventas
+├── ReportHeader
+│   └── Text: "Historial de Compras"
+├── DataBand (dataSource: "historico")  ← Recibe datos filtrados del padre
+│   └── Table
+│       ├── Column: Fecha ({{fecha}})
+│       ├── Column: Producto ({{producto}})
+│       ├── Column: Cantidad ({{cantidad}})
+│       └── Column: Total ({{total}})
+└── PageFooter
+    └── Text: "{{RowNumber}} de {{TotalRows}}"
+```
+
+## Limitaciones
+
+1. **Una sola nivel de anidación**: Un SubReporte no puede contener otro SubReporte
+2. **Pestaña = copia**: Al abrir en pestaña, se crea una **copia independiente**. Si alguien más edita el mismo reporte, no se sincroniza en tiempo real
+3. **Cierre sin guardar**: Al cerrar una pestaña con cambios sin guardar, los cambios se pierden
+4. **Sin preview en vivo**: Los cambios en la pestaña del SubReporte no se reflejan en el canvas del padre hasta que guardes
+
+## Mejores Prácticas
+
+1. **Nombra tus SubReportes**: Usa nombres descriptivos en `metadata.name` para que las pestañas sean identificables
+2. **Guarda frecuentemente**: Usa Ctrl+S o el botón Guardar para sincronizar cambios
+3. **Cierra pestañas innecesarias**: Reduce la complejidad visual cerrando pestañas que no estás editando
+4. **Usa dataSources separados**: Cada SubReporte debe tener su propio dataSource o usar el filtrado del padre

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexabase-report",
-  "version": "0.25.8",
+  "version": "0.26.2",
   "description": "Professional report designer and viewer for NexaBase — drag & drop designer, PDF/Excel export, charts, crosstabs, subreports.",
   "license": "MIT",
   "author": "NexaBase Team",