@myissue/vue-website-page-builder 3.3.11 → 3.3.13
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/README.md +118 -131
- package/dist/vue-website-page-builder.css +1 -1
- package/dist/vue-website-page-builder.js +5382 -5317
- package/dist/vue-website-page-builder.umd.cjs +38 -38
- package/package.json +1 -1
- package/src/Components/Loaders/GlobalLoader.vue +1 -1
- package/src/Components/Modals/ModalBuilder.vue +2 -2
- package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue +4 -4
- package/src/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue +2 -2
- package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue +2 -2
- package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +4 -4
- package/src/DemoComponents/HomeSection.vue +7 -3
- package/src/DemoComponents/html.json +46 -48
- package/src/PageBuilder/PageBuilder.vue +30 -27
- package/src/composables/PageBuilderService.ts +470 -337
- package/src/helpers/isEmptyObject.ts +1 -1
- package/src/stores/page-builder-state.ts +1 -1
- package/src/tailwind-safelist.html +1 -1
- package/src/types/index.ts +10 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="pbx-bg-white pbx-flex pbx-justify-center pbx-items-center pbx-h-screen pbx-w-screen pbx-fixed pbx-inset-0 pbx-z-[10000]"
|
|
3
|
+
class="pbx-bg-white pbx-flex pbx-justify-center pbx-items-center min-pbx-h-screen pbx-h-screen pbx-w-screen pbx-fixed pbx-inset-0 pbx-z-[10000]"
|
|
4
4
|
>
|
|
5
5
|
<div class="pbx-absolute pbx-top-1/3">
|
|
6
6
|
<div
|
|
@@ -24,7 +24,7 @@ const props = defineProps({
|
|
|
24
24
|
maxHeight: {
|
|
25
25
|
type: String,
|
|
26
26
|
},
|
|
27
|
-
|
|
27
|
+
noBackgroundOpacity: {
|
|
28
28
|
type: Boolean,
|
|
29
29
|
},
|
|
30
30
|
})
|
|
@@ -67,7 +67,7 @@ const maxWidthClass = computed(() => {
|
|
|
67
67
|
<!-- Backdrop -->
|
|
68
68
|
<div
|
|
69
69
|
class="pbx-fixed pbx-inset-0 pbx-bg-black/50 pbx-transition-opacity"
|
|
70
|
-
:class="[
|
|
70
|
+
:class="[noBackgroundOpacity ? 'pbx-bg-black/100' : '']"
|
|
71
71
|
@click="handleClose"
|
|
72
72
|
></div>
|
|
73
73
|
|
|
@@ -19,7 +19,7 @@ const secondModalButtonFunctionDynamicModalBuilder = ref(null)
|
|
|
19
19
|
const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
|
|
20
20
|
|
|
21
21
|
// remove component
|
|
22
|
-
const
|
|
22
|
+
const handleDelete = function () {
|
|
23
23
|
showModalDeleteComponent.value = true
|
|
24
24
|
typeModal.value = 'delete'
|
|
25
25
|
gridColumnModal.value = 2
|
|
@@ -35,8 +35,8 @@ const deleteSelectedComponent = function () {
|
|
|
35
35
|
}
|
|
36
36
|
//
|
|
37
37
|
// handle click
|
|
38
|
-
thirdModalButtonFunctionDynamicModalBuilder.value = function () {
|
|
39
|
-
pageBuilderService.
|
|
38
|
+
thirdModalButtonFunctionDynamicModalBuilder.value = async function () {
|
|
39
|
+
await pageBuilderService.deleteComponentFromDOM()
|
|
40
40
|
|
|
41
41
|
showModalDeleteComponent.value = false
|
|
42
42
|
}
|
|
@@ -64,7 +64,7 @@ const deleteSelectedComponent = function () {
|
|
|
64
64
|
<div class="pbx-flex pbx-flex-col pbx-items-center pbx-justify-center pbx-myPrimaryGap">
|
|
65
65
|
<div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
|
|
66
66
|
<div
|
|
67
|
-
@click="
|
|
67
|
+
@click="handleDelete()"
|
|
68
68
|
class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryErrorColor hover:pbx-text-white pbx-text-myPrimaryErrorColor"
|
|
69
69
|
>
|
|
70
70
|
<span class="material-symbols-outlined"> delete_forever </span>
|
|
@@ -20,7 +20,7 @@ const getRestoredElement = computed(() => {
|
|
|
20
20
|
<div class="pbx-my-2">
|
|
21
21
|
<button
|
|
22
22
|
v-if="getRestoredElement !== null"
|
|
23
|
-
@click="pageBuilderService.
|
|
23
|
+
@click="pageBuilderService.restoreDeletedElementToDOM"
|
|
24
24
|
type="button"
|
|
25
25
|
class="pbx-myPrimaryButton pbx-gap-2 pbx-items-center pbx-w-full"
|
|
26
26
|
>
|
|
@@ -29,7 +29,7 @@ const getRestoredElement = computed(() => {
|
|
|
29
29
|
</button>
|
|
30
30
|
<button
|
|
31
31
|
v-if="getRestoredElement === null"
|
|
32
|
-
@click="pageBuilderService.
|
|
32
|
+
@click="pageBuilderService.deleteElementFromDOM"
|
|
33
33
|
type="button"
|
|
34
34
|
class="pbx-myPrimaryDeleteButton pbx-gap-2 pbx-items-center pbx-w-full"
|
|
35
35
|
>
|
|
@@ -29,7 +29,7 @@ const getRestoredElement = computed(() => {
|
|
|
29
29
|
<label class="pbx-myPrimaryInputLabel"> Restore the last deleted HTML element.</label>
|
|
30
30
|
<div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
|
|
31
31
|
<button
|
|
32
|
-
@click="pageBuilderService.
|
|
32
|
+
@click="pageBuilderService.restoreDeletedElementToDOM"
|
|
33
33
|
type="button"
|
|
34
34
|
class="pbx-myPrimaryButton pbx-w-full pbx-mt-4"
|
|
35
35
|
>
|
|
@@ -48,7 +48,7 @@ const getRestoredElement = computed(() => {
|
|
|
48
48
|
|
|
49
49
|
<div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
|
|
50
50
|
<button
|
|
51
|
-
@click="pageBuilderService.
|
|
51
|
+
@click="pageBuilderService.deleteElementFromDOM"
|
|
52
52
|
type="button"
|
|
53
53
|
class="pbx-myPrimaryDeleteButton pbx-w-full pbx-mt-4"
|
|
54
54
|
>
|
|
@@ -35,7 +35,7 @@ const firstModalButtonFunctionDynamicModalBuilder = ref(null)
|
|
|
35
35
|
const secondModalButtonFunctionDynamicModalBuilder = ref(null)
|
|
36
36
|
const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
|
|
37
37
|
|
|
38
|
-
const
|
|
38
|
+
const deleteAllComponentsFromDOM = function () {
|
|
39
39
|
showModalDeleteAllComponents.value = true
|
|
40
40
|
typeModal.value = 'delete'
|
|
41
41
|
gridColumnModal.value = 2
|
|
@@ -53,9 +53,9 @@ const deleteAllComponents = function () {
|
|
|
53
53
|
// handle click
|
|
54
54
|
thirdModalButtonFunctionDynamicModalBuilder.value = async function () {
|
|
55
55
|
isDeletingLayout.value = true
|
|
56
|
-
pageBuilderService.
|
|
56
|
+
pageBuilderService.deleteAllComponentsFromDOM()
|
|
57
57
|
await pageBuilderService.clearHtmlSelection()
|
|
58
|
-
await pageBuilderService.
|
|
58
|
+
await pageBuilderService.removeCurrentComponentsFromLocalStorage()
|
|
59
59
|
|
|
60
60
|
await delay(500)
|
|
61
61
|
showModalDeleteAllComponents.value = false
|
|
@@ -188,7 +188,7 @@ const openHTMLSettings = function () {
|
|
|
188
188
|
|
|
189
189
|
<!-- Delete Layout Start -->
|
|
190
190
|
<button
|
|
191
|
-
@click="
|
|
191
|
+
@click="deleteAllComponentsFromDOM"
|
|
192
192
|
class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-font-normal pbx-w-max pbx-border-none pbx-m-0 pbx-bg-myPrimaryErrorColor pbx-text-white"
|
|
193
193
|
type="button"
|
|
194
194
|
>
|
|
@@ -61,7 +61,7 @@ const configPageBuilder = {
|
|
|
61
61
|
image: '/jane_doe.jpg',
|
|
62
62
|
},
|
|
63
63
|
updateOrCreate: {
|
|
64
|
-
formType: '
|
|
64
|
+
formType: 'update',
|
|
65
65
|
formName: 'collection',
|
|
66
66
|
},
|
|
67
67
|
pageBuilderLogo: {
|
|
@@ -82,8 +82,12 @@ const configPageBuilder = {
|
|
|
82
82
|
} as const
|
|
83
83
|
|
|
84
84
|
onMounted(async () => {
|
|
85
|
-
await pageBuilderService.startBuilder(configPageBuilder)
|
|
86
|
-
|
|
85
|
+
const result = await pageBuilderService.startBuilder(configPageBuilder, html)
|
|
86
|
+
//
|
|
87
|
+
//
|
|
88
|
+
//
|
|
89
|
+
//
|
|
90
|
+
// await pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
|
|
87
91
|
// await pageBuilderService.mountComponentsToDOM(JSON.stringify(oldhtmlfromdb))
|
|
88
92
|
// await pageBuilderService.mountComponentsToDOM(rawHTML)
|
|
89
93
|
})
|
|
@@ -1,48 +1,46 @@
|
|
|
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
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
]
|
|
48
|
-
}
|
|
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=\"pbx-break-words pbx-text-5xl\"><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 m\"><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=\"pbx-break-words pbx-text-3xl mt-6\"><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=\"pbx-break-words pbx-text-3xl mt-6\"><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
|
+
]
|
|
@@ -200,7 +200,8 @@ const handlerRumeEditingForUpdate = async function () {
|
|
|
200
200
|
secondButtonResumeEditing.value = null
|
|
201
201
|
thirdButtonResumeEditing.value = 'Continue Where I Left Off'
|
|
202
202
|
|
|
203
|
-
firstModalButtonResumeEditingFunction.value = function () {
|
|
203
|
+
firstModalButtonResumeEditingFunction.value = async function () {
|
|
204
|
+
pageBuilderStateStore.setHasLocalDraftForUpdate(false)
|
|
204
205
|
showModalResumeEditing.value = false
|
|
205
206
|
}
|
|
206
207
|
|
|
@@ -208,6 +209,7 @@ const handlerRumeEditingForUpdate = async function () {
|
|
|
208
209
|
|
|
209
210
|
thirdModalButtonResumeEditingFunction.value = async function () {
|
|
210
211
|
await pageBuilderService.resumeEditingForUpdate()
|
|
212
|
+
pageBuilderStateStore.setHasLocalDraftForUpdate(false)
|
|
211
213
|
|
|
212
214
|
showModalResumeEditing.value = false
|
|
213
215
|
}
|
|
@@ -233,12 +235,12 @@ const handleRestoreOriginalContent = async function () {
|
|
|
233
235
|
typeModalRestore.value = 'success'
|
|
234
236
|
showModalRestore.value = true
|
|
235
237
|
|
|
236
|
-
titleModalRestore.value = 'Do you want to
|
|
238
|
+
titleModalRestore.value = 'Do you want to reset this page?'
|
|
237
239
|
descriptionModalRestore.value =
|
|
238
|
-
'Are you sure you want to
|
|
240
|
+
'Are you sure you want to reset this page? This will overwrite your current page work.'
|
|
239
241
|
firstButtonRestore.value = 'Close'
|
|
240
242
|
secondButtonRestore.value = null
|
|
241
|
-
thirdButtonRestore.value = '
|
|
243
|
+
thirdButtonRestore.value = 'Reset changes'
|
|
242
244
|
|
|
243
245
|
firstModalButtonRestoreFunction.value = function () {
|
|
244
246
|
showModalRestore.value = false
|
|
@@ -260,8 +262,7 @@ const ensureBuilderInitialized = function () {
|
|
|
260
262
|
}
|
|
261
263
|
|
|
262
264
|
onMounted(async () => {
|
|
263
|
-
await pageBuilderService.
|
|
264
|
-
|
|
265
|
+
await pageBuilderService.tryMountPendingComponents()
|
|
265
266
|
// Check if Builder started
|
|
266
267
|
await delay(10000)
|
|
267
268
|
ensureBuilderInitialized()
|
|
@@ -269,16 +270,31 @@ onMounted(async () => {
|
|
|
269
270
|
// Re-check if Builder started
|
|
270
271
|
await delay(10000)
|
|
271
272
|
ensureBuilderInitialized()
|
|
273
|
+
|
|
274
|
+
// Re-check again if Builder started
|
|
275
|
+
await delay(10000)
|
|
276
|
+
ensureBuilderInitialized()
|
|
272
277
|
})
|
|
273
278
|
</script>
|
|
274
279
|
|
|
275
280
|
<template>
|
|
276
281
|
<div
|
|
277
|
-
id="builder-container"
|
|
278
282
|
class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-scroll"
|
|
279
283
|
>
|
|
280
284
|
<div id="pagebuilder-top-area" class="lg:pbx-px-4 pbx-pt-2 pbx-pb-4 pbx-mx-4 pbx-mb-4 pbx-mt-2">
|
|
281
|
-
<GlobalLoader v-if="getIsLoadingGlobal"></GlobalLoader>
|
|
285
|
+
<GlobalLoader v-if="getIsLoadingGlobal & !openAppNotStartedModal"></GlobalLoader>
|
|
286
|
+
<ModalBuilder
|
|
287
|
+
title="The builder hasn’t started yet"
|
|
288
|
+
:showModalBuilder="openAppNotStartedModal"
|
|
289
|
+
@closeMainModalBuilder="handlAppNotStartedModal"
|
|
290
|
+
type="delete"
|
|
291
|
+
maxWidth="2xl"
|
|
292
|
+
:noBackgroundOpacity="true"
|
|
293
|
+
>
|
|
294
|
+
The builder hasn’t started yet. If this screen doesn’t go away soon, it may just need a
|
|
295
|
+
little setup in the background. You can safely contact support and ask them to initialize
|
|
296
|
+
the builder by running the startBuilder method for this resource.
|
|
297
|
+
</ModalBuilder>
|
|
282
298
|
<div
|
|
283
299
|
@click.self="pageBuilderService.clearHtmlSelection()"
|
|
284
300
|
class="pbx-min-h-24 pbx-flex pbx-justify-between pbx-items-center pbx-pb-2 pbx-border-b pbx-border-gray-200"
|
|
@@ -367,25 +383,12 @@ onMounted(async () => {
|
|
|
367
383
|
<main></main>
|
|
368
384
|
</DynamicModalBuilder>
|
|
369
385
|
|
|
370
|
-
<ModalBuilder
|
|
371
|
-
title="The builder hasn’t started yet"
|
|
372
|
-
:showModalBuilder="openAppNotStartedModal"
|
|
373
|
-
@closeMainModalBuilder="handlAppNotStartedModal"
|
|
374
|
-
type="delete"
|
|
375
|
-
maxWidth="2xl"
|
|
376
|
-
:backgroundOpacity="true"
|
|
377
|
-
>
|
|
378
|
-
The builder hasn’t started yet. If this screen doesn’t go away soon, it may just need a little
|
|
379
|
-
setup in the background. You can safely contact support and ask them to initialize the builder
|
|
380
|
-
by running the start method.
|
|
381
|
-
</ModalBuilder>
|
|
382
|
-
|
|
383
386
|
<div>
|
|
384
387
|
<div class="pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2">
|
|
385
388
|
<div
|
|
386
389
|
@click.self="pageBuilderService.clearHtmlSelection()"
|
|
387
390
|
id="pagebuilder-left-area"
|
|
388
|
-
class="pbx-min-w-[3.5rem] pbx-pt-
|
|
391
|
+
class="pbx-min-w-[3.5rem] pbx-pt-7 pbx-pb-2 pbx-ml-2 pbx-bg-myPrimaryLightGrayColor pbx-rounded-full pbx-shadow-sm"
|
|
389
392
|
>
|
|
390
393
|
<div class="pbx-mx-2 pbx-flex pbx-flex-col pbx-myPrimaryGap pbx-items-stretch">
|
|
391
394
|
<div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
|
|
@@ -413,11 +416,11 @@ onMounted(async () => {
|
|
|
413
416
|
>
|
|
414
417
|
<div
|
|
415
418
|
id="pagebuilder-toolbar-area"
|
|
416
|
-
class="pbx-flex pbx-items-center pbx-justify-between pbx-rounded-t-2xl pbx-bg-myPrimaryLightGrayColor pbx-
|
|
419
|
+
class="pbx-flex pbx-items-center pbx-justify-between pbx-rounded-t-2xl pbx-min-w-[30rem] pbx-bg-myPrimaryLightGrayColor pbx-border-b pbx-border-gray-200"
|
|
417
420
|
>
|
|
418
421
|
<div
|
|
419
422
|
@click.self="pageBuilderService.clearHtmlSelection()"
|
|
420
|
-
class="pbx-flex pbx-myPrimaryGap pbx-items-center pbx-pt-
|
|
423
|
+
class="pbx-min-w-max pbx-pr-2 pbx-flex pbx-myPrimaryGap pbx-items-center pbx-pt-2 pbx-pb-2 pbx-pl-2 pbx-h-24 pbx-w-full"
|
|
421
424
|
>
|
|
422
425
|
<!-- Save Start -->
|
|
423
426
|
<button
|
|
@@ -492,8 +495,8 @@ onMounted(async () => {
|
|
|
492
495
|
></span>
|
|
493
496
|
</span>
|
|
494
497
|
</div>
|
|
495
|
-
<div>
|
|
496
|
-
<span
|
|
498
|
+
<div class="lg:pbx-block pbx-hidden">
|
|
499
|
+
<span> Reset Page </span>
|
|
497
500
|
</div>
|
|
498
501
|
</button>
|
|
499
502
|
</template>
|
|
@@ -620,7 +623,7 @@ onMounted(async () => {
|
|
|
620
623
|
<button
|
|
621
624
|
@click="
|
|
622
625
|
() => {
|
|
623
|
-
pageBuilderStateStore.setComponentArrayAddMethod('
|
|
626
|
+
pageBuilderStateStore.setComponentArrayAddMethod('unshift')
|
|
624
627
|
handleAddComponent()
|
|
625
628
|
}
|
|
626
629
|
"
|