form-builder-pro 1.4.2 → 1.4.4

package/dist/index.mjs

@@ -4081,6 +4081,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" },
@@ -4355,6 +4356,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,
@@ -4782,6 +4785,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)
@@ -5040,6 +5050,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)
@@ -5739,6 +5755,7 @@ var formStore = createStore((set, get) => ({
     const baseField = {
       id: generateId(),
       type,
+      fieldName: generateFieldName(),
       ...DEFAULT_FIELD_CONFIG[type]
     };
     let newField = { ...baseField };
@@ -12400,6 +12417,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", {
@@ -13561,6 +13607,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,