form-builder-pro 1.1.6 → 1.1.8

package/dist/index.css

@@ -1631,6 +1631,16 @@ input[type="radio"]:checked::after {
   border-color: hsl(var(--secondary));
 }
 
+.hover\:bg-\[\#018a8d\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(1 138 141 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-\[\#2d3a62\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(45 58 98 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-blue-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));

package/dist/index.d.mts

@@ -258,7 +258,6 @@ declare class FormBuilder {
     private container;
     private unsubscribe;
     private options;
-    private isInputUpdate;
     private lastRenderedSchemaHash;
     constructor(container: HTMLElement, options?: FormBuilderOptions);
     loadForm(json: FormSchema): void;

package/dist/index.d.ts

@@ -258,7 +258,6 @@ declare class FormBuilder {
     private container;
     private unsubscribe;
     private options;
-    private isInputUpdate;
     private lastRenderedSchemaHash;
     constructor(container: HTMLElement, options?: FormBuilderOptions);
     loadForm(json: FormSchema): void;

package/dist/index.js

@@ -8616,8 +8616,6 @@ var FormBuilder = class {
     __publicField(this, "container");
     __publicField(this, "unsubscribe");
     __publicField(this, "options");
-    __publicField(this, "isInputUpdate", false);
-    // Track if update is from text input
     __publicField(this, "lastRenderedSchemaHash", "");
     __publicField(this, "activeTab", "fields");
     if (!container) {
@@ -8775,12 +8773,11 @@ var FormBuilder = class {
     }
   }
   setupSubscriptions() {
+    let lastPreviewMode = null;
     this.unsubscribe = formStore.subscribe(() => {
-      if (this.isInputUpdate) {
-        this.isInputUpdate = false;
-        return;
-      }
       const state = formStore.getState();
+      const previewModeChanged = lastPreviewMode !== null && lastPreviewMode !== state.isPreviewMode;
+      lastPreviewMode = state.isPreviewMode;
       const schemaHash = JSON.stringify({
         sections: state.schema.sections.map((s) => ({
           id: s.id,
@@ -8793,9 +8790,11 @@ var FormBuilder = class {
             // to prevent re-renders on typing
           }))
         })),
-        selectedField: state.selectedFieldId
+        selectedField: state.selectedFieldId,
+        isPreviewMode: state.isPreviewMode
+        // Include preview mode in hash
       });
-      if (schemaHash !== this.lastRenderedSchemaHash) {
+      if (schemaHash !== this.lastRenderedSchemaHash || previewModeChanged) {
         this.lastRenderedSchemaHash = schemaHash;
         this.render();
       }
@@ -9008,9 +9007,14 @@ var FormBuilder = class {
       }
     }, [getIcon("Trash2", 16), createElement("span", { className: "", title: "Clear" })]);
     const previewBtn = createElement("button", {
-      className: `flex items-center px-3 py-2 text-sm bg-[#3b497e] text-white font-medium rounded-md transition-colors ${state.isPreviewMode ? "bg-[#019FA2] text-blue-700 dark:bg-blue-900 dark:text-blue-200" : "text-gray-700 dark:text-gray-200 "}`,
-      onclick: () => formStore.getState().togglePreview()
-    }, [getIcon(state.isPreviewMode ? "X" : "Eye", 16), createElement("span", { className: "", text: state.isPreviewMode ? "" : "" })]);
+      className: `flex items-center justify-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${state.isPreviewMode ? "bg-[#019FA2] text-white hover:bg-[#018a8d]" : "bg-[#3b497e] text-white hover:bg-[#2d3a62]"}`,
+      onclick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        formStore.getState().togglePreview();
+      },
+      title: state.isPreviewMode ? "Exit Preview" : "Preview Form"
+    }, [getIcon(state.isPreviewMode ? "X" : "Eye", 16)]);
     const saveBtn = createElement("button", {
       className: "flex items-center px-3 py-2 text-sm font-medium text-white bg-[#019FA2]  rounded-md shadow-sm transition-colors",
       onclick: () => {
@@ -9141,7 +9145,6 @@ var FormBuilder = class {
       placeholder: "formName (e.g., contactForm)",
       "data-focus-id": "form-name",
       oninput: (e) => {
-        this.isInputUpdate = true;
         formStore.getState().setSchema({ ...state.schema, formName: e.target.value });
       }
     });
@@ -9204,7 +9207,6 @@ var FormBuilder = class {
       value: selectedField.label,
       "data-focus-id": `field-label-${selectedField.id}`,
       oninput: (e) => {
-        this.isInputUpdate = true;
         formStore.getState().updateField(selectedField.id, { label: e.target.value });
       }
     }));
@@ -9216,7 +9218,6 @@ var FormBuilder = class {
       value: selectedField.placeholder || "",
       "data-focus-id": `field-placeholder-${selectedField.id}`,
       oninput: (e) => {
-        this.isInputUpdate = true;
         formStore.getState().updateField(selectedField.id, { placeholder: e.target.value });
       }
     }));