@zentto/studio 0.8.4 → 0.9.0

package/dist/designer/zs-page-designer.js

@@ -1385,7 +1385,7 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         if (field.type === 'heading')
             return field.label ?? 'Titulo';
         if (field.type === 'datagrid')
-            return this.renderLiveDataGrid(field);
+            return '◫ ZenttoDataGrid';
         if (field.type === 'report')
             return '◫ ZenttoReportViewer';
         if (field.type === 'chart')
@@ -1406,34 +1406,6 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
             return '▸ Nodo 1\n  ▸ Nodo 2';
         return field.placeholder ?? field.type;
     }
-    /** Render live datagrid inside canvas — props update in real time */
-    renderLiveDataGrid(field) {
-        const p = field.props ?? {};
-        const rawEp = p.endpoint || '';
-        // Build full URL: if relative path and we have apiBaseUrl, prepend it
-        const ep = rawEp && !rawEp.startsWith('http') && this.apiBaseUrl
-            ? `${this.apiBaseUrl.replace(/\/+$/, '')}${rawEp.startsWith('/') ? '' : '/'}${rawEp}`
-            : rawEp;
-        const headers = {};
-        if (this.apiToken) {
-            headers['Authorization'] = `Bearer ${this.apiToken}`;
-            if (this.apiCompany)
-                headers['x-empresa'] = this.apiCompany;
-            if (this.apiBranch)
-                headers['x-sucursal'] = this.apiBranch;
-        }
-        return html `
-      <zs-field-datagrid
-        .config="${field}"
-        .endpoint="${ep}"
-        .authToken="${this.apiToken}"
-        .authHeaders="${headers}"
-        .designMode="${true}"
-        .theme="${'light'}"
-        style="display:block;width:100%;min-height:200px;"
-      ></zs-field-datagrid>
-    `;
-    }
     // ─── Right Panel (Properties — Figma-quality) ──────
     renderRightPanel() {
         const field = this.selectedField;
@@ -1567,345 +1539,9 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
             ` : ''}
           ` : ''}
         </div>
-
-        <!-- Type-specific props -->
-        ${this.renderTypeSpecificProps(field)}
-      </div>
-    `;
-    }
-    // ─── Type-Specific Property Panels ────────────────
-    renderTypeSpecificProps(field) {
-        switch (field.type) {
-            case 'datagrid': return this.renderDataGridProps(field);
-            case 'chart': return this.renderChartProps(field);
-            case 'report': return this.renderReportProps(field);
-            case 'select':
-            case 'multiselect':
-            case 'radio': return this.renderSelectProps(field);
-            case 'number':
-            case 'currency':
-            case 'percentage':
-            case 'slider':
-            case 'rating': return this.renderNumberProps(field);
-            case 'lookup': return this.renderLookupProps(field);
-            case 'chips':
-            case 'tags': return this.renderChipsProps(field);
-            case 'treeview': return this.renderTreeViewProps(field);
-            case 'date':
-            case 'time':
-            case 'datetime': return this.renderDateProps(field);
-            case 'file':
-            case 'image': return this.renderFileProps(field);
-            case 'signature': return this.renderSignatureProps(field);
-            default: return nothing;
-        }
-    }
-    setProp(field, key, value) {
-        if (!field.props)
-            field.props = {};
-        field.props[key] = value;
-        this.commitChange();
-    }
-    // ─── DataGrid Props ───────────────────────────────
-    renderDataGridProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('grid-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('grid-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>DataGrid Config</h4>
-        </div>
-        ${!this.collapsedSections.has('grid-config') ? html `
-          <div class="prop-info">◫ Conecta un endpoint y el grid cargara los datos en el canvas</div>
-          <div class="prop-row"><span class="prop-label">Altura</span><input class="prop-input" .value="${p.height ?? '400px'}" placeholder="400px" @change="${(e) => this.setProp(field, 'height', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Page Size</span><input class="prop-input" type="number" min="5" .value="${String(p.pageSize ?? 25)}" @change="${(e) => this.setProp(field, 'pageSize', parseInt(e.target.value) || 25)}" /></div>
-          <div class="prop-row"><span class="prop-label">Densidad</span>
-            <select class="prop-input" .value="${p.density ?? 'compact'}" @change="${(e) => this.setProp(field, 'density', e.target.value)}">
-              <option value="compact">Compacta</option>
-              <option value="standard">Estandar</option>
-              <option value="comfortable">Comoda</option>
-            </select>
-          </div>
-          <div class="prop-row"><span class="prop-label">Row Click</span>
-            <select class="prop-input" .value="${p.onRowClick ?? 'emit'}" @change="${(e) => this.setProp(field, 'onRowClick', e.target.value)}">
-              <option value="emit">Emitir evento</option>
-              <option value="navigate">Navegar</option>
-              <option value="select">Seleccionar</option>
-              <option value="detail">Detalle</option>
-            </select>
-          </div>
-          ${p.onRowClick === 'navigate' ? html `
-            <div class="prop-row"><span class="prop-label">Nav Segment</span><input class="prop-input" .value="${p.rowClickSegment ?? ''}" placeholder="/clientes/{id}" @change="${(e) => this.setProp(field, 'rowClickSegment', e.target.value)}" /></div>
-          ` : ''}
-          <div class="prop-divider"></div>
-          ${this.renderToggle('Toolbar', p.enableToolbar ?? true, (v) => this.setProp(field, 'enableToolbar', v))}
-          ${this.renderToggle('Busqueda', p.enableSearch ?? true, (v) => this.setProp(field, 'enableSearch', v))}
-          ${this.renderToggle('Exportar', p.enableExport ?? false, (v) => this.setProp(field, 'enableExport', v))}
-          ${this.renderToggle('Paginacion', p.enablePagination ?? true, (v) => this.setProp(field, 'enablePagination', v))}
-          ${this.renderToggle('Filtros Header', p.enableHeaderFilters ?? false, (v) => this.setProp(field, 'enableHeaderFilters', v))}
-          ${this.renderToggle('Clipboard', p.enableClipboard ?? false, (v) => this.setProp(field, 'enableClipboard', v))}
-          ${this.renderToggle('Seleccion Filas', p.enableRowSelection ?? false, (v) => this.setProp(field, 'enableRowSelection', v))}
-          ${this.renderToggle('Master-Detail', p.enableMasterDetail ?? false, (v) => this.setProp(field, 'enableMasterDetail', v))}
-          ${this.renderToggle('Totales', p.showTotals ?? false, (v) => this.setProp(field, 'showTotals', v))}
-          ${this.renderToggle('Context Menu', p.enableContextMenu ?? false, (v) => this.setProp(field, 'enableContextMenu', v))}
-          ${this.renderToggle('Find (Ctrl+F)', p.enableFind ?? false, (v) => this.setProp(field, 'enableFind', v))}
-          ${this.renderToggle('Status Bar', p.enableStatusBar ?? false, (v) => this.setProp(field, 'enableStatusBar', v))}
-          ${this.renderToggle('Filter Panel', p.enableFilterPanel ?? false, (v) => this.setProp(field, 'enableFilterPanel', v))}
-          ${this.renderToggle('Configurador', p.enableConfigurator ?? false, (v) => this.setProp(field, 'enableConfigurator', v))}
-          <div class="prop-divider"></div>
-          <div class="prop-row"><span class="prop-label">Moneda</span><input class="prop-input" .value="${p.defaultCurrency ?? ''}" placeholder="USD, VES, EUR..." @change="${(e) => this.setProp(field, 'defaultCurrency', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Archivo Export</span><input class="prop-input" .value="${p.exportFilename ?? ''}" placeholder="clientes" @change="${(e) => this.setProp(field, 'exportFilename', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Grid ID</span><input class="prop-input" style="font-family:'SF Mono','Consolas',monospace;font-size:10px;" .value="${p.gridId ?? ''}" placeholder="clientes-grid" @change="${(e) => this.setProp(field, 'gridId', e.target.value)}" /></div>
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Chart Props ──────────────────────────────────
-    renderChartProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('chart-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('chart-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Chart Config</h4>
-        </div>
-        ${!this.collapsedSections.has('chart-config') ? html `
-          <div class="prop-info">📊 Configuracion del grafico SVG</div>
-          <div class="prop-row"><span class="prop-label">Tipo</span>
-            <select class="prop-input" .value="${p.chartType ?? 'bar'}" @change="${(e) => this.setProp(field, 'chartType', e.target.value)}">
-              <option value="bar">Barras</option>
-              <option value="line">Lineas</option>
-              <option value="pie">Torta</option>
-              <option value="donut">Donut</option>
-              <option value="area">Area</option>
-            </select>
-          </div>
-          <div class="prop-row"><span class="prop-label">Titulo</span><input class="prop-input" .value="${p.chartTitle ?? ''}" placeholder="Ventas por Mes" @change="${(e) => this.setProp(field, 'chartTitle', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Label Field</span><input class="prop-input" .value="${p.labelField ?? ''}" placeholder="mes" @change="${(e) => this.setProp(field, 'labelField', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Value Field</span><input class="prop-input" .value="${p.valueField ?? ''}" placeholder="total" @change="${(e) => this.setProp(field, 'valueField', e.target.value)}" /></div>
-          <div class="prop-divider"></div>
-          <div class="prop-pos-grid">
-            <div class="prop-pos-cell">
-              <span class="prop-pos-label prop-pos-label--w">W</span>
-              <input type="number" min="100" .value="${String(p.width ?? 400)}" @change="${(e) => this.setProp(field, 'width', parseInt(e.target.value) || 400)}" />
-            </div>
-            <div class="prop-pos-cell">
-              <span class="prop-pos-label prop-pos-label--h">H</span>
-              <input type="number" min="100" .value="${String(p.height ?? 250)}" @change="${(e) => this.setProp(field, 'height', parseInt(e.target.value) || 250)}" />
-            </div>
-          </div>
-          <div class="prop-divider"></div>
-          ${this.renderToggle('Leyenda', p.showLegend ?? true, (v) => this.setProp(field, 'showLegend', v))}
-          ${this.renderToggle('Animacion', p.animated ?? false, (v) => this.setProp(field, 'animated', v))}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Report Props ─────────────────────────────────
-    renderReportProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('report-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('report-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Report Config</h4>
-        </div>
-        ${!this.collapsedSections.has('report-config') ? html `
-          <div class="prop-info">📋 Configuracion de zentto-report</div>
-          <div class="prop-row"><span class="prop-label">Template ID</span><input class="prop-input" .value="${p.templateId ?? ''}" placeholder="invoice-template" @change="${(e) => this.setProp(field, 'templateId', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Zoom</span><input class="prop-input" type="number" min="25" max="300" step="25" .value="${String(p.zoom ?? 100)}" @change="${(e) => this.setProp(field, 'zoom', parseInt(e.target.value) || 100)}" /></div>
-          <div class="prop-row"><span class="prop-label">Altura</span><input class="prop-input" .value="${p.height ?? '500px'}" placeholder="500px" @change="${(e) => this.setProp(field, 'height', e.target.value)}" /></div>
-          <div class="prop-divider"></div>
-          ${this.renderToggle('Toolbar', p.showToolbar ?? true, (v) => this.setProp(field, 'showToolbar', v))}
-          ${this.renderToggle('Imprimir', p.showPrint ?? true, (v) => this.setProp(field, 'showPrint', v))}
-          ${this.renderToggle('Exportar PDF', p.showExportPdf ?? true, (v) => this.setProp(field, 'showExportPdf', v))}
-          ${this.renderToggle('Navegacion', p.showNavigation ?? true, (v) => this.setProp(field, 'showNavigation', v))}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Select/Radio Props ───────────────────────────
-    renderSelectProps(field) {
-        const p = field.props ?? {};
-        const options = p.options ?? [];
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('select-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('select-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Opciones</h4>
-        </div>
-        ${!this.collapsedSections.has('select-config') ? html `
-          ${options.map((opt, i) => html `
-            <div style="display:flex;gap:3px;margin-bottom:3px;align-items:center;">
-              <input class="prop-input" style="flex:1;" .value="${opt.value}" placeholder="valor" @change="${(e) => { options[i].value = e.target.value; this.setProp(field, 'options', [...options]); }}" />
-              <input class="prop-input" style="flex:1;" .value="${opt.label}" placeholder="label" @change="${(e) => { options[i].label = e.target.value; this.setProp(field, 'options', [...options]); }}" />
-              <button style="border:none;background:none;cursor:pointer;color:#d32f2f;font-size:12px;padding:2px 4px;" @click="${() => { options.splice(i, 1); this.setProp(field, 'options', [...options]); }}">✕</button>
-            </div>
-          `)}
-          <button style="width:100%;padding:4px;border:1px dashed #ccc;border-radius:4px;background:none;cursor:pointer;font-size:10px;color:#888;font-family:inherit;margin-top:4px;"
-            @click="${() => { options.push({ value: '', label: '' }); this.setProp(field, 'options', [...options]); }}"
-          >+ Agregar opcion</button>
-          ${field.type === 'radio' ? html `
-            <div class="prop-divider"></div>
-            ${this.renderToggle('Horizontal', p.horizontal ?? false, (v) => this.setProp(field, 'horizontal', v))}
-          ` : ''}
-          ${field.type === 'multiselect' ? html `
-            <div class="prop-divider"></div>
-            ${this.renderToggle('Multiple', true, () => { })}
-          ` : ''}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Number/Currency/Slider/Rating Props ──────────
-    renderNumberProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('number-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('number-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Numero Config</h4>
-        </div>
-        ${!this.collapsedSections.has('number-config') ? html `
-          ${field.type === 'currency' ? html `
-            <div class="prop-row"><span class="prop-label">Simbolo</span><input class="prop-input" .value="${p.currencySymbol ?? '$'}" @change="${(e) => this.setProp(field, 'currencySymbol', e.target.value)}" /></div>
-          ` : ''}
-          ${field.type === 'slider' || field.type === 'rating' ? html `
-            <div class="prop-pos-grid">
-              <div class="prop-pos-cell">
-                <span class="prop-pos-label prop-pos-label--x">Min</span>
-                <input type="number" .value="${String(p.min ?? 0)}" @change="${(e) => this.setProp(field, 'min', parseInt(e.target.value) || 0)}" />
-              </div>
-              <div class="prop-pos-cell">
-                <span class="prop-pos-label prop-pos-label--y">Max</span>
-                <input type="number" .value="${String(p.max ?? (field.type === 'rating' ? 5 : 100))}" @change="${(e) => this.setProp(field, 'max', parseInt(e.target.value) || 100)}" />
-              </div>
-            </div>
-            ${field.type === 'slider' ? html `
-              <div class="prop-row"><span class="prop-label">Step</span><input class="prop-input" type="number" min="1" .value="${String(p.step ?? 1)}" @change="${(e) => this.setProp(field, 'step', parseInt(e.target.value) || 1)}" /></div>
-            ` : ''}
-            ${field.type === 'rating' ? html `
-              <div class="prop-row"><span class="prop-label">Estrellas</span><input class="prop-input" type="number" min="3" max="10" .value="${String(p.maxRating ?? 5)}" @change="${(e) => this.setProp(field, 'maxRating', parseInt(e.target.value) || 5)}" /></div>
-            ` : ''}
-          ` : ''}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Lookup Props ─────────────────────────────────
-    renderLookupProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('lookup-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('lookup-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Lookup Config</h4>
-        </div>
-        ${!this.collapsedSections.has('lookup-config') ? html `
-          <div class="prop-row"><span class="prop-label">Min Chars</span><input class="prop-input" type="number" min="1" .value="${String(p.minChars ?? 2)}" @change="${(e) => this.setProp(field, 'minChars', parseInt(e.target.value) || 2)}" /></div>
-          <div class="prop-row"><span class="prop-label">Debounce</span><input class="prop-input" type="number" min="100" step="100" .value="${String(p.debounceMs ?? 300)}" @change="${(e) => this.setProp(field, 'debounceMs', parseInt(e.target.value) || 300)}" /></div>
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Chips/Tags Props ─────────────────────────────
-    renderChipsProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('chips-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('chips-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Chips Config</h4>
-        </div>
-        ${!this.collapsedSections.has('chips-config') ? html `
-          <div class="prop-row"><span class="prop-label">Max Chips</span><input class="prop-input" type="number" min="0" .value="${String(p.maxChips ?? 0)}" @change="${(e) => this.setProp(field, 'maxChips', parseInt(e.target.value) || 0)}" /></div>
-          <div class="prop-row"><span class="prop-label">Color Mode</span>
-            <select class="prop-input" .value="${p.colorMode ?? 'default'}" @change="${(e) => this.setProp(field, 'colorMode', e.target.value)}">
-              <option value="default">Default</option>
-              <option value="primary">Primary</option>
-              <option value="success">Success</option>
-              <option value="auto">Auto (ciclo)</option>
-            </select>
-          </div>
-          ${this.renderToggle('Permitir custom', p.allowCustom ?? true, (v) => this.setProp(field, 'allowCustom', v))}
-          ${this.renderSelectProps(field)}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── TreeView Props ───────────────────────────────
-    renderTreeViewProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('tree-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('tree-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>TreeView Config</h4>
-        </div>
-        ${!this.collapsedSections.has('tree-config') ? html `
-          ${this.renderToggle('Multi-select', p.multiSelect ?? false, (v) => this.setProp(field, 'multiSelect', v))}
-          ${this.renderToggle('Checkboxes', p.showCheckboxes ?? false, (v) => this.setProp(field, 'showCheckboxes', v))}
-          ${this.renderToggle('Buscador', p.searchable ?? false, (v) => this.setProp(field, 'searchable', v))}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Date Props ───────────────────────────────────
-    renderDateProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('date-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('date-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Fecha Config</h4>
-        </div>
-        ${!this.collapsedSections.has('date-config') ? html `
-          <div class="prop-row"><span class="prop-label">Modo</span>
-            <select class="prop-input" .value="${p.mode ?? 'date'}" @change="${(e) => this.setProp(field, 'mode', e.target.value)}">
-              <option value="date">Fecha</option>
-              <option value="time">Hora</option>
-              <option value="datetime">Fecha y Hora</option>
-            </select>
-          </div>
-          <div class="prop-row"><span class="prop-label">Min</span><input class="prop-input" type="date" .value="${p.min ?? ''}" @change="${(e) => this.setProp(field, 'min', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Max</span><input class="prop-input" type="date" .value="${p.max ?? ''}" @change="${(e) => this.setProp(field, 'max', e.target.value)}" /></div>
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── File/Image Props ─────────────────────────────
-    renderFileProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('file-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('file-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Archivo Config</h4>
-        </div>
-        ${!this.collapsedSections.has('file-config') ? html `
-          <div class="prop-row"><span class="prop-label">Accept</span><input class="prop-input" .value="${p.accept ?? ''}" placeholder="image/*,.pdf" @change="${(e) => this.setProp(field, 'accept', e.target.value)}" /></div>
-          ${this.renderToggle('Multiple', p.multiple ?? false, (v) => this.setProp(field, 'multiple', v))}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Signature Props ──────────────────────────────
-    renderSignatureProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('sig-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('sig-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Firma Config</h4>
-        </div>
-        ${!this.collapsedSections.has('sig-config') ? html `
-          <div class="prop-row"><span class="prop-label">Grosor</span><input class="prop-input" type="number" min="1" max="10" .value="${String(p.penWidth ?? 2)}" @change="${(e) => this.setProp(field, 'penWidth', parseInt(e.target.value) || 2)}" /></div>
-          <div class="prop-row"><span class="prop-label">Color</span><input class="prop-input" type="color" .value="${p.penColor ?? '#000000'}" @change="${(e) => this.setProp(field, 'penColor', e.target.value)}" /></div>
-        ` : ''}
       </div>
     `;
     }
-    // ─── Grid Configurator Modal ────────────────────
     renderFormProperties() {
         if (!this.schema)
             return nothing;