@myissue/vue-website-page-builder 3.2.22 → 3.2.24
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 +2433 -2296
- package/dist/vue-website-page-builder.umd.cjs +25 -23
- package/package.json +1 -1
- package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue +218 -52
- package/src/DemoComponents/HomeSection.vue +5 -5
- package/src/PageBuilder/PageBuilder.vue +10 -17
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@myissue/vue-website-page-builder",
|
|
3
|
-
"version": "v3.2.
|
|
3
|
+
"version": "v3.2.24",
|
|
4
4
|
"description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/vue-website-page-builder.umd.cjs",
|
|
@@ -19,6 +19,16 @@ const current = ref('element')
|
|
|
19
19
|
const updateCurrentTab = function (tab) {
|
|
20
20
|
current.value = tab
|
|
21
21
|
}
|
|
22
|
+
|
|
23
|
+
function prettifyHtml(html) {
|
|
24
|
+
if (!html) return ''
|
|
25
|
+
return html
|
|
26
|
+
.replace(/&/g, '&')
|
|
27
|
+
.replace(/</g, '<')
|
|
28
|
+
.replace(/>/g, '>')
|
|
29
|
+
.replace(/"/g, '"')
|
|
30
|
+
.replace(/'/g, ''')
|
|
31
|
+
}
|
|
22
32
|
</script>
|
|
23
33
|
|
|
24
34
|
<template>
|
|
@@ -105,54 +115,155 @@ const updateCurrentTab = function (tab) {
|
|
|
105
115
|
{{ getComponent === null ? 'NULL' : typeof getComponent }}
|
|
106
116
|
</p>
|
|
107
117
|
</div>
|
|
108
|
-
<div
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
118
|
+
<div
|
|
119
|
+
v-if="getElement"
|
|
120
|
+
class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg"
|
|
121
|
+
>
|
|
122
|
+
<div class="bg-gray-50 pt-4 pb-1 border-b border-gray-200">
|
|
123
|
+
<div class="overflow-x-auto">
|
|
124
|
+
<table class="min-w-full divide-y divide-gray-300">
|
|
125
|
+
<thead class="bg-gray-50">
|
|
126
|
+
<tr>
|
|
127
|
+
<th
|
|
128
|
+
class="px-6 py-3 text-left text-xs font-medium text-gray-900 tracking-wider"
|
|
129
|
+
>
|
|
130
|
+
Selected HTML:
|
|
131
|
+
</th>
|
|
132
|
+
</tr>
|
|
133
|
+
</thead>
|
|
134
|
+
<tbody class="bg-white divide-y divide-gray-200">
|
|
135
|
+
<tr>
|
|
136
|
+
<td class="px-6 py-4 text-sm text-gray-500">
|
|
137
|
+
{{ getElement?.outerHTML }}
|
|
138
|
+
</td>
|
|
139
|
+
</tr>
|
|
140
|
+
</tbody>
|
|
141
|
+
</table>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="overflow-x-auto">
|
|
144
|
+
<table class="min-w-full divide-y divide-gray-300">
|
|
145
|
+
<thead class="bg-gray-50">
|
|
146
|
+
<tr>
|
|
147
|
+
<th
|
|
148
|
+
class="px-6 py-3 text-left text-xs font-medium text-gray-900 tracking-wider"
|
|
149
|
+
>
|
|
150
|
+
Element src:
|
|
151
|
+
</th>
|
|
152
|
+
</tr>
|
|
153
|
+
</thead>
|
|
154
|
+
<tbody class="bg-white divide-y divide-gray-200">
|
|
155
|
+
<tr>
|
|
156
|
+
<td class="px-6 py-4 text-sm text-gray-500 whitespace-pre-line">
|
|
157
|
+
{{ getElement?.src ? getElement?.src : typeof getElement?.src }}
|
|
158
|
+
</td>
|
|
159
|
+
</tr>
|
|
160
|
+
</tbody>
|
|
161
|
+
</table>
|
|
162
|
+
</div>
|
|
126
163
|
</div>
|
|
127
|
-
<div class="
|
|
128
|
-
<
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
164
|
+
<div class="overflow-x-auto">
|
|
165
|
+
<table class="min-w-full divide-y divide-gray-300">
|
|
166
|
+
<thead class="bg-gray-50">
|
|
167
|
+
<tr>
|
|
168
|
+
<th
|
|
169
|
+
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
170
|
+
>
|
|
171
|
+
Element classes
|
|
172
|
+
</th>
|
|
173
|
+
</tr>
|
|
174
|
+
</thead>
|
|
175
|
+
<tbody class="bg-white divide-y divide-gray-200">
|
|
176
|
+
<tr>
|
|
177
|
+
<td class="px-6 py-4 text-sm text-gray-500">
|
|
178
|
+
{{
|
|
179
|
+
getElement?.classList
|
|
180
|
+
? getElement?.classList
|
|
181
|
+
: typeof getElement?.classList
|
|
182
|
+
}}
|
|
183
|
+
</td>
|
|
184
|
+
</tr>
|
|
185
|
+
</tbody>
|
|
186
|
+
</table>
|
|
134
187
|
</div>
|
|
135
188
|
</div>
|
|
136
189
|
</div>
|
|
190
|
+
|
|
137
191
|
<div v-if="current === 'component'">
|
|
138
192
|
<div v-if="!getComponent">
|
|
139
193
|
<p class="pb-2">
|
|
140
194
|
{{ getComponent === null ? 'NULL' : typeof getComponent }}
|
|
141
195
|
</p>
|
|
142
196
|
</div>
|
|
143
|
-
<div
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
197
|
+
<div
|
|
198
|
+
v-if="getComponent"
|
|
199
|
+
class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg"
|
|
200
|
+
>
|
|
201
|
+
<div class="bg-gray-50 pt-4 pb-1 border-b border-gray-200">
|
|
202
|
+
<div class="overflow-x-auto">
|
|
203
|
+
<table class="min-w-full divide-y divide-gray-300">
|
|
204
|
+
<thead class="bg-gray-50">
|
|
205
|
+
<tr>
|
|
206
|
+
<th
|
|
207
|
+
class="px-6 py-3 text-left text-xs font-medium text-gray-900 tracking-wider"
|
|
208
|
+
>
|
|
209
|
+
ID
|
|
210
|
+
</th>
|
|
211
|
+
</tr>
|
|
212
|
+
</thead>
|
|
213
|
+
<tbody class="bg-white divide-y divide-gray-200">
|
|
214
|
+
<tr>
|
|
215
|
+
<td class="px-6 py-4 text-sm text-gray-500">
|
|
216
|
+
{{ getComponent?.id }}
|
|
217
|
+
</td>
|
|
218
|
+
</tr>
|
|
219
|
+
</tbody>
|
|
220
|
+
</table>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="overflow-x-auto">
|
|
223
|
+
<table class="min-w-full divide-y divide-gray-300">
|
|
224
|
+
<thead class="bg-gray-50">
|
|
225
|
+
<tr>
|
|
226
|
+
<th
|
|
227
|
+
class="px-6 py-3 text-left text-xs font-medium text-gray-900 tracking-wider"
|
|
228
|
+
>
|
|
229
|
+
Title
|
|
230
|
+
</th>
|
|
231
|
+
</tr>
|
|
232
|
+
</thead>
|
|
233
|
+
<tbody class="bg-white divide-y divide-gray-200">
|
|
234
|
+
<tr>
|
|
235
|
+
<td class="px-6 py-4 text-sm text-gray-500 whitespace-pre-line">
|
|
236
|
+
{{ getComponent?.title }}
|
|
237
|
+
</td>
|
|
238
|
+
</tr>
|
|
239
|
+
</tbody>
|
|
240
|
+
</table>
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
<div class="overflow-x-auto">
|
|
244
|
+
<table class="min-w-full divide-y divide-gray-300">
|
|
245
|
+
<thead class="bg-gray-50">
|
|
246
|
+
<tr>
|
|
247
|
+
<th
|
|
248
|
+
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
249
|
+
>
|
|
250
|
+
HTML Code
|
|
251
|
+
</th>
|
|
252
|
+
</tr>
|
|
253
|
+
</thead>
|
|
254
|
+
<tbody class="bg-white divide-y divide-gray-200">
|
|
255
|
+
<tr>
|
|
256
|
+
<td class="px-6 py-4 text-sm text-gray-500">
|
|
257
|
+
<pre
|
|
258
|
+
class="py-4 text-sm text-gray-500 whitespace-pre-lines font-sans flex items-start justify-left"
|
|
259
|
+
>
|
|
260
|
+
<code class="font-sans" v-html="prettifyHtml(getComponent?.html_code)"></code>
|
|
261
|
+
</pre>
|
|
262
|
+
</td>
|
|
263
|
+
</tr>
|
|
264
|
+
</tbody>
|
|
265
|
+
</table>
|
|
266
|
+
</div>
|
|
156
267
|
</div>
|
|
157
268
|
</div>
|
|
158
269
|
<div v-if="current === 'components'">
|
|
@@ -161,25 +272,80 @@ const updateCurrentTab = function (tab) {
|
|
|
161
272
|
{{ getComponents === null ? 'NULL' : typeof getComponents }}
|
|
162
273
|
</p>
|
|
163
274
|
</div>
|
|
275
|
+
|
|
164
276
|
<div v-if="getComponents">
|
|
165
277
|
<div
|
|
166
|
-
class="border-b border-white mb-4 pb-4 last:border-none"
|
|
167
278
|
v-for="component in getComponents"
|
|
168
279
|
:key="component.id"
|
|
280
|
+
class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg mb-6"
|
|
169
281
|
>
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
282
|
+
<!-- ID and Title above the table, styled to look connected -->
|
|
283
|
+
<div class="bg-gray-50 pt-4 pb-1 border-b border-gray-200">
|
|
284
|
+
<div class="overflow-x-auto">
|
|
285
|
+
<table class="min-w-full divide-y divide-gray-300">
|
|
286
|
+
<thead class="bg-gray-50">
|
|
287
|
+
<tr>
|
|
288
|
+
<th
|
|
289
|
+
class="px-6 py-3 text-left text-xs font-medium text-gray-900 tracking-wider"
|
|
290
|
+
>
|
|
291
|
+
ID
|
|
292
|
+
</th>
|
|
293
|
+
</tr>
|
|
294
|
+
</thead>
|
|
295
|
+
<tbody class="bg-white divide-y divide-gray-200">
|
|
296
|
+
<tr>
|
|
297
|
+
<td class="px-6 py-4 text-sm text-gray-500">
|
|
298
|
+
{{ component.id }}
|
|
299
|
+
</td>
|
|
300
|
+
</tr>
|
|
301
|
+
</tbody>
|
|
302
|
+
</table>
|
|
303
|
+
</div>
|
|
304
|
+
<div class="overflow-x-auto">
|
|
305
|
+
<table class="min-w-full divide-y divide-gray-300">
|
|
306
|
+
<thead class="bg-gray-50">
|
|
307
|
+
<tr>
|
|
308
|
+
<th
|
|
309
|
+
class="px-6 py-3 text-left text-xs font-medium text-gray-900 tracking-wider"
|
|
310
|
+
>
|
|
311
|
+
Title
|
|
312
|
+
</th>
|
|
313
|
+
</tr>
|
|
314
|
+
</thead>
|
|
315
|
+
<tbody class="bg-white divide-y divide-gray-200">
|
|
316
|
+
<tr>
|
|
317
|
+
<td class="px-6 py-4 text-sm text-gray-500 whitespace-pre-line">
|
|
318
|
+
{{ component.title }}
|
|
319
|
+
</td>
|
|
320
|
+
</tr>
|
|
321
|
+
</tbody>
|
|
322
|
+
</table>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="overflow-x-auto">
|
|
326
|
+
<table class="min-w-full divide-y divide-gray-300">
|
|
327
|
+
<thead class="bg-gray-50">
|
|
328
|
+
<tr>
|
|
329
|
+
<th
|
|
330
|
+
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
331
|
+
>
|
|
332
|
+
HTML Code
|
|
333
|
+
</th>
|
|
334
|
+
</tr>
|
|
335
|
+
</thead>
|
|
336
|
+
<tbody class="bg-white divide-y divide-gray-200">
|
|
337
|
+
<tr>
|
|
338
|
+
<td class="px-6 py-4 text-sm text-gray-500">
|
|
339
|
+
<pre
|
|
340
|
+
class="py-4 text-sm text-gray-500 whitespace-pre-lines font-sans flex items-start justify-left"
|
|
341
|
+
>
|
|
342
|
+
<code class="font-sans" v-html="prettifyHtml(component.html_code)"></code>
|
|
343
|
+
</pre>
|
|
344
|
+
</td>
|
|
345
|
+
</tr>
|
|
346
|
+
</tbody>
|
|
347
|
+
</table>
|
|
348
|
+
</div>
|
|
183
349
|
</div>
|
|
184
350
|
</div>
|
|
185
351
|
</div>
|
|
@@ -39,7 +39,7 @@ const features = [
|
|
|
39
39
|
{
|
|
40
40
|
name: 'Technologies',
|
|
41
41
|
description:
|
|
42
|
-
'Developed with
|
|
42
|
+
'Developed with TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS and HTML.',
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
45
|
name: 'Set Brand and Link Colors one place',
|
|
@@ -79,9 +79,9 @@ const configPageBuilder = {
|
|
|
79
79
|
id: 1,
|
|
80
80
|
},
|
|
81
81
|
userSettings: {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
82
|
+
theme: 'light',
|
|
83
|
+
language: 'en',
|
|
84
|
+
autoSave: true,
|
|
85
85
|
},
|
|
86
86
|
settings: {
|
|
87
87
|
brandColor: '#DB93B0',
|
|
@@ -108,7 +108,7 @@ onMounted(async () => {
|
|
|
108
108
|
<p class="myPrimaryParagraph font-normal">
|
|
109
109
|
The web builder for stunning pages. Enable users to design and publish modern pages at any
|
|
110
110
|
scale. Build responsive pages like listings, jobs or blog posts and manage content easily
|
|
111
|
-
using the free click & drop Page Builder. Developed with
|
|
111
|
+
using the free click & drop Page Builder. Developed with TypeScript, Vue 3, Composition
|
|
112
112
|
API, Pinia, CSS, Tailwind CSS and HTML
|
|
113
113
|
<br />
|
|
114
114
|
<a
|
|
@@ -149,12 +149,6 @@ const defaultConfigValues = {
|
|
|
149
149
|
formType: 'create',
|
|
150
150
|
formName: 'post',
|
|
151
151
|
},
|
|
152
|
-
|
|
153
|
-
userSettings: {
|
|
154
|
-
theme: 'light',
|
|
155
|
-
language: 'en',
|
|
156
|
-
autoSave: true,
|
|
157
|
-
},
|
|
158
152
|
}
|
|
159
153
|
|
|
160
154
|
const handleConfig = function (config) {
|
|
@@ -164,14 +158,12 @@ const handleConfig = function (config) {
|
|
|
164
158
|
config === undefined ||
|
|
165
159
|
(config && Object.keys(config).length === 0 && config.constructor === Object)
|
|
166
160
|
) {
|
|
167
|
-
console.log('0000')
|
|
168
161
|
pageBuilderClass.setConfigPageBuilder(defaultConfigValues)
|
|
169
162
|
return
|
|
170
163
|
}
|
|
171
164
|
|
|
172
165
|
if (config && Object.keys(config).length !== 0 && config.constructor === Object) {
|
|
173
166
|
if (updateOrCreateIsFalsy(config)) {
|
|
174
|
-
console.log('8888:')
|
|
175
167
|
return
|
|
176
168
|
}
|
|
177
169
|
}
|
|
@@ -408,23 +400,24 @@ onMounted(async () => {
|
|
|
408
400
|
|
|
409
401
|
<!-- Add Component # start -->
|
|
410
402
|
<div
|
|
411
|
-
@click="
|
|
412
|
-
() => {
|
|
413
|
-
pageBuilderStateStore.setComponentArrayAddMethod('push')
|
|
414
|
-
handleAddComponent()
|
|
415
|
-
}
|
|
416
|
-
"
|
|
403
|
+
@click="pageBuilderClass.clearHtmlSelection()"
|
|
417
404
|
id="pagebuilder-bottom-components-area"
|
|
418
|
-
class="
|
|
405
|
+
class="border-t border-gray-200 pt-10 pb-14 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 my-12 mx-8"
|
|
419
406
|
>
|
|
420
|
-
<div class="flex items-center justify-center gap-2 font-medium
|
|
407
|
+
<div class="flex items-center justify-center gap-2 font-medium">
|
|
421
408
|
<span class="lg:block hidden">
|
|
422
|
-
<div>Add new
|
|
409
|
+
<div>Add new components to the bottom of the page</div>
|
|
423
410
|
</span>
|
|
424
411
|
</div>
|
|
425
412
|
|
|
426
413
|
<div class="mt-6 flex items-center gap-2 justify-center">
|
|
427
414
|
<button
|
|
415
|
+
@click="
|
|
416
|
+
() => {
|
|
417
|
+
pageBuilderStateStore.setComponentArrayAddMethod('push')
|
|
418
|
+
handleAddComponent()
|
|
419
|
+
}
|
|
420
|
+
"
|
|
428
421
|
type="button"
|
|
429
422
|
class="myPrimaryButton flex items-center gap-2 justify-center"
|
|
430
423
|
>
|