form-builder-pro 1.1.2 → 1.1.4

package/dist/index.css

@@ -804,6 +804,25 @@ body {
       border-top-right-radius: 0;
     }
   }
+/* ===== INPUT FIELD STABILITY & PERFORMANCE ===== */
+/* Prevent flicker and layout shifts during typing */
+.lookup-input-field,
+  .form-builder-config-wrapper input[type="text"],
+  .form-builder-config-wrapper input[type="number"],
+  .form-builder-config-wrapper textarea {
+    will-change: contents;
+    /* Use GPU acceleration for smooth rendering */
+    transform: translateZ(0);
+    /* Prevent layout recalculation on input change */
+    contain: layout style;
+  }
+/* Ensure inputs have fixed dimensions to prevent jumps */
+.form-builder-config-wrapper input,
+  .form-builder-config-wrapper select,
+  .form-builder-config-wrapper textarea {
+    min-height: 38px;
+    /* Fixed height prevents layout shift */
+  }
 .sr-only {
   position: absolute;
   width: 1px;

package/dist/index.d.mts

@@ -68,7 +68,11 @@ interface FormField {
     customOptionsEnabled?: boolean;
     multiselect?: boolean;
     multiSelect?: boolean;
-    optionSource?: 'STATIC' | 'MASTER';
+    optionSource?: 'STATIC' | 'MASTER' | 'LOOKUP';
+    lookupSourceType?: 'MODULE' | 'MASTER_TYPE';
+    lookupSource?: string;
+    lookupValueField?: string;
+    lookupLabelField?: string;
     isd?: ISDConfig;
 }
 /**
@@ -226,6 +230,7 @@ interface FormBuilderOptions {
             value: string;
         }[];
     };
+    moduleList?: string[];
     onGroupSelectionChange?: (event: {
         fieldId: string;
         groupEnumName: string;
@@ -239,6 +244,8 @@ declare class FormBuilder {
     private container;
     private unsubscribe;
     private options;
+    private isInputUpdate;
+    private lastRenderedSchemaHash;
     constructor(container: HTMLElement, options?: FormBuilderOptions);
     loadForm(json: FormSchema): void;
     cloneForm(json: FormSchema): void;

package/dist/index.d.ts

@@ -68,7 +68,11 @@ interface FormField {
     customOptionsEnabled?: boolean;
     multiselect?: boolean;
     multiSelect?: boolean;
-    optionSource?: 'STATIC' | 'MASTER';
+    optionSource?: 'STATIC' | 'MASTER' | 'LOOKUP';
+    lookupSourceType?: 'MODULE' | 'MASTER_TYPE';
+    lookupSource?: string;
+    lookupValueField?: string;
+    lookupLabelField?: string;
     isd?: ISDConfig;
 }
 /**
@@ -226,6 +230,7 @@ interface FormBuilderOptions {
             value: string;
         }[];
     };
+    moduleList?: string[];
     onGroupSelectionChange?: (event: {
         fieldId: string;
         groupEnumName: string;
@@ -239,6 +244,8 @@ declare class FormBuilder {
     private container;
     private unsubscribe;
     private options;
+    private isInputUpdate;
+    private lastRenderedSchemaHash;
     constructor(container: HTMLElement, options?: FormBuilderOptions);
     loadForm(json: FormSchema): void;
     cloneForm(json: FormSchema): void;

package/dist/index.js

@@ -4404,6 +4404,14 @@ function transformField(field) {
       }
     }
   }
+  if (field.lookupSourceType !== void 0)
+    transformed.lookupSourceType = field.lookupSourceType;
+  if (field.lookupSource !== void 0)
+    transformed.lookupSource = field.lookupSource;
+  if (field.lookupValueField !== void 0)
+    transformed.lookupValueField = field.lookupValueField;
+  if (field.lookupLabelField !== void 0)
+    transformed.lookupLabelField = field.lookupLabelField;
   if (field.placeholder !== void 0)
     transformed.placeholder = field.placeholder;
   if (field.description !== void 0)
@@ -4548,6 +4556,14 @@ function fieldToPayload(field) {
     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)
+    payload.lookupSource = field.lookupSource;
+  if (field.lookupValueField !== void 0)
+    payload.lookupValueField = field.lookupValueField;
+  if (field.lookupLabelField !== void 0)
+    payload.lookupLabelField = field.lookupLabelField;
   if (field.isd !== void 0)
     payload.isd = field.isd;
   if ((field.type === "select" || field.type === "radio" || field.type === "checkbox") && field.options) {
@@ -8528,10 +8544,14 @@ var SectionList = class {
 // src/builder/FormBuilder.ts
 var advancedCssPanelState = /* @__PURE__ */ new Map();
 var FormBuilder = class {
+  // Cache to detect meaningful changes
   constructor(container, options = {}) {
     __publicField(this, "container");
     __publicField(this, "unsubscribe");
     __publicField(this, "options");
+    __publicField(this, "isInputUpdate", false);
+    // Track if update is from text input
+    __publicField(this, "lastRenderedSchemaHash", "");
     __publicField(this, "activeTab", "fields");
     if (!container) {
       throw new Error("Builder container not found. Please ensure the container element exists before initializing FormBuilder.");
@@ -8552,8 +8572,28 @@ var FormBuilder = class {
         }
       });
       if (extractedSections.length > 0) {
+        const sectionMap = /* @__PURE__ */ new Map();
+        extractedSections.forEach((section) => {
+          const existingSection = sectionMap.get(section.title);
+          if (existingSection) {
+            const fieldIds = new Set(existingSection.fields.map((f) => f.id));
+            section.fields.forEach((field) => {
+              if (!fieldIds.has(field.id)) {
+                existingSection.fields.push(field);
+                fieldIds.add(field.id);
+              }
+            });
+          } else {
+            sectionMap.set(section.title, {
+              ...section,
+              fields: [...section.fields]
+            });
+          }
+        });
+        const deduplicatedSections = Array.from(sectionMap.values());
+        console.log(`[FormBuilder] Loaded ${options.formTemplates.length} form templates, extracted ${extractedSections.length} sections, deduplicated to ${deduplicatedSections.length} unique templates`);
         const existingTemplates = options.reusableSections || [];
-        formStore.getState().setTemplates([...existingTemplates, ...extractedSections]);
+        formStore.getState().setTemplates([...existingTemplates, ...deduplicatedSections]);
       }
     }
     if (options.formJson) {
@@ -8635,14 +8675,56 @@ var FormBuilder = class {
       }
     });
     if (extractedSections.length > 0) {
+      const sectionMap = /* @__PURE__ */ new Map();
+      extractedSections.forEach((section) => {
+        const existingSection = sectionMap.get(section.title);
+        if (existingSection) {
+          const fieldIds = new Set(existingSection.fields.map((f) => f.id));
+          section.fields.forEach((field) => {
+            if (!fieldIds.has(field.id)) {
+              existingSection.fields.push(field);
+              fieldIds.add(field.id);
+            }
+          });
+        } else {
+          sectionMap.set(section.title, {
+            ...section,
+            fields: [...section.fields]
+          });
+        }
+      });
+      const deduplicatedSections = Array.from(sectionMap.values());
+      console.log(`[FormBuilder] loadFormTemplates: extracted ${extractedSections.length} sections, deduplicated to ${deduplicatedSections.length} unique templates`);
       const currentTemplates = formStore.getState().templates;
-      formStore.getState().setTemplates([...currentTemplates, ...extractedSections]);
+      formStore.getState().setTemplates([...currentTemplates, ...deduplicatedSections]);
       this.render();
     }
   }
   setupSubscriptions() {
     this.unsubscribe = formStore.subscribe(() => {
-      this.render();
+      if (this.isInputUpdate) {
+        this.isInputUpdate = false;
+        return;
+      }
+      const state = formStore.getState();
+      const schemaHash = JSON.stringify({
+        sections: state.schema.sections.map((s) => ({
+          id: s.id,
+          title: s.title,
+          fields: s.fields.map((f) => ({
+            id: f.id,
+            type: f.type,
+            label: f.label
+            // Exclude frequently changing text properties from hash
+            // to prevent re-renders on typing
+          }))
+        })),
+        selectedField: state.selectedFieldId
+      });
+      if (schemaHash !== this.lastRenderedSchemaHash) {
+        this.lastRenderedSchemaHash = schemaHash;
+        this.render();
+      }
     });
   }
   destroy() {
@@ -8854,7 +8936,7 @@ var FormBuilder = class {
     const previewBtn = createElement("button", {
       className: `flex items-center px-3 py-2 text-sm bg-[#3b497e] text-white font-medium rounded-md transition-colors ${state.isPreviewMode ? "bg-[#019FA2] text-blue-700 dark:bg-blue-900 dark:text-blue-200" : "text-gray-700 dark:text-gray-200 "}`,
       onclick: () => formStore.getState().togglePreview()
-    }, [getIcon("Eye", 16), createElement("span", { className: "", text: state.isPreviewMode ? "" : "" })]);
+    }, [getIcon(state.isPreviewMode ? "X" : "Eye", 16), createElement("span", { className: "", text: state.isPreviewMode ? "" : "" })]);
     const saveBtn = createElement("button", {
       className: "flex items-center px-3 py-2 text-sm font-medium text-white bg-[#019FA2]  rounded-md shadow-sm transition-colors",
       onclick: () => {
@@ -8984,7 +9066,10 @@ var FormBuilder = class {
       value: state.schema.formName,
       placeholder: "formName (e.g., contactForm)",
       "data-focus-id": "form-name",
-      oninput: (e) => formStore.getState().setSchema({ ...state.schema, formName: e.target.value })
+      oninput: (e) => {
+        this.isInputUpdate = true;
+        formStore.getState().setSchema({ ...state.schema, formName: e.target.value });
+      }
     });
     inner.appendChild(formNameInput);
     const sectionList = new SectionList(state.schema, state.selectedFieldId);
@@ -9018,7 +9103,10 @@ var FormBuilder = class {
       className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
       value: selectedField.label,
       "data-focus-id": `field-label-${selectedField.id}`,
-      oninput: (e) => formStore.getState().updateField(selectedField.id, { label: e.target.value })
+      oninput: (e) => {
+        this.isInputUpdate = true;
+        formStore.getState().updateField(selectedField.id, { label: e.target.value });
+      }
     }));
     body.appendChild(labelGroup);
     const placeholderGroup = createElement("div");
@@ -9027,7 +9115,10 @@ var FormBuilder = class {
       className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
       value: selectedField.placeholder || "",
       "data-focus-id": `field-placeholder-${selectedField.id}`,
-      oninput: (e) => formStore.getState().updateField(selectedField.id, { placeholder: e.target.value })
+      oninput: (e) => {
+        this.isInputUpdate = true;
+        formStore.getState().updateField(selectedField.id, { placeholder: e.target.value });
+      }
     }));
     body.appendChild(placeholderGroup);
     const layoutGroup = createElement("div", { className: "layout-span-group" });
@@ -9258,6 +9349,10 @@ var FormBuilder = class {
           const updates = { optionSource: source };
           if (source === "MASTER" && !selectedField.masterTypeName && !selectedField.groupName) ; else if (source === "STATIC") {
             updates.customOptionsEnabled = true;
+          } else if (source === "LOOKUP") {
+            if (!selectedField.lookupSourceType) {
+              updates.lookupSourceType = "MODULE";
+            }
           }
           formStore.getState().updateField(selectedField.id, updates);
           this.render();
@@ -9265,8 +9360,147 @@ var FormBuilder = class {
       });
       optionSourceSelect.appendChild(createElement("option", { value: "STATIC", text: "STATIC (Custom Options)", selected: (selectedField.optionSource || "STATIC") === "STATIC" }));
       optionSourceSelect.appendChild(createElement("option", { value: "MASTER", text: "MASTER (From Master Types)", selected: selectedField.optionSource === "MASTER" }));
+      if (selectedField.type === "select") {
+        optionSourceSelect.appendChild(createElement("option", { value: "LOOKUP", text: "Lookup (Entity Fields)", selected: selectedField.optionSource === "LOOKUP" }));
+      }
       optionSourceGroup.appendChild(optionSourceSelect);
       body.appendChild(optionSourceGroup);
+      if (selectedField.type === "select" && selectedField.optionSource === "LOOKUP") {
+        const lookupSourceTypeGroup = createElement("div", { className: "mb-4" });
+        lookupSourceTypeGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Source Type" }));
+        const lookupSourceTypeSelect = createElement("select", {
+          className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+          value: selectedField.lookupSourceType || "MODULE",
+          onchange: (e) => {
+            const lookupSourceType = e.target.value;
+            const updates = { lookupSourceType };
+            if (lookupSourceType !== selectedField.lookupSourceType) {
+              updates.lookupSource = void 0;
+            }
+            formStore.getState().updateField(selectedField.id, updates);
+            this.render();
+          }
+        });
+        lookupSourceTypeSelect.appendChild(createElement("option", { value: "MODULE", text: "Module", selected: (selectedField.lookupSourceType || "MODULE") === "MODULE" }));
+        lookupSourceTypeSelect.appendChild(createElement("option", { value: "MASTER_TYPE", text: "Master Type", selected: selectedField.lookupSourceType === "MASTER_TYPE" }));
+        lookupSourceTypeGroup.appendChild(lookupSourceTypeSelect);
+        body.appendChild(lookupSourceTypeGroup);
+        if (selectedField.lookupSourceType === "MODULE") {
+          const moduleList = this.options.moduleList || [];
+          const lookupSourceGroup = createElement("div", { className: "mb-4" });
+          lookupSourceGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Source" }));
+          const lookupSourceSelect = createElement("select", {
+            className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+            value: selectedField.lookupSource || "",
+            onchange: (e) => {
+              const lookupSource = e.target.value;
+              formStore.getState().updateField(selectedField.id, { lookupSource: lookupSource || void 0 });
+            }
+          });
+          lookupSourceSelect.appendChild(createElement("option", { value: "", text: "Select Module", selected: !selectedField.lookupSource }));
+          moduleList.forEach((module) => {
+            lookupSourceSelect.appendChild(createElement("option", {
+              value: module,
+              text: module,
+              selected: selectedField.lookupSource === module
+            }));
+          });
+          lookupSourceGroup.appendChild(lookupSourceSelect);
+          body.appendChild(lookupSourceGroup);
+        } else if (selectedField.lookupSourceType === "MASTER_TYPE") {
+          const masterTypes = formStore.getState().masterTypes;
+          const activeMasterTypes = masterTypes.filter((mt) => mt.active === true);
+          const lookupSourceGroup = createElement("div", { className: "mb-4" });
+          lookupSourceGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Source" }));
+          const lookupSourceSelect = createElement("select", {
+            className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent",
+            value: selectedField.lookupSource || "",
+            onchange: (e) => {
+              const lookupSource = e.target.value;
+              formStore.getState().updateField(selectedField.id, { lookupSource: lookupSource || void 0 });
+            }
+          });
+          lookupSourceSelect.appendChild(createElement("option", { value: "", text: "Select Master Type", selected: !selectedField.lookupSource }));
+          activeMasterTypes.forEach((mt) => {
+            const optionValue = mt.enumName || mt.id || mt.name;
+            lookupSourceSelect.appendChild(createElement("option", {
+              value: optionValue,
+              text: mt.displayName || mt.name,
+              selected: selectedField.lookupSource === optionValue
+            }));
+          });
+          lookupSourceGroup.appendChild(lookupSourceSelect);
+          body.appendChild(lookupSourceGroup);
+        }
+        const lookupValueFieldGroup = createElement("div", { className: "mb-4" });
+        lookupValueFieldGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Value Field" }));
+        const lookupValueFieldId = `field-lookup-value-${selectedField.id}`;
+        const lookupValueFieldInput = createElement("input", {
+          type: "text",
+          className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent lookup-input-field",
+          value: selectedField.lookupValueField || "",
+          placeholder: "Enter value field name",
+          "data-focus-id": lookupValueFieldId,
+          oninput: (e) => {
+            this.isInputUpdate = true;
+            const lookupValueField = e.target.value;
+            formStore.getState().updateField(selectedField.id, { lookupValueField: lookupValueField || void 0 });
+          },
+          onblur: (e) => {
+            const lookupValueField = e.target.value;
+            formStore.getState().updateField(selectedField.id, { lookupValueField: lookupValueField || void 0 });
+          }
+        });
+        lookupValueFieldGroup.appendChild(lookupValueFieldInput);
+        body.appendChild(lookupValueFieldGroup);
+        const lookupLabelFieldGroup = createElement("div", { className: "mb-4" });
+        lookupLabelFieldGroup.appendChild(createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", text: "Lookup Label Field" }));
+        const lookupLabelFieldId = `field-lookup-label-${selectedField.id}`;
+        const lookupLabelFieldInput = createElement("input", {
+          type: "text",
+          className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-transparent lookup-input-field",
+          value: selectedField.lookupLabelField || "",
+          placeholder: "Enter label field name",
+          "data-focus-id": lookupLabelFieldId,
+          oninput: (e) => {
+            this.isInputUpdate = true;
+            const lookupLabelField = e.target.value;
+            formStore.getState().updateField(selectedField.id, { lookupLabelField: lookupLabelField || void 0 });
+          },
+          onblur: (e) => {
+            const lookupLabelField = e.target.value;
+            formStore.getState().updateField(selectedField.id, { lookupLabelField: lookupLabelField || void 0 });
+          }
+        });
+        lookupLabelFieldGroup.appendChild(lookupLabelFieldInput);
+        body.appendChild(lookupLabelFieldGroup);
+        const visibilityGroup = createElement("div", { className: "flex items-center justify-between mb-4" });
+        visibilityGroup.appendChild(createElement("label", { className: "text-sm text-gray-700 dark:text-gray-300", text: "Visibility" }));
+        visibilityGroup.appendChild(createElement("input", {
+          type: "checkbox",
+          className: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500",
+          checked: selectedField.visible !== false,
+          // Default to true if not set
+          onchange: (e) => {
+            const visible = e.target.checked;
+            formStore.getState().updateField(selectedField.id, { visible });
+          }
+        }));
+        body.appendChild(visibilityGroup);
+        const enabledGroup2 = createElement("div", { className: "flex items-center justify-between mb-4" });
+        enabledGroup2.appendChild(createElement("label", { className: "text-sm text-gray-700 dark:text-gray-300", text: "Enabled" }));
+        enabledGroup2.appendChild(createElement("input", {
+          type: "checkbox",
+          className: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500",
+          checked: selectedField.enabled !== false,
+          // Default to true if not set
+          onchange: (e) => {
+            const enabled = e.target.checked;
+            formStore.getState().updateField(selectedField.id, { enabled });
+          }
+        }));
+        body.appendChild(enabledGroup2);
+      }
     }
     if (selectedField.type === "select") {
       const multiSelectGroup = createElement("div", { className: "flex items-center justify-between mb-4" });