web-mojo 2.1.295 → 2.1.338

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

@@ -1,7 +1,8 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-BgZwmmBY.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-CEW6rw8N.js";
 class FormBuilder {
   constructor(config = {}) {
     this.fields = config.fields || [];
+    this.structureOnly = config.structureOnly || false;
     this.fields.forEach((field) => {
       if (field.cols && !field.columns) {
         field.columns = field.cols;
@@ -1473,6 +1474,9 @@ class FormBuilder {
    * @returns {*} Field value
    */
   getFieldValue(name) {
+    if (this.structureOnly) {
+      return "";
+    }
     return MOJOUtils.getContextData(this.data, name);
   }
   /**
@@ -4108,6 +4112,8 @@ class FormView extends View {
       errors = {},
       fileHandling = "base64",
       // 'base64' | 'multipart'
+      autosaveModelField = false,
+      // Auto-save model on field changes
       ...viewOptions
     } = options;
     super({
@@ -4121,12 +4127,15 @@ class FormView extends View {
     this.errors = errors;
     this.loading = false;
     this.fileHandling = fileHandling;
+    this.autosaveModelField = autosaveModelField;
     this.customComponents = /* @__PURE__ */ new Map();
+    this.fieldStatusManagers = /* @__PURE__ */ new Map();
     this.data = this.prepareFormData();
     this.formConfig = formConfig || { fields: fields || [] };
     this.formBuilder = new FormBuilder({
       ...this.formConfig,
-      data: this.data,
+      structureOnly: true,
+      // Only generate structure, FormView will control values
       errors
     });
   }
@@ -4158,12 +4167,49 @@ class FormView extends View {
     return this.formBuilder.buildFormHTML();
   }
   /**
-   * Initialize form after rendering
+   * Called after form is rendered to populate values and initialize
    */
   async onAfterRender() {
     await super.onAfterRender();
+    this.data = this.prepareFormData();
+    this.populateFormValues();
+    this.initializeFormComponents();
+  }
+  /**
+   * Populate all form fields with current data values
+   */
+  populateFormValues() {
+    if (!this.element || !this.formConfig?.fields) return;
+    this.formConfig.fields.forEach((field) => {
+      if (field.type === "group" && field.fields) {
+        field.fields.forEach((groupField) => {
+          this.populateFieldValue(groupField);
+        });
+      } else {
+        this.populateFieldValue(field);
+      }
+    });
+  }
+  /**
+   * Populate a single field with its value from data
+   */
+  populateFieldValue(fieldConfig) {
+    if (!fieldConfig.name || !this.element) return;
+    const fieldElement = this.element.querySelector(`[name="${fieldConfig.name}"]`);
+    if (!fieldElement) return;
+    const value = MOJOUtils.getContextData(this.data, fieldConfig.name);
+    this.setFieldValue(fieldElement, fieldConfig, value);
+  }
+  /**
+   * Initialize form components after rendering
+   */
+  initializeFormComponents() {
     this.initializeImageFields();
     this.initializeCustomComponents();
+    this.initializeTagInputs();
+    this.initializeCollectionSelects();
+    this.initializeDatePickers();
+    this.initializeDateRangePickers();
     this.initializePasswordFields();
   }
   /**
@@ -4317,25 +4363,59 @@ class FormView extends View {
    */
   handleFieldChange(fieldName, value) {
     this.data[fieldName] = value;
-    if (this.model && this.options.allowModelChange) {
+    if (this.autosaveModelField && this.model) {
+      this.handleFieldSave(fieldName, value);
+    } else if (this.model && this.options.allowModelChange) {
       this._isFormDrivenChange = true;
       this.model.set(fieldName, value);
     }
     this.emit("field:change", { field: fieldName, value });
   }
   /**
-   * Refresh form data and rebuild FormBuilder
-   * Call this when model or data changes
+   * Handle saving individual field changes to the model
+   * @param {string} fieldName - Name of the field being saved
+   * @param {*} value - New value to save
+   */
+  async handleFieldSave(fieldName, value) {
+    if (!this.model) return;
+    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("saved");
+    } catch (error) {
+      console.error("Field save error:", error);
+      statusManager.showStatus("error", { message: error.message });
+    }
+  }
+  /**
+   * Get or create a field status manager for a specific field
+   * @param {string} fieldName - Name of the field
+   * @returns {FieldStatusManager} Status manager instance
+   */
+  getFieldStatusManager(fieldName) {
+    if (!this.fieldStatusManagers.has(fieldName)) {
+      const fieldElement = this.element.querySelector(`[name="${fieldName}"]`);
+      if (fieldElement) {
+        const statusManager = new FieldStatusManager(fieldElement);
+        this.fieldStatusManagers.set(fieldName, statusManager);
+      }
+    }
+    return this.fieldStatusManagers.get(fieldName);
+  }
+  /**
+   * Refresh form data and repopulate values
+   * Call this when model or data changes externally
    */
   refreshForm() {
     this.data = this.prepareFormData();
-    this.formBuilder = new FormBuilder({
-      ...this.formConfig,
-      data: this.data,
-      errors: this.errors
-    });
     if (this.element) {
-      this.render();
+      this.populateFormValues();
     }
   }
   /**
@@ -4520,12 +4600,9 @@ class FormView extends View {
   async onChangeValidateField(event, element) {
     const fieldName = element.name;
     if (fieldName) {
+      const value = element.value;
+      this.handleFieldChange(fieldName, value);
       this.validateField(fieldName);
-      this.emit("change", {
-        field: fieldName,
-        value: element.value,
-        form: this
-      });
     }
   }
   /**
@@ -4534,15 +4611,11 @@ class FormView extends View {
   async onChangeToggleSwitch(event, element) {
     const fieldName = element.getAttribute("data-field");
     if (fieldName) {
-      this.data[fieldName] = element.checked;
+      const value = element.checked;
+      this.handleFieldChange(fieldName, value);
       this.emit("switch:toggle", {
         field: fieldName,
-        checked: element.checked,
-        form: this
-      });
-      this.emit("change", {
-        field: fieldName,
-        value: element.checked,
+        checked: value,
         form: this
       });
     }
@@ -4638,21 +4711,21 @@ class FormView extends View {
    * Handle range value changes
    */
   async onChangeRangeChanged(event, element) {
+    const fieldName = element.name;
+    const value = element.value;
     const targetId = element.getAttribute("data-target");
     if (targetId) {
       const valueDisplay = this.element.querySelector(`#${targetId}`);
       if (valueDisplay) {
-        valueDisplay.textContent = element.value;
+        valueDisplay.textContent = value;
       }
     }
+    if (fieldName) {
+      this.handleFieldChange(fieldName, value);
+    }
     this.emit("range:changed", {
-      field: element.name,
-      value: element.value,
-      form: this
-    });
-    this.emit("change", {
-      field: element.name,
-      value: element.value,
+      field: fieldName,
+      value,
       form: this
     });
   }
@@ -4816,6 +4889,7 @@ class FormView extends View {
     }
   }
   _onModelChange() {
+    this.data = this.prepareFormData();
     if (this.isMounted()) {
       if (!this._isFormDrivenChange) {
         this.syncFormWithModel();
@@ -4828,15 +4902,10 @@ class FormView extends View {
    */
   syncFormWithModel() {
     if (!this.model || !this.element) return;
-    const newData = this.prepareFormData();
-    if (this.formDataMatchesModelData(newData)) {
+    if (this.formDataMatchesModelData(this.data)) {
       return;
     }
-    this.data = newData;
-    if (this.formBuilder) {
-      this.formBuilder.data = this.data;
-    }
-    this.syncFormFieldValues();
+    this.populateFormValues();
   }
   /**
    * Compare current form values with new model data
@@ -4871,35 +4940,9 @@ class FormView extends View {
     const fieldElement = this.element.querySelector(`[name="${fieldConfig.name}"]`);
     if (!fieldElement) return true;
     const currentValue = this.getFieldCurrentValue(fieldElement, fieldConfig);
-    const modelValue = modelData[fieldConfig.name];
+    const modelValue = MOJOUtils.getContextData(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
    */
@@ -5537,6 +5580,108 @@ class FormView extends View {
     }
   }
 }
+class FieldStatusManager {
+  constructor(fieldElement) {
+    this.fieldElement = fieldElement;
+    this.statusContainer = this.findOrCreateStatusContainer();
+    this.timeouts = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Find existing status container or create one
+   */
+  findOrCreateStatusContainer() {
+    let container = this.fieldElement.parentElement.querySelector(".field-status");
+    if (!container) {
+      container = document.createElement("div");
+      container.className = "field-status";
+      container.innerHTML = `
+        <div class="spinner-border spinner-border-sm text-primary d-none" data-status="saving" role="status">
+          <span class="visually-hidden">Saving...</span>
+        </div>
+        <i class="bi bi-check-circle text-success d-none" data-status="saved"></i>
+        <i class="bi bi-exclamation-circle text-danger d-none" data-status="error"></i>
+      `;
+      this.fieldElement.parentElement.appendChild(container);
+    }
+    return container;
+  }
+  /**
+   * Show a status indicator
+   * @param {string} type - Status type: 'saving', 'saved', 'error'
+   * @param {object} options - Additional options
+   */
+  showStatus(type, options = {}) {
+    this.clearTimeout(type);
+    this.hideAllStatuses();
+    const indicator = this.statusContainer.querySelector(`[data-status="${type}"]`);
+    if (indicator) {
+      indicator.classList.remove("d-none");
+      indicator.classList.add("d-inline-block", "show");
+      if (type === "saved") {
+        this.setTimeout(type, () => this.hideStatus(type), 2500);
+      } else if (type === "error") {
+        if (options.message) {
+          indicator.title = options.message;
+        }
+        this.setTimeout(type, () => this.hideStatus(type), 6e3);
+      }
+    }
+  }
+  /**
+   * Hide a specific status indicator
+   * @param {string} type - Status type to hide
+   */
+  hideStatus(type) {
+    const indicator = this.statusContainer.querySelector(`[data-status="${type}"]`);
+    if (indicator) {
+      indicator.classList.remove("show");
+      indicator.classList.add("hide");
+      setTimeout(() => {
+        indicator.classList.add("d-none");
+        indicator.classList.remove("d-inline-block", "hide");
+        indicator.title = "";
+      }, 300);
+    }
+  }
+  /**
+   * Hide all status indicators
+   */
+  hideAllStatuses() {
+    const indicators = this.statusContainer.querySelectorAll("[data-status]");
+    indicators.forEach((indicator) => {
+      indicator.classList.add("d-none");
+      indicator.classList.remove("d-inline-block", "show", "hide");
+      indicator.title = "";
+    });
+  }
+  /**
+   * Set a timeout for auto-hiding status
+   * @param {string} type - Status type
+   * @param {function} callback - Callback to execute
+   * @param {number} delay - Delay in milliseconds
+   */
+  setTimeout(type, callback, delay) {
+    const timeoutId = setTimeout(callback, delay);
+    this.timeouts.set(type, timeoutId);
+  }
+  /**
+   * Clear a specific timeout
+   * @param {string} type - Status type
+   */
+  clearTimeout(type) {
+    if (this.timeouts.has(type)) {
+      clearTimeout(this.timeouts.get(type));
+      this.timeouts.delete(type);
+    }
+  }
+  /**
+   * Clean up all timeouts
+   */
+  destroy() {
+    this.timeouts.forEach((timeoutId) => clearTimeout(timeoutId));
+    this.timeouts.clear();
+  }
+}
 const FormView$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   FormView,
@@ -5547,4 +5692,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-DJxUvj0p.js.map
+//# sourceMappingURL=FormView-CWNpkr0M.js.map