domma-cms 0.2.1 → 0.3.0

package/plugins/example-analytics/stats.json

@@ -1,15 +1,19 @@
 {
-  "/": 31,
-  "/about": 28,
-  "/blog": 11,
-  "/contact": 10,
-  "/resources/typography": 3,
-  "/resources": 2,
-  "/resources/shortcodes": 5,
-  "/resources/cards": 1,
-  "/resources/interactive": 12,
-  "/resources/grid": 4,
+  "/": 64,
+  "/about": 50,
+  "/blog": 21,
+  "/contact": 22,
+  "/resources/typography": 4,
+  "/resources": 4,
+  "/resources/shortcodes": 6,
+  "/resources/cards": 3,
+  "/resources/interactive": 13,
+  "/resources/grid": 5,
   "/forms": 14,
-  "/resources/effects": 3,
-  "/blog/hello-world": 14
+  "/resources/effects": 6,
+  "/blog/hello-world": 19,
+  "/feedback": 10,
+  "/resources/dependencies": 1,
+  "/resources/components": 1,
+  "/gdpr": 1
 }

package/plugins/form-builder/admin/templates/form-editor.html

@@ -13,159 +13,187 @@
     </div>
 </div>
 
-<div class="row">
-    <!-- Left column: metadata + fields -->
-    <div class="col-8">
-        <div class="card mb-4">
-            <div class="card-header"><h2>Form Details</h2></div>
-            <div class="card-body">
-                <div class="row mb-3">
-                    <div class="col-7">
-                        <label class="form-label">Title</label>
-                        <input id="field-title" type="text" class="form-input" placeholder="My Form">
-                    </div>
-                    <div class="col-5">
-                        <label class="form-label">Slug</label>
-                        <input id="field-slug" type="text" class="form-input" placeholder="my-form">
-                        <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Used in embed: <code>data-form="slug"</code></p>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col">
-                        <label class="form-label">Description</label>
-                        <textarea id="field-description" class="form-input" rows="2" placeholder="Optional form description..."></textarea>
-                    </div>
-                </div>
+<div class="tabs" id="editor-tabs">
+  <div class="tab-list">
+    <button class="tab-item active">Fields</button>
+    <button class="tab-item">Form Details</button>
+    <button class="tab-item">Settings</button>
+    <button class="tab-item">Actions</button>
+  </div>
+  <div class="tab-content">
+
+    <!-- Tab 1: Fields -->
+    <div class="tab-panel active">
+      <div class="card mb-4">
+        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+          <h2>Fields</h2>
+          <div id="add-element-dropdown" style="position:relative;">
+            <button id="add-element-btn" class="btn btn-ghost btn-sm" type="button">
+              <span data-icon="plus"></span> Add <span
+                style="font-size:.65rem;opacity:.6;margin-left:.1rem;">▾</span>
+            </button>
+            <div id="add-element-menu"
+                 style="display:none;position:absolute;right:0;top:calc(100% + .2rem);background:var(--card-bg,#1e1e2e);border:1px solid var(--border-color,#333);border-radius:6px;min-width:140px;z-index:100;box-shadow:0 4px 16px rgba(0,0,0,.3);overflow:hidden;">
+              <button id="add-field-btn" type="button"
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--border-color,#333);">
+                Field
+              </button>
+              <button id="add-spacer-btn" type="button"
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--border-color,#333);">
+                Spacer
+              </button>
+              <button id="add-page-break-btn" type="button"
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;">
+                Page Break
+              </button>
             </div>
+          </div>
         </div>
+        <div class="card-body" style="padding:0;">
+          <div id="fields-list" style="padding:1rem;">
+            <p class="text-muted" id="fields-empty-msg" style="text-align:center;padding:2rem 0;">No fields yet. Click
+              "Add Field" to get started.</p>
+          </div>
+        </div>
+      </div>
 
-        <div class="card mb-4">
-            <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
-                <h2>Fields</h2>
-              <div id="add-element-dropdown" style="position:relative;">
-                <button id="add-element-btn" class="btn btn-ghost btn-sm" type="button">
-                  <span data-icon="plus"></span> Add <span
-                    style="font-size:.65rem;opacity:.6;margin-left:.1rem;">▾</span>
-                    </button>
-                <div id="add-element-menu"
-                     style="display:none;position:absolute;right:0;top:calc(100% + .2rem);background:var(--card-bg,#1e1e2e);border:1px solid var(--border-color,#333);border-radius:6px;min-width:140px;z-index:100;box-shadow:0 4px 16px rgba(0,0,0,.3);overflow:hidden;">
-                  <button id="add-field-btn" type="button"
-                          style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--border-color,#333);">
-                    Field
-                  </button>
-                  <button id="add-spacer-btn" type="button"
-                          style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--border-color,#333);">
-                    Spacer
-                  </button>
-                  <button id="add-page-break-btn" type="button"
-                          style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;">
-                    Page Break
-                  </button>
-                </div>
-                </div>
-            </div>
-            <div class="card-body" style="padding:0;">
-                <div id="fields-list" style="padding:1rem;">
-                    <p class="text-muted" id="fields-empty-msg" style="text-align:center;padding:2rem 0;">No fields yet. Click "Add Field" to get started.</p>
-                </div>
-            </div>
+      <div class="card mb-4" id="preview-card" style="display:none;">
+        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+          <h2><span data-icon="eye"></span> Preview</h2>
+          <span id="preview-test-badge"
+                style="display:none;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:rgba(99,102,241,.15);color:var(--primary,#6366f1);">Test Mode — submissions are stored</span>
+        </div>
+        <div class="card-body">
+          <div id="preview-container"></div>
+          <div id="preview-test-result"
+               style="display:none;margin-top:.75rem;padding:.6rem .9rem;border-radius:6px;font-size:.9rem;"></div>
         </div>
+      </div>
+    </div>
 
-        <div class="card mb-4" id="preview-card" style="display:none;">
-          <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
-            <h2><span data-icon="eye"></span> Preview</h2>
-            <span id="preview-test-badge"
-                  style="display:none;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:rgba(99,102,241,.15);color:var(--primary,#6366f1);">Test Mode — submissions are stored</span>
+    <!-- Tab 2: Form Details -->
+    <div class="tab-panel">
+      <div class="card mb-4">
+        <div class="card-header"><h2>Form Details</h2></div>
+        <div class="card-body">
+          <div class="row mb-3">
+            <div class="col-7">
+              <label class="form-label">Title</label>
+              <input id="field-title" type="text" class="form-input" placeholder="My Form">
+            </div>
+            <div class="col-5">
+              <label class="form-label">Slug</label>
+              <input id="field-slug" type="text" class="form-input" placeholder="my-form">
+              <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Used in embed: <code>data-form="slug"</code>
+              </p>
+            </div>
           </div>
-            <div class="card-body">
-                <div id="preview-container"></div>
-              <div id="preview-test-result"
-                   style="display:none;margin-top:.75rem;padding:.6rem .9rem;border-radius:6px;font-size:.9rem;"></div>
+          <div class="row">
+            <div class="col">
+              <label class="form-label">Description</label>
+              <textarea id="field-description" class="form-input" rows="2"
+                        placeholder="Optional form description..."></textarea>
             </div>
+          </div>
         </div>
+      </div>
     </div>
 
-    <!-- Right column: settings + actions -->
-    <div class="col-4">
-        <div class="card mb-4">
-            <div class="card-header"><h2>Settings</h2></div>
-            <div class="card-body">
-                <div class="mb-3">
-                    <label class="form-label">Submit Button Text</label>
-                    <input id="setting-submit-text" type="text" class="form-input" placeholder="Submit" value="Submit">
-                </div>
-                <div class="mb-3">
-                    <label class="form-label">Success Message</label>
-                    <textarea id="setting-success-message" class="form-input" rows="3" placeholder="Thank you for your submission."></textarea>
-                </div>
-                <div>
-                    <label class="form-label">Layout</label>
-                    <select id="setting-layout" class="form-input">
-                        <option value="stacked">Stacked</option>
-                        <option value="inline">Inline</option>
-                    </select>
+    <!-- Tab 3: Settings -->
+    <div class="tab-panel">
+      <div class="card mb-4">
+        <div class="card-header"><h2>Settings</h2></div>
+        <div class="card-body">
+          <div class="mb-3">
+            <label class="form-label">Submit Button Text</label>
+            <input id="setting-submit-text" type="text" class="form-input" placeholder="Submit" value="Submit">
+          </div>
+          <div class="mb-3">
+            <label class="form-label">Success Message</label>
+            <textarea id="setting-success-message" class="form-input" rows="3"
+                      placeholder="Thank you for your submission."></textarea>
+          </div>
+          <div>
+            <label class="form-label">Layout</label>
+            <select id="setting-layout" class="form-input">
+              <option value="stacked">Stacked</option>
+              <option value="inline">Inline</option>
+            </select>
+          </div>
                 </div>
             </div>
         </div>
 
-        <div class="card mb-4">
+    <!-- Tab 4: Actions -->
+    <div class="tab-panel">
+      <div class="row">
+        <div class="col-6">
+          <div class="card mb-4">
             <div class="card-header"><h2>Email Action</h2></div>
             <div class="card-body">
-                <div class="mb-3">
-                    <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-                        <input id="action-email-enabled" type="checkbox"> Send email on submit
-                    </label>
-                </div>
-                <div class="mb-3">
-                    <label class="form-label">Recipients</label>
-                    <input id="action-email-recipients" type="text" class="form-input" placeholder="admin@example.com">
-                    <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Comma-separated. Uses global SMTP settings.</p>
-                </div>
-                <div>
-                    <label class="form-label">Subject Prefix</label>
-                    <input id="action-email-subject-prefix" type="text" class="form-input" placeholder="[Form]">
-                </div>
+              <div class="mb-3">
+                <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                  <input id="action-email-enabled" type="checkbox"> Send email on submit
+                </label>
+              </div>
+              <div class="mb-3">
+                <label class="form-label">Recipients</label>
+                <input id="action-email-recipients" type="text" class="form-input" placeholder="admin@example.com">
+                <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Comma-separated. Uses global
+                  SMTP settings.</p>
+              </div>
+              <div>
+                <label class="form-label">Subject Prefix</label>
+                <input id="action-email-subject-prefix" type="text" class="form-input" placeholder="[Form]">
+              </div>
             </div>
+          </div>
         </div>
-
-        <div class="card mb-4">
+        <div class="col-6">
+          <div class="card mb-4">
             <div class="card-header"><h2>Webhook Action</h2></div>
             <div class="card-body">
-                <div class="mb-3">
-                    <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-                        <input id="action-webhook-enabled" type="checkbox"> POST to webhook on submit
-                    </label>
-                </div>
-                <div class="mb-3">
-                    <label class="form-label">URL</label>
-                    <input id="action-webhook-url" type="url" class="form-input" placeholder="https://hooks.example.com/form">
-                </div>
-                <div>
-                    <label class="form-label">Method</label>
-                    <select id="action-webhook-method" class="form-input">
-                        <option value="POST">POST</option>
-                        <option value="PUT">PUT</option>
-                    </select>
-                </div>
+              <div class="mb-3">
+                <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                  <input id="action-webhook-enabled" type="checkbox"> POST to webhook on submit
+                </label>
+              </div>
+              <div class="mb-3">
+                <label class="form-label">URL</label>
+                <input id="action-webhook-url" type="url" class="form-input"
+                       placeholder="https://hooks.example.com/form">
+              </div>
+              <div>
+                <label class="form-label">Method</label>
+                <select id="action-webhook-method" class="form-input">
+                  <option value="POST">POST</option>
+                  <option value="PUT">PUT</option>
+                </select>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
 
-        <div class="card mb-4">
-            <div class="card-header"><h2>Spam Protection</h2></div>
-            <div class="card-body">
-                <div class="mb-3">
-                    <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-                        <input id="setting-honeypot" type="checkbox" checked> Enable honeypot field
-                    </label>
-                    <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Silently discards bot submissions that fill a hidden field.</p>
-                </div>
-                <div>
-                    <label class="form-label">Rate Limit (per minute)</label>
-                    <input id="setting-rate-limit" type="number" class="form-input" min="1" max="60" value="3">
-                    <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Max submissions per IP per minute.</p>
-                </div>
-            </div>
+      <div class="card mb-4">
+        <div class="card-header"><h2>Spam Protection</h2></div>
+        <div class="card-body">
+          <div class="mb-3">
+            <label class="form-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+              <input id="setting-honeypot" type="checkbox" checked> Enable honeypot field
+            </label>
+            <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Silently discards bot submissions
+              that fill a hidden field.</p>
+          </div>
+          <div>
+            <label class="form-label">Rate Limit (per minute)</label>
+            <input id="setting-rate-limit" type="number" class="form-input" min="1" max="60" value="3">
+            <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Max submissions per IP per
+              minute.</p>
+          </div>
         </div>
+      </div>
     </div>
-</div>
 
+  </div>
+</div>

package/plugins/form-builder/admin/views/form-editor.js

@@ -948,7 +948,7 @@ function buildCascadeSection(cascade, idx, otherFields) {
 
 function buildFieldLogic(field, idx) {
     const logic = field.logic || {};
-    const otherFields = fields.filter((f, i) => i !== idx && f.type !== 'page-break');
+    const otherFields = fields.filter((f, i) => i !== idx && f.type !== 'page-break' && f.type !== 'spacer');
 
     const section = document.createElement('div');
     section.className = 'fb-field-logic';
@@ -1262,6 +1262,8 @@ export const formEditorView = {
             });
         }
 
+        E.tabs($container.find('#editor-tabs').get(0));
+
         renderFieldList($container);
 
         // --- Add dropdown toggle ---

package/plugins/form-builder/data/forms/contact-details.json

@@ -1,54 +1,90 @@
 {
     "slug": "contact-details",
-    "title": "Contact Details",
-    "description": "",
+  "title": "Contact Us",
+  "description": "Get in touch with us",
     "fields": [
         {
-            "name": "are_you_going",
-            "type": "checkbox-group",
-            "label": "Are you going?",
+          "name": "full_name",
+          "type": "string",
+          "label": "Full Name",
+          "required": true,
+          "placeholder": "Your full name",
+          "helper": "",
+          "validation": {
+            "min": 2,
+            "max": 100
+          }
+        },
+      {
+        "name": "email",
+        "type": "email",
+        "label": "Email Address",
+        "required": true,
+        "placeholder": "your@email.com",
+        "helper": ""
+      },
+      {
+        "name": "phone",
+        "type": "tel",
+        "label": "Phone Number",
             "required": false,
-            "placeholder": "",
+        "placeholder": "+44 7700 000000",
+        "helper": "Optional"
+      },
+      {
+        "name": "subject",
+        "type": "select",
+        "label": "Subject",
+        "required": true,
+        "placeholder": "Please select a subject",
             "helper": "",
             "options": [
-                {
-                    "value": "yes",
-                    "label": "Yes"
-                },
-                {
-                    "value": "no",
-                    "label": "No"
-                },
-                {
-                    "value": "maybe",
-                    "label": "Maybe"
-                }
+              {
+                "value": "general",
+                "label": "General Enquiry"
+              },
+              {
+                "value": "support",
+                "label": "Support"
+              },
+              {
+                "value": "sales",
+                "label": "Sales"
+              },
+              {
+                "value": "partnership",
+                "label": "Partnership"
+              },
+              {
+                "value": "other",
+                "label": "Other"
+              }
             ]
-        },
-        {
-            "type": "page-break",
-            "label": "Email",
-            "description": "Personal Details"
-        },
-        {
-            "name": "name",
-            "type": "string",
-            "label": "Name",
-            "required": false,
-            "placeholder": "Name",
-            "helper": "Enter your email address"
+      },
+      {
+        "name": "message",
+        "type": "textarea",
+        "label": "Message",
+        "required": true,
+        "placeholder": "How can we help you?",
+        "helper": "",
+        "rows": 4,
+        "validation": {
+          "min": 10,
+          "max": 2000
+        }
         }
     ],
     "settings": {
-        "submitText": "Submit",
-        "successMessage": "Thank you for your submission.",
+      "submitText": "Send Message",
+      "successMessage": "Thanks for reaching out! We'll get back to you shortly.",
         "layout": "stacked",
         "honeypot": true,
         "rateLimitPerMinute": 3
     },
     "actions": {
         "email": {
-            "enabled": false,
+          "enabled": true,
             "recipients": "",
             "subjectPrefix": "[contact-details]"
         },
@@ -59,5 +95,5 @@
         }
     },
     "createdAt": "2026-03-03T11:05:45.630Z",
-    "updatedAt": "2026-03-03T12:31:49.644Z"
+  "updatedAt": "2026-03-05T00:00:00.000Z"
 }

package/plugins/form-builder/data/forms/feedback.json

@@ -0,0 +1,130 @@
+{
+  "slug": "feedback",
+  "title": "Feedback",
+  "description": "Share your feedback with us",
+  "fields": [
+    {
+      "name": "name",
+      "type": "string",
+      "label": "Your Name",
+      "required": true,
+      "placeholder": "Your name",
+      "helper": "",
+      "validation": {
+        "min": 2,
+        "max": 100
+      }
+    },
+    {
+      "name": "email",
+      "type": "email",
+      "label": "Email Address",
+      "required": true,
+      "placeholder": "your@email.com",
+      "helper": ""
+    },
+    {
+      "name": "rating",
+      "type": "radio",
+      "label": "Overall Rating",
+      "required": true,
+      "helper": "",
+      "options": [
+        {
+          "value": "excellent",
+          "label": "Excellent"
+        },
+        {
+          "value": "good",
+          "label": "Good"
+        },
+        {
+          "value": "average",
+          "label": "Average"
+        },
+        {
+          "value": "poor",
+          "label": "Poor"
+        }
+      ]
+    },
+    {
+      "name": "category",
+      "type": "select",
+      "label": "Category",
+      "required": true,
+      "placeholder": "Please select a category",
+      "helper": "",
+      "options": [
+        {
+          "value": "general",
+          "label": "General"
+        },
+        {
+          "value": "bug-report",
+          "label": "Bug Report"
+        },
+        {
+          "value": "feature-request",
+          "label": "Feature Request"
+        },
+        {
+          "value": "praise",
+          "label": "Praise"
+        }
+      ]
+    },
+    {
+      "name": "subject",
+      "type": "string",
+      "label": "Subject",
+      "required": true,
+      "placeholder": "Brief summary of your feedback",
+      "helper": "",
+      "validation": {
+        "max": 200
+      }
+    },
+    {
+      "name": "message",
+      "type": "textarea",
+      "label": "Your Feedback",
+      "required": true,
+      "placeholder": "Please share your thoughts in detail...",
+      "helper": "",
+      "rows": 4,
+      "validation": {
+        "min": 10,
+        "max": 2000
+      }
+    },
+    {
+      "name": "recommend",
+      "type": "checkbox",
+      "label": "I would recommend you to others",
+      "required": false,
+      "helper": ""
+    }
+  ],
+  "settings": {
+    "submitText": "Submit Feedback",
+    "successMessage": "Thank you for your feedback! We appreciate you taking the time.",
+    "layout": "stacked",
+    "honeypot": true,
+    "rateLimitPerMinute": 3
+  },
+  "actions": {
+    "email": {
+      "enabled": true,
+      "recipients": "",
+      "subjectPrefix": "[feedback]"
+    },
+    "webhook": {
+      "enabled": false,
+      "url": "",
+      "method": "POST"
+    }
+  },
+  "createdAt": "2026-03-05T00:00:00.000Z",
+  "updatedAt": "2026-03-05T00:00:00.000Z"
+}

package/plugins/form-builder/data/submissions/feedback.json

@@ -0,0 +1 @@
+[]