@myissue/vue-website-page-builder 3.2.20 → 3.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.2.20",
+  "version": "v3.2.22",
   "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 Navbar from './Components/Homepage/Navbar.vue'
-import HomeSection from './Components/Homepage/HomeSection.vue'
+import HomeSection from './DemoComponents/HomeSection.vue'
 import Footer from './Components/Homepage/Footer.vue'
 </script>
 

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

@@ -174,7 +174,7 @@ const updateCurrentTab = function (tab) {
 
                   <p class="whitespace-pre-line leading-5 mt-4">
                     Component Title:
-                    {{ getComponent?.title }}
+                    {{ component?.title }}
                   </p>
                   <p class="whitespace-pre-line leading-5 mt-4">
                     Component HTML:<br />

package/src/{Components/PageBuilder/DemoComponent → DemoComponents}/DemoUnsplash.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 const unsplashKey = import.meta.env.VITE_UNSPLASH_KEY
-import { usePageBuilderModal } from '../../../composables/usePageBuilderModal'
-import PageBuilderClass from '../../../composables/PageBuilderClass.ts'
-import { sharedPageBuilderStore } from '../../../stores/shared-store'
+import { usePageBuilderModal } from '../composables/usePageBuilderModal'
+import PageBuilderClass from '../composables/PageBuilderClass.ts'
+import { sharedPageBuilderStore } from '../stores/shared-store'
 
 const { closeMediaLibraryModal } = usePageBuilderModal()
 
@@ -87,8 +87,6 @@ const nextPage = async function () {
 }
 
 const applySelectedImage = async function (imageURL) {
-  console.log('file:', imageURL)
-
   // Ensure the current image is set in the store with proper structure
   pageBuilderClass.pageBuilderStateStore.setCurrentImage({
     src: `${imageURL}`,
@@ -263,11 +261,11 @@ onMounted(async () => {
                 v-for="image in getUnsplashImages.results"
                 :key="image.id"
                 @click="handleImageClick({ url: image.urls.regular, user: image.user.name })"
-                class="border border-myPrimaryLightGrayColor rounded-lg px-2 p-2 cursor-pointer bg-gray-50"
+                class="border border-gray-200 my-2 px-2 p-2 cursor-pointer"
               >
                 <img
                   :alt="image.user.name"
-                  class="group block w-full overflow-hidden rounded-lg cursor-pointer"
+                  class="group block w-full overflow-hidden cursor-pointer"
                   :src="image.urls.thumb"
                 />
                 <p class="myPrimaryParagraph text-xs font-normal mt-2">By: {{ image.user.name }}</p>

package/src/{Components/Homepage → DemoComponents}/HomeSection.vue

@@ -1,16 +1,24 @@
 <script setup>
-import FullWidthElement from '../../Components/Layouts/FullWidthElement.vue'
-import PageBuilder from '../../PageBuilder/PageBuilder.vue'
-import PageBuilderClass from '../../composables/PageBuilderClass.ts'
-import { sharedPageBuilderStore } from '../../stores/shared-store'
+import FullWidthElement from '../Components/Layouts/FullWidthElement.vue'
+import PageBuilder from '../PageBuilder/PageBuilder.vue'
+import PageBuilderClass from '../composables/PageBuilderClass.ts'
 
-import DemoMediaLibraryComponent from '../../Components/PageBuilder/DemoComponent/DemoMediaLibraryComponent.vue'
-import DemoBuilderComponents from '../../Components/PageBuilder/DemoComponent/DemoBuilderComponents.vue'
+import DemoMediaLibraryComponent from './DemoMediaLibraryComponent.vue'
+import DemoBuilderComponents from './DemoBuilderComponents.vue'
+import { computed, onMounted } from 'vue'
+import { sharedPageBuilderStore } from '../stores/shared-store'
+import html from './html.json'
 
-// first button function
-const handleButton = function () {
-  console.log('user want to play with the page builder')
-}
+const pageBuilderStateStore = sharedPageBuilderStore
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
+
+const getLocalStorageItemName = computed(() => {
+  return pageBuilderStateStore.getLocalStorageItemName
+})
+
+const getComponents = computed(() => {
+  return pageBuilderStateStore.getComponents
+})
 
 const features = [
   {
@@ -80,9 +88,14 @@ const configPageBuilder = {
   },
 }
 
-const pageBuilderStateStore = sharedPageBuilderStore
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 pageBuilderClass.setConfigPageBuilder(configPageBuilder)
+
+onMounted(async () => {
+  if (localStorage.getItem(getLocalStorageItemName.value)) {
+  } else {
+    pageBuilderClass.loadExistingContent(JSON.stringify(html), true)
+  }
+})
 </script>
 
 <template>
@@ -103,19 +116,13 @@ pageBuilderClass.setConfigPageBuilder(configPageBuilder)
             href="https://github.com/qaiswardag/vue-website-page-builder"
             target="_blank"
           >
-            Go to the GitHub repository
+            Go to the GitHub repository.
           </a>
-          or
-          <span @click="handleButton" class="text-myPrimaryLinkColor font-medium cursor-pointer">
-            play around with the page builder.
-          </span>
         </p>
       </div>
       <div>
-        <PageBuilder
-          :CustomMediaLibraryComponent="DemoMediaLibraryComponent"
-          :CustomBuilderComponents="DemoBuilderComponents"
-        ></PageBuilder>
+        <!--   :CustomBuilderComponents="DemoBuilderComponents" -->
+        <PageBuilder :CustomMediaLibraryComponent="DemoMediaLibraryComponent"></PageBuilder>
       </div>
     </div>
 
@@ -132,12 +139,8 @@ pageBuilderClass.setConfigPageBuilder(configPageBuilder)
             href="https://github.com/qaiswardag/vue-website-page-builder"
             target="_blank"
           >
-            Go to the GitHub repository
+            Go to the GitHub repository.
           </a>
-          or
-          <span @click="handleButton" class="text-myPrimaryLinkColor font-medium cursor-pointer">
-            play around with the page builder.
-          </span>
         </p>
       </template>
       <template #content>

package/src/DemoComponents/html.json

@@ -0,0 +1,47 @@
+[
+  {
+    "html_code": "<section data-componentid=\"0bc7406f-472e-4889-85fc-8ef3c263ac5e\"><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h2><strong>Demo Content</strong></h2></div></div></div></section>",
+    "id": "0bc7406f-472e-4889-85fc-8ef3c263ac5e",
+    "title": "Header H2"
+  },
+  {
+    "html_code": "<section data-componentid=\"44244178-e183-4439-8150-6a2fdb2dfb72\">\n    <div class=\"relative py-4\">\n    <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n    <div><p>Introducing the The Lightweight Free Vue Click &amp; Drop Page Builder create and enhance digital experiences with Vue. Lightweight &amp; Minimalist Page Builder with an elegant and intuitive design, focused on simplicity and speed. Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click &amp; Drop Page Builder.</p></div>\n    </div>\n    </div>\n    </section>",
+    "id": "44244178-e183-4439-8150-6a2fdb2dfb72",
+    "title": "Text"
+  },
+  {
+    "html_code": "<section data-componentid=\"5515d33a-b0ce-4150-b775-2f00cf7118c9\">\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2 bg-black\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-tl-full\" src=\"https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"b2fb2e61-c916-4195-9cd2-c1d25747b4f7\">  </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-full\" src=\"https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"fdf36a14-f7ef-4025-942f-c87b20b18005\">  </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-br-full\" src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"618a74a7-5d41-4dce-937c-130dd7490569\"></div></div> </div></div>\n</section>",
+    "id": "5515d33a-b0ce-4150-b775-2f00cf7118c9",
+    "title": "3 Vertical Images"
+  },
+  {
+    "html_code": "<section data-componentid=\"4a96e0ed-b74c-4d9d-bcdb-aa7dcb794712\"><div class=\"relative py-4\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h3>The web builder for stunning pages</h3></div></div></div></section>",
+    "id": "4a96e0ed-b74c-4d9d-bcdb-aa7dcb794712",
+    "title": "Header H3"
+  },
+  {
+    "html_code": "<section data-componentid=\"79f6665b-9179-448d-ae87-1eddc9d8e5ed\">\n    <div class=\"relative py-4\">\n    <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n    <div><p>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.</p></div>\n    </div>\n    </div>\n    </section>",
+    "id": "79f6665b-9179-448d-ae87-1eddc9d8e5ed",
+    "title": "Text"
+  },
+  {
+    "html_code": "<section data-componentid=\"2310d49a-dda0-48ac-811a-795e48c18d06\">\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"https://images.unsplash.com/photo-1592966719124-2ca2978ba325?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"536340a5-c7e1-479d-a2ae-a85e6dacc2df\">  </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"https://images.unsplash.com/photo-1549298222-1c31e8915347?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080\" alt=\"provider\" data-image=\"41655496-4742-4cc6-bc3c-abe7c2b241fb\">  </div>   </div> </div> </div>\n</section>",
+    "id": "2310d49a-dda0-48ac-811a-795e48c18d06",
+    "title": "2 Vertical Images"
+  },
+  {
+    "html_code": "<section data-componentid=\"7cb6af83-f761-4044-a0cf-d6224fa01cab\"><div class=\"relative py-4\" selected=\"\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h3>Just publish it with Vue</h3></div></div></div></section>",
+    "id": "7cb6af83-f761-4044-a0cf-d6224fa01cab",
+    "title": "Header H3"
+  },
+  {
+    "html_code": "<section data-componentid=\"04c007ed-f4c9-4a63-a38c-4cb2e4c949d6\">\n    <div class=\"relative py-4\">\n    <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n    <div class=\"\"><p>The website builder loved by designers. Easily design, preview, and adjust layouts for every screen size.<br>Clean. Fast. Intuitive. Not everything powerful has to look complicated.</p></div>\n    </div>\n    </div>\n    </section>",
+    "id": "04c007ed-f4c9-4a63-a38c-4cb2e4c949d6",
+    "title": "Text"
+  },
+  {
+    "html_code": "<section data-componentid=\"204ce730-ce82-4a9a-88e6-da431bb76c38\">\n    <div class=\"py-4\">\n    <div class=\"mx-auto max-w-7xl w-full pt-6 pb-6\">\n    <div id=\"youtube-video\" class=\"w-full aspect-video p-4\">\n\n    <iframe frameborder=\"0\" allowfullscreen=\"\" class=\"w-full aspect-video\" src=\"https://www.youtube.com/embed/pJvwV1Fm0vU\" allow=\"accelerometer; autoplay; clipboard-write;\">\n    </iframe>\n    </div>\n    </div>\n    </div>\n    </section>",
+    "id": "204ce730-ce82-4a9a-88e6-da431bb76c38",
+    "title": "YouTube Video"
+  }
+]

package/src/composables/PageBuilderClass.ts

@@ -1653,8 +1653,7 @@ class PageBuilderClass {
         extractedSections.push({
           html_code: htmlElement.outerHTML,
           id: htmlElement.dataset.componentid || null,
-          title:
-            htmlElement.dataset.title || htmlElement.dataset.componentid || 'Untitled Component',
+          title: htmlElement.title || htmlElement.dataset.componentid || 'Untitled Component',
         })
       })
 
@@ -1667,15 +1666,20 @@ class PageBuilderClass {
   }
 
   // Load existing content from HTML when in update mode
-  loadExistingContent(data?: string): void {
+  loadExistingContent(data?: string, injectCustomHTMLSections?: boolean): void {
     if (this.showRunningMethodLogs) {
       console.log('loadExistingContent')
     }
 
     if (!this.pageBuilderStateStore.getConfigPageBuilder) return
 
+    if (injectCustomHTMLSections && data !== undefined) {
+      this.setComponentsFromData(data)
+    }
+
+    const storedData = this.areComponentsStoredInLocalStorage()
+
     if (this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formType === 'create') {
-      const storedData = this.areComponentsStoredInLocalStorage()
       if (storedData) {
         this.setComponentsFromData(storedData)
       }