Feature/new default components 1 (#82)

* Bump version to 3.4.11

* Fix/UI ux minor issues 12: Enhance theme selection functionality and improve component layout

* Fix/UI ux minor issues 13: Rearrange theme selection template for improved clarity

* Fix/UI ux minor issues 14: Refactor theme selection logic and enhance theme display functionality

* Add theme management functionality and new theme components

* Add demo GIF to README for enhanced visual representation

* Replace demo GIF in README with updated version for improved visual representation

* Refactor addTheme method to use mountComponentsToDOM for improved component handling

* Refactor CSS styles for improved readability and consistency in page builder editor

* Add new components for product display and blog post themes

* Refactor SVG cover images and HTML structure in component and themes files

- Updated SVG graphics for cover images in component.ts to enhance visual quality and consistency.
- Modified HTML structure for various components in themes.ts to improve layout and responsiveness.
- Ensured placeholder images are dynamically generated using getPlaceholderImageDataUrl function.

Author: qaiswardag

README.md

@@ -65,6 +65,8 @@ Create and enhance digital experiences with Vue on any backend.
 Experience the power and simplicity of the Vue Website Page Builder in action.
 Try the live demo to explore real-time visual updates and smooth content management.
 
+<img style="width: 100%;" src="./public/home/for_read_me/vue3_page_builder_myissue.gif" alt="Vue Website Page Builder - the editor" />
+
 [Play around with the Page Builder](https://mybuilder.dev)
 
 ## Overview

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.4.10",
+  "version": "3.4.11",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

public/home/for_read_me/vue3_page_builder_myissue.gif

@@ -440,10 +440,6 @@
   width: 100%;
   cursor: pointer;
 }
-#page-builder-editor strong,
-#pagebuilder strong {
-  font-weight: 500;
-}
 
 .pbx-reorder-highlight {
   animation: pbx-reorder-flash 0.4s ease-in-out;
@@ -520,18 +516,9 @@
 #page-builder-editor ul,
 #pagebuilder ul {
   list-style: disc !important;
-  padding: 1rem 0 0 1rem;
+  padding: 1rem 0 0 1.4rem;
   margin-left: 1em;
-  line-height: 1.2;
-}
-
-#page-builder-editor ol,
-#page-builder-editor-editable-area ol,
-#page-builder-editor ul,
-#page-builder-editor-editable-area ul {
-  list-style: disc !important;
-  padding: 1rem 0 0 1rem;
-  line-height: 1.2;
+  line-height: 2rem;
 }
 
 .pbx-headless-dropdown {
@@ -593,9 +580,15 @@
   color: inherit;
   text-decoration: none;
 }
+
+#page-builder-editor strong,
+#pagebuilder strong {
+  font: inherit;
+  font-weight: 500;
+}
+
 #pagebuilder code,
 #pagebuilder pre,
-#pagebuilder strong,
 #pagebuilder em {
   font: inherit;
   font-weight: inherit;

src/css/style.css

@@ -2444,6 +2444,17 @@ export class PageBuilderService {
     this.addHyperlinkToElement(hyperlinkEnable, urlInput || null, openHyperlinkInNewTab || false)
   }
 
+  public async addTheme(components: string): Promise<void> {
+    try {
+      if (components) {
+        await this.mountComponentsToDOM(components)
+      }
+      await this.handleAutoSave()
+    } catch (error) {
+      console.error('Error adding component:', error)
+    }
+  }
+
   /**
    * Adds a new component to the page builder.
    * @param {ComponentObject} componentObject - The component to add.

src/services/PageBuilderService.ts

@@ -2,6 +2,7 @@
 import { ref, computed } from 'vue'
 import componentHelpers from '../../utils/html-elements/componentHelpers'
 import components from '../../utils/html-elements/component'
+import themes from '../../utils/html-elements/themes'
 import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
 import type { ComponentObject } from '../../types'
 import { getPageBuilder } from '../../composables/builderInstance'
@@ -20,6 +21,9 @@ defineProps({
 
 const isLoading = ref(false)
 
+const selectedThemeSelection = ref('Components')
+
+const componentOrThemes = ['Components', 'Themes']
 const selectedCategory = ref('All')
 
 const categories = computed(() => {
@@ -34,9 +38,32 @@ const filteredComponents = computed(() => {
   return components[0].components.data.filter((comp) => comp.category === selectedCategory.value)
 })
 
+const selectedThemeCategory = ref('All')
+
+const themeCategories = computed(() => {
+  const allCategories = themes[0].themes.data.map((comp) => comp.category)
+  return ['All', ...new Set(allCategories)]
+})
+
+const filteredThemes = computed(() => {
+  if (selectedThemeCategory.value === 'All') {
+    return themes[0].themes.data
+  }
+  return themes[0].themes.data.filter((comp) => comp.category === selectedThemeCategory.value)
+})
+
 // Get modal close function
 const { closeAddComponentModal } = usePageBuilderModal()
 
+// Super simple component addition with professional modal closing!
+const handleDropTheme = async function (components: string) {
+  isLoading.value = true
+
+  await pageBuilderService.addTheme(components)
+  closeAddComponentModal()
+  isLoading.value = false
+}
+
 // Super simple component addition with professional modal closing!
 const handleDropComponent = async function (componentObject: ComponentObject) {
   isLoading.value = true
@@ -104,81 +131,151 @@ const convertToComponentObject = function (comp: any): ComponentObject {
       </div>
     </template>
     <div v-if="!isLoading">
-      <!-- Helper Components Section -->
-      <div class="pbx-mb-8">
-        <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Helper Components') }}</h3>
-        <div
-          class="pbx-px-2 pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
+      <div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
+        <button
+          v-for="category in componentOrThemes"
+          :key="category"
+          @click="selectedThemeSelection = category"
+          class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
+          :class="[
+            selectedThemeSelection === category
+              ? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
+              : 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
+          ]"
         >
+          {{ translate(category) }}
+        </button>
+      </div>
+
+      <!-- theme is selected start -->
+      <template v-if="selectedThemeSelection === 'Themes'">
+        <div class="pbx-mb-8">
+          <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Themes') }}</h3>
+          <div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
+            <button
+              v-for="category in themeCategories"
+              :key="category"
+              @click="selectedThemeCategory = category"
+              class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
+              :class="[
+                selectedThemeCategory === category
+                  ? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
+                  : 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
+              ]"
+            >
+              {{ translate(category) }}
+            </button>
+          </div>
+
           <div
-            v-for="helper in componentHelpers"
-            :key="helper.title"
-            class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
-            @click="handleDropComponent(helper)"
+            class="pbx-px-2 pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
           >
             <div
-              class="pbx-max-h-72 pbx-cursor-pointer pbx-object-contain pbx-bg-white pbx-mx-auto"
+              v-for="theme in filteredThemes"
+              :key="theme.title"
+              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
+              @click="handleDropTheme(theme.html_code)"
             >
-              <div v-if="false" class="pbx-mr-2" v-html="helper.icon"></div>
-              <h4 class="pbx-myPrimaryParagraph pbx-text-base pbx-font-medium">
-                {{ translate(helper.title) }}
-              </h4>
-            </div>
-            <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
-              {{ translate('Click to add') }} {{ helper.title.toLowerCase() }}
-              {{ translate('component') }}
+              <div
+                class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
+              >
+                <!-- Use SVG preview instead of external images -->
+                <div
+                  class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
+                  v-html="theme.cover_image"
+                ></div>
+              </div>
+              <div class="pbx-p-3">
+                <h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">
+                  {{ translate(theme.title) }}
+                </h4>
+                <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
+                  {{ translate('Click to add theme') }}
+                </div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </template>
+      <!-- theme is selected end -->
 
-      <!-- Regular Components Section -->
-      <div class="pbx-px-2" v-if="customMediaComponent">
-        <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Layout Components') }}</h3>
-        <div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
-          <button
-            v-for="category in categories"
-            :key="category"
-            @click="selectedCategory = category"
-            class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
-            :class="[
-              selectedCategory === category
-                ? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
-                : 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
-            ]"
+      <template v-if="selectedThemeSelection === 'Components'">
+        <!-- Helper Components Section -->
+        <div class="pbx-mb-8">
+          <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Helper Components') }}</h3>
+          <div
+            class="pbx-px-2 pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
           >
-            {{ translate(category) }}
-          </button>
+            <div
+              v-for="helper in componentHelpers"
+              :key="helper.title"
+              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
+              @click="handleDropComponent(helper)"
+            >
+              <div
+                class="pbx-max-h-72 pbx-cursor-pointer pbx-object-contain pbx-bg-white pbx-mx-auto"
+              >
+                <div v-if="false" class="pbx-mr-2" v-html="helper.icon"></div>
+                <h4 class="pbx-myPrimaryParagraph pbx-text-base pbx-font-medium">
+                  {{ translate(helper.title) }}
+                </h4>
+              </div>
+              <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
+                {{ translate('Click to add') }} {{ helper.title.toLowerCase() }}
+                {{ translate('component') }}
+              </div>
+            </div>
+          </div>
         </div>
-        <div
-          class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4 pbx-pb-4"
-        >
+
+        <!-- Regular Components Section -->
+        <div class="pbx-px-2" v-if="customMediaComponent">
+          <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Layout Components') }}</h3>
+          <div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
+            <button
+              v-for="category in categories"
+              :key="category"
+              @click="selectedCategory = category"
+              class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
+              :class="[
+                selectedCategory === category
+                  ? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
+                  : 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
+              ]"
+            >
+              {{ translate(category) }}
+            </button>
+          </div>
           <div
-            v-for="comp in filteredComponents"
-            :key="comp.title"
-            class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
-            @click="handleDropComponent(convertToComponentObject(comp))"
+            class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4 pbx-pb-4"
           >
             <div
-              class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
+              v-for="comp in filteredComponents"
+              :key="comp.title"
+              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
+              @click="handleDropComponent(convertToComponentObject(comp))"
             >
-              <!-- Use SVG preview instead of external images -->
               <div
-                class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
-                v-html="comp.cover_image"
-              ></div>
-            </div>
-            <div class="pbx-p-3">
-              <h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">
-                {{ translate(comp.title) }}
-              </h4>
-              <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
-                {{ translate('Click to add component') }}
+                class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
+              >
+                <!-- Use SVG preview instead of external images -->
+                <div
+                  class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
+                  v-html="comp.cover_image"
+                ></div>
+              </div>
+              <div class="pbx-p-3">
+                <h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">
+                  {{ translate(comp.title) }}
+                </h4>
+                <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
+                  {{ translate('Click to add component') }}
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </template>
       <div>
         <button class="pbx-sr-only">Focusable fallback</button>
       </div>