@myissue/vue-website-page-builder 3.4.9 → 3.4.11

package/package.json

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

package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue

@@ -210,8 +210,14 @@ const handleModalIframeSrc = function () {
         <div class="pbx-myInputGroup">
           <div class="pbx-myPrimaryFormOrganizationHeaderDescriptionSection">
             <div class="pbx-myPrimaryFormOrganizationHeader">
-              <label for="video" class="pbx-myPrimaryInputLabel">Video url:</label>
-              <input v-model="iframeSrc" type="text" class="pbx-myPrimaryInput" name="video" />
+              <label for="youtube-video" class="pbx-myPrimaryInputLabel">Video url:</label>
+              <input
+                id="youtube-video"
+                v-model="iframeSrc"
+                type="text"
+                class="pbx-myPrimaryInput"
+                name="video"
+              />
               <div
                 v-if="urlError"
                 class="pbx-min-h-[2.5rem] pbx-flex pbx-items-center pbx-justify-start"

package/src/css/style.css

@@ -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;
@@ -476,6 +472,7 @@
   border-radius: 0.5rem;
   cursor: pointer;
   line-height: 1.5;
+  font-weight: normal;
 }
 
 .pbx-myPrimarySelect {
@@ -519,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 {
@@ -592,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;

package/src/services/PageBuilderService.ts

@@ -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.

package/src/tests/DefaultComponents/DefaultBuilderComponents.vue

@@ -2,11 +2,10 @@
 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 { generateComponentPreview } from '../../utils/componentPreviews'
 import type { ComponentObject } from '../../types'
 import { getPageBuilder } from '../../composables/builderInstance'
-
 import { useTranslations } from '../../composables/useTranslations'
 
 const { translate } = useTranslations()
@@ -22,6 +21,9 @@ defineProps({
 
 const isLoading = ref(false)
 
+const selectedThemeSelection = ref('Components')
+
+const componentOrThemes = ['Components', 'Themes']
 const selectedCategory = ref('All')
 
 const categories = computed(() => {
@@ -36,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
@@ -70,11 +95,6 @@ const convertToComponentObject = function (comp: any): ComponentObject {
     title: comp.title,
   }
 }
-
-// Get SVG preview for component
-const getSvgPreview = (title: string) => {
-  return generateComponentPreview(title)
-}
 </script>
 
 <style scoped>
@@ -111,77 +131,151 @@ const getSvgPreview = (title: string) => {
       </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="{ active: selectedCategory === category }"
+      <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="getSvgPreview(comp.title)"
-              ></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>