@unvired/turboforms-embed-sdk 1.0.10 → 1.0.11

package/dist/unvired-form-sdk.html

@@ -59013,19 +59013,31 @@ function FormOnBackNavigation() {
 
 // ============================================  FORM-IO   ===========================================================
 
+// Button state management based on privateExternal and permission
 // Button state management based on privateExternal and permission
 function initialButtonSetup(privateExternal, permission) {
     const saveBtn = document.getElementById("saveBtn");
     const submitBtn = document.getElementById("submitBtn");
+    const completeOption = document.getElementById("completeOption");
+    const saveOption = document.getElementById("saveOption");
+    const completeDivider = document.getElementById("completeDivider");
+    const saveDivider = document.getElementById("saveDivider");
+
     if (!saveBtn || !submitBtn) return;
 
     const isPrivate = privateExternal === true || privateExternal === "true";
     const isPublic = privateExternal === false || privateExternal === "false";
     const permissionMode = String(permission || "").toLowerCase();
 
-    console.log("=== initialButtonSetup ===");
-    console.log("privateExternal:", privateExternal);
-    console.log("permission:", permissionMode);
+    // Helper to toggle dropdown items
+    const toggleDropdown = (option, divider, show) => {
+        if (option) option.style.display = show ? "block" : "none";
+        if (divider) divider.style.display = show ? "block" : "none";
+    };
+
+    // Default: Hide dropdown specific items
+    toggleDropdown(completeOption, completeDivider, false);
+    toggleDropdown(saveOption, saveDivider, false);
 
     // READ ONLY
     if (permissionMode === "read") {
@@ -59042,23 +59054,35 @@ function initialButtonSetup(privateExternal, permission) {
         console.log("Mode: PUBLIC WRITE → Show submit (disabled)");
         saveBtn.style.display = "none";
         submitBtn.style.display = "";
+        submitBtn.innerHTML = '<i class="icon save"></i> Submit';
         submitBtn.disabled = true;
     }
 
     // PRIVATE FORM - writemultiple
     else if (isPrivate && permissionMode === "writemultiple") {
-        console.log("Mode: PRIVATE WRITEMULTIPLE → Show submit (disabled)");
-        saveBtn.style.display = "none";
-        submitBtn.style.display = "";
-        submitBtn.disabled = true;
+        console.log(
+            "Mode: PRIVATE WRITEMULTIPLE → Show save (disabled), Complete in Dropdown"
+        );
+        saveBtn.style.display = "";
+        submitBtn.style.display = "none";
+        saveBtn.disabled = true;
+
+        // Show Complete in Dropdown
+        toggleDropdown(completeOption, completeDivider, true);
     }
 
     // PRIVATE FORM - writesingle
     else if (isPrivate && permissionMode === "writesingle") {
-        console.log("Mode: PRIVATE WRITESINGLE → Show save (disabled)");
-        saveBtn.style.display = "";
-        submitBtn.style.display = "none";
-        saveBtn.disabled = true;
+        console.log(
+            "Mode: PRIVATE WRITESINGLE → Show submit (disabled), Save in Dropdown"
+        );
+        saveBtn.style.display = "none";
+        submitBtn.style.display = "";
+        submitBtn.innerHTML = '<i class="icon save"></i> Complete';
+        submitBtn.disabled = true;
+
+        // Show Save in Dropdown
+        toggleDropdown(saveOption, saveDivider, true);
     }
 
     // DEFAULT / UNKNOWN
@@ -59066,6 +59090,7 @@ function initialButtonSetup(privateExternal, permission) {
         console.log("Mode: DEFAULT / UNKNOWN → Show submit (disabled)");
         saveBtn.style.display = "none";
         submitBtn.style.display = "";
+        submitBtn.innerHTML = '<i class="icon save"></i> Submit';
         submitBtn.disabled = true;
     }
 }
@@ -59089,16 +59114,12 @@ function onChangeButtonSetup(
             v !== undefined &&
             v !== null &&
             v !== "" &&
-            !(Array.isArray(v) && v.length === 0)
+            v !== false &&
+            !(Array.isArray(v) && v.length === 0) &&
+            !(typeof v === "object" && !Array.isArray(v) && Object.keys(v).length === 0)
     );
     const isComplete = completionPercentage >= 100;
 
-    console.log("=== onChangeButtonSetup ===");
-    console.log("privateExternal:", privateExternal);
-    console.log("permission:", permissionMode);
-    console.log("hasAnyValue:", hasAnyValue);
-    console.log("completionPercentage:", completionPercentage);
-
     // READ ONLY
     if (permissionMode === "read") {
         console.log("Mode: READ → Hide all buttons");
@@ -59110,26 +59131,24 @@ function onChangeButtonSetup(
     // PRIVATE FORM - writesingle
     if (isPrivate && permissionMode === "writesingle") {
         console.log("Mode: PRIVATE WRITESINGLE");
+        // Main: Complete (Submit)
         saveBtn.style.display = "none";
         submitBtn.style.display = "";
-        submitBtn.disabled = !hasAnyValue;
+
+        // Logic: Disable Complete until 100%
+        submitBtn.disabled = !isComplete;
         return;
     }
 
     // PRIVATE FORM - writemultiple
     if (isPrivate && permissionMode === "writemultiple") {
         console.log("Mode: PRIVATE WRITEMULTIPLE");
-        if (isComplete) {
-            console.log("→ Complete: Show submit");
-            saveBtn.style.display = "none";
-            submitBtn.style.display = "";
-            submitBtn.disabled = false;
-        } else {
-            console.log("→ Incomplete: Show save");
-            saveBtn.style.display = "";
-            submitBtn.style.display = "none";
-            saveBtn.disabled = !hasAnyValue;
-        }
+        // Main: Save
+        saveBtn.style.display = "";
+        submitBtn.style.display = "none";
+
+        // Logic: Enable Save if hasAnyValue
+        saveBtn.disabled = !hasAnyValue;
         return;
     }
 
@@ -59550,6 +59569,9 @@ function setupOnChange(privateExternal, permission) {
         const completion =
             mandatory === 0 ? 100 : Math.round((filledMandatory / mandatory) * 100);
 
+        calculationPercentage = completion;
+        completeFlag = completion >= 100;
+
         console.log("📊 Completion %:", completion);
         onChangeButtonSetup(completion, formObj.data, privateExternal, permission);
 
@@ -59708,6 +59730,22 @@ function loadComments() {
 function FormOnSave() {
     if (!formObj) return;
 
+    const formData = formObj.getValue().data;
+    const hasAnyValue = Object.values(formData || {}).some(
+        (v) =>
+            v !== undefined &&
+            v !== null &&
+            v !== "" &&
+            v !== false &&
+            !(Array.isArray(v) && v.length === 0) &&
+            !(typeof v === "object" && !Array.isArray(v) && Object.keys(v).length === 0)
+    );
+
+    if (!hasAnyValue) {
+        showDynamicModal("Attention", [{ label: "OK" }], "Please fill at least one field before saving.");
+        return;
+    }
+
     showDynamicModal("Do you want to save the data?", [
         {
             label: "Yes",

package/dist/unvired-forms-sdk.js

@@ -27234,6 +27234,10 @@ select.ui.dropdown {
           <i class="icon options"></i>More
         </button>
         <div id="moreTooltip" style="display: none;" class="ui vertical menu">
+          <div class="item" id="completeOption" onclick="FormOnSubmit()" style="display: none;">Complete</div>
+          <div class="divider" id="completeDivider" style="display: none;"></div>
+          <div class="item" id="saveOption" onclick="FormOnSave()" style="display: none;">Save</div>
+          <div class="divider" id="saveDivider" style="display: none;"></div>
           <div class="item">Documents</div>
           <div class="divider" id="comments-divider" style="display: none;"></div>
           <div class="item" id="comments-item" style="display: none;" onclick="loadComments()">Comments</div>
@@ -64975,12 +64979,27 @@ function FormOnBackNavigation() {
 function initialButtonSetup(privateExternal, permission) {
   const saveBtn = document.getElementById("saveBtn");
   const submitBtn = document.getElementById("submitBtn");
+  const completeOption = document.getElementById("completeOption");
+  const saveOption = document.getElementById("saveOption");
+  const completeDivider = document.getElementById("completeDivider");
+  const saveDivider = document.getElementById("saveDivider");
+
   if (!saveBtn || !submitBtn) return;
 
   const isPrivate = privateExternal === true || privateExternal === "true";
   const isPublic = privateExternal === false || privateExternal === "false";
   const permissionMode = String(permission || "").toLowerCase();
 
+  // Helper to toggle dropdown items
+  const toggleDropdown = (option, divider, show) => {
+    if (option) option.style.display = show ? "block" : "none";
+    if (divider) divider.style.display = show ? "block" : "none";
+  };
+
+  // Default: Hide dropdown specific items
+  toggleDropdown(completeOption, completeDivider, false);
+  toggleDropdown(saveOption, saveDivider, false);
+
   // READ ONLY
   if (permissionMode === "read") {
     console.log("Mode: READ \u2192 Hide all buttons");
@@ -64996,23 +65015,35 @@ function initialButtonSetup(privateExternal, permission) {
     console.log("Mode: PUBLIC WRITE \u2192 Show submit (disabled)");
     saveBtn.style.display = "none";
     submitBtn.style.display = "";
+    submitBtn.innerHTML = '<i class="icon save"></i> Submit';
     submitBtn.disabled = true;
   }
 
   // PRIVATE FORM - writemultiple
   else if (isPrivate && permissionMode === "writemultiple") {
-    console.log("Mode: PRIVATE WRITEMULTIPLE \u2192 Show submit (disabled)");
-    saveBtn.style.display = "none";
-    submitBtn.style.display = "";
-    submitBtn.disabled = true;
+    console.log(
+      "Mode: PRIVATE WRITEMULTIPLE \u2192 Show save (disabled), Complete in Dropdown"
+    );
+    saveBtn.style.display = "";
+    submitBtn.style.display = "none";
+    saveBtn.disabled = true;
+
+    // Show Complete in Dropdown
+    toggleDropdown(completeOption, completeDivider, true);
   }
 
   // PRIVATE FORM - writesingle
   else if (isPrivate && permissionMode === "writesingle") {
-    console.log("Mode: PRIVATE WRITESINGLE \u2192 Show save (disabled)");
-    saveBtn.style.display = "";
-    submitBtn.style.display = "none";
-    saveBtn.disabled = true;
+    console.log(
+      "Mode: PRIVATE WRITESINGLE \u2192 Show submit (disabled), Save in Dropdown"
+    );
+    saveBtn.style.display = "none";
+    submitBtn.style.display = "";
+    submitBtn.innerHTML = '<i class="icon save"></i> Complete';
+    submitBtn.disabled = true;
+
+    // Show Save in Dropdown
+    toggleDropdown(saveOption, saveDivider, true);
   }
 
   // DEFAULT / UNKNOWN
@@ -65020,6 +65051,7 @@ function initialButtonSetup(privateExternal, permission) {
     console.log("Mode: DEFAULT / UNKNOWN \u2192 Show submit (disabled)");
     saveBtn.style.display = "none";
     submitBtn.style.display = "";
+    submitBtn.innerHTML = '<i class="icon save"></i> Submit';
     submitBtn.disabled = true;
   }
 }
@@ -65043,7 +65075,9 @@ function onChangeButtonSetup(
       v !== undefined &&
       v !== null &&
       v !== "" &&
-      !(Array.isArray(v) && v.length === 0)
+      v !== false &&
+      !(Array.isArray(v) && v.length === 0) &&
+      !(typeof v === "object" && !Array.isArray(v) && Object.keys(v).length === 0)
   );
   const isComplete = completionPercentage >= 100;
 
@@ -65058,26 +65092,24 @@ function onChangeButtonSetup(
   // PRIVATE FORM - writesingle
   if (isPrivate && permissionMode === "writesingle") {
     console.log("Mode: PRIVATE WRITESINGLE");
+    // Main: Complete (Submit)
     saveBtn.style.display = "none";
     submitBtn.style.display = "";
-    submitBtn.disabled = !hasAnyValue;
+
+    // Logic: Disable Complete until 100%
+    submitBtn.disabled = !isComplete;
     return;
   }
 
   // PRIVATE FORM - writemultiple
   if (isPrivate && permissionMode === "writemultiple") {
     console.log("Mode: PRIVATE WRITEMULTIPLE");
-    if (isComplete) {
-      console.log("\u2192 Complete: Show submit");
-      saveBtn.style.display = "none";
-      submitBtn.style.display = "";
-      submitBtn.disabled = false;
-    } else {
-      console.log("\u2192 Incomplete: Show save");
-      saveBtn.style.display = "";
-      submitBtn.style.display = "none";
-      saveBtn.disabled = !hasAnyValue;
-    }
+    // Main: Save
+    saveBtn.style.display = "";
+    submitBtn.style.display = "none";
+
+    // Logic: Enable Save if hasAnyValue
+    saveBtn.disabled = !hasAnyValue;
     return;
   }
 
@@ -65666,6 +65698,22 @@ async function loadComments() {
 function FormOnSave() {
   if (!formObj) return;
 
+  const formData = formObj.getValue().data;
+  const hasAnyValue = Object.values(formData || {}).some(
+    (v) =>
+      v !== undefined &&
+      v !== null &&
+      v !== "" &&
+      v !== false &&
+      !(Array.isArray(v) && v.length === 0) &&
+      !(typeof v === "object" && !Array.isArray(v) && Object.keys(v).length === 0)
+  );
+
+  if (!hasAnyValue) {
+    showDynamicModal("Attention", [{ label: "OK" }], "Please fill at least one field before saving.");
+    return;
+  }
+
   showDynamicModal("Do you want to save the data?", [
     {
       label: "Yes",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unvired/turboforms-embed-sdk",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Reusable vanilla JS form library that works with React, Angular, Ionic, etc.",
   "main": "dist/unvired-forms-sdk.js",
   "types": "dist/index.d.ts",