form-builder-pro 0.0.6 → 0.0.8

package/dist/index.mjs

@@ -4448,6 +4448,11 @@ var ICONS = {
   "Undo": '<path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />',
   "Redo": '<path stroke-linecap="round" stroke-linejoin="round" d="M15 15l6-6m0 0l-6-6m6 6H9a6 6 0 000 12h3" />',
   "X": '<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />',
+  "User": '<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />',
+  "Lock": '<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />',
+  "CreditCard": '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />',
+  "MapPin": '<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />',
+  "Briefcase": '<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.67.38-1.053.33-2.177.58-3.345.726-.26.032-.52.05-.778.066m-13.882-6.626h.008v.008h-.008v-.008zm1.096-3.837a48.116 48.116 0 00-3.413.387c-1.069.16-1.837 1.094-1.837 2.175v4.784c0 .493.196.958.536 1.344m0 0a17.8 17.8 0 013.344.726c.25.085.476.215.67.38m13.784-5.32c-.34-.386-.536-.851-.536-1.344v-4.784c0-1.081-.768-2.015-1.837-2.175a48.041 48.041 0 01-3.413-.387m-4.5 8.006c.194.165.42.295.67.38 1.053.33 2.177.58 3.345.726.26.032.52.05.778.066m0-7.384V5.626a2.25 2.25 0 00-2.25-2.25h-4.5a2.25 2.25 0 00-2.25 2.25v2.247M16.5 6h-9" />',
   "Eye": '<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />'
 };
 function getIcon(name, size = 20) {
@@ -6879,6 +6884,9 @@ var FormBuilder = class {
     __publicField(this, "unsubscribe");
     __publicField(this, "options");
     __publicField(this, "activeTab", "fields");
+    if (!container) {
+      throw new Error("Builder container not found. Please ensure the container element exists before initializing FormBuilder.");
+    }
     this.container = container;
     this.options = options;
     if (options.existingForms) {
@@ -6915,6 +6923,10 @@ var FormBuilder = class {
   applyTemplate(template) {
     this.importSection(template);
   }
+  updateExistingForms(forms) {
+    formStore.getState().setExistingForms(forms);
+    this.render();
+  }
   setupSubscriptions() {
     this.unsubscribe = formStore.subscribe(() => {
       this.render();
@@ -7084,15 +7096,28 @@ var FormBuilder = class {
       if (templates.length === 0) {
         content.appendChild(createElement("div", { className: "text-sm text-gray-500 text-center mt-4", text: "No templates saved." }));
       } else {
+        const templatesList = createElement("div", { id: "templates-list", className: "space-y-3" });
         templates.forEach((t) => {
           const item = createElement("div", {
-            className: "p-3 mb-2 bg-gray-50 dark:bg-gray-800 border rounded cursor-pointer hover:border-blue-500",
-            onclick: () => this.applyTemplate(t)
+            className: "p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg cursor-move hover:border-blue-500 hover:shadow-sm transition-all template-item",
+            "data-template-id": t.id,
+            "data-type": "template-section"
           });
-          item.appendChild(createElement("div", { className: "font-medium text-sm", text: t.title }));
-          item.appendChild(createElement("div", { className: "text-xs text-gray-500", text: `${t.fields.length} fields` }));
-          content.appendChild(item);
+          item.appendChild(createElement("div", {
+            className: "font-semibold text-sm text-gray-800 dark:text-gray-200 mb-1 flex items-center gap-2"
+          }, [
+            getIcon("DocumentText", 16),
+            // Small icon
+            createElement("span", { text: t.title })
+          ]));
+          const fieldNames = t.fields.map((f) => f.label).join(", ");
+          item.appendChild(createElement("div", {
+            className: "text-xs text-gray-500 truncate",
+            text: `Fields: ${fieldNames}`
+          }));
+          templatesList.appendChild(item);
         });
+        content.appendChild(templatesList);
       }
     } else if (this.activeTab === "import") {
       const existingForms = formStore.getState().existingForms;
@@ -7151,7 +7176,11 @@ var FormBuilder = class {
       oninput: (e) => formStore.getState().setSchema({ ...state.schema, formName: e.target.value })
     });
     inner.appendChild(formNameInput);
-    const sectionsContainer = createElement("div", { className: "space-y-6 min-h-[200px]", id: "sections-list" });
+    const sectionsContainer = createElement("div", {
+      className: "space-y-6 min-h-[200px]",
+      id: "sections-list",
+      "data-drop-zone": "sections"
+    });
     state.schema.sections.forEach((section) => {
       const sectionEl = createElement("div", {
         className: "mb-6 rounded-lg border bg-white dark:bg-gray-900 shadow-sm transition-all border-gray-200 dark:border-gray-800",
@@ -7439,13 +7468,45 @@ var FormBuilder = class {
         animation: 150
       });
     }
+    const templatesList = document.getElementById("templates-list");
+    if (templatesList) {
+      new sortable_esm_default(templatesList, {
+        group: {
+          name: "shared",
+          pull: "clone",
+          put: false
+        },
+        sort: false,
+        animation: 150,
+        draggable: ".template-item",
+        forceFallback: true
+      });
+    }
     const sectionsList = document.getElementById("sections-list");
     if (sectionsList) {
       new sortable_esm_default(sectionsList, {
+        group: "shared",
         handle: ".section-handle",
         animation: 150,
+        onAdd: (evt) => {
+          const item = evt.item;
+          const templateId = item.getAttribute("data-template-id");
+          const isTemplate = item.getAttribute("data-type") === "template-section";
+          if (templateId && isTemplate) {
+            const templates = formStore.getState().templates;
+            const template = templates.find((t) => t.id === templateId);
+            if (template) {
+              item.remove();
+              formStore.getState().importSection(template);
+              return;
+            }
+          }
+        },
         onEnd: (evt) => {
-          if (evt.oldIndex !== void 0 && evt.newIndex !== void 0) {
+          const item = evt.item;
+          const templateId = item.getAttribute("data-template-id");
+          const isTemplate = item.getAttribute("data-type") === "template-section";
+          if (!templateId && !isTemplate && evt.oldIndex !== void 0 && evt.newIndex !== void 0 && evt.oldIndex !== evt.newIndex) {
             formStore.getState().moveSection(evt.oldIndex, evt.newIndex);
           }
         }