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

package/examples/formgen-builder/src/index.js

@@ -0,0 +1,1338 @@
+// PortalSmith Schema Builder
+// Visual schema editor for uibuilder-formgen
+
+(function() {
+  'use strict';
+  
+  let uibuilderInstance = null;
+  let app = null;
+  
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+  
+  async function init() {
+    try {
+      // Wait for uibuilder to be available
+      if (typeof uibuilder === 'undefined') {
+        await new Promise(resolve => {
+          const checkUibuilder = setInterval(() => {
+            if (typeof uibuilder !== 'undefined') {
+              clearInterval(checkUibuilder);
+              resolve();
+            }
+          }, 100);
+        });
+      }
+      
+      // Start uibuilder
+      if (typeof uibuilder !== 'undefined' && typeof uibuilder.start === 'function') {
+        uibuilder.start();
+        uibuilderInstance = uibuilder;
+      }
+      
+      // Initialize Vue app
+      initVueApp();
+      
+      // Load saved schemas list (after app is initialized)
+      if (app) {
+        loadSavedSchemasList();
+      }
+      
+      // Setup uibuilder message handlers
+      setupUibuilderHandlers();
+      
+    } catch (error) {
+      console.error('Initialization error:', error);
+    }
+  }
+  
+  function initVueApp() {
+    // Default empty schema
+    const defaultSchema = {
+      schemaVersion: '1.0',
+      formId: '',
+      title: '',
+      description: '',
+      sections: [],
+      actions: []
+    };
+    
+    app = new Vue({
+      el: '#app',
+      data: {
+        schema: JSON.parse(JSON.stringify(defaultSchema)), // Deep copy
+        showAlert: false,
+        alertMessage: '',
+        alertVariant: 'info',
+        showPreview: false,
+        showHelp: false,
+        
+        // Section editor
+        editingSection: null,
+        currentSection: {
+          id: '',
+          title: '',
+          description: ''
+        },
+        
+        // Field editor
+        editingField: null,
+        editingFieldLocation: null, // {sectionIdx, fieldIdx}
+        currentField: {
+          id: '',
+          label: '',
+          type: 'text',
+          required: false,
+          placeholder: '',
+          help: '',
+          defaultValue: '',
+          inputType: 'text',
+          rows: 3,
+          min: null,
+          max: null,
+          step: null,
+          options: [],
+          validate: null,
+          validatePattern: '',
+          validateMessage: ''
+        },
+        
+        // CSV/JSON import
+        csvData: '',
+        jsonData: '',
+        
+        // Save/Load
+        saveName: '',
+        savedSchemas: [],
+        selectedLoadSchema: null,
+        
+        // Bulk options
+        showBulkOptions: false,
+        bulkOptionsText: '',
+        
+        // Field types
+        fieldTypes: [
+          { value: 'text', text: 'Text Input' },
+          { value: 'textarea', text: 'Textarea' },
+          { value: 'number', text: 'Number' },
+          { value: 'select', text: 'Select Dropdown' },
+          { value: 'radio', text: 'Radio Buttons' },
+          { value: 'checkbox', text: 'Checkbox' },
+          { value: 'date', text: 'Date' },
+          { value: 'keyvalue', text: 'Key-Value Pairs' }
+        ],
+        
+        inputTypes: [
+          { value: 'text', text: 'Text' },
+          { value: 'email', text: 'Email' },
+          { value: 'tel', text: 'Telephone' },
+          { value: 'url', text: 'URL' },
+          { value: 'password', text: 'Password' }
+        ],
+        
+        validationTypes: [
+          { value: null, text: 'None' },
+          { value: 'email', text: 'Email' },
+          { value: 'phone', text: 'Phone' },
+          { value: 'regex', text: 'Regex Pattern' }
+        ]
+      },
+      
+      computed: {
+        formIdState() {
+          if (!this.schema.formId) return null;
+          return /^[a-zA-Z0-9._-]+$/.test(this.schema.formId) ? true : false;
+        },
+        
+        fieldIdState() {
+          if (!this.currentField.id) return null;
+          return /^[a-zA-Z0-9._-]+$/.test(this.currentField.id) ? true : false;
+        },
+        
+        canGenerate() {
+          return this.schema.formId && 
+                 this.schema.title && 
+                 this.schema.sections.length > 0 &&
+                 this.schema.sections.some(s => s.fields.length > 0) &&
+                 this.formIdState === true;
+        },
+        
+        canSave() {
+          return this.schema.formId && this.schema.title;
+        },
+        
+        savedSchemaOptions() {
+          return this.savedSchemas.map((s, idx) => ({
+            value: idx,
+            text: `${s.name} (${s.date})`
+          }));
+        },
+        
+        jsonPreview() {
+          return JSON.stringify(this.schema, null, 2);
+        }
+      },
+      
+      methods: {
+        isSchemaEmpty() {
+          const s = this.schema || {};
+          return (
+            !s.formId &&
+            !s.title &&
+            !s.description &&
+            (!s.sections || s.sections.length === 0) &&
+            (!s.actions || s.actions.length === 0)
+          );
+        },
+
+        newSchema() {
+          // Avoid accidental loss of work
+          if (!this.isSchemaEmpty()) {
+            const ok = confirm('Start a new schema? This will reset the current form metadata, sections, and fields (unsaved changes will be lost).');
+            if (!ok) return;
+          }
+
+          // Close any open modals
+          try {
+            this.$bvModal.hide('section-modal');
+            this.$bvModal.hide('field-modal');
+            this.$bvModal.hide('csv-modal');
+            this.$bvModal.hide('json-modal');
+            this.$bvModal.hide('save-modal');
+            this.$bvModal.hide('load-modal');
+          } catch (e) {
+            // ignore
+          }
+
+          // Reset schema and editor state
+          this.$set(this, 'schema', JSON.parse(JSON.stringify(defaultSchema)));
+          this.editingSection = null;
+          this.editingField = null;
+          this.editingFieldLocation = null;
+          this.currentSection = { id: '', title: '', description: '' };
+          this.resetCurrentField();
+
+          // Reset auxiliary UI state
+          this.showPreview = false;
+          this.showBulkOptions = false;
+          this.bulkOptionsText = '';
+          this.csvData = '';
+          this.jsonData = '';
+          this.saveName = '';
+          this.selectedLoadSchema = null;
+
+          this.$forceUpdate();
+          this.showAlertMessage('New schema started', 'info');
+        },
+
+        showAlertMessage(message, variant) {
+          this.alertMessage = message;
+          this.alertVariant = variant || 'info';
+          this.showAlert = true;
+          setTimeout(() => {
+            this.showAlert = false;
+          }, 5000);
+        },
+        
+        // Section management
+        addSection() {
+          this.editingSection = null;
+          this.currentSection = {
+            id: '',
+            title: '',
+            description: ''
+          };
+          this.$bvModal.show('section-modal');
+        },
+        
+        editSection(sectionIdx) {
+          this.editingSection = sectionIdx;
+          this.currentSection = JSON.parse(JSON.stringify(this.schema.sections[sectionIdx]));
+          this.$bvModal.show('section-modal');
+        },
+        
+        saveSection() {
+          if (!this.currentSection.id || !this.currentSection.title) {
+            this.showAlertMessage('Section ID and Title are required', 'warning');
+            return;
+          }
+          
+          // Validate section ID
+          if (!/^[a-zA-Z0-9._-]+$/.test(this.currentSection.id)) {
+            this.showAlertMessage('Section ID must be alphanumeric with underscores or hyphens', 'warning');
+            return;
+          }
+          
+          // Check for duplicate ID
+          if (this.editingSection === null) {
+            const exists = this.schema.sections.some(s => s.id === this.currentSection.id);
+            if (exists) {
+              this.showAlertMessage('Section ID already exists', 'warning');
+              return;
+            }
+            // Add new section
+            this.schema.sections.push({
+              id: this.currentSection.id,
+              title: this.currentSection.title,
+              description: this.currentSection.description || '',
+              fields: []
+            });
+          } else {
+            // Update existing section
+            const oldId = this.schema.sections[this.editingSection].id;
+            this.schema.sections[this.editingSection] = {
+              id: this.currentSection.id,
+              title: this.currentSection.title,
+              description: this.currentSection.description || '',
+              fields: this.schema.sections[this.editingSection].fields
+            };
+            
+            // If ID changed, update field references if needed
+            if (oldId !== this.currentSection.id) {
+              // Could update showIf conditions here if needed
+            }
+          }
+          
+          this.$bvModal.hide('section-modal');
+          this.showAlertMessage('Section saved', 'success');
+        },
+        
+        cancelEditSection() {
+          this.editingSection = null;
+          this.currentSection = { id: '', title: '', description: '' };
+        },
+        
+        deleteSection(sectionIdx) {
+          if (confirm('Delete this section and all its fields?')) {
+            this.schema.sections.splice(sectionIdx, 1);
+            this.showAlertMessage('Section deleted', 'success');
+          }
+        },
+        
+        // Field management
+        addField(sectionIdx) {
+          this.editingField = null;
+          this.editingFieldLocation = { sectionIdx, fieldIdx: null };
+          this.resetCurrentField();
+          this.$bvModal.show('field-modal');
+        },
+        
+        editField(sectionIdx, fieldIdx) {
+          this.editingField = true;
+          this.editingFieldLocation = { sectionIdx, fieldIdx };
+          const field = this.schema.sections[sectionIdx].fields[fieldIdx];
+          this.currentField = JSON.parse(JSON.stringify(field));
+          
+          // Normalize options
+          if (this.currentField.options && Array.isArray(this.currentField.options)) {
+            this.currentField.options = this.currentField.options.map(opt => {
+              if (typeof opt === 'string') {
+                return { value: opt, text: opt };
+              }
+              return opt;
+            });
+          } else if (!this.currentField.options) {
+            this.currentField.options = [];
+          }
+          
+          // Ensure pairs array exists for keyvalue fields
+          if (this.currentField.type === 'keyvalue') {
+            if (!this.currentField.keyvalueMode) {
+              this.currentField.keyvalueMode = 'pairs';
+            }
+            if (!this.currentField.keyvalueDelimiter) {
+              this.currentField.keyvalueDelimiter = '=';
+            }
+            if (this.currentField.keyvalueMode === 'pairs') {
+              if (!this.currentField.pairs || !Array.isArray(this.currentField.pairs)) {
+                this.$set(this.currentField, 'pairs', [{ key: '', value: '' }]);
+              }
+            }
+          }
+          
+          // Handle validation
+          if (this.currentField.validate && this.currentField.validate.startsWith('regex:')) {
+            this.currentField.validate = 'regex';
+            this.currentField.validatePattern = this.currentField.validate.substring(6);
+          }
+          
+          this.$bvModal.show('field-modal');
+        },
+        
+        saveField() {
+          if (!this.currentField.id || !this.currentField.label) {
+            this.showAlertMessage('Field ID and Label are required', 'warning');
+            return;
+          }
+          
+          // Validate field ID
+          if (!/^[a-zA-Z0-9._-]+$/.test(this.currentField.id)) {
+            this.showAlertMessage('Field ID must be alphanumeric with underscores or hyphens', 'warning');
+            return;
+          }
+          
+          const { sectionIdx, fieldIdx } = this.editingFieldLocation;
+          const section = this.schema.sections[sectionIdx];
+          
+          // Check for duplicate ID in section
+          if (fieldIdx === null) {
+            const exists = section.fields.some(f => f.id === this.currentField.id);
+            if (exists) {
+              this.showAlertMessage('Field ID already exists in this section', 'warning');
+              return;
+            }
+          } else {
+            // Check if ID changed and conflicts
+            const oldField = section.fields[fieldIdx];
+            if (oldField.id !== this.currentField.id) {
+              const exists = section.fields.some((f, idx) => idx !== fieldIdx && f.id === this.currentField.id);
+              if (exists) {
+                this.showAlertMessage('Field ID already exists in this section', 'warning');
+                return;
+              }
+            }
+          }
+          
+          // Build field object - start with base properties
+          const field = {
+            id: this.currentField.id,
+            label: this.currentField.label,
+            type: this.currentField.type, // Always include type
+            required: this.currentField.required || false
+          };
+          
+          // Add optional common properties
+          if (this.currentField.placeholder) field.placeholder = this.currentField.placeholder;
+          if (this.currentField.help) field.help = this.currentField.help;
+          if (this.currentField.defaultValue !== '' && this.currentField.defaultValue !== null && this.currentField.defaultValue !== undefined) {
+            field.defaultValue = this.currentField.defaultValue;
+          }
+          
+          // Type-specific properties - only add properties relevant to current type
+          if (this.currentField.type === 'text') {
+            if (this.currentField.inputType && this.currentField.inputType !== 'text') {
+              field.inputType = this.currentField.inputType;
+            }
+            // Remove type-specific properties from other types
+            delete field.rows;
+            delete field.min;
+            delete field.max;
+            delete field.step;
+            delete field.options;
+          } else if (this.currentField.type === 'textarea') {
+            if (this.currentField.rows && this.currentField.rows !== 3) {
+              field.rows = this.currentField.rows;
+            }
+            // Remove type-specific properties from other types
+            delete field.inputType;
+            delete field.min;
+            delete field.max;
+            delete field.step;
+            delete field.options;
+          } else if (this.currentField.type === 'number') {
+            if (this.currentField.min !== null && this.currentField.min !== undefined) field.min = this.currentField.min;
+            if (this.currentField.max !== null && this.currentField.max !== undefined) field.max = this.currentField.max;
+            if (this.currentField.step !== null && this.currentField.step !== undefined) field.step = this.currentField.step;
+            // Remove type-specific properties from other types
+            delete field.inputType;
+            delete field.rows;
+            delete field.options;
+          } else if (this.currentField.type === 'select' || this.currentField.type === 'radio') {
+            if (!this.currentField.options || this.currentField.options.length === 0) {
+              this.showAlertMessage(`${this.currentField.type} fields require at least one option`, 'warning');
+              return;
+            }
+            // Filter out empty options and ensure both value and text exist
+            const validOptions = this.currentField.options
+              .filter(opt => opt && (opt.value !== undefined || opt.text !== undefined))
+              .map(opt => ({
+                value: String(opt.value || opt.text || ''),
+                text: String(opt.text || opt.value || '')
+              }));
+            
+            if (validOptions.length === 0) {
+              this.showAlertMessage(`${this.currentField.type} fields require at least one valid option`, 'warning');
+              return;
+            }
+            
+            field.options = validOptions;
+            // Remove type-specific properties from other types
+            delete field.inputType;
+            delete field.rows;
+            delete field.min;
+            delete field.max;
+            delete field.step;
+            delete field.pairs;
+          } else if (this.currentField.type === 'keyvalue') {
+            // Set mode and delimiter
+            field.keyvalueMode = this.currentField.keyvalueMode || 'pairs';
+            field.keyvalueDelimiter = this.currentField.keyvalueDelimiter || '=';
+            
+            if (field.keyvalueMode === 'pairs') {
+              if (!this.currentField.pairs || this.currentField.pairs.length === 0) {
+                this.showAlertMessage('Key-Value fields require at least one pair', 'warning');
+                return;
+              }
+              // Filter out empty pairs and ensure both key and value exist
+              const validPairs = this.currentField.pairs
+                .filter(pair => pair && pair.key && pair.key.trim())
+                .map(pair => ({
+                  key: String(pair.key || '').trim(),
+                  value: String(pair.value || '').trim()
+                }));
+              
+              if (validPairs.length === 0) {
+                this.showAlertMessage('Key-Value fields require at least one valid pair with a key', 'warning');
+                return;
+              }
+              
+              field.pairs = validPairs;
+            } else {
+              // Delimiter mode - no pairs needed, but validate delimiter
+              if (!field.keyvalueDelimiter || field.keyvalueDelimiter.trim() === '') {
+                this.showAlertMessage('Delimiter is required for delimiter mode', 'warning');
+                return;
+              }
+            }
+            
+            // Remove type-specific properties from other types
+            delete field.inputType;
+            delete field.rows;
+            delete field.min;
+            delete field.max;
+            delete field.step;
+            delete field.options;
+          } else if (this.currentField.type === 'checkbox' || this.currentField.type === 'date') {
+            // Remove type-specific properties from other types
+            delete field.inputType;
+            delete field.rows;
+            delete field.min;
+            delete field.max;
+            delete field.step;
+            delete field.options;
+            delete field.pairs;
+          }
+          
+          // Validation
+          if (this.currentField.validate) {
+            if (this.currentField.validate === 'regex' && this.currentField.validatePattern) {
+              field.validate = 'regex:' + this.currentField.validatePattern;
+            } else {
+              field.validate = this.currentField.validate;
+            }
+            if (this.currentField.validateMessage) {
+              field.validateMessage = this.currentField.validateMessage;
+            }
+          }
+          
+          // Save field - use Vue.set for existing fields to ensure reactivity
+          if (fieldIdx === null) {
+            section.fields.push(field);
+          } else {
+            // Replace the entire field object using Vue.set to ensure type change is captured
+            this.$set(section.fields, fieldIdx, field);
+          }
+          
+          this.$bvModal.hide('field-modal');
+          this.showAlertMessage('Field saved', 'success');
+        },
+        
+        cancelEditField() {
+          this.editingField = null;
+          this.editingFieldLocation = null;
+          this.resetCurrentField();
+        },
+        
+        deleteField(sectionIdx, fieldIdx) {
+          if (confirm('Delete this field?')) {
+            this.schema.sections[sectionIdx].fields.splice(fieldIdx, 1);
+            this.showAlertMessage('Field deleted', 'success');
+          }
+        },
+        
+        resetCurrentField() {
+          // Use Object.assign to maintain reactivity
+          Object.assign(this.currentField, {
+            id: '',
+            label: '',
+            type: 'text',
+            required: false,
+            placeholder: '',
+            help: '',
+            defaultValue: '',
+            inputType: 'text',
+            rows: 3,
+            min: null,
+            max: null,
+            step: null,
+            options: [],
+            pairs: [],
+            keyvalueMode: 'pairs', // 'pairs' or 'delimiter'
+            keyvalueDelimiter: '=', // Delimiter for key=value format
+            validate: null,
+            validatePattern: '',
+            validateMessage: ''
+          });
+          // Ensure arrays are reactive
+          this.$set(this.currentField, 'options', []);
+          this.$set(this.currentField, 'pairs', []);
+        },
+        
+        onFieldTypeChange() {
+          // Reset type-specific fields when type changes
+          if (this.currentField.type !== 'select' && this.currentField.type !== 'radio') {
+            this.currentField.options = [];
+            this.$set(this.currentField, 'options', []);
+          } else {
+            // If switching TO select/radio and no options exist, add one empty option
+            if (!this.currentField.options || this.currentField.options.length === 0) {
+              this.$set(this.currentField, 'options', [{ value: '', text: '' }]);
+            }
+          }
+          if (this.currentField.type !== 'keyvalue') {
+            this.currentField.pairs = [];
+            this.$set(this.currentField, 'pairs', []);
+            this.currentField.keyvalueMode = 'pairs';
+            this.currentField.keyvalueDelimiter = '=';
+          } else {
+            // If switching TO keyvalue, set defaults
+            if (!this.currentField.keyvalueMode) {
+              this.$set(this.currentField, 'keyvalueMode', 'pairs');
+            }
+            if (!this.currentField.keyvalueDelimiter) {
+              this.$set(this.currentField, 'keyvalueDelimiter', '=');
+            }
+            // If pairs mode and no pairs exist, add one empty pair
+            if (this.currentField.keyvalueMode === 'pairs') {
+              if (!this.currentField.pairs || this.currentField.pairs.length === 0) {
+                this.$set(this.currentField, 'pairs', [{ key: '', value: '' }]);
+              }
+            }
+          }
+          if (this.currentField.type !== 'number') {
+            this.currentField.min = null;
+            this.currentField.max = null;
+            this.currentField.step = null;
+          }
+          if (this.currentField.type !== 'textarea') {
+            this.currentField.rows = 3;
+          }
+        },
+        
+        onKeyValueModeChange() {
+          // Ensure Vue reactivity when mode changes
+          this.$set(this.currentField, 'keyvalueMode', this.currentField.keyvalueMode);
+          this.$forceUpdate();
+          
+          // If switching to pairs mode and no pairs exist, add one
+          if (this.currentField.keyvalueMode === 'pairs') {
+            if (!this.currentField.pairs || this.currentField.pairs.length === 0) {
+              this.$set(this.currentField, 'pairs', [{ key: '', value: '' }]);
+            }
+          }
+          
+          // Ensure delimiter is set
+          if (this.currentField.keyvalueMode === 'delimiter' && !this.currentField.keyvalueDelimiter) {
+            this.$set(this.currentField, 'keyvalueDelimiter', '=');
+          }
+        },
+        
+        addOption() {
+          // Ensure options array exists and is reactive
+          if (!this.currentField.options) {
+            this.$set(this.currentField, 'options', []);
+          }
+          
+          // Create a new array with the added option to force Vue reactivity
+          const newOptions = [...this.currentField.options, { value: '', text: '' }];
+          this.$set(this.currentField, 'options', newOptions);
+          
+          // Force update to ensure modal content refreshes
+          this.$forceUpdate();
+          
+          // Use $nextTick to ensure DOM updates
+          this.$nextTick(() => {
+            // Scroll to the last option
+            const optionInputs = document.querySelectorAll('[id^="opt-value"]');
+            if (optionInputs.length > 0) {
+              const lastInput = optionInputs[optionInputs.length - 1];
+              lastInput.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+              lastInput.focus();
+            }
+          });
+        },
+        
+        removeOption(idx) {
+          // Allow deletion even if only one option - user can add more later
+          // Just warn if it's the last one
+          if (this.currentField.options.length === 1) {
+            if (!confirm('This is the last option. Select/Radio fields need at least one option. Delete anyway?')) {
+              return;
+            }
+          }
+          
+          // Create a new array without the deleted option to ensure Vue reactivity
+          const newOptions = this.currentField.options.filter((opt, i) => i !== idx);
+          
+          // If no options left, add one empty option
+          if (newOptions.length === 0) {
+            newOptions.push({ value: '', text: '' });
+          }
+          
+          // Replace the entire array using $set to ensure reactivity
+          this.$set(this.currentField, 'options', newOptions);
+          this.$forceUpdate();
+        },
+        
+        addPair() {
+          // Ensure pairs array exists and is reactive
+          if (!this.currentField.pairs) {
+            this.$set(this.currentField, 'pairs', []);
+          }
+          // Add new pair
+          this.currentField.pairs.push({ key: '', value: '' });
+          this.$forceUpdate();
+          
+          // Use $nextTick to ensure DOM updates
+          this.$nextTick(() => {
+            // Scroll to the last pair
+            const pairInputs = document.querySelectorAll('[id^="pair-key"]');
+            if (pairInputs.length > 0) {
+              const lastInput = pairInputs[pairInputs.length - 1];
+              lastInput.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+              lastInput.focus();
+            }
+          });
+        },
+        
+        removePair(idx) {
+          // Allow deletion even if only one pair - user can add more later
+          // Just warn if it's the last one
+          if (this.currentField.pairs.length === 1) {
+            if (!confirm('This is the last pair. Key-Value fields need at least one pair. Delete anyway?')) {
+              return;
+            }
+          }
+          
+          // Create a new array without the deleted pair to ensure Vue reactivity
+          const newPairs = this.currentField.pairs.filter((pair, i) => i !== idx);
+          
+          // If no pairs left, add one empty pair
+          if (newPairs.length === 0) {
+            newPairs.push({ key: '', value: '' });
+          }
+          
+          // Replace the entire array using $set to ensure reactivity
+          this.$set(this.currentField, 'pairs', newPairs);
+          this.$forceUpdate();
+        },
+        
+        handleOptionPaste(event, optIdx, field) {
+          // Get pasted text
+          const pastedText = (event.clipboardData || window.clipboardData).getData('text');
+          
+          // Check if it matches the format: value="xxx" | text="YYY"
+          const valueMatch = pastedText.match(/value\s*=\s*["']([^"']+)["']/i);
+          const textMatch = pastedText.match(/text\s*=\s*["']([^"']+)["']/i);
+          
+          if (valueMatch && textMatch) {
+            // Prevent default paste
+            event.preventDefault();
+            
+            // Parse and set both fields
+            this.currentField.options[optIdx].value = valueMatch[1];
+            this.currentField.options[optIdx].text = textMatch[1];
+            
+            this.showAlertMessage('Option parsed and filled automatically', 'success');
+          }
+          // Otherwise, let default paste behavior happen
+        },
+        
+        parseBulkOptions() {
+          if (!this.bulkOptionsText || !this.bulkOptionsText.trim()) {
+            this.showAlertMessage('Please enter options to parse', 'warning');
+            return;
+          }
+          
+          const lines = this.bulkOptionsText.trim().split('\n');
+          const newOptions = [];
+          
+          for (const line of lines) {
+            const trimmed = line.trim();
+            if (!trimmed) continue;
+            
+            // Try to parse format: value="xxx" | text="YYY"
+            const valueMatch = trimmed.match(/value\s*=\s*["']([^"']+)["']/i);
+            const textMatch = trimmed.match(/text\s*=\s*["']([^"']+)["']/i);
+            
+            if (valueMatch && textMatch) {
+              // Parsed format: value="xxx" | text="YYY"
+              newOptions.push({
+                value: valueMatch[1],
+                text: textMatch[1]
+              });
+            } else if (valueMatch) {
+              // Only value found, use it for both
+              newOptions.push({
+                value: valueMatch[1],
+                text: valueMatch[1]
+              });
+            } else if (textMatch) {
+              // Only text found, use it for both
+              newOptions.push({
+                value: textMatch[1],
+                text: textMatch[1]
+              });
+            } else {
+              // No format match, treat entire line as both value and text
+              newOptions.push({
+                value: trimmed,
+                text: trimmed
+              });
+            }
+          }
+          
+          if (newOptions.length === 0) {
+            this.showAlertMessage('No valid options found. Check your format.', 'warning');
+            return;
+          }
+          
+          // Add to existing options (or replace if empty)
+          if (this.currentField.options.length === 0 || 
+              (this.currentField.options.length === 1 && !this.currentField.options[0].value && !this.currentField.options[0].text)) {
+            this.currentField.options = newOptions;
+          } else {
+            this.currentField.options = [...this.currentField.options, ...newOptions];
+          }
+          
+          this.bulkOptionsText = '';
+          this.showBulkOptions = false;
+          this.showAlertMessage(`Added ${newOptions.length} option(s)`, 'success');
+        },
+        
+        // Help
+        showFieldHelp(type) {
+          // Could show specific help for different field types
+          this.showHelp = true;
+        },
+        
+        // Save/Load Schema
+        saveSchema() {
+          console.log('saveSchema called, canSave:', this.canSave);
+          if (!this.canSave) {
+            this.showAlertMessage('Please set Form ID and Title before saving', 'warning');
+            return;
+          }
+          this.saveName = this.schema.title || this.schema.formId || '';
+          this.loadSavedSchemasList();
+          console.log('Showing save modal, current schema:', this.schema);
+          this.$bvModal.show('save-modal');
+        },
+        
+        loadSavedSchemasList() {
+          try {
+            if (typeof Storage === 'undefined') {
+              console.warn('localStorage not available');
+              this.savedSchemas = [];
+              return;
+            }
+            
+            const stored = localStorage.getItem('portalsmith:savedSchemas');
+            let saved = [];
+            
+            if (stored) {
+              try {
+                saved = JSON.parse(stored);
+              } catch (e) {
+                console.error('Error parsing saved schemas:', e);
+                saved = [];
+              }
+            }
+            
+            // Sort by timestamp (newest first)
+            saved.sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+            
+            this.$set(this, 'savedSchemas', saved);
+            console.log('Loaded saved schemas list:', saved.length);
+          } catch (error) {
+            console.error('Error loading saved schemas list:', error);
+            this.$set(this, 'savedSchemas', []);
+          }
+        },
+        
+        handleSaveOk(bvModalEvt) {
+          console.log('handleSaveOk called, saveName:', this.saveName, 'event:', bvModalEvt);
+          
+          // Prevent modal from closing if validation fails
+          if (!this.saveName || !this.saveName.trim()) {
+            if (bvModalEvt && typeof bvModalEvt.preventDefault === 'function') {
+              bvModalEvt.preventDefault();
+            }
+            this.showAlertMessage('Please enter a schema name', 'warning');
+            return false; // Return false to prevent modal close
+          }
+          
+          // Process save - this will close the modal itself
+          this.processSave();
+          return true; // Allow modal to close
+        },
+        
+        processSave() {
+          try {
+            // Check localStorage availability
+            if (typeof Storage === 'undefined') {
+              this.showAlertMessage('localStorage is not available in this browser', 'danger');
+              return;
+            }
+            
+            const schemaName = this.saveName.trim();
+            if (!schemaName) {
+              this.showAlertMessage('Schema name cannot be empty', 'warning');
+              return;
+            }
+            
+            // Deep copy schema to avoid reference issues
+            const schemaCopy = JSON.parse(JSON.stringify(this.schema));
+            
+            const savedSchema = {
+              name: schemaName,
+              date: new Date().toLocaleString(),
+              timestamp: Date.now(),
+              schema: schemaCopy
+            };
+            
+            // Load existing saved schemas
+            let saved = [];
+            try {
+              const stored = localStorage.getItem('portalsmith:savedSchemas');
+              if (stored) {
+                saved = JSON.parse(stored);
+              }
+            } catch (e) {
+              console.warn('Error reading saved schemas:', e);
+              saved = [];
+            }
+            
+            // Check if name already exists, update it
+            const existingIdx = saved.findIndex(s => s.name === savedSchema.name);
+            if (existingIdx >= 0) {
+              saved[existingIdx] = savedSchema;
+            } else {
+              saved.push(savedSchema);
+            }
+            
+            // Save back to localStorage
+            try {
+              localStorage.setItem('portalsmith:savedSchemas', JSON.stringify(saved));
+              console.log('Schema saved to localStorage:', schemaName);
+            } catch (e) {
+              if (e.name === 'QuotaExceededError') {
+                this.showAlertMessage('Storage quota exceeded. Please delete some saved schemas.', 'danger');
+                return;
+              }
+              throw e;
+            }
+            
+            // Update list
+            this.loadSavedSchemasList();
+            
+            this.$bvModal.hide('save-modal');
+            this.showAlertMessage(`Schema "${schemaName}" saved successfully`, 'success');
+            this.saveName = '';
+            
+          } catch (error) {
+            console.error('Save error:', error);
+            this.showAlertMessage('Failed to save schema: ' + error.message, 'danger');
+          }
+        },
+        
+        cancelSave() {
+          this.saveName = '';
+        },
+        
+        loadSchema() {
+          console.log('loadSchema called');
+          this.loadSavedSchemasList();
+          console.log('Saved schemas count:', this.savedSchemas.length);
+          if (this.savedSchemas.length === 0) {
+            this.showAlertMessage('No saved schemas found. Save a schema first.', 'info');
+            return;
+          }
+          this.selectedLoadSchema = null;
+          console.log('Showing load modal');
+          this.$bvModal.show('load-modal');
+        },
+        
+        handleLoadOk(bvModalEvt) {
+          console.log('handleLoadOk called, selectedLoadSchema:', this.selectedLoadSchema);
+          
+          // Prevent modal from closing if validation fails
+          if (this.selectedLoadSchema === null || this.selectedLoadSchema === undefined) {
+            if (bvModalEvt && typeof bvModalEvt.preventDefault === 'function') {
+              bvModalEvt.preventDefault();
+            }
+            this.showAlertMessage('Please select a schema to load', 'warning');
+            return false; // Return false to prevent modal close
+          }
+          
+          // Process load - this will close the modal itself
+          this.processLoad();
+          return true; // Allow modal to close
+        },
+        
+        processLoad() {
+          try {
+            // Check localStorage availability
+            if (typeof Storage === 'undefined') {
+              this.showAlertMessage('localStorage is not available in this browser', 'danger');
+              return;
+            }
+            
+            if (this.selectedLoadSchema === null || this.selectedLoadSchema === undefined) {
+              this.showAlertMessage('Please select a schema to load', 'warning');
+              return;
+            }
+            
+            // Reload from localStorage to ensure we have latest data
+            let saved = [];
+            try {
+              const stored = localStorage.getItem('portalsmith:savedSchemas');
+              if (stored) {
+                saved = JSON.parse(stored);
+              }
+            } catch (e) {
+              console.error('Error reading saved schemas:', e);
+              this.showAlertMessage('Failed to read saved schemas', 'danger');
+              return;
+            }
+            
+            if (this.selectedLoadSchema >= saved.length) {
+              this.showAlertMessage('Selected schema index is invalid', 'danger');
+              return;
+            }
+            
+            const savedItem = saved[this.selectedLoadSchema];
+            if (!savedItem || !savedItem.schema) {
+              this.showAlertMessage('Selected schema is invalid or corrupted', 'danger');
+              return;
+            }
+            
+            // Deep copy the schema
+            const loadedSchema = JSON.parse(JSON.stringify(savedItem.schema));
+            
+            // Ensure all required properties exist
+            if (!loadedSchema.schemaVersion) loadedSchema.schemaVersion = '1.0';
+            if (!loadedSchema.sections) loadedSchema.sections = [];
+            if (!loadedSchema.actions) loadedSchema.actions = [];
+            
+            // Replace entire schema object to ensure Vue reactivity
+            this.$set(this, 'schema', {
+              schemaVersion: loadedSchema.schemaVersion,
+              formId: loadedSchema.formId || '',
+              title: loadedSchema.title || '',
+              description: loadedSchema.description || '',
+              sections: loadedSchema.sections || [],
+              actions: loadedSchema.actions || []
+            });
+            
+            // Force update to ensure UI refreshes
+            this.$forceUpdate();
+            
+            this.$bvModal.hide('load-modal');
+            this.showAlertMessage(`Schema "${savedItem.name}" loaded successfully`, 'success');
+            this.selectedLoadSchema = null;
+            
+          } catch (error) {
+            console.error('Load error:', error);
+            this.showAlertMessage('Failed to load schema: ' + error.message, 'danger');
+          }
+        },
+        
+        cancelLoad() {
+          this.selectedLoadSchema = null;
+        },
+        
+        deleteSavedSchema(idx) {
+          if (confirm('Delete this saved schema?')) {
+            try {
+              const saved = JSON.parse(localStorage.getItem('portalsmith:savedSchemas') || '[]');
+              saved.splice(idx, 1);
+              localStorage.setItem('portalsmith:savedSchemas', JSON.stringify(saved));
+              this.loadSavedSchemasList();
+              this.showAlertMessage('Schema deleted', 'success');
+            } catch (error) {
+              console.error('Delete error:', error);
+              this.showAlertMessage('Failed to delete schema: ' + error.message, 'danger');
+            }
+          }
+        },
+        
+        // CSV Import
+        importCSV() {
+          this.csvData = '';
+          this.$bvModal.show('csv-modal');
+        },
+        
+        processCSV() {
+          try {
+            const lines = this.csvData.trim().split('\n');
+            if (lines.length < 2) {
+              this.showAlertMessage('CSV must have at least a header row and one data row', 'warning');
+              return;
+            }
+            
+            // Parse header
+            const headers = lines[0].split(',').map(h => h.trim());
+            const idIdx = headers.indexOf('id');
+            const labelIdx = headers.indexOf('label');
+            const typeIdx = headers.indexOf('type');
+            
+            if (idIdx === -1 || labelIdx === -1 || typeIdx === -1) {
+              this.showAlertMessage('CSV must have id, label, and type columns', 'warning');
+              return;
+            }
+            
+            const requiredIdx = headers.indexOf('required');
+            const sectionIdx = headers.indexOf('section');
+            const placeholderIdx = headers.indexOf('placeholder');
+            const helpIdx = headers.indexOf('help');
+            const validateIdx = headers.indexOf('validate');
+            
+            // Group fields by section
+            const sectionMap = {};
+            
+            for (let i = 1; i < lines.length; i++) {
+              const values = lines[i].split(',').map(v => v.trim());
+              if (values.length < headers.length) continue;
+              
+              const sectionName = sectionIdx >= 0 ? (values[sectionIdx] || 'default') : 'default';
+              if (!sectionMap[sectionName]) {
+                sectionMap[sectionName] = {
+                  id: sectionName.toLowerCase().replace(/\s+/g, '_'),
+                  title: sectionName === 'default' ? 'Default Section' : sectionName,
+                  description: '',
+                  fields: []
+                };
+              }
+              
+              const field = {
+                id: values[idIdx],
+                label: values[labelIdx],
+                type: values[typeIdx]
+              };
+              
+              if (requiredIdx >= 0) {
+                field.required = values[requiredIdx].toLowerCase() === 'true' || values[requiredIdx] === '1';
+              }
+              
+              if (placeholderIdx >= 0 && values[placeholderIdx]) {
+                field.placeholder = values[placeholderIdx];
+              }
+              
+              if (helpIdx >= 0 && values[helpIdx]) {
+                field.help = values[helpIdx];
+              }
+              
+              if (validateIdx >= 0 && values[validateIdx]) {
+                field.validate = values[validateIdx];
+              }
+              
+              sectionMap[sectionName].fields.push(field);
+            }
+            
+            // Add sections to schema
+            this.schema.sections = Object.values(sectionMap);
+            
+            // Set form ID and title if not set
+            if (!this.schema.formId) {
+              this.schema.formId = 'imported_form';
+            }
+            if (!this.schema.title) {
+              this.schema.title = 'Imported Form';
+            }
+            
+            this.$bvModal.hide('csv-modal');
+            this.showAlertMessage(`Imported ${this.schema.sections.reduce((sum, s) => sum + s.fields.length, 0)} fields in ${this.schema.sections.length} sections`, 'success');
+            
+          } catch (error) {
+            console.error('CSV import error:', error);
+            this.showAlertMessage('CSV import failed: ' + error.message, 'danger');
+          }
+        },
+        
+        cancelCSV() {
+          this.csvData = '';
+        },
+        
+        // JSON Import
+        importJSON() {
+          this.jsonData = JSON.stringify(this.schema, null, 2);
+          this.$bvModal.show('json-modal');
+        },
+        
+        processJSON() {
+          try {
+            const imported = JSON.parse(this.jsonData);
+            
+            // Validate basic structure
+            if (!imported.schemaVersion || !imported.formId) {
+              this.showAlertMessage('Invalid schema: missing schemaVersion or formId', 'warning');
+              return;
+            }
+            
+            if (!imported.sections || !Array.isArray(imported.sections)) {
+              this.showAlertMessage('Invalid schema: missing sections array', 'warning');
+              return;
+            }
+            
+            // Replace current schema
+            this.schema = imported;
+            
+            // Ensure actions array exists
+            if (!this.schema.actions) {
+              this.schema.actions = [];
+            }
+            
+            this.$bvModal.hide('json-modal');
+            this.showAlertMessage('Schema imported successfully', 'success');
+            
+          } catch (error) {
+            console.error('JSON import error:', error);
+            this.showAlertMessage('JSON import failed: ' + error.message, 'danger');
+          }
+        },
+        
+        cancelJSON() {
+          this.jsonData = '';
+        },
+        
+        // Export JSON
+        exportJSON() {
+          const json = JSON.stringify(this.schema, null, 2);
+          const blob = new Blob([json], { type: 'application/json' });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = `${this.schema.formId || 'schema'}.json`;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+          this.showAlertMessage('Schema exported', 'success');
+        },
+        
+        // Generate Form
+        async generateForm() {
+          if (!this.canGenerate) {
+            this.showAlertMessage('Please complete form metadata and add at least one section with fields', 'warning');
+            return;
+          }
+          
+          // Validate schema
+          try {
+            this.validateSchema();
+          } catch (error) {
+            this.showAlertMessage('Schema validation failed: ' + error.message, 'danger');
+            return;
+          }
+          
+          // Send schema to Node-RED via uibuilder
+          if (uibuilderInstance && typeof uibuilderInstance.send === 'function') {
+            uibuilderInstance.send({
+              type: 'generate',
+              schema: this.schema
+            });
+            this.showAlertMessage('Schema sent to form generator. Check Node-RED flow for output.', 'info');
+          } else {
+            // Fallback: copy to clipboard
+            const json = JSON.stringify(this.schema, null, 2);
+            if (navigator.clipboard) {
+              await navigator.clipboard.writeText(json);
+              this.showAlertMessage('Schema copied to clipboard. Paste into formgen node.', 'info');
+            } else {
+              this.showAlertMessage('uibuilder not connected. Export JSON and use it manually.', 'warning');
+            }
+          }
+        },
+        
+        validateSchema() {
+          if (!this.schema.formId) {
+            throw new Error('Form ID is required');
+          }
+          if (!this.schema.title) {
+            throw new Error('Form title is required');
+          }
+          if (!this.schema.sections || this.schema.sections.length === 0) {
+            throw new Error('At least one section is required');
+          }
+          
+          this.schema.sections.forEach((section, sIdx) => {
+            if (!section.id) {
+              throw new Error(`Section ${sIdx} missing ID`);
+            }
+            if (!section.fields || section.fields.length === 0) {
+              throw new Error(`Section ${sIdx} (${section.id}) has no fields`);
+            }
+            
+            section.fields.forEach((field, fIdx) => {
+              if (!field.id) {
+                throw new Error(`Section ${sIdx}, field ${fIdx} missing ID`);
+              }
+              if (!field.type) {
+                throw new Error(`Section ${sIdx}, field ${field.id} missing type`);
+              }
+              
+              const validTypes = ['text', 'textarea', 'number', 'select', 'radio', 'checkbox', 'date', 'keyvalue'];
+              if (!validTypes.includes(field.type)) {
+                throw new Error(`Section ${sIdx}, field ${field.id} has invalid type: ${field.type}`);
+              }
+              
+              if (field.type === 'keyvalue') {
+                const mode = field.keyvalueMode || 'pairs';
+                if (mode === 'pairs' && (!field.pairs || !Array.isArray(field.pairs) || field.pairs.length === 0)) {
+                  throw new Error(`Section ${sIdx}, field ${field.id} (keyvalue pairs mode) requires at least one key-value pair`);
+                }
+                if (mode === 'delimiter' && (!field.keyvalueDelimiter || field.keyvalueDelimiter.trim() === '')) {
+                  throw new Error(`Section ${sIdx}, field ${field.id} (keyvalue delimiter mode) requires a delimiter`);
+                }
+              }
+              
+              if ((field.type === 'select' || field.type === 'radio') && 
+                  (!field.options || field.options.length === 0)) {
+                throw new Error(`Section ${sIdx}, field ${field.id} (${field.type}) requires options`);
+              }
+            });
+          });
+        }
+      }
+    });
+  }
+  
+  function setupUibuilderHandlers() {
+    if (!uibuilderInstance || typeof uibuilderInstance.onChange !== 'function') return;
+    
+    uibuilderInstance.onChange('msg', function(msg) {
+      const payload = msg && (msg.payload ?? msg);
+      if (!payload || typeof payload !== 'object') return;
+      
+      // Handle responses from formgen node
+      if (payload.type === 'generated' && app) {
+        app.showAlertMessage(`Form generated successfully! URL: <a href="${payload.url}" target="_blank">${payload.url}</a>`, 'success');
+      } else if (payload.type === 'error' && app) {
+        app.showAlertMessage('Generation failed: ' + (payload.message || 'Unknown error'), 'danger');
+      }
+    });
+  }
+  
+  // Helper function to load saved schemas list (called from outside Vue instance)
+  function loadSavedSchemasList() {
+    if (app && typeof app.loadSavedSchemasList === 'function') {
+      app.loadSavedSchemasList();
+    }
+  }
+  
+})();