@zentto/report-designer 1.6.6 → 1.7.0

package/dist/zentto-report-designer.js

@@ -72,14 +72,35 @@ const ELEMENT_TYPE_ICONS = {
     totalPages: '#',
 };
 const TOOLBOX_ITEMS = [
-    { type: 'text', label: 'Text', icon: 'T', preview: 'Aa', description: 'Static text label or title' },
-    { type: 'field', label: 'Field', icon: 'F', preview: '[Field]', description: 'Data-bound field from a source' },
-    { type: 'image', label: 'Image', icon: '\u{1F5BC}', preview: '\u{1F304}', description: 'Static or dynamic image' },
-    { type: 'line', label: 'Line', icon: '/', preview: '\u2500\u2500\u2500', description: 'Horizontal or vertical line' },
-    { type: 'rect', label: 'Rectangle', icon: '[]', preview: '\u25AD', description: 'Rectangle or filled box' },
-    { type: 'barcode', label: 'Barcode', icon: 'BC', preview: '||||', description: 'QR, Code128, EAN13, Code39' },
-    { type: 'pageNumber', label: 'Page #', icon: '#', preview: '1/5', description: 'Current page number' },
-    { type: 'currentDate', label: 'Date', icon: 'D', preview: '27/03', description: 'Current date/time stamp' },
+    // ─── Text & Data ───
+    { type: 'text', label: 'Text', icon: 'T', preview: 'Aa', description: 'Static text label or title', category: 'Text & Data' },
+    { type: 'field', label: 'Field', icon: 'F', preview: '[Field]', description: 'Data-bound field from a source', category: 'Text & Data' },
+    { type: 'text', label: 'Title', icon: 'H', preview: 'Title', description: 'Large bold title text', category: 'Text & Data', extraProps: { content: 'Title', style: { fontSize: 18, fontWeight: 'bold' }, width: 80, height: 10 } },
+    { type: 'text', label: 'Subtitle', icon: 'h', preview: 'Subtitle', description: 'Medium subtitle text', category: 'Text & Data', extraProps: { content: 'Subtitle', style: { fontSize: 13, fontWeight: 'bold', color: '#666' }, width: 60, height: 8 } },
+    { type: 'text', label: 'Label', icon: 'L', preview: 'Label:', description: 'Small bold label', category: 'Text & Data', extraProps: { content: 'Label:', style: { fontSize: 9, fontWeight: 'bold' }, width: 25, height: 6 } },
+    // ─── Shapes & Lines ───
+    { type: 'line', label: 'Line', icon: '\u2500', preview: '\u2500\u2500\u2500', description: 'Horizontal line separator', category: 'Shapes' },
+    { type: 'line', label: 'Thick Line', icon: '\u2501', preview: '\u2501\u2501\u2501', description: 'Thick separator line', category: 'Shapes', extraProps: { lineStyle: { color: '#000', width: 3, style: 'solid' }, width: 80 } },
+    { type: 'line', label: 'Dashed Line', icon: '\u2504', preview: '- - -', description: 'Dashed separator', category: 'Shapes', extraProps: { lineStyle: { color: '#999', width: 1, style: 'dashed' }, width: 80 } },
+    { type: 'rect', label: 'Rectangle', icon: '\u25AD', preview: '\u25AD', description: 'Rectangle or filled box', category: 'Shapes' },
+    { type: 'rect', label: 'Filled Box', icon: '\u25A0', preview: '\u25A0', description: 'Filled color box', category: 'Shapes', extraProps: { fill: '#1976d2', lineStyle: { width: 0 }, width: 30, height: 15 } },
+    { type: 'rect', label: 'Rounded Box', icon: '\u25A2', preview: '\u25A2', description: 'Box with rounded corners', category: 'Shapes', extraProps: { cornerRadius: 6, lineStyle: { color: '#ccc', width: 1, style: 'solid' }, width: 40, height: 15 } },
+    // ─── Media ───
+    { type: 'image', label: 'Image', icon: '\u{1F5BC}', preview: '\u{1F304}', description: 'Static or dynamic image', category: 'Media' },
+    { type: 'barcode', label: 'QR Code', icon: '\u2588', preview: 'QR', description: 'QR code from field or value', category: 'Media', extraProps: { barcodeType: 'qr', value: '12345', width: 20, height: 20 } },
+    { type: 'barcode', label: 'Barcode 128', icon: '|||', preview: '||||', description: 'Code128 barcode', category: 'Media', extraProps: { barcodeType: 'code128', value: '12345' } },
+    { type: 'barcode', label: 'EAN-13', icon: '\u2584', preview: 'EAN', description: 'EAN-13 product barcode', category: 'Media', extraProps: { barcodeType: 'ean13', value: '5901234123457' } },
+    // ─── Charts ───
+    { type: 'chart', label: 'Bar Chart', icon: '\u{1F4CA}', preview: '\u{2581}\u{2583}\u{2585}\u{2587}', description: 'Bar chart visualization', category: 'Charts', extraProps: { chartType: 'bar', labelField: '', valueFields: [], width: 80, height: 50 } },
+    { type: 'chart', label: 'Line Chart', icon: '\u{1F4C8}', preview: '\u{2571}\u{2572}\u{2571}', description: 'Line chart with trends', category: 'Charts', extraProps: { chartType: 'line', labelField: '', valueFields: [], width: 80, height: 50 } },
+    { type: 'chart', label: 'Pie Chart', icon: '\u{1F967}', preview: '\u{25D4}', description: 'Pie/donut chart', category: 'Charts', extraProps: { chartType: 'pie', labelField: '', valueFields: [], width: 50, height: 50 } },
+    { type: 'chart', label: 'Area Chart', icon: '\u{1F30A}', preview: '\u{2586}\u{2584}\u{2582}', description: 'Area chart with fill', category: 'Charts', extraProps: { chartType: 'area', labelField: '', valueFields: [], width: 80, height: 50 } },
+    { type: 'chart', label: 'Combo Chart', icon: '\u{1F4CA}', preview: '\u{2581}\u{2571}\u{2585}', description: 'Bars + lines combined', category: 'Charts', extraProps: { chartType: 'combo', labelField: '', valueFields: [], width: 80, height: 50 } },
+    // ─── Page & Special ───
+    { type: 'pageNumber', label: 'Page Number', icon: '#', preview: '1/5', description: 'Page N of M', category: 'Special' },
+    { type: 'currentDate', label: 'Print Date', icon: '\u{1F4C5}', preview: '27/03', description: 'Current date/time', category: 'Special' },
+    { type: 'currentDate', label: 'Print Time', icon: '\u{1F552}', preview: '14:30', description: 'Current time only', category: 'Special', extraProps: { format: 'HH:mm:ss' } },
+    { type: 'text', label: 'Watermark', icon: '\u{1F4A7}', preview: 'DRAFT', description: 'Semi-transparent watermark text', category: 'Special', extraProps: { content: 'DRAFT', style: { fontSize: 48, fontWeight: 'bold', color: '#ccc', textAlign: 'center', opacity: 0.3 }, width: 120, height: 30 } },
 ];
 let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
     constructor() {
@@ -1575,6 +1596,9 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
             case 'barcode':
                 element = { ...baseProps, type: 'barcode', barcodeType: 'qr', value: '12345', width: 15, height: 15 };
                 break;
+            case 'chart':
+                element = { ...baseProps, type: 'chart', chartType: 'bar', dataSource: '', labelField: '', valueFields: [], width: 80, height: 50 };
+                break;
             case 'pageNumber':
                 element = { ...baseProps, type: 'pageNumber', format: 'Page {page} of {pages}', width: 30 };
                 break;
@@ -1901,7 +1925,10 @@ let ZenttoReportDesigner = class ZenttoReportDesigner extends LitElement {
             });
         }
         else if (type) {
-            this._addElementToBand(bandId, type);
+            // Check for extra props from toolbox items (Title, Watermark, etc.)
+            const extraJson = e.dataTransfer?.getData('extra-props');
+            const extraProps = extraJson ? JSON.parse(extraJson) : undefined;
+            this._addElementToBand(bandId, type, extraProps);
         }
     }
     _onBandDragOver(e) {
@@ -2983,17 +3010,32 @@ REGLAS:
     }
     // ─── Toolbox ──────────────────────────────────────────────────
     _renderToolbox() {
+        // Group items by category
+        const categories = new Map();
+        for (const item of TOOLBOX_ITEMS) {
+            if (!categories.has(item.category))
+                categories.set(item.category, []);
+            categories.get(item.category).push(item);
+        }
         return html `
-      ${TOOLBOX_ITEMS.map(item => html `
-        <div class="toolbox-item"
-             draggable="true"
-             @dragstart=${(e) => this._onToolboxDragStart(e, item.type)}>
-          <div class="toolbox-icon" data-type="${item.type}">${item.preview}</div>
-          <div class="toolbox-info">
-            <span class="toolbox-label">${item.label}</span>
-            <span class="toolbox-desc">${item.description}</span>
+      ${[...categories.entries()].map(([cat, items]) => html `
+        <div style="padding:4px 10px 2px;font-size:10px;font-weight:600;color:var(--zrd-text-muted,#999);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px;">${cat}</div>
+        ${items.map(item => html `
+          <div class="toolbox-item"
+               draggable="true"
+               @dragstart=${(e) => {
+            this._onToolboxDragStart(e, item.type);
+            if (item.extraProps) {
+                e.dataTransfer?.setData('extra-props', JSON.stringify(item.extraProps));
+            }
+        }}>
+            <div class="toolbox-icon" data-type="${item.type}">${item.preview}</div>
+            <div class="toolbox-info">
+              <span class="toolbox-label">${item.label}</span>
+              <span class="toolbox-desc">${item.description}</span>
+            </div>
           </div>
-        </div>
+        `)}
       `)}
     `;
     }
@@ -3023,31 +3065,28 @@ REGLAS:
         ${this._renderOverlays()}
       `;
         }
-        // Action buttons bar
-        const hasActions = this.dbProvider || this.zenttoProvider || this._layout.dataSources.length > 0;
+        // Action buttons bar — always show so user can connect data sources
         return html `
-      ${hasActions ? html `
-        <div style="padding:6px 8px;display:flex;gap:4px;border-bottom:1px solid var(--zrd-border,#e0e0e0);flex-shrink:0;flex-wrap:wrap;">
-          ${this.dbProvider ? html `
-            <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:var(--zrd-primary,#1976d2);min-width:70px;"
-                    @click=${() => { this._dbConnectorOpen = true; }}>
-              \u{1F5C4} DB
-            </button>
-          ` : nothing}
-          ${this.zenttoProvider ? html `
-            <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:#e65100;min-width:70px;"
-                    @click=${() => { this._zenttoConnectorOpen = true; }}>
-              \u{1F310} Zentto
-            </button>
-          ` : nothing}
-          ${this._layout.dataSources.length > 0 ? html `
-            <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:var(--zrd-text,#555);min-width:70px;"
-                    @click=${() => { this._erOverlayOpen = true; }}>
-              \u{1F4CA} ER
-            </button>
-          ` : nothing}
-        </div>
-      ` : nothing}
+      <div style="padding:6px 8px;display:flex;gap:4px;border-bottom:1px solid var(--zrd-border,#e0e0e0);flex-shrink:0;flex-wrap:wrap;">
+        <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:var(--zrd-primary,#1976d2);min-width:50px;"
+                @click=${() => { this._dbConnectorOpen = true; }}>
+          \u{1F5C4} DB
+        </button>
+        <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:#e65100;min-width:50px;"
+                @click=${() => { this._zenttoConnectorOpen = true; }}>
+          \u{1F310} Zentto
+        </button>
+        <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:#2e7d32;min-width:50px;"
+                @click=${() => { this.dispatchEvent(new CustomEvent('add-rest-source', { bubbles: true, composed: true })); }}>
+          \u{1F517} REST
+        </button>
+        ${this._layout.dataSources.length > 0 ? html `
+          <button style="flex:1;padding:5px 6px;border:1px solid var(--zrd-border,#ddd);border-radius:4px;cursor:pointer;font-size:10px;font-weight:600;background:var(--zrd-input-bg,#fff);color:var(--zrd-text,#555);min-width:50px;"
+                  @click=${() => { this._erOverlayOpen = true; }}>
+            \u{1F4CA} ER
+          </button>
+        ` : nothing}
+      </div>
       <zrd-data-source-tree
         .dataSources=${this._layout.dataSources}
         .relations=${this._layout.relations || []}
@@ -3091,7 +3130,10 @@ REGLAS:
     _renderErOverlay() {
         return html `
       <div style="position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);"
-           @click=${() => { this._erOverlayOpen = false; }}>
+           @click=${() => { this._erOverlayOpen = false; }}
+           @keydown=${(e) => { if (e.key === 'Escape')
+            this._erOverlayOpen = false; }}
+           tabindex="-1">
         <div style="background:var(--zrd-panel-bg,#fff);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.3);width:85vw;height:80vh;display:flex;flex-direction:column;overflow:hidden;"
              @click=${(e) => e.stopPropagation()}>
           <div style="padding:16px 20px;border-bottom:1px solid var(--zrd-border,#eee);display:flex;justify-content:space-between;align-items:center;">
@@ -3103,6 +3145,8 @@ REGLAS:
             <zrd-er-diagram
               .dataSources=${this._layout.dataSources}
               .relations=${this._layout.relations || []}
+              .dbProvider=${this.dbProvider}
+              .zenttoProvider=${this.zenttoProvider}
               @relation-edit=${(e) => {
             this._editingRelation = e.detail.relation;
             this._relationEditorOpen = true;
@@ -3115,8 +3159,7 @@ REGLAS:
             this._layout = { ...this._layout, relations: (this._layout.relations || []).filter(r => r.id !== id) };
             this._commitChange();
         }}
-              @add-datasource=${() => { this._erOverlayOpen = false; this._dbConnectorOpen = true; this._activePanel = 'data'; }}
-              @add-zentto=${() => { this._erOverlayOpen = false; this._zenttoConnectorOpen = true; this._activePanel = 'data'; }}
+              @datasources-ready=${(e) => this._onDatasourcesReady(e.detail)}
               @add-rest=${() => { }}
               @table-focus=${() => {
             this._erOverlayOpen = false;
@@ -3385,6 +3428,9 @@ REGLAS:
             case 'barcode':
                 content = `[${el.barcodeType}]`;
                 break;
+            case 'chart':
+                content = `\u{1F4CA} [${el.chartType || 'chart'}]`;
+                break;
             case 'pageNumber':
                 content = el.format || 'Page #';
                 break;