@myissue/vue-website-page-builder 3.3.18 → 3.3.21
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 +30 -0
- package/dist/vue-website-page-builder.css +1 -1
- package/dist/vue-website-page-builder.js +4447 -4403
- package/dist/vue-website-page-builder.umd.cjs +52 -52
- package/package.json +1 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +16 -13
- package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +88 -65
- package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +16 -13
- package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +52 -52
- package/src/PageBuilder/PageBuilder.vue +350 -230
- package/src/composables/PageBuilderService.ts +10 -4
- package/src/css/dev-global.css +26 -0
package/package.json
CHANGED
|
@@ -27,19 +27,22 @@ watch(
|
|
|
27
27
|
<template>
|
|
28
28
|
<Listbox as="div" v-model="backgroundColor">
|
|
29
29
|
<div class="pbx-relative">
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
30
|
+
<div class="pbx-flex pbx-gap-2 pbx-items-center">
|
|
31
|
+
<ListboxButton
|
|
32
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end 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-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
|
|
33
|
+
>
|
|
34
|
+
<div class="pbx-flex pbx-flex-col">
|
|
35
|
+
<div class="pbx-flex pbx-gap-2 pbx-items-center">
|
|
36
|
+
<span
|
|
37
|
+
class="material-symbols-outlined"
|
|
38
|
+
:class="`pbx-text-${backgroundColor?.replace('pbx-bg-', '')}`"
|
|
39
|
+
>
|
|
40
|
+
format_color_fill
|
|
41
|
+
</span>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</ListboxButton>
|
|
45
|
+
</div>
|
|
43
46
|
|
|
44
47
|
<transition
|
|
45
48
|
leave-active-class="pbx-transition pbx-ease-in pbx-duration-100"
|
|
@@ -17,6 +17,11 @@ const getElement = computed(() => {
|
|
|
17
17
|
return pageBuilderStateStore.getElement
|
|
18
18
|
})
|
|
19
19
|
|
|
20
|
+
// Get tagName of element
|
|
21
|
+
const elementTag = computed(() => {
|
|
22
|
+
return getElement.value?.tagName
|
|
23
|
+
})
|
|
24
|
+
|
|
20
25
|
const getShowModalTipTap = computed(() => {
|
|
21
26
|
const result = pageBuilderStateStore.getShowModalTipTap
|
|
22
27
|
|
|
@@ -185,13 +190,11 @@ const handleModalIframeSrc = function () {
|
|
|
185
190
|
}
|
|
186
191
|
}
|
|
187
192
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
// videoElement.value = pagebuilder.value.querySelector('#youtube-video')
|
|
192
|
-
// pagebuilder.value = document.querySelector('#pagebuilder')
|
|
193
|
+
const getRestoredElement = computed(() => {
|
|
194
|
+
return pageBuilderStateStore.getRestoredElement
|
|
195
|
+
})
|
|
193
196
|
</script>
|
|
194
|
-
<template>
|
|
197
|
+
<template v-if="getElement">
|
|
195
198
|
<div>
|
|
196
199
|
<DynamicModalBuilder
|
|
197
200
|
:showDynamicModalBuilder="showModalIframeSrc"
|
|
@@ -260,67 +263,87 @@ const handleModalIframeSrc = function () {
|
|
|
260
263
|
>
|
|
261
264
|
</MediaLibraryModal>
|
|
262
265
|
|
|
263
|
-
<
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
</
|
|
276
|
-
</
|
|
277
|
-
</
|
|
266
|
+
<p v-if="false" class="pbx-font-medium pbx-text-[10px] pbx-w-max lg:pbx-block pbx-hidden">
|
|
267
|
+
Editing
|
|
268
|
+
<span class="pbx-lowercase"><{{ elementTag }}></span>
|
|
269
|
+
</p>
|
|
270
|
+
<div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2" :class="{ '': getElement }">
|
|
271
|
+
<template v-if="pageBuilderService.ElOrFirstChildIsIframe()">
|
|
272
|
+
<div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
|
|
273
|
+
<button
|
|
274
|
+
@click="handleModalIframeSrc"
|
|
275
|
+
type="button"
|
|
276
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end 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-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
|
|
277
|
+
>
|
|
278
|
+
<span class="material-symbols-outlined"> play_circle </span>
|
|
279
|
+
</button>
|
|
280
|
+
</div>
|
|
281
|
+
</template>
|
|
278
282
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
283
|
+
<template
|
|
284
|
+
v-if="
|
|
285
|
+
pageBuilderService.isSelectedElementValidText() &&
|
|
286
|
+
!pageBuilderService.ElOrFirstChildIsIframe()
|
|
287
|
+
"
|
|
288
|
+
>
|
|
289
|
+
<div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
|
|
290
|
+
<button
|
|
291
|
+
@click="handleModalPreviewTiptap"
|
|
292
|
+
type="button"
|
|
293
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end 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-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
|
|
294
|
+
>
|
|
295
|
+
<span class="material-symbols-outlined"> edit </span>
|
|
296
|
+
</button>
|
|
297
|
+
</div>
|
|
298
|
+
<TextColorEditor></TextColorEditor>
|
|
299
|
+
</template>
|
|
300
|
+
|
|
301
|
+
<template
|
|
302
|
+
v-if="
|
|
303
|
+
getElement &&
|
|
304
|
+
getComponent &&
|
|
305
|
+
getBasePrimaryImage !== null &&
|
|
306
|
+
!pageBuilderService.ElOrFirstChildIsIframe()
|
|
307
|
+
"
|
|
308
|
+
>
|
|
309
|
+
<div class="pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
|
|
310
|
+
<button
|
|
311
|
+
@click="handleAddImage"
|
|
312
|
+
type="button"
|
|
313
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end 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-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
|
|
314
|
+
>
|
|
315
|
+
<span class="material-symbols-outlined"> add_photo_alternate </span>
|
|
316
|
+
</button>
|
|
317
|
+
</div>
|
|
318
|
+
</template>
|
|
319
|
+
|
|
320
|
+
<template
|
|
321
|
+
v-if="
|
|
322
|
+
getElement &&
|
|
323
|
+
getElement.nodeType === 1 &&
|
|
324
|
+
!getBasePrimaryImage &&
|
|
325
|
+
!pageBuilderService.ElOrFirstChildIsIframe()
|
|
326
|
+
"
|
|
327
|
+
>
|
|
328
|
+
<BackgroundColorEditor></BackgroundColorEditor>
|
|
329
|
+
</template>
|
|
330
|
+
|
|
331
|
+
<template v-if="getElement">
|
|
332
|
+
<button
|
|
333
|
+
@click="pageBuilderService.deleteElementFromDOM"
|
|
334
|
+
type="button"
|
|
335
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end 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-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
|
|
319
336
|
>
|
|
320
|
-
<
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
337
|
+
<span class="material-symbols-outlined"> delete </span>
|
|
338
|
+
</button>
|
|
339
|
+
</template>
|
|
340
|
+
|
|
341
|
+
<div
|
|
342
|
+
v-if="getElement && getComponent"
|
|
343
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end 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-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
|
|
344
|
+
@click="pageBuilderService.clearHtmlSelection()"
|
|
345
|
+
>
|
|
346
|
+
<span class="material-symbols-outlined"> close </span>
|
|
324
347
|
</div>
|
|
325
348
|
</div>
|
|
326
349
|
</div>
|
|
@@ -26,19 +26,22 @@ watch(
|
|
|
26
26
|
<template>
|
|
27
27
|
<Listbox as="div" v-model="textColor">
|
|
28
28
|
<div class="pbx-relative">
|
|
29
|
-
<
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
29
|
+
<div class="pbx-flex pbx-gap-2 pbx-items-center">
|
|
30
|
+
<ListboxButton
|
|
31
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end 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-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
|
|
32
|
+
>
|
|
33
|
+
<div class="pbx-flex pbx-flex-col">
|
|
34
|
+
<div class="pbx-flex pbx-gap-2 pbx-items-center">
|
|
35
|
+
<span
|
|
36
|
+
class="material-symbols-outlined"
|
|
37
|
+
:class="`pbx-text-${textColor?.replace('pbx-text-', '')}`"
|
|
38
|
+
>
|
|
39
|
+
format_color_text
|
|
40
|
+
</span>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</ListboxButton>
|
|
44
|
+
</div>
|
|
42
45
|
|
|
43
46
|
<transition
|
|
44
47
|
leave-active-class="pbx-transition pbx-ease-in pbx-duration-100"
|
|
@@ -91,70 +91,70 @@ const openHTMLSettings = function () {
|
|
|
91
91
|
|
|
92
92
|
<template>
|
|
93
93
|
<div>
|
|
94
|
-
<div
|
|
95
|
-
class="pbx-
|
|
96
|
-
|
|
97
|
-
<!-- User No image Start-->
|
|
98
|
-
<div
|
|
99
|
-
class="pbx-flex pbx-items-center pbx-myPrimaryTag pbx-py-0"
|
|
100
|
-
v-if="
|
|
101
|
-
getPageBuilderConfig &&
|
|
102
|
-
getPageBuilderConfig.userForPageBuilder &&
|
|
103
|
-
getPageBuilderConfig.userForPageBuilder.name &&
|
|
104
|
-
(!getPageBuilderConfig.userForPageBuilder.image ||
|
|
105
|
-
(typeof getPageBuilderConfig.userForPageBuilder.image === 'string' &&
|
|
106
|
-
getPageBuilderConfig.userForPageBuilder.image?.length < 2))
|
|
107
|
-
"
|
|
108
|
-
>
|
|
94
|
+
<div class="pbx-flex pbx-items-center pbx-justify-center">
|
|
95
|
+
<div class="pbx-mr-2">
|
|
96
|
+
<!-- User No image Start-->
|
|
109
97
|
<div
|
|
110
|
-
class="pbx-
|
|
98
|
+
class="pbx-flex pbx-items-center pbx-myPrimaryTag pbx-whitespace-nowrappbx-py-0"
|
|
99
|
+
v-if="
|
|
100
|
+
getPageBuilderConfig &&
|
|
101
|
+
getPageBuilderConfig.userForPageBuilder &&
|
|
102
|
+
getPageBuilderConfig.userForPageBuilder.name &&
|
|
103
|
+
(!getPageBuilderConfig.userForPageBuilder.image ||
|
|
104
|
+
(typeof getPageBuilderConfig.userForPageBuilder.image === 'string' &&
|
|
105
|
+
getPageBuilderConfig.userForPageBuilder.image?.length < 2))
|
|
106
|
+
"
|
|
111
107
|
>
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
108
|
+
<div
|
|
109
|
+
class="pbx-text-white pbx-rounded-full pbx-bg-myPrimaryBrandColor pbx-flex pbx-justify-center pbx-items-center pbx-text-xs pbx-h-8 pbx-min-h-8 pbx-max-h-8 pbx-w-8 pbx-min-w-8 pbx-max-w-8 pbx-font-normal"
|
|
110
|
+
>
|
|
111
|
+
{{
|
|
112
|
+
typeof getPageBuilderConfig.userForPageBuilder.name === 'string' &&
|
|
113
|
+
getPageBuilderConfig.userForPageBuilder.name[0]
|
|
114
|
+
}}
|
|
115
|
+
</div>
|
|
116
|
+
<div class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal">
|
|
117
|
+
{{ getPageBuilderConfig.userForPageBuilder.name }}
|
|
118
|
+
</div>
|
|
119
119
|
</div>
|
|
120
|
-
</div>
|
|
121
120
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<div
|
|
126
|
-
class="pbx-flex pbx-items-center lg:pbx-myPrimaryTag pbx-py-0 pbx-gap-4 pbx-w-max"
|
|
127
|
-
v-if="
|
|
128
|
-
getPageBuilderConfig &&
|
|
129
|
-
getPageBuilderConfig.userForPageBuilder &&
|
|
130
|
-
getPageBuilderConfig.userForPageBuilder.name &&
|
|
131
|
-
getPageBuilderConfig.userForPageBuilder.image &&
|
|
132
|
-
typeof getPageBuilderConfig.userForPageBuilder.image === 'string' &&
|
|
133
|
-
getPageBuilderConfig.userForPageBuilder.image.length > 2
|
|
134
|
-
"
|
|
135
|
-
>
|
|
121
|
+
<!-- User No image End -->
|
|
122
|
+
|
|
123
|
+
<!-- User With image Start-->
|
|
136
124
|
<div
|
|
137
|
-
class="pbx-
|
|
125
|
+
class="pbx-flex pbx-items-center lg:pbx-myPrimaryTag pbx-whitespace-nowrap pbx-py-0 pbx-gap-4 pbx-w-max"
|
|
126
|
+
v-if="
|
|
127
|
+
getPageBuilderConfig &&
|
|
128
|
+
getPageBuilderConfig.userForPageBuilder &&
|
|
129
|
+
getPageBuilderConfig.userForPageBuilder.name &&
|
|
130
|
+
getPageBuilderConfig.userForPageBuilder.image &&
|
|
131
|
+
typeof getPageBuilderConfig.userForPageBuilder.image === 'string' &&
|
|
132
|
+
getPageBuilderConfig.userForPageBuilder.image.length > 2
|
|
133
|
+
"
|
|
138
134
|
>
|
|
139
|
-
<
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
135
|
+
<div
|
|
136
|
+
class="pbx-text-white pbx-flex-shrink-0 pbx-h-8 pbx-w-8 pbx-rounded-full pbx-flex pbx-justify-center pbx-items-center pbx-text-xs pbx-rounded-l-full"
|
|
137
|
+
>
|
|
138
|
+
<img
|
|
139
|
+
alt="avatar"
|
|
140
|
+
:src="`${getPageBuilderConfig.userForPageBuilder.image}`"
|
|
141
|
+
class="pbx-block pbx-inset-0 pbx-object-top pbx-h-8 pbx-min-h-8 pbx-max-h-8 pbx-w-8 pbx-min-w-8 pbx-max-w-8 pbx-object-cover pbx-rounded-full"
|
|
142
|
+
/>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="pbx-hidden pbx-text-xs pbx-h-8 lg:pbx-flex pbx-items-center pbx-font-normal">
|
|
145
|
+
{{ getPageBuilderConfig.userForPageBuilder.name }}
|
|
146
|
+
</div>
|
|
147
147
|
</div>
|
|
148
148
|
</div>
|
|
149
149
|
|
|
150
150
|
<!-- User With image End -->
|
|
151
151
|
|
|
152
|
-
<div>
|
|
152
|
+
<div class="pbx-hidden lg:pbx-block">
|
|
153
153
|
<!-- Component Start -->
|
|
154
154
|
<div class="pbx-relative pbx-group">
|
|
155
155
|
<button
|
|
156
156
|
type="button"
|
|
157
|
-
class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-font-normal pbx-w-max pbx-text-xs"
|
|
157
|
+
class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-whitespace-nowrap pbx-font-normal pbx-w-max pbx-text-xs"
|
|
158
158
|
>
|
|
159
159
|
<span> Options </span>
|
|
160
160
|
</button>
|
|
@@ -169,7 +169,7 @@ const openHTMLSettings = function () {
|
|
|
169
169
|
openMainSettings()
|
|
170
170
|
}
|
|
171
171
|
"
|
|
172
|
-
class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-font-normal pbx-w-max pbx-border-none pbx-m-0"
|
|
172
|
+
class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-whitespace-nowrappbx-font-normal pbx-w-max pbx-border-none pbx-m-0"
|
|
173
173
|
type="button"
|
|
174
174
|
>
|
|
175
175
|
Config Overview
|
|
@@ -179,7 +179,7 @@ const openHTMLSettings = function () {
|
|
|
179
179
|
<!-- HTML Settings Start -->
|
|
180
180
|
<button
|
|
181
181
|
@click="openHTMLSettings"
|
|
182
|
-
class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-font-normal pbx-w-max pbx-border-none pbx-m-0"
|
|
182
|
+
class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-whitespace-nowrap pbx-font-normal pbx-w-max pbx-border-none pbx-m-0"
|
|
183
183
|
type="button"
|
|
184
184
|
>
|
|
185
185
|
HTML Overview
|
|
@@ -189,7 +189,7 @@ const openHTMLSettings = function () {
|
|
|
189
189
|
<!-- Delete Layout Start -->
|
|
190
190
|
<button
|
|
191
191
|
@click="deleteAllComponentsFromDOM"
|
|
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"
|
|
192
|
+
class="pbx-cursor-pointer lg:pbx-flex pbx-myPrimaryTag pbx-whitespace-nowrap pbx-font-normal pbx-w-max pbx-border-none pbx-m-0 pbx-bg-myPrimaryErrorColor pbx-text-white"
|
|
193
193
|
type="button"
|
|
194
194
|
>
|
|
195
195
|
Delete Layout
|