npm - @cyprnet/node-red-contrib-uibuilder-formgen - Versions diffs - 0.4.11 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/CHANGELOG.md +33 -0
package/LICENSE +22 -0
package/README.md +58 -0
package/docs/user-guide.html +565 -0
package/examples/formgen-builder/src/index.html +921 -0
package/examples/formgen-builder/src/index.js +1338 -0
package/examples/portalsmith-formgen-example.json +531 -0
package/examples/schema-builder-integration.json +109 -0
package/examples/schemas/Banking/banking_fraud_report.json +102 -0
package/examples/schemas/Banking/banking_kyc_update.json +59 -0
package/examples/schemas/Banking/banking_loan_application.json +113 -0
package/examples/schemas/Banking/banking_new_account.json +98 -0
package/examples/schemas/Banking/banking_wire_transfer_request.json +94 -0
package/examples/schemas/HR/hr_employee_change_form.json +65 -0
package/examples/schemas/HR/hr_exit_interview.json +105 -0
package/examples/schemas/HR/hr_job_application.json +166 -0
package/examples/schemas/HR/hr_onboarding_request.json +140 -0
package/examples/schemas/HR/hr_time_off_request.json +95 -0
package/examples/schemas/HR/hr_training_request.json +70 -0
package/examples/schemas/Healthcare/health_appointment_request.json +103 -0
package/examples/schemas/Healthcare/health_incident_report.json +82 -0
package/examples/schemas/Healthcare/health_lab_order_request.json +72 -0
package/examples/schemas/Healthcare/health_medication_refill.json +72 -0
package/examples/schemas/Healthcare/health_patient_intake.json +113 -0
package/examples/schemas/IT/it_access_request.json +145 -0
package/examples/schemas/IT/it_dhcp_reservation.json +175 -0
package/examples/schemas/IT/it_dns_domain_external.json +192 -0
package/examples/schemas/IT/it_dns_domain_internal.json +171 -0
package/examples/schemas/IT/it_network_change_request.json +126 -0
package/examples/schemas/IT/it_network_request-form.json +299 -0
package/examples/schemas/IT/it_new_hardware_request.json +155 -0
package/examples/schemas/IT/it_password_reset.json +133 -0
package/examples/schemas/IT/it_software_license_request.json +93 -0
package/examples/schemas/IT/it_static_ip_request.json +199 -0
package/examples/schemas/IT/it_subnet_request_form.json +216 -0
package/examples/schemas/Maintenance/maint_checklist.json +176 -0
package/examples/schemas/Maintenance/maint_facility_issue_report.json +127 -0
package/examples/schemas/Maintenance/maint_incident_intake.json +174 -0
package/examples/schemas/Maintenance/maint_inventory_restock.json +79 -0
package/examples/schemas/Maintenance/maint_safety_audit.json +92 -0
package/examples/schemas/Maintenance/maint_vehicle_inspection.json +112 -0
package/examples/schemas/Maintenance/maint_work_order.json +134 -0
package/index.js +12 -0
package/lib/licensing.js +254 -0
package/nodes/portalsmith-license.html +40 -0
package/nodes/portalsmith-license.js +23 -0
package/nodes/uibuilder-formgen.html +261 -0
package/nodes/uibuilder-formgen.js +598 -0
package/package.json +47 -0
package/scripts/normalize_schema_titles.py +77 -0
package/templates/index.html.mustache +541 -0
package/templates/index.js.mustache +1135 -0

package/examples/formgen-builder/src/index.html ADDED Viewed

@@ -0,0 +1,921 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>PortalSmith Schema Builder</title>
+  <!-- Bootstrap 4 CSS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+  <!-- Bootstrap-Vue CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.23.1/dist/bootstrap-vue.min.css">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <style>
+    body {
+      background-color: #f5f5f5;
+      padding: 20px 0;
+    }
+    .builder-container {
+      max-width: 1400px;
+      margin: 0 auto;
+    }
+    .schema-meta {
+      background: white;
+      padding: 1.5rem;
+      border-radius: 0.25rem;
+      margin-bottom: 1.5rem;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .section-card {
+      background: white;
+      border: 1px solid #dee2e6;
+      border-radius: 0.25rem;
+      margin-bottom: 1rem;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .section-header {
+      background: #f8f9fa;
+      padding: 1rem;
+      border-bottom: 1px solid #dee2e6;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .section-body {
+      padding: 1rem;
+    }
+    .field-item {
+      background: #f8f9fa;
+      padding: 0.75rem;
+      margin-bottom: 0.5rem;
+      border-radius: 0.25rem;
+      border-left: 3px solid #007bff;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .field-info {
+      flex: 1;
+    }
+    .field-badges {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
+    .badge {
+      font-size: 0.75rem;
+    }
+    .empty-state {
+      text-align: center;
+      padding: 2rem;
+      color: #6c757d;
+    }
+    .action-bar {
+      background: white;
+      padding: 1rem;
+      border-radius: 0.25rem;
+      margin-top: 1.5rem;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+    .preview-panel {
+      background: white;
+      border: 1px solid #dee2e6;
+      border-radius: 0.25rem;
+      padding: 1rem;
+      margin-top: 1.5rem;
+      max-height: 600px;
+      overflow-y: auto;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div class="container-fluid builder-container">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h1 class="mb-0">
+          <i class="fa fa-wrench"></i> PortalSmith Schema Builder
+        </h1>
+        <div class="d-flex align-items-center">
+          <b-button variant="outline-danger" class="mr-2" @click="newSchema">
+            <i class="fa fa-file"></i> New Schema
+          </b-button>
+          <b-button variant="info" @click="showHelp = true">
+            <i class="fa fa-question-circle"></i> Help
+          </b-button>
+        </div>
+      </div>
+      <!-- Alert Area -->
+      <b-alert
+        v-model="showAlert"
+        :variant="alertVariant"
+        dismissible
+        class="mb-3"
+      >
+        <div v-html="alertMessage"></div>
+      </b-alert>
+      <!-- Schema Metadata -->
+      <div class="schema-meta">
+        <div class="d-flex justify-content-between align-items-center mb-3">
+          <h3 class="mb-0">Form Metadata</h3>
+          <b-button variant="link" size="sm" @click="showFieldHelp('metadata')" class="p-0">
+            <i class="fa fa-info-circle text-info"></i>
+          </b-button>
+        </div>
+        <b-form-row>
+          <b-col md="6">
+            <b-form-group label="Form ID" label-for="formId">
+              <b-form-input
+                id="formId"
+                v-model="schema.formId"
+                placeholder="my_form_id"
+                :state="formIdState"
+              />
+              <small class="form-text text-muted">
+                Unique identifier (alphanumeric, underscores, hyphens only).
+                Used as the form identifier in Node-RED.
+              </small>
+            </b-form-group>
+          </b-col>
+          <b-col md="6">
+            <b-form-group label="Form Title" label-for="title">
+              <b-form-input
+                id="title"
+                v-model="schema.title"
+                placeholder="My Form Title"
+              />
+              <small class="form-text text-muted">Displayed at the top of the generated form</small>
+            </b-form-group>
+          </b-col>
+        </b-form-row>
+        <b-form-group label="Description" label-for="description">
+          <b-form-textarea
+            id="description"
+            v-model="schema.description"
+            placeholder="Optional form description"
+            rows="2"
+          />
+          <small class="form-text text-muted">Optional description shown below the form title</small>
+        </b-form-group>
+      </div>
+      <!-- Sections -->
+      <div class="mb-3">
+        <div class="d-flex justify-content-between align-items-center mb-3">
+          <h3>Sections</h3>
+          <b-button variant="primary" @click="addSection">
+            <i class="fa fa-plus"></i> Add Section
+          </b-button>
+        </div>
+        <div v-if="schema.sections.length === 0" class="empty-state">
+          <i class="fa fa-inbox fa-3x mb-3"></i>
+          <p>No sections yet. Add your first section to get started.</p>
+        </div>
+        <div v-for="(section, sectionIdx) in schema.sections" :key="section.id" class="section-card">
+          <div class="section-header">
+            <div>
+              <strong>{{section.title || 'Untitled Section'}}</strong>
+              <small class="text-muted ml-2">({{section.fields.length}} fields)</small>
+            </div>
+            <div>
+              <b-button variant="outline-primary" size="sm" @click="editSection(sectionIdx)" class="mr-2">
+                <i class="fa fa-edit"></i> Edit
+              </b-button>
+              <b-button variant="outline-success" size="sm" @click="addField(sectionIdx)" class="mr-2">
+                <i class="fa fa-plus"></i> Add Field
+              </b-button>
+              <b-button variant="outline-danger" size="sm" @click="deleteSection(sectionIdx)">
+                <i class="fa fa-trash"></i> Delete
+              </b-button>
+            </div>
+          </div>
+          <div class="section-body">
+            <p v-if="section.description" class="text-muted mb-3">{{section.description}}</p>
+            <div v-if="section.fields.length === 0" class="empty-state">
+              <p class="mb-0">No fields in this section. Add a field to get started.</p>
+            </div>
+            <div v-for="(field, fieldIdx) in section.fields" :key="field.id" class="field-item">
+              <div class="field-info">
+                <strong>{{field.label || field.id}}</strong>
+                <div class="field-badges mt-1">
+                  <b-badge :variant="field.required ? 'danger' : 'secondary'">
+                    {{field.type}}
+                  </b-badge>
+                  <b-badge v-if="field.required" variant="warning">Required</b-badge>
+                  <b-badge v-if="field.validate" variant="info">{{field.validate}}</b-badge>
+                  <small class="text-muted ml-2">{{field.id}}</small>
+                </div>
+              </div>
+              <div>
+                <b-button variant="outline-primary" size="sm" @click="editField(sectionIdx, fieldIdx)" class="mr-2">
+                  <i class="fa fa-edit"></i>
+                </b-button>
+                <b-button variant="outline-danger" size="sm" @click="deleteField(sectionIdx, fieldIdx)">
+                  <i class="fa fa-trash"></i>
+                </b-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Action Bar -->
+      <div class="action-bar">
+        <b-button variant="success" @click="saveSchema" class="mr-2" :disabled="!canSave">
+          <i class="fa fa-save"></i> Save Schema
+        </b-button>
+        <b-button variant="info" @click="loadSchema" class="mr-2">
+          <i class="fa fa-folder-open"></i> Load Schema
+        </b-button>
+        <b-button variant="success" @click="importJSON" class="mr-2">
+          <i class="fa fa-file-import"></i> Import JSON
+        </b-button>
+        <b-button variant="info" @click="importCSV" class="mr-2">
+          <i class="fa fa-file-csv"></i> Import CSV
+        </b-button>
+        <b-button variant="secondary" @click="exportJSON" class="mr-2">
+          <i class="fa fa-file-export"></i> Export JSON
+        </b-button>
+        <b-button variant="primary" @click="generateForm" :disabled="!canGenerate">
+          <i class="fa fa-magic"></i> Generate Form
+        </b-button>
+        <b-button variant="outline-secondary" @click="showHelp = true" class="ml-auto">
+          <i class="fa fa-question-circle"></i> Help
+        </b-button>
+      </div>
+      <!-- JSON Preview (Collapsible) -->
+      <b-card class="mt-3">
+        <div slot="header" class="d-flex justify-content-between align-items-center">
+          <span>JSON Preview</span>
+          <b-button variant="outline-secondary" size="sm" @click="showPreview = !showPreview">
+            {{showPreview ? 'Hide' : 'Show'}}
+          </b-button>
+        </div>
+        <div v-if="showPreview" class="preview-panel">
+          <pre>{{jsonPreview}}</pre>
+        </div>
+      </b-card>
+    </div>
+    <!-- Section Editor Modal -->
+    <b-modal
+      id="section-modal"
+      :title="editingSection !== null ? 'Edit Section' : 'Add Section'"
+      @ok="saveSection"
+      @cancel="cancelEditSection"
+    >
+      <b-form-group label="Section ID" label-for="section-id">
+        <b-form-input
+          id="section-id"
+          v-model="currentSection.id"
+          placeholder="section_id"
+        />
+      </b-form-group>
+      <b-form-group label="Section Title" label-for="section-title">
+        <b-form-input
+          id="section-title"
+          v-model="currentSection.title"
+          placeholder="Section Title"
+        />
+      </b-form-group>
+      <b-form-group label="Description" label-for="section-desc">
+        <b-form-textarea
+          id="section-desc"
+          v-model="currentSection.description"
+          placeholder="Optional description"
+          rows="2"
+        />
+      </b-form-group>
+    </b-modal>
+    <!-- Field Editor Modal -->
+    <b-modal
+      id="field-modal"
+      :title="editingField ? 'Edit Field' : 'Add Field'"
+      size="lg"
+      @ok="saveField"
+      @cancel="cancelEditField"
+    >
+      <b-form-row>
+        <b-col md="6">
+          <b-form-group label="Field ID" label-for="field-id">
+            <b-form-input
+              id="field-id"
+              v-model="currentField.id"
+              placeholder="field_id"
+              :state="fieldIdState"
+            />
+            <small class="form-text text-muted">Unique identifier</small>
+          </b-form-group>
+        </b-col>
+        <b-col md="6">
+          <b-form-group label="Field Label" label-for="field-label">
+            <b-form-input
+              id="field-label"
+              v-model="currentField.label"
+              placeholder="Field Label"
+            />
+          </b-form-group>
+        </b-col>
+      </b-form-row>
+      <b-form-row>
+        <b-col md="6">
+          <b-form-group label="Field Type" label-for="field-type">
+            <b-form-select
+              id="field-type"
+              v-model="currentField.type"
+              :options="fieldTypes"
+              @change="onFieldTypeChange"
+            />
+            <small class="form-text text-muted">
+              <strong>Text:</strong> Single-line input (can be email, tel, url, password)<br>
+              <strong>Textarea:</strong> Multi-line text input<br>
+              <strong>Number:</strong> Numeric input with min/max/step<br>
+              <strong>Select:</strong> Dropdown menu with options<br>
+              <strong>Radio:</strong> Radio button group with options<br>
+              <strong>Checkbox:</strong> Boolean checkbox<br>
+              <strong>Date:</strong> Date picker
+            </small>
+          </b-form-group>
+        </b-col>
+        <b-col md="6">
+          <b-form-group label="Input Type" label-for="input-type" v-if="currentField.type === 'text'">
+            <b-form-select
+              id="input-type"
+              v-model="currentField.inputType"
+              :options="inputTypes"
+            />
+          </b-form-group>
+        </b-col>
+      </b-form-row>
+      <b-form-row>
+        <b-col md="6">
+          <b-form-checkbox v-model="currentField.required">
+            Required Field
+          </b-form-checkbox>
+        </b-col>
+        <b-col md="6">
+          <b-form-group label="Default Value" label-for="default-value">
+            <b-form-input
+              id="default-value"
+              v-model="currentField.defaultValue"
+              :type="currentField.type === 'number' ? 'number' : 'text'"
+              placeholder="Default value"
+            />
+          </b-form-group>
+        </b-col>
+      </b-form-row>
+      <b-form-group label="Placeholder" label-for="placeholder">
+        <b-form-input
+          id="placeholder"
+          v-model="currentField.placeholder"
+          placeholder="Placeholder text"
+        />
+      </b-form-group>
+      <b-form-group label="Help Text" label-for="help">
+        <b-form-textarea
+          id="help"
+          v-model="currentField.help"
+          placeholder="Help text shown below field"
+          rows="2"
+        />
+      </b-form-group>
+      <b-form-row v-if="currentField.type === 'textarea'">
+        <b-col md="6">
+          <b-form-group label="Rows" label-for="rows">
+            <b-form-input
+              id="rows"
+              v-model.number="currentField.rows"
+              type="number"
+              min="1"
+              max="20"
+            />
+          </b-form-group>
+        </b-col>
+      </b-form-row>
+      <b-form-row v-if="currentField.type === 'number'">
+        <b-col md="4">
+          <b-form-group label="Min" label-for="min">
+            <b-form-input
+              id="min"
+              v-model.number="currentField.min"
+              type="number"
+            />
+          </b-form-group>
+        </b-col>
+        <b-col md="4">
+          <b-form-group label="Max" label-for="max">
+            <b-form-input
+              id="max"
+              v-model.number="currentField.max"
+              type="number"
+            />
+          </b-form-group>
+        </b-col>
+        <b-col md="4">
+          <b-form-group label="Step" label-for="step">
+            <b-form-input
+              id="step"
+              v-model.number="currentField.step"
+              type="number"
+            />
+          </b-form-group>
+        </b-col>
+      </b-form-row>
+      <b-form-group
+        v-if="currentField.type === 'select' || currentField.type === 'radio'"
+        label="Options"
+        label-for="options"
+      >
+        <small class="form-text text-muted mb-2">
+          <strong>Required for Select/Radio fields.</strong> Each option needs a <strong>value</strong> (stored data) and <strong>text</strong> (display label).
+          For a blank/default option, use empty value with text like "Select...".
+        </small>
+        <div v-if="currentField.options.length === 0" class="alert alert-warning mb-2">
+          <i class="fa fa-exclamation-triangle"></i> No options defined. Add at least one option for this field to work.
+        </div>
+        <div v-for="(option, optIdx) in currentField.options" :key="'option-' + optIdx" class="mb-3 border rounded p-3 bg-light">
+          <div class="d-flex justify-content-between align-items-center mb-2">
+            <small class="text-muted font-weight-bold">Option {{optIdx + 1}}</small>
+            <b-button variant="outline-danger" size="sm" @click="removeOption(optIdx)" title="Remove this option">
+              <i class="fa fa-trash"></i> Remove
+            </b-button>
+          </div>
+          <b-form-row>
+            <b-col md="5">
+              <b-form-group label="Value" :label-for="'opt-value-' + optIdx" label-size="sm" class="mb-2">
+                <b-form-input
+                  :id="'opt-value-' + optIdx"
+                  v-model="option.value"
+                  placeholder="e.g., 'static' or 'option1'"
+                  @paste="handleOptionPaste($event, optIdx, 'value')"
+                />
+                <small class="form-text text-muted">The stored value (what gets saved)</small>
+              </b-form-group>
+            </b-col>
+            <b-col md="7">
+              <b-form-group label="Display Text" :label-for="'opt-text-' + optIdx" label-size="sm" class="mb-2">
+                <b-form-input
+                  :id="'opt-text-' + optIdx"
+                  v-model="option.text"
+                  placeholder="e.g., 'Static IP' or 'Option 1'"
+                  @paste="handleOptionPaste($event, optIdx, 'text')"
+                />
+                <small class="form-text text-muted">What users see in the dropdown</small>
+              </b-form-group>
+            </b-col>
+          </b-form-row>
+        </div>
+        <div class="d-flex justify-content-between align-items-center mt-2">
+          <b-button variant="outline-primary" size="sm" @click="addOption">
+            <i class="fa fa-plus"></i> Add Option
+          </b-button>
+          <b-button variant="outline-info" size="sm" @click="showBulkOptions = !showBulkOptions">
+            <i class="fa fa-paste"></i> Bulk Add
+          </b-button>
+        </div>
+        <div v-if="showBulkOptions" class="mt-2 p-2 border rounded bg-light">
+          <b-form-group label="Paste Options (one per line)" label-for="bulk-options" class="mb-2">
+            <b-form-textarea
+              id="bulk-options"
+              v-model="bulkOptionsText"
+              placeholder='value="static" | text="Static IP"&#10;value="dhcp" | text="DHCP"&#10;value="reserved" | text="Reserved"'
+              rows="5"
+            />
+            <small class="form-text text-muted">
+              Format: <code>value="xxx" | text="YYY"</code> (one per line) or just <code>Option 1</code> (will use same for value and text)
+            </small>
+          </b-form-group>
+          <b-button variant="primary" size="sm" @click="parseBulkOptions" class="mr-2">
+            <i class="fa fa-check"></i> Parse & Add
+          </b-button>
+          <b-button variant="outline-secondary" size="sm" @click="showBulkOptions = false; bulkOptionsText = ''">
+            Cancel
+          </b-button>
+        </div>
+        <div class="mt-2">
+          <small class="text-muted">
+            <strong>Example:</strong> value="developer" | text="Software Developer"
+            (user sees "Software Developer", form stores "developer")
+          </small>
+        </div>
+      </b-form-group>
+      <!-- Key-Value Pairs Editor -->
+      <b-form-group
+        v-if="currentField.type === 'keyvalue'"
+        label="Key-Value Configuration"
+        label-for="keyvalue-config"
+      >
+        <b-form-row class="mb-3">
+          <b-col md="6">
+            <b-form-group label="Input Mode" label-for="keyvalue-mode">
+              <b-form-select
+                id="keyvalue-mode"
+                v-model="currentField.keyvalueMode"
+                :options="[
+                  { value: 'pairs', text: 'Individual Pairs' },
+                  { value: 'delimiter', text: 'Delimiter Text (field=value)' }
+                ]"
+                @change="onKeyValueModeChange"
+              />
+              <small class="form-text text-muted">
+                <strong>Individual Pairs:</strong> Users add/edit pairs one at a time<br>
+                <strong>Delimiter Text:</strong> Users enter "key=value" format in a text area
+              </small>
+            </b-form-group>
+          </b-col>
+          <b-col md="6" v-if="currentField.keyvalueMode === 'delimiter'">
+            <b-form-group label="Delimiter" label-for="keyvalue-delimiter">
+              <b-form-input
+                id="keyvalue-delimiter"
+                v-model="currentField.keyvalueDelimiter"
+                placeholder="="
+                maxlength="5"
+              />
+              <small class="form-text text-muted">
+                Character(s) that separate key from value (e.g., "=", ":", "|")
+              </small>
+            </b-form-group>
+          </b-col>
+        </b-form-row>
+        <!-- Individual Pairs Mode -->
+        <div v-if="!currentField.keyvalueMode || currentField.keyvalueMode === 'pairs'">
+          <small class="form-text text-muted mb-2">
+            <strong>Required for Key-Value fields.</strong> Each pair has a <strong>key</strong> (field name) and <strong>value</strong> (field value).
+            Users can add multiple pairs dynamically in the form.
+          </small>
+          <div v-if="currentField.pairs.length === 0" class="alert alert-warning mb-2">
+            <i class="fa fa-exclamation-triangle"></i> No pairs defined. Add at least one pair for this field to work.
+          </div>
+          <div v-for="(pair, pairIdx) in currentField.pairs" :key="'pair-' + pairIdx" class="mb-3 border rounded p-3 bg-light">
+            <div class="d-flex justify-content-between align-items-center mb-2">
+              <small class="text-muted font-weight-bold">Pair {{pairIdx + 1}}</small>
+              <b-button variant="outline-danger" size="sm" @click="removePair(pairIdx)" title="Remove this pair">
+                <i class="fa fa-trash"></i> Remove
+              </b-button>
+            </div>
+            <b-form-row>
+              <b-col md="5">
+                <b-form-group label="Key" :label-for="'pair-key-' + pairIdx" label-size="sm" class="mb-2">
+                  <b-form-input
+                    :id="'pair-key-' + pairIdx"
+                    v-model="pair.key"
+                    placeholder="e.g., 'name' or 'ip_address'"
+                  />
+                  <small class="form-text text-muted">The key/field name</small>
+                </b-form-group>
+              </b-col>
+              <b-col md="7">
+                <b-form-group label="Value" :label-for="'pair-value-' + pairIdx" label-size="sm" class="mb-2">
+                  <b-form-input
+                    :id="'pair-value-' + pairIdx"
+                    v-model="pair.value"
+                    placeholder="e.g., 'John Doe' or '192.168.1.1'"
+                  />
+                  <small class="form-text text-muted">The value for this key</small>
+                </b-form-group>
+              </b-col>
+            </b-form-row>
+          </div>
+          <b-button variant="outline-primary" size="sm" @click="addPair">
+            <i class="fa fa-plus"></i> Add Pair
+          </b-button>
+          <div class="mt-2">
+            <small class="text-muted">
+              <strong>Note:</strong> These are default/example pairs. Users can add, edit, and remove pairs in the generated form.
+            </small>
+          </div>
+        </div>
+        <!-- Delimiter Mode -->
+        <div v-if="currentField.keyvalueMode === 'delimiter'" class="mt-3">
+          <b-alert variant="info" show class="mb-3">
+            <strong>Delimiter Text Mode</strong><br>
+            Users will enter key-value pairs in a text area, one per line, using the format:
+            <code>key{{currentField.keyvalueDelimiter || '='}}value</code>
+          </b-alert>
+          <b-alert variant="success" show class="mb-3">
+            <i class="fa fa-info-circle"></i> <strong>Preview:</strong> In the generated form, users will see an editable textarea where they can enter key-value pairs, one per line, using the format: <code>key{{currentField.keyvalueDelimiter || '='}}value</code>
+          </b-alert>
+          <div class="border rounded p-3 bg-light mt-3">
+            <strong>Example Format:</strong>
+            <pre class="mb-0 mt-2 bg-white p-2 border rounded"><code>name{{currentField.keyvalueDelimiter || '='}}John Doe
+ip_address{{currentField.keyvalueDelimiter || '='}}192.168.1.1
+email{{currentField.keyvalueDelimiter || '='}}john@example.com</code></pre>
+          </div>
+          <small class="form-text text-muted mt-2">
+            <strong>Note:</strong> The delimiter field above controls what character separates the key from the value.
+            Users can add as many pairs as needed in the generated form.
+          </small>
+        </div>
+      </b-form-group>
+      <b-form-group label="Validation" label-for="validate">
+        <b-form-select
+          id="validate"
+          v-model="currentField.validate"
+          :options="validationTypes"
+        />
+        <b-form-input
+          v-if="currentField.validate === 'regex'"
+          v-model="currentField.validatePattern"
+          placeholder="Regex pattern (e.g., ^[A-Z]{2}\\d{4}$)"
+          class="mt-2"
+        />
+        <small class="form-text text-muted">
+          <strong>Email:</strong> Validates email format (user@domain.com)<br>
+          <strong>Phone:</strong> Validates phone number format (10+ digits)<br>
+          <strong>Regex:</strong> Custom pattern validation (e.g., ^[A-Z]{2}\\d{4}$ for codes like AB1234)
+        </small>
+      </b-form-group>
+      <b-form-group label="Validation Message" label-for="validate-msg" v-if="currentField.validate">
+        <b-form-input
+          id="validate-msg"
+          v-model="currentField.validateMessage"
+          placeholder="Custom error message"
+        />
+      </b-form-group>
+    </b-modal>
+    <!-- CSV Import Modal -->
+    <b-modal
+      id="csv-modal"
+      title="Import from CSV"
+      size="lg"
+      @ok="processCSV"
+      @cancel="cancelCSV"
+    >
+      <b-form-group label="CSV Data" label-for="csv-data">
+        <b-form-textarea
+          id="csv-data"
+          v-model="csvData"
+          rows="10"
+          placeholder="Paste CSV data here. First row should be headers: id,label,type,required,section"
+        />
+        <small class="form-text text-muted">
+          Expected columns: id, label, type, required (true/false), section (optional), placeholder, help, validate
+        </small>
+      </b-form-group>
+      <b-alert variant="info" show>
+        <strong>CSV Format:</strong><br>
+        id,label,type,required,section,placeholder<br>
+        fullName,Full Name,text,true,personal,John Doe<br>
+        email,Email Address,text,true,personal,john@example.com
+      </b-alert>
+    </b-modal>
+    <!-- JSON Import Modal -->
+    <b-modal
+      id="json-modal"
+      title="Import from JSON"
+      size="lg"
+      @ok="processJSON"
+      @cancel="cancelJSON"
+    >
+      <b-form-group label="JSON Schema" label-for="json-data">
+        <b-form-textarea
+          id="json-data"
+          v-model="jsonData"
+          rows="15"
+          placeholder="Paste JSON schema here"
+        />
+        <small class="form-text text-muted">
+          Paste a complete schema JSON. Must include schemaVersion, formId, title, and sections array.
+        </small>
+      </b-form-group>
+    </b-modal>
+    <!-- Save Schema Modal -->
+    <b-modal
+      id="save-modal"
+      title="Save Schema"
+      @ok="handleSaveOk"
+      @cancel="cancelSave"
+      @hide="cancelSave"
+      ok-title="Save"
+      cancel-title="Cancel"
+    >
+      <b-form-group label="Schema Name" label-for="save-name">
+        <b-form-input
+          id="save-name"
+          v-model="saveName"
+          placeholder="My Schema"
+        />
+        <small class="form-text text-muted">
+          Enter a name for this schema. It will be saved in your browser's local storage.
+        </small>
+      </b-form-group>
+      <b-alert variant="info" show>
+        <strong>Saved Schemas:</strong>
+        <ul class="mb-0 mt-2" v-if="savedSchemas.length > 0">
+          <li v-for="(saved, idx) in savedSchemas" :key="idx">
+            {{saved.name}} <small class="text-muted">({{saved.date}})</small>
+            <b-button variant="link" size="sm" @click="deleteSavedSchema(idx)" class="p-0 ml-2 text-danger">
+              <i class="fa fa-trash"></i>
+            </b-button>
+          </li>
+        </ul>
+        <p v-else class="mb-0">No saved schemas yet.</p>
+      </b-alert>
+    </b-modal>
+    <!-- Load Schema Modal -->
+    <b-modal
+      id="load-modal"
+      title="Load Saved Schema"
+      @ok="handleLoadOk"
+      @cancel="cancelLoad"
+      @hide="cancelLoad"
+      ok-title="Load"
+      cancel-title="Cancel"
+    >
+      <b-form-group label="Select Schema" label-for="load-select" v-if="savedSchemas.length > 0">
+        <b-form-select
+          id="load-select"
+          v-model="selectedLoadSchema"
+          :options="savedSchemaOptions"
+        />
+        <small class="form-text text-muted mt-2">
+          Selected schema will replace your current work. Make sure to save first if needed.
+        </small>
+      </b-form-group>
+      <b-alert variant="warning" show v-else>
+        No saved schemas found. Save a schema first to load it later.
+      </b-alert>
+    </b-modal>
+    <!-- Help Modal -->
+    <b-modal
+      id="help-modal"
+      title="Schema Builder Help"
+      size="lg"
+      v-model="showHelp"
+      @hide="showHelp = false"
+      ok-only
+      ok-title="Got it!"
+    >
+      <div>
+        <h4>Getting Started</h4>
+        <ol>
+          <li><strong>Set Form Metadata:</strong> Enter a unique Form ID (alphanumeric, underscores, hyphens), title, and optional description.</li>
+          <li><strong>Add Sections:</strong> Click "Add Section" to create form sections. Each section groups related fields.</li>
+          <li><strong>Add Fields:</strong> Click "Add Field" within a section to add form fields. Configure field properties in the editor.</li>
+          <li><strong>Generate Form:</strong> Click "Generate Form" to send the schema to Node-RED and create the form.</li>
+        </ol>
+        <h4 class="mt-4">Field Types</h4>
+        <ul>
+          <li><strong>Text:</strong> Single-line text input. Can be configured as email, tel, url, or password via Input Type.</li>
+          <li><strong>Textarea:</strong> Multi-line text input. Set number of rows (default: 3).</li>
+          <li><strong>Number:</strong> Numeric input. Set min, max, and step values.</li>
+          <li><strong>Select:</strong> Dropdown menu. Requires options (value/text pairs). See "Options" section below.</li>
+          <li><strong>Radio:</strong> Radio button group. Requires options (value/text pairs). See "Options" section below.</li>
+          <li><strong>Checkbox:</strong> Boolean checkbox. Default value: false.</li>
+          <li><strong>Date:</strong> HTML5 date picker.</li>
+        </ul>
+        <h4 class="mt-4">Field Properties</h4>
+        <ul>
+          <li><strong>Field ID:</strong> Unique identifier within the section (alphanumeric, underscores, hyphens). Used as the data key.</li>
+          <li><strong>Label:</strong> Display label shown to users.</li>
+          <li><strong>Required:</strong> Mark field as required for form validation.</li>
+          <li><strong>Placeholder:</strong> Hint text shown in empty fields.</li>
+          <li><strong>Help Text:</strong> Additional guidance shown below the field.</li>
+          <li><strong>Default Value:</strong> Pre-filled value when form loads.</li>
+          <li><strong>Validation:</strong> Email, phone, or custom regex pattern validation.</li>
+        </ul>
+        <h4 class="mt-4">Options for Select/Radio Fields</h4>
+        <p>Select and Radio fields require <strong>options</strong> to be defined. Each option has two parts:</p>
+        <ul>
+          <li><strong>Value:</strong> The actual data stored when this option is selected (e.g., "developer", "option1", "")</li>
+          <li><strong>Text:</strong> The label displayed to users (e.g., "Software Developer", "Option 1", "Select...")</li>
+        </ul>
+        <p><strong>How to add options:</strong></p>
+        <ol>
+          <li>Select field type "Select" or "Radio"</li>
+          <li>The Options section will appear in the field editor</li>
+          <li>Click "Add Option" to add a new option row</li>
+          <li>Fill in the <strong>value</strong> (what gets stored) and <strong>text</strong> (what users see)</li>
+          <li>Add as many options as needed</li>
+          <li>Remove options using the X button</li>
+        </ol>
+        <p><strong>Example:</strong></p>
+        <pre class="bg-light p-2 rounded">Value: "developer"  |  Text: "Software Developer"
+Value: "designer"   |  Text: "UI/UX Designer"
+Value: ""           |  Text: "Select a position..."  (blank/default option)</pre>
+        <p><strong>Note:</strong> For a blank/default option (like "Select..."), use an empty value with descriptive text.</p>
+        <h4 class="mt-4">CSV Import Format</h4>
+        <p>CSV files should have the following columns:</p>
+        <ul>
+          <li><strong>Required:</strong> id, label, type</li>
+          <li><strong>Optional:</strong> required (true/false), section (groups fields), placeholder, help, validate</li>
+        </ul>
+        <p><strong>Example:</strong></p>
+        <pre class="bg-light p-2 rounded">id,label,type,required,section,placeholder,help,validate
+fullName,Full Name,text,true,personal,John Doe,Enter legal name,
+email,Email Address,text,true,personal,john@example.com,,email
+phone,Phone Number,text,true,personal,+1 555-1234,Include country code,phone</pre>
+        <h4 class="mt-4">JSON Schema Structure</h4>
+        <p>Schemas must follow this structure:</p>
+        <pre class="bg-light p-2 rounded">{
+  "schemaVersion": "1.0",
+  "formId": "my_form",
+  "title": "My Form",
+  "description": "Optional description",
+  "sections": [
+    {
+      "id": "section1",
+      "title": "Section Title",
+      "description": "Optional",
+      "fields": [
+        {
+          "id": "field1",
+          "label": "Field Label",
+          "type": "text",
+          "required": true
+        }
+      ]
+    }
+  ],
+  "actions": []
+}</pre>
+        <h4 class="mt-4">Validation Rules</h4>
+        <ul>
+          <li><strong>Form ID:</strong> Must be unique, alphanumeric with underscores/hyphens only</li>
+          <li><strong>Section ID:</strong> Must be unique within the form</li>
+          <li><strong>Field ID:</strong> Must be unique within its section</li>
+          <li><strong>Select/Radio:</strong> Must have at least one option defined</li>
+          <li><strong>Required Fields:</strong> Will be validated before form submission</li>
+        </ul>
+        <h4 class="mt-4">Tips</h4>
+        <ul>
+          <li>Use descriptive section titles to organize related fields</li>
+          <li>Add help text to guide users on expected input formats</li>
+          <li>Use validation (email, phone, regex) to ensure data quality</li>
+          <li>Export JSON to save your schema for reuse</li>
+          <li>Import existing schemas to modify or use as templates</li>
+          <li>Check the JSON Preview to see the final schema structure</li>
+        </ul>
+        <h4 class="mt-4">Integration</h4>
+        <p>After clicking "Generate Form", the schema is sent to Node-RED. Connect your flow:</p>
+        <ol>
+          <li>Builder uibuilder node → Switch node (route by type: 'generate')</li>
+          <li>Switch → Function node (prepare message for formgen node)</li>
+          <li>Function → uibuilder-formgen node</li>
+          <li>formgen node → Builder uibuilder node (for success response)</li>
+        </ol>
+        <p>See <code>examples/schema-builder-integration.json</code> for a complete example flow.</p>
+      </div>
+    </b-modal>
+  </div>
+  <!-- jQuery (required for Bootstrap) -->
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+  <!-- Vue 2 -->
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
+  <!-- Bootstrap 4 JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
+  <!-- Bootstrap-Vue JS -->
+  <script src="https://unpkg.com/bootstrap-vue@2.23.1/dist/bootstrap-vue.min.js"></script>
+  <!-- uibuilder client script -->
+  <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
+  <!-- Builder Logic -->
+  <script defer src="./index.js"></script>
+</body>
+</html>