form-builder-pro 1.0.6 → 1.0.8

package/dist/index.d.mts

@@ -109,6 +109,12 @@ interface FormState {
     existingForms: FormSchema[];
     templates: FormSection[];
     masterTypes: MasterType[];
+    dropdownOptionsMap: {
+        [groupEnumName: string]: {
+            label: string;
+            value: string;
+        }[];
+    };
 }
 interface FormActions {
     setSchema: (schema: FormSchema) => void;
@@ -116,6 +122,12 @@ interface FormActions {
     setExistingForms: (forms: FormSchema[]) => void;
     setTemplates: (templates: FormSection[]) => void;
     setMasterTypes: (masterTypes: MasterType[]) => void;
+    setDropdownOptionsMap: (map: {
+        [groupEnumName: string]: {
+            label: string;
+            value: string;
+        }[];
+    }) => void;
     loadForm: (formId: string) => void;
     cloneExistingForm: (formId: string) => void;
     importSection: (section: FormSection) => void;
@@ -149,6 +161,25 @@ interface FormBuilderOptions {
     data?: {
         masterTypes?: MasterType[];
     };
+    masterTypeGroups?: {
+        id: string;
+        displayName: string;
+        enumName: string;
+    }[];
+    dropdownOptionsMap?: {
+        [groupEnumName: string]: {
+            label: string;
+            value: string;
+        }[];
+    };
+    onGroupSelectionChange?: (event: {
+        fieldId: string;
+        groupEnumName: string;
+    }) => void;
+    onDropdownValueChange?: (event: {
+        fieldId: string;
+        value: string;
+    }) => void;
 }
 declare class FormBuilder {
     private container;
@@ -162,6 +193,17 @@ declare class FormBuilder {
     applyTemplate(template: FormSection): void;
     updateExistingForms(forms: FormSchema[]): void;
     updateTemplates(templates: FormSection[]): void;
+    updateDropdownOptionsMap(dropdownOptionsMap: {
+        [groupEnumName: string]: {
+            label: string;
+            value: string;
+        }[];
+    }): void;
+    updateMasterTypeGroups(masterTypeGroups: {
+        id: string;
+        displayName: string;
+        enumName: string;
+    }[]): void;
     loadFormTemplates(formTemplates: FormSchema[]): void;
     private setupSubscriptions;
     destroy(): void;
@@ -180,7 +222,11 @@ declare class FormRenderer {
     private schema;
     private data;
     private onSubmit?;
-    constructor(container: HTMLElement, schema: FormSchema, onSubmit?: (data: any) => void);
+    private onDropdownValueChange?;
+    constructor(container: HTMLElement, schema: FormSchema, onSubmit?: (data: any) => void, onDropdownValueChange?: (event: {
+        fieldId: string;
+        value: string;
+    }) => void);
     setSchema(schema: FormSchema): void;
     private render;
 }

package/dist/index.d.ts

@@ -109,6 +109,12 @@ interface FormState {
     existingForms: FormSchema[];
     templates: FormSection[];
     masterTypes: MasterType[];
+    dropdownOptionsMap: {
+        [groupEnumName: string]: {
+            label: string;
+            value: string;
+        }[];
+    };
 }
 interface FormActions {
     setSchema: (schema: FormSchema) => void;
@@ -116,6 +122,12 @@ interface FormActions {
     setExistingForms: (forms: FormSchema[]) => void;
     setTemplates: (templates: FormSection[]) => void;
     setMasterTypes: (masterTypes: MasterType[]) => void;
+    setDropdownOptionsMap: (map: {
+        [groupEnumName: string]: {
+            label: string;
+            value: string;
+        }[];
+    }) => void;
     loadForm: (formId: string) => void;
     cloneExistingForm: (formId: string) => void;
     importSection: (section: FormSection) => void;
@@ -149,6 +161,25 @@ interface FormBuilderOptions {
     data?: {
         masterTypes?: MasterType[];
     };
+    masterTypeGroups?: {
+        id: string;
+        displayName: string;
+        enumName: string;
+    }[];
+    dropdownOptionsMap?: {
+        [groupEnumName: string]: {
+            label: string;
+            value: string;
+        }[];
+    };
+    onGroupSelectionChange?: (event: {
+        fieldId: string;
+        groupEnumName: string;
+    }) => void;
+    onDropdownValueChange?: (event: {
+        fieldId: string;
+        value: string;
+    }) => void;
 }
 declare class FormBuilder {
     private container;
@@ -162,6 +193,17 @@ declare class FormBuilder {
     applyTemplate(template: FormSection): void;
     updateExistingForms(forms: FormSchema[]): void;
     updateTemplates(templates: FormSection[]): void;
+    updateDropdownOptionsMap(dropdownOptionsMap: {
+        [groupEnumName: string]: {
+            label: string;
+            value: string;
+        }[];
+    }): void;
+    updateMasterTypeGroups(masterTypeGroups: {
+        id: string;
+        displayName: string;
+        enumName: string;
+    }[]): void;
     loadFormTemplates(formTemplates: FormSchema[]): void;
     private setupSubscriptions;
     destroy(): void;
@@ -180,7 +222,11 @@ declare class FormRenderer {
     private schema;
     private data;
     private onSubmit?;
-    constructor(container: HTMLElement, schema: FormSchema, onSubmit?: (data: any) => void);
+    private onDropdownValueChange?;
+    constructor(container: HTMLElement, schema: FormSchema, onSubmit?: (data: any) => void, onDropdownValueChange?: (event: {
+        fieldId: string;
+        value: string;
+    }) => void);
     setSchema(schema: FormSchema): void;
     private render;
 }

package/dist/index.js

@@ -4168,6 +4168,7 @@ var formStore = createStore((set, get) => ({
   existingForms: [],
   templates: [],
   masterTypes: [],
+  dropdownOptionsMap: {},
   setSchema: (schema) => {
     const convertIndexesToOptions = (indexes) => {
       if (!indexes || !Array.isArray(indexes) || indexes.length === 0) {
@@ -4185,18 +4186,43 @@ var formStore = createStore((set, get) => ({
         return { label: String(item), value: String(item) };
       });
     };
+    const areDefaultOptions = (options) => {
+      if (!options || options.length === 0)
+        return true;
+      return options.every(
+        (opt, idx) => opt.label === `Option ${idx + 1}` && (opt.value === `opt${idx + 1}` || opt.value === `Option ${idx + 1}`)
+      );
+    };
     const state = get();
     if (state.masterTypes && state.masterTypes.length > 0 && schema.sections) {
       const updatedSections = schema.sections.map((section) => ({
         ...section,
         fields: section.fields.map((field) => {
-          if (field.type === "select" && field.groupName && (!field.options || field.options.length === 0)) {
+          if (field.type === "select" && field.groupName) {
             const masterType = state.masterTypes.find(
               (mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
             );
-            if (masterType && masterType.indexes && masterType.indexes.length > 0) {
-              const options = convertIndexesToOptions(masterType.indexes);
-              return { ...field, options };
+            if (masterType) {
+              if (masterType.enumName && state.dropdownOptionsMap && state.dropdownOptionsMap[masterType.enumName]) {
+                return { ...field, options: state.dropdownOptionsMap[masterType.enumName] };
+              }
+              if (!masterType.indexes || masterType.indexes.length === 0) {
+                console.warn(`[FormBuilder] Master type "${masterType.displayName}" (${masterType.name}) has empty indexes array. Dropdown will have no options. Please ensure the API returns populated indexes.`, {
+                  masterTypeId: masterType.id,
+                  masterTypeName: masterType.name,
+                  enumName: masterType.enumName,
+                  indexes: masterType.indexes
+                });
+              }
+              if (masterType.indexes && masterType.indexes.length > 0) {
+                if (!field.options || field.options.length === 0 || areDefaultOptions(field.options)) {
+                  const options = convertIndexesToOptions(masterType.indexes);
+                  console.log(`[FormBuilder] Populating ${options.length} options from master type "${masterType.displayName}"`);
+                  return { ...field, options };
+                }
+              }
+            } else {
+              console.warn("[FormBuilder] Master type not found for groupName:", field.groupName);
             }
           }
           return field;
@@ -4207,34 +4233,129 @@ var formStore = createStore((set, get) => ({
       set({ schema });
     }
   },
-  togglePreview: () => set((state) => ({ isPreviewMode: !state.isPreviewMode })),
+  togglePreview: () => {
+    const state = get();
+    if (state.masterTypes && state.masterTypes.length > 0 && state.schema.sections) {
+      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) };
+        });
+      };
+      const areDefaultOptions = (options) => {
+        if (!options || options.length === 0)
+          return true;
+        return options.every(
+          (opt, idx) => opt.label === `Option ${idx + 1}` && (opt.value === `opt${idx + 1}` || opt.value === `Option ${idx + 1}`)
+        );
+      };
+      const updatedSections = state.schema.sections.map((section) => ({
+        ...section,
+        fields: section.fields.map((field) => {
+          if (field.type === "select" && field.groupName) {
+            const masterType = state.masterTypes.find(
+              (mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
+            );
+            if (masterType && masterType.indexes && masterType.indexes.length > 0) {
+              if (!field.options || field.options.length === 0 || areDefaultOptions(field.options)) {
+                const options = convertIndexesToOptions(masterType.indexes);
+                return { ...field, options };
+              }
+            }
+          }
+          return field;
+        })
+      }));
+      const hasChanges = updatedSections.some(
+        (section, idx) => section.fields.some(
+          (field, fieldIdx) => field !== state.schema.sections[idx]?.fields[fieldIdx]
+        )
+      );
+      if (hasChanges) {
+        set({
+          schema: { ...state.schema, sections: updatedSections },
+          isPreviewMode: !state.isPreviewMode
+        });
+      } else {
+        set({ isPreviewMode: !state.isPreviewMode });
+      }
+    } else {
+      set({ isPreviewMode: !state.isPreviewMode });
+    }
+  },
   // New Actions
   setExistingForms: (forms) => set({ existingForms: forms }),
   setTemplates: (templates) => set({ templates }),
+  setDropdownOptionsMap: (map) => {
+    set({ dropdownOptionsMap: map });
+    const state = get();
+    if (state.schema && state.schema.sections) {
+      const updatedSections = state.schema.sections.map((section) => ({
+        ...section,
+        fields: section.fields.map((field) => {
+          if (field.type === "select" && field.groupName) {
+            const masterType = state.masterTypes.find(
+              (mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
+            );
+            if (masterType && masterType.enumName && map[masterType.enumName]) {
+              return { ...field, options: map[masterType.enumName] };
+            }
+          }
+          return field;
+        })
+      }));
+      set({ schema: { ...state.schema, sections: updatedSections } });
+    }
+  },
   setMasterTypes: (masterTypes) => {
     set({ masterTypes });
     const state = get();
     if (state.schema && state.schema.sections) {
+      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) };
+        });
+      };
+      const areDefaultOptions = (options) => {
+        if (!options || options.length === 0)
+          return true;
+        return options.every(
+          (opt, idx) => opt.label === `Option ${idx + 1}` && (opt.value === `opt${idx + 1}` || opt.value === `Option ${idx + 1}`)
+        );
+      };
       const updatedSections = state.schema.sections.map((section) => ({
         ...section,
         fields: section.fields.map((field) => {
-          if (field.type === "select" && field.groupName && (!field.options || field.options.length === 0)) {
+          if (field.type === "select" && field.groupName) {
             const masterType = masterTypes.find(
               (mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
             );
             if (masterType && masterType.indexes && masterType.indexes.length > 0) {
-              const options = masterType.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) };
-              });
-              return { ...field, options };
+              if (!field.options || field.options.length === 0 || areDefaultOptions(field.options)) {
+                const options = convertIndexesToOptions(masterType.indexes);
+                return { ...field, options };
+              }
             }
           }
           return field;
@@ -4696,14 +4817,16 @@ var FieldRenderer = class {
 
 // src/renderer/FormRenderer.ts
 var FormRenderer = class {
-  constructor(container, schema, onSubmit) {
+  constructor(container, schema, onSubmit, onDropdownValueChange) {
     __publicField(this, "container");
     __publicField(this, "schema");
     __publicField(this, "data", {});
     __publicField(this, "onSubmit");
+    __publicField(this, "onDropdownValueChange");
     this.container = container;
     this.schema = schema;
     this.onSubmit = onSubmit;
+    this.onDropdownValueChange = onDropdownValueChange;
     this.render();
   }
   setSchema(schema) {
@@ -4738,6 +4861,12 @@ var FormRenderer = class {
         fieldWrapper.className = spanClass;
         const fieldEl = FieldRenderer.render(field, this.data[field.id], (val) => {
           this.data[field.id] = val;
+          if (field.type === "select" && this.onDropdownValueChange) {
+            this.onDropdownValueChange({
+              fieldId: field.id,
+              value: val || ""
+            });
+          }
         });
         fieldWrapper.appendChild(fieldEl);
         grid.appendChild(fieldWrapper);
@@ -7304,6 +7433,21 @@ var FormBuilder = class {
     if (options.data?.masterTypes) {
       formStore.getState().setMasterTypes(options.data.masterTypes);
     }
+    if (options.masterTypeGroups) {
+      const masterTypes = options.masterTypeGroups.map((group) => ({
+        id: group.id,
+        name: group.displayName.toLowerCase().replace(/\s+/g, "-"),
+        // Generate name from displayName
+        displayName: group.displayName,
+        enumName: group.enumName,
+        indexes: [],
+        active: true
+      }));
+      formStore.getState().setMasterTypes(masterTypes);
+    }
+    if (options.dropdownOptionsMap) {
+      formStore.getState().setDropdownOptionsMap(options.dropdownOptionsMap);
+    }
     this.render();
     this.setupSubscriptions();
   }
@@ -7337,6 +7481,23 @@ var FormBuilder = class {
     formStore.getState().setTemplates(templates);
     this.render();
   }
+  updateDropdownOptionsMap(dropdownOptionsMap) {
+    formStore.getState().setDropdownOptionsMap(dropdownOptionsMap);
+    this.render();
+  }
+  updateMasterTypeGroups(masterTypeGroups) {
+    const masterTypes = masterTypeGroups.map((group) => ({
+      id: group.id,
+      name: group.displayName.toLowerCase().replace(/\s+/g, "-"),
+      // Generate name from displayName
+      displayName: group.displayName,
+      enumName: group.enumName,
+      indexes: [],
+      active: true
+    }));
+    formStore.getState().setMasterTypes(masterTypes);
+    this.render();
+  }
   loadFormTemplates(formTemplates) {
     const extractedSections = [];
     formTemplates.forEach((form) => {
@@ -7378,11 +7539,63 @@ var FormBuilder = class {
     wrapper.appendChild(this.renderToolbar(state));
     const main = createElement("div", { className: "flex flex-col md:flex-row flex-1 overflow-hidden" });
     if (state.isPreviewMode) {
-      const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
-      const inner = createElement("div", { className: "w-full max-w-3xl" });
-      new FormRenderer(inner, state.schema, (data) => alert(JSON.stringify(data, null, 2)));
-      previewContainer.appendChild(inner);
-      main.appendChild(previewContainer);
+      const masterTypes = state.masterTypes;
+      if (masterTypes && masterTypes.length > 0 && state.schema.sections) {
+        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) };
+          });
+        };
+        const areDefaultOptions = (options) => {
+          if (!options || options.length === 0)
+            return true;
+          return options.every(
+            (opt, idx) => opt.label === `Option ${idx + 1}` && (opt.value === `opt${idx + 1}` || opt.value === `Option ${idx + 1}`)
+          );
+        };
+        const previewSchema = {
+          ...state.schema,
+          sections: state.schema.sections.map((section) => ({
+            ...section,
+            fields: section.fields.map((field) => {
+              if (field.type === "select" && field.groupName) {
+                const masterType = masterTypes.find(
+                  (mt) => mt.active === true && (mt.id === field.groupName?.id || mt.name === field.groupName?.name)
+                );
+                if (masterType && masterType.indexes && masterType.indexes.length > 0) {
+                  if (!field.options || field.options.length === 0 || areDefaultOptions(field.options)) {
+                    const options = convertIndexesToOptions(masterType.indexes);
+                    return { ...field, options };
+                  }
+                }
+              }
+              return field;
+            })
+          }))
+        };
+        const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
+        const inner = createElement("div", { className: "w-full max-w-3xl" });
+        new FormRenderer(inner, previewSchema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
+        previewContainer.appendChild(inner);
+        main.appendChild(previewContainer);
+      } else {
+        const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
+        const inner = createElement("div", { className: "w-full max-w-3xl" });
+        new FormRenderer(inner, state.schema, (data) => alert(JSON.stringify(data, null, 2)), this.options.onDropdownValueChange);
+        previewContainer.appendChild(inner);
+        main.appendChild(previewContainer);
+      }
     } else {
       const toolboxWrapper = createElement("div", { className: "form-builder-toolbox-wrapper w-full md:w-80 bg-white dark:bg-gray-900 border-r md:border-r border-b md:border-b-0 border-gray-200 dark:border-gray-800" });
       toolboxWrapper.appendChild(this.renderToolbox());
@@ -7691,6 +7904,7 @@ var FormBuilder = class {
     if (selectedField.type === "select") {
       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 [];
@@ -7713,11 +7927,16 @@ var FormBuilder = class {
         const groupNameSelect = createElement("select", {
           className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
           onchange: (e) => {
-            const selectedValue = e.target.value;
-            if (selectedValue) {
-              const selectedMasterType = activeMasterTypes.find((mt) => mt.id === selectedValue || mt.name === selectedValue);
+            const selectedEnumName = e.target.value;
+            if (selectedEnumName) {
+              const selectedMasterType = activeMasterTypes.find((mt) => mt.enumName === selectedEnumName);
               if (selectedMasterType) {
-                const options = convertIndexesToOptions(selectedMasterType.indexes || []);
+                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,
@@ -7725,6 +7944,12 @@ var FormBuilder = class {
                   },
                   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, {
@@ -7742,8 +7967,9 @@ var FormBuilder = class {
         }));
         activeMasterTypes.forEach((mt) => {
           const isSelected = selectedField.groupName && (selectedField.groupName.id === mt.id || selectedField.groupName.name === mt.name);
+          const optionValue = mt.enumName || mt.id || mt.name;
           groupNameSelect.appendChild(createElement("option", {
-            value: mt.id || mt.name,
+            value: optionValue,
             text: mt.displayName || mt.name,
             selected: !!isSelected
           }));
@@ -7754,8 +7980,13 @@ var FormBuilder = class {
           const currentMasterType = activeMasterTypes.find(
             (mt) => mt.id === selectedField.groupName?.id || mt.name === selectedField.groupName?.name
           );
-          if (currentMasterType && currentMasterType.indexes && currentMasterType.indexes.length > 0) {
-            const options = convertIndexesToOptions(currentMasterType.indexes);
+          if (currentMasterType) {
+            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 });
             }