@myissue/vue-website-page-builder 3.0.18 → 3.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.0.18",
+  "version": "v3.0.19",
   "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",
@@ -49,7 +49,7 @@
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
-    "build:lib": "vite build --mode lib",
+    "build:lib": "vue-tsc --declaration --emitDeclarationOnly --outDir dist && vite build --mode lib",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
@@ -70,7 +70,8 @@
     "date-fns": "^2.30.0",
     "pinia": "^2.1.7",
     "uuid": "^9.0.0",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-website-page-builder": "file:"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",

package/src/App.vue

@@ -1,122 +1,11 @@
 <script setup>
-import { ref, computed, nextTick, onBeforeMount } from 'vue'
-import PageBuilderModal from '@/Components/Modals/PageBuilderModal.vue'
 import HomeSection from '@/Components/Homepage/HomeSection.vue'
 import Footer from '@/Components/Homepage/Footer.vue'
-import Navbar from '@/Components/Homepage/Navbar.vue'
-import PageBuilderView from '@/PageBuilder/PageBuilder.vue'
-import PageBuilder from '@/composables/PageBuilder.ts'
-import FullScreenSpinner from '@/Components/Loaders/FullScreenSpinner.vue'
-import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useUserStore } from '@/stores/user'
-import { useMediaLibraryStore } from '@/stores/media-library'
-
-const mediaLibraryStore = useMediaLibraryStore()
-const pageBuilderStateStore = usePageBuilderStateStore()
-const userStore = useUserStore()
-const openPageBuilder = ref(false)
-
-const pageBuilderPrimaryHandler = ref(null)
-const pageBuilderSecondaryHandler = ref(null)
-const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
-const formType = ref('create')
-
-const getIsLoading = computed(() => {
-  return userStore.getIsLoading
-})
-
-const pathPageBuilderStorageCreate = `page-builder-create-post`
-const pathPageBuilderStorageUpdate = `page-builder-update-post-id-1`
-
-const handlePageBuilder = async function () {
-  userStore.setIsLoading(true)
-
-  await nextTick()
-  openPageBuilder.value = true
-
-  if (formType.value === 'create') {
-    pageBuilderStateStore.setComponents([])
-    pageBuilder.areComponentsStoredInLocalStorage()
-  }
-
-  // handle click
-  pageBuilderPrimaryHandler.value = async function () {
-    userStore.setIsLoading(true)
-
-    if (formType.value === 'update') {
-      await nextTick()
-      pageBuilder.saveComponentsLocalStorageUpdate()
-    }
-
-    openPageBuilder.value = false
-    userStore.setIsLoading(false)
-  }
-
-  // handle click
-  pageBuilderSecondaryHandler.value = async function () {
-    userStore.setIsLoading(true)
-
-    // save to local storage if new resource
-    if (formType.value === 'create') {
-      await nextTick()
-      pageBuilder.saveComponentsLocalStorage()
-      await nextTick()
-    }
-    // save to local storage if update
-    if (formType.value === 'update') {
-      await nextTick()
-      pageBuilder.synchronizeDOMAndComponents()
-      await nextTick()
-    }
-
-    openPageBuilder.value = false
-
-    userStore.setIsLoading(false)
-  }
-
-  userStore.setIsLoading(false)
-
-  // end modal
-}
-// Builder # End
-const handleDraftForUpdate = async function () {
-  userStore.setIsLoading(true)
-
-  if (formType.value === 'update') {
-    await nextTick()
-    pageBuilder.areComponentsStoredInLocalStorageUpdate()
-    await nextTick()
-    pageBuilder.setEventListenersForElements()
-
-    userStore.setIsLoading(false)
-  }
-}
-
-onBeforeMount(() => {
-  // Define local storage key name before on mount
-  pageBuilderStateStore.setLocalStorageItemName(pathPageBuilderStorageCreate)
-
-  // Define local storage key name before on mount
-  pageBuilderStateStore.setLocalStorageItemNameUpdate(pathPageBuilderStorageUpdate)
-})
 </script>
 
 <template>
-  <teleport to="body">
-    <FullScreenSpinner v-if="getIsLoading"></FullScreenSpinner>
-  </teleport>
-  <PageBuilderModal
-    :show="openPageBuilder"
-    updateOrCreate="create"
-    @pageBuilderPrimaryHandler="pageBuilderPrimaryHandler"
-    @pageBuilderSecondaryHandler="pageBuilderSecondaryHandler"
-    @handleDraftForUpdate="handleDraftForUpdate"
-  >
-    <PageBuilderView></PageBuilderView>
-  </PageBuilderModal>
-
-  <Navbar @handleButton="handlePageBuilder"></Navbar>
-  <HomeSection @handleButton="handlePageBuilder"></HomeSection>
-
-  <Footer></Footer>
+  <div>
+    <HomeSection></HomeSection>
+    <Footer></Footer>
+  </div>
 </template>

package/src/Components/Homepage/HomeSection.vue

@@ -1,11 +1,12 @@
 <script setup>
-const emit = defineEmits(['handleButton']);
-import FullWidthElement from '@/Components/Layouts/FullWidthElement.vue';
+const emit = defineEmits(['handleButton'])
+import FullWidthElement from '@/Components/Layouts/FullWidthElement.vue'
+import PageBuilder from '@/PageBuilder/PageBuilder.vue'
 
 // first button function
 const handleButton = function () {
-  emit('handleButton');
-};
+  console.log('user want to play with the page builder')
+}
 
 const features = [
   {
@@ -48,7 +49,7 @@ const features = [
     description:
       'Beautiful, elegant and intuitive design. Enhance user engagement with amazing visual experience.',
   },
-];
+]
 </script>
 
 <template>
@@ -56,15 +57,13 @@ const features = [
     <div class="myPrimaryWidthScreenModule bg-red-50 lg:block">
       <div class="myPrimaryContentSection">
         <h2 class="mySecondaryHeader">
-          Bring your vision to life and create impressive pages using a click &
-          drop Page Builder
+          Bring your vision to life and create impressive pages using a click & drop Page Builder
         </h2>
         <p class="myPrimaryParagraph font-normal">
-          The web builder for stunning pages. Enable users to design and publish
-          modern pages at any scale. Build responsive pages like listings, jobs
-          or blog posts and manage content easily using the free click & drop
-          Page Builder. Developed with JavaScript, Vue 3, Composition API,
-          Pinia, CSS, Tailwind CSS and HTML
+          The web builder for stunning pages. Enable users to design and publish modern pages at any
+          scale. Build responsive pages like listings, jobs or blog posts and manage content easily
+          using the free click & drop Page Builder. Developed with JavaScript, Vue 3, Composition
+          API, Pinia, CSS, Tailwind CSS and HTML
           <br />
           <a
             class="text-myPrimaryLinkColor font-medium"
@@ -74,39 +73,31 @@ const features = [
             Go to the GitHub repository
           </a>
           or
-          <span
-            @click="handleButton"
-            class="text-myPrimaryLinkColor font-medium cursor-pointer"
-          >
+          <span @click="handleButton" class="text-myPrimaryLinkColor font-medium cursor-pointer">
             play around with the page builder.
           </span>
         </p>
       </div>
-      <div
-        @click="handleButton"
-        class="myPrimaryContentSection cursor-pointer"
-      >
+      <div>
+        <PageBuilder
+          PageBuilderLogo="/logo/logo.svg"
+          updateOrCreate="update"
+          :userForPageBuilder="{ name: 'John Doe' }"
+          :resourceData="{ title: 'Demo Article', id: 1 }"
+        ></PageBuilder>
+      </div>
+      <div @click="handleButton" class="myPrimaryContentSection cursor-pointer">
         <div
           class="relative overflow-hidden bg-cover bg-no-repeat grid grid-cols-12 h-[68rem] rounded-2xl shadow-sm outline outline-2 outline-offset-4 outline-myPrimaryLinkColor hover:outline-myPrimaryLinkColor/50"
           style="background-image: url('/home/page-builder-example.jpg')"
         >
-          <div
-            class="col-span-12 px-4 top-0 h-[4rem] w-full border-b border-gray-200"
-          >
+          <div class="col-span-12 px-4 top-0 h-[4rem] w-full border-b border-gray-200">
             <div class="flex items-center justify-between h-full">
-              <div
-                class="lg:flex hidden items-center justify-end myPrimaryGap h-full"
-              >
+              <div class="lg:flex hidden items-center justify-end myPrimaryGap h-full">
                 <div class="flex gap-2">
-                  <span
-                    class="w-2 h-2 rounded-full bg-red-400 hover:bg-red-600"
-                  ></span
-                  ><span
-                    class="w-2 h-2 rounded-full bg-yellow-400 hover:bg-yellow-600"
-                  ></span
-                  ><span
-                    class="w-2 h-2 rounded-full bg-green-400 hover:bg-green-600"
-                  ></span>
+                  <span class="w-2 h-2 rounded-full bg-red-400 hover:bg-red-600"></span
+                  ><span class="w-2 h-2 rounded-full bg-yellow-400 hover:bg-yellow-600"></span
+                  ><span class="w-2 h-2 rounded-full bg-green-400 hover:bg-green-600"></span>
                 </div>
               </div>
               <div class="flex justify-center items-center gap-2">
@@ -145,18 +136,12 @@ const features = [
                   <span class="material-symbols-outlined"> visibility </span>
                 </div>
                 <div class="lg:flex hidden justify-center items-center gap-2">
-                  <p
-                    class="myPrimaryParagraph text-[12px] text-white font-medium"
-                  >
-                    Page Builder
-                  </p>
+                  <p class="myPrimaryParagraph text-[12px] text-white font-medium">Page Builder</p>
                 </div>
               </div>
             </div>
           </div>
-          <div
-            class="lg:col-span-9 col-span-5 top-0 w-full h-[64rem] rounded-l-2xl"
-          >
+          <div class="lg:col-span-9 col-span-5 top-0 w-full h-[64rem] rounded-l-2xl">
             <div class="flex items-center justify-between">
               <div
                 class="w-[4rem] bg-red-100 bg-opacity-50 hover:bg-opacity-40 h-[40rem] rounded-full pt-8 ml-2"
@@ -165,9 +150,7 @@ const features = [
                   <div
                     class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
                   >
-                    <span class="material-symbols-outlined">
-                      arrow_selector_tool
-                    </span>
+                    <span class="material-symbols-outlined"> arrow_selector_tool </span>
                   </div>
                   <div
                     class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
@@ -186,12 +169,8 @@ const features = [
                   </div>
                 </div>
               </div>
-              <div
-                class="flex items-center justify-center w-full h-[64rem] pt-2 pr-8"
-              >
-                <div
-                  class="lg:flex hidden items-center w-full h-full justify-end"
-                >
+              <div class="flex items-center justify-center w-full h-[64rem] pt-2 pr-8">
+                <div class="lg:flex hidden items-center w-full h-full justify-end">
                   <div class="flex flex-col gap-2">
                     <div
                       class="w-[22rem] rounded-2xl hover:bg-opacity-80 flex flex-col justify-between top-0"
@@ -205,39 +184,29 @@ const features = [
                         <div
                           class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
                         >
-                          <span class="material-symbols-outlined text-[20px]">
-                            edit
-                          </span>
+                          <span class="material-symbols-outlined text-[20px]"> edit </span>
                         </div>
                         <div
                           class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
                         >
-                          <span class="material-symbols-outlined text-[20px]">
-                            add
-                          </span>
+                          <span class="material-symbols-outlined text-[20px]"> add </span>
                         </div>
                         <div
                           class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryErrorColor hover:text-white focus-visible:ring-0"
                         >
-                          <span class="material-symbols-outlined text-[20px]">
-                            delete
-                          </span>
+                          <span class="material-symbols-outlined text-[20px]"> delete </span>
                         </div>
                       </div>
                     </div>
-                    <div
-                      class="lg:flex hidden items-center w-full h-full justify-end"
-                    >
+                    <div class="lg:flex hidden items-center w-full h-full justify-end">
                       <div
                         class="w-[22rem] h-[10rem] rounded-2xl bg-gray-200 bg-opacity-90 hover:bg-opacity-80 py-8 flex flex-col justify-between top-0"
                       >
                         <div
                           class="py-2 flex justify-between gap-4 px-4 bg-gray-400 rounded-full mx-6 bg-opacity-30"
                         >
-                          <span class="material-symbols-outlined text-[20px]">
-                            format_bold </span
-                          ><span class="material-symbols-outlined text-[20px]">
-                            format_italic </span
+                          <span class="material-symbols-outlined text-[20px]"> format_bold </span
+                          ><span class="material-symbols-outlined text-[20px]"> format_italic </span
                           ><span class="material-symbols-outlined text-[20px]">
                             format_color_text </span
                           ><span class="material-symbols-outlined text-[20px]">
@@ -247,15 +216,11 @@ const features = [
                         <div
                           class="py-2 flex justify-between gap-4 px-4 bg-gray-400 rounded-full mx-6 bg-opacity-30"
                         >
-                          <span class="material-symbols-outlined text-[20px]">
-                            format_shapes </span
+                          <span class="material-symbols-outlined text-[20px]"> format_shapes </span
                           ><span class="material-symbols-outlined text-[20px]">
                             add_photo_alternate </span
-                          ><span class="material-symbols-outlined text-[20px]">
-                            colors </span
-                          ><span class="material-symbols-outlined text-[20px]">
-                            attach_file
-                          </span>
+                          ><span class="material-symbols-outlined text-[20px]"> colors </span
+                          ><span class="material-symbols-outlined text-[20px]"> attach_file </span>
                         </div>
                       </div>
                     </div>
@@ -275,14 +240,10 @@ const features = [
                 </p>
               </div>
               <div class="my-8">
-                <p class="myPrimaryParagraph text-sm font-medium pb-3">
-                  Filters
-                </p>
+                <p class="myPrimaryParagraph text-sm font-medium pb-3">Filters</p>
                 <div class="flex flex-col myPrimaryGap">
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Blur
-                    </div>
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Blur</div>
                     <div
                       class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
                     >
@@ -294,14 +255,10 @@ const features = [
               </div>
               <div class="w-full border-t border-gray-300"></div>
               <div class="my-8">
-                <p class="myPrimaryParagraph text-sm font-medium pb-3">
-                  Borders
-                </p>
+                <p class="myPrimaryParagraph text-sm font-medium pb-3">Borders</p>
                 <div class="flex flex-col myPrimaryGap">
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Radius
-                    </div>
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Radius</div>
                     <div
                       class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
                     >
@@ -310,9 +267,7 @@ const features = [
                     </div>
                   </div>
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Width
-                    </div>
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Width</div>
                     <div
                       class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
                     >
@@ -324,14 +279,10 @@ const features = [
               </div>
               <div class="w-full border-t border-gray-300"></div>
               <div class="my-4">
-                <p class="myPrimaryParagraph text-sm font-medium pb-3">
-                  Typography
-                </p>
+                <p class="myPrimaryParagraph text-sm font-medium pb-3">Typography</p>
                 <div class="flex flex-col myPrimaryGap">
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Font Family
-                    </div>
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Font Family</div>
                     <div
                       class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
                     >
@@ -346,16 +297,12 @@ const features = [
                 <p class="myPrimaryParagraph text-sm font-medium pb-3">Video</p>
                 <div class="flex flex-col myPrimaryGap">
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Add Video
-                    </div>
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Add Video</div>
                     <div class="flex justify-end w-full">
                       <div
                         class="shadow h-8 w-14 rounded-lg flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
                       >
-                        <span class="material-symbols-outlined">
-                          play_arrow
-                        </span>
+                        <span class="material-symbols-outlined"> play_arrow </span>
                       </div>
                     </div>
                   </div>
@@ -363,17 +310,11 @@ const features = [
               </div>
               <div class="w-full border-t border-gray-300"></div>
               <div class="my-8">
-                <p class="myPrimaryParagraph text-sm font-medium pb-3">
-                  Customization
-                </p>
+                <p class="myPrimaryParagraph text-sm font-medium pb-3">Customization</p>
                 <div class="flex flex-col myPrimaryGap">
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Shadow
-                    </div>
-                    <div
-                      class="myPrimaryParagraph text-xs font-medium flex justify-end w-full"
-                    >
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Shadow</div>
+                    <div class="myPrimaryParagraph text-xs font-medium flex justify-end w-full">
                       <div
                         class="pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 ring-inset transition duration-200 ease-in-out bg-myPrimaryLinkColor ring-black/20"
                       >
@@ -384,9 +325,7 @@ const features = [
                     </div>
                   </div>
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Sepia
-                    </div>
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Sepia</div>
                     <div
                       class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
                     >
@@ -398,14 +337,10 @@ const features = [
               </div>
               <div class="w-full border-t border-gray-300"></div>
               <div class="my-8">
-                <p class="myPrimaryParagraph text-sm font-medium pb-3">
-                  Spacing
-                </p>
+                <p class="myPrimaryParagraph text-sm font-medium pb-3">Spacing</p>
                 <div class="flex flex-col myPrimaryGap">
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Padding
-                    </div>
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Padding</div>
                     <div
                       class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
                     >
@@ -414,9 +349,7 @@ const features = [
                     </div>
                   </div>
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Margin
-                    </div>
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Margin</div>
                     <div
                       class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
                     >
@@ -428,14 +361,10 @@ const features = [
               </div>
               <div class="w-full border-t border-gray-300"></div>
               <div class="my-8">
-                <p class="myPrimaryParagraph text-sm font-medium pb-3">
-                  Backgrounds
-                </p>
+                <p class="myPrimaryParagraph text-sm font-medium pb-3">Backgrounds</p>
                 <div class="flex flex-col myPrimaryGap">
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Color
-                    </div>
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Color</div>
                     <div
                       class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
                     >
@@ -444,9 +373,7 @@ const features = [
                     </div>
                   </div>
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Size
-                    </div>
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Size</div>
                     <div
                       class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
                     >
@@ -458,21 +385,15 @@ const features = [
               </div>
               <div class="w-full border-t border-gray-300"></div>
               <div class="my-8">
-                <p class="myPrimaryParagraph text-sm font-medium pb-3">
-                  Settings
-                </p>
+                <p class="myPrimaryParagraph text-sm font-medium pb-3">Settings</p>
                 <div class="flex flex-col myPrimaryGap">
                   <div class="flex items-center justify-start gap-6">
-                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">
-                      Download
-                    </div>
+                    <div class="myPrimaryParagraph text-xs font-medium w-1/3">Download</div>
                     <div class="flex justify-end w-full">
                       <div
                         class="shadow h-8 w-14 rounded-lg flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
                       >
-                        <span class="material-symbols-outlined">
-                          cloud_download
-                        </span>
+                        <span class="material-symbols-outlined"> cloud_download </span>
                       </div>
                     </div>
                   </div>
@@ -484,19 +405,13 @@ const features = [
       </div>
     </div>
 
-    <FullWidthElement
-      :descriptionArea="true"
-      class="bg-gray-50"
-    >
-      <template #title
-        >Everything you need. Break free from design limitations
-      </template>
+    <FullWidthElement :descriptionArea="true" class="bg-gray-50">
+      <template #title>Everything you need. Break free from design limitations </template>
       <template #description>
         <p class="myPrimaryParagraph font-normal">
-          A Page Builder designed for growth. Build your website pages with
-          ready-made components that are fully customizable and always
-          responsive, designed to fit every need. A powerful Page Builder for
-          growing merchants, brands, and agencies.
+          A Page Builder designed for growth. Build your website pages with ready-made components
+          that are fully customizable and always responsive, designed to fit every need. A powerful
+          Page Builder for growing merchants, brands, and agencies.
           <br />
           <a
             class="text-myPrimaryLinkColor font-medium"
@@ -506,26 +421,19 @@ const features = [
             Go to the GitHub repository
           </a>
           or
-          <span
-            @click="handleButton"
-            class="text-myPrimaryLinkColor font-medium cursor-pointer"
-          >
+          <span @click="handleButton" class="text-myPrimaryLinkColor font-medium cursor-pointer">
             play around with the page builder.
           </span>
         </p>
       </template>
       <template #content>
-        <div
-          class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 mt-8"
-        >
+        <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 mt-8">
           <div
             v-for="feature in features"
             :key="feature.name"
             class="bg-red-200 bg-opacity-20 hover:bg-opacity-10 w-full lg:min-h-[20rem] min-h-[12rem] relative col-span-1 flex flex-col text-center rounded-lg shadow-sm outline outline-2 outline-offset-8 outline-yellow-400"
           >
-            <div
-              class="bg-black/0 absolute top-0 left-0 w-full h-full rounded-lg"
-            ></div>
+            <div class="bg-black/0 absolute top-0 left-0 w-full h-full rounded-lg"></div>
             <div class="px-2 pt-8 absolute top-0 w-full">
               <p class="myTertiaryHeader">{{ feature.name }}</p>
               <p class="myPrimaryParagraph font-medium drop-shadow-sm">

package/src/Components/MediaLibrary/SidebarUnsplash.vue

@@ -1,35 +1,28 @@
 <script setup>
-import { computed } from 'vue';
-import { useMediaLibraryStore } from '@/stores/media-library';
+import { ref, computed, onMounted, inject } from 'vue'
 
-const mediaLibraryStore = useMediaLibraryStore();
+// Get stores from parent PageBuilder component
+const mediaLibraryStore = inject('mediaLibraryStore')
 
 const getCurrentImage = computed(() => {
-  return mediaLibraryStore.getCurrentImage;
-});
+  return mediaLibraryStore.getCurrentImage
+})
 </script>
 
 <template>
   <!-- Loading # end -->
-  <div
-    v-if="getCurrentImage && getCurrentImage.file"
-    class="pb-6 space-y-6"
-  >
+  <div v-if="getCurrentImage && getCurrentImage.src" class="pb-6 space-y-6">
     <img
       class="mx-auto block w-full object-cover object-center cursor-pointer"
-      :src="`${getCurrentImage.file}`"
+      :src="`${getCurrentImage.src}`"
       alt="file"
     />
 
     <div class="md:px-3 px-2">
       <div>
         <h3 class="font-normal text-gray-900">Information</h3>
-        <dl
-          class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200"
-        >
-          <div
-            class="py-3 flex justify-between text-sm font-normal items-center"
-          >
+        <dl class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
+          <div class="py-3 flex justify-between text-sm font-normal items-center">
             <dt class="text-gray-500">From</dt>
             <dd class="text-gray-900">Unsplash</dd>
           </div>