@myissue/vue-website-page-builder 3.3.61 → 3.3.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/vue-website-page-builder.js +4151 -4138
  2. package/dist/vue-website-page-builder.umd.cjs +32 -32
  3. package/package.json +5 -2
  4. package/src/App.vue +2 -2
  5. package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +1 -1
  6. package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +1 -1
  7. package/src/composables/builderInstance.ts +1 -1
  8. package/src/index.ts +1 -1
  9. package/src/services/LocalStorageManager.ts +162 -0
  10. package/src/{composables → services}/PageBuilderService.ts +17 -159
  11. package/src/{DemoComponents/HomeSection.vue → tests/PageBuilderTest.vue} +7 -10
  12. package/src/{DemoComponents/DemoMediaLibraryComponent.vue → tests/TestComponents/DemoMediaLibraryComponentTest.vue} +1 -1
  13. package/src/tests/pageBuilderService.test.ts +66 -0
  14. package/src/types/index.ts +1 -1
  15. package/src/DemoComponents/oldhtmlfromdb.json +0 -46
  16. package/src/DemoComponents/rawHTML.ts +0 -143
  17. /package/src/{DemoComponents → Components}/DemoUnsplash.vue +0 -0
  18. /package/src/{DemoComponents/DemoBuilderComponents.vue → tests/TestComponents/DemoBuilderComponentsTest.vue} +0 -0
  19. /package/src/{DemoComponents/html.json → tests/componentsArray.test.json} +0 -0
package/src/DemoComponents/oldhtmlfromdb.json DELETED
@@ -1,46 +0,0 @@
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 &amp; Drop Page Builder create and enhance digital experiences with Vue. Not everything powerful has to look complicated. Lightweight &amp; 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 &amp; 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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;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
- ]
package/src/DemoComponents/rawHTML.ts DELETED
@@ -1,143 +0,0 @@
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 &amp; Drop Page Builder create and enhance
16
- digital experiences with Vue. Not everything powerful has to look complicated. Lightweight
17
- &amp; 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 &amp; 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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&amp;ixlib=rb-4.1.0&amp;q=80&amp;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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;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&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;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
- `