@myissue/vue-website-page-builder 3.2.90 → 3.2.92

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.
Files changed (43) hide show
  1. package/README.md +122 -84
  2. package/dist/vue-website-page-builder.css +1 -1
  3. package/dist/vue-website-page-builder.js +5191 -5273
  4. package/dist/vue-website-page-builder.umd.cjs +52 -52
  5. package/package.json +1 -1
  6. package/src/Components/Loaders/GlobalLoader.vue +11 -0
  7. package/src/Components/Modals/DynamicModalBuilder.vue +41 -245
  8. package/src/Components/Modals/ModalBuilder.vue +29 -4
  9. package/src/Components/PageBuilder/DefaultComponents/DefaultBuilderComponents.vue +3 -8
  10. package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +5 -4
  11. package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue +12 -13
  12. package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue +8 -8
  13. package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue +7 -6
  14. package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue +6 -10
  15. package/src/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue +4 -4
  16. package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +10 -11
  17. package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue +4 -5
  18. package/src/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue +0 -9
  19. package/src/Components/PageBuilder/EditorMenu/Editables/LinkEditor.vue +5 -5
  20. package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue +4 -4
  21. package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue +4 -4
  22. package/src/Components/PageBuilder/EditorMenu/Editables/Margin.vue +8 -8
  23. package/src/Components/PageBuilder/EditorMenu/Editables/Padding.vue +8 -8
  24. package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +4 -4
  25. package/src/Components/PageBuilder/EditorMenu/Editables/Typography.vue +16 -16
  26. package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +3 -7
  27. package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue +55 -58
  28. package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +33 -40
  29. package/src/Components/TipTap/TipTap.vue +4 -9
  30. package/src/Components/TipTap/TipTapInput.vue +8 -8
  31. package/src/DemoComponents/DemoUnsplash.vue +4 -5
  32. package/src/DemoComponents/HomeSection.vue +9 -30
  33. package/src/DemoComponents/html.json +4 -4
  34. package/src/PageBuilder/PageBuilder.vue +194 -96
  35. package/src/composables/{PageBuilderClass.ts → PageBuilderService.ts} +258 -97
  36. package/src/composables/builderInstance.ts +25 -0
  37. package/src/css/app.css +15 -0
  38. package/src/css/dev-global.css +7 -0
  39. package/src/index.ts +4 -2
  40. package/src/main.ts +3 -0
  41. package/src/stores/page-builder-state.ts +32 -2
  42. package/src/types/index.ts +99 -9
  43. package/src/helpers/passedPageBuilderConfig.ts +0 -71
@@ -1,15 +1,15 @@
1
1
  <script setup>
2
2
  import { ref, computed, watch } from 'vue'
3
3
  import EditorAccordion from '../EditorAccordion.vue'
4
- import PageBuilderClass from '../../../../composables/PageBuilderClass.ts'
5
4
  import tailwindFontSizes from '../../../../utils/builder/tailwind-font-sizes'
6
5
  import tailwindFontStyles from '../../../../utils/builder/tailwind-font-styles'
7
6
  import { sharedPageBuilderStore } from '../../../../stores/shared-store'
7
+ import { getPageBuilder } from '../../../../composables/builderInstance'
8
+ const pageBuilderService = getPageBuilder()
8
9
 
9
10
  // Use shared store instance
10
11
  const pageBuilderStateStore = sharedPageBuilderStore
11
12
 
12
- const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
13
13
  const fontBase = ref(null)
14
14
  const fontDesktop = ref(null)
15
15
  const fontTablet = ref(null)
@@ -43,7 +43,7 @@ watch(
43
43
  getFontBase,
44
44
  async (newValue) => {
45
45
  fontBase.value = newValue
46
- await pageBuilderClass.initializeElementStyles()
46
+ await pageBuilderService.initializeElementStyles()
47
47
  },
48
48
  { immediate: true },
49
49
  )
@@ -51,7 +51,7 @@ watch(
51
51
  getFontDesktop,
52
52
  async (newValue) => {
53
53
  fontDesktop.value = newValue
54
- await pageBuilderClass.initializeElementStyles()
54
+ await pageBuilderService.initializeElementStyles()
55
55
  },
56
56
  { immediate: true },
57
57
  )
@@ -59,7 +59,7 @@ watch(
59
59
  getFontTablet,
60
60
  async (newValue) => {
61
61
  fontTablet.value = newValue
62
- await pageBuilderClass.initializeElementStyles()
62
+ await pageBuilderService.initializeElementStyles()
63
63
  },
64
64
  { immediate: true },
65
65
  )
@@ -67,7 +67,7 @@ watch(
67
67
  getFontMobile,
68
68
  async (newValue) => {
69
69
  fontMobile.value = newValue
70
- await pageBuilderClass.initializeElementStyles()
70
+ await pageBuilderService.initializeElementStyles()
71
71
  },
72
72
  { immediate: true },
73
73
  )
@@ -75,7 +75,7 @@ watch(
75
75
  getFontWeight,
76
76
  async (newValue) => {
77
77
  fontWeight.value = newValue
78
- await pageBuilderClass.initializeElementStyles()
78
+ await pageBuilderService.initializeElementStyles()
79
79
  },
80
80
  { immediate: true },
81
81
  )
@@ -83,7 +83,7 @@ watch(
83
83
  getFontFamily,
84
84
  async (newValue) => {
85
85
  fontFamily.value = newValue
86
- await pageBuilderClass.initializeElementStyles()
86
+ await pageBuilderService.initializeElementStyles()
87
87
  },
88
88
  { immediate: true },
89
89
  )
@@ -91,7 +91,7 @@ watch(
91
91
  getFontStyle,
92
92
  async (newValue) => {
93
93
  fontStyle.value = newValue
94
- await pageBuilderClass.initializeElementStyles()
94
+ await pageBuilderService.initializeElementStyles()
95
95
  },
96
96
  { immediate: true },
97
97
  )
@@ -108,7 +108,7 @@ watch(
108
108
  <select
109
109
  v-model="fontBase"
110
110
  class="pbx-myPrimarySelect"
111
- @change="pageBuilderClass.handleFontSizeBase(fontBase)"
111
+ @change="pageBuilderService.handleFontSizeBase(fontBase)"
112
112
  >
113
113
  <option disabled value="">Select</option>
114
114
  <option v-for="fontSize in tailwindFontSizes.fontBase" :key="fontSize">
@@ -122,7 +122,7 @@ watch(
122
122
  <select
123
123
  v-model="fontDesktop"
124
124
  class="pbx-myPrimarySelect"
125
- @change="pageBuilderClass.handleFontSizeDesktop(fontDesktop)"
125
+ @change="pageBuilderService.handleFontSizeDesktop(fontDesktop)"
126
126
  >
127
127
  <option disabled value="">Select</option>
128
128
  <option v-for="fontSize in tailwindFontSizes.fontDesktop" :key="fontSize">
@@ -135,7 +135,7 @@ watch(
135
135
  <select
136
136
  v-model="fontTablet"
137
137
  class="pbx-myPrimarySelect"
138
- @change="pageBuilderClass.handleFontSizeTablet(fontTablet)"
138
+ @change="pageBuilderService.handleFontSizeTablet(fontTablet)"
139
139
  >
140
140
  <option disabled value="">Select</option>
141
141
  <option v-for="fontSize in tailwindFontSizes.fontTablet" :key="fontSize">
@@ -148,7 +148,7 @@ watch(
148
148
  <select
149
149
  v-model="fontMobile"
150
150
  class="pbx-myPrimarySelect"
151
- @change="pageBuilderClass.handleFontSizeMobile(fontMobile)"
151
+ @change="pageBuilderService.handleFontSizeMobile(fontMobile)"
152
152
  >
153
153
  <option disabled value="">Select</option>
154
154
  <option v-for="fontSize in tailwindFontSizes.fontMobile" :key="fontSize">
@@ -164,7 +164,7 @@ watch(
164
164
  <select
165
165
  v-model="fontFamily"
166
166
  class="pbx-myPrimarySelect"
167
- @change="pageBuilderClass.handleFontFamily(fontFamily)"
167
+ @change="pageBuilderService.handleFontFamily(fontFamily)"
168
168
  >
169
169
  <option disabled value="">Select</option>
170
170
  <option v-for="fontFamily in tailwindFontStyles.fontFamily" :key="fontFamily">
@@ -179,7 +179,7 @@ watch(
179
179
  <select
180
180
  v-model="fontWeight"
181
181
  class="pbx-myPrimarySelect"
182
- @change="pageBuilderClass.handleFontWeight(fontWeight)"
182
+ @change="pageBuilderService.handleFontWeight(fontWeight)"
183
183
  >
184
184
  <option disabled value="">Select</option>
185
185
  <option v-for="fontWeight in tailwindFontStyles.fontWeight" :key="fontWeight">
@@ -193,7 +193,7 @@ watch(
193
193
  <select
194
194
  v-model="fontStyle"
195
195
  class="pbx-myPrimarySelect"
196
- @change="pageBuilderClass.handleFontStyle(fontStyle)"
196
+ @change="pageBuilderService.handleFontStyle(fontStyle)"
197
197
  >
198
198
  <option disabled value="">Select</option>
199
199
  <option v-for="fontStyle in tailwindFontStyles.fontStyle" :key="fontStyle">
@@ -1,8 +1,6 @@
1
1
  <script setup>
2
2
  import { computed } from 'vue'
3
3
  import { sharedPageBuilderStore } from '../../../stores/shared-store'
4
- import PageBuilderClass from '../../../composables/PageBuilderClass.ts'
5
-
6
4
  import ClassEditor from './Editables/ClassEditor.vue'
7
5
  import ImageEditor from './Editables/ImageEditor.vue'
8
6
  import OpacityEditor from './Editables/OpacityEditor.vue'
@@ -16,13 +14,11 @@ import LinkEditor from './Editables/LinkEditor.vue'
16
14
  import TipTap from '../../TipTap/TipTap.vue'
17
15
  import EditGetElement from './Editables/EditGetElement.vue'
18
16
  import ElementEditor from './Editables/ElementEditor.vue'
19
-
17
+ import { getPageBuilder } from '../../../composables/builderInstance'
18
+ const pageBuilderService = getPageBuilder()
20
19
  // Use shared store instance
21
20
  const pageBuilderStateStore = sharedPageBuilderStore
22
21
 
23
- // Initialize PageBuilder with store
24
- const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
25
-
26
22
  // emit
27
23
  const emit = defineEmits(['closeEditor'])
28
24
 
@@ -63,7 +59,7 @@ const isHeadingElement = computed(() => {
63
59
  </div>
64
60
 
65
61
  <div class="pbx-pl-3 pbx-pr-3 pbx-mb-4 pbx-overflow-y-scroll">
66
- <div v-show="getElement && pageBuilderClass.isEditableElement(getElement)">
62
+ <div v-show="getElement && pageBuilderService.isEditableElement(getElement)">
67
63
  <article class="pbx-mb-1">
68
64
  <ImageEditor> </ImageEditor>
69
65
  </article>
@@ -2,20 +2,16 @@
2
2
  import { ref, computed } from 'vue'
3
3
  import { sharedPageBuilderStore } from '../../../stores/shared-store'
4
4
  import fullHTMLContent from '../../../utils/builder/html-doc-declaration-with-components'
5
- import PageBuilderClass from '../../../composables/PageBuilderClass.ts'
6
5
  import { isEmptyObject } from '../../../helpers/isEmptyObject.ts'
7
6
  const version = __APP_VERSION__
8
7
 
9
8
  // Use shared store instance
10
9
  const pageBuilderStateStore = sharedPageBuilderStore
11
10
 
12
- // Initialize PageBuilder with store
13
- const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
14
-
15
11
  const downloadedComponents = ref(null)
16
12
 
17
- const getConfigPageBuilder = computed(() => {
18
- return pageBuilderStateStore.getConfigPageBuilder
13
+ const getPageBuilderConfig = computed(() => {
14
+ return pageBuilderStateStore.getPageBuilderConfig
19
15
  })
20
16
 
21
17
  const getComponents = computed(() => {
@@ -80,7 +76,7 @@ const handleDownloadHTML = function () {
80
76
  scope="col"
81
77
  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"
82
78
  >
83
- Component
79
+ App
84
80
  </th>
85
81
  <th
86
82
  scope="col"
@@ -102,7 +98,7 @@ const handleDownloadHTML = function () {
102
98
  >
103
99
  <div class="pbx-min-w-[30rem] pbx-w-max">
104
100
  <span
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"
101
+ class="pbx-inline-flex pbx-items-center pbx-px-2.5 pbx-py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium pbx-bg-blue-100 pbx-text-blue-800"
106
102
  >
107
103
  {{ version }}
108
104
  </span>
@@ -120,8 +116,8 @@ const handleDownloadHTML = function () {
120
116
  <div
121
117
  class="pbx-mt-4"
122
118
  v-if="
123
- getConfigPageBuilder?.resourceData &&
124
- !isEmptyObject(getConfigPageBuilder.resourceData)
119
+ getPageBuilderConfig?.resourceData &&
120
+ !isEmptyObject(getPageBuilderConfig.resourceData)
125
121
  "
126
122
  >
127
123
  <h4 class="pbx-myQuaternaryHeader pbx-text-sm pbx-mb-2">Resource Data</h4>
@@ -147,7 +143,7 @@ const handleDownloadHTML = function () {
147
143
  </tr>
148
144
  </thead>
149
145
  <tbody class="pbx-bg-white pbx-divide-y pbx-divide-gray-200">
150
- <tr v-if="getConfigPageBuilder?.resourceData?.title">
146
+ <tr v-if="getPageBuilderConfig?.resourceData?.title">
151
147
  <td
152
148
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
153
149
  >
@@ -157,11 +153,11 @@ const handleDownloadHTML = function () {
157
153
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
158
154
  >
159
155
  <div class="pbx-min-w-[30rem] pbx-w-max">
160
- {{ getConfigPageBuilder.resourceData.title }}
156
+ {{ getPageBuilderConfig.resourceData.title }}
161
157
  </div>
162
158
  </td>
163
159
  </tr>
164
- <tr v-if="getConfigPageBuilder?.resourceData?.id">
160
+ <tr v-if="getPageBuilderConfig?.resourceData?.id">
165
161
  <td
166
162
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
167
163
  >
@@ -171,7 +167,7 @@ const handleDownloadHTML = function () {
171
167
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
172
168
  >
173
169
  <div class="pbx-min-w-[30rem] pbx-w-max">
174
- {{ getConfigPageBuilder.resourceData.id }}
170
+ {{ getPageBuilderConfig.resourceData.id }}
175
171
  </div>
176
172
  </td>
177
173
  </tr>
@@ -186,8 +182,8 @@ const handleDownloadHTML = function () {
186
182
  <div
187
183
  class="pbx-mt-8"
188
184
  v-if="
189
- getConfigPageBuilder?.userForPageBuilder &&
190
- !isEmptyObject(getConfigPageBuilder.userForPageBuilder)
185
+ getPageBuilderConfig?.userForPageBuilder &&
186
+ !isEmptyObject(getPageBuilderConfig.userForPageBuilder)
191
187
  "
192
188
  >
193
189
  <h4 class="pbx-myQuaternaryHeader pbx-text-sm pbx-mb-2">User Information</h4>
@@ -223,7 +219,7 @@ const handleDownloadHTML = function () {
223
219
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
224
220
  >
225
221
  <div class="pbx-min-w-[30rem] pbx-w-max">
226
- {{ getConfigPageBuilder.userForPageBuilder.name }}
222
+ {{ getPageBuilderConfig.userForPageBuilder.name }}
227
223
  </div>
228
224
  </td>
229
225
  </tr>
@@ -235,9 +231,9 @@ const handleDownloadHTML = function () {
235
231
  </td>
236
232
  <td
237
233
  v-if="
238
- getConfigPageBuilder.userForPageBuilder.image &&
239
- typeof getConfigPageBuilder.userForPageBuilder.image === 'string' &&
240
- getConfigPageBuilder.userForPageBuilder.image.length > 2
234
+ getPageBuilderConfig.userForPageBuilder.image &&
235
+ typeof getPageBuilderConfig.userForPageBuilder.image === 'string' &&
236
+ getPageBuilderConfig.userForPageBuilder.image.length > 2
241
237
  "
242
238
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
243
239
  >
@@ -245,7 +241,7 @@ const handleDownloadHTML = function () {
245
241
  <div class="pbx-flex pbx-items-center pbx-space-x-3">
246
242
  <img
247
243
  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"
248
- :src="getConfigPageBuilder.userForPageBuilder.image"
244
+ :src="getPageBuilderConfig.userForPageBuilder.image"
249
245
  alt="image"
250
246
  />
251
247
  </div>
@@ -260,14 +256,14 @@ const handleDownloadHTML = function () {
260
256
  </td>
261
257
  <td
262
258
  v-if="
263
- getConfigPageBuilder.userForPageBuilder.image &&
264
- typeof getConfigPageBuilder.userForPageBuilder.image === 'string' &&
265
- getConfigPageBuilder.userForPageBuilder.image.length > 2
259
+ getPageBuilderConfig.userForPageBuilder.image &&
260
+ typeof getPageBuilderConfig.userForPageBuilder.image === 'string' &&
261
+ getPageBuilderConfig.userForPageBuilder.image.length > 2
266
262
  "
267
263
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
268
264
  >
269
265
  <div class="pbx-min-w-[30rem] pbx-w-max">
270
- {{ getConfigPageBuilder.userForPageBuilder.image }}
266
+ {{ getPageBuilderConfig.userForPageBuilder.image }}
271
267
  </div>
272
268
  </td>
273
269
  </tr>
@@ -282,8 +278,8 @@ const handleDownloadHTML = function () {
282
278
  <div
283
279
  class="pbx-mt-8"
284
280
  v-if="
285
- getConfigPageBuilder?.userSettings &&
286
- !isEmptyObject(getConfigPageBuilder.userSettings)
281
+ getPageBuilderConfig?.userSettings &&
282
+ !isEmptyObject(getPageBuilderConfig.userSettings)
287
283
  "
288
284
  >
289
285
  <h4 class="pbx-myQuaternaryHeader pbx-text-sm pbx-mb-2">User Settings</h4>
@@ -309,7 +305,7 @@ const handleDownloadHTML = function () {
309
305
  </tr>
310
306
  </thead>
311
307
  <tbody class="pbx-bg-white pbx-divide-y pbx-divide-gray-200">
312
- <tr v-if="getConfigPageBuilder?.userSettings?.theme">
308
+ <tr v-if="getPageBuilderConfig?.userSettings?.theme">
313
309
  <td
314
310
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
315
311
  >
@@ -319,11 +315,11 @@ const handleDownloadHTML = function () {
319
315
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
320
316
  >
321
317
  <div class="pbx-min-w-[30rem] pbx-w-max">
322
- {{ getConfigPageBuilder.userSettings.theme }}
318
+ {{ getPageBuilderConfig.userSettings.theme }}
323
319
  </div>
324
320
  </td>
325
321
  </tr>
326
- <tr v-if="getConfigPageBuilder?.userSettings?.language">
322
+ <tr v-if="getPageBuilderConfig?.userSettings?.language">
327
323
  <td
328
324
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
329
325
  >
@@ -333,11 +329,11 @@ const handleDownloadHTML = function () {
333
329
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500"
334
330
  >
335
331
  <div class="pbx-min-w-[30rem] pbx-w-max">
336
- {{ getConfigPageBuilder.userSettings.language }}
332
+ {{ getPageBuilderConfig.userSettings.language }}
337
333
  </div>
338
334
  </td>
339
335
  </tr>
340
- <tr v-if="getConfigPageBuilder?.userSettings?.autoSave !== undefined">
336
+ <tr v-if="getPageBuilderConfig?.userSettings?.autoSave !== undefined">
341
337
  <td
342
338
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
343
339
  >
@@ -348,21 +344,21 @@ const handleDownloadHTML = function () {
348
344
  >
349
345
  <div class="pbx-min-w-[30rem] pbx-w-max">
350
346
  <span
351
- class="pbx-inline-flex pbx-items-center px-2.5 py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
347
+ class="pbx-inline-flex pbx-items-center pbx-px-2.5 pbx-py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
352
348
  :class="
353
- getConfigPageBuilder.userSettings.autoSave
349
+ getPageBuilderConfig.userSettings.autoSave
354
350
  ? 'bg-green-100 text-green-800'
355
351
  : 'bg-red-100 text-red-800'
356
352
  "
357
353
  >
358
354
  {{
359
- getConfigPageBuilder.userSettings.autoSave ? 'Enabled' : 'Disabled'
355
+ getPageBuilderConfig.userSettings.autoSave ? 'Enabled' : 'Disabled'
360
356
  }}
361
357
  </span>
362
358
  </div>
363
359
  </td>
364
360
  </tr>
365
- <tr v-if="getConfigPageBuilder?.userSettings?.notifications !== undefined">
361
+ <tr v-if="getPageBuilderConfig?.userSettings?.notifications !== undefined">
366
362
  <td
367
363
  class="pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-font-medium pbx-text-gray-900"
368
364
  >
@@ -373,15 +369,15 @@ const handleDownloadHTML = function () {
373
369
  >
374
370
  <div class="pbx-min-w-[30rem] pbx-w-max">
375
371
  <span
376
- class="pbx-inline-flex pbx-items-center px-2.5 py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
372
+ class="pbx-inline-flex pbx-items-center pbx-px-2.5 pbx-py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
377
373
  :class="
378
- getConfigPageBuilder.userSettings.notifications
374
+ getPageBuilderConfig.userSettings.notifications
379
375
  ? 'bg-green-100 text-green-800'
380
376
  : 'bg-red-100 text-red-800'
381
377
  "
382
378
  >
383
379
  {{
384
- getConfigPageBuilder.userSettings.notifications
380
+ getPageBuilderConfig.userSettings.notifications
385
381
  ? 'Enabled'
386
382
  : 'Disabled'
387
383
  }}
@@ -400,8 +396,9 @@ const handleDownloadHTML = function () {
400
396
  <div
401
397
  class="pbx-mt-8"
402
398
  v-if="
403
- getConfigPageBuilder.pageBuilderLogo &&
404
- !isEmptyObject(getConfigPageBuilder.pageBuilderLogo)
399
+ getPageBuilderConfig &&
400
+ getPageBuilderConfig.pageBuilderLogo &&
401
+ !isEmptyObject(getPageBuilderConfig.pageBuilderLogo)
405
402
  "
406
403
  >
407
404
  <h4 class="pbx-myQuaternaryHeader pbx-text-sm pbx-mb-2">Logo Configuration</h4>
@@ -440,7 +437,7 @@ const handleDownloadHTML = function () {
440
437
  <div class="pbx-flex pbx-items-center pbx-space-x-3">
441
438
  <img
442
439
  class="pbx-h-4"
443
- :src="getConfigPageBuilder.pageBuilderLogo.src"
440
+ :src="getPageBuilderConfig.pageBuilderLogo.src"
444
441
  alt="Logo"
445
442
  />
446
443
  </div>
@@ -461,7 +458,7 @@ const handleDownloadHTML = function () {
461
458
  <div class="pbx-pr-6">
462
459
  <div class="pbx-flex pbx-items-center pbx-space-x-3">
463
460
  <span class="pbx-whitespace-nowrap">{{
464
- getConfigPageBuilder.pageBuilderLogo.src
461
+ getPageBuilderConfig.pageBuilderLogo.src
465
462
  }}</span>
466
463
  </div>
467
464
  </div>
@@ -480,8 +477,8 @@ const handleDownloadHTML = function () {
480
477
  <div
481
478
  class="pbx-mt-8"
482
479
  v-if="
483
- getConfigPageBuilder?.updateOrCreate &&
484
- !isEmptyObject(getConfigPageBuilder.updateOrCreate)
480
+ getPageBuilderConfig?.updateOrCreate &&
481
+ !isEmptyObject(getPageBuilderConfig.updateOrCreate)
485
482
  "
486
483
  >
487
484
  <h4 class="pbx-myQuaternaryHeader pbx-text-sm pbx-mb-2">Form Type</h4>
@@ -518,28 +515,28 @@ const handleDownloadHTML = function () {
518
515
  >
519
516
  <div class="pbx-min-w-[30rem] pbx-w-max">
520
517
  <span
521
- class="pbx-inline-flex pbx-items-center px-2.5 py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
518
+ class="pbx-inline-flex pbx-items-center pbx-px-2.5 pbx-py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
522
519
  :class="
523
- getConfigPageBuilder.updateOrCreate === 'create'
520
+ getPageBuilderConfig.updateOrCreate === 'create'
524
521
  ? 'bg-green-100 text-green-800'
525
522
  : 'bg-blue-100 text-blue-800'
526
523
  "
527
524
  >
528
525
  <span
529
526
  v-if="
530
- getConfigPageBuilder &&
531
- getConfigPageBuilder.updateOrCreate.formType === 'create'
527
+ getPageBuilderConfig &&
528
+ getPageBuilderConfig.updateOrCreate.formType === 'create'
532
529
  "
533
530
  >
534
- {{ getConfigPageBuilder.updateOrCreate.formType }}
531
+ {{ getPageBuilderConfig.updateOrCreate.formType }}
535
532
  </span>
536
533
  <span
537
534
  v-if="
538
- getConfigPageBuilder &&
539
- getConfigPageBuilder.updateOrCreate.formType === 'update'
535
+ getPageBuilderConfig &&
536
+ getPageBuilderConfig.updateOrCreate.formType === 'update'
540
537
  "
541
538
  >
542
- {{ getConfigPageBuilder.updateOrCreate.formType }}
539
+ {{ getPageBuilderConfig.updateOrCreate.formType }}
543
540
  </span>
544
541
  </span>
545
542
  </div>
@@ -547,8 +544,8 @@ const handleDownloadHTML = function () {
547
544
  </tr>
548
545
  <tr
549
546
  v-if="
550
- getConfigPageBuilder.updateOrCreate.formName &&
551
- getConfigPageBuilder.updateOrCreate.formName.length > 0
547
+ getPageBuilderConfig.updateOrCreate.formName &&
548
+ getPageBuilderConfig.updateOrCreate.formName.length > 0
552
549
  "
553
550
  >
554
551
  <td
@@ -561,9 +558,9 @@ const handleDownloadHTML = function () {
561
558
  >
562
559
  <div class="pbx-min-w-[30rem] pbx-w-max">
563
560
  <span
564
- class="pbx-inline-flex pbx-items-center px-2.5 py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
561
+ class="pbx-inline-flex pbx-items-center pbx-px-2.5 pbx-py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium"
565
562
  >
566
- {{ getConfigPageBuilder.updateOrCreate.formName }}
563
+ {{ getPageBuilderConfig.updateOrCreate.formName }}
567
564
  </span>
568
565
  </div>
569
566
  </td>
@@ -615,7 +612,7 @@ const handleDownloadHTML = function () {
615
612
  </div>
616
613
  <div class="pbx-px-4 pbx-pb-8 pbx-pt-4 pbx-text-white pbx-text-xs pbx-break-all">
617
614
  <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-text-white">
618
- config: {{ JSON.stringify(getConfigPageBuilder, null, 4) }}
615
+ config: {{ JSON.stringify(getPageBuilderConfig, null, 4) }}
619
616
  </p>
620
617
  </div>
621
618
  </div>