web-mojo 2.1.979 → 2.1.995

package/dist/chunks/{FormView-CQbR3S82.js → FormView-BClEkzmE.js}

@@ -625,6 +625,9 @@ class FormBuilder {
       case "autocomplete":
         fieldHTML = this.renderComboField(field);
         break;
+      case "tabset":
+        fieldHTML = this.renderTabsetField(field);
+        break;
       default:
         console.warn(`Unknown field type: ${type}`);
         fieldHTML = this.renderTextField(field);
@@ -2018,6 +2021,70 @@ class FormBuilder {
       </div>
     `;
   }
+  /**
+   * Render a tabset field consisting of Bootstrap nav tabs and tab panes.
+   * Each pane's fields are rendered using existing field rendering,
+   * wrapped in a row so column layouts work as expected.
+   * @param {Object} field - Tabset configuration
+   * @param {Array} field.tabs - Array of tabs: [{ label, fields }]
+   * @param {string} [field.name] - Optional name used to generate stable IDs
+   * @param {string} [field.navClass] - CSS classes for the tabs nav
+   * @param {string} [field.contentClass] - CSS classes for the tab content container
+   * @returns {string} HTML
+   */
+  renderTabsetField(field) {
+    const {
+      tabs = [],
+      name = `tabset-${Date.now()}`,
+      navClass = "nav nav-tabs mb-3",
+      contentClass = "tab-content"
+    } = field;
+    const safe = String(name).toLowerCase().replace(/[^a-z0-9]/g, "-");
+    const nav = tabs.map((t, i) => {
+      const id = `${safe}-pane-${i}`;
+      const isActive = i === 0;
+      return `
+        <li class="nav-item" role="presentation">
+          <button class="nav-link ${isActive ? "active" : ""}"
+                  id="${id}-tab"
+                  data-bs-toggle="tab"
+                  data-bs-target="#${id}"
+                  type="button"
+                  role="tab"
+                  aria-controls="${id}"
+                  aria-selected="${isActive}">
+            ${this.escapeHtml(t.label || `Tab ${i + 1}`)}
+          </button>
+        </li>
+      `;
+    }).join("");
+    const panes = tabs.map((t, i) => {
+      const id = `${safe}-pane-${i}`;
+      const isActive = i === 0;
+      const fieldsHTML = (t.fields || []).map((f) => this.buildFieldHTML(f)).join("");
+      return `
+        <div class="tab-pane fade ${isActive ? "show active" : ""}"
+             id="${id}"
+             role="tabpanel"
+             aria-labelledby="${id}-tab"
+             data-tab-index="${i}">
+          <div class="row">
+            ${fieldsHTML}
+          </div>
+        </div>
+      `;
+    }).join("");
+    return `
+      <div class="mojo-form-tabset">
+        <ul class="${navClass}" role="tablist">
+          ${nav}
+        </ul>
+        <div class="${contentClass}">
+          ${panes}
+        </div>
+      </div>
+    `;
+  }
   /**
    * Generate select options automatically from numeric range or patterns
    * Supports multiple generation modes:
@@ -3383,6 +3450,8 @@ class SearchView extends View {
 }
 class ListItemsView extends View {
   constructor(options = {}) {
+    const hasCustomTemplate = !!options.customItemTemplate;
+    const itemContentTemplate = hasCustomTemplate ? `{{{customContent}}}` : `<span {{#disabled}}class="text-muted"{{/disabled}}>{{label}}</span>`;
     super({
       tagName: "div",
       className: "collection-multiselect-items",
@@ -3425,7 +3494,7 @@ class ListItemsView extends View {
                      data-index="{{index}}">
                   <i class="bi {{#selected}}bi-check-square-fill text-primary{{/selected}}{{^selected}}bi-square{{/selected}} me-2" 
                      style="font-size: 1.1rem;"></i>
-                  <span {{#disabled}}class="text-muted"{{/disabled}}>{{label}}</span>
+                  ${itemContentTemplate}
                 </div>
               {{/items}}
             </div>
@@ -3450,6 +3519,7 @@ class ListItemsView extends View {
     this.unselectedCount = options.unselectedCount || 0;
     this.allSelected = options.allSelected || false;
     this.noneSelected = options.noneSelected || true;
+    this.customItemTemplate = options.customItemTemplate || null;
     this.lastClickedIndex = -1;
   }
   handleActionToggle(event, element) {
@@ -3507,6 +3577,7 @@ class CollectionMultiSelectView extends View {
     this.valueField = options.valueField || "id";
     this.excludeIds = options.excludeIds || [];
     this.ignoreIds = options.ignoreIds || [];
+    this.itemTemplate = options.itemTemplate || null;
     this.collectionParams = options.collectionParams || {};
     this.defaultParamsOption = options.defaultParams || null;
     this.baseParams = {};
@@ -3598,7 +3669,8 @@ class CollectionMultiSelectView extends View {
       totalCount,
       unselectedCount,
       allSelected: selectedCount === totalCount && totalCount > 0,
-      noneSelected: selectedCount === 0
+      noneSelected: selectedCount === 0,
+      customItemTemplate: this.itemTemplate
     });
     this.listView.on("toggle", (data) => {
       this.handleToggle(data);
@@ -3637,13 +3709,38 @@ class CollectionMultiSelectView extends View {
       if (this.ignoreIds.some((ignoreId) => ignoreId == id)) return false;
       return true;
     });
-    this.items = models.map((model, index) => ({
-      label: this.getFieldValue(model, this.labelField),
-      value: this.getFieldValue(model, this.valueField),
-      index,
-      selected: this.selectedValues.some((v) => v == this.getFieldValue(model, this.valueField)),
-      disabled: this.disabled
-    }));
+    this.items = models.map((model, index) => {
+      const modelData = model.toJSON ? model.toJSON() : model;
+      const value = this.getFieldValue(model, this.valueField);
+      const item = {
+        label: this.getFieldValue(model, this.labelField),
+        value,
+        index,
+        selected: this.selectedValues.some((v) => v == value),
+        disabled: this.disabled,
+        model: modelData
+        // All model data nested under 'model' context
+      };
+      if (this.itemTemplate) {
+        item.customContent = this.renderItemTemplate(item);
+      }
+      return item;
+    });
+  }
+  // Render custom item template
+  renderItemTemplate(itemData) {
+    if (!this.itemTemplate) return "";
+    try {
+      const Mustache2 = window.Mustache || this.constructor.Mustache;
+      if (!Mustache2) {
+        console.warn("Mustache not available for item template rendering");
+        return itemData.label;
+      }
+      return Mustache2.render(this.itemTemplate, itemData);
+    } catch (error) {
+      console.error("Error rendering item template:", error);
+      return itemData.label;
+    }
   }
   // Get field value (supports dot notation)
   getFieldValue(item, field) {
@@ -5795,6 +5892,8 @@ class FormView extends View {
           collection,
           defaultParams: fieldConfig.defaultParams || null,
           // Can be dict or callback
+          itemTemplate: fieldConfig.itemTemplate || null,
+          // Custom item template
           containerId: null
           // We'll mount directly
         });
@@ -6875,16 +6974,37 @@ class FormView extends View {
     return isValid;
   }
   /**
-   * Focus first error field
+   * Focus first error
+   * If the invalid field is inside a hidden tab pane, activate that tab first.
    */
   focusFirstError() {
     const form = this.getFormElement();
     if (!form) return;
     const firstInvalid = form.querySelector(":invalid");
-    if (firstInvalid) {
-      firstInvalid.focus();
-      firstInvalid.scrollIntoView({ behavior: "smooth", block: "center" });
+    if (!firstInvalid) return;
+    const tabPane = firstInvalid.closest(".tab-pane");
+    if (tabPane && !tabPane.classList.contains("active")) {
+      const tabId = tabPane.id;
+      const trigger = form.querySelector(`[role="tab"][aria-controls="${tabId}"], [data-bs-target="#${tabId}"]`);
+      if (trigger) {
+        const bsTab = window.bootstrap?.Tab?.getOrCreateInstance ? window.bootstrap.Tab.getOrCreateInstance(trigger) : null;
+        if (bsTab && typeof bsTab.show === "function") {
+          bsTab.show();
+        } else {
+          const navLinks = form.querySelectorAll('[role="tab"].nav-link');
+          navLinks.forEach((link) => {
+            const isActive = link === trigger;
+            link.classList.toggle("active", isActive);
+            link.setAttribute("aria-selected", isActive ? "true" : "false");
+          });
+          const panes = form.querySelectorAll(".tab-pane");
+          panes.forEach((p) => p.classList.remove("show", "active"));
+          tabPane.classList.add("show", "active");
+        }
+      }
     }
+    firstInvalid.focus();
+    firstInvalid.scrollIntoView({ behavior: "smooth", block: "center" });
   }
   /**
    * Clear all errors
@@ -7470,4 +7590,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-CQbR3S82.js.map
+//# sourceMappingURL=FormView-BClEkzmE.js.map