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

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/PageBuilder/PageBuilder.vue

@@ -5,7 +5,7 @@ import PageBuilderPreviewModal from '../Components/Modals/PageBuilderPreviewModa
 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 BuilderComponents from '../Components/Modals/BuilderComponents.vue'
 import OptionsDropdown from '../Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue'
 import RightSidebarEditor from '../Components/PageBuilder/EditorMenu/RightSidebarEditor.vue'
 import { sharedPageBuilderPinia, sharedPageBuilderStore } from '../stores/shared-store'
@@ -239,14 +239,14 @@ onMounted(async () => {
       </div>
     </div>
     <!-- Logo # end -->
-    <SearchComponents
+    <BuilderComponents
       v-if="showModalAddComponent"
       :show="showModalAddComponent"
       :firstButtonText="firstButtonTextSearchComponents"
       :title="titleModalAddComponent"
       :CustomBuilderComponents="props.CustomBuilderComponents"
       @firstModalButtonSearchComponentsFunction="firstModalButtonSearchComponentsFunction"
-    ></SearchComponents>
+    ></BuilderComponents>
     <PageBuilderPreviewModal
       :show="openPageBuilderPreviewModal"
       @firstPageBuilderPreviewModalButton="firstPageBuilderPreviewModalButton"

package/src/composables/PageBuilderClass.ts

@@ -1628,6 +1628,8 @@ class PageBuilderClass {
         savedCurrentDesign = parsedData
       }
 
+      console.log('okokoko:', savedCurrentDesign)
+
       this.pageBuilderStateStore.setComponents(savedCurrentDesign)
     } catch (error) {
       console.error('Error parsing JSON components:', error)
@@ -1653,8 +1655,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 +1668,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)
       }

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

@@ -1,3 +0,0 @@
-<template>
-  <div>NoneCustomMediaLibraryComponent here for the page builder to add media if needed</div>
-</template>