@myissue/vue-website-page-builder 3.3.80 → 3.3.82

package/src/utils/componentPreviews.ts

@@ -49,8 +49,8 @@ export const generateComponentPreview = (title: string): string => {
       `,
     },
 
-    '2 Vertical Images': {
-      title: '2 Vertical Images',
+    'Two Vertical Images': {
+      title: 'Two Vertical Images',
       svg: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133.88 122.11">
           <defs>
@@ -84,8 +84,8 @@ export const generateComponentPreview = (title: string): string => {
       `,
     },
 
-    '2 Square Images': {
-      title: '2 Square Images',
+    'Two Square Images': {
+      title: 'Two Square Images',
       svg: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.18 57.68">
           <defs>
@@ -119,8 +119,8 @@ export const generateComponentPreview = (title: string): string => {
       `,
     },
 
-    '3 Square Images': {
-      title: '3 Square Images',
+    'Three Square Images': {
+      title: 'Three Square Images',
       svg: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 53.92">
           <defs>
@@ -145,8 +145,8 @@ export const generateComponentPreview = (title: string): string => {
       `,
     },
 
-    '6 Square Images Grid': {
-      title: '6 Square Images Grid',
+    'Six Square Images Grid': {
+      title: 'Six Square Images Grid',
       svg: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 120.27">
           <defs>
@@ -210,8 +210,8 @@ export const generateComponentPreview = (title: string): string => {
       `,
     },
 
-    '3 Vertical Images': {
-      title: '3 Vertical Images',
+    'Three Vertical Images': {
+      title: 'Three Vertical Images',
       svg: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.84 110.72">
           <defs>
@@ -236,8 +236,8 @@ export const generateComponentPreview = (title: string): string => {
       `,
     },
 
-    '4 Square Images With Text': {
-      title: '4 Square Images With Text',
+    'Four Square Images With Text': {
+      title: 'Four Square Images With Text',
       svg: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.33 55.9">
           <defs>
@@ -278,8 +278,8 @@ export const generateComponentPreview = (title: string): string => {
       `,
     },
 
-    '3 Square Images With Text': {
-      title: '3 Square Images With Text',
+    'Three Square Images With Text': {
+      title: 'Three Square Images With Text',
       svg: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 70.84">
           <defs>
@@ -312,51 +312,6 @@ export const generateComponentPreview = (title: string): string => {
         </svg>
       `,
     },
-
-    '2 Square Images With Text': {
-      title: '2 Square Images With Text',
-      svg: `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.18 75.79">
-          <defs>
-            <style>
-              .cls-1 {
-                fill: #384152;
-              }
-
-              .cls-2 {
-                fill: #718096;
-              }
-            </style>
-          </defs>
-          <g>
-            <g>
-              <rect class="cls-1" width="57.68" height="57.68"/>
-              <g>
-                <polygon class="cls-2" points="8.77 37.45 23.11 20.25 37.44 37.45 8.77 37.45"/>
-                <polygon class="cls-2" points="34.58 37.45 41.74 28.85 48.91 37.45 34.58 37.45"/>
-                <circle class="cls-2" cx="41.74" cy="22.62" r="2.39"/>
-              </g>
-            </g>
-            <g>
-              <rect class="cls-1" x="64.5" width="57.68" height="57.68"/>
-              <g>
-                <polygon class="cls-2" points="73.27 37.45 87.61 20.25 101.94 37.45 73.27 37.45"/>
-                <polygon class="cls-2" points="99.07 37.45 106.24 28.85 113.41 37.45 99.07 37.45"/>
-                <circle class="cls-2" cx="106.24" cy="22.62" r="2.39"/>
-              </g>
-            </g>
-          </g>
-          <g>
-            <rect class="cls-1" y="64.1" width="57.68" height="3.13"/>
-            <rect class="cls-1" y="68.38" width="57.68" height="3.13"/>
-            <rect class="cls-1" y="72.65" width="57.68" height="3.13"/>
-            <rect class="cls-1" x="64.5" y="64.1" width="57.68" height="3.13"/>
-            <rect class="cls-1" x="64.5" y="68.38" width="57.68" height="3.13"/>
-            <rect class="cls-1" x="64.5" y="72.65" width="57.68" height="3.13"/>
-          </g>
-        </svg>
-      `,
-    },
   }
 
   const config = previewConfigs[title]

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

@@ -1,4 +1,6 @@
 import { getPlaceholderImageDataUrl } from '../componentPreviews'
+import { useTranslations } from '../../composables/useTranslations'
+const { translate } = useTranslations()
 
 interface ComponentData {
   title: string
@@ -25,48 +27,43 @@ const component: Components[] = [
           cover_image: null,
         },
         {
-          title: '2 Vertical Images',
+          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,
         },
         {
-          title: '2 Square Images',
+          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,
         },
         {
-          title: '3 Square Images',
+          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,
         },
         {
-          title: '6 Square Images Grid',
+          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,
         },
         {
           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><strong>Title</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div> \n</div></div></div>\n</section>`,
+          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,
         },
         {
-          title: '3 Vertical Images',
+          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,
         },
         {
-          title: '4 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>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>`,
+          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,
         },
         {
-          title: '3 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>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</p></div> </div>  </div> </div> </div>\n</section>`,
-          cover_image: null,
-        },
-        {
-          title: '2 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-2"> <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>Ullamcorper dignissim cras tincidunt.</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>Ullamcorper dignissim cras tincidunt.</p></div> </div>   </div> </div> </div>\n</section>`,
+          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,
         },
       ],

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

@@ -12,12 +12,9 @@ const componentHelpers: ComponentHelper[] = [
     <div class="relative py-4">
     <div class="mx-auto max-w-7xl lg:px-4 px-2">
     <div>
-    <p><strong>Text</strong></p><p>Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Erat nam at lectus urna duis convallis convallis. Congue mauris rhoncus aenean vel elit scelerisque. 
-    Turpis tincidunt id aliquet risus feugiat in ante. Tincidunt dui ut ornare lectus sit. Ipsum dolor sit amet consectetur. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque convallis.<br><br>Dignissim sodales ut eu sem integer vitae justo eget magna. 
-    Ac turpis egestas maecenas pharetra convallis. Mauris sit amet massa vitae. Ut tellus elementum sagittis vitae et. Sed risus ultricies tristique nulla aliquet enim tortor. Nunc mattis enim ut tellus elementum sagittis vitae et leo. Quis vel eros donec ac odio tempor. 
-    Faucibus scelerisque eleifend donec pretium. <br><br>Adipiscing bibendum est ultricies integer quis auctor elit. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget. Gravida dictum fusce ut placerat orci nulla. 
-    Sunt in culpa qui officia deserunt nisi vitae suscipit tellus mauris. <br><br></p><p><strong>List</strong></p><ul><li><p>Integer enim neque volutpat ac tincidunt vitae semper quis. Sit amet consectetur adipiscing elit pellentesque.</p></li><li><p>Urna cursus eget nunc scelerisque viverra. 
-    Cursus metus aliquam eleifend mi in nulla posuere. Lobortis elementum nibh tellus molestie nunc non blandit massa.</p></li><li><p>Sodales ut eu sem integer vitae justo eget magna. Scelerisque felis imperdiet proin fermentum leo vel orci. Nunc id cursus metus aliquam eleifend.</p></li></ul>
+    <p>
+    Start customizing by editing this default text directly in the editor.
+    </p>
     </div>
     </div>
     </div>
@@ -31,7 +28,7 @@ const componentHelpers: ComponentHelper[] = [
     `,
   },
   {
-    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h2>Sunt in culpa qui officia deserunt</h2></div></div></div></section>`,
+    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h2>Layouts and visual.</h2></div></div></div></section>`,
     id: null,
     title: 'Header H2',
     icon: `
@@ -41,7 +38,7 @@ const componentHelpers: ComponentHelper[] = [
     `,
   },
   {
-    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h3>Sunt in culpa qui officia deserunt</h3></div></div></div></section>`,
+    html_code: `<section><div class="relative py-4"><div class="mx-auto max-w-7xl lg:px-4 px-2"><div class="break-words"><h3>Layouts and visual.</h3></div></div></div></section>`,
     id: null,
     title: 'Header H3',
     icon: `