form-builder-pro 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -4053,6 +4053,7 @@ var NEVER = INVALID;
 var FormSchemaValidation = external_exports.object({
   id: external_exports.string(),
   title: external_exports.string(),
+  formName: external_exports.string(),
   sections: external_exports.array(external_exports.object({
     id: external_exports.string(),
     title: external_exports.string(),
@@ -4127,6 +4128,7 @@ var DEFAULT_FIELD_CONFIG = {
 var INITIAL_SCHEMA = {
   id: "form_1",
   title: "My New Form",
+  formName: "myNewForm",
   sections: [
     {
       id: generateId(),
@@ -4469,7 +4471,7 @@ var FormRenderer = class {
     this.schema.sections.forEach((section) => {
       const sectionEl = createElement("div", { className: "space-y-4" });
       sectionEl.appendChild(createElement("h2", { className: "text-xl font-semibold text-gray-800 dark:text-gray-200 border-b pb-2", text: section.title }));
-      const grid = createElement("div", { className: "grid grid-cols-4 gap-4" });
+      const grid = createElement("div", { className: "form-builder-grid" });
       section.fields.forEach((field) => {
         const fieldWrapper = createElement("div");
         const span = field.width === "100%" ? "col-span-4" : field.width === "50%" ? "col-span-2" : "col-span-1";
@@ -25148,10 +25150,12 @@ var createIcons = ({
 
 // src/builder/FormBuilder.ts
 var FormBuilder = class {
-  constructor(container) {
+  constructor(container, options) {
     __publicField(this, "container");
     __publicField(this, "unsubscribe");
+    __publicField(this, "onSave");
     this.container = container;
+    this.onSave = options?.onSave;
     this.render();
     this.setupSubscriptions();
   }
@@ -25166,6 +25170,18 @@ var FormBuilder = class {
   }
   render() {
     const state = formStore.getState();
+    const activeElement = document.activeElement;
+    let focusState = null;
+    if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
+      const focusId = activeElement.getAttribute("data-focus-id");
+      if (focusId) {
+        focusState = {
+          id: focusId,
+          selectionStart: activeElement.selectionStart,
+          selectionEnd: activeElement.selectionEnd
+        };
+      }
+    }
     this.container.innerHTML = "";
     const wrapper = createElement("div", { className: "flex flex-col h-screen bg-gray-100 dark:bg-gray-950" });
     wrapper.appendChild(this.renderToolbar(state));
@@ -25183,6 +25199,17 @@ var FormBuilder = class {
     }
     wrapper.appendChild(main);
     this.container.appendChild(wrapper);
+    if (focusState) {
+      setTimeout(() => {
+        const elementToFocus = document.querySelector(`[data-focus-id="${focusState.id}"]`);
+        if (elementToFocus) {
+          elementToFocus.focus();
+          if (focusState.selectionStart !== null && focusState.selectionEnd !== null) {
+            elementToFocus.setSelectionRange(focusState.selectionStart, focusState.selectionEnd);
+          }
+        }
+      }, 0);
+    }
     createIcons({ icons: iconsAndAliases_exports });
     if (!state.isPreviewMode) {
       this.initSortable();
@@ -25212,7 +25239,7 @@ var FormBuilder = class {
       className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-md transition-colors",
       onclick: () => {
         if (confirm("Are you sure?")) {
-          formStore.getState().setSchema({ id: "new", title: "New Form", sections: [] });
+          formStore.getState().setSchema({ id: "new", title: "New Form", formName: "newForm", sections: [] });
         }
       }
     }, [getIcon("Trash2", 16), createElement("span", { className: "ml-2", text: "Clear" })]);
@@ -25223,8 +25250,11 @@ var FormBuilder = class {
     const saveBtn = createElement("button", {
       className: "flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md shadow-sm transition-colors",
       onclick: () => {
-        console.log(formStore.getState().schema);
-        alert("Schema saved to console");
+        const schema = formStore.getState().schema;
+        console.log("Schema saved:", schema);
+        if (this.onSave) {
+          this.onSave(schema);
+        }
       }
     }, [getIcon("Save", 16), createElement("span", { className: "ml-2", text: "Save" })]);
     right.appendChild(clearBtn);
@@ -25259,13 +25289,14 @@ var FormBuilder = class {
       }
     });
     const inner = createElement("div", { className: "max-w-3xl mx-auto" });
-    const titleInput = createElement("input", {
-      className: "text-3xl font-bold text-center bg-transparent border-none focus:outline-none focus:ring-0 w-full text-gray-900 dark:text-white mb-8",
-      value: state.schema.title,
-      placeholder: "Form Title",
-      oninput: (e) => formStore.getState().setSchema({ ...state.schema, title: e.target.value })
+    const formNameInput = createElement("input", {
+      className: "text-lg text-center bg-transparent border-none focus:outline-none focus:ring-0 w-full text-gray-600 dark:text-gray-400 mb-8",
+      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 })
     });
-    inner.appendChild(titleInput);
+    inner.appendChild(formNameInput);
     const sectionsContainer = createElement("div", { className: "space-y-6 min-h-[200px]", id: "sections-list" });
     state.schema.sections.forEach((section) => {
       const sectionEl = createElement("div", {
@@ -25278,6 +25309,7 @@ var FormBuilder = class {
       headerLeft.appendChild(createElement("input", {
         className: "bg-transparent font-semibold text-gray-700 dark:text-gray-200 focus:outline-none focus:border-b border-blue-500",
         value: section.title,
+        "data-focus-id": `section-title-${section.id}`,
         oninput: (e) => formStore.getState().updateSection(section.id, { title: e.target.value })
       }));
       header.appendChild(headerLeft);
@@ -25287,14 +25319,14 @@ var FormBuilder = class {
       }, [getIcon("Trash2", 18)]));
       sectionEl.appendChild(header);
       const fieldsGrid = createElement("div", {
-        className: "p-4 min-h-[100px] grid grid-cols-4 gap-4 fields-list",
+        className: "form-builder-grid p-4 min-h-[100px] fields-list",
         "data-section-id": section.id
       });
       section.fields.forEach((field) => {
         const isSelected = state.selectedFieldId === field.id;
         const span = field.width === "100%" ? "col-span-4" : field.width === "50%" ? "col-span-2" : "col-span-1";
         const fieldWrapper = createElement("div", {
-          className: `relative group rounded-lg border-2 transition-all bg-white dark:bg-gray-800 ${isSelected ? "border-blue-500 ring-2 ring-blue-200" : "border-transparent hover:border-gray-300 dark:hover:border-gray-600"} ${span}`,
+          className: `form-builder-field-wrapper ${isSelected ? "selected" : ""} ${span}`,
           "data-id": field.id,
           onclick: (e) => {
             e.stopPropagation();
@@ -25348,6 +25380,7 @@ var FormBuilder = class {
     labelGroup.appendChild(createElement("input", {
       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 })
     }));
     body.appendChild(labelGroup);
@@ -25356,6 +25389,7 @@ var FormBuilder = class {
     placeholderGroup.appendChild(createElement("input", {
       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 })
     }));
     body.appendChild(placeholderGroup);