@myissue/vue-website-page-builder 3.1.53 → 3.2.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 +111 -15
- package/dist/vue-website-page-builder.css +1 -1
- package/dist/vue-website-page-builder.js +8544 -8297
- package/dist/vue-website-page-builder.umd.cjs +39 -39
- package/package.json +1 -1
- package/src/App.vue +2 -0
- package/src/Components/Homepage/HomeSection.vue +48 -317
- package/src/Components/Homepage/Navbar.vue +26 -0
- package/src/Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue +15 -11
- package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +22 -1
- package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +1 -1
- package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue +47 -14
- package/src/PageBuilder/PageBuilder.vue +168 -63
- package/src/composables/PageBuilderClass.ts +42 -29
- package/src/css/app.css +27 -4
- package/src/helpers/isEmptyObject.ts +5 -0
- package/src/helpers/passedPageBuilderConfig.ts +356 -0
- package/src/types/index.ts +4 -5
- package/src/utils/html-elements/componentHelpers.ts +3 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@myissue/vue-website-page-builder",
|
|
3
|
-
"version": "v3.
|
|
3
|
+
"version": "v3.2.13",
|
|
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",
|
package/src/App.vue
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
+
import Navbar from './Components/Homepage/Navbar.vue'
|
|
2
3
|
import HomeSection from './Components/Homepage/HomeSection.vue'
|
|
3
4
|
import Footer from './Components/Homepage/Footer.vue'
|
|
4
5
|
</script>
|
|
5
6
|
|
|
6
7
|
<template>
|
|
7
8
|
<div>
|
|
9
|
+
<Navbar></Navbar>
|
|
8
10
|
<HomeSection></HomeSection>
|
|
9
11
|
<Footer></Footer>
|
|
10
12
|
</div>
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import FullWidthElement from '../../Components/Layouts/FullWidthElement.vue'
|
|
3
3
|
import PageBuilder from '../../PageBuilder/PageBuilder.vue'
|
|
4
|
+
import PageBuilderClass from '../../composables/PageBuilderClass.ts'
|
|
5
|
+
import { sharedPageBuilderStore } from '../../stores/shared-store'
|
|
4
6
|
|
|
5
7
|
// first button function
|
|
6
8
|
const handleButton = function () {
|
|
@@ -49,6 +51,52 @@ const features = [
|
|
|
49
51
|
'Beautiful, elegant and intuitive design. Enhance user engagement with amazing visual experience.',
|
|
50
52
|
},
|
|
51
53
|
]
|
|
54
|
+
|
|
55
|
+
// const configPageBuilderTemplate = {
|
|
56
|
+
// updateOrCreate: {
|
|
57
|
+
// formType: 'create',
|
|
58
|
+
// createNewResourceFormName: 'post',
|
|
59
|
+
// },
|
|
60
|
+
// pageBuilderLogo: {
|
|
61
|
+
// src: '/logo/logo.svg',
|
|
62
|
+
// },
|
|
63
|
+
// userForPageBuilder: { name: 'John Doe' },
|
|
64
|
+
// resourceData: {
|
|
65
|
+
// title: 'Demo Article',
|
|
66
|
+
// id: 1,
|
|
67
|
+
// },
|
|
68
|
+
// userSettings: {
|
|
69
|
+
// theme: 'light',
|
|
70
|
+
// language: 'en',
|
|
71
|
+
// autoSave: true,
|
|
72
|
+
// },
|
|
73
|
+
// }
|
|
74
|
+
|
|
75
|
+
const configPageBuilder = {
|
|
76
|
+
userForPageBuilder: {
|
|
77
|
+
name: 'John Doe',
|
|
78
|
+
},
|
|
79
|
+
updateOrCreate: {
|
|
80
|
+
formType: 'update',
|
|
81
|
+
// createNewResourceFormName: 0,
|
|
82
|
+
},
|
|
83
|
+
pageBuilderLogo: {
|
|
84
|
+
src: '/logo/logo.svg',
|
|
85
|
+
},
|
|
86
|
+
resourceData: {
|
|
87
|
+
title: 'Demo Article',
|
|
88
|
+
id: 1,
|
|
89
|
+
},
|
|
90
|
+
userSettings: {
|
|
91
|
+
theme: 'light',
|
|
92
|
+
language: 'en',
|
|
93
|
+
autoSave: true,
|
|
94
|
+
},
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
const pageBuilderStateStore = sharedPageBuilderStore
|
|
98
|
+
const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
|
|
99
|
+
pageBuilderClass.setConfigPageBuilder(configPageBuilder)
|
|
52
100
|
</script>
|
|
53
101
|
|
|
54
102
|
<template>
|
|
@@ -80,323 +128,6 @@ const features = [
|
|
|
80
128
|
<div>
|
|
81
129
|
<PageBuilder></PageBuilder>
|
|
82
130
|
</div>
|
|
83
|
-
<div @click="handleButton" class="myPrimaryContentSection cursor-pointer">
|
|
84
|
-
<div
|
|
85
|
-
class="relative overflow-hidden bg-cover bg-no-repeat grid grid-cols-12 h-[68rem] rounded-2xl shadow-sm outline outline-2 outline-offset-4 outline-myPrimaryLinkColor hover:outline-myPrimaryLinkColor/50"
|
|
86
|
-
style="background-image: url('/home/page-builder-example.jpg')"
|
|
87
|
-
>
|
|
88
|
-
<div class="col-span-12 px-4 top-0 h-[4rem] w-full border-b border-gray-200">
|
|
89
|
-
<div class="flex items-center justify-between h-full">
|
|
90
|
-
<div class="lg:flex hidden items-center justify-end myPrimaryGap h-full">
|
|
91
|
-
<div class="flex gap-2">
|
|
92
|
-
<span class="w-2 h-2 rounded-full bg-red-400 hover:bg-red-600"></span
|
|
93
|
-
><span class="w-2 h-2 rounded-full bg-yellow-400 hover:bg-yellow-600"></span
|
|
94
|
-
><span class="w-2 h-2 rounded-full bg-green-400 hover:bg-green-600"></span>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
<div class="flex justify-center items-center gap-2">
|
|
98
|
-
<button
|
|
99
|
-
type="button"
|
|
100
|
-
class="mySecondaryButton text-[10px] py-2 px-6 cursor-default min-h-2 lg:block hidden"
|
|
101
|
-
>
|
|
102
|
-
Save</button
|
|
103
|
-
><button
|
|
104
|
-
type="button"
|
|
105
|
-
class="mySecondaryButton text-[10px] py-2 px-6 cursor-default min-h-2"
|
|
106
|
-
>
|
|
107
|
-
Publish
|
|
108
|
-
</button>
|
|
109
|
-
<button
|
|
110
|
-
type="button"
|
|
111
|
-
class="myPrimaryButton text-[10px] py-2 px-6 min-h-2 cursor-pointer"
|
|
112
|
-
>
|
|
113
|
-
Demo
|
|
114
|
-
</button>
|
|
115
|
-
</div>
|
|
116
|
-
<div class="lg:flex hidden justify-center items-center gap-2">
|
|
117
|
-
<p class="myPrimaryParagraph text-[10px] text-white italic">
|
|
118
|
-
Editing: Listing ID 1
|
|
119
|
-
</p>
|
|
120
|
-
</div>
|
|
121
|
-
<div class="flex items-center justify-end myPrimaryGap h-full">
|
|
122
|
-
<div
|
|
123
|
-
class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
124
|
-
>
|
|
125
|
-
<span class="material-symbols-outlined"> add </span>
|
|
126
|
-
</div>
|
|
127
|
-
<div
|
|
128
|
-
class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
129
|
-
>
|
|
130
|
-
<span class="material-symbols-outlined"> visibility </span>
|
|
131
|
-
</div>
|
|
132
|
-
<div class="lg:flex hidden justify-center items-center gap-2">
|
|
133
|
-
<p class="myPrimaryParagraph text-[12px] text-white font-medium">Page Builder</p>
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
<div class="lg:col-span-9 col-span-5 top-0 w-full h-[64rem] rounded-l-2xl">
|
|
139
|
-
<div class="flex items-center justify-between">
|
|
140
|
-
<div
|
|
141
|
-
class="w-[4rem] bg-red-100 bg-opacity-50 hover:bg-opacity-40 h-[40rem] rounded-full pt-8 ml-2"
|
|
142
|
-
>
|
|
143
|
-
<div class="flex flex-col justify-center items-center gap-8">
|
|
144
|
-
<div
|
|
145
|
-
class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
146
|
-
>
|
|
147
|
-
<span class="material-symbols-outlined"> arrow_selector_tool </span>
|
|
148
|
-
</div>
|
|
149
|
-
<div
|
|
150
|
-
class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
151
|
-
>
|
|
152
|
-
<span class="material-symbols-outlined"> add </span>
|
|
153
|
-
</div>
|
|
154
|
-
<div
|
|
155
|
-
class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
156
|
-
>
|
|
157
|
-
<span class="material-symbols-outlined"> replay </span>
|
|
158
|
-
</div>
|
|
159
|
-
<div
|
|
160
|
-
class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryErrorColor hover:text-white focus-visible:ring-0"
|
|
161
|
-
>
|
|
162
|
-
<span class="material-symbols-outlined"> delete </span>
|
|
163
|
-
</div>
|
|
164
|
-
</div>
|
|
165
|
-
</div>
|
|
166
|
-
<div class="flex items-center justify-center w-full h-[64rem] pt-2 pr-8">
|
|
167
|
-
<div class="lg:flex hidden items-center w-full h-full justify-end">
|
|
168
|
-
<div class="flex flex-col gap-2">
|
|
169
|
-
<div
|
|
170
|
-
class="w-[22rem] rounded-2xl hover:bg-opacity-80 flex flex-col justify-between top-0"
|
|
171
|
-
>
|
|
172
|
-
<div class="flex items-center justify-end gap-2">
|
|
173
|
-
<button
|
|
174
|
-
class="myPrimaryParagraph mySecondaryButton text-[10px] py-2 px-6 cursor-default min-h-2"
|
|
175
|
-
>
|
|
176
|
-
Add text element
|
|
177
|
-
</button>
|
|
178
|
-
<div
|
|
179
|
-
class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
180
|
-
>
|
|
181
|
-
<span class="material-symbols-outlined text-[20px]"> edit </span>
|
|
182
|
-
</div>
|
|
183
|
-
<div
|
|
184
|
-
class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
185
|
-
>
|
|
186
|
-
<span class="material-symbols-outlined text-[20px]"> add </span>
|
|
187
|
-
</div>
|
|
188
|
-
<div
|
|
189
|
-
class="h-8 w-8 rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryErrorColor hover:text-white focus-visible:ring-0"
|
|
190
|
-
>
|
|
191
|
-
<span class="material-symbols-outlined text-[20px]"> delete </span>
|
|
192
|
-
</div>
|
|
193
|
-
</div>
|
|
194
|
-
</div>
|
|
195
|
-
<div class="lg:flex hidden items-center w-full h-full justify-end">
|
|
196
|
-
<div
|
|
197
|
-
class="w-[22rem] h-[10rem] rounded-2xl bg-gray-200 bg-opacity-90 hover:bg-opacity-80 py-8 flex flex-col justify-between top-0"
|
|
198
|
-
>
|
|
199
|
-
<div
|
|
200
|
-
class="py-2 flex justify-between gap-4 px-4 bg-gray-400 rounded-full mx-6 bg-opacity-30"
|
|
201
|
-
>
|
|
202
|
-
<span class="material-symbols-outlined text-[20px]"> format_bold </span
|
|
203
|
-
><span class="material-symbols-outlined text-[20px]"> format_italic </span
|
|
204
|
-
><span class="material-symbols-outlined text-[20px]">
|
|
205
|
-
format_color_text </span
|
|
206
|
-
><span class="material-symbols-outlined text-[20px]">
|
|
207
|
-
format_align_left
|
|
208
|
-
</span>
|
|
209
|
-
</div>
|
|
210
|
-
<div
|
|
211
|
-
class="py-2 flex justify-between gap-4 px-4 bg-gray-400 rounded-full mx-6 bg-opacity-30"
|
|
212
|
-
>
|
|
213
|
-
<span class="material-symbols-outlined text-[20px]"> format_shapes </span
|
|
214
|
-
><span class="material-symbols-outlined text-[20px]">
|
|
215
|
-
add_photo_alternate </span
|
|
216
|
-
><span class="material-symbols-outlined text-[20px]"> colors </span
|
|
217
|
-
><span class="material-symbols-outlined text-[20px]"> attach_file </span>
|
|
218
|
-
</div>
|
|
219
|
-
</div>
|
|
220
|
-
</div>
|
|
221
|
-
</div>
|
|
222
|
-
</div>
|
|
223
|
-
</div>
|
|
224
|
-
</div>
|
|
225
|
-
</div>
|
|
226
|
-
<div
|
|
227
|
-
class="lg:col-span-3 col-span-7 px-4 top-0 w-full bg-gray-200 bg-opacity-90 hover:bg-opacity-80 h-[64rem] rounded-br-2xl pt-6 overflow-y-scroll"
|
|
228
|
-
>
|
|
229
|
-
<div class="min-h-[80rem] h-[80rem]">
|
|
230
|
-
<div class="flex justify-between items-center gap-2">
|
|
231
|
-
<div></div>
|
|
232
|
-
<p class="font-medium text-sm">
|
|
233
|
-
Editing <span class="lowercase"><IMG></span>
|
|
234
|
-
</p>
|
|
235
|
-
</div>
|
|
236
|
-
<div class="my-8">
|
|
237
|
-
<p class="myPrimaryParagraph text-sm font-medium pb-3">Filters</p>
|
|
238
|
-
<div class="flex flex-col myPrimaryGap">
|
|
239
|
-
<div class="flex items-center justify-start gap-6">
|
|
240
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Blur</div>
|
|
241
|
-
<div
|
|
242
|
-
class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
|
|
243
|
-
>
|
|
244
|
-
<p class="myPrimaryParagraph text-xs">blur-lg</p>
|
|
245
|
-
<div class="material-symbols-outlined">expand_more</div>
|
|
246
|
-
</div>
|
|
247
|
-
</div>
|
|
248
|
-
</div>
|
|
249
|
-
</div>
|
|
250
|
-
<div class="w-full border-t border-gray-300"></div>
|
|
251
|
-
<div class="my-8">
|
|
252
|
-
<p class="myPrimaryParagraph text-sm font-medium pb-3">Borders</p>
|
|
253
|
-
<div class="flex flex-col myPrimaryGap">
|
|
254
|
-
<div class="flex items-center justify-start gap-6">
|
|
255
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Radius</div>
|
|
256
|
-
<div
|
|
257
|
-
class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
|
|
258
|
-
>
|
|
259
|
-
<p class="myPrimaryParagraph text-xs">rounded</p>
|
|
260
|
-
<div class="material-symbols-outlined">expand_more</div>
|
|
261
|
-
</div>
|
|
262
|
-
</div>
|
|
263
|
-
<div class="flex items-center justify-start gap-6">
|
|
264
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Width</div>
|
|
265
|
-
<div
|
|
266
|
-
class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
|
|
267
|
-
>
|
|
268
|
-
<p class="myPrimaryParagraph text-xs">border-0</p>
|
|
269
|
-
<div class="material-symbols-outlined">expand_more</div>
|
|
270
|
-
</div>
|
|
271
|
-
</div>
|
|
272
|
-
</div>
|
|
273
|
-
</div>
|
|
274
|
-
<div class="w-full border-t border-gray-300"></div>
|
|
275
|
-
<div class="my-4">
|
|
276
|
-
<p class="myPrimaryParagraph text-sm font-medium pb-3">Typography</p>
|
|
277
|
-
<div class="flex flex-col myPrimaryGap">
|
|
278
|
-
<div class="flex items-center justify-start gap-6">
|
|
279
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Font Family</div>
|
|
280
|
-
<div
|
|
281
|
-
class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
|
|
282
|
-
>
|
|
283
|
-
<p class="myPrimaryParagraph text-xs">Jost</p>
|
|
284
|
-
<div class="material-symbols-outlined">expand_more</div>
|
|
285
|
-
</div>
|
|
286
|
-
</div>
|
|
287
|
-
</div>
|
|
288
|
-
</div>
|
|
289
|
-
<div class="w-full border-t border-gray-300"></div>
|
|
290
|
-
<div class="my-4">
|
|
291
|
-
<p class="myPrimaryParagraph text-sm font-medium pb-3">Video</p>
|
|
292
|
-
<div class="flex flex-col myPrimaryGap">
|
|
293
|
-
<div class="flex items-center justify-start gap-6">
|
|
294
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Add Video</div>
|
|
295
|
-
<div class="flex justify-end w-full">
|
|
296
|
-
<div
|
|
297
|
-
class="shadow h-8 w-14 rounded-lg flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
298
|
-
>
|
|
299
|
-
<span class="material-symbols-outlined"> play_arrow </span>
|
|
300
|
-
</div>
|
|
301
|
-
</div>
|
|
302
|
-
</div>
|
|
303
|
-
</div>
|
|
304
|
-
</div>
|
|
305
|
-
<div class="w-full border-t border-gray-300"></div>
|
|
306
|
-
<div class="my-8">
|
|
307
|
-
<p class="myPrimaryParagraph text-sm font-medium pb-3">Customization</p>
|
|
308
|
-
<div class="flex flex-col myPrimaryGap">
|
|
309
|
-
<div class="flex items-center justify-start gap-6">
|
|
310
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Shadow</div>
|
|
311
|
-
<div class="myPrimaryParagraph text-xs font-medium flex justify-end w-full">
|
|
312
|
-
<div
|
|
313
|
-
class="pointer-events-auto h-6 w-10 rounded-full p-1 ring-1 ring-inset transition duration-200 ease-in-out bg-myPrimaryLinkColor ring-black/20"
|
|
314
|
-
>
|
|
315
|
-
<div
|
|
316
|
-
class="h-4 w-4 rounded-full bg-white shadow-sm ring-1 ring-slate-700/10 transition duration-200 ease-in-out translate-x-4"
|
|
317
|
-
></div>
|
|
318
|
-
</div>
|
|
319
|
-
</div>
|
|
320
|
-
</div>
|
|
321
|
-
<div class="flex items-center justify-start gap-6">
|
|
322
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Sepia</div>
|
|
323
|
-
<div
|
|
324
|
-
class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
|
|
325
|
-
>
|
|
326
|
-
<p class="myPrimaryParagraph text-xs">sepia-0</p>
|
|
327
|
-
<div class="material-symbols-outlined">expand_more</div>
|
|
328
|
-
</div>
|
|
329
|
-
</div>
|
|
330
|
-
</div>
|
|
331
|
-
</div>
|
|
332
|
-
<div class="w-full border-t border-gray-300"></div>
|
|
333
|
-
<div class="my-8">
|
|
334
|
-
<p class="myPrimaryParagraph text-sm font-medium pb-3">Spacing</p>
|
|
335
|
-
<div class="flex flex-col myPrimaryGap">
|
|
336
|
-
<div class="flex items-center justify-start gap-6">
|
|
337
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Padding</div>
|
|
338
|
-
<div
|
|
339
|
-
class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
|
|
340
|
-
>
|
|
341
|
-
<p class="myPrimaryParagraph text-xs">p-0</p>
|
|
342
|
-
<div class="material-symbols-outlined">expand_more</div>
|
|
343
|
-
</div>
|
|
344
|
-
</div>
|
|
345
|
-
<div class="flex items-center justify-start gap-6">
|
|
346
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Margin</div>
|
|
347
|
-
<div
|
|
348
|
-
class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
|
|
349
|
-
>
|
|
350
|
-
<p class="myPrimaryParagraph text-xs">m-0</p>
|
|
351
|
-
<div class="material-symbols-outlined">expand_more</div>
|
|
352
|
-
</div>
|
|
353
|
-
</div>
|
|
354
|
-
</div>
|
|
355
|
-
</div>
|
|
356
|
-
<div class="w-full border-t border-gray-300"></div>
|
|
357
|
-
<div class="my-8">
|
|
358
|
-
<p class="myPrimaryParagraph text-sm font-medium pb-3">Backgrounds</p>
|
|
359
|
-
<div class="flex flex-col myPrimaryGap">
|
|
360
|
-
<div class="flex items-center justify-start gap-6">
|
|
361
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Color</div>
|
|
362
|
-
<div
|
|
363
|
-
class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
|
|
364
|
-
>
|
|
365
|
-
<p class="myPrimaryParagraph text-xs">bg-black</p>
|
|
366
|
-
<div class="material-symbols-outlined">expand_more</div>
|
|
367
|
-
</div>
|
|
368
|
-
</div>
|
|
369
|
-
<div class="flex items-center justify-start gap-6">
|
|
370
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Size</div>
|
|
371
|
-
<div
|
|
372
|
-
class="border border-myPrimaryDarkGrayColor hover:border-gray-400 h-10 flex items-center justify-between px-2 shadow rounded-lg w-2/3"
|
|
373
|
-
>
|
|
374
|
-
<p class="myPrimaryParagraph text-xs">bg-cover</p>
|
|
375
|
-
<div class="material-symbols-outlined">expand_more</div>
|
|
376
|
-
</div>
|
|
377
|
-
</div>
|
|
378
|
-
</div>
|
|
379
|
-
</div>
|
|
380
|
-
<div class="w-full border-t border-gray-300"></div>
|
|
381
|
-
<div class="my-8">
|
|
382
|
-
<p class="myPrimaryParagraph text-sm font-medium pb-3">Settings</p>
|
|
383
|
-
<div class="flex flex-col myPrimaryGap">
|
|
384
|
-
<div class="flex items-center justify-start gap-6">
|
|
385
|
-
<div class="myPrimaryParagraph text-xs font-medium w-1/3">Download</div>
|
|
386
|
-
<div class="flex justify-end w-full">
|
|
387
|
-
<div
|
|
388
|
-
class="shadow h-8 w-14 rounded-lg flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
|
|
389
|
-
>
|
|
390
|
-
<span class="material-symbols-outlined"> cloud_download </span>
|
|
391
|
-
</div>
|
|
392
|
-
</div>
|
|
393
|
-
</div>
|
|
394
|
-
</div>
|
|
395
|
-
</div>
|
|
396
|
-
</div>
|
|
397
|
-
</div>
|
|
398
|
-
</div>
|
|
399
|
-
</div>
|
|
400
131
|
</div>
|
|
401
132
|
|
|
402
133
|
<FullWidthElement :descriptionArea="true" class="bg-gray-50">
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
const emit = defineEmits(['handleButton'])
|
|
3
|
+
|
|
4
|
+
// first button function
|
|
5
|
+
const handleButton = function () {
|
|
6
|
+
emit('handleButton')
|
|
7
|
+
}
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<template>
|
|
11
|
+
<nav
|
|
12
|
+
class="px-6 py-6 mx-auto flex items-center justify-between bg-gray-50 lg:h-[10vh] h-[16vh]"
|
|
13
|
+
aria-label="Global"
|
|
14
|
+
>
|
|
15
|
+
<img class="h-6" src="/logo/logo.svg" alt="Logo" />
|
|
16
|
+
|
|
17
|
+
<div class="flex lg:gap-x-12 myPrimaryGap">
|
|
18
|
+
<p
|
|
19
|
+
@click="handleButton"
|
|
20
|
+
class="text-lg font-medium text-myPrimaryDarkGrayColor flex gap-2 items-center cursor-pointer"
|
|
21
|
+
>
|
|
22
|
+
Start Builder
|
|
23
|
+
</p>
|
|
24
|
+
</div>
|
|
25
|
+
</nav>
|
|
26
|
+
</template>
|
|
@@ -68,7 +68,21 @@ const deleteAllComponents = function () {
|
|
|
68
68
|
// handle click
|
|
69
69
|
thirdModalButtonFunctionDynamicModalBuilder.value = function () {
|
|
70
70
|
pageBuilderClass.deleteAllComponents()
|
|
71
|
-
|
|
71
|
+
pageBuilderClass.clearHtmlSelection()
|
|
72
|
+
if (
|
|
73
|
+
getConfigPageBuilder.value.updateOrCreate &&
|
|
74
|
+
typeof getConfigPageBuilder.value.updateOrCreate.formType === 'string'
|
|
75
|
+
) {
|
|
76
|
+
if (getConfigPageBuilder.value.updateOrCreate.formType === 'create') {
|
|
77
|
+
pageBuilderClass.removeItemComponentsLocalStorageCreate()
|
|
78
|
+
}
|
|
79
|
+
if (getConfigPageBuilder.value.updateOrCreate.formType === 'update') {
|
|
80
|
+
pageBuilderClass.removeItemComponentsLocalStorageUpdate()
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// if(getConfigPageBuilder.updateOrCreate && getConfigPageBuilder.updateOrCreate){}
|
|
85
|
+
|
|
72
86
|
showModalDeleteAllComponents.value = false
|
|
73
87
|
}
|
|
74
88
|
// end modal
|
|
@@ -161,16 +175,6 @@ const settingsSlideOverButton = function () {
|
|
|
161
175
|
</template>
|
|
162
176
|
|
|
163
177
|
<p>
|
|
164
|
-
<template
|
|
165
|
-
v-if="
|
|
166
|
-
getConfigPageBuilder &&
|
|
167
|
-
typeof getConfigPageBuilder.updateOrCreate === 'string' &&
|
|
168
|
-
getConfigPageBuilder.updateOrCreate.length > 0 &&
|
|
169
|
-
getConfigPageBuilder.resourceData &&
|
|
170
|
-
getConfigPageBuilder.resourceData.title
|
|
171
|
-
"
|
|
172
|
-
>
|
|
173
|
-
</template>
|
|
174
178
|
<MenuItem v-slot="{ active }">
|
|
175
179
|
<div
|
|
176
180
|
@click="handlePageBuilderPreview"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import { ref, computed, inject } from 'vue'
|
|
2
|
+
import { ref, computed, onMounted, nextTick, watch, inject } from 'vue'
|
|
3
3
|
import DynamicModalBuilder from '../../../Modals/DynamicModalBuilder.vue'
|
|
4
4
|
import TipTapInput from '../../../TipTap/TipTapInput.vue'
|
|
5
5
|
import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
|
|
@@ -202,6 +202,27 @@ const handleModalIframeSrc = function () {
|
|
|
202
202
|
showModalIframeSrc.value = false
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
|
+
|
|
206
|
+
const pagebuilder = ref(null)
|
|
207
|
+
const videoElement = ref(null)
|
|
208
|
+
|
|
209
|
+
watch(
|
|
210
|
+
pagebuilder,
|
|
211
|
+
async (newValue) => {
|
|
212
|
+
if (newValue) {
|
|
213
|
+
console.log('new value:', newValue)
|
|
214
|
+
videoElement.value = pagebuilder.value?.querySelector('#youtube-video')
|
|
215
|
+
console.log('video er:', videoElement.value)
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
{ immediate: true },
|
|
219
|
+
)
|
|
220
|
+
|
|
221
|
+
onMounted(async () => {
|
|
222
|
+
pagebuilder.value = document.querySelector('#pagebuilder')
|
|
223
|
+
console.log('pagebuilder:', pagebuilder.value)
|
|
224
|
+
await nextTick()
|
|
225
|
+
})
|
|
205
226
|
</script>
|
|
206
227
|
<template>
|
|
207
228
|
<div>
|
|
@@ -42,7 +42,7 @@ const isHeadingElement = computed(() => {
|
|
|
42
42
|
<template>
|
|
43
43
|
<div class="h-full w-80 bg-white">
|
|
44
44
|
<div class="h-screen flex flex-col">
|
|
45
|
-
<div class="flex flex-row justify-between pt-
|
|
45
|
+
<div class="flex flex-row justify-between pt-7 pr-4 pl-4 items-center mb-3">
|
|
46
46
|
<button
|
|
47
47
|
type="button"
|
|
48
48
|
@click="$emit('closeEditor')"
|
|
@@ -5,6 +5,7 @@ import { ref, computed } from 'vue'
|
|
|
5
5
|
import { sharedPageBuilderStore } from '../../../stores/shared-store'
|
|
6
6
|
import fullHTMLContent from '../../../utils/builder/html-doc-declaration-with-components'
|
|
7
7
|
import PageBuilderClass from '../../../composables/PageBuilderClass.ts'
|
|
8
|
+
import { isEmptyObject } from '../../../helpers/isEmptyObject.ts'
|
|
8
9
|
const version = __APP_VERSION__
|
|
9
10
|
|
|
10
11
|
// Use shared store instance
|
|
@@ -87,7 +88,7 @@ const handleDownloadHTML = function () {
|
|
|
87
88
|
<button
|
|
88
89
|
@click="handleAdvancedSettingsSlideOver"
|
|
89
90
|
type="button"
|
|
90
|
-
class="myPrimaryButton text
|
|
91
|
+
class="myPrimaryButton text"
|
|
91
92
|
>
|
|
92
93
|
Open Overview
|
|
93
94
|
</button>
|
|
@@ -147,7 +148,12 @@ const handleDownloadHTML = function () {
|
|
|
147
148
|
<!-- Version Information Table - end -->
|
|
148
149
|
|
|
149
150
|
<!-- Resource Data Table - start -->
|
|
150
|
-
<div
|
|
151
|
+
<div
|
|
152
|
+
class="mt-4"
|
|
153
|
+
v-if="
|
|
154
|
+
getConfigPageBuilder?.resourceData && !isEmptyObject(getConfigPageBuilder.resourceData)
|
|
155
|
+
"
|
|
156
|
+
>
|
|
151
157
|
<h4 class="myQuaternaryHeader text-sm mb-2">Resource Data</h4>
|
|
152
158
|
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
|
153
159
|
<div class="overflow-x-auto">
|
|
@@ -193,7 +199,13 @@ const handleDownloadHTML = function () {
|
|
|
193
199
|
<!-- Resource Data Table - end -->
|
|
194
200
|
|
|
195
201
|
<!-- User Information Table - start -->
|
|
196
|
-
<div
|
|
202
|
+
<div
|
|
203
|
+
class="mt-8"
|
|
204
|
+
v-if="
|
|
205
|
+
getConfigPageBuilder?.userForPageBuilder &&
|
|
206
|
+
!isEmptyObject(getConfigPageBuilder.userForPageBuilder)
|
|
207
|
+
"
|
|
208
|
+
>
|
|
197
209
|
<h4 class="myQuaternaryHeader text-sm mb-2">User Information</h4>
|
|
198
210
|
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
|
199
211
|
<div class="overflow-x-auto">
|
|
@@ -231,7 +243,12 @@ const handleDownloadHTML = function () {
|
|
|
231
243
|
<!-- User Information Table - end -->
|
|
232
244
|
|
|
233
245
|
<!-- User Settings Table - start -->
|
|
234
|
-
<div
|
|
246
|
+
<div
|
|
247
|
+
class="mt-8"
|
|
248
|
+
v-if="
|
|
249
|
+
getConfigPageBuilder?.userSettings && !isEmptyObject(getConfigPageBuilder.userSettings)
|
|
250
|
+
"
|
|
251
|
+
>
|
|
235
252
|
<h4 class="myQuaternaryHeader text-sm mb-2">User Settings</h4>
|
|
236
253
|
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
|
237
254
|
<div class="overflow-x-auto">
|
|
@@ -313,7 +330,13 @@ const handleDownloadHTML = function () {
|
|
|
313
330
|
<!-- User Settings Table - end -->
|
|
314
331
|
|
|
315
332
|
<!-- Page Builder Logo Table - start -->
|
|
316
|
-
<div
|
|
333
|
+
<div
|
|
334
|
+
class="mt-8"
|
|
335
|
+
v-if="
|
|
336
|
+
getConfigPageBuilder.pageBuilderLogo &&
|
|
337
|
+
!isEmptyObject(getConfigPageBuilder.pageBuilderLogo)
|
|
338
|
+
"
|
|
339
|
+
>
|
|
317
340
|
<h4 class="myQuaternaryHeader text-sm mb-2">Logo Configuration</h4>
|
|
318
341
|
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
|
319
342
|
<div class="overflow-x-auto">
|
|
@@ -374,9 +397,15 @@ const handleDownloadHTML = function () {
|
|
|
374
397
|
</div>
|
|
375
398
|
<!-- Page Builder Logo Table - end -->
|
|
376
399
|
|
|
377
|
-
<!--
|
|
378
|
-
<div
|
|
379
|
-
|
|
400
|
+
<!-- Form Type Table - start -->
|
|
401
|
+
<div
|
|
402
|
+
class="mt-8"
|
|
403
|
+
v-if="
|
|
404
|
+
getConfigPageBuilder?.updateOrCreate &&
|
|
405
|
+
!isEmptyObject(getConfigPageBuilder.updateOrCreate)
|
|
406
|
+
"
|
|
407
|
+
>
|
|
408
|
+
<h4 class="myQuaternaryHeader text-sm mb-2">Form Type</h4>
|
|
380
409
|
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
|
381
410
|
<div class="overflow-x-auto">
|
|
382
411
|
<table class="min-w-full divide-y divide-gray-300">
|
|
@@ -399,7 +428,7 @@ const handleDownloadHTML = function () {
|
|
|
399
428
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
400
429
|
<tr>
|
|
401
430
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
402
|
-
|
|
431
|
+
Form Type
|
|
403
432
|
</td>
|
|
404
433
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
405
434
|
<span
|
|
@@ -451,9 +480,15 @@ const handleDownloadHTML = function () {
|
|
|
451
480
|
</div>
|
|
452
481
|
</div>
|
|
453
482
|
</div>
|
|
454
|
-
<!--
|
|
483
|
+
<!-- Form Type Table - end -->
|
|
455
484
|
|
|
456
|
-
<div
|
|
485
|
+
<div
|
|
486
|
+
class="mt-8"
|
|
487
|
+
v-if="
|
|
488
|
+
getConfigPageBuilder?.updateOrCreate &&
|
|
489
|
+
!isEmptyObject(getConfigPageBuilder.updateOrCreate)
|
|
490
|
+
"
|
|
491
|
+
>
|
|
457
492
|
<h4 class="myQuaternaryHeader text-sm mb-2">Delete Saved Layout</h4>
|
|
458
493
|
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
|
|
459
494
|
<div class="overflow-x-auto">
|
|
@@ -521,7 +556,6 @@ const handleDownloadHTML = function () {
|
|
|
521
556
|
@click="pageBuilderClass.removeItemComponentsLocalStorageCreate"
|
|
522
557
|
type="button"
|
|
523
558
|
>
|
|
524
|
-
<span class="material-symbols-outlined text-[18px]"> delete </span>
|
|
525
559
|
Delete
|
|
526
560
|
</button>
|
|
527
561
|
</td>
|
|
@@ -534,7 +568,6 @@ const handleDownloadHTML = function () {
|
|
|
534
568
|
@click="pageBuilderClass.removeItemComponentsLocalStorageUpdate"
|
|
535
569
|
type="button"
|
|
536
570
|
>
|
|
537
|
-
<span class="material-symbols-outlined text-[18px]"> delete </span>
|
|
538
571
|
Delete
|
|
539
572
|
</button>
|
|
540
573
|
</td>
|
|
@@ -555,7 +588,7 @@ const handleDownloadHTML = function () {
|
|
|
555
588
|
<p class="myPrimaryParagraph text-xs">Download current page layout.</p>
|
|
556
589
|
</div>
|
|
557
590
|
<div class="mt-4">
|
|
558
|
-
<button @click="handleDownloadHTML" type="button" class="myPrimaryButton
|
|
591
|
+
<button @click="handleDownloadHTML" type="button" class="myPrimaryButton">
|
|
559
592
|
Download HTML file
|
|
560
593
|
</button>
|
|
561
594
|
</div>
|