@myissue/vue-website-page-builder 3.4.7 → 3.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.4.7",
+  "version": "3.4.9",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/PageBuilder/PageBuilder.vue

@@ -864,7 +864,7 @@ onMounted(async () => {
       <main
         ref="pbxBuilderWrapper"
         id="page-builder-wrapper"
-        class="pbx-transition-all pbx-duration-300 pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-text-black pbx-h-[100vh] pbx-overflow-y-scroll pbx-relative pbx-pt-14"
+        class="pbx-transition-all pbx-duration-300 pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-text-black pbx-h-[100vh] pbx-overflow-y-scroll pbx-relative pbx-pt-16"
         :class="[getMenuRight ? 'pbx-w-full' : 'pbx-w-full']"
       >
         <div

package/src/css/style.css

@@ -367,7 +367,7 @@
   min-width: 4rem;
   padding-right: 1rem;
   padding-left: 1rem;
-  height: 2.2rem;
+  height: 2rem;
   box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
   background: oklch(86.9% 0.005 56.366);
 }
@@ -376,6 +376,7 @@
 #pagebuilder {
   position: relative;
   max-height: 100%;
+  min-height: fit-content;
 }
 #pagebuilder a {
   pointer-events: none;
@@ -537,7 +538,7 @@
   padding: 0;
 }
 
-/* Page Builder Start*/
+/* Page Builder Reset Default Browser Styles Start*/
 #pagebuilder input,
 #pagebuilder button,
 #pagebuilder textarea,
@@ -580,4 +581,22 @@
   padding: 0;
   margin: 0;
 }
-/* Page Builder End*/
+
+#pagebuilder img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+#pagebuilder a {
+  color: inherit;
+  text-decoration: none;
+}
+#pagebuilder code,
+#pagebuilder pre,
+#pagebuilder strong,
+#pagebuilder em {
+  font: inherit;
+  font-weight: inherit;
+}
+/* Page Builder Reset Default Browser Styles End*/

package/src/services/PageBuilderService.ts

@@ -570,11 +570,11 @@ export class PageBuilderService {
   /**
    * Completes the mounting process by loading components into the DOM and setting up listeners.
    * @param {string} html - The HTML string of components to mount.
-   * @param {boolean} [usePassedPageSettings] - Whether to use page settings from the passed data.
+   * @param {boolean} [useConfigPageSettings] - Whether to use page settings from the passed data.
    * @private
    */
-  private async completeMountProcess(html: string, usePassedPageSettings?: boolean) {
-    await this.mountComponentsToDOM(html, usePassedPageSettings)
+  private async completeMountProcess(html: string, useConfigPageSettings?: boolean) {
+    await this.mountComponentsToDOM(html, useConfigPageSettings)
 
     // Clean up any old localStorage items related to previous builder sessions
     this.deleteOldPageBuilderLocalStorage()
@@ -1452,7 +1452,7 @@ export class PageBuilderService {
         .forEach((section) => section.remove())
     }
   }
-  //
+
   public async undo() {
     this.pageBuilderStateStore.setIsLoadingGlobal(true)
     await delay(300)
@@ -1464,7 +1464,7 @@ export class PageBuilderService {
       this.pageBuilderStateStore.setHistoryIndex(this.pageBuilderStateStore.getHistoryIndex - 1)
       const data = history[this.pageBuilderStateStore.getHistoryIndex]
       const htmlString = this.renderComponentsToHtml(data.components)
-      await this.mountComponentsToDOM(htmlString)
+      await this.mountComponentsToDOM(htmlString, false, data.pageSettings)
     }
     this.pageBuilderStateStore.setIsLoadingGlobal(false)
   }
@@ -1480,7 +1480,7 @@ export class PageBuilderService {
       this.pageBuilderStateStore.setHistoryIndex(this.pageBuilderStateStore.getHistoryIndex + 1)
       const data = history[this.pageBuilderStateStore.getHistoryIndex]
       const htmlString = this.renderComponentsToHtml(data.components)
-      await this.mountComponentsToDOM(htmlString)
+      await this.mountComponentsToDOM(htmlString, false, data.pageSettings)
     }
     this.pageBuilderStateStore.setIsLoadingGlobal(false)
   }
@@ -1667,9 +1667,7 @@ export class PageBuilderService {
     await nextTick()
 
     // Scroll to the moved component
-    const pageBuilderWrapper = document.querySelector(
-      '#page-builder-wrapper',
-    ) as HTMLElement | null
+    const pageBuilderWrapper = document.querySelector('#page-builder-wrapper') as HTMLElement | null
     const movedComponentElement = pageBuilderWrapper?.querySelector(
       `section[data-componentid="${componentToMove.id}"]`,
     ) as HTMLElement
@@ -1951,6 +1949,10 @@ export class PageBuilderService {
 
     if (baseKey) {
       const currentDataRaw = localStorage.getItem(baseKey)
+
+      if (!currentDataRaw) {
+        localStorage.setItem(baseKey, JSON.stringify(dataToSave))
+      }
       if (currentDataRaw) {
         const currentData = JSON.parse(currentDataRaw)
 
@@ -1961,40 +1963,49 @@ export class PageBuilderService {
         const hasChanges = newComponents.some((newComponent, index) => {
           const currentComponent = currentComponents[index]
           return (
-            !currentComponent || // New component added
-            currentComponent.html_code !== newComponent.html_code // Component HTML changed
+            // New component added
+            !currentComponent ||
+            // Component HTML changed
+            currentComponent.html_code !== newComponent.html_code
           )
         })
 
-        if (!hasChanges) {
-          return
-        }
-      }
+        // Compare pageSettings
+        const hasPageSettingsChanges =
+          (currentData.pageSettings &&
+            currentData.pageSettings.classes !== dataToSave.pageSettings.classes) ||
+          (currentData.pageSettings &&
+            currentData.pageSettings.style !== dataToSave.pageSettings.style)
+
+        // Only save to local storage if there's a difference between the existing saved data and the current DOM data
+        if (hasChanges || hasPageSettingsChanges) {
+          localStorage.setItem(baseKey, JSON.stringify(dataToSave))
+          let history = LocalStorageManager.getHistory(baseKey)
+
+          const lastState = history[history.length - 1]
+          if (lastState) {
+            const lastComponents = JSON.stringify(lastState.components)
+            const newComponents = JSON.stringify(dataToSave.components)
+            const lastSettings = JSON.stringify(lastState.pageSettings)
+            const newSettings = JSON.stringify(dataToSave.pageSettings)
+            if (lastComponents === newComponents && lastSettings === newSettings) {
+              return // Do not save duplicate state
+            }
+          }
 
-      localStorage.setItem(baseKey, JSON.stringify(dataToSave))
-      let history = LocalStorageManager.getHistory(baseKey)
-
-      const lastState = history[history.length - 1]
-      if (lastState) {
-        const lastComponents = JSON.stringify(lastState.components)
-        const newComponents = JSON.stringify(dataToSave.components)
-        const lastSettings = JSON.stringify(lastState.pageSettings)
-        const newSettings = JSON.stringify(dataToSave.pageSettings)
-        if (lastComponents === newComponents && lastSettings === newSettings) {
-          return // Do not save duplicate state
+          if (this.pageBuilderStateStore.getHistoryIndex < history.length - 1) {
+            history = history.slice(0, this.pageBuilderStateStore.getHistoryIndex + 1)
+          }
+          history.push(dataToSave)
+          if (history.length > 10) {
+            history = history.slice(history.length - 10)
+          }
+          localStorage.setItem(baseKey + '-history', JSON.stringify(history))
+          this.pageBuilderStateStore.setHistoryIndex(history.length - 1)
+          this.pageBuilderStateStore.setHistoryLength(history.length)
+          return
         }
       }
-
-      if (this.pageBuilderStateStore.getHistoryIndex < history.length - 1) {
-        history = history.slice(0, this.pageBuilderStateStore.getHistoryIndex + 1)
-      }
-      history.push(dataToSave)
-      if (history.length > 10) {
-        history = history.slice(history.length - 10)
-      }
-      localStorage.setItem(baseKey + '-history', JSON.stringify(history))
-      this.pageBuilderStateStore.setHistoryIndex(history.length - 1)
-      this.pageBuilderStateStore.setHistoryLength(history.length)
     }
   }
   /**
@@ -2762,9 +2773,11 @@ export class PageBuilderService {
    *
    * Typical use cases include restoring a published state, importing templates, or previewing published content.
    */
+
   private async mountComponentsToDOM(
     htmlString: string,
     usePassedPageSettings?: boolean,
+    pageSettingsFromHistory?: PageSettings,
   ): Promise<void> {
     // Trim HTML string
     const trimmedData = htmlString.trim()
@@ -2780,36 +2793,53 @@ export class PageBuilderService {
       const importedPageBuilder = doc.querySelector('#pagebuilder') as HTMLElement | null
       const livePageBuilder = document.querySelector('#pagebuilder') as HTMLElement | null
 
-      // Initialize pageSettings to null
-      let pageSettings = null
+      // Initialize configPageSettings to null
+      let configPageSettings = null
 
       // Use stored page settings if the flag is true
       if (usePassedPageSettings) {
-        pageSettings = this.pageBuilderStateStore.getPageBuilderConfig?.pageSettings || null
+        configPageSettings = this.pageBuilderStateStore.getPageBuilderConfig?.pageSettings || null
       }
 
       // Use imported page builder settings if available and pageSettings is still null
-      if (!pageSettings && importedPageBuilder) {
-        pageSettings = {
+      if (!pageSettingsFromHistory && !configPageSettings && importedPageBuilder) {
+        configPageSettings = {
           classes: importedPageBuilder.className || '',
           style: importedPageBuilder.getAttribute('style') || '',
         }
       }
 
       // Fallback to stored page settings if pageSettings is still null
-      if (!pageSettings) {
-        pageSettings = this.pageBuilderStateStore.getPageBuilderConfig?.pageSettings || null
+      if (!configPageSettings) {
+        configPageSettings = this.pageBuilderStateStore.getPageBuilderConfig?.pageSettings || null
       }
 
       // Apply the page settings to the live page builder
-      if (pageSettings && livePageBuilder) {
+      if (!pageSettingsFromHistory && configPageSettings && livePageBuilder) {
         // Remove existing class and style attributes
         livePageBuilder.removeAttribute('class')
         livePageBuilder.removeAttribute('style')
 
         // Apply new classes and styles
-        livePageBuilder.className = pageSettings.classes || ''
-        livePageBuilder.setAttribute('style', this.convertStyleObjectToString(pageSettings.style))
+        livePageBuilder.className = configPageSettings.classes || ''
+        livePageBuilder.setAttribute(
+          'style',
+          this.convertStyleObjectToString(configPageSettings.style),
+        )
+      }
+
+      // Apply the page settings to the live page builder
+      if (pageSettingsFromHistory && livePageBuilder) {
+        // Remove existing class and style attributes
+        livePageBuilder.removeAttribute('class')
+        livePageBuilder.removeAttribute('style')
+
+        // Apply new classes and styles
+        livePageBuilder.className = pageSettingsFromHistory.classes || ''
+        livePageBuilder.setAttribute(
+          'style',
+          this.convertStyleObjectToString(pageSettingsFromHistory.style),
+        )
       }
 
       // Select all <section> elements
@@ -2860,7 +2890,6 @@ export class PageBuilderService {
       await this.addListenersToEditableElements()
     }
   }
-
   private updateLocalStorageItemName(): void {
     const formtype =
       this.pageBuilderStateStore.getPageBuilderConfig &&

package/src/tests/TestComponents/DemoUnsplash.vue

@@ -144,20 +144,20 @@ onMounted(async () => {
         "
       >
         <div class="pbx-mysearchBarWithOptions">
-          <div class="pbx-relative pbx-w-full">
-            <div
-              class="pbx-flex pbx-absolute pbx-inset-y-0 pbx-left-0 pbx-items-center pbx-pl-3 pbx-pointer-events-none"
-            >
-              <span class="material-symbols-outlined"> search </span>
-            </div>
+          <div class="pbx-relative pbx-w-full pbx-flex pbx-gap-2">
             <input
               type="search"
               id="search_query"
               v-model="getSearchTerm"
-              class="pbx-myPrimarySearchInput pbx-w-full"
+              class="pbx-myPrimarySearchInput pbx-w-full pbx-pl-10 pbx-border-0"
               autocomplete="off"
               :placeholder="translate('Search...')"
             />
+            <div
+              class="pbx-flex pbx-absolute pbx-inset-y-0 pbx-left-0 pbx-items-center pbx-pl-3 pbx-pointer-events-none"
+            >
+              <span class="material-symbols-outlined"> search </span>
+            </div>
           </div>
 
           <button