@cyprnet/node-red-contrib-uibuilder-formgen 0.5.4 → 0.5.6

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this package will be documented in this file.
 
+## 0.5.6
+
+- Schema Builder: fixed saved-schema **load/delete selection** (was swapped due to index vs sorted list mismatch).
+
+## 0.5.5
+
+- Dark mode: improved **result table readability** (light table background + black text).
+
 ## 0.5.4
 
 - Templates: reduced header-to-form spacing when using larger custom logos.

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

@@ -796,9 +796,9 @@ email{{currentField.keyvalueDelimiter || '='}}john@example.com</code></pre>
       <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">
+          <li v-for="(saved, idx) in savedSchemas" :key="saved.name || 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">
+            <b-button variant="link" size="sm" @click="deleteSavedSchema(saved.name)" class="p-0 ml-2 text-danger">
               <i class="fa fa-trash"></i>
             </b-button>
           </li>

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

@@ -173,7 +173,8 @@
         
         savedSchemaOptions() {
           return this.savedSchemas.map((s, idx) => ({
-            value: idx,
+            // Use stable key (name) rather than index so sorting doesn't break selection
+            value: s.name,
             text: `${s.name} (${s.date})`
           }));
         },
@@ -1317,13 +1318,15 @@
               this.showAlertMessage('Failed to read saved schemas', 'danger');
               return;
             }
-            
-            if (this.selectedLoadSchema >= saved.length) {
-              this.showAlertMessage('Selected schema index is invalid', 'danger');
+
+            // Selected value is the schema name (stable), not an array index
+            const selectedName = String(this.selectedLoadSchema || "").trim();
+            if (!selectedName) {
+              this.showAlertMessage('Please select a schema to load', 'warning');
               return;
             }
-            
-            const savedItem = saved[this.selectedLoadSchema];
+
+            const savedItem = saved.find(s => String(s && s.name ? s.name : "") === selectedName);
             if (!savedItem || !savedItem.schema) {
               this.showAlertMessage('Selected schema is invalid or corrupted', 'danger');
               return;
@@ -1364,10 +1367,17 @@
           this.selectedLoadSchema = null;
         },
         
-        deleteSavedSchema(idx) {
+        deleteSavedSchema(name) {
+          const schemaName = String(name || "").trim();
+          if (!schemaName) return;
           if (confirm('Delete this saved schema?')) {
             try {
               const saved = JSON.parse(localStorage.getItem('portalsmith:savedSchemas') || '[]');
+              const idx = saved.findIndex(s => String(s && s.name ? s.name : "") === schemaName);
+              if (idx < 0) {
+                this.showAlertMessage('Schema not found', 'warning');
+                return;
+              }
               saved.splice(idx, 1);
               localStorage.setItem('portalsmith:savedSchemas', JSON.stringify(saved));
               this.loadSavedSchemasList();

package/nodes/uibuilder-formgen-v3.js

@@ -455,7 +455,7 @@ module.exports = function(RED) {
         await fs.writeJson(targetSchema, schema, { spaces: 2 });
 
         const runtimeData = {
-          generatorVersion: "0.5.4",
+          generatorVersion: "0.5.5",
           generatorNode: "uibuilder-formgen-v3",
           timestamp: new Date().toISOString(),
           instanceName: instanceName,

package/nodes/uibuilder-formgen.js

@@ -484,7 +484,7 @@ module.exports = function(RED) {
 
         // Write runtime metadata
         const runtimeData = {
-          generatorVersion: "0.5.4",
+          generatorVersion: "0.5.5",
           timestamp: new Date().toISOString(),
           instanceName: instanceName,
           storageMode: storageMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyprnet/node-red-contrib-uibuilder-formgen",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "PortalSmith: Generate schema-driven uibuilder form portals from JSON",
   "keywords": [
     "node-red",

package/templates/index.html.mustache

@@ -101,6 +101,24 @@
       border-color: var(--ps-border) !important;
     }
 
+    /* Dark mode readability: force result tables to light background + black text */
+    html[data-theme="dark"] .table,
+    html[data-theme="dark"] .table th,
+    html[data-theme="dark"] .table td {
+      background-color: #ffffff !important;
+      color: #000000 !important;
+    }
+    html[data-theme="dark"] .table thead th {
+      background-color: #f2f2f2 !important;
+      color: #000000 !important;
+    }
+    html[data-theme="dark"] .table-bordered,
+    html[data-theme="dark"] .table th,
+    html[data-theme="dark"] .table td,
+    html[data-theme="dark"] .table thead th {
+      border-color: rgba(0,0,0,0.15) !important;
+    }
+
     .form-control,
     .custom-select {
       background-color: var(--ps-input-bg);

package/templates/index.v3.html.mustache

@@ -86,6 +86,24 @@
       border-color: var(--ps-border) !important;
     }
 
+    /* Dark mode readability: force result tables to light background + black text */
+    html[data-theme="dark"] .table,
+    html[data-theme="dark"] .table th,
+    html[data-theme="dark"] .table td {
+      background-color: #ffffff !important;
+      color: #000000 !important;
+    }
+    html[data-theme="dark"] .table thead th {
+      background-color: #f2f2f2 !important;
+      color: #000000 !important;
+    }
+    html[data-theme="dark"] .table-bordered,
+    html[data-theme="dark"] .table th,
+    html[data-theme="dark"] .table td,
+    html[data-theme="dark"] .table thead th {
+      border-color: rgba(0,0,0,0.15) !important;
+    }
+
     .form-control,
     .form-select {
       background-color: var(--ps-input-bg);