@myissue/vue-website-page-builder 3.3.58 → 3.3.59

package/package.json

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

package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue

@@ -44,13 +44,20 @@ watch(
           v-if="globalPageLayout"
           class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor"
         >
-          <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-my-0 pbx-py-0">Background Color</p>
+          <div class="pbx-flex pbx-justify-start pbx-items-center pbx-gap-2">
+            <div
+              class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-800 pbx-rounded-sm"
+              :class="`pbx-bg-${backgroundColor?.replace('pbx-bg-', '')}`"
+            ></div>
+            <div>Background Color</div>
+          </div>
+
           <span v-if="globalPageLayout" class="material-symbols-outlined"> chevron_right </span>
         </ListboxButton>
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
+          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">

package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue

@@ -44,13 +44,20 @@ watch(
           v-if="globalPageLayout"
           class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor"
         >
-          <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-my-0 pbx-py-0">Text Color</p>
+          <div class="pbx-flex pbx-justify-start pbx-items-center pbx-gap-2">
+            <div
+              class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-800 pbx-rounded-sm"
+              :class="`pbx-bg-${textColor?.replace('pbx-text-', '')}`"
+            ></div>
+            <div>Text Color</div>
+          </div>
+
           <span v-if="globalPageLayout" class="material-symbols-outlined"> chevron_right </span>
         </ListboxButton>
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
+          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">

package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

@@ -105,12 +105,24 @@ const handleUpdatePageStyles = async function () {
 
   await pageBuilderService.globalPageStyles()
 }
+
+const clearClassesFromPage = async function () {
+  await pageBuilderService.clearClassesFromPage()
+}
+
+const clearInlineStylesFromPagee = async function () {
+  await pageBuilderService.clearInlineStylesFromPagee()
+}
+
 const handleCloseGlobalPageStyles = async function () {
+  await pageBuilderService.handleManualSave()
+
   // Remove global highlight if present
   const pagebuilder = document.querySelector('#pagebuilder')
   if (pagebuilder) {
     pagebuilder.removeAttribute('data-global-selected')
   }
+
   showModalGlobalPageStyles.value = false
 }
 </script>
@@ -171,10 +183,7 @@ const handleCloseGlobalPageStyles = async function () {
       </div>
 
       <!-- Global Page Styles -->
-      <article
-        v-if="Array.isArray(getComponents) && getComponents.length >= 1"
-        class="pbx-my-1 pbx-bg-white"
-      >
+      <article class="pbx-my-1 pbx-bg-white">
         <EditorAccordion>
           <template #title>Global Page Styles</template>
           <template #content>
@@ -253,6 +262,29 @@ const handleCloseGlobalPageStyles = async function () {
           <ClassEditor></ClassEditor>
         </article>
       </div>
+      <label class="pbx-myPrimaryInputLabel pbx-my-4">
+        Choose an action to clean up your page:
+      </label>
+      <div
+        class="pbx-border-0 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4 pbx-flex pbx-items-center pbx-justify-end"
+      >
+        <div class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center">
+          <div
+            class="sm:pbx-grid-cols-1 sm:pbx-items-end sm:pbx-justify-end pbx-flex sm:pbx-flex-row pbx-flex-col pbx-myPrimaryGap sm:pbx-w-5/6 pbx-w-full pbx-mt-4"
+          >
+            <!-- Button: Clear all CSS classes -->
+            <button @click="clearClassesFromPage" class="pbx-myPrimaryButton" type="button">
+              Clear All CSS Classes
+            </button>
+
+            <!-- Button: Clear all inline styles -->
+            <button @click="clearInlineStylesFromPagee" class="pbx-myPrimaryButton" type="button">
+              Clear All Inline Styles
+            </button>
+          </div>
+        </div>
+        <!--v-if-->
+      </div>
     </ModalBuilder>
   </div>
 </template>

package/src/DemoComponents/HomeSection.vue

@@ -61,7 +61,7 @@ const configPageBuilder = {
     image: '/jane_doe.jpg',
   },
   updateOrCreate: {
-    formType: 'create',
+    formType: 'update',
     formName: 'collection',
   },
   pageBuilderLogo: {
@@ -79,14 +79,14 @@ const configPageBuilder = {
   settings: {
     brandColor: '#DB93B0',
   },
-  // pageSettings: {
-  //   classes:
-  //     'pbx-font-didot pbx-italic pbx-px-20 pbx-rounded-full pbx-rounded-tr-full pbx-border-8 pbx-border-green-800 pbx-border-solid pbx-text-neutral-300 pbx-bg-stone-700',
-  //   style: {
-  //     backgroundColor: 'red',
-  //     border: '6px solid yellow',
-  //   },
-  // },
+  pageSettings: {
+    classes:
+      'pbx-font-didot pbx-italic pbx-px-20 pbx-rounded-full pbx-rounded-tr-full pbx-border-8 pbx-border-green-800 pbx-border-solid pbx-text-neutral-300 pbx-bg-stone-700',
+    style: {
+      backgroundColor: 'red',
+      border: '6px solid yellow',
+    },
+  },
 } as const
 
 onMounted(async () => {

package/src/PageBuilder/PageBuilder.vue

@@ -729,7 +729,7 @@ onMounted(async () => {
         >
           <div
             id="editToolbar"
-            class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-min-w-48 pbx-items-center pbx-rounded-full pbx-px-4 pbx-bg-red-200 pbx-h-0"
+            class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-min-w-72 pbx-items-center pbx-rounded-full pbx-px-4 pbx-bg-red-200 pbx-h-0"
             style="
               box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
               background: oklch(86.9% 0.005 56.366);

package/src/composables/PageBuilderService.ts

@@ -45,6 +45,7 @@ export class PageBuilderService {
   private originalComponents: BuilderResourceData | undefined = undefined
   // Holds data to be mounted when #pagebuilder is not yet present in the DOM
   private pendingMountData: BuilderResourceData | null = null
+  private isPageBuilderMissingOnStart: boolean = false
 
   constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
     this.hasStartedEditing = false
@@ -278,6 +279,9 @@ export class PageBuilderService {
       this.#updateLocalStorageItemName()
 
       // Page Builder is not Present in the DOM but Components have been passed to the Builder
+      if (!pagebuilder) {
+        this.isPageBuilderMissingOnStart = true
+      }
       if (passedComponentsArray && !pagebuilder) {
         this.pendingMountData = passedComponentsArray
       }
@@ -335,28 +339,23 @@ export class PageBuilderService {
       if (!this.pendingMountData) {
         // FOCUS ON: passedComponentsArray
         if (passedComponentsArray && !localStorageData) {
-          await this.#completeMountProcess(JSON.stringify(passedComponentsArray))
-          return
-        }
-        if (passedComponentsArray && localStorageData) {
-          this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
-
-          await this.#completeMountProcess(JSON.stringify(passedComponentsArray))
+          await this.#completeMountProcess(JSON.stringify(passedComponentsArray), true)
           return
         }
 
         if (passedComponentsArray && localStorageData) {
           this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
 
-          await this.#completeMountProcess(JSON.stringify(passedComponentsArray))
+          await this.#completeMountProcess(JSON.stringify(passedComponentsArray), true)
           return
         }
 
-        if (localStorageData && !passedComponentsArray) {
+        if (!passedComponentsArray && localStorageData && this.isPageBuilderMissingOnStart) {
           await this.#completeMountProcess(localStorageData)
           return
         }
-        if (!passedComponentsArray && !localStorageData) {
+
+        if (!passedComponentsArray && !localStorageData && this.isPageBuilderMissingOnStart) {
           await this.#completeMountProcess(JSON.stringify([]))
           return
         }
@@ -364,20 +363,19 @@ export class PageBuilderService {
 
       // FOCUS ON: pendingMountData
       if (this.pendingMountData) {
-        if (localStorageData) {
+        if (localStorageData && this.isPageBuilderMissingOnStart) {
           this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
-          await this.#completeMountProcess(JSON.stringify(this.pendingMountData))
+          await this.#completeMountProcess(JSON.stringify(this.pendingMountData), true)
           this.pendingMountData = null
           return
         }
-        if (!localStorageData && passedComponentsArray) {
-          await this.#completeMountProcess(JSON.stringify(this.pendingMountData))
-          this.pendingMountData = null
+        if (!localStorageData && passedComponentsArray && this.isPageBuilderMissingOnStart) {
+          await this.#completeMountProcess(JSON.stringify(this.pendingMountData), true)
           return
         }
 
-        if (!passedComponentsArray && !localStorageData) {
-          await this.#completeMountProcess(JSON.stringify([]))
+        if (!passedComponentsArray && !localStorageData && this.isPageBuilderMissingOnStart) {
+          await this.#completeMountProcess(JSON.stringify(this.pendingMountData), true)
           return
         }
       }
@@ -385,8 +383,8 @@ export class PageBuilderService {
     //
   }
 
-  async #completeMountProcess(html: string) {
-    await this.#mountComponentsToDOM(html)
+  async #completeMountProcess(html: string, usePassedPageSettings?: boolean) {
+    await this.#mountComponentsToDOM(html, usePassedPageSettings)
     // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
     await nextTick()
     // Attach event listeners to all editable elements in the Builder
@@ -449,6 +447,25 @@ export class PageBuilderService {
     return currentCSS
   }
 
+  async clearClassesFromPage() {
+    const pagebuilder = document.querySelector('#pagebuilder')
+    if (!pagebuilder) return
+
+    pagebuilder.removeAttribute('class')
+
+    this.initializeElementStyles()
+    await nextTick()
+  }
+  async clearInlineStylesFromPagee() {
+    const pagebuilder = document.querySelector('#pagebuilder')
+    if (!pagebuilder) return
+
+    pagebuilder.removeAttribute('style')
+
+    this.initializeElementStyles()
+    await nextTick()
+  }
+
   async globalPageStyles() {
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
@@ -1504,7 +1521,7 @@ export class PageBuilderService {
 
     const pageSettings = {
       classes: pagebuilder.className || '',
-      style: pagebuilder.getAttribute('style') || '',
+      style: pagebuilder.getAttribute('style') || (pagebuilder as HTMLElement).style.cssText || '',
     }
 
     const dataToSave = {
@@ -1590,24 +1607,14 @@ export class PageBuilderService {
   //
   async resumeEditingFromDraft() {
     this.#updateLocalStorageItemName()
-    const config = this.pageBuilderStateStore.getPageBuilderConfig
-    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
-
-    //
-    //
-    //
-
-    const key = this.getLocalStorageItemName.value
 
-    if (typeof key === 'string') {
-      const updateDraftFromLocalStorage = localStorage.getItem(key)
+    const localStorageData = this.loadStoredComponentsFromStorage()
 
-      if (typeof updateDraftFromLocalStorage === 'string') {
-        this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
-        await delay(400)
-        await this.#mountComponentsToDOM(updateDraftFromLocalStorage)
-        this.pageBuilderStateStore.setIsLoadingResumeEditing(false)
-      }
+    if (localStorageData) {
+      this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
+      await delay(400)
+      await this.#mountComponentsToDOM(localStorageData)
+      this.pageBuilderStateStore.setIsLoadingResumeEditing(false)
     }
 
     // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
@@ -1620,26 +1627,22 @@ export class PageBuilderService {
 
   async restoreOriginalContent() {
     this.#updateLocalStorageItemName()
-    const config = this.pageBuilderStateStore.getPageBuilderConfig
-    const formType = config && config.updateOrCreate && config.updateOrCreate.formType
 
-    if (formType === 'update') {
-      this.pageBuilderStateStore.setIsRestoring(true)
-      await delay(400)
+    this.pageBuilderStateStore.setIsRestoring(true)
+    await delay(400)
 
-      // Restore the original content if available
-      if (Array.isArray(this.originalComponents)) {
-        await this.#mountComponentsToDOM(JSON.stringify(this.originalComponents))
-        this.removeCurrentComponentsFromLocalStorage()
-      }
+    // Restore the original content if available
+    if (Array.isArray(this.originalComponents)) {
+      await this.#mountComponentsToDOM(JSON.stringify(this.originalComponents), true)
+      this.removeCurrentComponentsFromLocalStorage()
+    }
 
-      // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
-      await nextTick()
-      // Attach event listeners to all editable elements in the Builder
-      await this.#addListenersToEditableElements()
+    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+    await nextTick()
+    // Attach event listeners to all editable elements in the Builder
+    await this.#addListenersToEditableElements()
 
-      this.pageBuilderStateStore.setIsRestoring(false)
-    }
+    this.pageBuilderStateStore.setIsRestoring(false)
   }
 
   getStorageItemNameForResource(): string | null {
@@ -1652,7 +1655,6 @@ export class PageBuilderService {
 
     if (
       this.getLocalStorageItemName.value &&
-      typeof this.getLocalStorageItemName.value === 'string' &&
       localStorage.getItem(this.getLocalStorageItemName.value)
     ) {
       const savedCurrentDesign = localStorage.getItem(this.getLocalStorageItemName.value)
@@ -1970,40 +1972,47 @@ export class PageBuilderService {
    * @param data - JSON string (e.g., '[{"html_code":"...","id":"123","title":"..."}]')
    *               OR HTML string (e.g., '<section data-componentid="123">...</section>')
    */
-  async #mountComponentsToDOM(htmlString: string): Promise<void> {
+  async #mountComponentsToDOM(htmlString: string, usePassedPageSettings?: boolean): Promise<void> {
     // Auto-detect if input is JSON or HTML
     const trimmedData = htmlString.trim()
 
     if (trimmedData.startsWith('[') || trimmedData.startsWith('{')) {
       // Looks like JSON - parse as JSON
-      await this.#parseJSONComponents(trimmedData)
+      await this.#parseJSONComponents(trimmedData, usePassedPageSettings)
       return
     }
     if (trimmedData.startsWith('<')) {
       // Looks like HTML - parse as HTML
-      await this.#parseHTMLComponents(trimmedData)
+      await this.#parseHTMLComponents(trimmedData, usePassedPageSettings)
       return
     }
 
-    await this.#parseJSONComponents(trimmedData)
+    await this.#parseJSONComponents(trimmedData, usePassedPageSettings)
   }
 
   // Private method to parse JSON components and save pageBuilderContentSavedAt to localStorage
-  // Private method to parse JSON components and save pageBuilderContentSavedAt to localStorage
-  async #parseJSONComponents(jsonData: string): Promise<void> {
+  async #parseJSONComponents(jsonData: string, usePassedPageSettings?: boolean): Promise<void> {
+    const storedPageSettings =
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.pageSettings
+
     try {
       const parsedData = JSON.parse(jsonData)
       let componentsArray: ComponentObject[] = []
 
-      // Fallback to store-based config if not provided in imported JSON
-      const pageSettings =
-        this.pageBuilderStateStore.getPageBuilderConfig &&
-        this.pageBuilderStateStore.getPageBuilderConfig.pageSettings
+      // Decide which pageSettings to use
+      const pageSettings = usePassedPageSettings
+        ? storedPageSettings
+        : parsedData && parsedData.pageSettings
+          ? parsedData.pageSettings
+          : null
 
       // Restore page-level settings like class and style
       if (pageSettings) {
         const pagebuilder = document.querySelector('#pagebuilder') as HTMLElement
         if (pagebuilder) {
+          pagebuilder.removeAttribute('class')
+          pagebuilder.removeAttribute('style')
           pagebuilder.className = pageSettings.classes || ''
           pagebuilder.setAttribute('style', this.#convertStyleObjectToString(pageSettings.style))
         }
@@ -2063,7 +2072,7 @@ export class PageBuilderService {
     }
   }
   // Private method to parse HTML components
-  async #parseHTMLComponents(htmlData: string): Promise<void> {
+  async #parseHTMLComponents(htmlData: string, usePassedPageSettings?: boolean): Promise<void> {
     try {
       const parser = new DOMParser()
       const doc = parser.parseFromString(htmlData, 'text/html')
@@ -2072,24 +2081,32 @@ export class PageBuilderService {
       const livePageBuilder = document.querySelector('#pagebuilder') as HTMLElement | null
 
       if (livePageBuilder) {
-        if (importedPageBuilder) {
-          livePageBuilder.className = importedPageBuilder.className || ''
-          const style = importedPageBuilder.getAttribute('style')
-          if (style !== null) {
-            livePageBuilder.setAttribute('style', style)
-          } else {
-            livePageBuilder.removeAttribute('style')
+        const storedPageSettings =
+          this.pageBuilderStateStore.getPageBuilderConfig &&
+          this.pageBuilderStateStore.getPageBuilderConfig.pageSettings
+
+        // Decide which pageSettings to use
+        let pageSettings = null
+        if (usePassedPageSettings) {
+          pageSettings = storedPageSettings
+        } else if (importedPageBuilder) {
+          pageSettings = {
+            classes: importedPageBuilder.className || '',
+            style: importedPageBuilder.getAttribute('style') || '',
           }
         } else {
-          // Fallback: inject settings from store if not present in HTML
-          const fallbackSettings = this.pageBuilderStateStore.getPageBuilderConfig?.pageSettings
-          if (fallbackSettings) {
-            livePageBuilder.className = fallbackSettings.classes || ''
-            livePageBuilder.setAttribute(
-              'style',
-              this.#convertStyleObjectToString(fallbackSettings.style),
-            )
-          }
+          pageSettings = storedPageSettings
+        }
+
+        // Restore page-level settings like class and style
+        if (pageSettings) {
+          livePageBuilder.removeAttribute('class')
+          livePageBuilder.removeAttribute('style')
+          livePageBuilder.className = pageSettings.classes || ''
+          livePageBuilder.setAttribute(
+            'style',
+            this.#convertStyleObjectToString(pageSettings.style),
+          )
         }
       }
 
@@ -2178,6 +2195,7 @@ export class PageBuilderService {
     // handle font weight
     this.handleFontWeight(undefined)
     // handle font family
+
     this.handleFontFamily(undefined)
     // handle font style
     this.handleFontStyle(undefined)

package/src/css/app.css

@@ -426,8 +426,8 @@
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0) scale(1);
-  min-width: 12rem;
-  width: 16rem;
+  min-width: 20rem;
+  width: 20rem;
   height: 2.5rem;
   border-radius: 9999px;
 }
@@ -552,8 +552,6 @@
 }
 
 #pagebuilder[data-global-selected] {
-  outline: 3px dashed #b91010 !important;
+  outline: 4px dashed #b91010 !important;
   outline-offset: -2px !important;
-  box-shadow: 0 0 0 2px #fbbf24;
-  /* Or any style you want */
 }