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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.1.13",
+  "version": "v3.1.15",
   "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/App.vue

@@ -1,6 +1,6 @@
 <script setup>
-import HomeSection from '@/Components/Homepage/HomeSection.vue'
-import Footer from '@/Components/Homepage/Footer.vue'
+import HomeSection from './Components/Homepage/HomeSection.vue'
+import Footer from './Components/Homepage/Footer.vue'
 </script>
 
 <template>

package/src/Components/Homepage/HomeSection.vue

@@ -1,7 +1,6 @@
 <script setup>
-const emit = defineEmits(['handleButton'])
-import FullWidthElement from '@/Components/Layouts/FullWidthElement.vue'
-import PageBuilder from '@/PageBuilder/PageBuilder.vue'
+import FullWidthElement from '../../Components/Layouts/FullWidthElement.vue'
+import PageBuilder from '../../PageBuilder/PageBuilder.vue'
 
 // first button function
 const handleButton = function () {
@@ -80,10 +79,22 @@ const features = [
       </div>
       <div>
         <PageBuilder
-          PageBuilderLogo="/logo/logo.svg"
-          updateOrCreate="update"
-          :userForPageBuilder="{ name: 'John Doe' }"
-          :resourceData="{ title: 'Demo Article', id: 1 }"
+          :configPageBuilder="{
+            updateOrCreate: 'create',
+            pageBuilderLogo: {
+              src: '/logo/logo.svg',
+            },
+            userForPageBuilder: { name: 'John Doe' },
+            resourceData: {
+              title: 'Demo Article',
+              id: 1,
+            },
+            userSettings: {
+              theme: 'light',
+              language: 'en',
+              autoSave: true,
+            },
+          }"
         ></PageBuilder>
       </div>
       <div @click="handleButton" class="myPrimaryContentSection cursor-pointer">

package/src/Components/Modals/{DynamicModal.vue → DynamicModalBuilder.vue}

@@ -1,9 +1,9 @@
 <script setup>
-import Modal from '@/Components/Modals/Modal.vue'
+import ModalBuilder from './ModalBuilder.vue'
 import {} from '@headlessui/vue'
 
 defineProps({
-  showDynamicModal: {
+  showDynamicModalBuilder: {
     type: Boolean,
     default: false,
     required: true,
@@ -55,28 +55,35 @@ defineProps({
 })
 
 const emit = defineEmits([
-  'firstModalButtonFunction',
-  'secondModalButtonFunction',
-  'thirdModalButtonFunction',
+  'firstModalButtonFunctionDynamicModalBuilder',
+  'secondModalButtonFunctionDynamicModalBuilder',
+  'thirdModalButtonFunctionDynamicModalBuilder',
 ])
 
 // first button function
-const firstButton = function () {
-  emit('firstModalButtonFunction')
+const firstButtonBuilder = function () {
+  console.log('firstButtonBuilder VUE.js raaan')
+  emit('firstModalButtonFunctionDynamicModalBuilder')
 }
 // second button  function
-const secondButton = function () {
-  emit('secondModalButtonFunction')
+const secondButtonBuilder = function () {
+  console.log('secondButtonBuilder VUE.js raaan')
+  emit('secondModalButtonFunctionDynamicModalBuilder')
 }
 
 // third button function
-const thirdButton = function () {
-  emit('thirdModalButtonFunction')
+const thirdButtonBuilder = function () {
+  console.log('thirdButtonBuilder VUE.js raaan')
+  emit('thirdModalButtonFunctionDynamicModalBuilder')
 }
 </script>
 
 <template>
-  <Modal :show="showDynamicModal" @close="firstButton" :maxWidth="maxWidth">
+  <ModalBuilder
+    :showModalBuilder="showDynamicModalBuilder"
+    @closeMainModalBuilder="firstButtonBuilder"
+    :maxWidth="maxWidth"
+  >
     <slot name="content" />
 
     <div
@@ -124,7 +131,7 @@ const thirdButton = function () {
 
           <div
             class="h-10 w-10 flex-end cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white hover:fill-white focus-visible:ring-0"
-            @click="firstButton"
+            @click="firstButtonBuilder"
           >
             <span class="material-symbols-outlined"> close </span>
           </div>
@@ -158,13 +165,13 @@ const thirdButton = function () {
             ref="firstButtonRef"
             class="mySecondaryButton"
             type="button"
-            @click="firstButton"
+            @click="firstButtonBuilder"
           >
             {{ firstButtonText }}
           </button>
 
           <div v-if="secondButtonText">
-            <div v-if="disabled && disabledWhichButton === 'secondButton'">
+            <div v-if="disabled && disabledWhichButton === 'secondButtonBuilder'">
               <button
                 class="flex items-center gap-2 myPrimaryButton bg-yellow-300 hover:bg-yellow-400 text-myPrimaryDarkGrayColor hover:text-myPrimaryDarkGrayColor focus:ring-yellow-400 w-full"
                 :class="{
@@ -172,7 +179,7 @@ const thirdButton = function () {
                 }"
                 :disabled="disabled"
                 type="button"
-                @click="secondButton"
+                @click="secondButtonBuilder"
               >
                 <div>
                   <Transition name="bounce">
@@ -201,11 +208,11 @@ const thirdButton = function () {
               </button>
             </div>
 
-            <div v-if="!disabled || disabledWhichButton !== 'secondButton'">
+            <div v-if="!disabled || disabledWhichButton !== 'secondButtonBuilder'">
               <button
                 class="myPrimaryButton bg-yellow-300 hover:bg-yellow-400 text-myPrimaryDarkGrayColor hover:text-myPrimaryDarkGrayColor focus:ring-yellow-400 w-full"
                 type="button"
-                @click="secondButton"
+                @click="secondButtonBuilder"
               >
                 {{ secondButtonText }}
               </button>
@@ -214,7 +221,7 @@ const thirdButton = function () {
 
           <div v-if="thirdButtonText">
             <div v-if="type === 'default'">
-              <div v-if="disabled && disabledWhichButton === 'thirdButton'">
+              <div v-if="disabled && disabledWhichButton === 'thirdButtonBuilder'">
                 <button
                   class="flex items-center gap-2 myPrimaryButton bg-myPrimaryLinkColor focus-visible:ring-myPrimaryLinkColor focus:ring-myPrimaryLinkColor hover:bg-myPrimaryLinkColor w-full"
                   :class="{
@@ -250,18 +257,18 @@ const thirdButton = function () {
                 </button>
               </div>
 
-              <div v-if="!disabled || disabledWhichButton !== 'thirdButton'">
+              <div v-if="!disabled || disabledWhichButton !== 'thirdButtonBuilder'">
                 <button
                   class="myPrimaryButton bg-myPrimaryLinkColor focus-visible:ring-myPrimaryLinkColor focus:ring-myPrimaryLinkColor hover:bg-myPrimaryLinkColor w-full"
                   type="button"
-                  @click="thirdButton"
+                  @click="thirdButtonBuilder"
                 >
                   {{ thirdButtonText }}
                 </button>
               </div>
             </div>
             <div v-if="type === 'success'">
-              <div v-if="disabled && disabledWhichButton === 'thirdButton'">
+              <div v-if="disabled && disabledWhichButton === 'thirdButtonBuilder'">
                 <button
                   class="flex items-center gap-2 myPrimaryButton bg-myPrimaryLinkColor focus-visible:ring-myPrimaryLinkColor focus:ring-myPrimaryLinkColor hover:bg-myPrimaryLinkColor w-full"
                   :class="{
@@ -297,11 +304,11 @@ const thirdButton = function () {
                 </button>
               </div>
 
-              <div v-if="!disabled || disabledWhichButton !== 'thirdButton'">
+              <div v-if="!disabled || disabledWhichButton !== 'thirdButtonBuilder'">
                 <button
                   class="myPrimaryButton bg-myPrimaryLinkColor focus-visible:ring-myPrimaryLinkColor focus:ring-myPrimaryLinkColor hover:bg-myPrimaryLinkColor w-full"
                   type="button"
-                  @click="thirdButton"
+                  @click="thirdButtonBuilder"
                 >
                   {{ thirdButtonText }}
                 </button>
@@ -309,7 +316,7 @@ const thirdButton = function () {
             </div>
 
             <div v-if="type === 'warning'">
-              <div v-if="disabled && disabledWhichButton === 'thirdButton'">
+              <div v-if="disabled && disabledWhichButton === 'thirdButtonBuilder'">
                 <button
                   class="flex items-center gap-2 myPrimaryButton bg-myPrimaryLinkColor focus-visible:ring-myPrimaryLinkColor focus:ring-myPrimaryLinkColor hover:bg-myPrimaryLinkColor w-full"
                   :class="{
@@ -345,11 +352,11 @@ const thirdButton = function () {
                 </button>
               </div>
 
-              <div v-if="!disabled || disabledWhichButton !== 'thirdButton'">
+              <div v-if="!disabled || disabledWhichButton !== 'thirdButtonBuilder'">
                 <button
                   class="flex items-center gap-2 myPrimaryButton bg-myPrimaryErrorColor hover:bg-red-600 text-white focus:ring-myPrimaryErrorColor w-full"
                   type="button"
-                  @click="thirdButton"
+                  @click="thirdButtonBuilder"
                 >
                   {{ thirdButtonText }}
                 </button>
@@ -357,7 +364,7 @@ const thirdButton = function () {
             </div>
 
             <div v-if="type === 'danger' || type === 'delete'">
-              <div v-if="disabled && disabledWhichButton === 'thirdButton'">
+              <div v-if="disabled && disabledWhichButton === 'thirdButtonBuilder'">
                 <button
                   class="flex items-center gap-2 myPrimaryButton bg-myPrimaryErrorColor hover:bg-red-600 text-white focus:ring-myPrimaryErrorColor w-full"
                   :class="{
@@ -393,11 +400,11 @@ const thirdButton = function () {
                 </button>
               </div>
 
-              <div v-if="!disabled || disabledWhichButton !== 'thirdButton'">
+              <div v-if="!disabled || disabledWhichButton !== 'thirdButtonBuilder'">
                 <button
                   class="flex items-center gap-2 myPrimaryButton bg-myPrimaryErrorColor hover:bg-red-600 text-white focus:ring-myPrimaryErrorColor w-full"
                   type="button"
-                  @click="thirdButton"
+                  @click="thirdButtonBuilder"
                 >
                   {{ thirdButtonText }}
                 </button>
@@ -407,7 +414,7 @@ const thirdButton = function () {
         </div>
       </div>
     </template>
-  </Modal>
+  </ModalBuilder>
 </template>
 
 <style scope>

package/src/Components/Modals/MediaLibraryModal.vue

@@ -7,7 +7,7 @@ import {
   TransitionRoot,
 } from '@headlessui/vue'
 import { provide } from 'vue'
-import NoneCustomMediaLibraryComponent from '@/Components/PageBuilder/DemoContent/NoneCustomMediaLibraryComponent.vue'
+import NoneCustomMediaLibraryComponent from '../PageBuilder/DemoContent/NoneCustomMediaLibraryComponent.vue'
 
 const props = defineProps({
   title: {

package/src/Components/Modals/{Modal.vue → ModalBuilder.vue}

@@ -1,15 +1,9 @@
-<script setup>
-import { computed, onMounted, onUnmounted, watch } from 'vue'
-import {
-  Dialog,
-  DialogOverlay,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue'
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Dialog, DialogOverlay, TransitionChild, TransitionRoot } from '@headlessui/vue'
 
 const props = defineProps({
-  show: {
+  showModalBuilder: {
     type: Boolean,
     default: false,
   },
@@ -25,10 +19,10 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['closeMainModalBuilder'])
 
-const close = () => {
-  emit('close')
+const handleClose = () => {
+  emit('closeMainModalBuilder')
 }
 
 const maxWidthClass = computed(() => {
@@ -47,8 +41,8 @@ const maxWidthClass = computed(() => {
 
 <template>
   <teleport to="body">
-    <TransitionRoot :show="show" as="template">
-      <Dialog as="div" class="font-sans fixed z-30 inset-0 overflow-y-auto" @close="close">
+    <TransitionRoot :show="showModalBuilder" as="template">
+      <Dialog as="div" class="font-sans fixed z-30 inset-0 overflow-y-auto" @close="handleClose">
         <div class="flex items-end justify-center text-center sm:block sm:p-0">
           <TransitionChild
             as="template"

package/src/Components/Modals/PageBuilderPreviewModal.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, inject } from 'vue'
-import { delay } from '@/composables/delay'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
+import { delay } from '../../composables/delay'
+import { usePageBuilderStateStore } from '../../stores/page-builder-state'
 
 import {
   Dialog,
@@ -39,8 +39,8 @@ const handleEscapeKey = function () {
   firstButton()
 }
 
-const getPageBuilderLogo = computed(() => {
-  return pageBuilderStateStore.getPageBuilderLogo
+const getConfigPageBuilder = computed(() => {
+  return pageBuilderStateStore.getConfigPageBuilder
 })
 </script>
 
@@ -88,9 +88,16 @@ const getPageBuilderLogo = computed(() => {
               <div
                 class="px-4 lg:h-[10vh] h-[16vh] flex items-center justify-between border-b border-gray-200 bg-white"
               >
-                <div v-if="getPageBuilderLogo" class="flex items-center divide-x divide-gray-200">
+                <div
+                  v-if="
+                    getConfigPageBuilder &&
+                    getConfigPageBuilder.pageBuilderLogo &&
+                    getConfigPageBuilder.pageBuilderLogo.src
+                  "
+                  class="flex items-center divide-x divide-gray-200"
+                >
                   <div class="pr-4">
-                    <img class="h-6" :src="getPageBuilderLogo" alt="Logo" />
+                    <img class="h-6" :src="getConfigPageBuilder.pageBuilderLogo.src" alt="Logo" />
                   </div>
                   <span class="myPrimaryParagraph font-medium pl-4">Preview mode </span>
                 </div>

package/src/Components/PageBuilder/DemoContent/NoneCustomSearchComponent.vue

@@ -35,23 +35,6 @@ const convertToComponentObject = function (comp: any): ComponentObject {
   }
 }
 
-// Handle image load errors
-const handleImageError = (event: Event, title: string) => {
-  const img = event.target as HTMLImageElement
-  const container = img.parentElement
-  if (container) {
-    // Generate and set SVG preview
-    const svgPreview = generateComponentPreview(title)
-    container.innerHTML = `<div class="w-full h-full flex items-center justify-center">${svgPreview}</div>`
-  }
-}
-
-// Check if we should show SVG preview instead of image
-const shouldShowSvgPreview = (comp: any) => {
-  // Always show SVG preview for better reliability
-  return true
-}
-
 // Get SVG preview for component
 const getSvgPreview = (title: string) => {
   return generateComponentPreview(title)