form-builder-pro 1.4.3 → 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,
@@ -5752,6 +5755,7 @@ var formStore = createStore((set, get) => ({
     const baseField = {
       id: generateId(),
       type,
+      fieldName: generateFieldName(),
       ...DEFAULT_FIELD_CONFIG[type]
     };
     let newField = { ...baseField };
@@ -12413,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", {