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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/vue-website-page-builder.js +2657 -2657
  2. package/dist/vue-website-page-builder.umd.cjs +35 -35
  3. package/package.json +1 -1
  4. package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue +39 -37
  5. package/src/utils/html-elements/component.ts +12 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@myissue/vue-website-page-builder",
3
- "version": "v3.0.23",
3
+ "version": "v3.0.24",
4
4
  "description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
5
5
  "type": "module",
6
6
  "main": "./dist/vue-website-page-builder.umd.cjs",
package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <script setup>
2
2
  import SlideOverRightParent from '@/Components/PageBuilder/Slidebars/SlideOverRightParent.vue'
3
3
  import AdvancedPageBuilderSettings from '@/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue'
4
- import { ref, computed, onMounted, inject } from 'vue'
4
+ import { ref, computed, inject } from 'vue'
5
5
  import fullHTMLContent from '@/utils/builder/html-doc-declaration-with-components'
6
6
 
7
7
  // Get stores from parent PageBuilder component
@@ -54,43 +54,45 @@ const handleDownloadHTML = function () {
54
54
  </script>
55
55
 
56
56
  <template>
57
- <SlideOverRightParent
58
- :open="showAdvancedSettingsSlideOverRight"
59
- :title="titleSettingsSlideOverRight"
60
- @slideOverButton="settingsAdvancedSlideOverButton"
61
- >
62
- <AdvancedPageBuilderSettings></AdvancedPageBuilderSettings>
63
- </SlideOverRightParent>
64
- <!-- Advanced Settings - start -->
65
- <div class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor">
66
- <div class="flex items-left flex-col gap-1">
67
- <h3 class="myQuaternaryHeader">Advanced Settings</h3>
68
- <p class="myPrimaryParagraph text-xs">
69
- Manage advanced settings here. Like an overview of Selected Element, Component, and
70
- Components in real-time.
71
- </p>
57
+ <div>
58
+ <SlideOverRightParent
59
+ :open="showAdvancedSettingsSlideOverRight"
60
+ :title="titleSettingsSlideOverRight"
61
+ @slideOverButton="settingsAdvancedSlideOverButton"
62
+ >
63
+ <AdvancedPageBuilderSettings></AdvancedPageBuilderSettings>
64
+ </SlideOverRightParent>
65
+ <!-- Advanced Settings - start -->
66
+ <div class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor">
67
+ <div class="flex items-left flex-col gap-1">
68
+ <h3 class="myQuaternaryHeader">Advanced Settings</h3>
69
+ <p class="myPrimaryParagraph text-xs">
70
+ Manage advanced settings here. Like an overview of Selected Element, Component, and
71
+ Components in real-time.
72
+ </p>
73
+ </div>
74
+ <div class="mt-4">
75
+ <button
76
+ @click="handleAdvancedSettingsSlideOver"
77
+ type="button"
78
+ class="myPrimaryButton text-xs"
79
+ >
80
+ Advanced Settings
81
+ </button>
82
+ </div>
72
83
  </div>
73
- <div class="mt-4">
74
- <button
75
- @click="handleAdvancedSettingsSlideOver"
76
- type="button"
77
- class="myPrimaryButton text-xs"
78
- >
79
- Advanced Settings
80
- </button>
81
- </div>
82
- </div>
83
- <!-- Advanced Settings - end -->
84
- <!-- Download Layout HTML - start -->
85
- <div class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor">
86
- <div class="flex items-left flex-col gap-1">
87
- <h3 class="myQuaternaryHeader">Download Page as HTML</h3>
88
- <p class="myPrimaryParagraph text-xs">Download current page layout.</p>
89
- </div>
90
- <div class="mt-4">
91
- <button @click="handleDownloadHTML" type="button" class="myPrimaryButton text-xs">
92
- Download HTML file
93
- </button>
84
+ <!-- Advanced Settings - end -->
85
+ <!-- Download Layout HTML - start -->
86
+ <div class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor">
87
+ <div class="flex items-left flex-col gap-1">
88
+ <h3 class="myQuaternaryHeader">Download Page as HTML</h3>
89
+ <p class="myPrimaryParagraph text-xs">Download current page layout.</p>
90
+ </div>
91
+ <div class="mt-4">
92
+ <button @click="handleDownloadHTML" type="button" class="myPrimaryButton text-xs">
93
+ Download HTML file
94
+ </button>
95
+ </div>
94
96
  </div>
95
97
  </div>
96
98
  <!-- Download Layout HTML - end -->
package/src/utils/html-elements/component.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  interface ComponentData {
2
2
  title: string
3
3
  html_code: string
4
- cover_image: string
4
+ cover_image: string | null // Now optional since we use SVG previews instead of external images
5
5
  }
6
6
 
7
7
  interface Components {
@@ -18,67 +18,67 @@ const component: Components[] = [
18
18
  title: 'Single Image',
19
19
  html_code:
20
20
  '<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 smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div></div></div>\n</section>',
21
- cover_image: '/page-builder/image.png',
21
+ cover_image: null,
22
22
  },
23
23
  {
24
24
  title: '2 vertical images',
25
25
  html_code:
26
26
  '<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] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> </div> </div> </div>\n</section>',
27
- cover_image: '/page-builder/two-vertical-images.png',
27
+ cover_image: null,
28
28
  },
29
29
  {
30
30
  title: '2 images',
31
31
  html_code:
32
32
  '<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 smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div> </div></div>\n</section>',
33
- cover_image: '/page-builder/3-images.png',
33
+ cover_image: null,
34
34
  },
35
35
  {
36
36
  title: '3 images',
37
37
  html_code:
38
38
  '<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 smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div> </div></div>\n</section>',
39
- cover_image: '/page-builder/2-images.png',
39
+ cover_image: null,
40
40
  },
41
41
  {
42
42
  title: '6 Images Grid',
43
43
  html_code:
44
44
  '<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 smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n</div>\n</div>\n</div>\n</section>',
45
- cover_image: '/page-builder/6-images.png',
45
+ cover_image: null,
46
46
  },
47
47
  {
48
48
  title: 'Two Images With Right Text Top',
49
49
  html_code:
50
50
  '<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 smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" 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>',
51
- cover_image: '/page-builder/2-images-text-top.png',
51
+ cover_image: null,
52
52
  },
53
53
  {
54
54
  title: '3 Vertical Images',
55
55
  html_code:
56
56
  '<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] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div> </div></div>\n</section>',
57
- cover_image: '/page-builder/3-vertical-images.png',
57
+ cover_image: null,
58
58
  },
59
59
  {
60
60
  title: 'Link Button',
61
61
  html_code:
62
62
  '<section>\n<div class="w-full md:pt-2 md:pb-2 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div id="linktree" class="border-2 border-gray-600 flex items-centre justify-start rounded-md font-medium text-black">\n<p>\n<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.example.com">Link to landing page</a>\n</p>\n</div>\n</div>\n</div>\n</section>',
63
- cover_image: '/page-builder/image.png',
63
+ cover_image: null,
64
64
  },
65
65
  {
66
66
  title: '4 Images With Text',
67
67
  html_code:
68
68
  '<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 smooth-transition" src="/page-builder/placeholder.jpg" 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 smooth-transition" src="/page-builder/placeholder.jpg" 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 smooth-transition" src="/page-builder/placeholder.jpg" 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 smooth-transition" src="/page-builder/placeholder.jpg" 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>',
69
- cover_image: '/page-builder/4-images-text.png',
69
+ cover_image: null,
70
70
  },
71
71
  {
72
72
  title: '3 Images With Text',
73
73
  html_code:
74
74
  '<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 smooth-transition" src="/page-builder/placeholder.jpg" 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 smooth-transition" src="/page-builder/placeholder.jpg" 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 smooth-transition" src="/page-builder/placeholder.jpg" 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>',
75
- cover_image: '/page-builder/3-images-text.png',
75
+ cover_image: null,
76
76
  },
77
77
  {
78
78
  title: '2 Images With Text',
79
79
  html_code:
80
80
  '<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 smooth-transition" src="/page-builder/placeholder.jpg" 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 smooth-transition" src="/page-builder/placeholder.jpg" 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>',
81
- cover_image: '/page-builder/2-images-text.png',
81
+ cover_image: null,
82
82
  },
83
83
  ],
84
84
  },