web-mojo 2.1.294 → 2.1.295

package/dist/chunks/{FormView-GJqUOJqR.js → FormView-DJxUvj0p.js}

@@ -1,4 +1,4 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-CKLwTH9q.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-BgZwmmBY.js";
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
@@ -4318,6 +4318,7 @@ class FormView extends View {
   handleFieldChange(fieldName, value) {
     this.data[fieldName] = value;
     if (this.model && this.options.allowModelChange) {
+      this._isFormDrivenChange = true;
       this.model.set(fieldName, value);
     }
     this.emit("field:change", { field: fieldName, value });
@@ -4816,8 +4817,143 @@ class FormView extends View {
   }
   _onModelChange() {
     if (this.isMounted()) {
-      this.refreshForm();
+      if (!this._isFormDrivenChange) {
+        this.syncFormWithModel();
+      }
+      this._isFormDrivenChange = false;
+    }
+  }
+  /**
+   * Sync form field values with current model data without full rebuild
+   */
+  syncFormWithModel() {
+    if (!this.model || !this.element) return;
+    const newData = this.prepareFormData();
+    if (this.formDataMatchesModelData(newData)) {
+      return;
+    }
+    this.data = newData;
+    if (this.formBuilder) {
+      this.formBuilder.data = this.data;
+    }
+    this.syncFormFieldValues();
+  }
+  /**
+   * Compare current form values with new model data
+   * @param {Object} newModelData - New data from model
+   * @returns {boolean} True if form and model data match
+   */
+  formDataMatchesModelData(newModelData) {
+    if (!this.formConfig?.fields || !this.element) return true;
+    for (const field of this.formConfig.fields) {
+      if (field.type === "group" && field.fields) {
+        for (const groupField of field.fields) {
+          if (!this.fieldValueMatchesModel(groupField, newModelData)) {
+            return false;
+          }
+        }
+      } else {
+        if (!this.fieldValueMatchesModel(field, newModelData)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  /**
+   * Check if a single field's current value matches the model data
+   * @param {Object} fieldConfig - Field configuration
+   * @param {Object} modelData - Model data to compare against
+   * @returns {boolean} True if field value matches model
+   */
+  fieldValueMatchesModel(fieldConfig, modelData) {
+    if (!fieldConfig.name) return true;
+    const fieldElement = this.element.querySelector(`[name="${fieldConfig.name}"]`);
+    if (!fieldElement) return true;
+    const currentValue = this.getFieldCurrentValue(fieldElement, fieldConfig);
+    const modelValue = modelData[fieldConfig.name];
+    return this.valuesAreDifferent(currentValue, modelValue) === false;
+  }
+  /**
+   * Update form field values to match current model data
+   */
+  syncFormFieldValues() {
+    if (!this.formConfig?.fields || !this.element) return;
+    this.formConfig.fields.forEach((field) => {
+      if (field.type === "group" && field.fields) {
+        field.fields.forEach((groupField) => {
+          this.updateFormFieldValue(groupField);
+        });
+      } else {
+        this.updateFormFieldValue(field);
+      }
+    });
+  }
+  /**
+   * Update a single form field value from model data
+   */
+  updateFormFieldValue(fieldConfig) {
+    if (!fieldConfig.name) return;
+    const fieldElement = this.element.querySelector(`[name="${fieldConfig.name}"]`);
+    if (!fieldElement) return;
+    const newValue = this.data[fieldConfig.name];
+    if (this.getFieldCurrentValue(fieldElement, fieldConfig) === newValue) return;
+    this.setFieldValue(fieldElement, fieldConfig, newValue);
+  }
+  /**
+   * Get current value from a form field element
+   */
+  getFieldCurrentValue(fieldElement, fieldConfig) {
+    switch (fieldConfig.type) {
+      case "checkbox":
+        return fieldElement.checked;
+      case "switch":
+        return fieldElement.checked;
+      case "radio":
+        const checkedRadio = this.element.querySelector(`[name="${fieldConfig.name}"]:checked`);
+        return checkedRadio ? checkedRadio.value : "";
+      case "select":
+        return fieldElement.multiple ? Array.from(fieldElement.selectedOptions).map((opt) => opt.value) : fieldElement.value;
+      case "file":
+      case "image":
+        return null;
+      // Don't sync file fields
+      default:
+        return fieldElement.value;
+    }
+  }
+  /**
+   * Set value on a form field element
+   */
+  setFieldValue(fieldElement, fieldConfig, newValue) {
+    switch (fieldConfig.type) {
+      case "checkbox":
+      case "switch":
+        fieldElement.checked = Boolean(newValue);
+        break;
+      case "radio":
+        const radioOption = this.element.querySelector(`[name="${fieldConfig.name}"][value="${newValue}"]`);
+        if (radioOption) {
+          radioOption.checked = true;
+        }
+        break;
+      case "select":
+        if (fieldElement.multiple && Array.isArray(newValue)) {
+          Array.from(fieldElement.options).forEach((option) => {
+            option.selected = newValue.includes(option.value);
+          });
+        } else {
+          fieldElement.value = newValue || "";
+        }
+        break;
+      case "file":
+      case "image":
+        break;
+      default:
+        fieldElement.value = newValue || "";
+        break;
     }
+    fieldElement.dispatchEvent(new Event("change", { bubbles: true }));
   }
   /**
    * Set defaults (updates defaults and rebuilds form)
@@ -4896,6 +5032,7 @@ class FormView extends View {
     console.log("Saving changed data via model:", changes);
     console.log("Data type:", changes instanceof FormData ? "FormData (multipart)" : "Object (JSON/base64)");
     try {
+      this._isFormDrivenChange = true;
       const result = await this.model.save(changes);
       console.log("Model save result:", result);
       return result;
@@ -5410,4 +5547,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-GJqUOJqR.js.map
+//# sourceMappingURL=FormView-DJxUvj0p.js.map