@myissue/vue-website-page-builder 3.2.71 → 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 -6424
- package/dist/vue-website-page-builder.umd.cjs +26 -26
- package/package.json +1 -1
- package/src/DemoComponents/HomeSection.vue +6 -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 +101 -67
- 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,7 +100,9 @@ onMounted(async () => {
|
|
|
98
100
|
JSON.stringify(localStorage.getItem(getLocalStorageItemName.value)),
|
|
99
101
|
)
|
|
100
102
|
} else {
|
|
101
|
-
pageBuilderClass.loadExistingContent(JSON.stringify(html), true)
|
|
103
|
+
// pageBuilderClass.loadExistingContent(JSON.stringify(html), true)
|
|
104
|
+
// pageBuilderClass.loadExistingContent(rawHTML, true)
|
|
105
|
+
pageBuilderClass.loadExistingContent(JSON.stringify(oldhtmlfromdb), true)
|
|
102
106
|
}
|
|
103
107
|
}
|
|
104
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,42 +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
|
-
if (
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
|
|
1142
|
-
) {
|
|
1143
|
-
if (
|
|
1144
|
-
typeof this.getLocalStorageItemName.value === 'string' &&
|
|
1145
|
-
this.getLocalStorageItemName.value
|
|
1146
|
-
) {
|
|
1147
|
-
const item = {
|
|
1148
|
-
components: componentsToSave,
|
|
1131
|
+
if (this.getLocalStorageItemName.value) {
|
|
1132
|
+
localStorage.setItem(
|
|
1133
|
+
this.getLocalStorageItemName.value,
|
|
1134
|
+
JSON.stringify({
|
|
1149
1135
|
savedAt: new Date().toISOString(),
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
return
|
|
1154
|
-
}
|
|
1155
|
-
}
|
|
1156
|
-
|
|
1157
|
-
if (
|
|
1158
|
-
typeof this.getLocalStorageItemName.value === 'string' &&
|
|
1159
|
-
this.getLocalStorageItemName.value
|
|
1160
|
-
) {
|
|
1161
|
-
const item = {
|
|
1162
|
-
components: componentsToSave,
|
|
1163
|
-
savedAt: new Date().toISOString(),
|
|
1164
|
-
}
|
|
1165
|
-
localStorage.setItem(this.getLocalStorageItemName.value, JSON.stringify(item))
|
|
1136
|
+
components: componentsToSave,
|
|
1137
|
+
}),
|
|
1138
|
+
)
|
|
1166
1139
|
}
|
|
1167
1140
|
|
|
1168
1141
|
// No DOM mutation here!
|
|
@@ -1425,6 +1398,7 @@ class PageBuilderClass {
|
|
|
1425
1398
|
// Wait for the DOM to update before setting event listeners
|
|
1426
1399
|
await nextTick()
|
|
1427
1400
|
await this.setEventListenersForElements()
|
|
1401
|
+
await this.handleAutoSave()
|
|
1428
1402
|
} catch (error) {
|
|
1429
1403
|
console.error('Error adding component:', error)
|
|
1430
1404
|
}
|
|
@@ -1457,59 +1431,111 @@ class PageBuilderClass {
|
|
|
1457
1431
|
}
|
|
1458
1432
|
}
|
|
1459
1433
|
|
|
1460
|
-
|
|
1461
|
-
this.pageBuilderStateStore.setShowModalTipTap(status)
|
|
1462
|
-
|
|
1463
|
-
if (!status) {
|
|
1464
|
-
this.handleAutoSave()
|
|
1465
|
-
}
|
|
1466
|
-
}
|
|
1467
|
-
|
|
1468
|
-
// Private method to parse JSON components
|
|
1434
|
+
// Private method to parse JSON components and save savedAt to localStorage
|
|
1469
1435
|
#parseJSONComponents(jsonData: string): void {
|
|
1436
|
+
console.log('kommer den til 1:')
|
|
1470
1437
|
try {
|
|
1471
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
|
+
|
|
1472
1451
|
let savedCurrentDesign: ComponentObject[] = []
|
|
1473
1452
|
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
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
|
+
})
|
|
1478
1480
|
}
|
|
1479
1481
|
|
|
1480
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
|
+
}
|
|
1481
1496
|
} catch (error) {
|
|
1482
1497
|
console.error('Error parsing JSON components:', error)
|
|
1483
|
-
// Set empty array on error to ensure consistent state
|
|
1484
1498
|
this.pageBuilderStateStore.setComponents([])
|
|
1485
1499
|
}
|
|
1486
1500
|
}
|
|
1487
|
-
|
|
1488
1501
|
// Private method to parse HTML components
|
|
1489
1502
|
#parseHTMLComponents(htmlData: string): void {
|
|
1503
|
+
console.log(2222)
|
|
1490
1504
|
try {
|
|
1491
|
-
// Parse the HTML content using DOMParser
|
|
1492
1505
|
const parser = new DOMParser()
|
|
1493
1506
|
const doc = parser.parseFromString(htmlData, 'text/html')
|
|
1494
1507
|
|
|
1495
|
-
// Select all <section> elements with data-componentid
|
|
1496
|
-
const sectionElements = doc.querySelectorAll('section
|
|
1508
|
+
// Select all <section> elements (with or without data-componentid)
|
|
1509
|
+
const sectionElements = doc.querySelectorAll('section')
|
|
1497
1510
|
|
|
1498
1511
|
const extractedSections: ComponentObject[] = []
|
|
1499
|
-
// Loop through the selected elements and extract outerHTML
|
|
1500
1512
|
sectionElements.forEach((section) => {
|
|
1501
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
|
+
|
|
1502
1529
|
extractedSections.push({
|
|
1503
1530
|
html_code: htmlElement.outerHTML,
|
|
1504
|
-
id:
|
|
1505
|
-
title:
|
|
1531
|
+
id: componentId,
|
|
1532
|
+
title: title,
|
|
1506
1533
|
})
|
|
1507
1534
|
})
|
|
1508
1535
|
|
|
1509
1536
|
this.pageBuilderStateStore.setComponents(extractedSections)
|
|
1510
1537
|
} catch (error) {
|
|
1511
1538
|
console.error('Error parsing HTML components:', error)
|
|
1512
|
-
// Set empty array on error to ensure consistent state
|
|
1513
1539
|
this.pageBuilderStateStore.setComponents([])
|
|
1514
1540
|
}
|
|
1515
1541
|
}
|
|
@@ -1539,6 +1565,14 @@ class PageBuilderClass {
|
|
|
1539
1565
|
}
|
|
1540
1566
|
}
|
|
1541
1567
|
|
|
1568
|
+
async toggleTipTapModal(status: boolean): void {
|
|
1569
|
+
this.pageBuilderStateStore.setShowModalTipTap(status)
|
|
1570
|
+
|
|
1571
|
+
if (!status) {
|
|
1572
|
+
await this.handleAutoSave()
|
|
1573
|
+
}
|
|
1574
|
+
}
|
|
1575
|
+
|
|
1542
1576
|
async handlePageBuilderMethods(): Promise<void> {
|
|
1543
1577
|
await new Promise((resolve) => requestAnimationFrame(resolve))
|
|
1544
1578
|
|