form-builder-pro 1.4.2 → 1.4.4

package/dist/index.css

@@ -1033,6 +1033,9 @@ body {
 .max-h-32 {
   max-height: 8rem;
 }
+.max-h-40 {
+  max-height: 10rem;
+}
 .max-h-48 {
   max-height: 12rem;
 }
@@ -1197,6 +1200,15 @@ body {
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1597,6 +1609,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(202 138 4 / var(--tw-text-opacity, 1));
 }
+.accent-blue-600 {
+  accent-color: #2563eb;
+}
 .opacity-100 {
   opacity: 1;
 }
@@ -2050,6 +2065,11 @@ input[type="radio"]:checked::after {
   opacity: 0.7;
 }
 
+.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
+}
+
 .dark\:border-\[\#019FA2\]:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(1 159 162 / var(--tw-border-opacity, 1));

package/dist/index.d.mts

@@ -66,6 +66,23 @@ interface AsyncOptionSource {
 }
 /** Lookup (Entity Fields) — source category for optionSource LOOKUP */
 type LookupSourceType = 'MODULE' | 'MASTER_TYPE' | 'SETTINGS';
+/**
+ * Configuration for the auto-populate fields feature on LOOKUP dropdowns.
+ * When `enabled` is true and a user selects a lookup record, the fields listed
+ * in `fields` are automatically populated from the corresponding lookup record data.
+ *
+ * `fields` contains the field keys (e.g. column/property names) that are present
+ * in both the Lookup Value Field and the Lookup Label Field response objects.
+ */
+interface AutoPopulateFieldsConfig {
+    /** Whether auto-population is active for this dropdown */
+    enabled: boolean;
+    /**
+     * List of field keys from the lookup response that should be auto-populated
+     * into other form fields when the user selects a value.
+     */
+    fields: string[];
+}
 interface FormField {
     id: string;
     type: FieldType;
@@ -136,6 +153,7 @@ interface FormField {
     nameGeneratorSuffix?: string;
     nameGeneratorIdPadding?: number;
     formulaConfig?: FormulaConfig;
+    autoPopulateFields?: AutoPopulateFieldsConfig;
 }
 /**
  * Conditional date constraint — evaluated at runtime against the current date or another field's value.
@@ -596,4 +614,4 @@ declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type FormulaCondition, type FormulaConfig, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, detectFormulaFieldCircularDependency, evaluateFormula, evaluateFormulaConfig, evaluateFormulaExpression, extractBracketFields, formStore, generateName, getColSpanFromWidth, getFieldsForFormula, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula, validateFormulaExpression };
+export { type AsyncOptionSource, type AutoPopulateFieldsConfig, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type FormulaCondition, type FormulaConfig, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, detectFormulaFieldCircularDependency, evaluateFormula, evaluateFormulaConfig, evaluateFormulaExpression, extractBracketFields, formStore, generateName, getColSpanFromWidth, getFieldsForFormula, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula, validateFormulaExpression };

package/dist/index.d.ts

@@ -66,6 +66,23 @@ interface AsyncOptionSource {
 }
 /** Lookup (Entity Fields) — source category for optionSource LOOKUP */
 type LookupSourceType = 'MODULE' | 'MASTER_TYPE' | 'SETTINGS';
+/**
+ * Configuration for the auto-populate fields feature on LOOKUP dropdowns.
+ * When `enabled` is true and a user selects a lookup record, the fields listed
+ * in `fields` are automatically populated from the corresponding lookup record data.
+ *
+ * `fields` contains the field keys (e.g. column/property names) that are present
+ * in both the Lookup Value Field and the Lookup Label Field response objects.
+ */
+interface AutoPopulateFieldsConfig {
+    /** Whether auto-population is active for this dropdown */
+    enabled: boolean;
+    /**
+     * List of field keys from the lookup response that should be auto-populated
+     * into other form fields when the user selects a value.
+     */
+    fields: string[];
+}
 interface FormField {
     id: string;
     type: FieldType;
@@ -136,6 +153,7 @@ interface FormField {
     nameGeneratorSuffix?: string;
     nameGeneratorIdPadding?: number;
     formulaConfig?: FormulaConfig;
+    autoPopulateFields?: AutoPopulateFieldsConfig;
 }
 /**
  * Conditional date constraint — evaluated at runtime against the current date or another field's value.
@@ -596,4 +614,4 @@ declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type FormulaCondition, type FormulaConfig, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, detectFormulaFieldCircularDependency, evaluateFormula, evaluateFormulaConfig, evaluateFormulaExpression, extractBracketFields, formStore, generateName, getColSpanFromWidth, getFieldsForFormula, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula, validateFormulaExpression };
+export { type AsyncOptionSource, type AutoPopulateFieldsConfig, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type FormulaCondition, type FormulaConfig, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, detectFormulaFieldCircularDependency, evaluateFormula, evaluateFormulaConfig, evaluateFormulaExpression, extractBracketFields, formStore, generateName, getColSpanFromWidth, getFieldsForFormula, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula, validateFormulaExpression };

package/dist/index.js

@@ -4083,6 +4083,7 @@ var LOOKUP_SOURCE_TYPE_OPTIONS = [
   { value: "SETTINGS", label: "Settings Entity" }
 ];
 var generateId = () => Math.random().toString(36).substring(2, 9);
+var generateFieldName = () => `field_${Date.now()}_${Math.random().toString(36).substring(2, 5)}`;
 var FIELD_TYPES = [
   { type: "text", label: "Text Input", icon: "Type" },
   { type: "textarea", label: "Text Area", icon: "DocumentText" },
@@ -4357,6 +4358,8 @@ var cloneField = (field) => {
   return {
     ...field,
     id: generateId(),
+    fieldName: generateFieldName(),
+    // Always generate a fresh unique name on clone
     // Ensure options are also cloned if present
     options: field.options ? field.options.map((opt) => ({ ...opt })) : void 0,
     validation: field.validation ? field.validation.map((v) => ({ ...v })) : void 0,
@@ -4784,6 +4787,13 @@ function transformField(field) {
     transformed.nameGeneratorSuffix = field.nameGeneratorSuffix;
   if (field.nameGeneratorIdPadding !== void 0)
     transformed.nameGeneratorIdPadding = field.nameGeneratorIdPadding;
+  if (field.autoPopulateFields !== void 0 && field.autoPopulateFields !== null) {
+    const apf = field.autoPopulateFields;
+    transformed.autoPopulateFields = {
+      enabled: typeof apf.enabled === "boolean" ? apf.enabled : false,
+      fields: Array.isArray(apf.fields) ? apf.fields : []
+    };
+  }
   if (field.css !== void 0)
     transformed.css = field.css;
   if (field.optionsSource !== void 0)
@@ -5042,6 +5052,12 @@ function fieldToPayload(field, opts) {
       parentFieldName: field.lookupParentFieldName ?? null
     };
   }
+  if (field.optionSource === "LOOKUP" && field.autoPopulateFields !== void 0 && field.autoPopulateFields !== null) {
+    payload.autoPopulateFields = {
+      enabled: field.autoPopulateFields.enabled,
+      fields: Array.isArray(field.autoPopulateFields.fields) ? field.autoPopulateFields.fields : []
+    };
+  }
   if (field.isd !== void 0)
     payload.isd = field.isd;
   if (field.imageUrl !== void 0)
@@ -5741,6 +5757,7 @@ var formStore = createStore((set, get) => ({
     const baseField = {
       id: generateId(),
       type,
+      fieldName: generateFieldName(),
       ...DEFAULT_FIELD_CONFIG[type]
     };
     let newField = { ...baseField };
@@ -12402,6 +12419,35 @@ var FormBuilder = class {
     }, [getIcon("X", 20)]));
     panel.appendChild(header);
     const body = createElement("div", { className: "flex-1 overflow-y-auto p-4 px-2 space-y-3", id: "config-panel-body" });
+    const nameGroup = createElement("div");
+    nameGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Name" }));
+    const currentFieldName = selectedField.fieldName || generateFieldName();
+    if (!selectedField.fieldName) {
+      formStore.getState().updateField(selectedField.id, { fieldName: currentFieldName });
+    }
+    const nameInput = createElement("input", {
+      className: "w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-md bg-transparent font-mono text-xs",
+      value: currentFieldName,
+      "data-focus-id": `field-name-${selectedField.id}`,
+      placeholder: "field_...",
+      oninput: (e) => {
+        const fieldId2 = selectedField.id;
+        const value = e.target.value.trim();
+        const key = `fieldname-${fieldId2}`;
+        const existing = labelUpdateTimeouts.get(key);
+        if (existing)
+          clearTimeout(existing);
+        const timeoutId = setTimeout(() => {
+          labelUpdateTimeouts.delete(key);
+          if (value) {
+            formStore.getState().updateField(fieldId2, { fieldName: value });
+          }
+        }, LABEL_DEBOUNCE_MS);
+        labelUpdateTimeouts.set(key, timeoutId);
+      }
+    });
+    nameGroup.appendChild(nameInput);
+    body.appendChild(nameGroup);
     const labelGroup = createElement("div");
     labelGroup.appendChild(createElement("label", { className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1", text: "Label" }));
     labelGroup.appendChild(createElement("input", {
@@ -13563,6 +13609,84 @@ var FormBuilder = class {
         });
         parentFieldGroup.appendChild(parentFieldSelect);
         body.appendChild(parentFieldGroup);
+        const autoPopHeader = createElement("h3", {
+          className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6",
+          text: "Auto Populate Fields"
+        });
+        body.appendChild(autoPopHeader);
+        const autoPopEnabled = selectedField.autoPopulateFields?.enabled === true;
+        body.appendChild(this.createCheckboxField(
+          "Enable automation for selected records",
+          autoPopEnabled,
+          (checked) => {
+            const current = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
+            formStore.getState().updateField(selectedField.id, {
+              autoPopulateFields: {
+                enabled: checked,
+                fields: current?.autoPopulateFields?.fields ?? []
+              }
+            });
+            this.render();
+          },
+          `auto-populate-enabled-${selectedField.id}`
+        ));
+        {
+          const autoPopFieldsGroup = createElement("div", { className: "mb-4 mt-2" });
+          autoPopFieldsGroup.appendChild(createElement("label", {
+            className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
+            text: "Fields to auto-populate"
+          }));
+          const lookupFieldOptionsMapForAP = formStore.getState().lookupFieldOptionsMap;
+          const availableAutoPopFields = selectedField.lookupSource ? lookupFieldOptionsMapForAP[selectedField.lookupSource] || [] : [];
+          const selectedAutoPopFields = selectedField.autoPopulateFields?.fields ?? [];
+          const isAutoPopDisabled = !autoPopEnabled || !selectedField.lookupSource;
+          if (availableAutoPopFields.length === 0) {
+            const emptyNote = createElement("p", {
+              className: "text-xs text-gray-400 dark:text-gray-500 mt-1",
+              text: selectedField.lookupSource ? "No fields available for this lookup source." : "Select a Lookup Source first."
+            });
+            autoPopFieldsGroup.appendChild(emptyNote);
+          } else {
+            const fieldList = createElement("div", {
+              className: `border border-gray-200 dark:border-gray-700 rounded-md divide-y divide-gray-100 dark:divide-gray-700 overflow-y-auto max-h-40 ${isAutoPopDisabled ? "opacity-50 pointer-events-none" : ""}`
+            });
+            availableAutoPopFields.forEach((fieldKey) => {
+              const isChecked = selectedAutoPopFields.includes(fieldKey);
+              const row = createElement("label", {
+                className: "flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 text-sm text-gray-700 dark:text-gray-300"
+              });
+              const cb = createElement("input", {
+                type: "checkbox",
+                className: "w-4 h-4 accent-blue-600",
+                checked: isChecked,
+                disabled: isAutoPopDisabled,
+                onchange: (e) => {
+                  const target = e.target;
+                  const latestField = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
+                  const latestSelected = latestField?.autoPopulateFields?.fields ?? [];
+                  const updatedFields = target.checked ? [.../* @__PURE__ */ new Set([...latestSelected, fieldKey])] : latestSelected.filter((k) => k !== fieldKey);
+                  formStore.getState().updateField(selectedField.id, {
+                    autoPopulateFields: {
+                      enabled: latestField?.autoPopulateFields?.enabled ?? true,
+                      fields: updatedFields
+                    }
+                  });
+                }
+              });
+              row.appendChild(cb);
+              row.appendChild(createElement("span", { text: fieldKey }));
+              fieldList.appendChild(row);
+            });
+            autoPopFieldsGroup.appendChild(fieldList);
+            if (selectedAutoPopFields.length > 0) {
+              autoPopFieldsGroup.appendChild(createElement("p", {
+                className: "text-xs text-gray-400 dark:text-gray-500 mt-1",
+                text: `${selectedAutoPopFields.length} field(s) selected`
+              }));
+            }
+          }
+          body.appendChild(autoPopFieldsGroup);
+        }
         body.appendChild(this.createCheckboxField(
           "Visibility",
           selectedField.visible !== false,