nexabase-report 0.1.0 → 0.1.1

package/README.md

@@ -12,6 +12,12 @@ npm install nexabase-report
 
 El Viewer se expone como Custom Element: `<nexa-viewer />`.
 
+## Flujo real (NexaBase): cargar JSON exportado + pasar data
+
+1. Exporta el reporte desde NexaBase y guarda el JSON en tu app (por ejemplo en `public/report.json`).
+2. Carga ese JSON por `fetch()` y asígnalo a `definition`.
+3. Pasa tus datos del sistema en `data`.
+
 ### 1) Vue 3
 
 ```ts
@@ -22,6 +28,23 @@ registerNexaReport();
 ```
 
 ```vue
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+const definition = ref<any>(null);
+const data = ref<any[]>([]);
+
+onMounted(async () => {
+  const res = await fetch('/report.json');
+  definition.value = await res.json();
+
+  data.value = [
+    { nombre: 'Producto A', precio: 100, cantidad: 2 },
+    { nombre: 'Producto B', precio: 50, cantidad: 5 },
+  ];
+});
+</script>
+
 <template>
   <nexa-viewer
     :definition="definition"
@@ -36,14 +59,29 @@ registerNexaReport();
 ### 2) React
 
 ```tsx
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { registerNexaReport } from 'nexabase-report';
 import 'nexabase-report/style.css';
 
 registerNexaReport();
 
-export function ReportViewer({ definition, data, parameters }: any) {
+export function ReportViewer() {
   const ref = useRef<any>(null);
+  const [definition, setDefinition] = useState<any>(null);
+  const [data, setData] = useState<any[]>([]);
+  const [parameters] = useState<any>({ fechaDesde: '2026-01-01' });
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetch('/report.json');
+      setDefinition(await res.json());
+      setData([
+        { nombre: 'Producto A', precio: 100, cantidad: 2 },
+        { nombre: 'Producto B', precio: 50, cantidad: 5 },
+      ]);
+    })();
+  }, []);
+
   useEffect(() => {
     if (!ref.current) return;
     ref.current.definition = definition;
@@ -55,6 +93,34 @@ export function ReportViewer({ definition, data, parameters }: any) {
 }
 ```
 
+### 3) Angular
+
+En Angular, pon el JSON exportado en `src/assets/report.json` y cárgalo con `HttpClient` o `fetch()`.
+
+```ts
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: '<nexa-viewer #viewer></nexa-viewer>',
+})
+export class AppComponent implements AfterViewInit {
+  @ViewChild('viewer', { static: true }) viewerRef!: ElementRef<any>;
+
+  async ngAfterViewInit() {
+    const v = this.viewerRef.nativeElement;
+    const res = await fetch('/assets/report.json');
+    v.definition = await res.json();
+    v.data = [
+      { nombre: 'Producto A', precio: 100, cantidad: 2 },
+      { nombre: 'Producto B', precio: 50, cantidad: 5 },
+    ];
+    v.minimal = true;
+    v.skipParamsDialog = true;
+  }
+}
+```
+
 ### 3) HTML puro (CDN / UMD)
 
 ```html

package/dist/{html2canvas-BXLDsEU4.js → html2canvas-Dmt1hL9C.js}

@@ -1,5 +1,5 @@
-import { a as c } from "./index-BJcVIdAR.js";
-import { r as f } from "./html2canvas-CSJ68r_Q.js";
+import { a as c } from "./index-j9lAJl17.js";
+import { r as f } from "./html2canvas-MMn8dUQK.js";
 function l(r, n) {
   for (var o = 0; o < n.length; o++) {
     const e = n[o];

package/dist/{html2canvas-CSJ68r_Q.js → html2canvas-MMn8dUQK.js}

@@ -1,4 +1,4 @@
-import { c as MQ } from "./index-BJcVIdAR.js";
+import { c as MQ } from "./index-j9lAJl17.js";
 var nt = { exports: {} };
 /*!
  * html2canvas 1.4.1 <https://html2canvas.hertzen.com>

package/dist/{html2pdf-DwP6YZUu.js → html2pdf-BumfBzwC.js}

@@ -1,6 +1,6 @@
-import { g as De, a as Ke, c as Te } from "./index-BJcVIdAR.js";
-import { j as Ge } from "./jspdf.es.min-CDx0J4wI.js";
-import { r as Be } from "./html2canvas-CSJ68r_Q.js";
+import { g as De, a as Ke, c as Te } from "./index-j9lAJl17.js";
+import { j as Ge } from "./jspdf.es.min-DIevzj7_.js";
+import { r as Be } from "./html2canvas-MMn8dUQK.js";
 function Ue(ge, we) {
   for (var me = 0; me < we.length; me++) {
     const ce = we[me];