form-builder-pro 1.2.9 → 1.3.1

package/dist/index.css

@@ -863,21 +863,21 @@ body {
 .inset-0 {
   inset: 0px;
 }
-.right-1 {
-  right: 0.25rem;
-}
 .right-2 {
   right: 0.5rem;
 }
-.right-6 {
-  right: 1.5rem;
+.right-8 {
+  right: 2rem;
 }
-.top-1 {
-  top: 0.25rem;
+.right-\[16\%\] {
+  right: 16%;
 }
 .top-2 {
   top: 0.5rem;
 }
+.top-\[6px\] {
+  top: 6px;
+}
 .z-10 {
   z-index: 10;
 }
@@ -1005,9 +1005,6 @@ body {
 .min-h-\[100px\] {
   min-height: 100px;
 }
-.min-h-\[120px\] {
-  min-height: 120px;
-}
 .min-h-\[200px\] {
   min-height: 200px;
 }
@@ -1035,6 +1032,9 @@ body {
 .w-8 {
   width: 2rem;
 }
+.w-\[256px\] {
+  width: 256px;
+}
 .w-\[300px\] {
   width: 300px;
 }
@@ -1044,8 +1044,8 @@ body {
 .max-w-2xl {
   max-width: 42rem;
 }
-.max-w-\[180px\] {
-  max-width: 180px;
+.max-w-\[140px\] {
+  max-width: 140px;
 }
 .max-w-full {
   max-width: 100%;
@@ -1254,17 +1254,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(1 159 162 / var(--tw-bg-opacity, 1));
 }
-.bg-\[\#3b497e\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 73 126 / var(--tw-bg-opacity, 1));
-}
 .bg-\[\#635bff\] {
   --tw-bg-opacity: 1;
   background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
 }
-.bg-\[\#847dff1a\] {
-  background-color: #847dff1a;
-}
 .bg-\[\#e7e7ff\] {
   --tw-bg-opacity: 1;
   background-color: rgb(231 231 255 / var(--tw-bg-opacity, 1));
@@ -1331,8 +1324,8 @@ body {
 .p-8 {
   padding: 2rem;
 }
-.p-\[0\.5px\] {
-  padding: 0.5px;
+.p-\[2px\] {
+  padding: 2px;
 }
 .px-1 {
   padding-left: 0.25rem;
@@ -1757,6 +1750,16 @@ input[type="radio"]:checked::after {
   background-color: rgb(1 138 141 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-\[\#635bff\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-\[\#ef2f2f\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 47 47 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-blue-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
@@ -1821,6 +1824,11 @@ input[type="radio"]:checked::after {
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .hover\:shadow-sm:hover {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);

package/dist/index.js

@@ -4610,10 +4610,12 @@ function transformField(field) {
     transformed.optionsSource = field.optionsSource;
   if (field.customOptionsEnabled !== void 0)
     transformed.customOptionsEnabled = field.customOptionsEnabled;
-  if (field.groupName !== void 0)
-    transformed.groupName = field.groupName;
-  if (field.masterTypeName !== void 0)
-    transformed.masterTypeName = field.masterTypeName;
+  if (transformed.optionSource === "MASTER") {
+    if (field.groupName !== void 0)
+      transformed.groupName = field.groupName;
+    if (field.masterTypeName !== void 0)
+      transformed.masterTypeName = field.masterTypeName;
+  }
   if ((normalizedType === "select" || normalizedType === "radio" || normalizedType === "checkbox") && field.options && Array.isArray(field.options)) {
     transformed.options = field.options.map((opt, idx) => {
       if (opt && typeof opt === "object" && "label" in opt && "value" in opt) {
@@ -4778,10 +4780,12 @@ function fieldToPayload(field) {
     payload.optionSource = field.optionSource;
   if (field.customOptionsEnabled !== void 0)
     payload.customOptionsEnabled = field.customOptionsEnabled;
-  if (field.groupName !== void 0)
-    payload.groupName = field.groupName;
-  if (field.masterTypeName !== void 0)
-    payload.masterTypeName = field.masterTypeName;
+  if (field.optionSource === "MASTER") {
+    if (field.groupName !== void 0)
+      payload.groupName = field.groupName;
+    if (field.masterTypeName !== void 0)
+      payload.masterTypeName = field.masterTypeName;
+  }
   if (field.lookupSourceType !== void 0)
     payload.lookupSourceType = field.lookupSourceType;
   if (field.lookupSource !== void 0)
@@ -6275,7 +6279,7 @@ var FieldRenderer = class {
     const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
     const container = createElement("div", { className: "image-field-wrapper flex flex-col gap-3 w-full" });
     const previewWrap = createElement("div", {
-      className: "relative rounded-md border border-input bg-gray-50 dark:bg-gray-800 overflow-hidden min-h-[120px] flex items-center justify-center"
+      className: "relative rounded-md border border-input bg-gray-50 dark:bg-gray-800 overflow-hidden min-h-[100px] flex items-center justify-center"
     });
     if (imageValue) {
       const img = createElement("img", {
@@ -8932,13 +8936,13 @@ var FieldWrapper = class {
       });
     }
     if (isSelected) {
-      fieldWrapper.classList.add("ring-2", "bg-[#847dff1a]", "dark:bg-blue-900/20");
+      fieldWrapper.classList.add("ring-2", "bg-transparent", "dark:bg-blue-900/20");
     }
     fieldWrapper.appendChild(createElement("div", {
-      className: `absolute top-2 right-6 cursor-move p-1 rounded bg-[#3b497e] p-[0.5px] mr-1 text-white group-hover:opacity-100 transition-opacity field-handle z-10 ${isSelected ? "opacity-100" : ""}`
-    }, [getIcon("GripVertical", 16)]));
+      className: `absolute top-[6px] bg-[#e7e7ff]  hover:bg-[#635bff] hover:text-white  right-8 cursor-move p-1 rounded  p-[2px] mr-1 text-[#635bff] group-hover:opacity-100 transition-opacity field-handle z-10 ${isSelected ? "opacity-100" : ""}`
+    }, [getIcon("GripVertical", 20)]));
     fieldWrapper.appendChild(createElement("button", {
-      className: `absolute top-1 right-1 p-1 rounded text-red-500  group-hover:opacity-100 transition-opacity z-10 ${isSelected ? "opacity-100" : ""}`,
+      className: `absolute top-[6px] right-2  rounded text-red-600 bg-[#f7a1a14d] text-red-500 p-1 hover:bg-[#ef2f2f] hover:text-white   group-hover:opacity-100  transition-opacity z-10 ${isSelected ? "opacity-100" : ""}`,
       onclick: (e) => {
         e.stopPropagation();
         if (confirm("Delete this field?")) {
@@ -8946,7 +8950,7 @@ var FieldWrapper = class {
         }
       }
     }, [getIcon("Trash2", 16)]));
-    const content = createElement("div", { className: "p-3  pointer-events-none" });
+    const content = createElement("div", { className: "p-2  pointer-events-none " });
     content.appendChild(FieldRenderer.render(field, null, void 0, true));
     fieldWrapper.appendChild(content);
     return fieldWrapper;
@@ -9113,7 +9117,7 @@ var SectionList = class {
   }
   render() {
     const listContainer = createElement("div", {
-      className: "space-y-6 min-h-[200px] ",
+      className: "space-y-6 ",
       // pb-20 for extra scrolling space
       id: "sections-list",
       "data-drop-zone": "sections"
@@ -9632,7 +9636,7 @@ var FormBuilder = class {
     }, [getIcon("Cog", 20)]);
     right.appendChild(settingsBtn);
     const clearBtn = createElement("button", {
-      className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 bg-[#f7a1a14d] text-red-500 rounded-md transition-colors",
+      className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 bg-[#f7a1a14d] text-red-500 hover:bg-[#ef2f2f] hover:text-white rounded-md transition-colors",
       onclick: () => {
         if (confirm("Are you sure?")) {
           formStore.getState().setSchema({ id: "new", title: "New Form", formName: "newForm", sections: [] });
@@ -9640,7 +9644,7 @@ var FormBuilder = class {
       }
     }, [getIcon("Trash2", 16), createElement("span", { className: "", title: "Clear" })]);
     const previewBtn = createElement("button", {
-      className: `flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${state.isPreviewMode ? "text-[#635bff] bg-[#e7e7ff] " : "text-[#635bff] bg-[#e7e7ff]"}`,
+      className: `flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${state.isPreviewMode ? "text-[#635bff] bg-[#e7e7ff] hover:bg-[#635bff] hover:text-white" : "text-[#635bff] bg-[#e7e7ff] hover:bg-[#635bff] hover:text-white"}`,
       onclick: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -9649,7 +9653,7 @@ var FormBuilder = class {
       title: state.isPreviewMode ? "Exit Preview" : "Preview Form"
     }, [getIcon(state.isPreviewMode ? "X" : "Eye", 16)]);
     const saveBtn = createElement("button", {
-      className: "flex items-center px-3 py-2 text-sm font-medium text-[#635bff] bg-[#e7e7ff]  rounded-md shadow-sm transition-colors",
+      className: "flex items-center px-3 py-2 text-sm font-medium text-[#635bff] bg-[#e7e7ff] hover:bg-[#635bff] hover:text-white  rounded-md shadow-sm transition-colors",
       onclick: () => {
         const schema = formStore.getState().schema;
         const numericFields = schema.sections.flatMap((s) => s.fields).filter((f) => f.type === "number");
@@ -9820,7 +9824,7 @@ var FormBuilder = class {
     const sectionList = new SectionList(state.schema, state.selectedFieldId);
     inner.appendChild(sectionList.getElement());
     const addSectionBtn = createElement("button", {
-      className: "w-full mt-6 py-3  dark:border-gray-700 rounded-md text-sm text-gray-500 bg-[#635bff] max-w-[180px]  text-white transition-colors flex items-center justify-center font-medium",
+      className: "w-full mt-6 py-3  dark:border-gray-700 rounded-md text-sm text-gray-500 bg-[#635bff] max-w-[140px]  text-white transition-colors flex items-center justify-center font-medium",
       onclick: () => formStore.getState().addSection()
     }, [getIcon("Plus", 20), createElement("span", { className: "ml-2", text: "Add Section" })]);
     inner.appendChild(addSectionBtn);
@@ -10161,112 +10165,6 @@ var FormBuilder = class {
         `show-country-name-${selectedField.id}`
       ));
     }
-    if (selectedField.type === "select" && selectedField.optionSource === "MASTER") {
-      const masterTypes = formStore.getState().masterTypes;
-      const activeMasterTypes = masterTypes.filter((mt) => mt.active === true);
-      const dropdownOptionsMap = formStore.getState().dropdownOptionsMap;
-      const convertIndexesToOptions = (indexes) => {
-        if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
-          return [];
-        }
-        return indexes.map((item, index2) => {
-          if (typeof item === "string") {
-            return { label: item, value: item };
-          }
-          if (typeof item === "object" && item !== null) {
-            const label = item.label || item.name || item.displayName || item.text || `Option ${index2 + 1}`;
-            const value = item.value || item.id || item.name || String(index2);
-            return { label, value };
-          }
-          return { label: String(item), value: String(item) };
-        });
-      };
-      if (activeMasterTypes.length > 0) {
-        const groupNameGroup = createElement("div", { className: "mb-4" });
-        groupNameGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Master List" }));
-        const groupNameSelect = createElement("select", {
-          className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
-          onchange: (e) => {
-            const selectedEnumName = e.target.value;
-            if (selectedEnumName) {
-              const selectedMasterType = activeMasterTypes.find((mt) => mt.enumName === selectedEnumName);
-              if (selectedMasterType) {
-                let options = [];
-                if (dropdownOptionsMap && dropdownOptionsMap[selectedEnumName]) {
-                  options = dropdownOptionsMap[selectedEnumName];
-                } else if (selectedMasterType.indexes && selectedMasterType.indexes.length > 0) {
-                  options = convertIndexesToOptions(selectedMasterType.indexes);
-                }
-                formStore.getState().updateField(selectedField.id, {
-                  groupName: {
-                    id: selectedMasterType.id,
-                    name: selectedMasterType.name
-                  },
-                  masterTypeName: selectedEnumName,
-                  options: options.length > 0 ? options : void 0
-                });
-                if (this.options.onGroupSelectionChange) {
-                  this.options.onGroupSelectionChange({
-                    fieldId: selectedField.id,
-                    groupEnumName: selectedEnumName
-                  });
-                }
-              }
-            } else {
-              formStore.getState().updateField(selectedField.id, {
-                groupName: void 0,
-                masterTypeName: void 0,
-                options: void 0
-                // Clear options when groupName is cleared
-              });
-            }
-          }
-        });
-        let currentMasterType;
-        if (selectedField.masterTypeName) {
-          currentMasterType = activeMasterTypes.find((mt) => mt.enumName === selectedField.masterTypeName);
-        } else if (selectedField.groupName) {
-          currentMasterType = activeMasterTypes.find(
-            (mt) => mt.id === selectedField.groupName?.id || mt.name === selectedField.groupName?.name
-          );
-        }
-        groupNameSelect.appendChild(createElement("option", {
-          value: "",
-          text: "None",
-          selected: !currentMasterType
-        }));
-        activeMasterTypes.forEach((mt) => {
-          const isSelected = currentMasterType && (selectedField.masterTypeName && mt.enumName === selectedField.masterTypeName || selectedField.groupName && (mt.id === selectedField.groupName?.id || mt.name === selectedField.groupName?.name));
-          const optionValue = mt.enumName || mt.id || mt.name;
-          groupNameSelect.appendChild(createElement("option", {
-            value: optionValue,
-            text: mt.displayName || mt.name,
-            selected: !!isSelected
-          }));
-        });
-        groupNameGroup.appendChild(groupNameSelect);
-        body.appendChild(groupNameGroup);
-        if (currentMasterType && (!selectedField.options || selectedField.options.length === 0)) {
-          let options = [];
-          if (currentMasterType.enumName && dropdownOptionsMap && dropdownOptionsMap[currentMasterType.enumName]) {
-            options = dropdownOptionsMap[currentMasterType.enumName];
-          } else if (currentMasterType.indexes && currentMasterType.indexes.length > 0) {
-            options = convertIndexesToOptions(currentMasterType.indexes);
-          }
-          if (options.length > 0) {
-            formStore.getState().updateField(selectedField.id, { options });
-          }
-          if (selectedField.masterTypeName && !selectedField.groupName) {
-            formStore.getState().updateField(selectedField.id, {
-              groupName: {
-                id: currentMasterType.id,
-                name: currentMasterType.name
-              }
-            });
-          }
-        }
-      }
-    }
     if (["select", "checkbox", "radio"].includes(selectedField.type)) {
       const optionSourceHeader = createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6", text: "Option Source" });
       body.appendChild(optionSourceHeader);
@@ -10278,12 +10176,18 @@ var FormBuilder = class {
         onchange: (e) => {
           const source = e.target.value;
           const updates = { optionSource: source };
-          if (source === "MASTER" && !selectedField.masterTypeName && !selectedField.groupName) ; else if (source === "STATIC") {
+          if (source === "MASTER") ; else if (source === "STATIC") {
             updates.customOptionsEnabled = true;
+            updates.groupName = void 0;
+            updates.masterTypeName = void 0;
+            updates.options = void 0;
           } else if (source === "LOOKUP") {
             if (!selectedField.lookupSourceType) {
               updates.lookupSourceType = "MODULE";
             }
+            updates.groupName = void 0;
+            updates.masterTypeName = void 0;
+            updates.options = void 0;
           }
           formStore.getState().updateField(selectedField.id, updates);
           this.render();
@@ -10296,6 +10200,101 @@ var FormBuilder = class {
       }
       optionSourceGroup.appendChild(optionSourceSelect);
       body.appendChild(optionSourceGroup);
+      if (selectedField.type === "select" && selectedField.optionSource === "MASTER") {
+        const masterTypes = formStore.getState().masterTypes;
+        const activeMasterTypes = masterTypes.filter((mt) => mt.active === true);
+        const dropdownOptionsMap = formStore.getState().dropdownOptionsMap;
+        const convertIndexesToOptions = (indexes) => {
+          if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
+            return [];
+          }
+          return indexes.map((item, index2) => {
+            if (typeof item === "string") {
+              return { label: item, value: item };
+            }
+            if (typeof item === "object" && item !== null) {
+              const label = item.label || item.name || item.displayName || item.text || `Option ${index2 + 1}`;
+              const value = item.value || item.id || item.name || String(index2);
+              return { label, value };
+            }
+            return { label: String(item), value: String(item) };
+          });
+        };
+        if (activeMasterTypes.length > 0) {
+          const groupNameGroup = createElement("div", { className: "mb-4" });
+          groupNameGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Master List" }));
+          const groupNameSelect = createElement("select", {
+            className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent",
+            onchange: (e) => {
+              const selectedEnumName = e.target.value;
+              if (selectedEnumName) {
+                const selectedMasterType = activeMasterTypes.find((mt) => mt.enumName === selectedEnumName);
+                if (selectedMasterType) {
+                  let options = [];
+                  if (dropdownOptionsMap && dropdownOptionsMap[selectedEnumName]) {
+                    options = dropdownOptionsMap[selectedEnumName];
+                  } else if (selectedMasterType.indexes && selectedMasterType.indexes.length > 0) {
+                    options = convertIndexesToOptions(selectedMasterType.indexes);
+                  }
+                  formStore.getState().updateField(selectedField.id, {
+                    groupName: { id: selectedMasterType.id, name: selectedMasterType.name },
+                    masterTypeName: selectedEnumName,
+                    options: options.length > 0 ? options : void 0
+                  });
+                  if (this.options.onGroupSelectionChange) {
+                    this.options.onGroupSelectionChange({
+                      fieldId: selectedField.id,
+                      groupEnumName: selectedEnumName
+                    });
+                  }
+                }
+              } else {
+                formStore.getState().updateField(selectedField.id, {
+                  groupName: void 0,
+                  masterTypeName: void 0,
+                  options: void 0
+                });
+              }
+            }
+          });
+          let currentMasterType;
+          if (selectedField.masterTypeName) {
+            currentMasterType = activeMasterTypes.find((mt) => mt.enumName === selectedField.masterTypeName);
+          } else if (selectedField.groupName) {
+            currentMasterType = activeMasterTypes.find(
+              (mt) => mt.id === selectedField.groupName?.id || mt.name === selectedField.groupName?.name
+            );
+          }
+          groupNameSelect.appendChild(createElement("option", { value: "", text: "None", selected: !currentMasterType }));
+          activeMasterTypes.forEach((mt) => {
+            const isSelected = currentMasterType && (selectedField.masterTypeName && mt.enumName === selectedField.masterTypeName || selectedField.groupName && (mt.id === selectedField.groupName?.id || mt.name === selectedField.groupName?.name));
+            const optionValue = mt.enumName || mt.id || mt.name;
+            groupNameSelect.appendChild(createElement("option", {
+              value: optionValue,
+              text: mt.displayName || mt.name,
+              selected: !!isSelected
+            }));
+          });
+          groupNameGroup.appendChild(groupNameSelect);
+          body.appendChild(groupNameGroup);
+          if (currentMasterType && (!selectedField.options || selectedField.options.length === 0)) {
+            let options = [];
+            if (currentMasterType.enumName && dropdownOptionsMap && dropdownOptionsMap[currentMasterType.enumName]) {
+              options = dropdownOptionsMap[currentMasterType.enumName];
+            } else if (currentMasterType.indexes && currentMasterType.indexes.length > 0) {
+              options = convertIndexesToOptions(currentMasterType.indexes);
+            }
+            if (options.length > 0) {
+              formStore.getState().updateField(selectedField.id, { options });
+            }
+            if (selectedField.masterTypeName && !selectedField.groupName) {
+              formStore.getState().updateField(selectedField.id, {
+                groupName: { id: currentMasterType.id, name: currentMasterType.name }
+              });
+            }
+          }
+        }
+      }
       if (selectedField.type === "select" && selectedField.optionSource === "LOOKUP") {
         const lookupSourceTypeGroup = createElement("div", { className: "mb-4" });
         lookupSourceTypeGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Source Type" }));
@@ -10493,10 +10492,10 @@ var FormBuilder = class {
         };
         const optionsList = createElement("div", { className: "space-y-2 mb-3" });
         options.forEach((opt, index2) => {
-          const optionRow = createElement("div", { className: "flex gap-2 items-center" });
+          const optionRow = createElement("div", { className: "flex gap-2 items-center w-[256px]" });
           const labelInput = createElement("input", {
             type: "text",
-            className: "flex-1 px-2 py-1.5 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-sm",
+            className: "flex-1 px-2 py-1.5 border border-gray-300 w-full dark:border-gray-700 rounded-md bg-transparent text-sm",
             value: opt.label,
             placeholder: "Option label",
             "data-focus-id": `field-option-label-${selectedField.id}-${index2}`,
@@ -10511,7 +10510,7 @@ var FormBuilder = class {
           });
           const valueInput = createElement("input", {
             type: "text",
-            className: "flex-1 px-2 py-1.5 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent text-sm",
+            className: "flex-1 px-2 py-1.5 border border-gray-300 w-full dark:border-gray-700 rounded-md bg-transparent text-sm",
             value: opt.value,
             placeholder: "Option value",
             "data-focus-id": `field-option-value-${selectedField.id}-${index2}`,
@@ -10545,7 +10544,7 @@ var FormBuilder = class {
         body.appendChild(optionsList);
         const addOptionBtn = createElement("button", {
           type: "button",
-          className: "w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors",
+          className: "w-full mt-6 py-2  dark:border-gray-700 rounded-md text-sm text-gray-500 bg-[#635bff]   text-white transition-colors flex items-center justify-center font-medium transition-colors",
           text: "Add Option",
           onclick: () => {
             const currentOptions = getCurrentOptions();