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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.3.14",
+  "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/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

@@ -278,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>
@@ -643,47 +643,12 @@ onMounted(async () => {
                 </div>
               </div>
               <!-- Added Components to DOM # end -->
-
-              <!-- Add Component # start -->
-
-              <div
-                @click="
-                  async () => {
-                    await 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"
@@ -697,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 {
@@ -404,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)
@@ -452,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()
@@ -719,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',
+        })
       }
     }
 

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';