npm - nexabase-report - Versions diffs - 0.2.10 → 0.2.12 - Mend

nexabase-report 0.2.10 → 0.2.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/examples/integration-angular.html CHANGED Viewed

@@ -1,99 +1,99 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>NexaReport — Angular</title>
-  <link rel="stylesheet" href="../dist/style.css">
-  <style>
-    body { margin: 0; font-family: system-ui, sans-serif; }
-    #app { height: 100vh; display: flex; flex-direction: column; }
-    header { padding: 12px 20px; background: #1e293b; color: #fff; display: flex; align-items: center; gap: 12px; }
-    header h1 { margin: 0; font-size: 18px; font-weight: 600; }
-    header small { opacity: 0.7; }
-    nexa-viewer { flex: 1; display: block; }
-  </style>
-</head>
-<body>
-  <div id="app">
-    <header>
-      <h1>NexaReport</h1>
-      <small>Angular · Demo</small>
-    </header>
-    <nexa-viewer id="viewer" minimal></nexa-viewer>
-  </div>
-  <script src="https://unpkg.com/@angular/core@18/bundles/core.umd.js"></script>
-  <script src="https://unpkg.com/@angular/common@18/bundles/common.umd.js"></script>
-  <script src="https://unpkg.com/@angular/compiler@18/bundles/compiler.umd.js"></script>
-  <script src="https://unpkg.com/@angular/platform-browser@18/bundles/platform-browser.umd.js"></script>
-  <script src="https://unpkg.com/@angular/platform-browser-dynamic@18/bundles/platform-browser-dynamic.umd.js"></script>
-  <script src="https://unpkg.com/zone.js@0.14/dist/zone.js"></script>
-  <script src="https://unpkg.com/rxjs@7/dist/bundles/rxjs.umd.js"></script>
-  <script src="../dist/nexabase-report.umd.js"></script>
-  <script>
-    NexaReport.registerNexaReport();
-    const reportDef = {
-      metadata: { version: '1', name: 'Clientes', createdAt: new Date().toISOString() },
-      layout: {
-        page: { format: 'A4', orientation: 'portrait', margins: { top: 1, right: 1, bottom: 1, left: 1 } },
-        bands: [
-          { id: 'b_hdr', type: 'ReportHeader', height: 60, elements: [
-            { id: 'e_titulo', type: 'Text', x: 20, y: 10, width: 500, height: 30,
-              content: 'Directorio de Clientes', style: { fontSize: '22px', fontWeight: 'bold' } }
-          ]},
-          { id: 'b_data', type: 'DataBand', height: 30, dataSource: 'main', elements: [
-            { id: 'e_nombre', type: 'Text', x: 20, y: 5, width: 200, height: 20,
-              binding: 'nombre', style: { fontSize: '12px' } },
-            { id: 'e_email', type: 'Text', x: 240, y: 5, width: 250, height: 20,
-              binding: 'email', style: { fontSize: '12px' } },
-            { id: 'e_ciudad', type: 'Text', x: 510, y: 5, width: 150, height: 20,
-              binding: 'ciudad', style: { fontSize: '12px' } }
-          ]},
-          { id: 'b_ftr', type: 'PageFooter', height: 30, elements: [
-            { id: 'e_page', type: 'Text', x: 20, y: 5, width: 200, height: 20,
-              content: 'Página {[Page]} de {[TotalPages]}', style: { fontSize: '10px', color: '#666' } }
-          ]}
-        ]
-      },
-      dataSources: [{ id: 'ds1', collection: '', alias: 'main', enabled: true }]
-    };
-    const data = [
-      { nombre: 'Juan Pérez', email: 'juan@mail.com', ciudad: 'Madrid' },
-      { nombre: 'María López', email: 'maria@mail.com', ciudad: 'Barcelona' },
-      { nombre: 'Carlos Ruiz', email: 'carlos@mail.com', ciudad: 'Valencia' },
-    ];
-    (function() {
-      const { Component, NgModule } = ng.core;
-      const { BrowserModule } = ng.platformBrowser;
-      const { platformBrowserDynamic } = ng.platformBrowserDynamic;
-      const { CommonModule } = ng.common;
-      @Component({
-        selector: 'app-root',
-        template: '<nexa-viewer id="viewer" minimal></nexa-viewer>'
-      })
-      class AppComponent {
-        ngAfterViewInit() {
-          const viewer = document.getElementById('viewer');
-          viewer.definition = reportDef;
-          viewer.data = data;
-        }
-      }
-      @NgModule({
-        imports: [BrowserModule],
-        declarations: [AppComponent],
-        schemas: [ng.core.CUSTOM_ELEMENTS_SCHEMA],
-        bootstrap: [AppComponent]
-      })
-      class AppModule {}
-      platformBrowserDynamic().bootstrapModule(AppModule);
-    })();
-  </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NexaReport — Angular</title>
+  <link rel="stylesheet" href="../dist/style.css">
+  <style>
+    body { margin: 0; font-family: system-ui, sans-serif; }
+    #app { height: 100vh; display: flex; flex-direction: column; }
+    header { padding: 12px 20px; background: #1e293b; color: #fff; display: flex; align-items: center; gap: 12px; }
+    header h1 { margin: 0; font-size: 18px; font-weight: 600; }
+    header small { opacity: 0.7; }
+    nexa-viewer { flex: 1; display: block; }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <header>
+      <h1>NexaReport</h1>
+      <small>Angular · Demo</small>
+    </header>
+    <nexa-viewer id="viewer" minimal></nexa-viewer>
+  </div>
+  <script src="https://unpkg.com/@angular/core@18/bundles/core.umd.js"></script>
+  <script src="https://unpkg.com/@angular/common@18/bundles/common.umd.js"></script>
+  <script src="https://unpkg.com/@angular/compiler@18/bundles/compiler.umd.js"></script>
+  <script src="https://unpkg.com/@angular/platform-browser@18/bundles/platform-browser.umd.js"></script>
+  <script src="https://unpkg.com/@angular/platform-browser-dynamic@18/bundles/platform-browser-dynamic.umd.js"></script>
+  <script src="https://unpkg.com/zone.js@0.14/dist/zone.js"></script>
+  <script src="https://unpkg.com/rxjs@7/dist/bundles/rxjs.umd.js"></script>
+  <script src="../dist/nexabase-report.umd.js"></script>
+  <script>
+    NexaReport.registerNexaReport();
+    const reportDef = {
+      metadata: { version: '1', name: 'Clientes', createdAt: new Date().toISOString() },
+      layout: {
+        page: { format: 'A4', orientation: 'portrait', margins: { top: 1, right: 1, bottom: 1, left: 1 } },
+        bands: [
+          { id: 'b_hdr', type: 'ReportHeader', height: 60, elements: [
+            { id: 'e_titulo', type: 'Text', x: 20, y: 10, width: 500, height: 30,
+              content: 'Directorio de Clientes', style: { fontSize: '22px', fontWeight: 'bold' } }
+          ]},
+          { id: 'b_data', type: 'DataBand', height: 30, dataSource: 'main', elements: [
+            { id: 'e_nombre', type: 'Text', x: 20, y: 5, width: 200, height: 20,
+              binding: 'nombre', style: { fontSize: '12px' } },
+            { id: 'e_email', type: 'Text', x: 240, y: 5, width: 250, height: 20,
+              binding: 'email', style: { fontSize: '12px' } },
+            { id: 'e_ciudad', type: 'Text', x: 510, y: 5, width: 150, height: 20,
+              binding: 'ciudad', style: { fontSize: '12px' } }
+          ]},
+          { id: 'b_ftr', type: 'PageFooter', height: 30, elements: [
+            { id: 'e_page', type: 'Text', x: 20, y: 5, width: 200, height: 20,
+              content: 'Página {[Page]} de {[TotalPages]}', style: { fontSize: '10px', color: '#666' } }
+          ]}
+        ]
+      },
+      dataSources: [{ id: 'ds1', collection: '', alias: 'main', enabled: true }]
+    };
+    const data = [
+      { nombre: 'Juan Pérez', email: 'juan@mail.com', ciudad: 'Madrid' },
+      { nombre: 'María López', email: 'maria@mail.com', ciudad: 'Barcelona' },
+      { nombre: 'Carlos Ruiz', email: 'carlos@mail.com', ciudad: 'Valencia' },
+    ];
+    (function() {
+      const { Component, NgModule } = ng.core;
+      const { BrowserModule } = ng.platformBrowser;
+      const { platformBrowserDynamic } = ng.platformBrowserDynamic;
+      const { CommonModule } = ng.common;
+      @Component({
+        selector: 'app-root',
+        template: '<nexa-viewer id="viewer" minimal></nexa-viewer>'
+      })
+      class AppComponent {
+        ngAfterViewInit() {
+          const viewer = document.getElementById('viewer');
+          viewer.definition = reportDef;
+          viewer.data = data;
+        }
+      }
+      @NgModule({
+        imports: [BrowserModule],
+        declarations: [AppComponent],
+        schemas: [ng.core.CUSTOM_ELEMENTS_SCHEMA],
+        bootstrap: [AppComponent]
+      })
+      class AppModule {}
+      platformBrowserDynamic().bootstrapModule(AppModule);
+    })();
+  </script>
+</body>
+</html>

package/examples/integration-api.html CHANGED Viewed

@@ -1,80 +1,80 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>NexaReport — Carga desde API</title>
-  <link rel="stylesheet" href="../dist/style.css">
-  <style>
-    body { margin: 0; font-family: system-ui, sans-serif; }
-    #app { height: 100vh; display: flex; flex-direction: column; }
-    header { padding: 12px 20px; background: #1e293b; color: #fff; display: flex; align-items: center; gap: 12px; }
-    header h1 { margin: 0; font-size: 18px; font-weight: 600; }
-    header small { opacity: 0.7; }
-    .controls { padding: 8px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; gap: 8px; align-items: center; }
-    .controls button { padding: 6px 14px; background: #3b82f6; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; }
-    .controls button:hover { background: #2563eb; }
-    .controls input { flex: 1; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; }
-    #status { font-size: 12px; color: #64748b; }
-    nexa-viewer { flex: 1; display: block; }
-  </style>
-</head>
-<body>
-  <div id="app">
-    <header>
-      <h1>NexaReport</h1>
-      <small>Carga desde API · Demo</small>
-    </header>
-    <div class="controls">
-      <span style="font-size:13px;font-weight:600">Reporte:</span>
-      <input id="reportUrl" type="text" value="/examples/report-productos.json" placeholder="URL del JSON de definición" />
-      <button id="btnLoad">Cargar</button>
-      <span id="status">Listo</span>
-    </div>
-    <nexa-viewer id="viewer" minimal></nexa-viewer>
-  </div>
-  <script src="../dist/nexabase-report.umd.js"></script>
-  <script>
-    window.NexaReport.registerNexaReport();
-    const viewer = document.getElementById('viewer');
-    const statusEl = document.getElementById('status');
-    const reportUrl = document.getElementById('reportUrl');
-    async function loadReport(url) {
-      statusEl.textContent = 'Cargando definición...';
-      try {
-        const res = await fetch(url);
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        const definition = await res.json();
-        viewer.definition = definition;
-        // Si el reporte tiene dataSources, cargar datos de ejemplo
-        if (definition.dataSources && definition.dataSources.length > 0) {
-          const alias = definition.dataSources[0].alias || 'main';
-          statusEl.textContent = `Cargando datos para "${alias}"...`;
-          // En producción, aquí llamarías a tu API real
-          viewer.data = [
-            { nombre: 'Producto A', precio: 100, cantidad: 5 },
-            { nombre: 'Producto B', precio: 200, cantidad: 3 },
-            { nombre: 'Producto C', precio: 150, cantidad: 8 },
-          ];
-        }
-        statusEl.textContent = `Reporte: ${definition.metadata?.name || 'sin nombre'} (${new Date().toLocaleTimeString()})`;
-      } catch (err) {
-        statusEl.textContent = `Error: ${err.message}`;
-        console.error(err);
-      }
-    }
-    document.getElementById('btnLoad').addEventListener('click', () => {
-      loadReport(reportUrl.value);
-    });
-    // Cargar reporte por defecto al iniciar
-    loadReport(reportUrl.value);
-  </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NexaReport — Carga desde API</title>
+  <link rel="stylesheet" href="../dist/style.css">
+  <style>
+    body { margin: 0; font-family: system-ui, sans-serif; }
+    #app { height: 100vh; display: flex; flex-direction: column; }
+    header { padding: 12px 20px; background: #1e293b; color: #fff; display: flex; align-items: center; gap: 12px; }
+    header h1 { margin: 0; font-size: 18px; font-weight: 600; }
+    header small { opacity: 0.7; }
+    .controls { padding: 8px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; gap: 8px; align-items: center; }
+    .controls button { padding: 6px 14px; background: #3b82f6; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; }
+    .controls button:hover { background: #2563eb; }
+    .controls input { flex: 1; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; }
+    #status { font-size: 12px; color: #64748b; }
+    nexa-viewer { flex: 1; display: block; }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <header>
+      <h1>NexaReport</h1>
+      <small>Carga desde API · Demo</small>
+    </header>
+    <div class="controls">
+      <span style="font-size:13px;font-weight:600">Reporte:</span>
+      <input id="reportUrl" type="text" value="/examples/report-productos.json" placeholder="URL del JSON de definición" />
+      <button id="btnLoad">Cargar</button>
+      <span id="status">Listo</span>
+    </div>
+    <nexa-viewer id="viewer" minimal></nexa-viewer>
+  </div>
+  <script src="../dist/nexabase-report.umd.js"></script>
+  <script>
+    window.NexaReport.registerNexaReport();
+    const viewer = document.getElementById('viewer');
+    const statusEl = document.getElementById('status');
+    const reportUrl = document.getElementById('reportUrl');
+    async function loadReport(url) {
+      statusEl.textContent = 'Cargando definición...';
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const definition = await res.json();
+        viewer.definition = definition;
+        // Si el reporte tiene dataSources, cargar datos de ejemplo
+        if (definition.dataSources && definition.dataSources.length > 0) {
+          const alias = definition.dataSources[0].alias || 'main';
+          statusEl.textContent = `Cargando datos para "${alias}"...`;
+          // En producción, aquí llamarías a tu API real
+          viewer.data = [
+            { nombre: 'Producto A', precio: 100, cantidad: 5 },
+            { nombre: 'Producto B', precio: 200, cantidad: 3 },
+            { nombre: 'Producto C', precio: 150, cantidad: 8 },
+          ];
+        }
+        statusEl.textContent = `Reporte: ${definition.metadata?.name || 'sin nombre'} (${new Date().toLocaleTimeString()})`;
+      } catch (err) {
+        statusEl.textContent = `Error: ${err.message}`;
+        console.error(err);
+      }
+    }
+    document.getElementById('btnLoad').addEventListener('click', () => {
+      loadReport(reportUrl.value);
+    });
+    // Cargar reporte por defecto al iniciar
+    loadReport(reportUrl.value);
+  </script>
+</body>
+</html>

package/examples/integration-react.html CHANGED Viewed

@@ -1,80 +1,80 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>NexaReport — React</title>
-  <link rel="stylesheet" href="../dist/style.css">
-  <style>
-    body { margin: 0; font-family: system-ui, sans-serif; }
-    #root { height: 100vh; display: flex; flex-direction: column; }
-    header { padding: 12px 20px; background: #1e293b; color: #fff; display: flex; align-items: center; gap: 12px; }
-    header h1 { margin: 0; font-size: 18px; font-weight: 600; }
-    header small { opacity: 0.7; }
-    nexa-viewer { flex: 1; display: block; }
-  </style>
-</head>
-<body>
-  <div id="root">
-    <header>
-      <h1>NexaReport</h1>
-      <small>React · Demo</small>
-    </header>
-    <nexa-viewer id="viewer" minimal></nexa-viewer>
-  </div>
-  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-  <script src="../dist/nexabase-report.umd.js"></script>
-  <script type="text/babel">
-    NexaReport.registerNexaReport();
-    const reportDef = {
-      metadata: { version: '1', name: 'Órdenes', createdAt: new Date().toISOString() },
-      layout: {
-        page: { format: 'A4', orientation: 'portrait', margins: { top: 1, right: 1, bottom: 1, left: 1 } },
-        bands: [
-          { id: 'b_hdr', type: 'ReportHeader', height: 60, elements: [
-            { id: 'e_titulo', type: 'Text', x: 20, y: 10, width: 500, height: 30,
-              content: 'Órdenes de Compra', style: { fontSize: '22px', fontWeight: 'bold' } }
-          ]},
-          { id: 'b_data', type: 'DataBand', height: 30, dataSource: 'main', elements: [
-            { id: 'e_orden', type: 'Text', x: 20, y: 5, width: 100, height: 20,
-              binding: 'orden', style: { fontSize: '12px' } },
-            { id: 'e_cliente', type: 'Text', x: 140, y: 5, width: 200, height: 20,
-              binding: 'cliente', style: { fontSize: '12px' } },
-            { id: 'e_monto', type: 'Text', x: 370, y: 5, width: 100, height: 20,
-              binding: 'monto', style: { fontSize: '12px', textAlign: 'right' } }
-          ]},
-          { id: 'b_ftr', type: 'PageFooter', height: 30, elements: [
-            { id: 'e_page', type: 'Text', x: 20, y: 5, width: 200, height: 20,
-              content: 'Página {[Page]} de {[TotalPages]}', style: { fontSize: '10px', color: '#666' } }
-          ]}
-        ]
-      },
-      dataSources: [{ id: 'ds1', collection: '', alias: 'main', enabled: true }]
-    };
-    const data = [
-      { orden: 'ORD-001', cliente: 'Juan Pérez', monto: 15000 },
-      { orden: 'ORD-002', cliente: 'María López', monto: 23000 },
-      { orden: 'ORD-003', cliente: 'Carlos Ruiz', monto: 8700 },
-    ];
-    function ReportViewer() {
-      const viewerRef = React.useRef(null);
-      React.useEffect(() => {
-        if (viewerRef.current) {
-          viewerRef.current.definition = reportDef;
-          viewerRef.current.data = data;
-        }
-      }, []);
-      return React.createElement('nexa-viewer', { ref: viewerRef, minimal: true });
-    }
-    const root = ReactDOM.createRoot(document.getElementById('root'));
-    root.render(React.createElement(ReportViewer));
-  </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NexaReport — React</title>
+  <link rel="stylesheet" href="../dist/style.css">
+  <style>
+    body { margin: 0; font-family: system-ui, sans-serif; }
+    #root { height: 100vh; display: flex; flex-direction: column; }
+    header { padding: 12px 20px; background: #1e293b; color: #fff; display: flex; align-items: center; gap: 12px; }
+    header h1 { margin: 0; font-size: 18px; font-weight: 600; }
+    header small { opacity: 0.7; }
+    nexa-viewer { flex: 1; display: block; }
+  </style>
+</head>
+<body>
+  <div id="root">
+    <header>
+      <h1>NexaReport</h1>
+      <small>React · Demo</small>
+    </header>
+    <nexa-viewer id="viewer" minimal></nexa-viewer>
+  </div>
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <script src="../dist/nexabase-report.umd.js"></script>
+  <script type="text/babel">
+    NexaReport.registerNexaReport();
+    const reportDef = {
+      metadata: { version: '1', name: 'Órdenes', createdAt: new Date().toISOString() },
+      layout: {
+        page: { format: 'A4', orientation: 'portrait', margins: { top: 1, right: 1, bottom: 1, left: 1 } },
+        bands: [
+          { id: 'b_hdr', type: 'ReportHeader', height: 60, elements: [
+            { id: 'e_titulo', type: 'Text', x: 20, y: 10, width: 500, height: 30,
+              content: 'Órdenes de Compra', style: { fontSize: '22px', fontWeight: 'bold' } }
+          ]},
+          { id: 'b_data', type: 'DataBand', height: 30, dataSource: 'main', elements: [
+            { id: 'e_orden', type: 'Text', x: 20, y: 5, width: 100, height: 20,
+              binding: 'orden', style: { fontSize: '12px' } },
+            { id: 'e_cliente', type: 'Text', x: 140, y: 5, width: 200, height: 20,
+              binding: 'cliente', style: { fontSize: '12px' } },
+            { id: 'e_monto', type: 'Text', x: 370, y: 5, width: 100, height: 20,
+              binding: 'monto', style: { fontSize: '12px', textAlign: 'right' } }
+          ]},
+          { id: 'b_ftr', type: 'PageFooter', height: 30, elements: [
+            { id: 'e_page', type: 'Text', x: 20, y: 5, width: 200, height: 20,
+              content: 'Página {[Page]} de {[TotalPages]}', style: { fontSize: '10px', color: '#666' } }
+          ]}
+        ]
+      },
+      dataSources: [{ id: 'ds1', collection: '', alias: 'main', enabled: true }]
+    };
+    const data = [
+      { orden: 'ORD-001', cliente: 'Juan Pérez', monto: 15000 },
+      { orden: 'ORD-002', cliente: 'María López', monto: 23000 },
+      { orden: 'ORD-003', cliente: 'Carlos Ruiz', monto: 8700 },
+    ];
+    function ReportViewer() {
+      const viewerRef = React.useRef(null);
+      React.useEffect(() => {
+        if (viewerRef.current) {
+          viewerRef.current.definition = reportDef;
+          viewerRef.current.data = data;
+        }
+      }, []);
+      return React.createElement('nexa-viewer', { ref: viewerRef, minimal: true });
+    }
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(React.createElement(ReportViewer));
+  </script>
+</body>
+</html>