@myissue/vue-website-page-builder 3.2.77 → 3.2.78

package/package.json

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

package/src/Components/Modals/DynamicModalBuilder.vue

@@ -17,6 +17,11 @@ defineProps({
     default: false,
     required: false,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
   disabledWhichButton: {
     type: String,
     default: '',
@@ -97,7 +102,7 @@ const thirdButtonBuilder = function () {
       </div>
     </div>
 
-    <template v-if="simpleModal !== true">
+    <template v-if="simpleModal !== true && !isLoading">
       <div class="py-4 flex sm:justify-end justify-center border-t border-gray-200 mt-4">
         <slot name="footer" />
         <div
@@ -362,6 +367,18 @@ const thirdButtonBuilder = function () {
         </div>
       </div>
     </template>
+    <template v-if="isLoading">
+      <div class="flex items-center my-2 py-4 px-2 justify-end">
+        <div
+          class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+        >
+          <span
+            class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+            >Loading...</span
+          >
+        </div>
+      </div>
+    </template>
   </ModalBuilder>
 </template>
 

package/src/DemoComponents/HomeSection.vue

@@ -71,7 +71,7 @@ const configPageBuilder = {
     image: '/jane_doe.jpg',
   },
   updateOrCreate: {
-    formType: 'create' as 'create',
+    formType: 'update' as 'update',
     formName: 'news',
   },
   pageBuilderLogo: {

package/src/PageBuilder/PageBuilder.vue

@@ -12,12 +12,13 @@ import { updateOrCreateIsFalsy } from '../helpers/passedPageBuilderConfig'
 import ToolbarOption from '../Components/PageBuilder/ToolbarOption/ToolbarOption.vue'
 import { delay } from '../composables/delay'
 import { useDebounce } from '../composables/useDebounce.ts'
+import DynamicModalBuilder from '../Components/Modals/DynamicModalBuilder.vue'
 
 /**
  * Props for PageBuilder component
  * @typedef {Object} Props
  * @property {Object|null} CustomMediaLibraryComponent - Custom media component
- * @property {Object|null} CustomBuilderComponents - Custom search component
+ * @property {Object|null} CustomBuilderComponents - Custom component
  * @property {Object} configPageBuilder - Configuration object containing:
  */
 const props = defineProps({
@@ -192,6 +193,47 @@ watch(
   },
   { immediate: true },
 )
+const gridColumnModalResumeEditing = ref(Number(1))
+const typeModal = ref('')
+const showModalResumeEditing = ref(false)
+const titleModalResumeEditing = ref('')
+const descriptionModalResumeEditing = ref('')
+const firstButtonResumeEditing = ref('')
+const secondButtonResumeEditing = ref(null)
+const thirdButtonResumeEditing = ref(null)
+const firstModalButtonResumeEditingFunction = ref(null)
+const secondModalButtonResumeEditingFunction = ref(null)
+const thirdModalButtonResumeEditingFunction = ref(null)
+
+const isLoadingResumeEditing = ref(null)
+
+const handlerRumeEditingForUpdate = async function () {
+  await pageBuilderClass.clearHtmlSelection()
+
+  typeModal.value = 'default'
+  titleModalResumeEditing.value = 'Continue Your Work?'
+  descriptionModalResumeEditing.value =
+    'We noticed you have some changes that weren’t saved last time. Would you like to pick up where you left off, or use the version that’s currently saved?'
+  firstButtonResumeEditing.value = 'Use Saved Version'
+  secondButtonResumeEditing.value = null
+  thirdButtonResumeEditing.value = 'Continue Where I Left Off'
+  showModalResumeEditing.value = true
+
+  firstModalButtonResumeEditingFunction.value = function () {
+    showModalResumeEditing.value = false
+  }
+
+  secondModalButtonResumeEditingFunction.value = function () {}
+  thirdModalButtonResumeEditingFunction.value = async function () {
+    isLoadingResumeEditing.value = true
+    await delay(1000)
+    await pageBuilderClass.resumeEditingForUpdate()
+    isLoadingResumeEditing.value = false
+    showModalResumeEditing.value = false
+  }
+
+  // end modal
+}
 
 onMounted(async () => {
   const config = getConfigPageBuilder.value
@@ -204,6 +246,10 @@ onMounted(async () => {
   await pageBuilderClass.clearHtmlSelection()
 
   await pageBuilderClass.setEventListenersForElements()
+
+  if (await pageBuilderClass.hasLocalDraftForUpdate()) {
+    handlerRumeEditingForUpdate()
+  }
 })
 </script>
 
@@ -266,6 +312,24 @@ onMounted(async () => {
       <Preview></Preview>
     </ModalBuilder>
 
+    <DynamicModalBuilder
+      :showDynamicModalBuilder="showModalResumeEditing"
+      :isLoading="isLoadingResumeEditing"
+      :type="typeModal"
+      :gridColumnAmount="gridColumnModalResumeEditing"
+      :title="titleModalResumeEditing"
+      :description="descriptionModalResumeEditing"
+      :firstButtonText="firstButtonResumeEditing"
+      :secondButtonText="secondButtonResumeEditing"
+      :thirdButtonText="thirdButtonResumeEditing"
+      @firstModalButtonFunctionDynamicModalBuilder="firstModalButtonResumeEditingFunction"
+      @secondModalButtonFunctionDynamicModalBuilder="secondModalButtonResumeEditingFunction"
+      @thirdModalButtonFunctionDynamicModalBuilder="thirdModalButtonResumeEditingFunction"
+    >
+      <header></header>
+      <main></main>
+    </DynamicModalBuilder>
+
     <div>
       <div class="relative h-full flex pb-2 gap-2">
         <div
@@ -306,7 +370,7 @@ onMounted(async () => {
               class="flex myPrimaryGap items-center pt-4 pb-2 pl-2 h-24 w-full min-w-36"
             >
               <button
-                class="myPrimaryButton h-6 flex gap-2"
+                class="mySecondaryButton h-6 flex gap-2"
                 @click.stop="
                   async () => {
                     await pageBuilderClass.clearHtmlSelection()
@@ -335,6 +399,8 @@ onMounted(async () => {
                 </div>
                 <div>Save</div>
               </button>
+
+              <!-- Continue editing # end -->
             </div>
 
             <div

package/src/composables/PageBuilderClass.ts

@@ -50,6 +50,8 @@ class PageBuilderClass {
   constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
     this.nextTick = nextTick()
 
+    this.hasStartedEditing = false
+
     this.containsPagebuilder = document.querySelector('#contains-pagebuilder')
 
     this.pageBuilderStateStore = pageBuilderStateStore
@@ -275,6 +277,7 @@ class PageBuilderClass {
   }
 
   handleAutoSave = async () => {
+    this.startEditing()
     const passedConfig = this.pageBuilderStateStore.getConfigPageBuilder
 
     // Check if config is set
@@ -312,6 +315,7 @@ class PageBuilderClass {
   }
 
   handleManualSave = async () => {
+    this.startEditing()
     const passedConfig = this.pageBuilderStateStore.getConfigPageBuilder
 
     // Check if config is set
@@ -1215,6 +1219,66 @@ class PageBuilderClass {
     }
   }
 
+  async hasLocalDraftForUpdate(): boolean {
+    if (this.hasStartedEditing) return false
+
+    if (
+      this.pageBuilderStateStore.getConfigPageBuilder &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+    ) {
+      const key = this.getLocalStorageItemName.value
+      if (typeof key === 'string') {
+        const draft = localStorage.getItem(key)
+        if (draft) {
+          try {
+            await this.delay(1000)
+            const draftParsed = JSON.parse(draft)
+            const dbComponents = this.getComponents.value
+            return JSON.stringify(draftParsed.components) !== JSON.stringify(dbComponents)
+          } catch (e) {
+            return false
+          }
+        }
+      }
+    }
+    return false
+  }
+
+  // Call this when the user starts editing (e.g., on first change or when resuming a draft)
+  startEditing() {
+    this.hasStartedEditing = true
+  }
+
+  async resumeEditingForUpdate() {
+    if (
+      this.pageBuilderStateStore.getConfigPageBuilder &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+    ) {
+      const key = this.getLocalStorageItemName.value
+      if (typeof key === 'string') {
+        const savedCurrentDesign = localStorage.getItem(key)
+        if (savedCurrentDesign) {
+          try {
+            const parsed = JSON.parse(savedCurrentDesign)
+            if (parsed && Array.isArray(parsed.components)) {
+              this.pageBuilderStateStore.setComponents(parsed.components)
+              localStorage.removeItem(key)
+              await nextTick()
+              await this.setEventListenersForElements()
+              await this.handleAutoSave()
+            }
+          } catch (e) {
+            console.error('Failed to parse local draft:', e)
+          }
+        }
+      }
+    }
+  }
+
   getStorageItemNameForResource(): string | null {
     return this.getLocalStorageItemName.value
   }
@@ -1223,6 +1287,7 @@ class PageBuilderClass {
 
     if (
       this.getLocalStorageItemName.value &&
+      typeof this.getLocalStorageItemName.value === 'string' &&
       localStorage.getItem(this.getLocalStorageItemName.value)
     ) {
       const savedCurrentDesign = localStorage.getItem(this.getLocalStorageItemName.value)