web-mojo 2.1.1092 → 2.1.1094

package/dist/chunks/{FormView-DGRmcKUG.js → FormView-4TUGCb-w.js}

@@ -784,6 +784,9 @@ class FormBuilder {
    * @returns {string} Unique field ID
    */
   getFieldId(name) {
+    if (!name) {
+      return `field_${Math.random().toString(36).substr(2, 9)}`;
+    }
     const safeName = name.replace(/[.\s\[\]]/g, "_");
     return `field_${safeName}`;
   }
@@ -2229,7 +2232,7 @@ class FormBuilder {
    * Supports multiple generation modes:
    * - Numeric ranges: start, end, step
    * - Formatting: format function, prefix, suffix
-   * 
+   *
    * @param {number} start - Start value (inclusive)
    * @param {number} end - End value (inclusive)
    * @param {number} step - Step increment (default: 1)
@@ -2238,27 +2241,27 @@ class FormBuilder {
    * @param {string} options.prefix - Prefix for label
    * @param {string} options.suffix - Suffix for label
    * @returns {Array} Array of option objects {value, label}
-   * 
+   *
    * @example
    * // Hours 1-24
    * generateSelectOptions(1, 24, 1)
-   * 
+   *
    * // Minutes in 15-min increments with padding
    * generateSelectOptions(0, 45, 15, { format: 'padded' })
-   * 
+   *
    * // Days with ordinal suffix
    * generateSelectOptions(1, 31, 1, { format: 'ordinal' })
-   * 
+   *
    * // Years with prefix
    * generateSelectOptions(2020, 2030, 1, { prefix: 'Year ' })
-   * 
+   *
    * // Percentages
    * generateSelectOptions(0, 100, 10, { suffix: '%' })
-   * 
+   *
    * // Custom formatter
-   * generateSelectOptions(1, 12, 1, { 
-   *   format: (v) => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
-   *                   'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][v-1] 
+   * generateSelectOptions(1, 12, 1, {
+   *   format: (v) => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+   *                   'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][v-1]
    * })
    */
   generateSelectOptions(start, end, step = 1, options = {}) {
@@ -5752,6 +5755,8 @@ class FormView extends View {
     this.customComponents = /* @__PURE__ */ new Map();
     this.fieldStatusManagers = /* @__PURE__ */ new Map();
     this.saveTimeouts = /* @__PURE__ */ new Map();
+    this.pendingSaveFields = /* @__PURE__ */ new Map();
+    this.batchSaveTimeout = null;
     this.isSaving = false;
     this.data = this.prepareFormData();
     this.formConfig = formConfig || { fields: fields || [] };
@@ -6169,35 +6174,57 @@ class FormView extends View {
     FormPlugins.onFieldChange?.(this, fieldName, value);
   }
   /**
-   * Handle saving individual field changes to the model with debouncing
+   * Handle saving field changes to the model with intelligent batching
+   * When multiple fields change within a short time (e.g., autofill), they are batched together
    * @param {string} fieldName - Name of the field being saved
    * @param {*} value - New value to save
    */
   async handleFieldSave(fieldName, value) {
-    if (!this.model || this.isSaving) return;
-    if (this.saveTimeouts.has(fieldName)) {
-      clearTimeout(this.saveTimeouts.get(fieldName));
-    }
+    if (!this.model) return;
+    this.pendingSaveFields.set(fieldName, value);
     const statusManager = this.getFieldStatusManager(fieldName);
     statusManager.showStatus("saving");
-    const timeoutId = setTimeout(async () => {
-      try {
-        this.isSaving = true;
-        this.saveTimeouts.delete(fieldName);
-        this._isFormDrivenChange = true;
-        if (typeof this.model.save === "function") {
-          await this.model.save({ [fieldName]: value });
-        } else {
-          this.model.set(fieldName, value);
-        }
+    if (this.batchSaveTimeout) {
+      clearTimeout(this.batchSaveTimeout);
+    }
+    this.batchSaveTimeout = setTimeout(async () => {
+      await this.executeBatchSave();
+    }, 300);
+  }
+  /**
+   * Execute a batch save of all pending field changes
+   * This sends all changed fields in a single request to avoid race conditions
+   * @private
+   */
+  async executeBatchSave() {
+    if (this.isSaving || this.pendingSaveFields.size === 0) return;
+    try {
+      this.isSaving = true;
+      const changes = Object.fromEntries(this.pendingSaveFields);
+      const fieldNames = Array.from(this.pendingSaveFields.keys());
+      this.pendingSaveFields.clear();
+      this.batchSaveTimeout = null;
+      this._isFormDrivenChange = true;
+      if (typeof this.model.save === "function") {
+        await this.model.save(changes);
+      } else {
+        Object.entries(changes).forEach(([key, val]) => {
+          this.model.set(key, val);
+        });
+      }
+      fieldNames.forEach((fieldName) => {
+        const statusManager = this.getFieldStatusManager(fieldName);
         statusManager.showStatus("saved");
-      } catch (error) {
+      });
+    } catch (error) {
+      console.error("Batch save error:", error);
+      Array.from(this.pendingSaveFields.keys()).forEach((fieldName) => {
+        const statusManager = this.getFieldStatusManager(fieldName);
         statusManager.showStatus("error", { message: error.message });
-      } finally {
-        this.isSaving = false;
-      }
-    }, 300);
-    this.saveTimeouts.set(fieldName, timeoutId);
+      });
+    } finally {
+      this.isSaving = false;
+    }
   }
   /**
    * Get or create a field status manager for a specific field
@@ -7749,4 +7776,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-DGRmcKUG.js.map
+//# sourceMappingURL=FormView-4TUGCb-w.js.map