@myissue/vue-website-page-builder 3.1.13 → 3.1.15

package/src/PageBuilder/PageBuilder.vue

@@ -1,29 +1,24 @@
 <script setup>
 import { onMounted, computed, ref, watch, provide } from 'vue'
 import { createPinia } from 'pinia'
-import PageBuilderClass from '@/composables/PageBuilderClass.ts'
-import PageBuilderPreviewModal from '@/Components/Modals/PageBuilderPreviewModal.vue'
-import Preview from '@/PageBuilder/Preview.vue'
-import ComponentTopMenu from '@/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue'
-import EditGetElement from '@/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue'
-import SearchComponents from '@/Components/Search/SearchComponents.vue'
-import OptionsDropdown from '@/Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue'
-import RightSidebarEditor from '@/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
+import PageBuilderClass from '../composables/PageBuilderClass.ts'
+import PageBuilderPreviewModal from '../Components/Modals/PageBuilderPreviewModal.vue'
+import Preview from './Preview.vue'
+import ComponentTopMenu from '../Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue'
+import EditGetElement from '../Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue'
+import SearchComponents from '../Components/Search/SearchComponents.vue'
+import OptionsDropdown from '../Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue'
+import RightSidebarEditor from '../Components/PageBuilder/EditorMenu/RightSidebarEditor.vue'
+import { usePageBuilderStateStore } from '../stores/page-builder-state'
 
 /**
  * Props for PageBuilder component
  * @typedef {Object} Props
  * @property {Object|null} CustomMediaLibraryComponent - Custom media component
  * @property {Object|null} CustomSearchComponent - Custom search component
- * @property {string} updateOrCreate - Mode: create or update
- * @property {Object|null} user - User object with name property: { name: string }
+ * @property {Object} configPageBuilder - Configuration object containing:
  */
 const props = defineProps({
-  PageBuilderLogo: {
-    type: String,
-    default: null,
-  },
   CustomMediaLibraryComponent: {
     type: Object,
     default: null,
@@ -32,32 +27,10 @@ const props = defineProps({
     type: Object,
     default: null,
   },
-  updateOrCreate: {
-    type: String,
-    default: 'create',
-    required: false,
-  },
-  userForPageBuilder: {
-    type: Object,
-    default: null,
-    validator: (value) => {
-      // Allow null or object with name property
-      return value === null || (typeof value === 'object' && typeof value.name === 'string')
-    },
-  },
-  resourceData: {
+  configPageBuilder: {
     type: Object,
-    default: null,
+    default: () => ({ updateOrCreate: 'create' }),
     required: false,
-    validator: (value) => {
-      // Allow null or object with title (string) and id (number) properties
-      return (
-        value === null ||
-        (typeof value === 'object' &&
-          typeof value.title === 'string' &&
-          typeof value.id === 'number')
-      )
-    },
   },
 })
 
@@ -65,27 +38,21 @@ const props = defineProps({
 const internalPinia = createPinia()
 const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
 
-// Set logo
-if (props.PageBuilderLogo) {
-  pageBuilderStateStore.setPageBuilderLogo(props.PageBuilderLogo)
-}
-
-const getPageBuilderLogo = computed(() => {
-  return pageBuilderStateStore.getPageBuilderLogo
-})
-
-// Set current resource data if provided
-if (props.resourceData) {
-  pageBuilderStateStore.setCurrentResourceData(props.resourceData)
-}
-// Set current user if provided
-if (props.userForPageBuilder) {
-  pageBuilderStateStore.setCurrentUser(props.userForPageBuilder)
+// Set configPageBuilder in store (this will be the single source of truth)
+if (props.configPageBuilder) {
+  // Ensure updateOrCreate defaults to 'create' if not provided
+  const configWithDefaults = {
+    ...props.configPageBuilder,
+    updateOrCreate: props.configPageBuilder.updateOrCreate || 'create',
+    userSettings: props.configPageBuilder.userSettings || {
+      theme: 'light',
+      language: 'en',
+      autoSave: true,
+    },
+  }
+  pageBuilderStateStore.setConfigPageBuilder(configWithDefaults)
 }
 
-// Set updateOrCreate in store
-pageBuilderStateStore.setUpdateOrCreate(props.updateOrCreate)
-
 // Initialize PageBuilder with store
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
@@ -105,6 +72,10 @@ const closeAddComponentModal = () => {
 }
 provide('closeAddComponentModal', closeAddComponentModal)
 
+const getConfigPageBuilder = computed(() => {
+  return pageBuilderStateStore.getConfigPageBuilder
+})
+
 const getMenuRight = computed(() => {
   return pageBuilderStateStore.getMenuRight
 })
@@ -150,17 +121,6 @@ const getComponents = computed(() => {
   return pageBuilderStateStore.getComponents
 })
 
-const getCurrentUser = computed(() => {
-  return pageBuilderStateStore.getCurrentUser
-})
-
-const getCurrentResourceData = computed(() => {
-  return pageBuilderStateStore.getCurrentResourceData
-})
-const getUpdateOrCreate = computed(() => {
-  return pageBuilderStateStore.getUpdateOrCreate
-})
-
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
@@ -246,9 +206,15 @@ onMounted(async () => {
           class="px-4 lg:h-[10vh] h-[16vh] flex items-center justify-between border-b border-gray-200 bg-white"
         >
           <div class="flex items-center justify-start divide-x divide-gray-200">
-            <template v-if="getPageBuilderLogo">
+            <template
+              v-if="
+                getConfigPageBuilder &&
+                getConfigPageBuilder.pageBuilderLogo &&
+                getConfigPageBuilder.pageBuilderLogo.src
+              "
+            >
               <div class="border-r border-gray-200 pr-6">
-                <img class="h-6" :src="getPageBuilderLogo" alt="Logo" />
+                <img class="h-6" :src="getConfigPageBuilder.pageBuilderLogo.src" alt="Logo" />
               </div>
             </template>
             <button
@@ -280,66 +246,6 @@ onMounted(async () => {
       </div>
       <!-- Save laylout # end -->
 
-      <div class="py-4 p-4 bg-red-100 text-sm test-data m-4 rounded-lg">
-        <h3 class="font-semibold mb-3 text-gray-800">PageBuilder Debug Info</h3>
-        <div class="bg-white rounded border overflow-hidden">
-          <table class="min-w-full text-xs">
-            <thead class="bg-gray-50">
-              <tr>
-                <th class="px-3 py-2 text-left font-medium text-gray-700 border-b">Property</th>
-                <th class="px-3 py-2 text-left font-medium text-gray-700 border-b">Value</th>
-                <th class="px-3 py-2 text-left font-medium text-gray-700 border-b">Type</th>
-                <th class="px-3 py-2 text-left font-medium text-gray-700 border-b">Present</th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-gray-200">
-              <tr>
-                <td class="px-3 py-2 font-medium text-gray-600">User (store)</td>
-                <td class="px-3 py-2">
-                  {{ getCurrentUser ? JSON.stringify(getCurrentUser) : 'null' }}
-                </td>
-                <td class="px-3 py-2 text-gray-500">{{ typeof getCurrentUser }}</td>
-                <td class="px-3 py-2 text-gray-500">{{ !!getCurrentUser }}</td>
-              </tr>
-              <tr>
-                <td class="px-3 py-2 font-medium text-gray-600">Update or Create (store)</td>
-                <td class="px-3 py-2">{{ getUpdateOrCreate }}</td>
-                <td class="px-3 py-2 text-gray-500">{{ typeof getUpdateOrCreate }}</td>
-                <td class="px-3 py-2 text-gray-500">{{ !!getUpdateOrCreate }}</td>
-              </tr>
-              <tr>
-                <td class="px-3 py-2 font-medium text-gray-600">Resource Data (store)</td>
-                <td class="px-3 py-2">
-                  {{ getCurrentResourceData ? JSON.stringify(getCurrentResourceData) : 'null' }}
-                </td>
-                <td class="px-3 py-2 text-gray-500">{{ typeof getCurrentResourceData }}</td>
-                <td class="px-3 py-2 text-gray-500">{{ !!getCurrentResourceData }}</td>
-              </tr>
-              <tr>
-                <td class="px-3 py-2 font-medium text-gray-600">Custom Media Component</td>
-                <td class="px-3 py-2">
-                  {{ props.CustomMediaLibraryComponent ? 'Provided' : 'Not provided' }}
-                </td>
-                <td class="px-3 py-2 text-gray-500">
-                  {{ props.CustomMediaLibraryComponent ? 'true' : 'false' }}
-                </td>
-                <td class="px-3 py-2 text-gray-500">{{ !!props.CustomMediaLibraryComponent }}</td>
-              </tr>
-              <tr>
-                <td class="px-3 py-2 font-medium text-gray-600">Custom Search Component</td>
-                <td class="px-3 py-2">
-                  {{ props.CustomSearchComponent ? 'Provided' : 'Not provided' }}
-                </td>
-                <td class="px-3 py-2 text-gray-500">
-                  {{ props.CustomSearchComponent ? 'true' : 'false' }}
-                </td>
-                <td class="px-3 py-2 text-gray-500">{{ !!props.CustomSearchComponent }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
       <div class="relative h-full flex">
         <div
           @click.self="pageBuilderStateStore.setComponent(null)"

package/src/composables/PageBuilderClass.ts

@@ -11,20 +11,20 @@ import type {
   TailwindPaddingAndMargin,
   TailwindBorderRadius,
   TailwindBorderStyleWidthColor,
-} from '@/types'
-import type { usePageBuilderStateStore } from '@/stores/page-builder-state'
-
-import tailwindColors from '@/utils/builder/tailwaind-colors'
-import tailwindOpacities from '@/utils/builder/tailwind-opacities'
-import tailwindFontSizes from '@/utils/builder/tailwind-font-sizes'
-import tailwindFontStyles from '@/utils/builder/tailwind-font-styles'
-import tailwindPaddingAndMargin from '@/utils/builder/tailwind-padding-margin'
-import tailwindBorderRadius from '@/utils/builder/tailwind-border-radius'
-import tailwindBorderStyleWidthPlusColor from '@/utils/builder/tailwind-border-style-width-color'
+} from '../types'
+import type { usePageBuilderStateStore } from '../stores/page-builder-state'
+
+import tailwindColors from '../utils/builder/tailwaind-colors'
+import tailwindOpacities from '../utils/builder/tailwind-opacities'
+import tailwindFontSizes from '../utils/builder/tailwind-font-sizes'
+import tailwindFontStyles from '../utils/builder/tailwind-font-styles'
+import tailwindPaddingAndMargin from '../utils/builder/tailwind-padding-margin'
+import tailwindBorderRadius from '../utils/builder/tailwind-border-radius'
+import tailwindBorderStyleWidthPlusColor from '../utils/builder/tailwind-border-style-width-color'
 import { computed, ref, nextTick, inject } from 'vue'
 import type { ComputedRef } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
-import { delay } from '@/composables/delay'
+import { delay } from './delay'
 
 class PageBuilderClass {
   // Class properties with types
@@ -280,8 +280,6 @@ class PageBuilderClass {
    * attach event listeners to each element within a 'section'
    */
   setEventListenersForElements = async () => {
-    console.log('setEventListenersForElements called')
-
     if (this.showRunningMethodLogs) {
       console.log('setEventListenersForElements')
     }
@@ -1101,9 +1099,10 @@ class PageBuilderClass {
   }
 
   updateLocalStorageItemName(): void {
-    const updateOrCreate = this.pageBuilderStateStore.getUpdateOrCreate
+    const updateOrCreate =
+      this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate || 'create'
 
-    const resourceData = this.pageBuilderStateStore.getCurrentResourceData
+    const resourceData = this.pageBuilderStateStore.getConfigPageBuilder?.resourceData
 
     // Logic for update
     if (updateOrCreate === 'create') {
@@ -1213,21 +1212,7 @@ class PageBuilderClass {
       const savedCurrentDesign = localStorage.getItem(this.getLocalStorageItemName.value)
 
       if (savedCurrentDesign) {
-        let components = JSON.parse(savedCurrentDesign)
-
-        // Ensure components is always an array
-        components = Array.isArray(components) ? components : []
-
-        // Transform HTML strings to component objects if needed
-        if (components.length > 0 && typeof components[0] === 'string') {
-          components = components.map((htmlString: string) => ({
-            html_code: htmlString,
-          }))
-        }
-
-        this.pageBuilderStateStore.setComponents(components)
-
-        return true
+        return savedCurrentDesign
       }
     }
 
@@ -1465,6 +1450,81 @@ class PageBuilderClass {
     this.#addHyperlinkToElement(hyperlinkEnable, urlInput || null, openHyperlinkInNewTab || false)
   }
 
+  // Helper method for custom components to easily add components
+  async addComponent(componentObject: ComponentObject): Promise<void> {
+    if (this.showRunningMethodLogs) {
+      console.log('addComponent')
+    }
+
+    try {
+      const clonedComponent = this.cloneCompObjForDOMInsertion({
+        html_code: componentObject.html_code,
+        id: componentObject.id,
+        title: componentObject.title,
+      })
+
+      this.pageBuilderStateStore.setPushComponents({
+        component: clonedComponent,
+        componentArrayAddMethod: this.getComponentArrayAddMethod.value || 'push',
+      })
+
+      // Wait for the DOM to update before setting event listeners
+      await nextTick()
+      this.setEventListenersForElements()
+    } catch (error) {
+      console.error('Error adding component:', error)
+    }
+  }
+
+  // Load existing content from HTML when in update mode
+  loadExistingContent(): void {
+    if (this.showRunningMethodLogs) {
+      console.log('loadExistingContent')
+    }
+
+    if (!this.pageBuilderStateStore.getConfigPageBuilder) return
+
+    const storedData = this.areComponentsStoredInLocalStorage()
+
+    if (storedData) {
+      if (this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate === 'create') {
+        try {
+          // Parse the JSON string from localStorage
+          const parsedData = JSON.parse(storedData)
+          let savedCurrentDesign: ComponentObject[] = []
+
+          // Load ComponentObjects from localStorage
+          if (Array.isArray(parsedData) && parsedData.length > 0) {
+            // Data is always ComponentObjects with html_code, id, and title
+            savedCurrentDesign = parsedData
+          }
+
+          this.pageBuilderStateStore.setComponents(savedCurrentDesign)
+        } catch (error) {
+          console.error('Error loading existing content:', error)
+        }
+      }
+
+      if (this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate === 'update') {
+        try {
+          // Parse the JSON string from localStorage
+          const parsedData = JSON.parse(storedData)
+          let savedCurrentDesign: ComponentObject[] = []
+
+          // Load ComponentObjects from localStorage
+          if (Array.isArray(parsedData) && parsedData.length > 0) {
+            // Data is always ComponentObjects with html_code, id, and title
+            savedCurrentDesign = parsedData
+          }
+
+          this.pageBuilderStateStore.setComponents(savedCurrentDesign)
+        } catch (error) {
+          console.error('Error loading existing content:', error)
+        }
+      }
+    }
+  }
+
   async handlePageBuilderMethods(): Promise<void> {
     await new Promise((resolve) => requestAnimationFrame(resolve))
 
@@ -1518,56 +1578,6 @@ class PageBuilderClass {
     // handle classes
     await this.currentClasses()
   }
-
-  // Helper method for custom components to easily add components
-  async addComponent(componentObject: ComponentObject): Promise<void> {
-    if (this.showRunningMethodLogs) {
-      console.log('addComponent')
-    }
-
-    try {
-      const clonedComponent = this.cloneCompObjForDOMInsertion({
-        html_code: componentObject.html_code,
-        id: componentObject.id,
-        title: componentObject.title,
-      })
-
-      this.pageBuilderStateStore.setPushComponents({
-        component: clonedComponent,
-        componentArrayAddMethod: this.getComponentArrayAddMethod.value || 'push',
-      })
-
-      // Wait for the DOM to update before setting event listeners
-      await nextTick()
-      this.setEventListenersForElements()
-    } catch (error) {
-      console.error('Error adding component:', error)
-    }
-  }
-
-  // Load existing content from HTML when in update mode
-  loadExistingContent(): void {
-    if (this.showRunningMethodLogs) {
-      console.log('loadExistingContent')
-    }
-
-    if (this.pageBuilderStateStore.getUpdateOrCreate === 'update') {
-      if (this.areComponentsStoredInLocalStorage()) {
-        try {
-          // set components
-          const htmlOutput =
-            Array.isArray(this.getComponents.value) &&
-            this.getComponents.value
-              .map((component) => {
-                return component.html_code
-              })
-              .join('')
-        } catch (error) {
-          console.error('Error loading existing content:', error)
-        }
-      }
-    }
-  }
 }
 
 export default PageBuilderClass