@myissue/vue-website-page-builder 3.2.91 → 3.2.92

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -6,18 +6,20 @@ import PageBuilderSettings from '../Settings/PageBuilderSettings.vue'
 import AdvancedPageBuilderSettings from '../Settings/AdvancedPageBuilderSettings.vue'
 import { preloadImage } from '../../../composables/preloadImage'
 
-import PageBuilderClass from '../../../composables/PageBuilderClass'
 import DynamicModalBuilder from '../../Modals/DynamicModalBuilder.vue'
 
+import { getPageBuilder } from '../../../composables/builderInstance'
+import { delay } from '@/composables/delay'
+const pageBuilderService = getPageBuilder()
+
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
-const getConfigPageBuilder = computed(() => {
-  return pageBuilderStateStore.getConfigPageBuilder
+const getPageBuilderConfig = computed(() => {
+  return pageBuilderStateStore.getPageBuilderConfig
 })
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
-
+const isDeletingLayout = ref(false)
 const showModalDeleteAllComponents = ref(false)
 //
 // use dynamic model
@@ -50,24 +52,14 @@ const deleteAllComponents = function () {
   //
   // handle click
   thirdModalButtonFunctionDynamicModalBuilder.value = async function () {
-    pageBuilderClass.deleteAllComponents()
-    await pageBuilderClass.clearHtmlSelection()
-
-    if (
-      getConfigPageBuilder.value.updateOrCreate &&
-      typeof getConfigPageBuilder.value.updateOrCreate.formType === 'string'
-    ) {
-      if (getConfigPageBuilder.value.updateOrCreate.formType === 'create') {
-        await pageBuilderClass.removeItemComponentsLocalStorage()
-      }
-      if (getConfigPageBuilder.value.updateOrCreate.formType === 'update') {
-        await pageBuilderClass.removeItemComponentsLocalStorage()
-      }
-    }
-
-    // if(getConfigPageBuilder.updateOrCreate && getConfigPageBuilder.updateOrCreate){}
+    isDeletingLayout.value = true
+    pageBuilderService.deleteAllComponents()
+    await pageBuilderService.clearHtmlSelection()
+    await pageBuilderService.removeItemComponentsLocalStorage()
 
+    await delay(500)
     showModalDeleteAllComponents.value = false
+    isDeletingLayout.value = false
   }
   // end modal
 }
@@ -106,24 +98,24 @@ const openHTMLSettings = function () {
       <div
         class="pbx-flex pbx-items-center pbx-myPrimaryTag pbx-py-0"
         v-if="
-          getConfigPageBuilder &&
-          getConfigPageBuilder.userForPageBuilder &&
-          getConfigPageBuilder.userForPageBuilder.name &&
-          (!getConfigPageBuilder.userForPageBuilder.image ||
-            (typeof getConfigPageBuilder.userForPageBuilder.image === 'string' &&
-              getConfigPageBuilder.userForPageBuilder.image?.length < 2))
+          getPageBuilderConfig &&
+          getPageBuilderConfig.userForPageBuilder &&
+          getPageBuilderConfig.userForPageBuilder.name &&
+          (!getPageBuilderConfig.userForPageBuilder.image ||
+            (typeof getPageBuilderConfig.userForPageBuilder.image === 'string' &&
+              getPageBuilderConfig.userForPageBuilder.image?.length < 2))
         "
       >
         <div
           class="pbx-text-white pbx-rounded-full pbx-bg-myPrimaryBrandColor pbx-flex pbx-justify-center pbx-items-center pbx-text-xs pbx-h-8 pbx-min-h-8 pbx-max-h-8 pbx-w-8 pbx-min-w-8 pbx-max-w-8 pbx-font-normal"
         >
           {{
-            typeof getConfigPageBuilder.userForPageBuilder.name === 'string' &&
-            getConfigPageBuilder.userForPageBuilder.name[0]
+            typeof getPageBuilderConfig.userForPageBuilder.name === 'string' &&
+            getPageBuilderConfig.userForPageBuilder.name[0]
           }}
         </div>
         <div class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal">
-          {{ getConfigPageBuilder.userForPageBuilder.name }}
+          {{ getPageBuilderConfig.userForPageBuilder.name }}
         </div>
       </div>
 
@@ -133,12 +125,12 @@ const openHTMLSettings = function () {
       <div
         class="pbx-flex pbx-items-center lg:pbx-myPrimaryTag pbx-py-0 pbx-gap-4 pbx-w-max"
         v-if="
-          getConfigPageBuilder &&
-          getConfigPageBuilder.userForPageBuilder &&
-          getConfigPageBuilder.userForPageBuilder.name &&
-          getConfigPageBuilder.userForPageBuilder.image &&
-          typeof getConfigPageBuilder.userForPageBuilder.image === 'string' &&
-          getConfigPageBuilder.userForPageBuilder.image.length > 2
+          getPageBuilderConfig &&
+          getPageBuilderConfig.userForPageBuilder &&
+          getPageBuilderConfig.userForPageBuilder.name &&
+          getPageBuilderConfig.userForPageBuilder.image &&
+          typeof getPageBuilderConfig.userForPageBuilder.image === 'string' &&
+          getPageBuilderConfig.userForPageBuilder.image.length > 2
         "
       >
         <div
@@ -146,12 +138,12 @@ const openHTMLSettings = function () {
         >
           <img
             alt="avatar"
-            :src="`${getConfigPageBuilder.userForPageBuilder.image}`"
+            :src="`${getPageBuilderConfig.userForPageBuilder.image}`"
             class="pbx-block pbx-inset-0 pbx-object-top pbx-h-8 pbx-min-h-8 pbx-max-h-8 pbx-w-8 pbx-min-w-8 pbx-max-w-8 pbx-object-cover pbx-rounded-full"
           />
         </div>
         <div class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal">
-          {{ getConfigPageBuilder.userForPageBuilder.name }}
+          {{ getPageBuilderConfig.userForPageBuilder.name }}
         </div>
       </div>
 
@@ -173,7 +165,7 @@ const openHTMLSettings = function () {
             <button
               @click="
                 () => {
-                  pageBuilderClass.clearHtmlSelection()
+                  pageBuilderService.clearHtmlSelection()
                   openMainSettings()
                 }
               "
@@ -198,7 +190,7 @@ const openHTMLSettings = function () {
             <button
               @click="
                 () => {
-                  pageBuilderClass.clearHtmlSelection()
+                  pageBuilderService.clearHtmlSelection()
                   deleteAllComponents()
                 }
               "
@@ -242,6 +234,7 @@ const openHTMLSettings = function () {
       :gridColumnAmount="gridColumnModal"
       :title="titleModal"
       :description="descriptionModal"
+      :isLoading="isDeletingLayout"
       :firstButtonText="firstButtonModal"
       :secondButtonText="secondButtonModal"
       :thirdButtonText="thirdButtonModal"

package/src/Components/TipTap/TipTap.vue

@@ -1,21 +1,16 @@
 <script setup lang="ts">
-import PageBuilderClass from '../../composables/PageBuilderClass'
-import { sharedPageBuilderStore } from '../../stores/shared-store'
-
-// Use shared store instance
-const pageBuilderStateStore = sharedPageBuilderStore
-
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
+import { getPageBuilder } from '../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 </script>
 
 <template>
   <div>
     <div class="pbx-blockease-linear pbx-duration-200 pbx-block pbx-ease-linear">
-      <template v-if="pageBuilderClass.isSelectedElementValidText()">
+      <template v-if="pageBuilderService.isSelectedElementValidText()">
         <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mb-6">
           <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
             <button
-              @click="pageBuilderClass.toggleTipTapModal(true)"
+              @click="pageBuilderService.toggleTipTapModal(true)"
               type="button"
               class="pbx-myPrimaryTag"
             >

package/src/Components/TipTap/TipTapInput.vue

@@ -2,10 +2,11 @@
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import { computed, onBeforeMount, onMounted, ref, watch } from 'vue'
-import PageBuilderClass from '../../composables/PageBuilderClass.ts'
 import Link from '@tiptap/extension-link'
 import DynamicModalBuilder from '../Modals/DynamicModalBuilder.vue'
 import { sharedPageBuilderStore } from '../../stores/shared-store'
+import { getPageBuilder } from '../../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
@@ -25,8 +26,6 @@ const firstModalButtonFunctionDynamicModalBuilder = ref(null)
 const secondModalButtonFunctionDynamicModalBuilder = ref(null)
 const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
-
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
@@ -36,6 +35,7 @@ const textContent = computed(() => {
   if (editor.value) {
     return editor.value.getHTML()
   }
+  return null
 })
 
 const getElementtextContentLength = ref(0)
@@ -69,19 +69,19 @@ const editor = useEditor({
 
 // watch for changes in textContent and update store and textContentVueModel
 watch(textContent, async (newValue) => {
-  if (!pageBuilderClass.isSelectedElementValidText()) return
+  if (!pageBuilderService.isSelectedElementValidText()) return
 
   if (getElement.value) {
     pageBuilderStateStore.setTextAreaVueModel(newValue)
 
     if (typeof newValue === 'string' && newValue !== textContentVueModel.value) {
-      await pageBuilderClass.handleTextInput(newValue)
+      await pageBuilderService.handleTextInput(newValue)
     }
   }
 })
 
 const TipTapSetContent = function () {
-  if (!pageBuilderClass.isSelectedElementValidText()) return
+  if (!pageBuilderService.isSelectedElementValidText()) return
 
   if (editor.value) {
     editor.value.commands.setContent(getElement.value.innerHTML)
@@ -216,7 +216,7 @@ onMounted(() => {
     </DynamicModalBuilder>
 
     <div class="pbx-blockease-linear pbx-duration-200 pbx-block pbx-ease-linear">
-      <div v-if="pageBuilderClass.isSelectedElementValidText() && editor">
+      <div v-if="pageBuilderService.isSelectedElementValidText() && editor">
         <div class="pbx-relative pbx-rounded-lg">
           <div
             class="pbx-flex pbx-justify-between pbx-myPrimaryGap pbx-items-center pbx-py-4 pbx-px-4 pbx-overflow-x-auto pbx-border-b pbx-border-gray-200"
@@ -227,7 +227,7 @@ onMounted(() => {
                   class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max pbx-p-1 pbx-rounded-full pbx-border pbx-border-gray-200 pbx-shadow-sm"
                 >
                   <button
-                    @click="pageBuilderClass.toggleTipTapModal(false)"
+                    @click="pageBuilderService.toggleTipTapModal(false)"
                     type="button"
                     class="pbx-myPrimaryTag"
                   >

package/src/DemoComponents/DemoUnsplash.vue

@@ -4,15 +4,14 @@ const unsplashKey = import.meta.env.VITE_UNSPLASH_KEY
 import { usePageBuilderModal } from '../composables/usePageBuilderModal'
 import { delay } from '../composables/delay'
 import { preloadImage } from '../composables/preloadImage'
-import PageBuilderClass from '../composables/PageBuilderClass.ts'
 import { sharedPageBuilderStore } from '../stores/shared-store'
+import { getPageBuilder } from '../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 const { closeMediaLibraryModal } = usePageBuilderModal()
 
 const pageBuilderStateStore = sharedPageBuilderStore
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
-
 const getIsLoading = ref(false)
 const getIsLoadingImage = ref(false)
 const getSearchTerm = ref('')
@@ -105,7 +104,7 @@ const applySelectedImage = async function (imageURL) {
     src: `${imageURL}`,
   })
 
-  await pageBuilderClass.updateBasePrimaryImage()
+  await pageBuilderService.updateBasePrimaryImage()
 
   closeMediaLibraryModal()
 }
@@ -252,7 +251,7 @@ onMounted(async () => {
               }}
             </button>
 
-            <span class="pbx-myPrimaryTag py-2.5 pbx-px-4">
+            <span class="pbx-myPrimaryTag pbx-py-2.5 pbx-px-4">
               {{ Number(getCurrentPageNumber) }}
             </span>
             <button

package/src/DemoComponents/HomeSection.vue

@@ -1,26 +1,16 @@
 <script setup lang="ts">
 import FullWidthElement from '../Components/Layouts/FullWidthElement.vue'
 import PageBuilder from '../PageBuilder/PageBuilder.vue'
-import PageBuilderClass from '../composables/PageBuilderClass.ts'
 
 import DemoMediaLibraryComponent from './DemoMediaLibraryComponent.vue'
 import DemoBuilderComponents from './DemoBuilderComponents.vue'
-import { computed, onMounted } from 'vue'
-import { sharedPageBuilderStore } from '../stores/shared-store'
+import { onMounted } from 'vue'
 import oldhtmlfromdb from './oldhtmlfromdb.json'
 import html from './html.json'
 import { rawHTML } from './rawHTML'
 
-const pageBuilderStateStore = sharedPageBuilderStore
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
-
-const getLocalStorageItemName = computed(() => {
-  return pageBuilderStateStore.getLocalStorageItemName
-})
-
-const getComponents = computed(() => {
-  return pageBuilderStateStore.getComponents
-})
+import { getPageBuilder } from '../composables/builderInstance'
+const pageBuilderService = getPageBuilder()
 
 const features = [
   {
@@ -71,8 +61,8 @@ const configPageBuilder = {
     image: '/jane_doe.jpg',
   },
   updateOrCreate: {
-    formType: 'create' as 'create',
-    formName: 'news',
+    formType: 'create',
+    formName: 'collection',
   },
   pageBuilderLogo: {
     src: '/logo/logo.svg',
@@ -82,29 +72,18 @@ const configPageBuilder = {
     id: 1,
   },
   userSettings: {
-    theme: 'light' as 'light',
+    theme: 'light',
     language: 'en',
     autoSave: true,
   },
   settings: {
     brandColor: '#DB93B0',
   },
-}
-
-pageBuilderClass.applyPageBuilderConfig(configPageBuilder)
+} as const
 
 onMounted(async () => {
-  if (typeof getLocalStorageItemName.value === 'string' && getLocalStorageItemName.value) {
-    const value = localStorage.getItem(getLocalStorageItemName.value)
-
-    if (value) {
-      pageBuilderClass.mountComponentsToDOM(JSON.stringify(value))
-    } else {
-      pageBuilderClass.mountComponentsToDOM(JSON.stringify(html), true)
-      // pageBuilderClass.mountComponentsToDOM(rawHTML, true)
-      // pageBuilderClass.mountComponentsToDOM(JSON.stringify(oldhtmlfromdb), true)
-    }
-  }
+  await pageBuilderService.startBuilder(configPageBuilder)
+  pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
 })
 </script>