web-mojo 2.1.1043 → 2.1.1087

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

@@ -1,4 +1,124 @@
-import { a as Mustache, M as MOJOUtils, V as View } from "./Rest-CS4jRCAs.js";
+import { a as Mustache, M as MOJOUtils, V as View } from "./Rest-DpbPbmra.js";
+class FormPlugins {
+  // Registered plugins
+  static _plugins = [];
+  // Map of field type => { renderer: Function, pluginId: string }
+  static _renderers = /* @__PURE__ */ new Map();
+  /**
+   * Register a plugin. If a plugin with the same id exists, it's replaced.
+   * @param {object} plugin - Plugin definition (see header)
+   * @returns {Function} unregister function
+   */
+  static register(plugin) {
+    if (!plugin || typeof plugin !== "object") {
+      console.warn("[FormPlugins] register called with invalid plugin:", plugin);
+      return () => {
+      };
+    }
+    if (!plugin.id || typeof plugin.id !== "string") {
+      console.warn('[FormPlugins] plugin must have a unique string "id"', plugin);
+      return () => {
+      };
+    }
+    this.unregister(plugin.id);
+    if (plugin.fieldTypes && typeof plugin.fieldTypes === "object") {
+      Object.entries(plugin.fieldTypes).forEach(([type, renderer]) => {
+        if (typeof renderer === "function") {
+          this._renderers.set(type, { renderer, pluginId: plugin.id });
+        } else {
+          console.warn(`[FormPlugins] renderer for type "${type}" is not a function`);
+        }
+      });
+    }
+    this._plugins.push(plugin);
+    return () => this.unregister(plugin.id);
+  }
+  /**
+   * Unregister a plugin by id. Removes its field renderers as well.
+   * @param {string} id - Plugin id
+   */
+  static unregister(id) {
+    if (!id) return;
+    this._plugins = this._plugins.filter((p) => p.id !== id);
+    for (const [type, meta] of this._renderers.entries()) {
+      if (meta?.pluginId === id) {
+        this._renderers.delete(type);
+      }
+    }
+  }
+  /**
+   * Get a custom field renderer by type (if registered).
+   * @param {string} type - Field type
+   * @returns {(builder: any, fieldConfig: object) => string | null}
+   */
+  static getRenderer(type) {
+    const meta = this._renderers.get(type);
+    return meta?.renderer || null;
+  }
+  /**
+   * Returns true if a renderer exists for a field type
+   */
+  static hasRenderer(type) {
+    return this._renderers.has(type);
+  }
+  /**
+   * Get a shallow copy of registered plugins (read-only use).
+   */
+  static getPlugins() {
+    return [...this._plugins];
+  }
+  // -----------------------------
+  // Safe dispatch to plugin hooks
+  // -----------------------------
+  static _invoke(plugin, hook, ...args) {
+    const fn = plugin?.[hook];
+    if (typeof fn !== "function") return;
+    try {
+      return fn.apply(plugin, args);
+    } catch (err) {
+      console.error(`[FormPlugins] ${hook} error from plugin "${plugin.id}":`, err);
+    }
+  }
+  /**
+   * Called by FormBuilder (e.g., in ctor or initializeTemplates)
+   * @param {any} builder
+   */
+  static onFormBuilderInit(builder) {
+    this._plugins.forEach((p) => this._invoke(p, "onFormBuilderInit", builder));
+  }
+  /**
+   * Called by FormView constructor or early init
+   * @param {any} formView
+   */
+  static onFormViewInit(formView) {
+    this._plugins.forEach((p) => this._invoke(p, "onFormViewInit", formView));
+  }
+  /**
+   * Called by FormView.onAfterRender
+   * @param {any} formView
+   */
+  static onFormViewAfterRender(formView) {
+    this._plugins.forEach((p) => this._invoke(p, "onAfterRender", formView));
+  }
+  /**
+   * Called when a specific field element is initialized (after DOM exists)
+   * @param {any} formView
+   * @param {HTMLElement} fieldEl
+   * @param {object} fieldConfig
+   */
+  static onFieldInit(formView, fieldEl, fieldConfig) {
+    this._plugins.forEach((p) => this._invoke(p, "onFieldInit", formView, fieldEl, fieldConfig));
+  }
+  /**
+   * Called when a field value changes (normalized point)
+   * @param {any} formView
+   * @param {string} fieldName
+   * @param {any} value
+   */
+  static onFieldChange(formView, fieldName, value) {
+    this._plugins.forEach((p) => this._invoke(p, "onFieldChange", formView, fieldName, value));
+  }
+}
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
@@ -15,6 +135,8 @@ class FormBuilder {
           if (groupField.cols && !groupField.columns) {
             groupField.columns = groupField.cols;
             delete groupField.cols;
+          } else if (!groupField.columns) {
+            groupField.columns = 12;
           }
         });
       }
@@ -42,6 +164,7 @@ class FormBuilder {
    * Initialize field templates
    */
   initializeTemplates() {
+    FormPlugins.onFormBuilderInit?.(this);
     this.templates = {
       input: `
         <div class="mojo-form-control">
@@ -499,10 +622,12 @@ class FormBuilder {
       return this.buildFieldHTML(field);
     }).join("");
     return `
-      <div class="mojo-form-group ${colClass} ${groupClass}">
-        ${title ? `<div class="${titleClass}">${this.escapeHtml(title)}</div>` : ""}
-        <div class="row">
-          ${fieldsHTML}
+      <div class="${colClass}">
+        <div class="mojo-form-group ${groupClass}">
+          ${title ? `<div class="${titleClass}">${this.escapeHtml(title)}</div>` : ""}
+          <div class="row">
+            ${fieldsHTML}
+          </div>
         </div>
       </div>
     `;
@@ -515,122 +640,135 @@ class FormBuilder {
   buildFieldHTML(field) {
     const { type, columns, class: fieldClass = "" } = field;
     let fieldHTML = "";
-    console.log("buildFieldHTML - Processing field type:", type, "for field:", field.name);
-    switch (type) {
-      case "text":
-        fieldHTML = this.renderTextField(field);
-        break;
-      case "email":
-        fieldHTML = this.renderEmailField(field);
-        break;
-      case "password":
-        fieldHTML = this.renderPasswordField(field);
-        break;
-      case "number":
-        fieldHTML = this.renderNumberField(field);
-        break;
-      case "tel":
-        fieldHTML = this.renderTelField(field);
-        break;
-      case "url":
-        fieldHTML = this.renderUrlField(field);
-        break;
-      case "search":
-        fieldHTML = this.renderSearchField(field);
-        break;
-      case "hex":
-        fieldHTML = this.renderHexField(field);
-        break;
-      case "textarea":
-        fieldHTML = this.renderTextareaField(field);
-        break;
-      case "json":
-        fieldHTML = this.renderJsonField(field);
-        break;
-      case "select":
-        fieldHTML = this.renderSelectField(field);
-        break;
-      case "checkbox":
-        fieldHTML = this.renderCheckboxField(field);
-        break;
-      case "toggle":
-      case "switch":
-        fieldHTML = this.renderSwitchField(field);
-        break;
-      case "radio":
-        fieldHTML = this.renderRadioField(field);
-        break;
-      case "date":
-        fieldHTML = this.renderDateField(field);
-        break;
-      case "datetime":
-        fieldHTML = this.renderDateTimeField(field);
-        break;
-      case "time":
-        fieldHTML = this.renderTimeField(field);
-        break;
-      case "file":
-        fieldHTML = this.renderFileField(field);
-        break;
-      case "image":
-        fieldHTML = this.renderImageField(field);
-        break;
-      case "color":
-        fieldHTML = this.renderColorField(field);
-        break;
-      case "range":
-        fieldHTML = this.renderRangeField(field);
-        break;
-      case "hidden":
-        fieldHTML = this.renderHiddenField(field);
-        break;
-      case "button":
-        fieldHTML = this.renderButton(field);
-        break;
-      case "divider":
-        fieldHTML = this.renderDivider(field);
-        break;
-      case "html":
-        fieldHTML = this.renderHtmlField(field);
-        break;
-      case "heading":
-      case "header":
-        fieldHTML = this.renderHeaderField(field);
-        break;
-      case "tag":
-      case "tags":
-        fieldHTML = this.renderTagField(field);
-        break;
-      case "collection":
-        fieldHTML = this.renderCollectionField(field);
-        break;
-      case "collectionmultiselect":
-      case "collection-multiselect":
-        fieldHTML = this.renderCollectionMultiSelectField(field);
-        break;
-      case "datepicker":
-        fieldHTML = this.renderDatePickerField(field);
-        break;
-      case "daterange":
-        fieldHTML = this.renderDateRangeField(field);
-        break;
-      case "checklistdropdown":
-        fieldHTML = this.renderChecklistDropdownField(field);
-        break;
-      case "buttongroup":
-        fieldHTML = this.renderButtonGroupField(field);
-        break;
-      case "combo":
-      case "combobox":
-      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);
+    const customRenderer = FormPlugins && typeof FormPlugins.getRenderer === "function" ? FormPlugins.getRenderer(type) : null;
+    if (typeof customRenderer === "function") {
+      try {
+        const custom = customRenderer(this, field);
+        if (custom !== void 0 && custom !== null) {
+          fieldHTML = String(custom);
+        }
+      } catch (err) {
+        console.error("FormPlugins custom renderer error:", err);
+      }
+    }
+    if (!fieldHTML) {
+      console.log("buildFieldHTML - Processing field type:", type, "for field:", field.name);
+      switch (type) {
+        case "text":
+          fieldHTML = this.renderTextField(field);
+          break;
+        case "email":
+          fieldHTML = this.renderEmailField(field);
+          break;
+        case "password":
+          fieldHTML = this.renderPasswordField(field);
+          break;
+        case "number":
+          fieldHTML = this.renderNumberField(field);
+          break;
+        case "tel":
+          fieldHTML = this.renderTelField(field);
+          break;
+        case "url":
+          fieldHTML = this.renderUrlField(field);
+          break;
+        case "search":
+          fieldHTML = this.renderSearchField(field);
+          break;
+        case "hex":
+          fieldHTML = this.renderHexField(field);
+          break;
+        case "textarea":
+          fieldHTML = this.renderTextareaField(field);
+          break;
+        case "json":
+          fieldHTML = this.renderJsonField(field);
+          break;
+        case "select":
+          fieldHTML = this.renderSelectField(field);
+          break;
+        case "checkbox":
+          fieldHTML = this.renderCheckboxField(field);
+          break;
+        case "toggle":
+        case "switch":
+          fieldHTML = this.renderSwitchField(field);
+          break;
+        case "radio":
+          fieldHTML = this.renderRadioField(field);
+          break;
+        case "date":
+          fieldHTML = this.renderDateField(field);
+          break;
+        case "datetime":
+          fieldHTML = this.renderDateTimeField(field);
+          break;
+        case "time":
+          fieldHTML = this.renderTimeField(field);
+          break;
+        case "file":
+          fieldHTML = this.renderFileField(field);
+          break;
+        case "image":
+          fieldHTML = this.renderImageField(field);
+          break;
+        case "color":
+          fieldHTML = this.renderColorField(field);
+          break;
+        case "range":
+          fieldHTML = this.renderRangeField(field);
+          break;
+        case "hidden":
+          fieldHTML = this.renderHiddenField(field);
+          break;
+        case "button":
+          fieldHTML = this.renderButton(field);
+          break;
+        case "divider":
+          fieldHTML = this.renderDivider(field);
+          break;
+        case "html":
+          fieldHTML = this.renderHtmlField(field);
+          break;
+        case "heading":
+        case "header":
+          fieldHTML = this.renderHeaderField(field);
+          break;
+        case "tag":
+        case "tags":
+          fieldHTML = this.renderTagField(field);
+          break;
+        case "collection":
+          fieldHTML = this.renderCollectionField(field);
+          break;
+        case "collectionmultiselect":
+        case "collection-multiselect":
+          fieldHTML = this.renderCollectionMultiSelectField(field);
+          break;
+        case "datepicker":
+          fieldHTML = this.renderDatePickerField(field);
+          break;
+        case "daterange":
+          fieldHTML = this.renderDateRangeField(field);
+          break;
+        case "checklistdropdown":
+          fieldHTML = this.renderChecklistDropdownField(field);
+          break;
+        case "buttongroup":
+          fieldHTML = this.renderButtonGroupField(field);
+          break;
+        case "combo":
+        case "combobox":
+        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);
+      }
     }
     let colClass;
     if (this.isAutoSizingField(field)) {
@@ -646,7 +784,8 @@ class FormBuilder {
    * @returns {string} Unique field ID
    */
   getFieldId(name) {
-    return `field_${name}_${Date.now()}`;
+    const safeName = name.replace(/[.\s\[\]]/g, "_");
+    return `field_${safeName}`;
   }
   /**
    * Render text input field
@@ -5602,6 +5741,7 @@ class FormView extends View {
       className: "form-view",
       ...viewOptions
     });
+    FormPlugins.onFormViewInit?.(this);
     this.model = model;
     this.defaults = defaults || data;
     this._originalData = data;
@@ -5679,6 +5819,7 @@ class FormView extends View {
         return false;
       });
     }
+    FormPlugins.onFormViewAfterRender?.(this);
   }
   /**
    * Populate all form fields with current data values
@@ -5753,6 +5894,23 @@ class FormView extends View {
     this.initializeDatePickers();
     this.initializeDateRangePickers();
     this.initializeComboInputs();
+    try {
+      const visitFields = (fields = []) => {
+        fields.forEach((f) => {
+          if (f && f.type === "group" && Array.isArray(f.fields)) {
+            visitFields(f.fields);
+          } else if (f && f.name) {
+            const el = this.element.querySelector(`[name="${f.name}"], #${f.id || f.name}`);
+            if (el) {
+              FormPlugins.onFieldInit?.(this, el, f);
+            }
+          }
+        });
+      };
+      visitFields(this.formConfig?.fields || []);
+    } catch (err) {
+      console.warn("FormPlugins.onFieldInit error:", err);
+    }
     const componentContainers = this.element.querySelectorAll("[data-component]");
     componentContainers.forEach((container) => {
       container.getAttribute("data-component");
@@ -6008,6 +6166,7 @@ class FormView extends View {
       this.model.set(fieldName, value);
     }
     this.emit("field:change", { field: fieldName, value });
+    FormPlugins.onFieldChange?.(this, fieldName, value);
   }
   /**
    * Handle saving individual field changes to the model with debouncing
@@ -7590,4 +7749,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-BClEkzmE.js.map
+//# sourceMappingURL=FormView-DGRmcKUG.js.map