@myissue/vue-website-page-builder 3.3.49 → 3.3.53

package/package.json

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

package/src/Components/Loaders/GlobalLoader.vue

@@ -3,9 +3,16 @@
     class="pbx-bg-white pbx-flex pbx-justify-center pbx-items-center min-pbx-h-screen pbx-h-screen pbx-w-screen pbx-fixed pbx-inset-0 pbx-z-[10000]"
   >
     <div class="pbx-absolute pbx-top-1/3">
-      <div
-        class="pbx-inline-block pbx-h-10 pbx-w-10 pbx-animate-spin pbx-rounded-full pbx-border-solid pbx-border pbx-border-current pbx-border-r-transparent"
-      ></div>
+      <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4">
+        <div
+          class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+        >
+          <span
+            class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
+            >Loading...</span
+          >
+        </div>
+      </div>
     </div>
   </div>
 </template>

package/src/Components/Modals/DynamicModalBuilder.vue

@@ -157,7 +157,7 @@ const thirdButtonBuilder = function () {
       <template v-if="isLoading">
         <div class="pbx-flex pbx-items-center pbx-my-2 pbx-py-4 pbx-px-2 pbx-justify-end">
           <div
-            class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+            class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
           >
             <span
               class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"

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

@@ -64,7 +64,7 @@ const loadingImage = async function (imageURL) {
     <div v-show="getIsLoadingImage">
       <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4 pbx-min-h-80">
         <div
-          class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+          class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
         >
           <span
             class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"

package/src/DemoComponents/DemoUnsplash.vue

@@ -274,7 +274,7 @@ onMounted(async () => {
             <div v-if="getIsLoading">
               <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4">
                 <div
-                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
                 >
                   <span
                     class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
@@ -332,7 +332,7 @@ onMounted(async () => {
             <template v-if="getIsLoadingImage">
               <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4">
                 <div
-                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
                 >
                   <span
                     class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"

package/src/DemoComponents/HomeSection.vue

@@ -74,7 +74,7 @@ const configPageBuilder = {
   userSettings: {
     theme: 'light',
     language: 'en',
-    autoSave: true,
+    autoSave: false,
   },
   settings: {
     brandColor: '#DB93B0',

package/src/PageBuilder/PageBuilder.vue

@@ -371,7 +371,7 @@ onMounted(async () => {
   <div
     class="pbx-font-sans pbx-max-w-full pbx-border-solid pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
   >
-    <GlobalLoader v-if="getIsLoadingGlobal & !openAppNotStartedModal"></GlobalLoader>
+    <GlobalLoader v-if="getIsLoadingGlobal && !openAppNotStartedModal"></GlobalLoader>
     <ModalBuilder
       title="The builder hasn’t started yet"
       :showModalBuilder="openAppNotStartedModal"

package/src/composables/PageBuilderService.ts

@@ -39,7 +39,6 @@ export class PageBuilderService {
   private getRestoredElement: ComputedRef<string | null>
   private getComponentArrayAddMethod: ComputedRef<string | null>
   private NoneListernesTags: string[]
-  private delay: (ms?: number) => Promise<void>
   private hasStartedEditing: boolean = false
   // Hold data from Database or Backend for updated post
   private originalComponents: BuilderResourceData | undefined = undefined
@@ -91,8 +90,6 @@ export class PageBuilderService {
       'BLOCKQUOTE',
       'BR',
     ]
-
-    this.delay = delay
   }
 
   // Deselect any selected or hovered elements in the builder UI
@@ -270,59 +267,48 @@ export class PageBuilderService {
   }
 
   async tryMountPendingComponents() {
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
+    await delay(400)
+
     // 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
 
     //
-    if (!config) return
-    //
-    if (
-      config &&
-      formType === 'update' &&
-      localStorageData &&
-      typeof localStorageData === 'string' &&
-      this.pendingMountData
-    ) {
-      this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
-    }
+    if (config) {
+      if (formType === 'update') {
+        //
+        if (localStorageData && typeof localStorageData === 'string') {
+          this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
+        }
 
-    if (config && formType === 'update') {
-      if (this.pendingMountData) {
-        this.#completeBuilderInitialization(this.pendingMountData)
-        return
-      }
+        if (this.pendingMountData) {
+          this.#completeBuilderInitialization(this.pendingMountData)
+        }
 
-      // Pending data for mount is null at this stage
-      if (typeof localStorageData === 'string') {
-        await this.#updateComponentsFromString(localStorageData)
-        this.#completeBuilderInitialization()
-        return
+        // Pending data for mount is null at this stage
+        if (typeof localStorageData === 'string' && !this.pendingMountData) {
+          await this.#updateComponentsFromString(localStorageData)
+          this.#completeBuilderInitialization()
+        }
       }
 
-      // 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.setIsLoadingGlobal(false)
-    }
-
-    if (config && formType === 'create') {
-      // Pending data for mount is null at this stage
-      if (typeof localStorageData === 'string') {
-        await this.#updateComponentsFromString(localStorageData)
-        this.#completeBuilderInitialization()
-        return
+      if (formType === 'create') {
+        // Pending data for mount is null at this stage
+        if (typeof localStorageData === 'string') {
+          await this.#updateComponentsFromString(localStorageData)
+          this.#completeBuilderInitialization()
+        }
       }
 
+      //
+      //
+      //
+      //
+      //
       // 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
@@ -392,7 +378,6 @@ export class PageBuilderService {
       return result
     } catch (err) {
       console.error('Not able to start the Page Builder', err)
-      this.pageBuilderStateStore.setIsLoadingGlobal(false)
       return {
         error: true as const,
         reason: 'Failed to start the Page Builder due to an unexpected error.',
@@ -401,11 +386,8 @@ export class PageBuilderService {
   }
 
   async #completeBuilderInitialization(passedComponentsArray?: BuilderResourceData): Promise<void> {
-    this.pageBuilderStateStore.setIsLoadingGlobal(true)
     const localStorageData = this.loadStoredComponentsFromStorage()
 
-    await this.delay(300)
-
     // Deselect any selected or hovered elements in the builder UI
     await this.clearHtmlSelection()
 
@@ -439,7 +421,6 @@ export class PageBuilderService {
     // Attach event listeners to all editable elements in the Builder
     await this.#addListenersToEditableElements()
     // Show a global loading indicator while initializing
-    this.pageBuilderStateStore.setIsLoadingGlobal(false)
 
     // Clean up any old localStorage items related to previous builder sessions
     this.deleteOldPageBuilderLocalStorage()
@@ -730,7 +711,7 @@ export class PageBuilderService {
           // Deselect any selected or hovered elements in the builder UI
           //
           this.#saveDomComponentsToLocalStorage()
-          await this.delay(300)
+          await delay(400)
         } catch (err) {
           console.error('Error trying auto save.', err)
         } finally {
@@ -742,7 +723,7 @@ export class PageBuilderService {
       try {
         this.pageBuilderStateStore.setIsSaving(true)
         this.#saveDomComponentsToLocalStorage()
-        await this.delay(300)
+        await delay(400)
       } catch (err) {
         console.error('Error trying saving.', err)
       } finally {
@@ -768,7 +749,7 @@ export class PageBuilderService {
       ) {
         this.pageBuilderStateStore.setIsSaving(true)
         this.#saveDomComponentsToLocalStorage()
-        await this.delay(300)
+        await delay(400)
 
         this.pageBuilderStateStore.setIsSaving(false)
       }
@@ -776,7 +757,7 @@ export class PageBuilderService {
     if (passedConfig && !passedConfig.userSettings) {
       this.pageBuilderStateStore.setIsSaving(true)
       this.#saveDomComponentsToLocalStorage()
-      await this.delay(300)
+      await delay(400)
 
       this.pageBuilderStateStore.setIsSaving(false)
     }
@@ -1650,7 +1631,7 @@ export class PageBuilderService {
 
       if (typeof updateDraftFromLocalStorage === 'string') {
         this.pageBuilderStateStore.setIsLoadingResumeEditing(true)
-        await delay(300)
+        await delay(400)
         await this.#updateComponentsFromString(updateDraftFromLocalStorage)
         this.pageBuilderStateStore.setIsLoadingResumeEditing(false)
       }
@@ -1671,7 +1652,7 @@ export class PageBuilderService {
 
     if (formType === 'update') {
       this.pageBuilderStateStore.setIsRestoring(true)
-      await this.delay(300)
+      await delay(400)
 
       // Restore the original content if available
       if (Array.isArray(this.originalComponents)) {