@cyprnet/node-red-contrib-uibuilder-formgen 0.4.11

package/templates/index.js.mustache

@@ -0,0 +1,1135 @@
+// PortalSmith FormGen Portal Runtime
+// SPDX-License-Identifier: MIT
+// Generated: [[timestamp]]
+// Instance: [[instanceName]]
+// Form ID: [[formId]]
+
+(function() {
+  'use strict';
+  
+  // Configuration from runtime
+  const CONFIG = {
+    formId: '[[formId]]',
+    storageMode: '[[storageMode]]',
+    exportFormats: __EXPORT_FORMATS_JSON__,
+    baseUrl: '[[baseUrl]]',
+    themeMode: '[[themeMode]]',
+    license: __LICENSE_JSON__,
+    submitMode: '[[submitMode]]',        // 'uibuilder' | 'http'
+    submitUrl: '[[submitUrl]]',          // required when submitMode === 'http'
+    submitHeadersJson: '[[submitHeadersJson]]' // optional JSON string
+  };
+
+  function pad2(n) { return String(n).padStart(2, '0'); }
+  function timestampForFilename() {
+    const d = new Date();
+    return `${d.getFullYear()}${pad2(d.getMonth() + 1)}${pad2(d.getDate())}-${pad2(d.getHours())}${pad2(d.getMinutes())}${pad2(d.getSeconds())}`;
+  }
+
+  function escapeCsvCell(val) {
+    if (val === null || val === undefined) return '';
+    const s = String(val).replace(/\r?\n/g, '\\n');
+    // Quote if contains comma, quote, or newline marker
+    if (/[,"\n]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
+    return s;
+  }
+
+  function downloadTextFile(filename, mime, text) {
+    const blob = new Blob([text], { type: mime });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    setTimeout(() => URL.revokeObjectURL(url), 5000);
+  }
+
+  function canUseLocalStorage() {
+    try {
+      const k = '__ps_test__';
+      localStorage.setItem(k, '1');
+      localStorage.removeItem(k);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function ensureDraftFileInput(onLoadJson) {
+    let input = document.getElementById('ps-draft-file-input');
+    if (!input) {
+      input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'application/json,.json';
+      input.id = 'ps-draft-file-input';
+      input.style.position = 'fixed';
+      input.style.left = '-9999px';
+      input.style.top = '-9999px';
+      document.body.appendChild(input);
+    }
+
+    input.onchange = function() {
+      const file = input.files && input.files[0];
+      // Reset value so selecting the same file twice still triggers change
+      input.value = '';
+      if (!file) return;
+
+      // Prefer File.text() (modern), fallback to FileReader
+      if (typeof file.text === 'function') {
+        file.text()
+          .then(text => onLoadJson(JSON.parse(text)))
+          .catch(e => onLoadJson(null, e));
+      } else {
+        try {
+          const reader = new FileReader();
+          reader.onload = function() {
+            try {
+              onLoadJson(JSON.parse(String(reader.result || '')));
+            } catch (e) {
+              onLoadJson(null, e);
+            }
+          };
+          reader.onerror = function() {
+            onLoadJson(null, new Error('Failed to read file'));
+          };
+          reader.readAsText(file);
+        } catch (e) {
+          onLoadJson(null, e);
+        }
+      }
+    };
+
+    return input;
+  }
+
+  function parseKeyValueDelimiter(textValue, delimiter) {
+    const out = [];
+    const text = (textValue === null || textValue === undefined) ? '' : String(textValue);
+    const del = delimiter || '=';
+    text.split('\n')
+      .map(l => l.trim())
+      .filter(Boolean)
+      .forEach(line => {
+        const parts = line.split(del);
+        if (parts.length >= 2) {
+          const key = parts[0].trim();
+          const value = parts.slice(1).join(del).trim();
+          if (key) out.push({ key, value });
+        }
+      });
+    return out;
+  }
+
+  function keyvalueDelimiterLines(textValue) {
+    // Keep each non-empty line as its own string: ["k=v", "a=b"]
+    const text = (textValue === null || textValue === undefined) ? '' : String(textValue);
+    return text
+      .split('\n')
+      .map(l => l.trim())
+      .filter(Boolean);
+  }
+
+  function processedFormData(schema, formData) {
+    // Normalize form payload for submit/export.
+    // NOTE: For keyvalue delimiter-mode, we convert textarea text into string[] (one entry per line).
+    const processed = { ...formData };
+    (schema.sections || []).forEach(section => {
+      (section.fields || []).forEach(field => {
+        if (!field || !field.id) return;
+        if (field.type === 'keyvalue') {
+          const mode = field.keyvalueMode || 'pairs';
+          if (mode === 'delimiter') {
+            processed[field.id] = keyvalueDelimiterLines(processed[field.id]);
+          } else {
+            // pairs mode: normalize to array and strip empty keys
+            const arr = Array.isArray(processed[field.id]) ? processed[field.id] : [];
+            processed[field.id] = arr
+              .filter(p => p && p.key && String(p.key).trim())
+              .map(p => ({ key: String(p.key).trim(), value: (p.value === null || p.value === undefined) ? '' : String(p.value) }));
+          }
+        }
+      });
+    });
+    return processed;
+  }
+
+  function schemaFieldMap(schema) {
+    const map = {};
+    (schema.sections || []).forEach(section => {
+      (section.fields || []).forEach(field => {
+        if (field && field.id) map[field.id] = field;
+      });
+    });
+    return map;
+  }
+
+  function exportAsJson(schema, formData) {
+    const payload = processedFormData(schema, formData);
+    const filename = `${CONFIG.formId || 'form'}-${timestampForFilename()}.json`;
+    downloadTextFile(filename, 'application/json;charset=utf-8', JSON.stringify(payload, null, 2));
+  }
+
+  function exportAsCsv(schema, formData) {
+    const payload = processedFormData(schema, formData);
+    const keys = Object.keys(payload);
+    const header = keys.map(escapeCsvCell).join(',');
+    const row = keys.map(k => {
+      const v = payload[k];
+      // keyvalue arrays export as JSON for fidelity
+      if (Array.isArray(v)) return escapeCsvCell(JSON.stringify(v));
+      if (typeof v === 'object' && v !== null) return escapeCsvCell(JSON.stringify(v));
+      return escapeCsvCell(v);
+    }).join(',');
+    const filename = `${CONFIG.formId || 'form'}-${timestampForFilename()}.csv`;
+    downloadTextFile(filename, 'text/csv;charset=utf-8', `${header}\n${row}\n`);
+  }
+
+  function exportAsHtml(schema, formData) {
+    const payload = processedFormData(schema, formData);
+    const fields = schemaFieldMap(schema);
+    const rows = Object.keys(payload).map(id => {
+      const field = fields[id] || {};
+      const label = (field.label || id);
+      const v = payload[id];
+      const display = (Array.isArray(v) || (typeof v === 'object' && v !== null)) ? JSON.stringify(v, null, 2) : String(v ?? '');
+      return `<tr><th style="text-align:left;vertical-align:top;padding:6px 10px;border:1px solid #ccc;">${escapeHtml(label)}</th><td style="white-space:pre-wrap;padding:6px 10px;border:1px solid #ccc;">${escapeHtml(display)}</td></tr>`;
+    }).join('\n');
+
+    const html = `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(CONFIG.formId || 'form')} export</title>
+</head>
+<body style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;padding:16px;">
+  <h1 style="margin:0 0 8px 0;">${escapeHtml(CONFIG.formId || 'form')} export</h1>
+  <div style="color:#666;margin-bottom:12px;">Generated: ${escapeHtml(new Date().toISOString())}</div>
+  <table style="border-collapse:collapse;width:100%;">${rows}</table>
+</body>
+</html>`;
+
+    const filename = `${CONFIG.formId || 'form'}-${timestampForFilename()}.html`;
+    downloadTextFile(filename, 'text/html;charset=utf-8', html);
+  }
+
+  function escapeHtml(s) {
+    return String(s)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+
+  function applyTheme() {
+    try {
+      // Optional override via localStorage (lets you tweak without regenerating)
+      const stored = localStorage.getItem('portalsmith:theme');
+      const desired = (stored && stored.trim()) ? stored.trim().toLowerCase() : (CONFIG.themeMode || 'auto');
+
+      if (desired === 'light' || desired === 'dark' || desired === 'auto') {
+        document.documentElement.setAttribute('data-theme', desired);
+      }
+    } catch (e) {
+      // ignore (storage blocked, etc.)
+    }
+  }
+  
+  // Vue app instance
+  let app;
+  
+  // uibuilder instance
+  let uibuilderInstance;
+  
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+  
+  async function init() {
+    try {
+      applyTheme();
+
+      if (CONFIG.license && CONFIG.license.brandingLocked && CONFIG.license.brandingAttempted) {
+        console.warn('PortalSmith FormGen: custom branding is disabled in Free mode (watermarked). Using default branding.');
+      }
+
+      // Wait for uibuilder to be available (uibuilder v7.5.0)
+      // uibuilder.start() is void - the global uibuilder object IS the instance
+      if (typeof uibuilder === 'undefined') {
+        // Wait for script to load
+        await new Promise(resolve => {
+          let attempts = 0;
+          const checkUibuilder = setInterval(() => {
+            if (typeof uibuilder !== 'undefined') {
+              clearInterval(checkUibuilder);
+              resolve();
+            } else if (++attempts > 20) {
+              clearInterval(checkUibuilder);
+              console.warn('uibuilder not found, some features may not work');
+              resolve();
+            }
+          }, 100);
+        });
+      }
+      
+      // Start uibuilder (v7.5.0: start() is void, uibuilder global is the instance)
+      if (typeof uibuilder !== 'undefined' && typeof uibuilder.start === 'function') {
+        uibuilder.start();
+        uibuilderInstance = uibuilder; // Use the global object as the instance
+      }
+      
+      // Load schema
+      const schema = await loadSchema();
+      
+      // Initialize Vue app
+      initVueApp(schema);
+      
+      // Set up uibuilder message handlers
+      setupUibuilderHandlers();
+      
+      // Try to load draft on startup
+      if (app) {
+        app.loadDraftFromStorage();
+      }
+      
+    } catch (error) {
+      console.error('Portal initialization error:', error);
+      if (app) {
+        showAlert('Failed to initialize portal: ' + error.message, 'danger');
+      }
+    }
+  }
+  
+  async function loadSchema() {
+    try {
+      const response = await fetch('./form.schema.json');
+      if (!response.ok) {
+        throw new Error(`Failed to load schema: ${response.statusText}`);
+      }
+      return await response.json();
+    } catch (error) {
+      console.error('Schema load error:', error);
+      throw error;
+    }
+  }
+  
+  function initVueApp(schema) {
+    // Initialize formData with default values from schema
+    const formData = {};
+    const fieldErrors = {};
+    
+    console.log('Starting formData initialization. Schema sections:', schema.sections.length);
+    
+    schema.sections.forEach((section, sectionIdx) => {
+      console.log(`Processing section ${sectionIdx}: ${section.id || 'unnamed'}, fields: ${section.fields ? section.fields.length : 0}`);
+      
+      if (!section.fields || !Array.isArray(section.fields)) {
+        console.warn(`Section ${sectionIdx} has no fields array`);
+        return;
+      }
+      
+      section.fields.forEach((field, fieldIdx) => {
+        try {
+          if (!field || !field.id) {
+            console.warn(`Section ${sectionIdx}, field ${fieldIdx} is missing id:`, field);
+            return;
+          }
+          
+          console.log(`  Initializing field ${fieldIdx}: ${field.id}, type: ${field.type || 'undefined'}`);
+          
+          // Ensure keyvalue fields have mode set (use Object.defineProperty for Vue reactivity)
+          if (field.type === 'keyvalue') {
+            if (!field.hasOwnProperty('keyvalueMode')) {
+              Object.defineProperty(field, 'keyvalueMode', {
+                value: field.keyvalueMode || 'pairs',
+                writable: true,
+                enumerable: true,
+                configurable: true
+              });
+            }
+            if (!field.hasOwnProperty('keyvalueDelimiter')) {
+              Object.defineProperty(field, 'keyvalueDelimiter', {
+                value: field.keyvalueDelimiter || '=',
+                writable: true,
+                enumerable: true,
+                configurable: true
+              });
+            }
+            // Debug: log keyvalue field initialization
+            console.log('    Keyvalue field:', field.id, 'mode:', field.keyvalueMode, 'delimiter:', field.keyvalueDelimiter);
+          }
+          
+          // Set default value based on field type
+          if (field.type === 'checkbox') {
+            formData[field.id] = field.defaultValue !== undefined ? field.defaultValue : false;
+            console.log(`    Checkbox field ${field.id} initialized to:`, formData[field.id]);
+          } else if (field.type === 'number') {
+            formData[field.id] = field.defaultValue !== undefined ? field.defaultValue : null;
+            console.log(`    Number field ${field.id} initialized to:`, formData[field.id]);
+          } else if (field.type === 'keyvalue') {
+            if (field.keyvalueMode === 'delimiter') {
+              // Delimiter mode: initialize as empty string or default value
+              if (field.defaultValue !== undefined) {
+                formData[field.id] = String(field.defaultValue);
+              } else {
+                // If pairs exist, convert them to delimiter format
+                if (field.pairs && field.pairs.length > 0) {
+                  const delimiter = field.keyvalueDelimiter || '=';
+                  formData[field.id] = field.pairs
+                    .filter(p => p && p.key && p.key.trim())
+                    .map(p => `${p.key}${delimiter}${p.value || ''}`)
+                    .join('\n');
+                } else {
+                  formData[field.id] = '';
+                }
+              }
+              console.log('    Delimiter mode initialized:', field.id, 'formData value:', formData[field.id]);
+            } else {
+              // Pairs mode: initialize with default pairs or empty array
+              if (field.defaultValue && Array.isArray(field.defaultValue)) {
+                formData[field.id] = JSON.parse(JSON.stringify(field.defaultValue));
+              } else if (field.pairs && field.pairs.length > 0) {
+                // Use pairs from schema as initial values
+                formData[field.id] = field.pairs.map(p => ({ key: p.key || '', value: p.value || '' }));
+              } else {
+                formData[field.id] = [{ key: '', value: '' }];
+              }
+              console.log('    Pairs mode initialized:', field.id, 'pairs:', formData[field.id].length);
+            }
+          } else {
+            // For all other field types (text, select, radio, date, textarea), always initialize
+            // This ensures Vue reactivity works even if defaultValue is undefined
+            const defaultValue = field.defaultValue !== undefined ? field.defaultValue : '';
+            formData[field.id] = defaultValue;
+            console.log(`    Field ${field.id} (${field.type}) initialized to:`, typeof defaultValue === 'string' ? `"${defaultValue}"` : defaultValue);
+          }
+          
+          // Ensure fieldErrors is always initialized
+          if (!fieldErrors.hasOwnProperty(field.id)) {
+            fieldErrors[field.id] = '';
+          }
+        } catch (error) {
+          console.error(`Error initializing field ${fieldIdx} in section ${sectionIdx}:`, error, field);
+        }
+      });
+    });
+    
+    // Debug: Verify all fields are initialized
+    console.log('FormData initialized:', Object.keys(formData).length, 'fields');
+    console.log('Sample formData:', Object.keys(formData).slice(0, 5).map(k => `${k}: ${typeof formData[k]}`));
+    
+    // Debug: Log schema before Vue initialization
+    console.log('Schema sections count:', schema.sections.length);
+    schema.sections.forEach((section, idx) => {
+      console.log(`Section ${idx}: ${section.id}, fields: ${section.fields.length}`);
+      section.fields.forEach(field => {
+        console.log(`  Field: ${field.id}, type: ${field.type}`);
+      });
+    });
+    
+    // Ensure ALL fields are initialized in formData before Vue initialization
+    // This is critical for Vue reactivity - all properties must exist on the data object
+    console.log('=== Second pass: Ensuring all fields are in formData ===');
+    schema.sections.forEach((section, sectionIdx) => {
+      section.fields.forEach((field, fieldIdx) => {
+        // Double-check: ensure every field has a value in formData
+        if (!formData.hasOwnProperty(field.id)) {
+          console.warn(`Field ${field.id} (${field.type}) was NOT initialized in first pass! Initializing now...`);
+          // Initialize based on field type
+          if (field.type === 'checkbox') {
+            formData[field.id] = false;
+          } else if (field.type === 'number') {
+            formData[field.id] = null;
+          } else if (field.type === 'select' || field.type === 'radio') {
+            formData[field.id] = '';
+          } else {
+            formData[field.id] = '';
+          }
+        } else {
+          console.log(`Field ${field.id} (${field.type}) already in formData:`, typeof formData[field.id], formData[field.id]);
+        }
+        // Ensure fieldErrors exists for every field
+        if (!fieldErrors.hasOwnProperty(field.id)) {
+          fieldErrors[field.id] = '';
+        }
+      });
+    });
+    
+    // Ensure Bootstrap-Vue is registered (needed for <b-card>, <b-button>, etc.)
+    if (typeof Vue !== 'undefined' && typeof BootstrapVue !== 'undefined' && typeof Vue.use === 'function') {
+      try { Vue.use(BootstrapVue); } catch (e) { /* ignore */ }
+    }
+    
+    app = new Vue({
+      el: '#app',
+      data: {
+        license: CONFIG.license,
+        schema: schema,
+        formData: formData,
+        fieldErrors: fieldErrors,
+        showAlert: false,
+        alertMessage: '',
+        alertVariant: 'info',
+        saving: false,
+        loading: false,
+        submitting: false,
+        showResult: false,
+        lastResult: null,
+        lastResultStatus: null,
+        resultView: 'table',
+        copyBlockActions: schema.actions ? schema.actions.filter(a => a.type === 'copyBlock') : [],
+        exportFormats: CONFIG.exportFormats
+      },
+      computed: {
+        description() {
+          return this.schema.description || '';
+        },
+        hasErrors() {
+          return Object.values(this.fieldErrors).some(err => err !== '');
+        },
+        // Computed property to get visible fields for each section
+        visibleFieldsBySection() {
+          const result = {};
+          this.schema.sections.forEach(section => {
+            result[section.id] = section.fields.filter(field => this.shouldShowField(field));
+          });
+          return result;
+        }
+        ,
+        formattedResult() {
+          if (this.lastResult === null || this.lastResult === undefined) return '';
+          try {
+            return JSON.stringify(this.lastResult, null, 2);
+          } catch (e) {
+            return String(this.lastResult);
+          }
+        },
+        resultRows() {
+          const r = this.lastResult;
+          if (r === null || r === undefined) return [];
+
+          // If result is an object, show its top-level keys as rows
+          if (typeof r === 'object' && !Array.isArray(r)) {
+            return Object.keys(r).sort().map(k => ({
+              key: k,
+              label: k,
+              value: this.formatResultValue(r[k]),
+            }));
+          }
+
+          // If result is an array, show a single row with joined values
+          if (Array.isArray(r)) {
+            return [{
+              key: '__array__',
+              label: 'items',
+              value: this.formatResultValue(r),
+            }];
+          }
+
+          // Primitive/string result
+          return [{
+            key: '__result__',
+            label: 'result',
+            value: this.formatResultValue(r),
+          }];
+        }
+      },
+      methods: {
+        handleClearForm() {
+          try {
+            if (!confirm('Clear all fields and reset the form to defaults?')) return;
+            this.resetForm();
+            showAlert('Form cleared', 'info');
+          } catch (e) {
+            showAlert('Failed to clear form: ' + e.message, 'danger');
+          }
+        },
+
+        formatResultValue(v) {
+          if (v === null || v === undefined) return '';
+          if (Array.isArray(v)) {
+            // Arrays: join using vertical bar separator
+            return v.map(item => {
+              if (item === null || item === undefined) return '';
+              if (typeof item === 'object') {
+                try { return JSON.stringify(item); } catch (e) { return String(item); }
+              }
+              return String(item);
+            }).filter(s => s !== '').join(' | ');
+          }
+          if (typeof v === 'object') {
+            try { return JSON.stringify(v, null, 0); } catch (e) { return String(v); }
+          }
+          return String(v);
+        },
+
+        downloadResultJson() {
+          if (!this.lastResult) return;
+          const filename = `${CONFIG.formId || 'form'}-result-${timestampForFilename()}.json`;
+          downloadTextFile(filename, 'application/json;charset=utf-8', JSON.stringify(this.lastResult, null, 2));
+        },
+
+        handleDraftFileSelected(evt) {
+          try {
+            this.loading = true;
+            const input = evt && evt.target;
+            const file = input && input.files && input.files[0];
+            if (input) input.value = ''; // allow selecting same file twice
+            if (!file) {
+              this.loading = false;
+              return;
+            }
+
+            const applyJson = (json) => {
+              const data = (json && typeof json === 'object')
+                ? (json.data || json.formData || json.payload || json)
+                : null;
+              if (!data || typeof data !== 'object') {
+                throw new Error('Invalid draft JSON (missing data object)');
+              }
+              const merged = { ...this.formData, ...data };
+              this.$set(this, 'formData', merged);
+              showAlert(`Draft loaded from file (${Object.keys(data).length} fields)`, 'success');
+            };
+
+            const fail = (e) => {
+              showAlert('Failed to load draft file: ' + (e && e.message ? e.message : String(e)), 'danger');
+            };
+
+            if (typeof file.text === 'function') {
+              file.text()
+                .then(t => applyJson(JSON.parse(t)))
+                .catch(fail)
+                .finally(() => { this.loading = false; });
+            } else {
+              const reader = new FileReader();
+              reader.onload = () => {
+                try { applyJson(JSON.parse(String(reader.result || ''))); }
+                catch (e) { fail(e); }
+                finally { this.loading = false; }
+              };
+              reader.onerror = () => { fail(new Error('Failed to read file')); this.loading = false; };
+              reader.readAsText(file);
+            }
+          } catch (e) {
+            this.loading = false;
+            showAlert('Failed to load draft file: ' + e.message, 'danger');
+          }
+        },
+
+        shouldShowField(field) {
+          // Always show field if no showIf condition
+          if (!field.showIf) {
+            return true;
+          }
+          
+          const condition = field.showIf;
+          const fieldValue = this.formData[condition.field];
+          
+          // Handle boolean checkbox values
+          if (typeof condition.value === 'boolean') {
+            if (condition.operator === 'equals') {
+              return fieldValue === condition.value;
+            } else if (condition.operator === 'neq') {
+              return fieldValue !== condition.value;
+            }
+          }
+          
+          // Handle string/number comparisons
+          if (condition.operator === 'equals') {
+            return String(fieldValue) === String(condition.value);
+          } else if (condition.operator === 'neq') {
+            return String(fieldValue) !== String(condition.value);
+          }
+          
+          return true;
+        },
+        
+        getFieldState(fieldId) {
+          const error = this.fieldErrors[fieldId];
+          if (error) return false;
+          if (this.formData[fieldId] !== '' && this.formData[fieldId] !== null && this.formData[fieldId] !== undefined) {
+            return null; // Valid but not required
+          }
+          return null;
+        },
+        
+        validateField(field) {
+          const value = this.formData[field.id];
+          let error = '';
+          
+          // Required validation
+          if (field.required) {
+            if (field.type === 'keyvalue') {
+              const mode = field.keyvalueMode || 'pairs';
+              if (mode === 'delimiter') {
+                const lines = keyvalueDelimiterLines(value);
+                if (!lines || lines.length === 0) {
+                  error = field.validateMessage || 'At least one line is required';
+                  this.fieldErrors[field.id] = error;
+                  return false;
+                }
+              } else {
+                // pairs mode: require at least one pair with a key
+                if (!value || !Array.isArray(value) || value.length === 0) {
+                  error = field.validateMessage || 'At least one key-value pair is required';
+                  this.fieldErrors[field.id] = error;
+                  return false;
+                }
+                const hasEmptyKey = value.some(pair => !pair || !pair.key || !pair.key.trim());
+                if (hasEmptyKey) {
+                  error = field.validateMessage || 'All pairs must have a key';
+                  this.fieldErrors[field.id] = error;
+                  return false;
+                }
+              }
+            } else if (value === '' || value === null || value === undefined || 
+                (Array.isArray(value) && value.length === 0)) {
+              error = field.validateMessage || 'This field is required';
+              this.fieldErrors[field.id] = error;
+              return false;
+            }
+          }
+          
+          // Skip other validations if field is empty and not required
+          if (!value && !field.required) {
+            this.fieldErrors[field.id] = '';
+            return true;
+          }
+          
+          // Custom validators
+          if (field.validate) {
+            if (field.validate === 'email') {
+              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+              if (!emailRegex.test(value)) {
+                error = 'Please enter a valid email address';
+              }
+            } else if (field.validate === 'phone') {
+              const phoneRegex = /^[\d\s\-\+\(\)]+$/;
+              if (!phoneRegex.test(value) || value.replace(/\D/g, '').length < 10) {
+                error = 'Please enter a valid phone number';
+              }
+            } else if (field.validate.startsWith('regex:')) {
+              const pattern = field.validate.substring(6);
+              try {
+                const regex = new RegExp(pattern);
+                if (!regex.test(value)) {
+                  error = field.validateMessage || 'Invalid format';
+                }
+              } catch (e) {
+                console.warn('Invalid regex pattern:', pattern);
+              }
+            }
+          }
+          
+          this.fieldErrors[field.id] = error;
+          return error === '';
+        },
+        
+        validateAll() {
+          let isValid = true;
+          this.schema.sections.forEach(section => {
+            section.fields.forEach(field => {
+              if (this.shouldShowField(field)) {
+                if (!this.validateField(field)) {
+                  isValid = false;
+                }
+              }
+            });
+          });
+          return isValid;
+        },
+        
+        addKeyValuePair(fieldId) {
+          if (!this.formData[fieldId]) {
+            this.$set(this.formData, fieldId, []);
+          }
+          this.formData[fieldId].push({ key: '', value: '' });
+        },
+        
+        removeKeyValuePair(fieldId, pairIdx) {
+          if (this.formData[fieldId] && this.formData[fieldId].length > pairIdx) {
+            this.formData[fieldId].splice(pairIdx, 1);
+            // If no pairs left and field is required, add one empty pair
+            if (this.formData[fieldId].length === 0) {
+              const field = this.schema.sections
+                .flatMap(s => s.fields)
+                .find(f => f.id === fieldId);
+              if (field && field.required) {
+                this.formData[fieldId].push({ key: '', value: '' });
+              }
+            }
+          }
+        },
+        
+        async handleSaveDraft() {
+          this.saving = true;
+          try {
+            const processed = processedFormData(this.schema, this.formData);
+            const draftData = {
+              formId: CONFIG.formId,
+              timestamp: new Date().toISOString(),
+              // raw: what the UI holds (delimiter-mode stays as textarea text)
+              data: { ...this.formData },
+              // processed: ready-to-submit (delimiter-mode converted to [{key,value},...])
+              processed: processed
+            };
+
+            // Always offer a downloadable draft so it works even if storage is blocked
+            const dlName = `${CONFIG.formId || 'form'}-draft-${timestampForFilename()}.json`;
+            downloadTextFile(dlName, 'application/json;charset=utf-8', JSON.stringify(draftData, null, 2));
+
+            // Save to localStorage when available
+            const storageKey = `portalsmith:draft:${CONFIG.formId}`;
+            if (canUseLocalStorage()) {
+              localStorage.setItem(storageKey, JSON.stringify(draftData));
+              showAlert('Draft saved (downloaded + stored in browser)', 'success');
+            } else {
+              showAlert('Draft downloaded (browser storage unavailable)', 'warning');
+            }
+            
+            // If storageMode is file, also send to Node-RED
+            if (CONFIG.storageMode === 'file' && uibuilderInstance) {
+              if (typeof uibuilderInstance.send === 'function') {
+                uibuilderInstance.send({
+                  type: 'draft:save',
+                  formId: CONFIG.formId,
+                  payload: draftData
+                });
+              }
+            }
+          } catch (error) {
+            console.error('Save draft error:', error);
+            showAlert('Failed to save draft: ' + error.message, 'danger');
+          } finally {
+            this.saving = false;
+          }
+        },
+        
+        async handleLoadDraft() {
+          this.loading = true;
+          try {
+            // Try localStorage first
+            const storageKey = `portalsmith:draft:${CONFIG.formId}`;
+            const stored = canUseLocalStorage() ? localStorage.getItem(storageKey) : null;
+            
+            if (stored) {
+              const draftData = JSON.parse(stored);
+              // Use Vue reactivity-safe assignment
+              const merged = { ...this.formData, ...(draftData.data || {}) };
+              this.$set(this, 'formData', merged);
+              showAlert(`Draft loaded from browser storage (${Object.keys(draftData.data || {}).length} fields)`, 'success');
+              return;
+            }
+
+            // No browser-stored draft available. User can click "Load Draft" to choose a file.
+            showAlert('No browser draft found. Click "Load Draft" to select a draft JSON file.', 'info');
+          } catch (error) {
+            console.error('Load draft error:', error);
+            showAlert('Failed to load draft: ' + error.message, 'danger');
+          } finally {
+            this.loading = false;
+          }
+        },
+        
+        loadDraftFromStorage() {
+          try {
+            const storageKey = `portalsmith:draft:${CONFIG.formId}`;
+            const stored = canUseLocalStorage() ? localStorage.getItem(storageKey) : null;
+            if (stored) {
+              const draftData = JSON.parse(stored);
+              this.formData = { ...this.formData, ...draftData.data };
+            }
+          } catch (error) {
+            console.warn('Failed to auto-load draft:', error);
+          }
+        },
+        
+        async handleSubmit() {
+          if (!this.validateAll()) {
+            showAlert('Please fix validation errors before submitting', 'warning');
+            return;
+          }
+          
+          this.submitting = true;
+          try {
+            const processedData = processedFormData(this.schema, this.formData);
+
+            // Mode 1: HTTP POST directly to an API or Node-RED http in
+            if (CONFIG.submitMode === 'http') {
+              // Resolve relative URLs against current page (keeps same-origin easy)
+              const urlObj = new URL(CONFIG.submitUrl, window.location.href);
+              const url = urlObj.toString();
+
+              // Mixed-content guard: an HTTPS page cannot POST to HTTP endpoints
+              if (window.location && window.location.protocol === 'https:' && urlObj.protocol !== 'https:') {
+                throw new Error(`Insecure submit URL blocked from HTTPS page: ${url}`);
+              }
+
+              let headers = { 'Content-Type': 'application/json' };
+              if (CONFIG.submitHeadersJson && CONFIG.submitHeadersJson.trim()) {
+                try {
+                  const parsed = JSON.parse(CONFIG.submitHeadersJson);
+                  headers = { ...headers, ...parsed };
+                } catch (e) {
+                  // Keep defaults
+                }
+              }
+
+              const res = await fetch(url, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({
+                  formId: CONFIG.formId,
+                  payload: processedData,
+                  meta: {
+                    timestamp: new Date().toISOString(),
+                    userAgent: navigator.userAgent,
+                    url: window.location.href
+                  }
+                })
+              });
+
+              this.lastResultStatus = res.status;
+              const ct = String(res.headers.get('content-type') || '').toLowerCase();
+              let body;
+              if (ct.includes('application/json')) {
+                body = await res.json();
+              } else {
+                body = await res.text();
+              }
+              this.lastResult = body;
+              this.showResult = true;
+
+              if (!res.ok) {
+                showAlert(`HTTP submit failed (${res.status})`, 'danger');
+              } else {
+                showAlert('Submitted successfully (HTTP)', 'success');
+              }
+              return;
+            }
+
+            // Mode 2: uibuilder message to Node-RED flow (default)
+            const submitData = {
+              type: 'submit',
+              formId: CONFIG.formId,
+              payload: processedData,
+              meta: {
+                timestamp: new Date().toISOString(),
+                userAgent: navigator.userAgent,
+                url: window.location.href
+              }
+            };
+
+            if (uibuilderInstance && typeof uibuilderInstance.send === 'function') {
+              uibuilderInstance.send(submitData);
+              showAlert('Submit sent to Node-RED (uibuilder)', 'info');
+            } else {
+              throw new Error('uibuilder not initialized');
+            }
+            
+            // Optionally clear form after successful submit
+            // this.resetForm();
+            
+          } catch (error) {
+            console.error('Submit error:', error);
+            showAlert('Failed to submit: ' + error.message, 'danger');
+          } finally {
+            this.submitting = false;
+          }
+        },
+        
+        async handleCopyBlock(action) {
+          try {
+            // Simple mustache-like template rendering
+            let template = action.template || '';
+            const data = this.formData;
+            
+            // Replace {{fieldId}} with formData[fieldId]
+            template = template.replace(/\{\{(\w+)\}\}/g, (match, fieldId) => {
+              return data[fieldId] !== undefined ? String(data[fieldId]) : match;
+            });
+            
+            // Copy to clipboard
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+              await navigator.clipboard.writeText(template);
+              showAlert(action.successMessage || 'Copied to clipboard', 'success');
+            } else {
+              // Fallback for older browsers
+              const textArea = document.createElement('textarea');
+              textArea.value = template;
+              textArea.style.position = 'fixed';
+              textArea.style.opacity = '0';
+              document.body.appendChild(textArea);
+              textArea.select();
+              document.execCommand('copy');
+              document.body.removeChild(textArea);
+              showAlert(action.successMessage || 'Copied to clipboard', 'success');
+            }
+          } catch (error) {
+            console.error('Copy block error:', error);
+            showAlert('Failed to copy: ' + error.message, 'danger');
+          }
+        },
+        
+        async handleExport(format) {
+          try {
+            if (!CONFIG.exportFormats.includes(format)) {
+              showAlert(`Export format ${format} not available`, 'warning');
+              return;
+            }
+
+            // Always provide a client-side export (download)
+            if (format === 'json') {
+              exportAsJson(this.schema, this.formData);
+            } else if (format === 'csv') {
+              exportAsCsv(this.schema, this.formData);
+            } else if (format === 'html') {
+              exportAsHtml(this.schema, this.formData);
+            }
+
+            // Optional: also send export request to Node-RED if a flow is listening
+            try {
+              const processed = processedFormData(this.schema, this.formData);
+              const exportData = {
+                type: 'export',
+                formId: CONFIG.formId,
+                format: format,
+                payload: processed
+              };
+              if (uibuilderInstance && typeof uibuilderInstance.send === 'function') {
+                uibuilderInstance.send(exportData);
+              }
+            } catch (e) {
+              // ignore
+            }
+
+            showAlert(`Exported (${format.toUpperCase()})`, 'success');
+          } catch (error) {
+            console.error('Export error:', error);
+            showAlert('Failed to export: ' + error.message, 'danger');
+          }
+        },
+        
+        resetForm() {
+          // Reset to defaults
+          this.schema.sections.forEach(section => {
+            section.fields.forEach(field => {
+              if (field.type === 'checkbox') {
+                this.formData[field.id] = field.defaultValue !== undefined ? field.defaultValue : false;
+              } else if (field.type === 'number') {
+                this.formData[field.id] = field.defaultValue !== undefined ? field.defaultValue : null;
+              } else if (field.type === 'keyvalue') {
+                if (field.keyvalueMode === 'delimiter') {
+                  // Delimiter mode: initialize as empty string or default value
+                  if (field.defaultValue !== undefined) {
+                    this.formData[field.id] = String(field.defaultValue);
+                  } else {
+                    // If pairs exist, convert them to delimiter format
+                    if (field.pairs && field.pairs.length > 0) {
+                      const delimiter = field.keyvalueDelimiter || '=';
+                      this.formData[field.id] = field.pairs
+                        .filter(p => p && p.key && p.key.trim())
+                        .map(p => `${p.key}${delimiter}${p.value || ''}`)
+                        .join('\n');
+                    } else {
+                      this.formData[field.id] = '';
+                    }
+                  }
+                } else {
+                  // Pairs mode: initialize with default pairs or empty array
+                  if (field.defaultValue && Array.isArray(field.defaultValue)) {
+                    this.formData[field.id] = JSON.parse(JSON.stringify(field.defaultValue));
+                  } else if (field.pairs && field.pairs.length > 0) {
+                    // Use pairs from schema as initial values
+                    this.formData[field.id] = field.pairs.map(p => ({ key: p.key || '', value: p.value || '' }));
+                  } else {
+                    this.formData[field.id] = [{ key: '', value: '' }];
+                  }
+                }
+              } else {
+                this.formData[field.id] = field.defaultValue !== undefined ? field.defaultValue : '';
+              }
+              this.fieldErrors[field.id] = '';
+            });
+          });
+        }
+      }
+    });
+  }
+  
+  function setupUibuilderHandlers() {
+    if (!uibuilderInstance || typeof uibuilderInstance.onChange !== 'function') return;
+    
+    // Handle incoming messages from Node-RED (uibuilder v7.5.0 API)
+    // onChange(prop: string, callback: (val: any) => void): number
+    uibuilderInstance.onChange('msg', function(msg) {
+      // Normalize message: uibuilder may send msg.payload or msg directly
+      const payload = msg && (msg.payload ?? msg);
+      if (!payload || typeof payload !== 'object') return;
+      
+      // Handle draft response
+      if (payload.type === 'draft' && payload.formId === CONFIG.formId) {
+        if (app && payload.data) {
+          app.formData = { ...app.formData, ...payload.data };
+          showAlert('Draft loaded from server', 'success');
+        }
+      }
+      
+      // Handle submit response
+      if (payload.type === 'submit:ok') {
+        if (app) {
+          app.lastResultStatus = payload.status || null;
+          app.lastResult = payload.result ?? payload.payload ?? payload;
+          app.showResult = true;
+          app.resultView = 'table';
+        }
+        showAlert('Submission confirmed', 'success');
+      } else if (payload.type === 'submit:error') {
+        if (app) {
+          app.lastResultStatus = payload.status || null;
+          app.lastResult = payload.result ?? payload.error ?? payload;
+          app.showResult = true;
+          app.resultView = 'json';
+        }
+        showAlert('Submission failed', 'danger');
+      }
+      
+      // Handle export response
+      if (payload.type === 'export:file') {
+        const fileInfo = payload.payload || payload;
+        const format = fileInfo.format || 'file';
+        if (fileInfo.url) {
+          showAlert(`Export ready: <a href="${fileInfo.url}" target="_blank" rel="noopener">Download ${format.toUpperCase()}</a>`, 'success');
+        } else if (fileInfo.path) {
+          showAlert(`Export saved: ${fileInfo.path}`, 'success');
+        } else {
+          showAlert(`Export completed (${format.toUpperCase()})`, 'success');
+        }
+      }
+    });
+  }
+  
+  function showAlert(message, variant) {
+    if (app) {
+      app.alertMessage = message;
+      app.alertVariant = variant || 'info';
+      app.showAlert = true;
+      
+      // Auto-dismiss after 5 seconds for success/info
+      if (variant === 'success' || variant === 'info') {
+        setTimeout(() => {
+          if (app) app.showAlert = false;
+        }, 5000);
+      }
+    }
+  }
+  
+})();
+