@myissue/vue-website-page-builder 3.2.13 → 3.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.2.13",
+  "version": "v3.2.16",
   "description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/Homepage/HomeSection.vue

@@ -52,45 +52,28 @@ const features = [
   },
 ]
 
-// const configPageBuilderTemplate = {
-//   updateOrCreate: {
-//     formType: 'create',
-//     createNewResourceFormName: 'post',
-//   },
-//   pageBuilderLogo: {
-//     src: '/logo/logo.svg',
-//   },
-//   userForPageBuilder: { name: 'John Doe' },
-//   resourceData: {
-//     title: 'Demo Article',
-//     id: 1,
-//   },
-//   userSettings: {
-//     theme: 'light',
-//     language: 'en',
-//     autoSave: true,
-//   },
-// }
-
 const configPageBuilder = {
-  userForPageBuilder: {
-    name: 'John Doe',
-  },
+  // userForPageBuilder: {
+  //   name: 'John Doe',
+  // },
   updateOrCreate: {
     formType: 'update',
-    // createNewResourceFormName: 0,
+    formName: 'news',
   },
   pageBuilderLogo: {
     src: '/logo/logo.svg',
   },
-  resourceData: {
-    title: 'Demo Article',
-    id: 1,
-  },
-  userSettings: {
-    theme: 'light',
-    language: 'en',
-    autoSave: true,
+  // resourceData: {
+  //   title: 'Demo Article',
+  //   id: 1,
+  // },
+  // userSettings: {
+  //   // theme: 'light',
+  //   // language: 'en',
+  //   // autoSave: true,
+  // },
+  settings: {
+    brandColor: '#DB93B0',
   },
 }
 

package/src/Components/Homepage/Navbar.vue

@@ -15,12 +15,9 @@ const handleButton = function () {
     <img class="h-6" src="/logo/logo.svg" alt="Logo" />
 
     <div class="flex lg:gap-x-12 myPrimaryGap">
-      <p
-        @click="handleButton"
-        class="text-lg font-medium text-myPrimaryDarkGrayColor flex gap-2 items-center cursor-pointer"
-      >
-        Start Builder
-      </p>
+      <div class="text-lg font-medium text-myPrimaryDarkGrayColor flex gap-2 items-center">
+        Page Builder
+      </div>
     </div>
   </nav>
 </template>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, nextTick, watch, inject } from 'vue'
+import { ref, computed, onMounted, inject } from 'vue'
 import DynamicModalBuilder from '../../../Modals/DynamicModalBuilder.vue'
 import TipTapInput from '../../../TipTap/TipTapInput.vue'
 import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
@@ -203,26 +203,11 @@ const handleModalIframeSrc = function () {
   }
 }
 
-const pagebuilder = ref(null)
-const videoElement = ref(null)
+// const pagebuilder = ref(null)
+// const videoElement = ref(null)
 
-watch(
-  pagebuilder,
-  async (newValue) => {
-    if (newValue) {
-      console.log('new value:', newValue)
-      videoElement.value = pagebuilder.value?.querySelector('#youtube-video')
-      console.log('video er:', videoElement.value)
-    }
-  },
-  { immediate: true },
-)
-
-onMounted(async () => {
-  pagebuilder.value = document.querySelector('#pagebuilder')
-  console.log('pagebuilder:', pagebuilder.value)
-  await nextTick()
-})
+// videoElement.value = pagebuilder.value.querySelector('#youtube-video')
+// pagebuilder.value = document.querySelector('#pagebuilder')
 </script>
 <template>
   <div>

package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue

@@ -460,8 +460,8 @@ const handleDownloadHTML = function () {
                   </tr>
                   <tr
                     v-if="
-                      getConfigPageBuilder.updateOrCreate.createNewResourceFormName &&
-                      getConfigPageBuilder.updateOrCreate.createNewResourceFormName.length > 0
+                      getConfigPageBuilder.updateOrCreate.formName &&
+                      getConfigPageBuilder.updateOrCreate.formName.length > 0
                     "
                   >
                     <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
@@ -471,7 +471,7 @@ const handleDownloadHTML = function () {
                       <span
                         class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                       >
-                        {{ getConfigPageBuilder.updateOrCreate.createNewResourceFormName }}
+                        {{ getConfigPageBuilder.updateOrCreate.formName }}
                       </span>
                     </td>
                   </tr>

package/src/Components/Search/SearchComponents.vue

@@ -1,6 +1,6 @@
 <script setup>
 import ModalBuilder from '../Modals/ModalBuilder.vue'
-import NoneCustomSearchComponent from '../PageBuilder/DemoContent/NoneCustomSearchComponent.vue'
+import NoneCustomBuilderComponents from '../PageBuilder/DemoContent/NoneCustomBuilderComponents.vue'
 
 defineProps({
   firstButtonText: {
@@ -14,7 +14,7 @@ defineProps({
     default: false,
     required: true,
   },
-  CustomSearchComponent: {
+  CustomBuilderComponents: {
     type: Object,
     default: null,
   },
@@ -54,10 +54,10 @@ const firstButtonBuilder = function () {
 
       <div class="p-4">
         <!-- Only show custom search component if provided -->
-        <div v-if="CustomSearchComponent" class="border border-gray-200 rounded-lg p-4">
-          <component :is="CustomSearchComponent" />
+        <div v-if="CustomBuilderComponents" class="border border-gray-200 rounded-lg p-4">
+          <component :is="CustomBuilderComponents" />
         </div>
-        <div v-else><NoneCustomSearchComponent /></div>
+        <div v-else><NoneCustomBuilderComponents /></div>
       </div>
     </div>
     <div class="bg-slate-50 px-2 py-4 flex sm:justify-end justify-center">

package/src/PageBuilder/PageBuilder.vue

@@ -9,20 +9,12 @@ import SearchComponents from '../Components/Search/SearchComponents.vue'
 import OptionsDropdown from '../Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue'
 import RightSidebarEditor from '../Components/PageBuilder/EditorMenu/RightSidebarEditor.vue'
 import { sharedPageBuilderPinia, sharedPageBuilderStore } from '../stores/shared-store'
-import {
-  isChildrenEmpty,
-  onlyUserIsValid,
-  onlyUpdateOrCreateIsValid,
-  onlyPageBuilderLogoIsValid,
-  onlyResourceDataIsValid,
-  onlyUserSettingsIsValid,
-  updateOrCreateIsFalsy,
-} from '../helpers/passedPageBuilderConfig'
+import { updateOrCreateIsFalsy } from '../helpers/passedPageBuilderConfig'
 /**
  * Props for PageBuilder component
  * @typedef {Object} Props
  * @property {Object|null} CustomMediaLibraryComponent - Custom media component
- * @property {Object|null} CustomSearchComponent - Custom search component
+ * @property {Object|null} CustomBuilderComponents - Custom search component
  * @property {Object} configPageBuilder - Configuration object containing:
  */
 const props = defineProps({
@@ -30,7 +22,7 @@ const props = defineProps({
     type: Object,
     default: null,
   },
-  CustomSearchComponent: {
+  CustomBuilderComponents: {
     type: Object,
     default: null,
   },
@@ -52,7 +44,7 @@ provide('internalPinia', internalPinia)
 
 // Provide custom components for child components
 provide('CustomMediaComponent', props.CustomMediaLibraryComponent)
-provide('CustomSearchComponent', props.CustomSearchComponent)
+provide('CustomBuilderComponents', props.CustomBuilderComponents)
 
 // Provide modal close function for custom components
 const closeAddComponentModal = () => {
@@ -155,7 +147,7 @@ const draggableZone = ref(null)
 const defaultConfigValues = {
   updateOrCreate: {
     formType: 'create',
-    createNewResourceFormName: 'post',
+    formName: 'post',
   },
 
   userSettings: {
@@ -172,59 +164,17 @@ const handleConfig = function (config) {
     config === undefined ||
     (config && Object.keys(config).length === 0 && config.constructor === Object)
   ) {
-    console.log('1')
+    console.log('0000')
     pageBuilderClass.setConfigPageBuilder(defaultConfigValues)
     return
   }
 
   if (config && Object.keys(config).length !== 0 && config.constructor === Object) {
-    //
-    // Check alone
-    // Returns true if all config fields are missing or empty
-    if (isChildrenEmpty(config)) {
-      console.log('1:')
-      return
-    }
-
-    if (onlyUserIsValid(config)) {
-      console.log('2:')
-      return
-    }
-
-    if (onlyUpdateOrCreateIsValid(config)) {
-      console.log('3:')
-      return
-    }
-
-    if (onlyPageBuilderLogoIsValid(config)) {
-      console.log('4:')
-      return
-    }
-
-    if (onlyResourceDataIsValid(config)) {
-      console.log('5:')
-      return
-    }
-
-    if (onlyUserSettingsIsValid(config)) {
-      console.log('6:')
-      return
-    }
-
-    if (onlyUserSettingsIsValid(config)) {
-      console.log('7:')
-      return
-    }
-
     if (updateOrCreateIsFalsy(config)) {
-      console.log('8:')
+      console.log('8888:')
       return
     }
-
-    // Check against eachoter in all combinations
   }
-
-  // In the end make check if form type for update or create is set:
 }
 
 watch(
@@ -294,7 +244,7 @@ onMounted(async () => {
       :show="showModalAddComponent"
       :firstButtonText="firstButtonTextSearchComponents"
       :title="titleModalAddComponent"
-      :CustomSearchComponent="props.CustomSearchComponent"
+      :CustomBuilderComponents="props.CustomBuilderComponents"
       @firstModalButtonSearchComponentsFunction="firstModalButtonSearchComponentsFunction"
     ></SearchComponents>
     <PageBuilderPreviewModal

package/src/composables/PageBuilderClass.ts

@@ -1116,12 +1116,17 @@ class PageBuilderClass {
     // const updateOrCreate =
     //   this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formType || 'create'
 
+    console.log(
+      'config for page builder to work with:',
+      this.pageBuilderStateStore.getConfigPageBuilder,
+    )
+
     const updateOrCreate = this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formType
 
     const resourceData = this.pageBuilderStateStore.getConfigPageBuilder?.resourceData
 
     const resourceFormName =
-      this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.createNewResourceFormName
+      this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formName
 
     // Logic for create resource
     if (updateOrCreate === 'create') {

package/src/helpers/passedPageBuilderConfig.ts

@@ -8,288 +8,19 @@ const pageBuilderStateStore = sharedPageBuilderStore
 // Initialize PageBuilder with store
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
-export const isChildrenEmpty = function (config: PageBuilderConfig) {
-  if (
-    (!config.updateOrCreate || isEmptyObject(config.updateOrCreate)) &&
-    (!config.pageBuilderLogo || isEmptyObject(config.pageBuilderLogo)) &&
-    (!config.resourceData || isEmptyObject(config.resourceData)) &&
-    (!config.userForPageBuilder || isEmptyObject(config.userForPageBuilder)) &&
-    (!config.userSettings || isEmptyObject(config.userSettings))
-  ) {
-    const editorConfig = {
-      updateOrCreate: {
-        formType: 'create' as 'create',
-        createNewResourceFormName: 'post',
-      },
-      userSettings: {
-        theme: 'light' as 'light',
-        language: 'en',
-        autoSave: false,
-      },
-      pageBuilderLogo: null,
-      resourceData: null,
-      userForPageBuilder: null,
-    }
-    pageBuilderClass.setConfigPageBuilder(editorConfig)
-    return true
-  } else {
-    return false
-  }
-}
-export const onlyUserIsValid = function (config: PageBuilderConfig) {
-  if (
-    config.userForPageBuilder &&
-    typeof config.userForPageBuilder.name === 'string' &&
-    config.userForPageBuilder.name.length > 0
-  ) {
-    if (!config.userSettings || (config.userSettings && isEmptyObject(config.userSettings))) {
-      if (
-        !config.updateOrCreate ||
-        (config.updateOrCreate && typeof config.updateOrCreate.formType !== 'string') ||
-        (config.updateOrCreate && isEmptyObject(config.updateOrCreate))
-      ) {
-        if (
-          !config.pageBuilderLogo ||
-          (config.pageBuilderLogo &&
-            config.pageBuilderLogo.src &&
-            typeof config.pageBuilderLogo.src === 'string' &&
-            config.pageBuilderLogo.src.length === 0) ||
-          (config.pageBuilderLogo && isEmptyObject(config.pageBuilderLogo))
-        ) {
-          if (!config.resourceData || (config.resourceData && isEmptyObject(config.resourceData))) {
-            const editorConfig = {
-              userForPageBuilder: config.userForPageBuilder,
-              updateOrCreate: {
-                formType: 'create' as 'create',
-                createNewResourceFormName: 'post',
-              },
-              userSettings: {
-                theme: 'light' as 'light',
-                language: 'en',
-                autoSave: false,
-              },
-            }
-
-            pageBuilderClass.setConfigPageBuilder(editorConfig)
-            return true
-          } else {
-            return false
-          }
-        }
-      }
-    }
-  }
-}
-
-export const onlyUpdateOrCreateIsValid = function (config: PageBuilderConfig) {
-  if (
-    !config.updateOrCreate ||
-    (config.updateOrCreate && typeof config.updateOrCreate.formType !== 'string') ||
-    (config.updateOrCreate && isEmptyObject(config.updateOrCreate))
-  ) {
-    if (
-      !config.userForPageBuilder ||
-      (config.userForPageBuilder && typeof config.userForPageBuilder.name !== 'string') ||
-      (typeof config.userForPageBuilder.name === 'string' &&
-        config.userForPageBuilder.name.length < 1) ||
-      (config.userForPageBuilder && isEmptyObject(config.userForPageBuilder))
-    ) {
-      if (
-        !config.pageBuilderLogo ||
-        (config.pageBuilderLogo &&
-          config.pageBuilderLogo.src &&
-          typeof config.pageBuilderLogo.src === 'string' &&
-          config.pageBuilderLogo.src.length === 0) ||
-        (config.pageBuilderLogo && isEmptyObject(config.pageBuilderLogo))
-      ) {
-        if (!config.userSettings || (config.userSettings && isEmptyObject(config.userSettings))) {
-          if (!config.resourceData || (config.resourceData && isEmptyObject(config.resourceData))) {
-            const editorConfig = {
-              updateOrCreate: config.updateOrCreate,
-              userSettings: {
-                theme: 'light' as 'light',
-                language: 'en',
-                autoSave: false,
-              },
-            }
-            pageBuilderClass.setConfigPageBuilder(editorConfig)
-            return true
-          } else {
-            return false
-          }
-        }
-      }
-    }
-  }
-}
-
-export const onlyPageBuilderLogoIsValid = function (config: PageBuilderConfig) {
-  if (
-    config.updateOrCreate &&
-    typeof config.updateOrCreate.formType === 'string' &&
-    (config.updateOrCreate.formType === 'create' || config.updateOrCreate.formType === 'update')
-  ) {
-    if (
-      !config.userForPageBuilder ||
-      (config.userForPageBuilder && typeof config.userForPageBuilder.name !== 'string') ||
-      (typeof config.userForPageBuilder.name === 'string' &&
-        config.userForPageBuilder.name.length < 1) ||
-      (config.userForPageBuilder && isEmptyObject(config.userForPageBuilder))
-    ) {
-      if (
-        !config.pageBuilderLogo ||
-        (config.pageBuilderLogo &&
-          config.pageBuilderLogo.src &&
-          typeof config.pageBuilderLogo.src === 'string' &&
-          config.pageBuilderLogo.src.length === 0) ||
-        (config.pageBuilderLogo && isEmptyObject(config.pageBuilderLogo))
-      ) {
-        if (!config.userSettings || (config.userSettings && isEmptyObject(config.userSettings))) {
-          if (!config.resourceData || (config.resourceData && isEmptyObject(config.resourceData))) {
-            const editorConfig = {
-              updateOrCreate: {
-                formType: 'create' as 'create',
-                createNewResourceFormName: 'post',
-              },
-              userSettings: {
-                theme: 'light' as 'light',
-                language: 'en',
-                autoSave: false,
-              },
-              pageBuilderLogo: config.pageBuilderLogo,
-              resourceData: null,
-              userForPageBuilder: null,
-            }
-            pageBuilderClass.setConfigPageBuilder(editorConfig)
-            return true
-          } else {
-            return false
-          }
-        }
-      }
-    }
-  }
-}
-
-export const onlyResourceDataIsValid = function (config: PageBuilderConfig) {
-  if (
-    config.resourceData &&
-    typeof config.resourceData.title === 'string' &&
-    config.resourceData.title.length > 0
-  ) {
-    if (
-      !config.updateOrCreate ||
-      (config.updateOrCreate && typeof config.updateOrCreate.formType !== 'string') ||
-      (config.updateOrCreate && isEmptyObject(config.updateOrCreate))
-    ) {
-      if (
-        !config.userForPageBuilder ||
-        (config.userForPageBuilder && typeof config.userForPageBuilder.name !== 'string') ||
-        (typeof config.userForPageBuilder.name === 'string' &&
-          config.userForPageBuilder.name.length < 1) ||
-        (config.userForPageBuilder && isEmptyObject(config.userForPageBuilder))
-      ) {
-        if (
-          !config.pageBuilderLogo ||
-          (config.pageBuilderLogo &&
-            config.pageBuilderLogo.src &&
-            typeof config.pageBuilderLogo.src === 'string' &&
-            config.pageBuilderLogo.src.length === 0) ||
-          (config.pageBuilderLogo && isEmptyObject(config.pageBuilderLogo))
-        ) {
-          if (!config.userSettings || (config.userSettings && isEmptyObject(config.userSettings))) {
-            const editorConfig = {
-              updateOrCreate: {
-                formType: 'create' as 'create',
-                createNewResourceFormName: 'post',
-              },
-              userSettings: {
-                theme: 'light' as 'light',
-                language: 'en',
-                autoSave: false,
-              },
-              pageBuilderLogo: config.pageBuilderLogo,
-              resourceData: null,
-              userForPageBuilder: null,
-            }
-            pageBuilderClass.setConfigPageBuilder(editorConfig)
-            return true
-          } else {
-            return false
-          }
-        }
-      }
-    }
-  }
-}
-
-export const onlyUserSettingsIsValid = function (config: PageBuilderConfig) {
-  if (
-    config.userSettings &&
-    typeof config.userSettings.theme === 'string' &&
-    config.userSettings.theme.length > 0
-  ) {
-    if (
-      config.resourceData &&
-      typeof config.resourceData.title === 'string' &&
-      config.resourceData.title.length > 0
-    ) {
-      if (
-        !config.updateOrCreate ||
-        (config.updateOrCreate && typeof config.updateOrCreate.formType !== 'string') ||
-        (config.updateOrCreate && isEmptyObject(config.updateOrCreate))
-      ) {
-        if (
-          !config.userForPageBuilder ||
-          (config.userForPageBuilder && typeof config.userForPageBuilder.name !== 'string') ||
-          (typeof config.userForPageBuilder.name === 'string' &&
-            config.userForPageBuilder.name.length < 1) ||
-          (config.userForPageBuilder && isEmptyObject(config.userForPageBuilder))
-        ) {
-          if (
-            !config.pageBuilderLogo ||
-            (config.pageBuilderLogo &&
-              config.pageBuilderLogo.src &&
-              typeof config.pageBuilderLogo.src === 'string' &&
-              config.pageBuilderLogo.src.length === 0) ||
-            (config.pageBuilderLogo && isEmptyObject(config.pageBuilderLogo))
-          ) {
-            const editorConfig = {
-              updateOrCreate: {
-                formType: 'create' as 'create',
-                createNewResourceFormName: 'post',
-              },
-              userSettings: {
-                theme: 'light' as 'light',
-                language: 'en',
-                autoSave: false,
-              },
-              pageBuilderLogo: config.pageBuilderLogo,
-              resourceData: null,
-              userForPageBuilder: null,
-            }
-            pageBuilderClass.setConfigPageBuilder(editorConfig)
-            return true
-          } else {
-            return false
-          }
-        }
-      }
-    }
-  }
-}
-
 export const updateOrCreateIsFalsy = function (config: PageBuilderConfig) {
+  // Case A: updateOrCreate is missing, not an object, has an invalid formType, or is an empty object
   if (
     !config.updateOrCreate ||
     (config.updateOrCreate && typeof config.updateOrCreate.formType !== 'string') ||
     (config.updateOrCreate && isEmptyObject(config.updateOrCreate))
   ) {
+    console.log('aaaa')
     const updatedConfig = {
       ...config,
       updateOrCreate: {
         formType: 'create' as 'create',
-        createNewResourceFormName: 'pøøøøøøøøost',
+        formName: 'post',
       },
     }
 
@@ -297,56 +28,43 @@ export const updateOrCreateIsFalsy = function (config: PageBuilderConfig) {
     return true
   }
 
+  // Case B: formType exists but is not 'create' or 'update', and formName is missing or invalid
   if (
     config.updateOrCreate &&
     typeof config.updateOrCreate.formType === 'string' &&
     config.updateOrCreate.formType !== 'create' &&
     config.updateOrCreate.formType !== 'update' &&
-    typeof config.createNewResourceFormName !== 'string'
+    typeof config.formName !== 'string'
   ) {
+    console.log('bbbb')
     const updatedConfig = {
       ...config,
       updateOrCreate: {
         formType: 'create' as 'create',
-        createNewResourceFormName: 'post',
+        formName: 'post',
       },
     }
 
     pageBuilderClass.setConfigPageBuilder(updatedConfig)
     return true
   }
+
+  // Case C: formType is valid ('create' or 'update'), but formName is missing or an empty string
   if (
     (config.updateOrCreate &&
       typeof config.updateOrCreate.formType === 'string' &&
       (config.updateOrCreate.formType === 'create' ||
         config.updateOrCreate.formType === 'update') &&
-      typeof config.updateOrCreate.createNewResourceFormName !== 'string') ||
-    (typeof config.updateOrCreate.createNewResourceFormName === 'string' &&
-      config.updateOrCreate.createNewResourceFormName.length === 0)
+      typeof config.updateOrCreate.formName !== 'string') ||
+    (typeof config.updateOrCreate.formName === 'string' &&
+      config.updateOrCreate.formName.length === 0)
   ) {
+    console.log('cccc')
     const updatedConfig = {
       ...config,
       updateOrCreate: {
-        formType: 'create' as 'create',
-        createNewResourceFormName: 'post',
-      },
-    }
-
-    pageBuilderClass.setConfigPageBuilder(updatedConfig)
-    return true
-  }
-  if (
-    config.updateOrCreate &&
-    typeof config.updateOrCreate.formType === 'string' &&
-    (config.updateOrCreate.formType === 'create' || config.updateOrCreate.formType === 'update') &&
-    typeof config.updateOrCreate.createNewResourceFormName === 'string' &&
-    config.updateOrCreate.createNewResourceFormName.length > 0
-  ) {
-    const updatedConfig = {
-      ...config,
-      updateOrCreate: {
-        formType: 'create' as 'create',
-        createNewResourceFormName: config.updateOrCreate.createNewResourceFormName,
+        formType: config.updateOrCreate.formType,
+        formName: 'post',
       },
     }