@myissue/vue-website-page-builder 3.4.16 → 3.4.17

package/README.md

@@ -162,7 +162,7 @@ The Page Builder is packed with features:
 - **YouTube Videos**: Integrate video content smoothly.
 - **Download HTML**: Export the entire page as a standalone HTML file.
 - **Global Page Styling**: Instantly define, update, or clear global styles for the main page wrapper at initialization or dynamically at runtime. Gain full control over fonts, colors, backgrounds, and more for a dynamic user experience.
-- **Tailwind Support**: Fully compatible with Tailwind CSS (with automatic class prefixing to avoid conflicts).
+- **Tailwind Support**: Fully compatible with Tailwind CSS (with automatic class prefixing to avoid conflicts). Tailwind installation is not required for the Page Builder to work.
 - **Scoped Styles**: To ensure clean and predictable styling, the builder uses scoped style isolation. There is no risk of style conflicts between the builder and your app.
 - **HTML Editor**: Access and edit raw HTML directly for full customization and developer-level control.
 
@@ -311,6 +311,8 @@ This prevents global styles from leaking into the builder and vice versa, which
 
 When a user adds a component into the page builder, all classes from that component are automatically prefixed with `pbx-` (e.g., `pbx-button`, `pbx-container`) to ensure style isolation and avoid conflicts.
 
+Tailwind installation is not required. The page builder ships with prefixed utility classes to ensure there are no naming conflicts. If you wish to use Tailwind in your own application, you may install and configure it as usual without interfering with the page builder.
+
 > **Note:**
 > Simply import the builder’s CSS file once in your project. All builder styles are namespaced, so there is no risk of style conflicts.
 

package/dist/vue-website-page-builder.js

@@ -2403,8 +2403,8 @@ class cb {
     }
     const t = e.closest("section");
     if (e.tagName === "SECTION")
-      this.deleteComponentFromDOM();
-    else if (e.remove(), t && this.isSectionEmpty(t)) {
+      await this.deleteComponentFromDOM();
+    else if (e.remove(), this.syncDomToStoreOnly(), t && this.isSectionEmpty(t)) {
       const r = t.getAttribute("data-componentid");
       if (r) {
         const i = this.pageBuilderStateStore.getComponents;
@@ -2415,7 +2415,7 @@ class cb {
               ...i.slice(0, s),
               ...i.slice(s + 1)
             ];
-            this.pageBuilderStateStore.setComponents(o), t.remove();
+            this.pageBuilderStateStore.setComponents(o), t.remove(), this.syncDomToStoreOnly(), this.saveDomComponentsToLocalStorage();
           }
         }
       }
@@ -2436,12 +2436,13 @@ class cb {
               o,
               ...i.slice(s + 1)
             ];
-            this.pageBuilderStateStore.setComponents(l);
+            this.pageBuilderStateStore.setComponents(l), this.syncDomToStoreOnly(), this.saveDomComponentsToLocalStorage();
           }
         }
       }
-    }
-    this.handleAutoSave(), this.pageBuilderStateStore.setComponent(null), this.pageBuilderStateStore.setElement(null), await this.clearHtmlSelection(), await oe(), await this.addListenersToEditableElements();
+    } else
+      this.syncDomToStoreOnly(), this.saveDomComponentsToLocalStorage();
+    this.pageBuilderStateStore.setComponent(null), this.pageBuilderStateStore.setElement(null), await this.clearHtmlSelection(), await oe(), await this.addListenersToEditableElements();
   }
   /**
    * Removes a CSS class from the currently selected element.
@@ -2609,7 +2610,7 @@ class cb {
     if (o) {
       const l = localStorage.getItem(o);
       if (l || localStorage.setItem(o, JSON.stringify(s)), l) {
-        const a = JSON.parse(l), p = a.components || [], d = (s.components || []).some((h, b) => {
+        const a = JSON.parse(l), p = a.components || [], c = s.components || [], d = c.length !== p.length || c.some((h, b) => {
           const x = p[b];
           return (
             // New component added
@@ -24992,7 +24993,7 @@ const Wk = ["src"], Kk = {
 }, RT = { class: "pbx-overflow-hidden pbx-shadow pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 md:pbx-rounded-lg" }, HT = { class: "pbx-overflow-x-auto" }, FT = { class: "pbx-w-max" }, jT = { class: "pbx-bg-white pbx-divide-y pbx-divide-gray-200" }, zT = { class: "pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500" }, VT = { class: "pbx-min-w-[30rem] pbx-w-max" }, qT = { key: 0 }, UT = { key: 1 }, WT = { key: 0 }, KT = { class: "pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500" }, GT = { class: "pbx-min-w-[30rem] pbx-w-max" }, JT = { class: "pbx-inline-flex pbx-items-center pbx-px-2.5 pbx-py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium" }, YT = { class: "pbx-mt-4 pbx-mb-4 pbx-py-8 pbx-px-2 pbx-border pbx-border-solid pbx-border-gray-600 pbx-rounded-xl" }, QT = { class: "pbx-mt-4 pbx-whitespace-pre-wrap pbx-text-white pbx-overflow-hidden pbx-bg-gray-900" }, XT = { class: "pbx-px-4 pbx-pb-8 pbx-pt-4 pbx-text-white pbx-text-xs pbx-break-all" }, ZT = { class: "pbx-myPrimaryParagraph pbx-text-xs pbx-text-white" }, e3 = {
   __name: "PageBuilderSettings",
   setup(n) {
-    const e = "3.4.16", t = Se, r = N(() => t.getPageBuilderConfig);
+    const e = "3.4.17", t = Se, r = N(() => t.getPageBuilderConfig);
     return (i, s) => {
       var o, l, a, p, c, d, f, h, b, x, m, v, S, k, g, O;
       return w(), M("div", CE, [