web-mojo 2.1.377 → 2.1.379

package/dist/chunks/{FormView-m5tw5nNB.js → FormView-BxSIJ_E_.js}

@@ -1,4 +1,4 @@
-import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-BHqYQKaY.js";
+import { M as Mustache, h as MOJOUtils, V as View } from "./WebApp-DGEbMf2Q.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>
@@ -4240,6 +4240,7 @@ class FormView extends View {
     this.data = this.prepareFormData();
     this.populateFormValues();
     this.initializeFormComponents();
+    this.initializeChangeHandlers();
   }
   /**
    * Populate all form fields with current data values
@@ -4307,10 +4308,41 @@ class FormView extends View {
     this.initializeDateRangePickers();
     const componentContainers = this.element.querySelectorAll("[data-component]");
     componentContainers.forEach((container) => {
-      const componentType = container.getAttribute("data-component");
-      const fieldName = container.getAttribute("data-field");
-      if (componentType && fieldName) {
-        console.log(`Found ${componentType} component for field: ${fieldName}`);
+      container.getAttribute("data-component");
+      container.getAttribute("data-field");
+    });
+  }
+  /**
+   * Initialize generic change handlers for all form inputs
+   */
+  initializeChangeHandlers() {
+    if (!this.element) return;
+    const inputs = this.element.querySelectorAll("input:not([data-action]), select:not([data-action]), textarea:not([data-action])");
+    inputs.forEach((input) => {
+      if (input.hasAttribute("data-component") || input.classList.contains("form-check-input")) {
+        return;
+      }
+      input.addEventListener("change", (event) => {
+        const fieldName = input.name;
+        if (fieldName) {
+          let value = input.value;
+          if (input.type === "checkbox") {
+            value = input.checked;
+          } else if (input.type === "radio") {
+            if (!input.checked) return;
+          } else if (input.multiple && input.selectedOptions) {
+            value = Array.from(input.selectedOptions).map((opt) => opt.value);
+          }
+          this.handleFieldChange(fieldName, value);
+        }
+      });
+      if (input.type === "text" || input.type === "email" || input.type === "url" || input.tagName === "TEXTAREA") {
+        input.addEventListener("input", (event) => {
+          const fieldName = input.name;
+          if (fieldName) {
+            this.handleFieldChange(fieldName, input.value);
+          }
+        });
       }
     });
   }
@@ -4335,7 +4367,6 @@ class FormView extends View {
           this.handleFieldChange(fieldName, data.value);
         });
       } catch (error) {
-        console.error("Failed to initialize TagInput:", error);
       }
     });
   }
@@ -4351,7 +4382,6 @@ class FormView extends View {
         const config = JSON.parse(configData);
         const fieldConfig = this.getFormFieldConfig(fieldName);
         if (!fieldConfig || !fieldConfig.Collection) {
-          console.warn(`CollectionSelect field ${fieldName} missing Collection class`);
           return;
         }
         const collection = new fieldConfig.Collection();
@@ -4370,7 +4400,6 @@ class FormView extends View {
           this.handleFieldChange(fieldName, data.value);
         });
       } catch (error) {
-        console.error("Failed to initialize CollectionSelect:", error);
       }
     });
   }
@@ -4395,7 +4424,6 @@ class FormView extends View {
           this.handleFieldChange(fieldName, data.value);
         });
       } catch (error) {
-        console.error("Failed to initialize DatePicker:", error);
       }
     });
   }
@@ -4420,7 +4448,6 @@ class FormView extends View {
           this.handleFieldChange(fieldName, data.combined);
         });
       } catch (error) {
-        console.error("Failed to initialize DateRangePicker:", error);
       }
     });
   }
@@ -4461,7 +4488,6 @@ class FormView extends View {
         }
         statusManager.showStatus("saved");
       } catch (error) {
-        console.error("Field save error:", error);
         statusManager.showStatus("error", { message: error.message });
       } finally {
         this.isSaving = false;
@@ -4495,7 +4521,7 @@ class FormView extends View {
     }
   }
   /**
-   * Get reason why a field is considered changed (for debugging)
+   * Get reason why a field is considered changed
    * @param {*} newValue - New value from form
    * @param {*} originalValue - Original value from model
    * @returns {string} Reason for change
@@ -4722,7 +4748,6 @@ class FormView extends View {
         try {
           const ImageCropView = window.MOJO?.plugins?.ImageCropView;
           if (!ImageCropView) {
-            console.warn("ImageCropView not available. Load lightbox extension for image cropping.");
             return;
           }
           const result = await ImageCropView.showDialog(previewUrl, {
@@ -4755,7 +4780,6 @@ class FormView extends View {
             element.value = "";
           }
         } catch (error) {
-          console.error("Error during image cropping:", error);
           this.data[fieldName] = file;
           await this.updateImagePreview(fieldName, previewUrl);
           this.emit("image:selected", {
@@ -4876,7 +4900,6 @@ class FormView extends View {
    * Handle file drop errors
    */
   async onFileDropError(error, event, files) {
-    console.error("File drop error:", error.message);
     this.showError(`File upload error: ${error.message}`);
     this.emit("file:error", {
       error,
@@ -4949,7 +4972,6 @@ class FormView extends View {
         try {
           data[textarea.name] = JSON.parse(textarea.value);
         } catch (e) {
-          console.warn(`Invalid JSON in field ${textarea.name}:`, textarea.value);
           data[textarea.name] = textarea.value;
         }
       });
@@ -4958,7 +4980,6 @@ class FormView extends View {
           try {
             data[key] = await this.fileToBase64(value);
           } catch (error) {
-            console.error(`Failed to convert file ${key} to base64:`, error);
             data[key] = null;
           }
         } else if (value instanceof FileList) {
@@ -4967,7 +4988,6 @@ class FormView extends View {
             try {
               base64Files.push(await this.fileToBase64(value[i]));
             } catch (error) {
-              console.error(`Failed to convert file ${key}[${i}] to base64:`, error);
               base64Files.push(null);
             }
           }
@@ -5135,7 +5155,6 @@ class FormView extends View {
         return formData;
       }
     } catch (error) {
-      console.error("Form submission error:", error);
       return {
         success: false,
         error: error.message || "An error occurred while submitting the form"
@@ -5155,22 +5174,17 @@ class FormView extends View {
     if (!formData) formData = await this.getFormData();
     const changes = this.getChangedData(formData);
     if (!changes || Object.keys(changes).length === 0) {
-      console.log("No changes detected, skipping save");
       return {
         success: true,
         message: "No changes to save",
         data: formData
       };
     }
-    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;
     } catch (error) {
-      console.error("Model save error:", error);
       throw error;
     }
   }
@@ -5182,19 +5196,12 @@ class FormView extends View {
   getChangedData(currentData) {
     if (!this.model) return currentData;
     const originalData = this.getOriginalModelData();
-    console.log("=== Change Detection ===");
-    console.log("Original model data:", originalData);
-    console.log("Current form data:", currentData instanceof FormData ? "[FormData object]" : currentData);
     let changes;
     if (currentData instanceof FormData) {
-      console.log("Comparing FormData...");
       changes = this.getChangedFormData(currentData, originalData);
     } else {
-      console.log("Comparing Object data...");
       changes = this.getChangedObjectData(currentData, originalData);
     }
-    console.log("Changes detected:", changes instanceof FormData ? "[FormData with changes]" : changes);
-    console.log("=== End Change Detection ===");
     return changes;
   }
   /**
@@ -5221,21 +5228,16 @@ class FormView extends View {
     let hasChanges = false;
     for (const [key, value] of currentData.entries()) {
       if (value instanceof File) {
-        if (value.size === 0 || value.name === "" || value.name === "blob") {
-          console.log(`  - ${key}: Empty file field (no change)`);
-        } else {
-          console.log(`  - ${key}: File upload detected (${value.name}, ${value.size} bytes)`);
+        if (value.size === 0 || value.name === "" || value.name === "blob") ;
+        else {
           changedData.set(key, value);
           hasChanges = true;
         }
       } else {
         const originalValue = originalData[key];
         if (value !== originalValue && value !== String(originalValue)) {
-          console.log(`  - ${key}: "${originalValue}" → "${value}"`);
           changedData.set(key, value);
           hasChanges = true;
-        } else {
-          console.log(`  - ${key}: unchanged ("${value}")`);
         }
       }
     }
@@ -5385,7 +5387,6 @@ class FormView extends View {
    * Show error message
    */
   showError(message) {
-    console.error("Form error:", message);
     this.emit("error", { message, form: this });
     if (this.element) {
       const existingAlerts = this.element.querySelectorAll(".alert");
@@ -5421,7 +5422,6 @@ class FormView extends View {
   async updateImagePreview(fieldName, imageUrl) {
     const dropZone = this.element.querySelector(`[data-field="${fieldName}"].image-drop-zone`);
     if (!dropZone) {
-      console.warn(`Could not find drop zone for field: ${fieldName}`);
       return;
     }
     let preview = dropZone.querySelector("img");
@@ -5931,4 +5931,4 @@ export {
   applyFileDropMixin as a,
   FormView$1 as b
 };
-//# sourceMappingURL=FormView-m5tw5nNB.js.map
+//# sourceMappingURL=FormView-BxSIJ_E_.js.map