@myissue/vue-website-page-builder 3.3.12 → 3.3.14
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 +14 -26
- package/dist/vue-website-page-builder.css +1 -1
- package/dist/vue-website-page-builder.js +5105 -5071
- package/dist/vue-website-page-builder.umd.cjs +37 -37
- 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/ToolbarOption/ToolbarOption.vue +2 -2
- package/src/DemoComponents/HomeSection.vue +6 -3
- package/src/DemoComponents/html.json +46 -48
- package/src/PageBuilder/PageBuilder.vue +85 -39
- package/src/composables/PageBuilderService.ts +296 -273
- package/src/stores/page-builder-state.ts +1 -1
- package/src/tailwind-safelist.html +1 -1
- package/src/types/index.ts +2 -4
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
|
|
|
@@ -164,8 +164,8 @@ const openHTMLSettings = function () {
|
|
|
164
164
|
<!-- Main Settings Start -->
|
|
165
165
|
<button
|
|
166
166
|
@click="
|
|
167
|
-
() => {
|
|
168
|
-
pageBuilderService.clearHtmlSelection()
|
|
167
|
+
async () => {
|
|
168
|
+
await pageBuilderService.clearHtmlSelection()
|
|
169
169
|
openMainSettings()
|
|
170
170
|
}
|
|
171
171
|
"
|
|
@@ -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,11 @@ const configPageBuilder = {
|
|
|
82
82
|
} as const
|
|
83
83
|
|
|
84
84
|
onMounted(async () => {
|
|
85
|
-
const
|
|
86
|
-
|
|
85
|
+
const result = await pageBuilderService.startBuilder(configPageBuilder, html)
|
|
86
|
+
//
|
|
87
|
+
//
|
|
88
|
+
//
|
|
89
|
+
//
|
|
87
90
|
// await pageBuilderService.mountComponentsToDOM(JSON.stringify(html))
|
|
88
91
|
// await pageBuilderService.mountComponentsToDOM(JSON.stringify(oldhtmlfromdb))
|
|
89
92
|
// await pageBuilderService.mountComponentsToDOM(rawHTML)
|
|
@@ -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
|
+
]
|
|
@@ -149,7 +149,6 @@ watch(getElementAttributes, async (newAttributes, oldAttributes) => {
|
|
|
149
149
|
newAttributes?.dataImage !== oldAttributes?.dataImage
|
|
150
150
|
) {
|
|
151
151
|
debounce(async () => {
|
|
152
|
-
await pageBuilderService.handleAutoSave()
|
|
153
152
|
await pageBuilderService.initializeElementStyles()
|
|
154
153
|
}, 200)
|
|
155
154
|
}
|
|
@@ -200,7 +199,8 @@ const handlerRumeEditingForUpdate = async function () {
|
|
|
200
199
|
secondButtonResumeEditing.value = null
|
|
201
200
|
thirdButtonResumeEditing.value = 'Continue Where I Left Off'
|
|
202
201
|
|
|
203
|
-
firstModalButtonResumeEditingFunction.value = function () {
|
|
202
|
+
firstModalButtonResumeEditingFunction.value = async function () {
|
|
203
|
+
pageBuilderStateStore.setHasLocalDraftForUpdate(false)
|
|
204
204
|
showModalResumeEditing.value = false
|
|
205
205
|
}
|
|
206
206
|
|
|
@@ -208,6 +208,7 @@ const handlerRumeEditingForUpdate = async function () {
|
|
|
208
208
|
|
|
209
209
|
thirdModalButtonResumeEditingFunction.value = async function () {
|
|
210
210
|
await pageBuilderService.resumeEditingForUpdate()
|
|
211
|
+
pageBuilderStateStore.setHasLocalDraftForUpdate(false)
|
|
211
212
|
|
|
212
213
|
showModalResumeEditing.value = false
|
|
213
214
|
}
|
|
@@ -233,12 +234,12 @@ const handleRestoreOriginalContent = async function () {
|
|
|
233
234
|
typeModalRestore.value = 'success'
|
|
234
235
|
showModalRestore.value = true
|
|
235
236
|
|
|
236
|
-
titleModalRestore.value = 'Do you want to
|
|
237
|
+
titleModalRestore.value = 'Do you want to reset this page?'
|
|
237
238
|
descriptionModalRestore.value =
|
|
238
|
-
'Are you sure you want to
|
|
239
|
+
'Are you sure you want to reset this page? This will overwrite your current changes.'
|
|
239
240
|
firstButtonRestore.value = 'Close'
|
|
240
241
|
secondButtonRestore.value = null
|
|
241
|
-
thirdButtonRestore.value = '
|
|
242
|
+
thirdButtonRestore.value = 'Reset changes'
|
|
242
243
|
|
|
243
244
|
firstModalButtonRestoreFunction.value = function () {
|
|
244
245
|
showModalRestore.value = false
|
|
@@ -260,9 +261,7 @@ const ensureBuilderInitialized = function () {
|
|
|
260
261
|
}
|
|
261
262
|
|
|
262
263
|
onMounted(async () => {
|
|
263
|
-
await pageBuilderService.
|
|
264
|
-
await pageBuilderService.ensureBuilderInitializedForUpdate()
|
|
265
|
-
|
|
264
|
+
await pageBuilderService.tryMountPendingComponents()
|
|
266
265
|
// Check if Builder started
|
|
267
266
|
await delay(10000)
|
|
268
267
|
ensureBuilderInitialized()
|
|
@@ -270,6 +269,10 @@ onMounted(async () => {
|
|
|
270
269
|
// Re-check if Builder started
|
|
271
270
|
await delay(10000)
|
|
272
271
|
ensureBuilderInitialized()
|
|
272
|
+
|
|
273
|
+
// Re-check again if Builder started
|
|
274
|
+
await delay(10000)
|
|
275
|
+
ensureBuilderInitialized()
|
|
273
276
|
})
|
|
274
277
|
</script>
|
|
275
278
|
|
|
@@ -278,13 +281,35 @@ onMounted(async () => {
|
|
|
278
281
|
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
282
|
>
|
|
280
283
|
<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>
|
|
284
|
+
<GlobalLoader v-if="getIsLoadingGlobal & !openAppNotStartedModal"></GlobalLoader>
|
|
285
|
+
<ModalBuilder
|
|
286
|
+
title="The builder hasn’t started yet"
|
|
287
|
+
:showModalBuilder="openAppNotStartedModal"
|
|
288
|
+
@closeMainModalBuilder="handlAppNotStartedModal"
|
|
289
|
+
type="delete"
|
|
290
|
+
maxWidth="2xl"
|
|
291
|
+
:noBackgroundOpacity="true"
|
|
292
|
+
>
|
|
293
|
+
The builder hasn’t started yet. If this screen doesn’t go away soon, it may just need a
|
|
294
|
+
little setup in the background. You can safely contact support and ask them to initialize
|
|
295
|
+
the builder by running the startBuilder method for this resource.
|
|
296
|
+
</ModalBuilder>
|
|
282
297
|
<div
|
|
283
|
-
@click.self="
|
|
298
|
+
@click.self="
|
|
299
|
+
async () => {
|
|
300
|
+
await pageBuilderService.clearHtmlSelection()
|
|
301
|
+
}
|
|
302
|
+
"
|
|
284
303
|
class="pbx-min-h-24 pbx-flex pbx-justify-between pbx-items-center pbx-pb-2 pbx-border-b pbx-border-gray-200"
|
|
285
304
|
>
|
|
286
305
|
<!-- Logo # start -->
|
|
287
|
-
<div
|
|
306
|
+
<div
|
|
307
|
+
@click="
|
|
308
|
+
async () => {
|
|
309
|
+
await pageBuilderService.clearHtmlSelection()
|
|
310
|
+
}
|
|
311
|
+
"
|
|
312
|
+
>
|
|
288
313
|
<div
|
|
289
314
|
v-if="
|
|
290
315
|
getPageBuilderConfig &&
|
|
@@ -367,25 +392,16 @@ onMounted(async () => {
|
|
|
367
392
|
<main></main>
|
|
368
393
|
</DynamicModalBuilder>
|
|
369
394
|
|
|
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
395
|
<div>
|
|
384
396
|
<div class="pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2">
|
|
385
397
|
<div
|
|
386
|
-
@click.self="
|
|
398
|
+
@click.self="
|
|
399
|
+
async () => {
|
|
400
|
+
await pageBuilderService.clearHtmlSelection()
|
|
401
|
+
}
|
|
402
|
+
"
|
|
387
403
|
id="pagebuilder-left-area"
|
|
388
|
-
class="pbx-min-w-[3.5rem] pbx-pt-
|
|
404
|
+
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
405
|
>
|
|
390
406
|
<div class="pbx-mx-2 pbx-flex pbx-flex-col pbx-myPrimaryGap pbx-items-stretch">
|
|
391
407
|
<div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
|
|
@@ -402,7 +418,13 @@ onMounted(async () => {
|
|
|
402
418
|
<span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
|
|
403
419
|
</button>
|
|
404
420
|
</div>
|
|
405
|
-
<div
|
|
421
|
+
<div
|
|
422
|
+
@click.self="
|
|
423
|
+
async () => {
|
|
424
|
+
await pageBuilderService.clearHtmlSelection()
|
|
425
|
+
}
|
|
426
|
+
"
|
|
427
|
+
>
|
|
406
428
|
<ComponentTopMenu v-if="getElement"></ComponentTopMenu>
|
|
407
429
|
</div>
|
|
408
430
|
</div>
|
|
@@ -413,11 +435,15 @@ onMounted(async () => {
|
|
|
413
435
|
>
|
|
414
436
|
<div
|
|
415
437
|
id="pagebuilder-toolbar-area"
|
|
416
|
-
class="pbx-flex pbx-items-center pbx-justify-between pbx-rounded-t-2xl pbx-bg-myPrimaryLightGrayColor pbx-
|
|
438
|
+
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
439
|
>
|
|
418
440
|
<div
|
|
419
|
-
@click.self="
|
|
420
|
-
|
|
441
|
+
@click.self="
|
|
442
|
+
async () => {
|
|
443
|
+
await pageBuilderService.clearHtmlSelection()
|
|
444
|
+
}
|
|
445
|
+
"
|
|
446
|
+
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
447
|
>
|
|
422
448
|
<!-- Save Start -->
|
|
423
449
|
<button
|
|
@@ -492,8 +518,8 @@ onMounted(async () => {
|
|
|
492
518
|
></span>
|
|
493
519
|
</span>
|
|
494
520
|
</div>
|
|
495
|
-
<div>
|
|
496
|
-
<span
|
|
521
|
+
<div class="lg:pbx-block pbx-hidden">
|
|
522
|
+
<span> Reset Page </span>
|
|
497
523
|
</div>
|
|
498
524
|
</button>
|
|
499
525
|
</template>
|
|
@@ -501,11 +527,19 @@ onMounted(async () => {
|
|
|
501
527
|
</div>
|
|
502
528
|
|
|
503
529
|
<div
|
|
504
|
-
@click.self="
|
|
530
|
+
@click.self="
|
|
531
|
+
async () => {
|
|
532
|
+
await pageBuilderService.clearHtmlSelection()
|
|
533
|
+
}
|
|
534
|
+
"
|
|
505
535
|
class="pbx-flex pbx-justify-end pbx-py-2 pbx-pr-2 pbx-h-24 pbx-w-full"
|
|
506
536
|
>
|
|
507
537
|
<div
|
|
508
|
-
@click.self="
|
|
538
|
+
@click.self="
|
|
539
|
+
async () => {
|
|
540
|
+
await pageBuilderService.clearHtmlSelection()
|
|
541
|
+
}
|
|
542
|
+
"
|
|
509
543
|
class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
|
|
510
544
|
>
|
|
511
545
|
<button
|
|
@@ -532,10 +566,10 @@ onMounted(async () => {
|
|
|
532
566
|
<button
|
|
533
567
|
type="button"
|
|
534
568
|
@click="
|
|
535
|
-
() => {
|
|
569
|
+
async () => {
|
|
536
570
|
pageBuilderStateStore.setMenuRight(false)
|
|
537
571
|
pageBuilderStateStore.setElement(null)
|
|
538
|
-
pageBuilderService.clearHtmlSelection()
|
|
572
|
+
await pageBuilderService.clearHtmlSelection()
|
|
539
573
|
handlePageBuilderPreview()
|
|
540
574
|
}
|
|
541
575
|
"
|
|
@@ -555,11 +589,19 @@ onMounted(async () => {
|
|
|
555
589
|
</div>
|
|
556
590
|
|
|
557
591
|
<div
|
|
558
|
-
@click.self="
|
|
592
|
+
@click.self="
|
|
593
|
+
async () => {
|
|
594
|
+
await pageBuilderService.clearHtmlSelection()
|
|
595
|
+
}
|
|
596
|
+
"
|
|
559
597
|
class="pbx-flex pbx-justify-end pbx-py-2 pbx-pr-2 pbx-w-full pbx-h-24"
|
|
560
598
|
>
|
|
561
599
|
<div
|
|
562
|
-
@click.self="
|
|
600
|
+
@click.self="
|
|
601
|
+
async () => {
|
|
602
|
+
await pageBuilderService.clearHtmlSelection()
|
|
603
|
+
}
|
|
604
|
+
"
|
|
563
605
|
class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
|
|
564
606
|
>
|
|
565
607
|
<button
|
|
@@ -605,7 +647,11 @@ onMounted(async () => {
|
|
|
605
647
|
<!-- Add Component # start -->
|
|
606
648
|
|
|
607
649
|
<div
|
|
608
|
-
@click="
|
|
650
|
+
@click="
|
|
651
|
+
async () => {
|
|
652
|
+
await pageBuilderService.clearHtmlSelection()
|
|
653
|
+
}
|
|
654
|
+
"
|
|
609
655
|
id="pagebuilder-bottom-components-area"
|
|
610
656
|
class="pbx-pt-8 pbx-pb-12 pbx-text-center focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-indigo-500 focus:pbx-ring-offset-2 pbx-my-2 pbx-mx-4"
|
|
611
657
|
:class="{ 'pbx-border-t pbx-border-gray-200': getComponents.length > 0 }"
|