@myissue/vue-website-page-builder 3.3.83 → 3.3.85

package/src/{Components/PageBuilder → tests}/DefaultComponents/DefaultBuilderComponents.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import componentHelpers from '../../../utils/html-elements/componentHelpers'
-import components from '../../../utils/html-elements/component'
-import { usePageBuilderModal } from '../../../composables/usePageBuilderModal'
-import { generateComponentPreview } from '../../../utils/componentPreviews'
-import type { ComponentObject } from '../../../types'
-import { getPageBuilder } from '../../../composables/builderInstance'
+import { ref, computed } from 'vue'
+import componentHelpers from '../../utils/html-elements/componentHelpers'
+import components from '../../utils/html-elements/component'
+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'
+import { useTranslations } from '../../composables/useTranslations'
 
 const { translate } = useTranslations()
 
@@ -19,6 +20,20 @@ defineProps({
   },
 })
 
+const selectedCategory = ref('All')
+
+const categories = computed(() => {
+  const allCategories = components[0].components.data.map((comp) => comp.category)
+  return ['All', ...new Set(allCategories)]
+})
+
+const filteredComponents = computed(() => {
+  if (selectedCategory.value === 'All') {
+    return components[0].components.data
+  }
+  return components[0].components.data.filter((comp) => comp.category === selectedCategory.value)
+})
+
 // Get modal close function
 const { closeAddComponentModal } = usePageBuilderModal()
 
@@ -60,6 +75,19 @@ const getSvgPreview = (title: string) => {
 
 <style scoped>
 /* Add any additional styling if needed */
+.category-button {
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  padding: 8px 16px;
+  margin: 4px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.category-button.active {
+  background-color: #007bff;
+  color: white;
+  border-color: #007bff;
+}
 </style>
 
 <template>
@@ -68,7 +96,7 @@ const getSvgPreview = (title: string) => {
     <div class="pbx-mb-8">
       <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Helper Components') }}</h3>
       <div
-        class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
+        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
           v-for="helper in componentHelpers"
@@ -91,11 +119,22 @@ const getSvgPreview = (title: string) => {
     </div>
 
     <!-- Regular Components Section -->
-    <div v-if="customMediaComponent">
+    <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-px-2 pbx-text-xs"
+          :class="{ active: selectedCategory === category }"
+        >
+          {{ translate(category) }}
+        </button>
+      </div>
       <div class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4">
         <div
-          v-for="comp in components[0].components.data"
+          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))"

package/src/tests/TestComponents/DemoMediaLibraryComponentTest.vue

@@ -1,5 +1,5 @@
 <script setup>
-import Unsplash from '../../Components/DemoUnsplash.vue'
+import Unsplash from './DemoUnsplash.vue'
 </script>
 <template>
   <div>

package/src/{Components → tests/TestComponents}/DemoUnsplash.vue

@@ -1,11 +1,11 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 const unsplashKey = import.meta.env.VITE_UNSPLASH_KEY
-import { usePageBuilderModal } from '../composables/usePageBuilderModal'
-import { delay } from '../composables/delay'
-import { preloadImage } from '../composables/preloadImage'
-import { getPageBuilder } from '../composables/builderInstance'
-import { useTranslations } from '../composables/useTranslations'
+import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
+import { delay } from '../../composables/delay'
+import { preloadImage } from '../../composables/preloadImage'
+import { getPageBuilder } from '../../composables/builderInstance'
+import { useTranslations } from '../../composables/useTranslations'
 const { translate } = useTranslations()
 
 const pageBuilderService = getPageBuilder()

package/src/utils/componentPreviews.ts

@@ -145,6 +145,41 @@ export const generateComponentPreview = (title: string): string => {
       `,
     },
 
+    'Four Square Images': {
+      title: 'Four Square Images',
+      svg: `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.34 42.55">
+          <defs>
+            <style>
+              .cls-1 {
+                fill: #394152;
+              }
+
+              .cls-2 {
+                fill: #718096;
+              }
+            </style>
+          </defs>
+          <rect class="cls-1" width="42.55" height="42.55"/>
+          <rect class="cls-1" x="49.05" width="42.55" height="42.55"/>
+          <rect class="cls-1" x="97.35" width="42.55" height="42.55"/>
+          <rect class="cls-1" x="147.79" width="42.55" height="42.55"/>
+          <polygon class="cls-2" points="6.47 27.62 17.04 14.93 27.62 27.62 6.47 27.62"/>
+          <polygon class="cls-2" points="25.5 27.62 30.79 21.28 36.07 27.62 25.5 27.62"/>
+          <circle class="cls-2" cx="30.79" cy="16.69" r="1.76"/>
+          <polygon class="cls-2" points="55.52 27.62 66.09 14.93 76.66 27.62 55.52 27.62"/>
+          <polygon class="cls-2" points="74.55 27.62 79.83 21.28 85.12 27.62 74.55 27.62"/>
+          <circle class="cls-2" cx="79.83" cy="16.69" r="1.76"/>
+          <polygon class="cls-2" points="103.82 27.62 114.39 14.93 124.97 27.62 103.82 27.62"/>
+          <polygon class="cls-2" points="122.85 27.62 128.14 21.28 133.42 27.62 122.85 27.62"/>
+          <circle class="cls-2" cx="128.14" cy="16.69" r="1.76"/>
+          <polygon class="cls-2" points="154.26 27.62 164.83 14.93 175.4 27.62 154.26 27.62"/>
+          <polygon class="cls-2" points="173.29 27.62 178.57 21.28 183.86 27.62 173.29 27.62"/>
+          <circle class="cls-2" cx="178.57" cy="16.69" r="1.76"/>
+        </svg>
+      `,
+    },
+
     'Six Square Images Grid': {
       title: 'Six Square Images Grid',
       svg: `

package/src/utils/html-elements/component.ts

@@ -1,11 +1,10 @@
 import { getPlaceholderImageDataUrl } from '../componentPreviews'
-import { useTranslations } from '../../composables/useTranslations'
-const { translate } = useTranslations()
 
 interface ComponentData {
   title: string
   html_code: string
-  cover_image: string | null // Now optional since we use SVG previews instead of external images
+  cover_image: string | null
+  category: string
 }
 
 interface Components {
@@ -25,46 +24,61 @@ const component: Components[] = [
           title: 'Single Image',
           html_code: `<section>\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-1 sm:grid-cols-1 lg:grid-cols-1"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div></div></div></div>\n</section>`,
           cover_image: null,
+          category: 'Image',
         },
         {
           title: 'Two Vertical Images',
           html_code: `<section>\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] " src="${placeholderImage}" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider">  </div>   </div> </div> </div>\n</section>`,
           cover_image: null,
+          category: 'Image',
         },
         {
           title: 'Two Square Images',
           html_code: `<section>\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-1 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
           cover_image: null,
+          category: 'Image',
         },
         {
           title: 'Three Square Images',
           html_code: `<section>\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-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
           cover_image: null,
+          category: 'Image',
+        },
+        {
+          title: 'Four Square Images',
+          html_code: `<section>\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-4"> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> </div> </div> </div>\n</section>`,
+          cover_image: null,
+          category: 'Image',
         },
         {
           title: 'Six Square Images Grid',
           html_code: `<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div class="grid grid-cols-2 md:grid-cols-3 myPrimaryGap">\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n</div>\n</div>\n</div>\n</section>`,
           cover_image: null,
+          category: 'Image',
         },
         {
           title: 'Two Square Images With Text',
           html_code: `<section>\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">\n<div class="myPrimaryGap lg:flex lg:justify-center"><div class="flex-1 py-2">\n<div class="grid myPrimaryGap grid-cols-1 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider">  </div>   </div> </div>\n\n<div class="flex-1 py-2"> <div class="break-words py-2"><p>Start customizing by editing this default text directly in the editor.</p></div></div> \n</div></div></div>\n</section>`,
           cover_image: null,
+          category: 'Image & Text',
         },
         {
           title: 'Three Vertical Images',
           html_code: `<section>\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-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] " src="${placeholderImage}" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
           cover_image: null,
+          category: 'Image',
         },
         {
           title: 'Four Square Images With Text',
           html_code: `<section>\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-4"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"><div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> </div> </div> </div>\n</section>`,
           cover_image: null,
+          category: 'Image & Text',
         },
         {
           title: 'Three Square Images With Text',
           html_code: `<section>\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-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div>  </div> </div> </div>\n</section>`,
           cover_image: null,
+          category: 'Image & Text',
         },
       ],
     },