form-builder-pro 1.2.1 → 1.2.3

package/dist/index.mjs

@@ -5366,7 +5366,8 @@ var ICONS = {
   "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" />'
+  "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" />',
+  "Cog": '<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /><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) {
   const svgString = ICONS[name] || `<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />`;
@@ -5864,8 +5865,11 @@ function convertValidationToArray(validation) {
     rules.push({ type: "maxDate", value: obj.maxDate });
   return rules;
 }
+function getModelKey(field) {
+  return field.fieldName ?? field.id;
+}
 var FormRenderer = class {
-  constructor(container, schema, onSubmit, onDropdownValueChange) {
+  constructor(container, schema, onSubmit, onDropdownValueChange, initialData) {
     __publicField(this, "container");
     __publicField(this, "schema");
     __publicField(this, "data", {});
@@ -5875,6 +5879,9 @@ var FormRenderer = class {
     this.schema = schema;
     this.onSubmit = onSubmit;
     this.onDropdownValueChange = onDropdownValueChange;
+    if (initialData && typeof initialData === "object") {
+      this.data = { ...initialData };
+    }
     this.render();
   }
   setSchema(schema) {
@@ -5889,7 +5896,8 @@ var FormRenderer = class {
       const sectionEl = createElement("div", { className: "space-y-3 md:space-y-4 !m-0" });
       sectionEl.appendChild(createElement("h2", { className: "text-xl  font-semibold text-[#3b497e] dark:text-gray-200 border-b pb-2", text: section.title }));
       const grid = createElement("div", { className: "form-builder-grid" });
-      section.fields.forEach((field) => {
+      const sortedFields = [...section.fields].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+      sortedFields.forEach((field) => {
         const isVisible = field.visible !== false;
         if (!isVisible) {
           return;
@@ -5903,8 +5911,9 @@ var FormRenderer = class {
           spanClass = getColSpanFromWidth(field.width || 100);
         }
         fieldWrapper.className = spanClass;
-        const fieldEl = FieldRenderer.render(field, this.data[field.id], (val) => {
-          this.data[field.id] = val;
+        const modelKey = getModelKey(field);
+        const fieldEl = FieldRenderer.render(field, this.data[modelKey], (val) => {
+          this.data[modelKey] = val;
           if (field.type === "select" && this.onDropdownValueChange) {
             this.onDropdownValueChange({
               fieldId: field.id,
@@ -5931,7 +5940,8 @@ var FormRenderer = class {
         section.fields.forEach((field) => {
           if (field.visible === false)
             return;
-          const fieldValue = this.data[field.id];
+          const modelKey = getModelKey(field);
+          const fieldValue = this.data[modelKey];
           const fieldElement = form.querySelector(`input[id*="${field.id}"], textarea[id*="${field.id}"], select[id*="${field.id}"]`);
           if (!fieldElement) {
             const altElement = Array.from(form.querySelectorAll("input, textarea, select")).find((el) => {
@@ -8783,9 +8793,10 @@ var FormBuilder = class {
           fields: s.fields.map((f) => ({
             id: f.id,
             type: f.type,
-            label: f.label
-            // Exclude frequently changing text properties from hash
-            // to prevent re-renders on typing
+            label: f.label,
+            layout: f.layout,
+            width: f.width
+            // Exclude frequently changing text (placeholder, etc.) to prevent re-renders on typing
           }))
         })),
         selectedField: state.selectedFieldId,
@@ -8996,6 +9007,26 @@ var FormBuilder = class {
     left.appendChild(redoBtn);
     toolbar.appendChild(left);
     const right = createElement("div", { className: "flex items-center space-x-2" });
+    const profileBtn = createElement("button", {
+      className: "p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-600 dark:text-gray-400",
+      title: "Profile",
+      onclick: () => {
+        if (this.options.onProfileClick) {
+          this.options.onProfileClick();
+        }
+      }
+    }, [getIcon("User", 20)]);
+    right.appendChild(profileBtn);
+    const settingsBtn = createElement("button", {
+      className: "p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors text-gray-600 dark:text-gray-400",
+      title: "Settings",
+      onclick: () => {
+        if (this.options.onSettingsClick) {
+          this.options.onSettingsClick();
+        }
+      }
+    }, [getIcon("Cog", 20)]);
+    right.appendChild(settingsBtn);
     const clearBtn = createElement("button", {
       className: "flex items-center px-3 py-2 text-sm font-medium text-red-600 bg-red-500 text-white rounded-md transition-colors",
       onclick: () => {
@@ -9236,18 +9267,24 @@ var FormBuilder = class {
     layoutLabelRow.appendChild(spanValueDisplay);
     layoutGroup.appendChild(layoutLabelRow);
     const spanButtonsContainer = createElement("div", { className: "grid grid-cols-6 gap-2 mt-2" });
+    const fieldId = selectedField.id;
     for (let span = 1; span <= 12; span++) {
       const isActive = currentSpan === span;
       const spanBtn = createElement("button", {
         type: "button",
-        className: `span-preset-btn px-2 py-1.5 text-xs rounded transition-colors ${isActive ? "bg-blue-600 text-white" : "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"}`,
+        className: `span-preset-btn px-2 py-1.5 text-xs rounded transition-colors cursor-pointer ${isActive ? "bg-blue-600 text-white" : "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"}`,
         text: `${span}`,
-        title: `${span} column${span > 1 ? "s" : ""} (${Math.round(span / 12 * 100)}%)`,
-        onclick: () => {
-          const layout = selectedField.layout || { row: 0, column: 0 };
-          formStore.getState().updateField(selectedField.id, {
+        title: `${span} column${span > 1 ? "s" : ""} (${Math.round(span / 12 * 100)}%)`
+      });
+      spanBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const state2 = formStore.getState();
+        const field = state2.schema.sections.flatMap((s) => s.fields).find((f) => f.id === fieldId);
+        if (field) {
+          const layout = field.layout || { row: 0, column: 0 };
+          state2.updateField(fieldId, {
             layout: { ...layout, span },
-            // Also update width for backward compatibility
             width: Math.round(span / 12 * 100)
           });
         }