form-builder-pro 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -4353,6 +4353,29 @@ var formStore = createStore((set, get) => ({
       historyIndex: historyIndex + 1
     });
   },
+  addTemplateFields: (targetSectionId, template, index2) => {
+    set((state) => {
+      const sectionIndex = state.schema.sections.findIndex((s) => s.id === targetSectionId);
+      if (sectionIndex === -1)
+        return state;
+      const section = state.schema.sections[sectionIndex];
+      const newFields = template.fields.map(cloneField);
+      const currentFields = [...section.fields];
+      if (typeof index2 === "number" && index2 >= 0) {
+        currentFields.splice(index2, 0, ...newFields);
+      } else {
+        currentFields.push(...newFields);
+      }
+      const newSection = { ...section, fields: currentFields };
+      const newSections = [...state.schema.sections];
+      newSections[sectionIndex] = newSection;
+      return {
+        schema: { ...state.schema, sections: newSections },
+        history: [...state.history.slice(0, state.historyIndex + 1), { ...state.schema, sections: newSections }],
+        historyIndex: state.historyIndex + 1
+      };
+    });
+  },
   undo: () => {
     const { history, historyIndex } = get();
     if (historyIndex > 0) {
@@ -4476,7 +4499,7 @@ var FieldRenderer = class {
     const wrapper = createElement("div", { className: "w-full" });
     if (field.type !== "checkbox") {
       const label = createElement("label", {
-        className: "text-sm font-medium leading-none mb-2 block text-gray-900 dark:text-gray-100",
+        className: "text-xs sm:text-sm font-medium leading-none mb-2 block text-gray-900 dark:text-gray-100",
         text: field.label
       });
       if (field.required) {
@@ -4485,7 +4508,7 @@ var FieldRenderer = class {
       wrapper.appendChild(label);
     } else {
       const label = createElement("label", {
-        className: "text-sm font-medium leading-none mb-2 block text-gray-900 dark:text-gray-100",
+        className: "text-xs sm:text-sm font-medium leading-none mb-2 block text-gray-900 dark:text-gray-100",
         text: field.label
       });
       if (field.required) {
@@ -4497,7 +4520,7 @@ var FieldRenderer = class {
     switch (field.type) {
       case "textarea":
         input = createElement("textarea", {
-          className: "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className: "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           placeholder: field.placeholder,
           value: value || "",
           disabled: readOnly,
@@ -4506,7 +4529,7 @@ var FieldRenderer = class {
         break;
       case "select":
         input = createElement("select", {
-          className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className: "flex min-h-touch w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           value: value || "",
           disabled: readOnly,
           onchange: (e) => onChange?.(e.target.value)
@@ -4517,10 +4540,10 @@ var FieldRenderer = class {
         });
         break;
       case "checkbox":
-        input = createElement("div", { className: "flex items-center h-10" });
+        input = createElement("div", { className: "flex items-center min-h-touch" });
         const checkbox = createElement("input", {
           type: "checkbox",
-          className: "h-5 w-5 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer",
+          className: "h-5 w-5 sm:h-6 sm:w-6 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer",
           checked: !!value,
           disabled: readOnly,
           onchange: (e) => onChange?.(e.target.checked)
@@ -4530,18 +4553,18 @@ var FieldRenderer = class {
       case "radio":
         input = createElement("div", { className: "space-y-2" });
         field.options?.forEach((opt) => {
-          const radioWrapper = createElement("div", { className: "flex items-center space-x-2" });
+          const radioWrapper = createElement("div", { className: "flex items-center space-x-2 min-h-touch" });
           const radio = createElement("input", {
             type: "radio",
             name: field.id,
             value: opt.value,
             checked: value === opt.value,
             disabled: readOnly,
-            className: "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className: "aspect-square h-4 w-4 sm:h-5 sm:w-5 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             onchange: (e) => onChange?.(e.target.value)
           });
           const radioLabel = createElement("label", {
-            className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            className: "text-xs sm:text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
             text: opt.label
           });
           radioWrapper.appendChild(radio);
@@ -4552,7 +4575,7 @@ var FieldRenderer = class {
       default:
         input = createElement("input", {
           type: field.type === "phone" ? "tel" : field.type,
-          className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className: "flex min-h-touch w-full rounded-md border border-input bg-background px-3 py-2 text-sm sm:text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           placeholder: field.placeholder,
           value: value || "",
           disabled: readOnly,
@@ -4561,7 +4584,7 @@ var FieldRenderer = class {
     }
     wrapper.appendChild(input);
     if (field.description) {
-      wrapper.appendChild(createElement("p", { className: "text-sm text-muted-foreground mt-1", text: field.description }));
+      wrapper.appendChild(createElement("p", { className: "text-xs sm:text-sm text-muted-foreground mt-1", text: field.description }));
     }
     return wrapper;
   }
@@ -4585,11 +4608,11 @@ var FormRenderer = class {
   }
   render() {
     this.container.innerHTML = "";
-    const form = createElement("form", { className: "space-y-8" });
-    form.appendChild(createElement("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white", text: this.schema.title }));
+    const form = createElement("form", { className: "space-y-6 md:space-y-8" });
+    form.appendChild(createElement("h1", { className: "text-xl md:text-2xl font-bold text-gray-900 dark:text-white", text: this.schema.title }));
     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 sectionEl = createElement("div", { className: "space-y-3 md:space-y-4" });
+      sectionEl.appendChild(createElement("h2", { className: "text-lg md:text-xl font-semibold text-gray-800 dark:text-gray-200 border-b pb-2", text: section.title }));
       const grid = createElement("div", { className: "form-builder-grid" });
       section.fields.forEach((field) => {
         const fieldWrapper = createElement("div");
@@ -4616,14 +4639,14 @@ var FormRenderer = class {
     });
     const submitBtn = createElement("button", {
       type: "submit",
-      className: "px-6 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
+      className: "w-full sm:w-auto px-6 py-3 min-h-touch bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors",
       text: "Submit"
     });
     form.onsubmit = (e) => {
       e.preventDefault();
       this.onSubmit?.(this.data);
     };
-    const btnWrapper = createElement("div", { className: "pt-4" });
+    const btnWrapper = createElement("div", { className: "pt-4 flex justify-center sm:justify-start" });
     btnWrapper.appendChild(submitBtn);
     form.appendChild(btnWrapper);
     this.container.appendChild(form);
@@ -6982,7 +7005,7 @@ var FormBuilder = class {
     this.container.innerHTML = "";
     const wrapper = createElement("div", { className: "flex flex-col h-screen " });
     wrapper.appendChild(this.renderToolbar(state));
-    const main = createElement("div", { className: "flex flex-1 overflow-hidden" });
+    const main = createElement("div", { className: "flex flex-col md:flex-row flex-1 overflow-hidden" });
     if (state.isPreviewMode) {
       const previewContainer = createElement("div", { className: "flex-1 p-8 overflow-y-auto bg-white dark:bg-gray-900 flex justify-center" });
       const inner = createElement("div", { className: "w-full max-w-3xl" });
@@ -6990,9 +7013,15 @@ var FormBuilder = class {
       previewContainer.appendChild(inner);
       main.appendChild(previewContainer);
     } else {
-      main.appendChild(this.renderToolbox());
-      main.appendChild(this.renderCanvas(state));
-      main.appendChild(this.renderConfigPanel(state));
+      const toolboxWrapper = createElement("div", { className: "form-builder-toolbox-wrapper w-full md:w-80 bg-white dark:bg-gray-900 border-r md:border-r border-b md:border-b-0 border-gray-200 dark:border-gray-800" });
+      toolboxWrapper.appendChild(this.renderToolbox());
+      main.appendChild(toolboxWrapper);
+      const canvasWrapper = createElement("div", { className: "form-builder-canvas flex-1 overflow-y-auto" });
+      canvasWrapper.appendChild(this.renderCanvas(state));
+      main.appendChild(canvasWrapper);
+      const configWrapper = createElement("div", { className: "form-builder-config-wrapper w-full md:w-80 bg-white dark:bg-gray-900 border-l md:border-l border-t md:border-t-0 border-gray-200 dark:border-gray-800" });
+      configWrapper.appendChild(this.renderConfigPanel(state));
+      main.appendChild(configWrapper);
     }
     wrapper.appendChild(main);
     this.container.appendChild(wrapper);
@@ -7090,7 +7119,7 @@ var FormBuilder = class {
     return toolbar;
   }
   renderToolbox() {
-    const toolbox = createElement("div", { className: "w-80 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col h-full" });
+    const toolbox = createElement("div", { className: "bg-white dark:bg-gray-900 flex flex-col h-full" });
     const tabs = createElement("div", { className: "flex border-b border-gray-200 dark:border-gray-800" });
     const createTab = (id, label) => {
       const isActive = this.activeTab === id;
@@ -7189,7 +7218,7 @@ var FormBuilder = class {
   }
   renderCanvas(state) {
     const canvas = createElement("div", {
-      className: "flex-1 bg-white dark:bg-gray-950 p-8 overflow-y-auto h-full",
+      className: "flex-1 bg-white dark:bg-gray-950 p-4 md:p-8 overflow-y-auto",
       onclick: (e) => {
         if (e.target === canvas || e.target === canvas.firstElementChild) {
           formStore.getState().selectField(null);
@@ -7306,7 +7335,7 @@ var FormBuilder = class {
     return canvas;
   }
   renderConfigPanel(state) {
-    const panel = createElement("div", { className: "w-80 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 flex flex-col h-full" });
+    const panel = createElement("div", { className: "bg-white dark:bg-gray-900 flex flex-col h-full" });
     const selectedField = state.schema.sections.flatMap((s) => s.fields).find((f) => f.id === state.selectedFieldId);
     if (!selectedField) {
       panel.appendChild(createElement("div", { className: "p-6 text-center text-gray-500", text: "Select a field to configure" }));
@@ -7552,6 +7581,16 @@ var FormBuilder = class {
           const type = item.getAttribute("data-type");
           const sectionId = list.getAttribute("data-section-id");
           if (type && sectionId) {
+            if (type === "template-section") {
+              const templateId = item.getAttribute("data-template-id");
+              const templates = formStore.getState().templates;
+              const template = templates.find((t) => t.id === templateId);
+              item.remove();
+              if (template) {
+                formStore.getState().addTemplateFields(sectionId, template, evt.newIndex);
+              }
+              return;
+            }
             item.remove();
             formStore.getState().addField(sectionId, type, evt.newIndex);
           } else if (sectionId) {