@myissue/vue-website-page-builder 3.2.72 → 3.2.74
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.
- package/dist/vue-website-page-builder.css +1 -1
- package/dist/vue-website-page-builder.js +6437 -6409
- package/dist/vue-website-page-builder.umd.cjs +26 -26
- package/package.json +1 -1
- package/src/DemoComponents/HomeSection.vue +5 -2
- package/src/DemoComponents/html.json +49 -47
- package/src/DemoComponents/oldhtmlfromdb.json +46 -0
- package/src/DemoComponents/rawHTML.ts +143 -0
- package/src/composables/PageBuilderClass.ts +100 -40
- package/src/css/app.css +12 -12
package/package.json
CHANGED
|
@@ -7,7 +7,9 @@ import DemoMediaLibraryComponent from './DemoMediaLibraryComponent.vue'
|
|
|
7
7
|
import DemoBuilderComponents from './DemoBuilderComponents.vue'
|
|
8
8
|
import { computed, onMounted } from 'vue'
|
|
9
9
|
import { sharedPageBuilderStore } from '../stores/shared-store'
|
|
10
|
+
import oldhtmlfromdb from './oldhtmlfromdb.json'
|
|
10
11
|
import html from './html.json'
|
|
12
|
+
import { rawHTML } from './rawHTML'
|
|
11
13
|
|
|
12
14
|
const pageBuilderStateStore = sharedPageBuilderStore
|
|
13
15
|
const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
|
|
@@ -82,7 +84,7 @@ const configPageBuilder = {
|
|
|
82
84
|
userSettings: {
|
|
83
85
|
theme: 'light' as 'light',
|
|
84
86
|
language: 'en',
|
|
85
|
-
autoSave:
|
|
87
|
+
autoSave: false,
|
|
86
88
|
},
|
|
87
89
|
settings: {
|
|
88
90
|
brandColor: '#DB93B0',
|
|
@@ -98,8 +100,9 @@ onMounted(async () => {
|
|
|
98
100
|
JSON.stringify(localStorage.getItem(getLocalStorageItemName.value)),
|
|
99
101
|
)
|
|
100
102
|
} else {
|
|
101
|
-
console.log('den eer:', JSON.stringify(html))
|
|
102
103
|
pageBuilderClass.loadExistingContent(JSON.stringify(html), true)
|
|
104
|
+
// pageBuilderClass.loadExistingContent(rawHTML, true)
|
|
105
|
+
// pageBuilderClass.loadExistingContent(JSON.stringify(oldhtmlfromdb), true)
|
|
103
106
|
}
|
|
104
107
|
}
|
|
105
108
|
})
|
|
@@ -1,47 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
"id"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
1
|
+
{
|
|
2
|
+
"savedAt": "2016-06-19T12:34:56.000Z",
|
|
3
|
+
"components": [
|
|
4
|
+
{
|
|
5
|
+
"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><strong>Demo Content</strong></h2></div></div></div></section>",
|
|
6
|
+
"title": "Header H2"
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"html_code": "<section>\n <div class=\"relative py-4\">\n <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n <div><p>Introducing the The Lightweight Free Vue Click & Drop Page Builder create and enhance digital experiences with Vue. Not everything powerful has to look complicated. Lightweight & Minimalist Page Builder with an elegant and intuitive design, focused on simplicity and speed. Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click & Drop Page Builder.</p></div>\n </div>\n </div>\n </section>",
|
|
10
|
+
|
|
11
|
+
"title": "Text"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2 bg-black\"><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 rounded-tl-full\" src=\"https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"b2fb2e61-c916-4195-9cd2-c1d25747b4f7\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-full\" src=\"https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"fdf36a14-f7ef-4025-942f-c87b20b18005\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-br-full\" src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"618a74a7-5d41-4dce-937c-130dd7490569\"></div></div> </div></div>\n</section>",
|
|
15
|
+
|
|
16
|
+
"title": "3 Vertical Images"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"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>The web builder for stunning pages</h3></div></div></div></section>",
|
|
20
|
+
|
|
21
|
+
"title": "Header H3"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"html_code": "<section>\n <div class=\"relative py-4\">\n <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n <div><p>A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.</p></div>\n </div>\n </div>\n </section>",
|
|
25
|
+
|
|
26
|
+
"title": "Text"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"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] smooth-transition\" src=\"https://images.unsplash.com/photo-1592966719124-2ca2978ba325?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"536340a5-c7e1-479d-a2ae-a85e6dacc2df\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"https://images.unsplash.com/photo-1549298222-1c31e8915347?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"41655496-4742-4cc6-bc3c-abe7c2b241fb\"> </div> </div> </div> </div>\n</section>",
|
|
30
|
+
|
|
31
|
+
"title": "2 Vertical Images"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"html_code": "<section><div class=\"relative py-4\" selected=\"\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h3>Just publish it with Vue</h3></div></div></div></section>",
|
|
35
|
+
|
|
36
|
+
"title": "Header H3"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"html_code": "<section>\n <div class=\"relative py-4\">\n <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n <div class=\"\"><p>The website builder loved by designers. Easily design, preview, and adjust layouts for every screen size.<br>Clean. Fast. Intuitive. Not everything powerful has to look complicated.</p></div>\n </div>\n </div>\n </section>",
|
|
40
|
+
|
|
41
|
+
"title": "Text"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"html_code": "<section>\n <div class=\"py-4\">\n <div class=\"mx-auto max-w-7xl w-full pt-6 pb-6\">\n <div id=\"youtube-video\" class=\"w-full aspect-video p-4\">\n\n <iframe frameborder=\"0\" allowfullscreen=\"\" class=\"w-full aspect-video\" src=\"https://www.youtube.com/embed/pJvwV1Fm0vU\" allow=\"accelerometer; autoplay; clipboard-write;\">\n </iframe>\n </div>\n </div>\n </div>\n </section>",
|
|
45
|
+
|
|
46
|
+
"title": "YouTube Video"
|
|
47
|
+
}
|
|
48
|
+
]
|
|
49
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"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><strong>Demo Content</strong></h2></div></div></div></section>",
|
|
4
|
+
"title": "Header H2"
|
|
5
|
+
},
|
|
6
|
+
{
|
|
7
|
+
"html_code": "<section>\n <div class=\"relative py-4\">\n <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n <div><p>Introducing the The Lightweight Free Vue Click & Drop Page Builder create and enhance digital experiences with Vue. Not everything powerful has to look complicated. Lightweight & Minimalist Page Builder with an elegant and intuitive design, focused on simplicity and speed. Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click & Drop Page Builder.</p></div>\n </div>\n </div>\n </section>",
|
|
8
|
+
|
|
9
|
+
"title": "Text"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2 bg-black\"><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 rounded-tl-full\" src=\"https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"b2fb2e61-c916-4195-9cd2-c1d25747b4f7\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-full\" src=\"https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"fdf36a14-f7ef-4025-942f-c87b20b18005\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition rounded-br-full\" src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"618a74a7-5d41-4dce-937c-130dd7490569\"></div></div> </div></div>\n</section>",
|
|
13
|
+
|
|
14
|
+
"title": "3 Vertical Images"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"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>The web builder for stunning pages</h3></div></div></div></section>",
|
|
18
|
+
|
|
19
|
+
"title": "Header H3"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"html_code": "<section>\n <div class=\"relative py-4\">\n <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n <div><p>A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.</p></div>\n </div>\n </div>\n </section>",
|
|
23
|
+
|
|
24
|
+
"title": "Text"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"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] smooth-transition\" src=\"https://images.unsplash.com/photo-1592966719124-2ca2978ba325?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"536340a5-c7e1-479d-a2ae-a85e6dacc2df\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"https://images.unsplash.com/photo-1549298222-1c31e8915347?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"41655496-4742-4cc6-bc3c-abe7c2b241fb\"> </div> </div> </div> </div>\n</section>",
|
|
28
|
+
|
|
29
|
+
"title": "2 Vertical Images"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"html_code": "<section><div class=\"relative py-4\" selected=\"\"><div class=\"mx-auto max-w-7xl lg:px-4 px-2\"><div class=\"break-words\"><h3>Just publish it with Vue</h3></div></div></div></section>",
|
|
33
|
+
|
|
34
|
+
"title": "Header H3"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"html_code": "<section>\n <div class=\"relative py-4\">\n <div class=\"mx-auto max-w-7xl lg:px-4 px-2\">\n <div class=\"\"><p>The website builder loved by designers. Easily design, preview, and adjust layouts for every screen size.<br>Clean. Fast. Intuitive. Not everything powerful has to look complicated.</p></div>\n </div>\n </div>\n </section>",
|
|
38
|
+
|
|
39
|
+
"title": "Text"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"html_code": "<section>\n <div class=\"py-4\">\n <div class=\"mx-auto max-w-7xl w-full pt-6 pb-6\">\n <div id=\"youtube-video\" class=\"w-full aspect-video p-4\">\n\n <iframe frameborder=\"0\" allowfullscreen=\"\" class=\"w-full aspect-video\" src=\"https://www.youtube.com/embed/pJvwV1Fm0vU\" allow=\"accelerometer; autoplay; clipboard-write;\">\n </iframe>\n </div>\n </div>\n </div>\n </section>",
|
|
43
|
+
|
|
44
|
+
"title": "YouTube Video"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
export const rawHTML = `<section data-component-title="Header H2">
|
|
2
|
+
<div class="relative py-4">
|
|
3
|
+
<div class="mx-auto max-w-7xl lg:px-4 px-2">
|
|
4
|
+
<div class="break-words">
|
|
5
|
+
<h2><strong>Demo Content</strong></h2>
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
</section>
|
|
10
|
+
<section data-component-title="Text">
|
|
11
|
+
<div class="relative py-4">
|
|
12
|
+
<div class="mx-auto max-w-7xl lg:px-4 px-2">
|
|
13
|
+
<div>
|
|
14
|
+
<p>
|
|
15
|
+
Introducing the The Lightweight Free Vue Click & Drop Page Builder create and enhance
|
|
16
|
+
digital experiences with Vue. Not everything powerful has to look complicated. Lightweight
|
|
17
|
+
& Minimalist Page Builder with an elegant and intuitive design, focused on simplicity
|
|
18
|
+
and speed. Build responsive pages like listings, jobs or blog posts and manage content
|
|
19
|
+
easily using the free Click & Drop Page Builder.
|
|
20
|
+
</p>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</section>
|
|
25
|
+
<section
|
|
26
|
+
data-component-title="3 Vertical Images"
|
|
27
|
+
>
|
|
28
|
+
<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2 bg-black">
|
|
29
|
+
<div class="mx-auto max-w-7xl">
|
|
30
|
+
<div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3">
|
|
31
|
+
<div class="flex-1 py-2">
|
|
32
|
+
<img
|
|
33
|
+
class="object-cover w-full object-top aspect-[9/16] smooth-transition rounded-tl-full"
|
|
34
|
+
src="https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&ixlib=rb-4.1.0&q=80&w=1080"
|
|
35
|
+
alt="provider"
|
|
36
|
+
data-image="b2fb2e61-c916-4195-9cd2-c1d25747b4f7"
|
|
37
|
+
/>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="flex-1 py-2">
|
|
40
|
+
<img
|
|
41
|
+
class="object-cover w-full object-top aspect-[9/16] smooth-transition rounded-full"
|
|
42
|
+
src="https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&ixlib=rb-4.1.0&q=80&w=1080"
|
|
43
|
+
alt="provider"
|
|
44
|
+
data-image="fdf36a14-f7ef-4025-942f-c87b20b18005"
|
|
45
|
+
/>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="flex-1 py-2">
|
|
48
|
+
<img
|
|
49
|
+
class="object-cover w-full object-top aspect-[9/16] smooth-transition rounded-br-full"
|
|
50
|
+
src="https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&ixlib=rb-4.1.0&q=80&w=1080"
|
|
51
|
+
alt="provider"
|
|
52
|
+
data-image="618a74a7-5d41-4dce-937c-130dd7490569"
|
|
53
|
+
/>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</section>
|
|
59
|
+
<section data-component-title="Header H3">
|
|
60
|
+
<div class="relative py-4">
|
|
61
|
+
<div class="mx-auto max-w-7xl lg:px-4 px-2">
|
|
62
|
+
<div class="break-words"><h3>The web builder for stunning pages</h3></div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</section>
|
|
66
|
+
<section data-component-title="Text">
|
|
67
|
+
<div class="relative py-4">
|
|
68
|
+
<div class="mx-auto max-w-7xl lg:px-4 px-2">
|
|
69
|
+
<div>
|
|
70
|
+
<p>
|
|
71
|
+
A Page Builder designed for growth. Build your website pages with ready-made components
|
|
72
|
+
that are fully customizable and always responsive, designed to fit every need. A powerful
|
|
73
|
+
Page Builder for growing merchants, brands, and agencies.
|
|
74
|
+
</p>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</section>
|
|
79
|
+
<section
|
|
80
|
+
data-component-title="2 Vertical Images"
|
|
81
|
+
>
|
|
82
|
+
<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2">
|
|
83
|
+
<div class="mx-auto max-w-7xl">
|
|
84
|
+
<div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
|
|
85
|
+
<div class="flex-1 py-2">
|
|
86
|
+
<img
|
|
87
|
+
class="object-cover w-full object-top aspect-[9/16] smooth-transition"
|
|
88
|
+
src="https://images.unsplash.com/photo-1592966719124-2ca2978ba325?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&ixlib=rb-4.1.0&q=80&w=1080"
|
|
89
|
+
alt="provider"
|
|
90
|
+
data-image="536340a5-c7e1-479d-a2ae-a85e6dacc2df"
|
|
91
|
+
/>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="flex-1 py-2">
|
|
94
|
+
<img
|
|
95
|
+
class="object-cover w-full object-top aspect-[9/16] smooth-transition"
|
|
96
|
+
src="https://images.unsplash.com/photo-1549298222-1c31e8915347?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&ixlib=rb-4.1.0&q=80&w=1080"
|
|
97
|
+
alt="provider"
|
|
98
|
+
data-image="41655496-4742-4cc6-bc3c-abe7c2b241fb"
|
|
99
|
+
/>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</section>
|
|
105
|
+
<section data-component-title="Header H3">
|
|
106
|
+
<div class="relative py-4">
|
|
107
|
+
<div class="mx-auto max-w-7xl lg:px-4 px-2">
|
|
108
|
+
<div class="break-words"><h3>Just publish it with Vue</h3></div>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</section>
|
|
112
|
+
<section data-component-title="Text">
|
|
113
|
+
<div class="relative py-4">
|
|
114
|
+
<div class="mx-auto max-w-7xl lg:px-4 px-2">
|
|
115
|
+
<div class="">
|
|
116
|
+
<p>
|
|
117
|
+
The website builder loved by designers. Easily design, preview, and adjust layouts for
|
|
118
|
+
every screen size.<br />Clean. Fast. Intuitive. Not everything powerful has to look
|
|
119
|
+
complicated.
|
|
120
|
+
</p>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</section>
|
|
125
|
+
<section
|
|
126
|
+
data-component-title="YouTube Video"
|
|
127
|
+
>
|
|
128
|
+
<div class="py-4">
|
|
129
|
+
<div class="mx-auto max-w-7xl w-full pt-6 pb-6">
|
|
130
|
+
<div id="youtube-video" class="w-full aspect-video p-4">
|
|
131
|
+
<iframe
|
|
132
|
+
frameborder="0"
|
|
133
|
+
allowfullscreen=""
|
|
134
|
+
class="w-full aspect-video"
|
|
135
|
+
src="https://www.youtube.com/embed/pJvwV1Fm0vU"
|
|
136
|
+
allow="accelerometer; autoplay; clipboard-write;"
|
|
137
|
+
>
|
|
138
|
+
</iframe>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</section>
|
|
143
|
+
`
|
|
@@ -289,8 +289,8 @@ class PageBuilderClass {
|
|
|
289
289
|
|
|
290
290
|
try {
|
|
291
291
|
this.pageBuilderStateStore.setIsSaving(true)
|
|
292
|
-
await this.delay(1000)
|
|
293
292
|
await this.saveComponentsLocalStorage()
|
|
293
|
+
await this.delay(300)
|
|
294
294
|
} catch (err) {
|
|
295
295
|
console.error('Error trying auto save.', err)
|
|
296
296
|
} finally {
|
|
@@ -301,9 +301,8 @@ class PageBuilderClass {
|
|
|
301
301
|
if (passedConfig && !passedConfig.userSettings) {
|
|
302
302
|
try {
|
|
303
303
|
this.pageBuilderStateStore.setIsSaving(true)
|
|
304
|
-
await this.delay(200)
|
|
305
|
-
|
|
306
304
|
await this.saveComponentsLocalStorage()
|
|
305
|
+
await this.delay(300)
|
|
307
306
|
} catch (err) {
|
|
308
307
|
console.error('Error trying saving.', err)
|
|
309
308
|
} finally {
|
|
@@ -327,18 +326,16 @@ class PageBuilderClass {
|
|
|
327
326
|
passedConfig.userSettings.autoSave)
|
|
328
327
|
) {
|
|
329
328
|
this.pageBuilderStateStore.setIsSaving(true)
|
|
330
|
-
await this.delay(200)
|
|
331
|
-
|
|
332
329
|
await this.saveComponentsLocalStorage()
|
|
330
|
+
await this.delay(300)
|
|
333
331
|
|
|
334
332
|
this.pageBuilderStateStore.setIsSaving(false)
|
|
335
333
|
}
|
|
336
334
|
}
|
|
337
335
|
if (passedConfig && !passedConfig.userSettings) {
|
|
338
336
|
this.pageBuilderStateStore.setIsSaving(true)
|
|
339
|
-
await this.delay(200)
|
|
340
|
-
|
|
341
337
|
await this.saveComponentsLocalStorage()
|
|
338
|
+
await this.delay(300)
|
|
342
339
|
|
|
343
340
|
this.pageBuilderStateStore.setIsSaving(false)
|
|
344
341
|
}
|
|
@@ -392,14 +389,15 @@ class PageBuilderClass {
|
|
|
392
389
|
// Generate a unique ID using uuidv4() and assign it to the section
|
|
393
390
|
section.dataset.componentid = uuidv4()
|
|
394
391
|
|
|
392
|
+
// Set the title attribute if present
|
|
393
|
+
if (clonedComponent.title) {
|
|
394
|
+
section.setAttribute('title', clonedComponent.title)
|
|
395
|
+
section.setAttribute('data-component-title', clonedComponent.title)
|
|
396
|
+
}
|
|
397
|
+
|
|
395
398
|
// Find all images within elements with "flex" or "grid" classes inside the section
|
|
396
399
|
const images = section.querySelectorAll('img')
|
|
397
400
|
|
|
398
|
-
// Add a unique ID as a data attribute to each image element
|
|
399
|
-
images.forEach((image) => {
|
|
400
|
-
image.setAttribute('data-image', uuidv4())
|
|
401
|
-
})
|
|
402
|
-
|
|
403
401
|
// Update the clonedComponent id with the newly generated unique ID
|
|
404
402
|
clonedComponent.id = section.dataset.componentid
|
|
405
403
|
|
|
@@ -1116,7 +1114,6 @@ class PageBuilderClass {
|
|
|
1116
1114
|
if (!pagebuilder) return
|
|
1117
1115
|
|
|
1118
1116
|
const hoveredElement = pagebuilder.querySelector('[hovered]')
|
|
1119
|
-
|
|
1120
1117
|
if (hoveredElement) {
|
|
1121
1118
|
hoveredElement.removeAttribute('hovered')
|
|
1122
1119
|
}
|
|
@@ -1127,15 +1124,18 @@ class PageBuilderClass {
|
|
|
1127
1124
|
componentsToSave.push({
|
|
1128
1125
|
html_code: section.outerHTML,
|
|
1129
1126
|
id: section.getAttribute('data-componentid'),
|
|
1130
|
-
title:
|
|
1131
|
-
section.getAttribute('title') ||
|
|
1132
|
-
section.getAttribute('data-componentid') ||
|
|
1133
|
-
'Untitled Component',
|
|
1127
|
+
title: section.getAttribute('data-component-title') || 'Untitled Component',
|
|
1134
1128
|
})
|
|
1135
1129
|
})
|
|
1136
1130
|
|
|
1137
1131
|
if (this.getLocalStorageItemName.value) {
|
|
1138
|
-
localStorage.setItem(
|
|
1132
|
+
localStorage.setItem(
|
|
1133
|
+
this.getLocalStorageItemName.value,
|
|
1134
|
+
JSON.stringify({
|
|
1135
|
+
savedAt: new Date().toISOString(),
|
|
1136
|
+
components: componentsToSave,
|
|
1137
|
+
}),
|
|
1138
|
+
)
|
|
1139
1139
|
}
|
|
1140
1140
|
|
|
1141
1141
|
// No DOM mutation here!
|
|
@@ -1398,6 +1398,7 @@ class PageBuilderClass {
|
|
|
1398
1398
|
// Wait for the DOM to update before setting event listeners
|
|
1399
1399
|
await nextTick()
|
|
1400
1400
|
await this.setEventListenersForElements()
|
|
1401
|
+
await this.handleAutoSave()
|
|
1401
1402
|
} catch (error) {
|
|
1402
1403
|
console.error('Error adding component:', error)
|
|
1403
1404
|
}
|
|
@@ -1430,59 +1431,110 @@ class PageBuilderClass {
|
|
|
1430
1431
|
}
|
|
1431
1432
|
}
|
|
1432
1433
|
|
|
1433
|
-
|
|
1434
|
-
this.pageBuilderStateStore.setShowModalTipTap(status)
|
|
1435
|
-
|
|
1436
|
-
if (!status) {
|
|
1437
|
-
this.handleAutoSave()
|
|
1438
|
-
}
|
|
1439
|
-
}
|
|
1440
|
-
|
|
1441
|
-
// Private method to parse JSON components
|
|
1434
|
+
// Private method to parse JSON components and save savedAt to localStorage
|
|
1442
1435
|
#parseJSONComponents(jsonData: string): void {
|
|
1436
|
+
console.log(1111)
|
|
1443
1437
|
try {
|
|
1444
1438
|
const parsedData = JSON.parse(jsonData)
|
|
1439
|
+
let componentsArray: ComponentObject[] = []
|
|
1440
|
+
let savedAt: string | undefined = undefined
|
|
1441
|
+
|
|
1442
|
+
// Support both old and new structure
|
|
1443
|
+
if (Array.isArray(parsedData)) {
|
|
1444
|
+
componentsArray = parsedData
|
|
1445
|
+
} else if (parsedData && Array.isArray(parsedData.components)) {
|
|
1446
|
+
componentsArray = parsedData.components
|
|
1447
|
+
savedAt = parsedData.savedAt
|
|
1448
|
+
}
|
|
1449
|
+
|
|
1445
1450
|
let savedCurrentDesign: ComponentObject[] = []
|
|
1446
1451
|
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1452
|
+
if (componentsArray.length > 0) {
|
|
1453
|
+
savedCurrentDesign = componentsArray.map((component: ComponentObject) => {
|
|
1454
|
+
const parser = new DOMParser()
|
|
1455
|
+
const doc = parser.parseFromString(component.html_code, 'text/html')
|
|
1456
|
+
const section = doc.querySelector('section')
|
|
1457
|
+
|
|
1458
|
+
if (section) {
|
|
1459
|
+
// Ensure data-componentid exists
|
|
1460
|
+
if (!section.hasAttribute('data-componentid')) {
|
|
1461
|
+
const newId = uuidv4()
|
|
1462
|
+
section.setAttribute('data-componentid', newId)
|
|
1463
|
+
component.id = newId
|
|
1464
|
+
} else {
|
|
1465
|
+
component.id = section.getAttribute('data-componentid')!
|
|
1466
|
+
}
|
|
1467
|
+
|
|
1468
|
+
// Ensure data-component-title exists
|
|
1469
|
+
const title = component.title || 'Untitled Component'
|
|
1470
|
+
section.setAttribute('data-component-title', title)
|
|
1471
|
+
component.title = title
|
|
1472
|
+
|
|
1473
|
+
// Update html_code with modified section
|
|
1474
|
+
component.html_code = section.outerHTML
|
|
1475
|
+
}
|
|
1476
|
+
|
|
1477
|
+
return component
|
|
1478
|
+
})
|
|
1451
1479
|
}
|
|
1452
1480
|
|
|
1453
1481
|
this.pageBuilderStateStore.setComponents(savedCurrentDesign)
|
|
1482
|
+
|
|
1483
|
+
// Save to localStorage with savedAt using the correct key
|
|
1484
|
+
const dataToSave = {
|
|
1485
|
+
savedAt: savedAt || new Date().toISOString(),
|
|
1486
|
+
components: savedCurrentDesign,
|
|
1487
|
+
}
|
|
1488
|
+
|
|
1489
|
+
if (
|
|
1490
|
+
this.getLocalStorageItemName.value &&
|
|
1491
|
+
typeof this.getLocalStorageItemName.value === 'string'
|
|
1492
|
+
) {
|
|
1493
|
+
localStorage.setItem(this.getLocalStorageItemName.value, JSON.stringify(dataToSave))
|
|
1494
|
+
}
|
|
1454
1495
|
} catch (error) {
|
|
1455
1496
|
console.error('Error parsing JSON components:', error)
|
|
1456
|
-
// Set empty array on error to ensure consistent state
|
|
1457
1497
|
this.pageBuilderStateStore.setComponents([])
|
|
1458
1498
|
}
|
|
1459
1499
|
}
|
|
1460
|
-
|
|
1461
1500
|
// Private method to parse HTML components
|
|
1462
1501
|
#parseHTMLComponents(htmlData: string): void {
|
|
1502
|
+
console.log(2222)
|
|
1463
1503
|
try {
|
|
1464
|
-
// Parse the HTML content using DOMParser
|
|
1465
1504
|
const parser = new DOMParser()
|
|
1466
1505
|
const doc = parser.parseFromString(htmlData, 'text/html')
|
|
1467
1506
|
|
|
1468
|
-
// Select all <section> elements with data-componentid
|
|
1469
|
-
const sectionElements = doc.querySelectorAll('section
|
|
1507
|
+
// Select all <section> elements (with or without data-componentid)
|
|
1508
|
+
const sectionElements = doc.querySelectorAll('section')
|
|
1470
1509
|
|
|
1471
1510
|
const extractedSections: ComponentObject[] = []
|
|
1472
|
-
// Loop through the selected elements and extract outerHTML
|
|
1473
1511
|
sectionElements.forEach((section) => {
|
|
1474
1512
|
const htmlElement = section as HTMLElement
|
|
1513
|
+
|
|
1514
|
+
// Ensure data-componentid exists
|
|
1515
|
+
if (!htmlElement.hasAttribute('data-componentid')) {
|
|
1516
|
+
htmlElement.setAttribute('data-componentid', uuidv4())
|
|
1517
|
+
}
|
|
1518
|
+
const componentId = htmlElement.getAttribute('data-componentid')!
|
|
1519
|
+
|
|
1520
|
+
// Ensure data-component-title exists
|
|
1521
|
+
const title =
|
|
1522
|
+
htmlElement.getAttribute('title') ||
|
|
1523
|
+
htmlElement.getAttribute('data-component-title') ||
|
|
1524
|
+
'Untitled Component'
|
|
1525
|
+
|
|
1526
|
+
htmlElement.setAttribute('data-component-title', title)
|
|
1527
|
+
|
|
1475
1528
|
extractedSections.push({
|
|
1476
1529
|
html_code: htmlElement.outerHTML,
|
|
1477
|
-
id:
|
|
1478
|
-
title:
|
|
1530
|
+
id: componentId,
|
|
1531
|
+
title: title,
|
|
1479
1532
|
})
|
|
1480
1533
|
})
|
|
1481
1534
|
|
|
1482
1535
|
this.pageBuilderStateStore.setComponents(extractedSections)
|
|
1483
1536
|
} catch (error) {
|
|
1484
1537
|
console.error('Error parsing HTML components:', error)
|
|
1485
|
-
// Set empty array on error to ensure consistent state
|
|
1486
1538
|
this.pageBuilderStateStore.setComponents([])
|
|
1487
1539
|
}
|
|
1488
1540
|
}
|
|
@@ -1512,6 +1564,14 @@ class PageBuilderClass {
|
|
|
1512
1564
|
}
|
|
1513
1565
|
}
|
|
1514
1566
|
|
|
1567
|
+
async toggleTipTapModal(status: boolean): Promise<void> {
|
|
1568
|
+
this.pageBuilderStateStore.setShowModalTipTap(status)
|
|
1569
|
+
|
|
1570
|
+
if (!status) {
|
|
1571
|
+
await this.handleAutoSave()
|
|
1572
|
+
}
|
|
1573
|
+
}
|
|
1574
|
+
|
|
1515
1575
|
async handlePageBuilderMethods(): Promise<void> {
|
|
1516
1576
|
await new Promise((resolve) => requestAnimationFrame(resolve))
|
|
1517
1577
|
|