@myissue/vue-website-page-builder 3.2.72 → 3.2.73
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 +6 -3
- 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 +101 -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
|
-
|
|
102
|
-
pageBuilderClass.loadExistingContent(
|
|
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,111 @@ 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('kommer den til 1:')
|
|
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
|
+
this.savedAt = savedAt // Optionally store savedAt in the class
|
|
1449
|
+
}
|
|
1450
|
+
|
|
1445
1451
|
let savedCurrentDesign: ComponentObject[] = []
|
|
1446
1452
|
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1453
|
+
if (componentsArray.length > 0) {
|
|
1454
|
+
savedCurrentDesign = componentsArray.map((component: ComponentObject) => {
|
|
1455
|
+
const parser = new DOMParser()
|
|
1456
|
+
const doc = parser.parseFromString(component.html_code, 'text/html')
|
|
1457
|
+
const section = doc.querySelector('section')
|
|
1458
|
+
|
|
1459
|
+
if (section) {
|
|
1460
|
+
// Ensure data-componentid exists
|
|
1461
|
+
if (!section.hasAttribute('data-componentid')) {
|
|
1462
|
+
const newId = uuidv4()
|
|
1463
|
+
section.setAttribute('data-componentid', newId)
|
|
1464
|
+
component.id = newId
|
|
1465
|
+
} else {
|
|
1466
|
+
component.id = section.getAttribute('data-componentid')!
|
|
1467
|
+
}
|
|
1468
|
+
|
|
1469
|
+
// Ensure data-component-title exists
|
|
1470
|
+
const title = component.title || 'Untitled Component'
|
|
1471
|
+
section.setAttribute('data-component-title', title)
|
|
1472
|
+
component.title = title
|
|
1473
|
+
|
|
1474
|
+
// Update html_code with modified section
|
|
1475
|
+
component.html_code = section.outerHTML
|
|
1476
|
+
}
|
|
1477
|
+
|
|
1478
|
+
return component
|
|
1479
|
+
})
|
|
1451
1480
|
}
|
|
1452
1481
|
|
|
1453
1482
|
this.pageBuilderStateStore.setComponents(savedCurrentDesign)
|
|
1483
|
+
|
|
1484
|
+
// Save to localStorage with savedAt using the correct key
|
|
1485
|
+
const dataToSave = {
|
|
1486
|
+
savedAt: savedAt || new Date().toISOString(),
|
|
1487
|
+
components: savedCurrentDesign,
|
|
1488
|
+
}
|
|
1489
|
+
|
|
1490
|
+
if (
|
|
1491
|
+
this.getLocalStorageItemName.value &&
|
|
1492
|
+
typeof this.getLocalStorageItemName.value === 'string'
|
|
1493
|
+
) {
|
|
1494
|
+
localStorage.setItem(this.getLocalStorageItemName.value, JSON.stringify(dataToSave))
|
|
1495
|
+
}
|
|
1454
1496
|
} catch (error) {
|
|
1455
1497
|
console.error('Error parsing JSON components:', error)
|
|
1456
|
-
// Set empty array on error to ensure consistent state
|
|
1457
1498
|
this.pageBuilderStateStore.setComponents([])
|
|
1458
1499
|
}
|
|
1459
1500
|
}
|
|
1460
|
-
|
|
1461
1501
|
// Private method to parse HTML components
|
|
1462
1502
|
#parseHTMLComponents(htmlData: string): void {
|
|
1503
|
+
console.log(2222)
|
|
1463
1504
|
try {
|
|
1464
|
-
// Parse the HTML content using DOMParser
|
|
1465
1505
|
const parser = new DOMParser()
|
|
1466
1506
|
const doc = parser.parseFromString(htmlData, 'text/html')
|
|
1467
1507
|
|
|
1468
|
-
// Select all <section> elements with data-componentid
|
|
1469
|
-
const sectionElements = doc.querySelectorAll('section
|
|
1508
|
+
// Select all <section> elements (with or without data-componentid)
|
|
1509
|
+
const sectionElements = doc.querySelectorAll('section')
|
|
1470
1510
|
|
|
1471
1511
|
const extractedSections: ComponentObject[] = []
|
|
1472
|
-
// Loop through the selected elements and extract outerHTML
|
|
1473
1512
|
sectionElements.forEach((section) => {
|
|
1474
1513
|
const htmlElement = section as HTMLElement
|
|
1514
|
+
|
|
1515
|
+
// Ensure data-componentid exists
|
|
1516
|
+
if (!htmlElement.hasAttribute('data-componentid')) {
|
|
1517
|
+
htmlElement.setAttribute('data-componentid', uuidv4())
|
|
1518
|
+
}
|
|
1519
|
+
const componentId = htmlElement.getAttribute('data-componentid')!
|
|
1520
|
+
|
|
1521
|
+
// Ensure data-component-title exists
|
|
1522
|
+
const title =
|
|
1523
|
+
htmlElement.getAttribute('title') ||
|
|
1524
|
+
htmlElement.getAttribute('data-component-title') ||
|
|
1525
|
+
'Untitled Component'
|
|
1526
|
+
|
|
1527
|
+
htmlElement.setAttribute('data-component-title', title)
|
|
1528
|
+
|
|
1475
1529
|
extractedSections.push({
|
|
1476
1530
|
html_code: htmlElement.outerHTML,
|
|
1477
|
-
id:
|
|
1478
|
-
title:
|
|
1531
|
+
id: componentId,
|
|
1532
|
+
title: title,
|
|
1479
1533
|
})
|
|
1480
1534
|
})
|
|
1481
1535
|
|
|
1482
1536
|
this.pageBuilderStateStore.setComponents(extractedSections)
|
|
1483
1537
|
} catch (error) {
|
|
1484
1538
|
console.error('Error parsing HTML components:', error)
|
|
1485
|
-
// Set empty array on error to ensure consistent state
|
|
1486
1539
|
this.pageBuilderStateStore.setComponents([])
|
|
1487
1540
|
}
|
|
1488
1541
|
}
|
|
@@ -1512,6 +1565,14 @@ class PageBuilderClass {
|
|
|
1512
1565
|
}
|
|
1513
1566
|
}
|
|
1514
1567
|
|
|
1568
|
+
async toggleTipTapModal(status: boolean): void {
|
|
1569
|
+
this.pageBuilderStateStore.setShowModalTipTap(status)
|
|
1570
|
+
|
|
1571
|
+
if (!status) {
|
|
1572
|
+
await this.handleAutoSave()
|
|
1573
|
+
}
|
|
1574
|
+
}
|
|
1575
|
+
|
|
1515
1576
|
async handlePageBuilderMethods(): Promise<void> {
|
|
1516
1577
|
await new Promise((resolve) => requestAnimationFrame(resolve))
|
|
1517
1578
|
|