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

package/package.json

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

package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue

@@ -594,9 +594,9 @@ const handleDownloadHTML = function () {
       <div class="pbx-flex pbx-items-left pbx-flex-col pbx-gap-1">
         <h3 class="pbx-myQuaternaryHeader">Complete Configuration Overview</h3>
         <p class="pbx-myPrimaryParagraph pbx-text-xs">
-          omplete configuration object currently used by the Page Builder. It includes information
-          about the user, form behavior, branding settings, and other context-specific data needed
-          for rendering and managing the builder environment.
+          Complete configuration object currently used by the Page Builder. Includes user
+          information, branding settings, and other context-specific data needed for rendering and
+          managing the builder environment.
         </p>
       </div>
 

package/src/PageBuilder/PageBuilder.vue

@@ -663,7 +663,7 @@ onMounted(async () => {
         </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"
+        class="pbx-flex pbx-items-center pbx-justify-center pbx-border-t pbx-border-gray-200 pbx-py-4"
       >
         <div
           @click="
@@ -672,7 +672,7 @@ onMounted(async () => {
               handleAddComponent()
             }
           "
-          class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2"
+          class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-cursor-pointer"
         >
           <span class="lg:pbx-block pbx-hidden">
             <div class="pbx-whitespace-nowrap">Add to the bottom</div>

package/src/composables/PageBuilderService.ts

@@ -703,14 +703,6 @@ export class PageBuilderService {
           behavior: 'smooth',
         })
       }
-
-      // push to bottom
-      if (this.getComponentArrayAddMethod.value === 'push') {
-        pageBuilder.scrollTo({
-          top: pageBuilder.scrollHeight + 400,
-          behavior: 'smooth',
-        })
-      }
     }
 
     // Create a DOMParser instance
@@ -1870,9 +1862,23 @@ export class PageBuilderService {
 
       this.pageBuilderStateStore.setPushComponents({
         component: clonedComponent,
-        componentArrayAddMethod: this.getComponentArrayAddMethod.value || 'push',
+        componentArrayAddMethod: this.getComponentArrayAddMethod.value
+          ? this.getComponentArrayAddMethod.value
+          : 'push',
       })
 
+      const pageBuilder = document.querySelector('#contains-pagebuilder')
+      //  scoll to top or bottom # end
+      if (pageBuilder) {
+        // push to bottom
+        if (this.getComponentArrayAddMethod.value === 'push') {
+          pageBuilder.scrollTo({
+            top: pageBuilder.scrollHeight + 50,
+            behavior: 'smooth',
+          })
+        }
+      }
+
       // 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