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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.49",
+  "version": "3.3.51",
   "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
@@ -276,7 +273,7 @@ export class PageBuilderService {
     const localStorageData = this.loadStoredComponentsFromStorage()
 
     this.pageBuilderStateStore.setIsLoadingGlobal(true)
-    await delay(200)
+    await delay(300)
     const config = this.pageBuilderStateStore.getPageBuilderConfig
     const formType = config && config.updateOrCreate && config.updateOrCreate.formType
 
@@ -404,7 +401,7 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setIsLoadingGlobal(true)
     const localStorageData = this.loadStoredComponentsFromStorage()
 
-    await this.delay(300)
+    await delay(300)
 
     // Deselect any selected or hovered elements in the builder UI
     await this.clearHtmlSelection()
@@ -730,7 +727,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 +739,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 +765,7 @@ export class PageBuilderService {
       ) {
         this.pageBuilderStateStore.setIsSaving(true)
         this.#saveDomComponentsToLocalStorage()
-        await this.delay(300)
+        await delay(400)
 
         this.pageBuilderStateStore.setIsSaving(false)
       }
@@ -776,7 +773,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 +1647,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 +1668,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)) {