@myissue/vue-website-page-builder 3.2.86 → 3.2.91
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 +46 -3
- package/dist/vue-website-page-builder.css +1 -1
- package/dist/vue-website-page-builder.js +9217 -9022
- package/dist/vue-website-page-builder.umd.cjs +38 -38
- package/package.json +2 -2
- package/src/Components/Homepage/Footer.vue +9 -7
- package/src/Components/Homepage/Navbar.vue +6 -4
- package/src/Components/Layouts/FullWidthElement.vue +6 -6
- package/src/Components/Modals/BuilderComponents.vue +12 -6
- package/src/Components/Modals/DynamicModalBuilder.vue +39 -47
- package/src/Components/Modals/MediaLibraryModal.vue +2 -2
- package/src/Components/Modals/ModalBuilder.vue +23 -19
- package/src/Components/PageBuilder/DefaultComponents/DefaultBuilderComponents.vue +29 -17
- package/src/Components/PageBuilder/DefaultComponents/DefaultMediaLibraryComponent.vue +2 -2
- package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +22 -20
- package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue +17 -17
- package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue +28 -26
- package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue +13 -11
- package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue +5 -5
- package/src/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue +4 -4
- package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +22 -19
- package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue +11 -11
- package/src/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue +4 -4
- package/src/Components/PageBuilder/EditorMenu/Editables/LinkEditor.vue +74 -66
- package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue +26 -21
- package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue +26 -21
- package/src/Components/PageBuilder/EditorMenu/Editables/Margin.vue +101 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue +2 -3
- package/src/Components/PageBuilder/EditorMenu/Editables/{PaddingPlusMargin.vue → Padding.vue} +8 -41
- package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +22 -20
- package/src/Components/PageBuilder/EditorMenu/Editables/Typography.vue +63 -58
- package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue +7 -4
- package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +24 -19
- package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue +132 -98
- package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue +216 -146
- package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +14 -14
- package/src/Components/TipTap/TipTap.vue +4 -4
- package/src/Components/TipTap/TipTapInput.vue +39 -33
- package/src/DemoComponents/DemoBuilderComponents.vue +1 -1
- package/src/DemoComponents/DemoUnsplash.vue +79 -56
- package/src/DemoComponents/HomeSection.vue +20 -16
- package/src/DemoComponents/html.json +4 -4
- package/src/PageBuilder/PageBuilder.vue +62 -57
- package/src/PageBuilder/Preview.vue +4 -20
- package/src/composables/PageBuilderClass.ts +66 -120
- package/src/css/app.css +161 -448
- package/src/css/dev-global.css +137 -0
- package/src/main.ts +1 -0
- package/src/tailwind-safelist.html +1 -1
- package/src/utils/builder/tailwaind-colors.ts +488 -488
- package/src/utils/builder/tailwind-border-radius.ts +40 -40
- package/src/utils/builder/tailwind-border-style-width-color.ts +231 -231
- package/src/utils/builder/tailwind-font-sizes.ts +56 -57
- package/src/utils/builder/tailwind-font-styles.ts +44 -11
- package/src/utils/builder/tailwind-opacities.ts +30 -30
- package/src/utils/builder/tailwind-padding-margin.ts +136 -136
- package/dist/components.json +0 -36
- package/src/Components/Loaders/FullScreenSpinner.vue +0 -9
- package/src/Components/Loaders/SmallUniversalSpinner.vue +0 -26
|
@@ -50,51 +50,59 @@ const handleDownloadHTML = function () {
|
|
|
50
50
|
</script>
|
|
51
51
|
|
|
52
52
|
<template>
|
|
53
|
-
<div
|
|
53
|
+
<div
|
|
54
|
+
class="pbx-w-full pbx-inset-x-0 pbx-h-[90vh] pbx-bg-white pbx-overflow-x-scroll lg:pbx-pt-2 pbx-pt-2"
|
|
55
|
+
>
|
|
54
56
|
<!-- Advanced Settings - start -->
|
|
55
|
-
<div class="flex gap-4 flex-col divide-y divide-gray-300">
|
|
57
|
+
<div class="pbx-flex pbx-gap-4 pbx-flex-col pbx-divide-y pbx-divide-gray-300">
|
|
56
58
|
<!-- Advanced Settings - start -->
|
|
57
|
-
<div class="mb-4 pb-8 border-b border-myPrimbryLightGrayColor">
|
|
58
|
-
<div class="flex items-left flex-col gap-1">
|
|
59
|
-
<h3 class="myQuaternaryHeader">Configuration Overview</h3>
|
|
60
|
-
<p class="myPrimaryParagraph text-xs">
|
|
59
|
+
<div class="pbx-mb-4 pbx-pb-8 pbx-border-b pbx-border-myPrimbryLightGrayColor">
|
|
60
|
+
<div class="pbx-flex pbx-items-left pbx-flex-col pbx-gap-1">
|
|
61
|
+
<h3 class="pbx-myQuaternaryHeader">Configuration Overview</h3>
|
|
62
|
+
<p class="pbx-myPrimaryParagraph pbx-text-xs">
|
|
61
63
|
A summary of current user preferences, application settings, and system metadata
|
|
62
64
|
including UI theme, language, saved components, and logo configuration.
|
|
63
65
|
</p>
|
|
64
66
|
</div>
|
|
65
67
|
|
|
66
68
|
<!-- Version Information Table - start -->
|
|
67
|
-
<div class="px-2">
|
|
68
|
-
<div class="mt-8">
|
|
69
|
-
<h4 class="myQuaternaryHeader text-sm mb-2">Version Information</h4>
|
|
70
|
-
<div
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
69
|
+
<div class="pbx-px-2">
|
|
70
|
+
<div class="pbx-mt-8">
|
|
71
|
+
<h4 class="pbx-myQuaternaryHeader pbx-text-sm pbx-mb-2">Version Information</h4>
|
|
72
|
+
<div
|
|
73
|
+
class="pbx-overflow-hidden pbx-shadow pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 md:pbx-rounded-lg"
|
|
74
|
+
>
|
|
75
|
+
<div class="pbx-overflow-x-auto">
|
|
76
|
+
<table class="pbx-min-w-full">
|
|
77
|
+
<thead class="pbx-bg-gray-50">
|
|
74
78
|
<tr>
|
|
75
79
|
<th
|
|
76
80
|
scope="col"
|
|
77
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
81
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
78
82
|
>
|
|
79
83
|
Component
|
|
80
84
|
</th>
|
|
81
85
|
<th
|
|
82
86
|
scope="col"
|
|
83
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
87
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
84
88
|
>
|
|
85
89
|
Version
|
|
86
90
|
</th>
|
|
87
91
|
</tr>
|
|
88
92
|
</thead>
|
|
89
|
-
<tbody class="bg-white divide-y divide-gray-200">
|
|
93
|
+
<tbody class="pbx-bg-white pbx-divide-y pbx-divide-gray-200">
|
|
90
94
|
<tr>
|
|
91
|
-
<td
|
|
92
|
-
|
|
95
|
+
<td
|
|
96
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
97
|
+
>
|
|
98
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Page Builder</div>
|
|
93
99
|
</td>
|
|
94
|
-
<td
|
|
95
|
-
|
|
100
|
+
<td
|
|
101
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
102
|
+
>
|
|
103
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
96
104
|
<span
|
|
97
|
-
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
|
|
105
|
+
class="pbx-inline-flex pbx-items-center px-2.5 py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium pbx-bg-blue-100 pbx-text-blue-800"
|
|
98
106
|
>
|
|
99
107
|
{{ version }}
|
|
100
108
|
</span>
|
|
@@ -110,49 +118,59 @@ const handleDownloadHTML = function () {
|
|
|
110
118
|
|
|
111
119
|
<!-- Resource Data Table - start -->
|
|
112
120
|
<div
|
|
113
|
-
class="mt-4"
|
|
121
|
+
class="pbx-mt-4"
|
|
114
122
|
v-if="
|
|
115
123
|
getConfigPageBuilder?.resourceData &&
|
|
116
124
|
!isEmptyObject(getConfigPageBuilder.resourceData)
|
|
117
125
|
"
|
|
118
126
|
>
|
|
119
|
-
<h4 class="myQuaternaryHeader text-sm mb-2">Resource Data</h4>
|
|
120
|
-
<div
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
127
|
+
<h4 class="pbx-myQuaternaryHeader pbx-text-sm pbx-mb-2">Resource Data</h4>
|
|
128
|
+
<div
|
|
129
|
+
class="pbx-overflow-hidden pbx-shadow pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 md:pbx-rounded-lg"
|
|
130
|
+
>
|
|
131
|
+
<div class="pbx-overflow-x-auto">
|
|
132
|
+
<table class="pbx-min-w-full">
|
|
133
|
+
<thead class="pbx-bg-gray-50">
|
|
124
134
|
<tr>
|
|
125
135
|
<th
|
|
126
136
|
scope="col"
|
|
127
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
137
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
128
138
|
>
|
|
129
139
|
Property
|
|
130
140
|
</th>
|
|
131
141
|
<th
|
|
132
142
|
scope="col"
|
|
133
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
143
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
134
144
|
>
|
|
135
145
|
Value
|
|
136
146
|
</th>
|
|
137
147
|
</tr>
|
|
138
148
|
</thead>
|
|
139
|
-
<tbody class="bg-white divide-y divide-gray-200">
|
|
149
|
+
<tbody class="pbx-bg-white pbx-divide-y pbx-divide-gray-200">
|
|
140
150
|
<tr v-if="getConfigPageBuilder?.resourceData?.title">
|
|
141
|
-
<td
|
|
142
|
-
|
|
151
|
+
<td
|
|
152
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
153
|
+
>
|
|
154
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Title</div>
|
|
143
155
|
</td>
|
|
144
|
-
<td
|
|
145
|
-
|
|
156
|
+
<td
|
|
157
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
158
|
+
>
|
|
159
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
146
160
|
{{ getConfigPageBuilder.resourceData.title }}
|
|
147
161
|
</div>
|
|
148
162
|
</td>
|
|
149
163
|
</tr>
|
|
150
164
|
<tr v-if="getConfigPageBuilder?.resourceData?.id">
|
|
151
|
-
<td
|
|
152
|
-
|
|
165
|
+
<td
|
|
166
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
167
|
+
>
|
|
168
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">ID</div>
|
|
153
169
|
</td>
|
|
154
|
-
<td
|
|
155
|
-
|
|
170
|
+
<td
|
|
171
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
172
|
+
>
|
|
173
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
156
174
|
{{ getConfigPageBuilder.resourceData.id }}
|
|
157
175
|
</div>
|
|
158
176
|
</td>
|
|
@@ -166,46 +184,54 @@ const handleDownloadHTML = function () {
|
|
|
166
184
|
|
|
167
185
|
<!-- User Information Table - start -->
|
|
168
186
|
<div
|
|
169
|
-
class="mt-8"
|
|
187
|
+
class="pbx-mt-8"
|
|
170
188
|
v-if="
|
|
171
189
|
getConfigPageBuilder?.userForPageBuilder &&
|
|
172
190
|
!isEmptyObject(getConfigPageBuilder.userForPageBuilder)
|
|
173
191
|
"
|
|
174
192
|
>
|
|
175
|
-
<h4 class="myQuaternaryHeader text-sm mb-2">User Information</h4>
|
|
176
|
-
<div
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
193
|
+
<h4 class="pbx-myQuaternaryHeader pbx-text-sm pbx-mb-2">User Information</h4>
|
|
194
|
+
<div
|
|
195
|
+
class="pbx-overflow-hidden pbx-shadow pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 md:pbx-rounded-lg"
|
|
196
|
+
>
|
|
197
|
+
<div class="pbx-overflow-x-auto">
|
|
198
|
+
<table class="pbx-min-w-full">
|
|
199
|
+
<thead class="pbx-bg-gray-50">
|
|
180
200
|
<tr>
|
|
181
201
|
<th
|
|
182
202
|
scope="col"
|
|
183
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
203
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
184
204
|
>
|
|
185
205
|
Property
|
|
186
206
|
</th>
|
|
187
207
|
<th
|
|
188
208
|
scope="col"
|
|
189
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
209
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
190
210
|
>
|
|
191
211
|
Value
|
|
192
212
|
</th>
|
|
193
213
|
</tr>
|
|
194
214
|
</thead>
|
|
195
|
-
<tbody class="bg-white divide-y divide-gray-200">
|
|
215
|
+
<tbody class="pbx-bg-white pbx-divide-y pbx-divide-gray-200">
|
|
196
216
|
<tr>
|
|
197
|
-
<td
|
|
198
|
-
|
|
217
|
+
<td
|
|
218
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
219
|
+
>
|
|
220
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">User Name</div>
|
|
199
221
|
</td>
|
|
200
|
-
<td
|
|
201
|
-
|
|
222
|
+
<td
|
|
223
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
224
|
+
>
|
|
225
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
202
226
|
{{ getConfigPageBuilder.userForPageBuilder.name }}
|
|
203
227
|
</div>
|
|
204
228
|
</td>
|
|
205
229
|
</tr>
|
|
206
230
|
<tr>
|
|
207
|
-
<td
|
|
208
|
-
|
|
231
|
+
<td
|
|
232
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
233
|
+
>
|
|
234
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Image</div>
|
|
209
235
|
</td>
|
|
210
236
|
<td
|
|
211
237
|
v-if="
|
|
@@ -213,12 +239,12 @@ const handleDownloadHTML = function () {
|
|
|
213
239
|
typeof getConfigPageBuilder.userForPageBuilder.image === 'string' &&
|
|
214
240
|
getConfigPageBuilder.userForPageBuilder.image.length > 2
|
|
215
241
|
"
|
|
216
|
-
class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
|
|
242
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
217
243
|
>
|
|
218
|
-
<div class="min-w-[30rem] w-max">
|
|
219
|
-
<div class="flex items-center space-x-3">
|
|
244
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
245
|
+
<div class="pbx-flex pbx-items-center pbx-space-x-3">
|
|
220
246
|
<img
|
|
221
|
-
class="block inset-0 object-top h-10 min-h-10 max-h-10 w-10 min-w-10 max-w-10 object-cover rounded-full"
|
|
247
|
+
class="pbx-block pbx-inset-0 pbx-object-top pbx-h-10 pbx-min-h-10 pbx-max-h-10 pbx-w-10 pbx-min-w-10 pbx-max-w-10 pbx-object-cover pbx-rounded-full"
|
|
222
248
|
:src="getConfigPageBuilder.userForPageBuilder.image"
|
|
223
249
|
alt="image"
|
|
224
250
|
/>
|
|
@@ -227,8 +253,10 @@ const handleDownloadHTML = function () {
|
|
|
227
253
|
</td>
|
|
228
254
|
</tr>
|
|
229
255
|
<tr>
|
|
230
|
-
<td
|
|
231
|
-
|
|
256
|
+
<td
|
|
257
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
258
|
+
>
|
|
259
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Image URL</div>
|
|
232
260
|
</td>
|
|
233
261
|
<td
|
|
234
262
|
v-if="
|
|
@@ -236,9 +264,9 @@ const handleDownloadHTML = function () {
|
|
|
236
264
|
typeof getConfigPageBuilder.userForPageBuilder.image === 'string' &&
|
|
237
265
|
getConfigPageBuilder.userForPageBuilder.image.length > 2
|
|
238
266
|
"
|
|
239
|
-
class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
|
|
267
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
240
268
|
>
|
|
241
|
-
<div class="min-w-[30rem] w-max">
|
|
269
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
242
270
|
{{ getConfigPageBuilder.userForPageBuilder.image }}
|
|
243
271
|
</div>
|
|
244
272
|
</td>
|
|
@@ -252,61 +280,75 @@ const handleDownloadHTML = function () {
|
|
|
252
280
|
|
|
253
281
|
<!-- User Settings Table - start -->
|
|
254
282
|
<div
|
|
255
|
-
class="mt-8"
|
|
283
|
+
class="pbx-mt-8"
|
|
256
284
|
v-if="
|
|
257
285
|
getConfigPageBuilder?.userSettings &&
|
|
258
286
|
!isEmptyObject(getConfigPageBuilder.userSettings)
|
|
259
287
|
"
|
|
260
288
|
>
|
|
261
|
-
<h4 class="myQuaternaryHeader text-sm mb-2">User Settings</h4>
|
|
262
|
-
<div
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
289
|
+
<h4 class="pbx-myQuaternaryHeader pbx-text-sm pbx-mb-2">User Settings</h4>
|
|
290
|
+
<div
|
|
291
|
+
class="pbx-overflow-hidden pbx-shadow pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 md:pbx-rounded-lg"
|
|
292
|
+
>
|
|
293
|
+
<div class="pbx-overflow-x-auto">
|
|
294
|
+
<table class="pbx-min-w-full">
|
|
295
|
+
<thead class="pbx-bg-gray-50">
|
|
266
296
|
<tr>
|
|
267
297
|
<th
|
|
268
298
|
scope="col"
|
|
269
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
299
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
270
300
|
>
|
|
271
301
|
Setting
|
|
272
302
|
</th>
|
|
273
303
|
<th
|
|
274
304
|
scope="col"
|
|
275
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
305
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
276
306
|
>
|
|
277
307
|
Value
|
|
278
308
|
</th>
|
|
279
309
|
</tr>
|
|
280
310
|
</thead>
|
|
281
|
-
<tbody class="bg-white divide-y divide-gray-200">
|
|
311
|
+
<tbody class="pbx-bg-white pbx-divide-y pbx-divide-gray-200">
|
|
282
312
|
<tr v-if="getConfigPageBuilder?.userSettings?.theme">
|
|
283
|
-
<td
|
|
284
|
-
|
|
313
|
+
<td
|
|
314
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
315
|
+
>
|
|
316
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Theme</div>
|
|
285
317
|
</td>
|
|
286
|
-
<td
|
|
287
|
-
|
|
318
|
+
<td
|
|
319
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
320
|
+
>
|
|
321
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
288
322
|
{{ getConfigPageBuilder.userSettings.theme }}
|
|
289
323
|
</div>
|
|
290
324
|
</td>
|
|
291
325
|
</tr>
|
|
292
326
|
<tr v-if="getConfigPageBuilder?.userSettings?.language">
|
|
293
|
-
<td
|
|
294
|
-
|
|
327
|
+
<td
|
|
328
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
329
|
+
>
|
|
330
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Language</div>
|
|
295
331
|
</td>
|
|
296
|
-
<td
|
|
297
|
-
|
|
332
|
+
<td
|
|
333
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
334
|
+
>
|
|
335
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
298
336
|
{{ getConfigPageBuilder.userSettings.language }}
|
|
299
337
|
</div>
|
|
300
338
|
</td>
|
|
301
339
|
</tr>
|
|
302
340
|
<tr v-if="getConfigPageBuilder?.userSettings?.autoSave !== undefined">
|
|
303
|
-
<td
|
|
304
|
-
|
|
341
|
+
<td
|
|
342
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
343
|
+
>
|
|
344
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Auto Save</div>
|
|
305
345
|
</td>
|
|
306
|
-
<td
|
|
307
|
-
|
|
346
|
+
<td
|
|
347
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
348
|
+
>
|
|
349
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
308
350
|
<span
|
|
309
|
-
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
|
351
|
+
class="pbx-inline-flex pbx-items-center px-2.5 py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
|
|
310
352
|
:class="
|
|
311
353
|
getConfigPageBuilder.userSettings.autoSave
|
|
312
354
|
? 'bg-green-100 text-green-800'
|
|
@@ -321,13 +363,17 @@ const handleDownloadHTML = function () {
|
|
|
321
363
|
</td>
|
|
322
364
|
</tr>
|
|
323
365
|
<tr v-if="getConfigPageBuilder?.userSettings?.notifications !== undefined">
|
|
324
|
-
<td
|
|
325
|
-
|
|
366
|
+
<td
|
|
367
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
368
|
+
>
|
|
369
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Notifications</div>
|
|
326
370
|
</td>
|
|
327
|
-
<td
|
|
328
|
-
|
|
371
|
+
<td
|
|
372
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
373
|
+
>
|
|
374
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
329
375
|
<span
|
|
330
|
-
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
|
376
|
+
class="pbx-inline-flex pbx-items-center px-2.5 py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
|
|
331
377
|
:class="
|
|
332
378
|
getConfigPageBuilder.userSettings.notifications
|
|
333
379
|
? 'bg-green-100 text-green-800'
|
|
@@ -352,42 +398,48 @@ const handleDownloadHTML = function () {
|
|
|
352
398
|
|
|
353
399
|
<!-- Page Builder Logo Table - start -->
|
|
354
400
|
<div
|
|
355
|
-
class="mt-8"
|
|
401
|
+
class="pbx-mt-8"
|
|
356
402
|
v-if="
|
|
357
403
|
getConfigPageBuilder.pageBuilderLogo &&
|
|
358
404
|
!isEmptyObject(getConfigPageBuilder.pageBuilderLogo)
|
|
359
405
|
"
|
|
360
406
|
>
|
|
361
|
-
<h4 class="myQuaternaryHeader text-sm mb-2">Logo Configuration</h4>
|
|
362
|
-
<div
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
407
|
+
<h4 class="pbx-myQuaternaryHeader pbx-text-sm pbx-mb-2">Logo Configuration</h4>
|
|
408
|
+
<div
|
|
409
|
+
class="pbx-overflow-hidden pbx-shadow pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 md:pbx-rounded-lg"
|
|
410
|
+
>
|
|
411
|
+
<div class="pbx-overflow-x-auto">
|
|
412
|
+
<table class="pbx-min-w-full">
|
|
413
|
+
<thead class="pbx-bg-gray-50">
|
|
366
414
|
<tr>
|
|
367
415
|
<th
|
|
368
416
|
scope="col"
|
|
369
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
417
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
370
418
|
>
|
|
371
419
|
Property
|
|
372
420
|
</th>
|
|
373
421
|
<th
|
|
374
422
|
scope="col"
|
|
375
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
423
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
376
424
|
>
|
|
377
425
|
Value
|
|
378
426
|
</th>
|
|
379
427
|
</tr>
|
|
380
428
|
</thead>
|
|
381
|
-
<tbody class="bg-white divide-y divide-gray-200">
|
|
429
|
+
<tbody class="pbx-bg-white pbx-divide-y pbx-divide-gray-200">
|
|
382
430
|
<tr>
|
|
383
|
-
<td
|
|
384
|
-
|
|
431
|
+
<td
|
|
432
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
433
|
+
>
|
|
434
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Logo</div>
|
|
385
435
|
</td>
|
|
386
|
-
<td
|
|
387
|
-
|
|
388
|
-
|
|
436
|
+
<td
|
|
437
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
438
|
+
>
|
|
439
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
440
|
+
<div class="pbx-flex pbx-items-center pbx-space-x-3">
|
|
389
441
|
<img
|
|
390
|
-
class="h-4"
|
|
442
|
+
class="pbx-h-4"
|
|
391
443
|
:src="getConfigPageBuilder.pageBuilderLogo.src"
|
|
392
444
|
alt="Logo"
|
|
393
445
|
/>
|
|
@@ -396,15 +448,19 @@ const handleDownloadHTML = function () {
|
|
|
396
448
|
</td>
|
|
397
449
|
</tr>
|
|
398
450
|
<tr>
|
|
399
|
-
<td
|
|
400
|
-
|
|
451
|
+
<td
|
|
452
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
453
|
+
>
|
|
454
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Logo URL</div>
|
|
401
455
|
</td>
|
|
402
|
-
<td
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
456
|
+
<td
|
|
457
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
458
|
+
>
|
|
459
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
460
|
+
<div class="pbx-flex pbx-items-center pbx-space-x-3">
|
|
461
|
+
<div class="pbx-pr-6">
|
|
462
|
+
<div class="pbx-flex pbx-items-center pbx-space-x-3">
|
|
463
|
+
<span class="pbx-whitespace-nowrap">{{
|
|
408
464
|
getConfigPageBuilder.pageBuilderLogo.src
|
|
409
465
|
}}</span>
|
|
410
466
|
</div>
|
|
@@ -422,41 +478,47 @@ const handleDownloadHTML = function () {
|
|
|
422
478
|
|
|
423
479
|
<!-- Form Type Table - start -->
|
|
424
480
|
<div
|
|
425
|
-
class="mt-8"
|
|
481
|
+
class="pbx-mt-8"
|
|
426
482
|
v-if="
|
|
427
483
|
getConfigPageBuilder?.updateOrCreate &&
|
|
428
484
|
!isEmptyObject(getConfigPageBuilder.updateOrCreate)
|
|
429
485
|
"
|
|
430
486
|
>
|
|
431
|
-
<h4 class="myQuaternaryHeader text-sm mb-2">Form Type</h4>
|
|
432
|
-
<div
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
487
|
+
<h4 class="pbx-myQuaternaryHeader pbx-text-sm pbx-mb-2">Form Type</h4>
|
|
488
|
+
<div
|
|
489
|
+
class="pbx-overflow-hidden pbx-shadow pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 md:pbx-rounded-lg"
|
|
490
|
+
>
|
|
491
|
+
<div class="pbx-overflow-x-auto">
|
|
492
|
+
<table class="pbx-w-max">
|
|
493
|
+
<thead class="pbx-bg-gray-50">
|
|
436
494
|
<tr>
|
|
437
495
|
<th
|
|
438
496
|
scope="col"
|
|
439
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
497
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
440
498
|
>
|
|
441
499
|
Mode
|
|
442
500
|
</th>
|
|
443
501
|
<th
|
|
444
502
|
scope="col"
|
|
445
|
-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
|
503
|
+
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-font-medium pbx-text-gray-500 pbx-uppercase pbx-tracking-wider"
|
|
446
504
|
>
|
|
447
505
|
Description
|
|
448
506
|
</th>
|
|
449
507
|
</tr>
|
|
450
508
|
</thead>
|
|
451
|
-
<tbody class="bg-white divide-y divide-gray-200">
|
|
509
|
+
<tbody class="pbx-bg-white pbx-divide-y pbx-divide-gray-200">
|
|
452
510
|
<tr>
|
|
453
|
-
<td
|
|
454
|
-
|
|
511
|
+
<td
|
|
512
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
513
|
+
>
|
|
514
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Form Type</div>
|
|
455
515
|
</td>
|
|
456
|
-
<td
|
|
457
|
-
|
|
516
|
+
<td
|
|
517
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
518
|
+
>
|
|
519
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
458
520
|
<span
|
|
459
|
-
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
|
521
|
+
class="pbx-inline-flex pbx-items-center px-2.5 py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
|
|
460
522
|
:class="
|
|
461
523
|
getConfigPageBuilder.updateOrCreate === 'create'
|
|
462
524
|
? 'bg-green-100 text-green-800'
|
|
@@ -489,13 +551,17 @@ const handleDownloadHTML = function () {
|
|
|
489
551
|
getConfigPageBuilder.updateOrCreate.formName.length > 0
|
|
490
552
|
"
|
|
491
553
|
>
|
|
492
|
-
<td
|
|
493
|
-
|
|
554
|
+
<td
|
|
555
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
|
|
556
|
+
>
|
|
557
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">Form Name</div>
|
|
494
558
|
</td>
|
|
495
|
-
<td
|
|
496
|
-
|
|
559
|
+
<td
|
|
560
|
+
class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
|
|
561
|
+
>
|
|
562
|
+
<div class="pbx-min-w-[30rem] pbx-w-max">
|
|
497
563
|
<span
|
|
498
|
-
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
|
|
564
|
+
class="pbx-inline-flex pbx-items-center px-2.5 py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
|
|
499
565
|
>
|
|
500
566
|
{{ getConfigPageBuilder.updateOrCreate.formName }}
|
|
501
567
|
</span>
|
|
@@ -513,13 +579,13 @@ const handleDownloadHTML = function () {
|
|
|
513
579
|
</div>
|
|
514
580
|
<!-- Advanced Settings - end -->
|
|
515
581
|
<!-- Download Layout HTML - start -->
|
|
516
|
-
<div class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor">
|
|
517
|
-
<div class="flex items-left flex-col gap-1">
|
|
518
|
-
<h3 class="myQuaternaryHeader">Download Page as HTML</h3>
|
|
519
|
-
<p class="myPrimaryParagraph text-xs">Download current page layout.</p>
|
|
582
|
+
<div class="pbx-mt-4 pbx-mb-4 pbx-py-8 pbx-border-b pbx-border-myPrimbryLightGrayColor">
|
|
583
|
+
<div class="pbx-flex pbx-items-left pbx-flex-col pbx-gap-1">
|
|
584
|
+
<h3 class="pbx-myQuaternaryHeader">Download Page as HTML</h3>
|
|
585
|
+
<p class="pbx-myPrimaryParagraph pbx-text-xs">Download current page layout.</p>
|
|
520
586
|
</div>
|
|
521
|
-
<div class="mt-4">
|
|
522
|
-
<button @click="handleDownloadHTML" type="button" class="myPrimaryButton">
|
|
587
|
+
<div class="pbx-mt-4">
|
|
588
|
+
<button @click="handleDownloadHTML" type="button" class="pbx-myPrimaryButton">
|
|
523
589
|
Download HTML file
|
|
524
590
|
</button>
|
|
525
591
|
</div>
|
|
@@ -527,24 +593,28 @@ const handleDownloadHTML = function () {
|
|
|
527
593
|
<!-- Download Layout HTML - end -->
|
|
528
594
|
|
|
529
595
|
<!-- Congig - start -->
|
|
530
|
-
<div class="mt-4 mb-4 py-8 border-b border-myPrimbryLightGrayColor">
|
|
531
|
-
<div class="flex items-left flex-col gap-1">
|
|
532
|
-
<h3 class="myQuaternaryHeader">Complete Configuration Overview</h3>
|
|
533
|
-
<p class="myPrimaryParagraph text-xs">
|
|
596
|
+
<div class="pbx-mt-4 pbx-mb-4 pbx-py-8 pbx-border-b pbx-border-myPrimbryLightGrayColor">
|
|
597
|
+
<div class="pbx-flex pbx-items-left pbx-flex-col pbx-gap-1">
|
|
598
|
+
<h3 class="pbx-myQuaternaryHeader">Complete Configuration Overview</h3>
|
|
599
|
+
<p class="pbx-myPrimaryParagraph pbx-text-xs">
|
|
534
600
|
omplete configuration object currently used by the Page Builder. It includes information
|
|
535
601
|
about the user, form behavior, branding settings, and other context-specific data needed
|
|
536
602
|
for rendering and managing the builder environment.
|
|
537
603
|
</p>
|
|
538
604
|
</div>
|
|
539
605
|
|
|
540
|
-
<div
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
606
|
+
<div
|
|
607
|
+
class="pbx-mt-4 pbx-whitespace-pre-wrap pbx-text-white pbx-overflow-hidden pbx-bg-gray-900"
|
|
608
|
+
>
|
|
609
|
+
<div class="pbx-flex bg-gray-800/40 pbx-ring-1 ring-white/5">
|
|
610
|
+
<div
|
|
611
|
+
class="pbx-mb-px pbx-flex pbx-text-xs pbx-font-medium pbx-text-myPrimaryMediumGrayColor"
|
|
612
|
+
>
|
|
613
|
+
<div class="pbx-px-4 pbx-py-4 pbx-text-white">Configuration</div>
|
|
544
614
|
</div>
|
|
545
615
|
</div>
|
|
546
|
-
<div class="px-4 pb-8 pt-4 text-white text-xs break-all">
|
|
547
|
-
<p class="myPrimaryParagraph text-xs text-white">
|
|
616
|
+
<div class="pbx-px-4 pbx-pb-8 pbx-pt-4 pbx-text-white pbx-text-xs pbx-break-all">
|
|
617
|
+
<p class="pbx-myPrimaryParagraph pbx-text-xs pbx-text-white">
|
|
548
618
|
config: {{ JSON.stringify(getConfigPageBuilder, null, 4) }}
|
|
549
619
|
</p>
|
|
550
620
|
</div>
|