@myissue/vue-website-page-builder 3.3.13 → 3.3.15

package/package.json

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

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -164,8 +164,8 @@ const openHTMLSettings = function () {
             <!-- Main Settings Start -->
             <button
               @click="
-                () => {
-                  pageBuilderService.clearHtmlSelection()
+                async () => {
+                  await pageBuilderService.clearHtmlSelection()
                   openMainSettings()
                 }
               "

package/src/DemoComponents/HomeSection.vue

@@ -83,7 +83,7 @@ const configPageBuilder = {
 
 onMounted(async () => {
   const result = await pageBuilderService.startBuilder(configPageBuilder, html)
-  //
+  console.log('Page Builder Result:', result)
   //
   //
   //

package/src/PageBuilder/PageBuilder.vue

@@ -149,7 +149,6 @@ watch(getElementAttributes, async (newAttributes, oldAttributes) => {
     newAttributes?.dataImage !== oldAttributes?.dataImage
   ) {
     debounce(async () => {
-      await pageBuilderService.handleAutoSave()
       await pageBuilderService.initializeElementStyles()
     }, 200)
   }
@@ -237,7 +236,7 @@ const handleRestoreOriginalContent = async function () {
 
   titleModalRestore.value = 'Do you want to reset this page?'
   descriptionModalRestore.value =
-    'Are you sure you want to reset this page? This will overwrite your current page work.'
+    'Are you sure you want to reset this page? This will overwrite your current changes.'
   firstButtonRestore.value = 'Close'
   secondButtonRestore.value = null
   thirdButtonRestore.value = 'Reset changes'
@@ -279,7 +278,7 @@ onMounted(async () => {
 
 <template>
   <div
-    class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-scroll"
+    class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto"
   >
     <div id="pagebuilder-top-area" class="lg:pbx-px-4 pbx-pt-2 pbx-pb-4 pbx-mx-4 pbx-mb-4 pbx-mt-2">
       <GlobalLoader v-if="getIsLoadingGlobal & !openAppNotStartedModal"></GlobalLoader>
@@ -296,11 +295,21 @@ onMounted(async () => {
         the builder by running the startBuilder method for this resource.
       </ModalBuilder>
       <div
-        @click.self="pageBuilderService.clearHtmlSelection()"
+        @click.self="
+          async () => {
+            await pageBuilderService.clearHtmlSelection()
+          }
+        "
         class="pbx-min-h-24 pbx-flex pbx-justify-between pbx-items-center pbx-pb-2 pbx-border-b pbx-border-gray-200"
       >
         <!-- Logo # start -->
-        <div @click="pageBuilderService.clearHtmlSelection()">
+        <div
+          @click="
+            async () => {
+              await pageBuilderService.clearHtmlSelection()
+            }
+          "
+        >
           <div
             v-if="
               getPageBuilderConfig &&
@@ -386,7 +395,11 @@ onMounted(async () => {
     <div>
       <div class="pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2">
         <div
-          @click.self="pageBuilderService.clearHtmlSelection()"
+          @click.self="
+            async () => {
+              await pageBuilderService.clearHtmlSelection()
+            }
+          "
           id="pagebuilder-left-area"
           class="pbx-min-w-[3.5rem] pbx-pt-7 pbx-pb-2 pbx-ml-2 pbx-bg-myPrimaryLightGrayColor pbx-rounded-full pbx-shadow-sm"
         >
@@ -405,7 +418,13 @@ onMounted(async () => {
                 <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
               </button>
             </div>
-            <div @click.self="pageBuilderService.clearHtmlSelection()">
+            <div
+              @click.self="
+                async () => {
+                  await pageBuilderService.clearHtmlSelection()
+                }
+              "
+            >
               <ComponentTopMenu v-if="getElement"></ComponentTopMenu>
             </div>
           </div>
@@ -419,7 +438,11 @@ onMounted(async () => {
             class="pbx-flex pbx-items-center pbx-justify-between pbx-rounded-t-2xl pbx-min-w-[30rem] pbx-bg-myPrimaryLightGrayColor pbx-border-b pbx-border-gray-200"
           >
             <div
-              @click.self="pageBuilderService.clearHtmlSelection()"
+              @click.self="
+                async () => {
+                  await pageBuilderService.clearHtmlSelection()
+                }
+              "
               class="pbx-min-w-max pbx-pr-2 pbx-flex pbx-myPrimaryGap pbx-items-center pbx-pt-2 pbx-pb-2 pbx-pl-2 pbx-h-24 pbx-w-full"
             >
               <!-- Save Start -->
@@ -504,11 +527,19 @@ onMounted(async () => {
             </div>
 
             <div
-              @click.self="pageBuilderService.clearHtmlSelection()"
+              @click.self="
+                async () => {
+                  await pageBuilderService.clearHtmlSelection()
+                }
+              "
               class="pbx-flex pbx-justify-end pbx-py-2 pbx-pr-2 pbx-h-24 pbx-w-full"
             >
               <div
-                @click.self="pageBuilderService.clearHtmlSelection()"
+                @click.self="
+                  async () => {
+                    await pageBuilderService.clearHtmlSelection()
+                  }
+                "
                 class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
               >
                 <button
@@ -535,10 +566,10 @@ onMounted(async () => {
                   <button
                     type="button"
                     @click="
-                      () => {
+                      async () => {
                         pageBuilderStateStore.setMenuRight(false)
                         pageBuilderStateStore.setElement(null)
-                        pageBuilderService.clearHtmlSelection()
+                        await pageBuilderService.clearHtmlSelection()
                         handlePageBuilderPreview()
                       }
                     "
@@ -558,11 +589,19 @@ onMounted(async () => {
             </div>
 
             <div
-              @click.self="pageBuilderService.clearHtmlSelection()"
+              @click.self="
+                async () => {
+                  await pageBuilderService.clearHtmlSelection()
+                }
+              "
               class="pbx-flex pbx-justify-end pbx-py-2 pbx-pr-2 pbx-w-full pbx-h-24"
             >
               <div
-                @click.self="pageBuilderService.clearHtmlSelection()"
+                @click.self="
+                  async () => {
+                    await pageBuilderService.clearHtmlSelection()
+                  }
+                "
                 class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
               >
                 <button
@@ -604,43 +643,12 @@ onMounted(async () => {
                 </div>
               </div>
               <!-- Added Components to DOM # end -->
-
-              <!-- Add Component # start -->
-
-              <div
-                @click="pageBuilderService.clearHtmlSelection()"
-                id="pagebuilder-bottom-components-area"
-                class="pbx-pt-8 pbx-pb-12 pbx-text-center focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-indigo-500 focus:pbx-ring-offset-2 pbx-my-2 pbx-mx-4"
-                :class="{ 'pbx-border-t pbx-border-gray-200': getComponents.length > 0 }"
-              >
-                <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-font-medium">
-                  <span class="lg:pbx-block pbx-hidden">
-                    <div>Add new components to the bottom of the page</div>
-                  </span>
-                </div>
-
-                <div class="pbx-mt-6 pbx-flex pbx-items-center pbx-gap-2 pbx-justify-center">
-                  <button
-                    @click="
-                      () => {
-                        pageBuilderStateStore.setComponentArrayAddMethod('unshift')
-                        handleAddComponent()
-                      }
-                    "
-                    type="button"
-                    class="pbx-myPrimaryButton pbx-flex pbx-items-center pbx-gap-2 pbx-justify-center"
-                  >
-                    <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
-                    <span class="pbx-font-medium"> Add new Components </span>
-                  </button>
-                </div>
-              </div>
-              <!-- Add Component # end -->
             </div>
           </div>
-          <!-- Add Component # end -->
         </main>
 
+        <!-- Add Component # end -->
+
         <aside
           aria-label="Menu"
           id="pagebuilder-right-area"
@@ -654,6 +662,31 @@ onMounted(async () => {
           </RightSidebarEditor>
         </aside>
       </div>
+      <div
+        class="pbx-flex pbx-items-center pbx-justify-center pbx-border-t pbx-border-gray-200 pbx-cursor-pointer pbx-py-4"
+      >
+        <div
+          @click="
+            () => {
+              pageBuilderStateStore.setComponentArrayAddMethod('push')
+              handleAddComponent()
+            }
+          "
+          class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2"
+        >
+          <span class="lg:pbx-block pbx-hidden">
+            <div class="pbx-whitespace-nowrap">Add to the bottom</div>
+          </span>
+          <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
+            <button
+              type="button"
+              class="pbx-h-10 pbx-w-10 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-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0"
+            >
+              <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

package/src/composables/PageBuilderService.ts

@@ -181,10 +181,6 @@ export class PageBuilderService {
       this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
       this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType
 
-    if (Array.isArray(components) && components.length === 0) {
-      return { error: false as const, message: 'No components provided (empty array).' }
-    }
-
     if (
       Array.isArray(components) &&
       components.length >= 1 &&
@@ -198,14 +194,6 @@ export class PageBuilderService {
         status: 'validation_failed',
       }
     }
-    if (formType === 'create' && components) {
-      return {
-        error: true as const,
-        warning:
-          'You cannot set formType to create in your configuration while also passing a components data array to the Page Builder. Please set formType to update.',
-        status: 'validation_failed',
-      }
-    }
 
     // Must be an array
     if (!Array.isArray(components)) {
@@ -218,20 +206,7 @@ export class PageBuilderService {
     // Check that the first item looks like a component
     const first = components[0]
 
-    // Check that the first item is not an empty object
-    if (isEmptyObject(first)) {
-      console.error(
-        'The first object in the array is empty. Each component must be a non-empty object and include an html_code key.',
-      )
-      return {
-        error: true as const,
-        reason:
-          "The first object in the array is empty. Each component must be a non-empty object and include an 'html_code' key.",
-      }
-    }
-
     if (first && 'html_code' in first && typeof first.html_code !== 'string') {
-      console.error("The 'html_code' property in the first object must be a string.")
       return {
         error: true as const,
         reason: "The 'html_code' property in the first object must be a string.",
@@ -239,16 +214,17 @@ export class PageBuilderService {
     }
 
     // Check that the first item has an 'html_code' key
-    if (!first || !('html_code' in first)) {
-      console.error("The first object in the array must include an 'html_code' key.")
-      return {
-        error: true as const,
-        reason: "The first object in the array must include an 'html_code' key.",
+    if (Array.isArray(components) && components.length >= 1) {
+      if (!first || !('html_code' in first)) {
+        return {
+          error: true as const,
+          reason: "The first object in the array must include an 'html_code' key.",
+        }
       }
     }
 
     // No errors found
-    return { error: false as const }
+    return
   }
 
   #validateConfig(config: PageBuilderConfig): void {
@@ -291,11 +267,16 @@ export class PageBuilderService {
   }
 
   async tryMountPendingComponents() {
+    // Always clear DOM and store before mounting new resource
+    this.deleteAllComponentsFromDOM()
+
+    const localStorageData = this.loadStoredComponentsFromStorage()
+
     this.pageBuilderStateStore.setIsLoadingGlobal(true)
     await delay(200)
     const config = this.pageBuilderStateStore.getPageBuilderConfig
     const formType = config && config.updateOrCreate && config.updateOrCreate.formType
-    const localStorageData = this.loadStoredComponentsFromStorage()
+
     //
     if (!config) return
     //
@@ -399,11 +380,24 @@ export class PageBuilderService {
         this.#completeBuilderInitialization(passedComponentsArray)
       }
 
-      // Return both the success message and validation info if present
-      return {
+      // result to end user
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const result: any = {
         message: 'Page builder started successfully.',
-        ...(validation || {}),
       }
+
+      if (validation) {
+        result.validation = validation
+      }
+
+      // passedComponentsArray
+      if (Array.isArray(passedComponentsArray) && passedComponentsArray.length >= 0) {
+        result.passedComponentsArray = passedComponentsArray
+      }
+
+      // Return messages, validation info if present etc.
+      return result
     } catch (err) {
       console.error('Not able to start the Page Builder', err)
       this.pageBuilderStateStore.setIsLoadingGlobal(false)
@@ -447,18 +441,6 @@ export class PageBuilderService {
       }
     }
     //
-    //
-    //
-    //
-    //
-    //
-    //
-    //
-    //
-    //
-    //
-    //
-    //
 
     // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
     await nextTick()
@@ -549,6 +531,8 @@ export class PageBuilderService {
     e.preventDefault()
     e.stopPropagation()
 
+    await this.handleAutoSave()
+
     const pagebuilder = document.querySelector('#pagebuilder')
 
     if (!pagebuilder) return
@@ -712,25 +696,20 @@ export class PageBuilderService {
     const pageBuilder = document.querySelector('#contains-pagebuilder')
     //  scoll to top or bottom # end
     if (pageBuilder) {
-      if (
-        this.getComponentArrayAddMethod.value === 'unshift' ||
-        this.getComponentArrayAddMethod.value === 'push'
-      ) {
-        // push to top
-        if (this.getComponentArrayAddMethod.value === 'unshift') {
-          pageBuilder.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-          })
-        }
+      // push to top
+      if (this.getComponentArrayAddMethod.value === 'unshift') {
+        pageBuilder.scrollTo({
+          top: 0,
+          behavior: 'smooth',
+        })
+      }
 
-        // push to bottom
-        if (this.getComponentArrayAddMethod.value === 'push') {
-          pageBuilder.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-          })
-        }
+      // push to bottom
+      if (this.getComponentArrayAddMethod.value === 'push') {
+        pageBuilder.scrollTo({
+          top: pageBuilder.scrollHeight + 400,
+          behavior: 'smooth',
+        })
       }
     }
 
@@ -1478,6 +1457,7 @@ export class PageBuilderService {
    * Saves the current DOM state (components) to localStorage.
    */
   #saveDomComponentsToLocalStorage() {
+    this.#updateLocalStorageItemName()
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -1512,6 +1492,7 @@ export class PageBuilderService {
   }
 
   async removeCurrentComponentsFromLocalStorage() {
+    this.#updateLocalStorageItemName()
     await nextTick()
 
     const key = this.getLocalStorageItemName.value
@@ -1580,6 +1561,7 @@ export class PageBuilderService {
 
   //
   async resumeEditingForUpdate() {
+    this.#updateLocalStorageItemName()
     const config = this.pageBuilderStateStore.getPageBuilderConfig
     const formType = config && config.updateOrCreate && config.updateOrCreate.formType
 
@@ -1595,7 +1577,6 @@ export class PageBuilderService {
 
       if (typeof updateDraftFromLocalStorage === 'string') {
         this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
-        localStorage.removeItem(key)
         await delay(300)
         await this.#updateComponentsFromString(updateDraftFromLocalStorage)
         this.pageBuilderStateStore.setIsLoadingResumeEditing(false)
@@ -1611,6 +1592,7 @@ export class PageBuilderService {
   }
 
   async restoreOriginalContent() {
+    this.#updateLocalStorageItemName()
     const config = this.pageBuilderStateStore.getPageBuilderConfig
     const formType = config && config.updateOrCreate && config.updateOrCreate.formType
 
@@ -1638,6 +1620,7 @@ export class PageBuilderService {
   }
 
   loadStoredComponentsFromStorage() {
+    this.#updateLocalStorageItemName()
     if (!this.getLocalStorageItemName.value) return false
 
     if (

package/src/css/app.css

@@ -372,3 +372,16 @@ h2 {
 h3 {
   @apply pbx-text-2xl pbx-mt-4 pbx-mb-3 pbx-font-medium;
 }
+
+/* CSS for content inside page builder # start */
+#page-builder-editor .tiptap {
+  outline: none !important;
+  box-shadow: none !important;
+  background: #fff;
+  min-height: 25rem;
+  border: 1px solid #aaa;
+  border-radius: 10px;
+  padding: 6px;
+  margin-bottom: 20px;
+  padding-bottom: 100px;
+}

package/src/css/dev-global.css

@@ -12,18 +12,6 @@ These styles affect all HTML elements (like input, button, h1, etc.) in the cons
 #pagebuilder a {
   pointer-events: none;
 }
-/* CSS for content inside page builder # start */
-#page-builder-editor .tiptap {
-  outline: none !important;
-  box-shadow: none !important;
-  background: #fff;
-  min-height: 25rem;
-  border: 1px solid #aaa;
-  border-radius: 10px;
-  padding: 6px;
-  margin-bottom: 20px;
-  padding-bottom: 100px;
-}
 
 #pagebuilder #youtube-video::before {
   content: 'Select Video Element';