@myissue/vue-website-page-builder 3.0.21 → 3.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.0.21",
+  "version": "v3.0.23",
   "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/Components/PageBuilder/NoneCustomSearchComponent.vue

@@ -3,9 +3,10 @@ import componentHelpers from '../../utils/html-elements/componentHelpers'
 import components from '../../utils/html-elements/component'
 import PageBuilderClass from '../../composables/PageBuilderClass'
 import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
+import { generateComponentPreview } from '../../utils/componentPreviews'
 import type { ComponentObject, PageBuilderStateStore, MediaLibraryStore } from '../../types'
 
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject<PageBuilderStateStore>('pageBuilderStateStore')
@@ -16,6 +17,9 @@ const { closeAddComponentModal } = usePageBuilderModal()
 
 const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore!, mediaLibraryStore!)
 
+// Track image loading states
+const imageLoadingStates = ref<Record<string, boolean>>({})
+
 // Super simple component addition with professional modal closing!
 const handleDropComponent = function (componentObject: ComponentObject) {
   pageBuilderClass.addComponent(componentObject)
@@ -30,6 +34,28 @@ const convertToComponentObject = function (comp: any): ComponentObject {
     title: comp.title,
   }
 }
+
+// Handle image load errors
+const handleImageError = (event: Event, title: string) => {
+  const img = event.target as HTMLImageElement
+  const container = img.parentElement
+  if (container) {
+    // Generate and set SVG preview
+    const svgPreview = generateComponentPreview(title)
+    container.innerHTML = `<div class="w-full h-full flex items-center justify-center">${svgPreview}</div>`
+  }
+}
+
+// Check if we should show SVG preview instead of image
+const shouldShowSvgPreview = (comp: any) => {
+  // Always show SVG preview for better reliability
+  return true
+}
+
+// Get SVG preview for component
+const getSvgPreview = (title: string) => {
+  return generateComponentPreview(title)
+}
 </script>
 
 <style scoped>
@@ -72,13 +98,11 @@ const convertToComponentObject = function (comp: any): ComponentObject {
           <div
             class="overflow-hidden whitespace-pre-line flex-1 h-auto border-b border-gray-200 lg:py-10 py-8 px-2"
           >
-            <img
-              v-if="comp.cover_image"
-              :src="comp.cover_image"
-              :alt="comp.title"
-              class="max-h-72 cursor-pointer object-contain bg-white mx-auto"
-            />
-            <div v-else class="text-gray-500">{{ comp.title }}</div>
+            <!-- Use SVG preview instead of external images -->
+            <div
+              class="max-h-72 cursor-pointer bg-white mx-auto flex items-center justify-center"
+              v-html="getSvgPreview(comp.title)"
+            ></div>
           </div>
           <div class="p-3">
             <h4 class="myPrimaryParagraph text-sm font-normal">{{ comp.title }}</h4>

package/src/PageBuilder/PageBuilder.vue

@@ -241,7 +241,10 @@ onMounted(async () => {
       <Preview></Preview>
     </PageBuilderPreviewModal>
 
-    <div class="w-full inset-x-0 h-[90vh] z-10 bg-white overflow-x-scroll lg:pt-2 pt-2">
+    <div
+      id="builder-container"
+      class="w-full inset-x-0 h-[90vh] z-10 bg-white overflow-x-scroll lg:pt-2 pt-2"
+    >
       <!-- Save laylout # start -->
       <div class="p-4 m-8 bg-stone-200 rounded-lg">
         <div

package/src/css/app.css

@@ -1,4 +1,6 @@
-/* Google Material Icons - Auto-loaded for vue-website-page-builder */
+/* Google Fonts - Auto-loaded for vue-website-page-builder */
+@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
 
 @tailwind base;
@@ -504,13 +506,11 @@ h3 {
 /* CSS for content inside page builder # start */
 #page-builder-editor-editable-area a {
   pointer-events: none;
-  /* display: block;
-    width: 100%; */
 }
 
 #page-builder-editor-editable-area #youtube-video::before {
   content: 'Select video element';
-  font-family: 'Jost';
+  font-family: 'Jost', sans-serif;
   display: inline-block;
   margin-right: 8px;
   vertical-align: middle;
@@ -574,6 +574,9 @@ h3 {
   --dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
 }
 
+#builder-container {
+  font-family: 'Jost', sans-serif;
+}
 .dp__action_row {
   display: flex !important;
   align-items: center !important;

package/src/utils/componentPreviews.ts

@@ -0,0 +1,170 @@
+// Component Preview Generator
+// Generates SVG previews for components to avoid external image dependencies
+
+export interface ComponentPreviewConfig {
+  title: string
+  svg: string
+  description?: string
+}
+
+export const generateComponentPreview = (title: string): string => {
+  const previewConfigs: Record<string, ComponentPreviewConfig> = {
+    'Single Image': {
+      title: 'Single Image',
+      svg: `
+        <svg viewBox="0 0 200 150" class="w-full h-full">
+          <rect x="20" y="20" width="160" height="110" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="8"/>
+          <rect x="40" y="40" width="120" height="70" fill="#e5e7eb" rx="4"/>
+          <circle cx="70" cy="60" r="8" fill="#9ca3af"/>
+          <path d="M85 75 L95 65 L110 80 L125 70 L135 85" stroke="#9ca3af" stroke-width="2" fill="none"/>
+          <text x="100" y="125" text-anchor="middle" fill="#6b7280" font-size="12">Single Image</text>
+        </svg>
+      `,
+    },
+    '2 vertical images': {
+      title: '2 Vertical Images',
+      svg: `
+        <svg viewBox="0 0 200 150" class="w-full h-full">
+          <rect x="10" y="20" width="70" height="110" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="8"/>
+          <rect x="120" y="20" width="70" height="110" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="8"/>
+          <rect x="20" y="30" width="50" height="90" fill="#e5e7eb" rx="4"/>
+          <rect x="130" y="30" width="50" height="90" fill="#e5e7eb" rx="4"/>
+          <text x="100" y="145" text-anchor="middle" fill="#6b7280" font-size="10">2 Vertical Images</text>
+        </svg>
+      `,
+    },
+    '2 images': {
+      title: '2 Images',
+      svg: `
+        <svg viewBox="0 0 200 150" class="w-full h-full">
+          <rect x="20" y="30" width="70" height="70" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="8"/>
+          <rect x="110" y="30" width="70" height="70" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="8"/>
+          <rect x="30" y="40" width="50" height="50" fill="#e5e7eb" rx="4"/>
+          <rect x="120" y="40" width="50" height="50" fill="#e5e7eb" rx="4"/>
+          <text x="100" y="125" text-anchor="middle" fill="#6b7280" font-size="12">2 Images</text>
+        </svg>
+      `,
+    },
+    '3 images': {
+      title: '3 Images',
+      svg: `
+        <svg viewBox="0 0 200 150" class="w-full h-full">
+          <rect x="10" y="30" width="50" height="50" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
+          <rect x="75" y="30" width="50" height="50" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
+          <rect x="140" y="30" width="50" height="50" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
+          <text x="100" y="110" text-anchor="middle" fill="#6b7280" font-size="12">3 Images</text>
+        </svg>
+      `,
+    },
+    '6 Images Grid': {
+      title: '6 Images Grid',
+      svg: `
+        <svg viewBox="0 0 200 150" class="w-full h-full">
+          <rect x="20" y="20" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
+          <rect x="77" y="20" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
+          <rect x="135" y="20" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
+          <rect x="20" y="67" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
+          <rect x="77" y="67" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
+          <rect x="135" y="67" width="45" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
+          <text x="100" y="125" text-anchor="middle" fill="#6b7280" font-size="10">6 Images Grid</text>
+        </svg>
+      `,
+    },
+    'Two Images With Right Text Top': {
+      title: 'Images + Text',
+      svg: `
+        <svg viewBox="0 0 200 150" class="w-full h-full">
+          <rect x="20" y="20" width="35" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="4"/>
+          <rect x="20" y="65" width="35" height="35" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="4"/>
+          <rect x="70" y="25" width="110" height="8" fill="#e5e7eb" rx="4"/>
+          <rect x="70" y="40" width="90" height="6" fill="#f3f4f6" rx="3"/>
+          <rect x="70" y="50" width="100" height="6" fill="#f3f4f6" rx="3"/>
+          <rect x="70" y="60" width="80" height="6" fill="#f3f4f6" rx="3"/>
+          <text x="100" y="130" text-anchor="middle" fill="#6b7280" font-size="10">Images + Text</text>
+        </svg>
+      `,
+    },
+    '3 Vertical Images': {
+      title: '3 Vertical Images',
+      svg: `
+        <svg viewBox="0 0 200 150" class="w-full h-full">
+          <rect x="15" y="20" width="45" height="80" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
+          <rect x="77" y="20" width="45" height="80" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
+          <rect x="140" y="20" width="45" height="80" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
+          <text x="100" y="125" text-anchor="middle" fill="#6b7280" font-size="10">3 Vertical Images</text>
+        </svg>
+      `,
+    },
+    'Link Button': {
+      title: 'Link Button',
+      svg: `
+        <svg viewBox="0 0 200 150" class="w-full h-full">
+          <rect x="50" y="60" width="100" height="30" fill="#3b82f6" stroke="#2563eb" stroke-width="2" rx="15"/>
+          <text x="100" y="78" text-anchor="middle" fill="white" font-size="12" font-weight="500">Link Button</text>
+          <path d="M75 75 L80 70 M80 70 L80 80 M80 70 L70 70" stroke="white" stroke-width="2" fill="none"/>
+          <text x="100" y="110" text-anchor="middle" fill="#6b7280" font-size="10">Link Button</text>
+        </svg>
+      `,
+    },
+    '4 Images With Text': {
+      title: '4 Images + Text',
+      svg: `
+        <svg viewBox="0 0 200 150" class="w-full h-full">
+          <rect x="15" y="15" width="35" height="25" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="3"/>
+          <rect x="60" y="15" width="35" height="25" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="3"/>
+          <rect x="105" y="15" width="35" height="25" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="3"/>
+          <rect x="150" y="15" width="35" height="25" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="3"/>
+          <rect x="15" y="45" width="35" height="4" fill="#e5e7eb" rx="2"/>
+          <rect x="60" y="45" width="35" height="4" fill="#e5e7eb" rx="2"/>
+          <rect x="105" y="45" width="35" height="4" fill="#e5e7eb" rx="2"/>
+          <rect x="150" y="45" width="35" height="4" fill="#e5e7eb" rx="2"/>
+          <text x="100" y="70" text-anchor="middle" fill="#6b7280" font-size="9">4 Images + Text</text>
+        </svg>
+      `,
+    },
+    '3 Images With Text': {
+      title: '3 Images + Text',
+      svg: `
+        <svg viewBox="0 0 200 150" class="w-full h-full">
+          <rect x="25" y="20" width="40" height="30" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
+          <rect x="80" y="20" width="40" height="30" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
+          <rect x="135" y="20" width="40" height="30" fill="#f3f4f6" stroke="#d1d5db" stroke-width="1" rx="4"/>
+          <rect x="25" y="55" width="40" height="5" fill="#e5e7eb" rx="2"/>
+          <rect x="80" y="55" width="40" height="5" fill="#e5e7eb" rx="2"/>
+          <rect x="135" y="55" width="40" height="5" fill="#e5e7eb" rx="2"/>
+          <text x="100" y="85" text-anchor="middle" fill="#6b7280" font-size="10">3 Images + Text</text>
+        </svg>
+      `,
+    },
+    '2 Images With Text': {
+      title: '2 Images + Text',
+      svg: `
+        <svg viewBox="0 0 200 150" class="w-full h-full">
+          <rect x="40" y="25" width="50" height="40" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
+          <rect x="110" y="25" width="50" height="40" fill="#f3f4f6" stroke="#d1d5db" stroke-width="2" rx="6"/>
+          <rect x="40" y="75" width="50" height="6" fill="#e5e7eb" rx="3"/>
+          <rect x="110" y="75" width="50" height="6" fill="#e5e7eb" rx="3"/>
+          <text x="100" y="105" text-anchor="middle" fill="#6b7280" font-size="10">2 Images + Text</text>
+        </svg>
+      `,
+    },
+  }
+
+  const config = previewConfigs[title]
+  if (config) {
+    return config.svg
+  }
+
+  // Default fallback preview
+  return `
+    <svg viewBox="0 0 200 150" class="w-full h-full">
+      <rect x="20" y="20" width="160" height="110" fill="#f9fafb" stroke="#e5e7eb" stroke-width="2" rx="8" stroke-dasharray="5,5"/>
+      <text x="100" y="70" text-anchor="middle" fill="#6b7280" font-size="14" font-weight="500">${title}</text>
+      <text x="100" y="90" text-anchor="middle" fill="#9ca3af" font-size="10">Component Preview</text>
+    </svg>
+  `
+}
+
+export default {
+  generateComponentPreview,
+}