web-mojo 2.1.374 → 2.1.378

package/dist/chunks/{FormView-DOVHdh_a.js → FormView-B1ldH_5V.js}

@@ -1,4 +1,4 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-DdnnC4q6.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-CUL8EXgl.js";
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
@@ -54,7 +54,7 @@ class FormBuilder {
                  class="{{inputClass}}{{#error}} is-invalid{{/error}}"
                  value="{{fieldValue}}" {{#placeholder}}placeholder="{{placeholder}}"{{/placeholder}}
                  {{#required}}required{{/required}} {{#disabled}}disabled{{/disabled}}
-                 {{#readonly}}readonly{{/readonly}} data-change-action="validate-field" {{{attrs}}}>
+                 {{#readonly}}readonly{{/readonly}} {{{attrs}}}>
           {{#help}}<div class="{{helpClass}}">{{help}}</div>{{/help}}
           {{#error}}<div class="{{errorClass}}">{{error}}</div>{{/error}}
         </div>
@@ -71,7 +71,7 @@ class FormBuilder {
                    class="{{inputClass}}{{#error}} is-invalid{{/error}}"
                    value="{{fieldValue}}" {{#placeholder}}placeholder="{{placeholder}}"{{/placeholder}}
                    {{#required}}required{{/required}} {{#disabled}}disabled{{/disabled}}
-                   {{#readonly}}readonly{{/readonly}} data-change-action="validate-field"
+                   {{#readonly}}readonly{{/readonly}}
                    data-field-type="password" {{{attrs}}}>
             {{#showToggle}}
             <button type="button" class="btn btn-outline-secondary"
@@ -111,7 +111,7 @@ class FormBuilder {
           <textarea id="{{fieldId}}" name="{{name}}" class="{{inputClass}}{{#error}} is-invalid{{/error}}"
                     rows="{{rows}}" {{#placeholder}}placeholder="{{placeholder}}"{{/placeholder}}
                     {{#required}}required{{/required}} {{#disabled}}disabled{{/disabled}}
-                    {{#readonly}}readonly{{/readonly}} data-change-action="validate-field" {{{attrs}}}>{{fieldValue}}</textarea>
+                    {{#readonly}}readonly{{/readonly}} {{{attrs}}}>{{fieldValue}}</textarea>
           {{#help}}<div class="{{helpClass}}">{{help}}</div>{{/help}}
           {{#error}}<div class="{{errorClass}}">{{error}}</div>{{/error}}
         </div>
@@ -126,7 +126,7 @@ class FormBuilder {
           {{#searchInput}}{{{searchInput}}}{{/searchInput}}
           <select id="{{fieldId}}" name="{{name}}" class="{{inputClass}}{{#error}} is-invalid{{/error}}"
                   {{#required}}required{{/required}} {{#disabled}}disabled{{/disabled}}
-                  {{#multiple}}multiple{{/multiple}} data-change-action="validate-field" {{{attrs}}}>
+                  {{#multiple}}multiple{{/multiple}} {{{attrs}}}>
             {{{optionsHTML}}}
           </select>
           {{#help}}<div class="{{helpClass}}">{{help}}</div>{{/help}}
@@ -139,7 +139,7 @@ class FormBuilder {
             <input type="checkbox" id="{{fieldId}}" name="{{name}}"
                    class="form-check-input{{#error}} is-invalid{{/error}}" value="{{value}}"
                    {{#checked}}checked{{/checked}} {{#required}}required{{/required}}
-                     {{#disabled}}disabled{{/disabled}} data-change-action="validate-field" {{{attrs}}}>
+                     {{#disabled}}disabled{{/disabled}} {{{attrs}}}>
               <label class="form-check-label" for="{{fieldId}}">{{label}}</label>
             </div>
             {{#help}}<div class="{{helpClass}}">{{help}}</div>{{/help}}
@@ -231,7 +231,7 @@ class FormBuilder {
             <input type="radio" id="{{fieldId}}_{{value}}" name="{{name}}" value="{{value}}"
                    class="form-check-input{{#error}} is-invalid{{/error}}" {{#checked}}checked{{/checked}}
                    {{#required}}required{{/required}} {{#disabled}}disabled{{/disabled}}
-                   data-change-action="validate-field" {{{attrs}}}>
+                   {{{attrs}}}>
             <label class="form-check-label" for="{{fieldId}}_{{value}}">{{text}}</label>
           </div>
           {{/options}}
@@ -324,7 +324,7 @@ class FormBuilder {
                    class="{{inputClass}}{{#error}} is-invalid{{/error}}"
                    value="{{fieldValue}}"
                    {{#required}}required{{/required}} {{#disabled}}disabled{{/disabled}}
-                   {{#readonly}}readonly{{/readonly}} data-change-action="validate-field" {{{attrs}}}>
+                   {{#readonly}}readonly{{/readonly}} {{{attrs}}}>
             <button type="button" class="btn-sm text-muted border-0 bg-transparent p-1"
                     data-action="clear-color" data-field="{{name}}"
                     title="Clear color">
@@ -1141,7 +1141,7 @@ class FormBuilder {
               value="${this.escapeHtml(radioValue)}"
               ${checked}
               ${disabled ? "disabled" : ""}
-              data-change-action="validate-field"
+
               ${attrs}
             >
             <label class="form-check-label" for="${radioId}">
@@ -1588,7 +1588,7 @@ class FormBuilder {
                  placeholder="${this.escapeHtml(placeholder)}"
                  ${disabled ? "disabled" : ""}
                  ${readonly ? "readonly" : ""}
-                 data-change-action="validate-field">
+
           <input type="hidden" name="${name}" value="${this.escapeHtml(fieldValue)}">
           <small class="form-text text-muted">This will be enhanced with TagInput component</small>
         </div>
@@ -1648,7 +1648,7 @@ class FormBuilder {
                  placeholder="${this.escapeHtml(placeholder)}"
                  ${disabled ? "disabled" : ""}
                  ${readonly ? "readonly" : ""}
-                 data-change-action="validate-field">
+
           <input type="hidden" name="${name}" value="${this.escapeHtml(fieldValue)}">
           <small class="form-text text-muted">This will be enhanced with CollectionSelect component</small>
         </div>
@@ -1709,7 +1709,7 @@ class FormBuilder {
                  ${disabled ? "disabled" : ""}
                  ${readonly ? "readonly" : ""}
                  ${required ? "required" : ""}
-                 data-change-action="validate-field">
+
           <small class="form-text text-muted">This will be enhanced with Easepick DatePicker</small>
         </div>
         ${help ? `<div class="${this.options.helpClass}">${this.escapeHtml(help)}</div>` : ""}
@@ -1786,7 +1786,7 @@ class FormBuilder {
                      ${disabled ? "disabled" : ""}
                      ${readonly ? "readonly" : ""}
                      ${required ? "required" : ""}
-                     data-change-action="validate-field">
+
             </div>
             <div class="col-auto d-flex align-items-center">
               <span class="text-muted">${this.escapeHtml(separator.trim())}</span>
@@ -1803,7 +1803,7 @@ class FormBuilder {
                      ${disabled ? "disabled" : ""}
                      ${readonly ? "readonly" : ""}
                      ${required ? "required" : ""}
-                     data-change-action="validate-field">
+
             </div>
           </div>
           <small class="form-text text-muted">This will be enhanced with Easepick DateRangePicker</small>
@@ -4194,6 +4194,8 @@ class FormView extends View {
     this.autosaveModelField = autosaveModelField;
     this.customComponents = /* @__PURE__ */ new Map();
     this.fieldStatusManagers = /* @__PURE__ */ new Map();
+    this.saveTimeouts = /* @__PURE__ */ new Map();
+    this.isSaving = false;
     this.data = this.prepareFormData();
     this.formConfig = formConfig || { fields: fields || [] };
     this.formBuilder = new FormBuilder({
@@ -4436,26 +4438,36 @@ class FormView extends View {
     this.emit("field:change", { field: fieldName, value });
   }
   /**
-   * Handle saving individual field changes to the model
+   * Handle saving individual field changes to the model with debouncing
    * @param {string} fieldName - Name of the field being saved
    * @param {*} value - New value to save
    */
   async handleFieldSave(fieldName, value) {
-    if (!this.model) return;
+    if (!this.model || this.isSaving) return;
+    if (this.saveTimeouts.has(fieldName)) {
+      clearTimeout(this.saveTimeouts.get(fieldName));
+    }
     const statusManager = this.getFieldStatusManager(fieldName);
-    try {
-      statusManager.showStatus("saving");
-      this._isFormDrivenChange = true;
-      if (typeof this.model.save === "function") {
-        await this.model.save({ [fieldName]: value });
-      } else {
-        this.model.set(fieldName, value);
+    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);
+        }
+        statusManager.showStatus("saved");
+      } catch (error) {
+        console.error("Field save error:", error);
+        statusManager.showStatus("error", { message: error.message });
+      } finally {
+        this.isSaving = false;
       }
-      statusManager.showStatus("saved");
-    } catch (error) {
-      console.error("Field save error:", error);
-      statusManager.showStatus("error", { message: error.message });
-    }
+    }, 300);
+    this.saveTimeouts.set(fieldName, timeoutId);
   }
   /**
    * Get or create a field status manager for a specific field
@@ -4966,6 +4978,7 @@ class FormView extends View {
     }
   }
   _onModelChange() {
+    if (this.isSaving) return;
     this.data = this.prepareFormData();
     if (this.isMounted()) {
       if (!this._isFormDrivenChange) {
@@ -5918,4 +5931,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-DOVHdh_a.js.map
+//# sourceMappingURL=FormView-B1ldH_5V.js.map