@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.
Files changed (59) hide show
  1. package/README.md +46 -3
  2. package/dist/vue-website-page-builder.css +1 -1
  3. package/dist/vue-website-page-builder.js +9217 -9022
  4. package/dist/vue-website-page-builder.umd.cjs +38 -38
  5. package/package.json +2 -2
  6. package/src/Components/Homepage/Footer.vue +9 -7
  7. package/src/Components/Homepage/Navbar.vue +6 -4
  8. package/src/Components/Layouts/FullWidthElement.vue +6 -6
  9. package/src/Components/Modals/BuilderComponents.vue +12 -6
  10. package/src/Components/Modals/DynamicModalBuilder.vue +39 -47
  11. package/src/Components/Modals/MediaLibraryModal.vue +2 -2
  12. package/src/Components/Modals/ModalBuilder.vue +23 -19
  13. package/src/Components/PageBuilder/DefaultComponents/DefaultBuilderComponents.vue +29 -17
  14. package/src/Components/PageBuilder/DefaultComponents/DefaultMediaLibraryComponent.vue +2 -2
  15. package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +22 -20
  16. package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue +17 -17
  17. package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue +28 -26
  18. package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue +13 -11
  19. package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue +5 -5
  20. package/src/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue +4 -4
  21. package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +22 -19
  22. package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue +11 -11
  23. package/src/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue +4 -4
  24. package/src/Components/PageBuilder/EditorMenu/Editables/LinkEditor.vue +74 -66
  25. package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue +26 -21
  26. package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue +26 -21
  27. package/src/Components/PageBuilder/EditorMenu/Editables/Margin.vue +101 -0
  28. package/src/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue +2 -3
  29. package/src/Components/PageBuilder/EditorMenu/Editables/{PaddingPlusMargin.vue → Padding.vue} +8 -41
  30. package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +22 -20
  31. package/src/Components/PageBuilder/EditorMenu/Editables/Typography.vue +63 -58
  32. package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue +7 -4
  33. package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +24 -19
  34. package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue +132 -98
  35. package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue +216 -146
  36. package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +14 -14
  37. package/src/Components/TipTap/TipTap.vue +4 -4
  38. package/src/Components/TipTap/TipTapInput.vue +39 -33
  39. package/src/DemoComponents/DemoBuilderComponents.vue +1 -1
  40. package/src/DemoComponents/DemoUnsplash.vue +79 -56
  41. package/src/DemoComponents/HomeSection.vue +20 -16
  42. package/src/DemoComponents/html.json +4 -4
  43. package/src/PageBuilder/PageBuilder.vue +62 -57
  44. package/src/PageBuilder/Preview.vue +4 -20
  45. package/src/composables/PageBuilderClass.ts +66 -120
  46. package/src/css/app.css +161 -448
  47. package/src/css/dev-global.css +137 -0
  48. package/src/main.ts +1 -0
  49. package/src/tailwind-safelist.html +1 -1
  50. package/src/utils/builder/tailwaind-colors.ts +488 -488
  51. package/src/utils/builder/tailwind-border-radius.ts +40 -40
  52. package/src/utils/builder/tailwind-border-style-width-color.ts +231 -231
  53. package/src/utils/builder/tailwind-font-sizes.ts +56 -57
  54. package/src/utils/builder/tailwind-font-styles.ts +44 -11
  55. package/src/utils/builder/tailwind-opacities.ts +30 -30
  56. package/src/utils/builder/tailwind-padding-margin.ts +136 -136
  57. package/dist/components.json +0 -36
  58. package/src/Components/Loaders/FullScreenSpinner.vue +0 -9
  59. package/src/Components/Loaders/SmallUniversalSpinner.vue +0 -26
package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue CHANGED
@@ -32,35 +32,41 @@ function prettifyHtml(html) {
32
32
  </script>
33
33
 
34
34
  <template>
35
- <div class="w-full inset-x-0 h-[90vh] bg-white overflow-x-scroll lg:pt-2 pt-2">
36
- <div class="flex items-left flex-col myPrimaryGap border-myPrimaryMediumGrayColor">
37
- <p class="myPrimaryParagraph">
35
+ <div
36
+ 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"
37
+ >
38
+ <div
39
+ class="pbx-flex pbx-items-left pbx-flex-col pbx-myPrimaryGap pbx-border-myPrimaryMediumGrayColor"
40
+ >
41
+ <p class="pbx-myPrimaryParagraph">
38
42
  Overview of Selected Element, Component, and Components. This section provides real-time
39
43
  updates based on your HTML selection.
40
44
  </p>
41
45
 
42
46
  <!-- Types - start -->
43
47
  <div>
44
- <h4 class="myPrimaryParagraph text-xs pb-2">Types</h4>
45
- <div class="text-gray-100 overflow-hidden bg-stone-800">
46
- <div class="flex bg-stone-800 ring-1 ring-white/5">
47
- <div class="-mb-px flex text-xs font-medium text-myPrimaryMediumGrayColor">
48
- <div class="px-4 py-4 text-gray-100">Types</div>
48
+ <h4 class="pbx-myPrimaryParagraph pbx-text-xs pbx-pb-2">Types</h4>
49
+ <div class="pbx-text-gray-100 pbx-overflow-hidden pbx-bg-stone-800">
50
+ <div class="pbx-flex pbx-bg-stone-800 pbx-ring-1 ring-white/5">
51
+ <div
52
+ class="pbx-mb-px pbx-flex pbx-text-xs pbx-font-medium pbx-text-myPrimaryMediumGrayColor"
53
+ >
54
+ <div class="pbx-px-4 pbx-py-4 pbx-text-gray-100">Types</div>
49
55
  </div>
50
56
  </div>
51
- <div class="px-4 pb-8 pt-4 text-gray-100 text-xs">
52
- <p class="text-xs pb-2">
57
+ <div class="pbx-px-4 pbx-pb-8 pbx-pt-4 pbx-text-gray-100 pbx-text-xs">
58
+ <p class="pbx-text-xs pbx-pb-2">
53
59
  <span>Element type: </span>
54
60
  <span>
55
61
  {{ typeof getElement }}
56
62
  </span>
57
63
  </p>
58
64
 
59
- <p class="text-xs pb-2">
65
+ <p class="pbx-text-xs pbx-pb-2">
60
66
  <span>Component type: </span>
61
67
  {{ typeof getComponent }}
62
68
  </p>
63
- <p class="text-xs pb-2">
69
+ <p class="pbx-text-xs pbx-pb-2">
64
70
  <span>Components: </span>
65
71
  <span>
66
72
  {{ Array.isArray(getComponents) === true ? 'array' : typeof getComponents }}
@@ -72,56 +78,63 @@ function prettifyHtml(html) {
72
78
  <!-- Types - end -->
73
79
  <!-- Code Block Component - start-->
74
80
  <div>
75
- <h4 class="myPrimaryParagraph text-xs pb-2">Content</h4>
76
- <div class="overflow-hidden bg-stone-800">
77
- <div class="flex bg-stone-800 ring-1 ring-white/5">
78
- <div class="-mb-px flex text-xs font-medium text-myPrimaryMediumGrayColor">
81
+ <h4 class="pbx-myPrimaryParagraph pbx-text-xs pbx-pb-2">Content</h4>
82
+ <div class="pbx-overflow-hidden pbx-bg-stone-800">
83
+ <div class="pbx-flex pbx-bg-stone-800 pbx-ring-1 ring-white/5">
84
+ <div
85
+ class="pbx-mb-px pbx-flex pbx-text-xs pbx-font-medium pbx-text-myPrimaryMediumGrayColor"
86
+ >
79
87
  <div
80
88
  @click="updateCurrentTab('element')"
81
- class="px-4 py-4 cursor-pointer"
82
- :class="[current === 'element' ? 'text-gray-100' : '']"
89
+ class="pbx-px-4 pbx-py-4 pbx-cursor-pointer"
90
+ :class="[current === 'element' ? 'pbx-text-gray-100' : '']"
83
91
  >
84
92
  Element
85
93
  </div>
86
94
  <div
87
95
  @click="updateCurrentTab('component')"
88
- class="px-4 py-4 cursor-pointer"
89
- :class="[current === 'component' ? 'text-gray-100' : '']"
96
+ class="pbx-px-4 pbx-py-4 pbx-cursor-pointer"
97
+ :class="[current === 'component' ? 'pbx-text-gray-100' : '']"
90
98
  >
91
99
  Component
92
100
  </div>
93
101
  <div
94
102
  @click="updateCurrentTab('components')"
95
- class="px-4 py-4 cursor-pointer"
96
- :class="[current === 'components' ? 'text-gray-100' : '']"
103
+ class="pbx-px-4 pbx-py-4 pbx-cursor-pointer"
104
+ :class="[current === 'components' ? 'pbx-text-gray-100' : '']"
97
105
  >
98
- Components
106
+ Components added
99
107
  {{ Array.isArray(getComponents) && getComponents.length }}
100
108
  </div>
101
109
  </div>
102
110
  </div>
103
- <div class="px-4 pb-8 pt-4 text-gray-100 text-xs break-all">
111
+ <div class="pbx-px-4 pbx-pb-8 pbx-pt-4 pbx-text-gray-100 pbx-text-xs pbx-break-all">
104
112
  <div v-if="current === 'element'">
105
113
  <div v-if="!getComponent">
106
- <p class="pb-2 text-xs">
114
+ <p class="pbx-pb-2 pbx-text-xs">
107
115
  {{ getComponent === null ? 'No Element selected' : typeof getComponent }}
108
116
  </p>
109
117
  </div>
110
- <div v-if="getElement" class="overflow-hidden border border-gray-100 mb-6">
111
- <div class="bg-stone-800 pt-4 pb-1 border-b border-gray-200">
112
- <div class="overflow-x-auto">
113
- <table class="min-w-full">
114
- <thead class="bg-stone-800">
118
+ <div
119
+ v-if="getElement"
120
+ class="pbx-overflow-hidden pbx-border pbx-border-gray-100 pbx-mb-6"
121
+ >
122
+ <div class="pbx-bg-stone-800 pbx-pt-4 pbx-1 pbx-border-b pbx-border-gray-200">
123
+ <div class="pbx-overflow-x-auto">
124
+ <table class="pbx-min-w-full">
125
+ <thead class="pbx-bg-stone-800">
115
126
  <tr>
116
- <th class="px-6 py-3 text-left text-xs text-gray-100 font-normal">
127
+ <th
128
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
129
+ >
117
130
  Selected HTML:
118
131
  </th>
119
132
  </tr>
120
133
  </thead>
121
- <tbody class="bg-stone-800 divide-y divide-gray-200">
134
+ <tbody class="pbx-bg-stone-800 pbx-divide-y pbx-divide-gray-200">
122
135
  <tr>
123
136
  <td
124
- class="px-6 py-3 text-left text-xs text-gray-100 font-normal border-b"
137
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-b"
125
138
  >
126
139
  {{ getElement?.outerHTML }}
127
140
  </td>
@@ -129,19 +142,21 @@ function prettifyHtml(html) {
129
142
  </tbody>
130
143
  </table>
131
144
  </div>
132
- <div class="overflow-x-auto">
133
- <table class="min-w-full">
134
- <thead class="bg-stone-800">
145
+ <div class="pbx-overflow-x-auto">
146
+ <table class="pbx-min-w-full">
147
+ <thead class="pbx-bg-stone-800">
135
148
  <tr>
136
- <th class="px-6 py-3 text-left text-xs text-gray-100 font-normal">
149
+ <th
150
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
151
+ >
137
152
  Element src:
138
153
  </th>
139
154
  </tr>
140
155
  </thead>
141
- <tbody class="bg-stone-800 divide-y divide-gray-200">
156
+ <tbody class="pbx-bg-stone-800 pbx-divide-y pbx-divide-gray-200">
142
157
  <tr>
143
158
  <td
144
- class="px-6 py-3 text-left text-xs text-gray-100 font-normal whitespace-pre-line"
159
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-whitespace-pre-line"
145
160
  >
146
161
  {{ getElement?.src ? getElement?.src : typeof getElement?.src }}
147
162
  </td>
@@ -150,18 +165,22 @@ function prettifyHtml(html) {
150
165
  </table>
151
166
  </div>
152
167
  </div>
153
- <div class="overflow-x-auto">
154
- <table class="min-w-full">
155
- <thead class="bg-stone-800">
168
+ <div class="pbx-overflow-x-auto">
169
+ <table class="pbx-min-w-full">
170
+ <thead class="pbx-bg-stone-800">
156
171
  <tr>
157
- <th class="px-6 py-3 text-left text-xs text-gray-100 font-normal">
172
+ <th
173
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
174
+ >
158
175
  Element classes:
159
176
  </th>
160
177
  </tr>
161
178
  </thead>
162
- <tbody class="bg-stone-800 divide-y divide-gray-200">
179
+ <tbody class="pbx-bg-stone-800 pbx-divide-y pbx-divide-gray-200">
163
180
  <tr>
164
- <td class="px-6 py-3 text-left text-xs text-gray-100 font-normal">
181
+ <td
182
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
183
+ >
165
184
  {{
166
185
  getElement?.classList
167
186
  ? getElement?.classList
@@ -177,43 +196,52 @@ function prettifyHtml(html) {
177
196
 
178
197
  <div v-if="current === 'component'">
179
198
  <div v-if="!getComponent">
180
- <p class="pb-2 text-xs">
199
+ <p class="pbx-pb-2 pbx-text-xs">
181
200
  {{ getComponent === null ? 'No Component selected' : typeof getComponent }}
182
201
  </p>
183
202
  </div>
184
- <div v-if="getComponent" class="overflow-hidden border border-gray-100 mb-6">
185
- <div class="bg-stone-800 pt-4 pb-1 border-b border-gray-200">
186
- <div class="overflow-x-auto">
187
- <table class="min-w-full">
188
- <thead class="bg-stone-800">
203
+ <div
204
+ v-if="getComponent"
205
+ class="pbx-overflow-hidden pbx-border pbx-border-gray-100 pbx-mb-6"
206
+ >
207
+ <div class="pbx-bg-stone-800 pbx-pt-4 pbx-1 pbx-border-b pbx-border-gray-200">
208
+ <div class="pbx-overflow-x-auto">
209
+ <table class="pbx-min-w-full">
210
+ <thead class="pbx-bg-stone-800">
189
211
  <tr>
190
- <th class="px-6 py-3 text-left text-xs text-gray-100 font-normal">ID:</th>
212
+ <th
213
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
214
+ >
215
+ ID:
216
+ </th>
191
217
  </tr>
192
218
  </thead>
193
- <tbody class="bg-stone-800 divide-y divide-gray-200">
219
+ <tbody class="pbx-bg-stone-800 pbx-divide-y pbx-divide-gray-200">
194
220
  <tr>
195
- <td class="px-6 py-3 text-left text-xs text-gray-100 font-normal">
221
+ <td
222
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
223
+ >
196
224
  {{ getComponent?.id }}
197
225
  </td>
198
226
  </tr>
199
227
  </tbody>
200
228
  </table>
201
229
  </div>
202
- <div class="overflow-x-auto">
203
- <table class="min-w-full">
204
- <thead class="bg-stone-800">
230
+ <div class="pbx-overflow-x-auto">
231
+ <table class="pbx-min-w-full">
232
+ <thead class="pbx-bg-stone-800">
205
233
  <tr>
206
234
  <th
207
- class="px-6 py-3 text-left text-xs text-gray-100 font-normal border-t"
235
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-t"
208
236
  >
209
237
  Title:
210
238
  </th>
211
239
  </tr>
212
240
  </thead>
213
- <tbody class="bg-stone-800 divide-y divide-gray-200">
241
+ <tbody class="pbx-bg-stone-800 pbx-divide-y pbx-divide-gray-200">
214
242
  <tr>
215
243
  <td
216
- class="px-6 py-3 text-left text-xs text-gray-100 font-normal whitespace-pre-line"
244
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-whitespace-pre-line"
217
245
  >
218
246
  {{ getComponent?.title }}
219
247
  </td>
@@ -222,22 +250,26 @@ function prettifyHtml(html) {
222
250
  </table>
223
251
  </div>
224
252
  </div>
225
- <div class="overflow-x-auto">
226
- <table class="min-w-full">
227
- <thead class="bg-stone-800">
253
+ <div class="pbx-overflow-x-auto">
254
+ <table class="pbx-min-w-full">
255
+ <thead class="pbx-bg-stone-800">
228
256
  <tr>
229
- <th class="px-6 py-3 text-left text-xs text-gray-100 font-normal">
257
+ <th
258
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
259
+ >
230
260
  HTML Code:
231
261
  </th>
232
262
  </tr>
233
263
  </thead>
234
- <tbody class="bg-stone-800 divide-y divide-gray-200">
264
+ <tbody class="pbx-bg-stone-800 pbx-divide-y pbx-divide-gray-200">
235
265
  <tr>
236
- <td class="px-6 py-3 text-left text-xs text-gray-100 font-normal">
266
+ <td
267
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
268
+ >
237
269
  <pre
238
- class="text-xs text-gray-100 whitespace-pre-lines font-sans flex items-start justify-left"
270
+ class="pbx-text-xs pbx-text-gray-100 pbx-whitespace-pre-lines pbx-font-sans pbx-flex pbx-items-start pbx-justify-left"
239
271
  >
240
- <code class="font-sans" v-html="prettifyHtml(getComponent?.html_code)"></code>
272
+ <code class="pbx-font-sans" v-html="prettifyHtml(getComponent?.html_code)"></code>
241
273
  </pre>
242
274
  </td>
243
275
  </tr>
@@ -247,57 +279,55 @@ function prettifyHtml(html) {
247
279
  </div>
248
280
  </div>
249
281
  <div v-if="current === 'components'">
250
- <div>
251
- <p class="pb-2 text-xs">
252
- {{
253
- Array.isArray(getComponents) && getComponents.length === 0
254
- ? 'No Components added yet'
255
- : ''
256
- }}
257
- </p>
282
+ <div v-if="Array.isArray(getComponents) && getComponents.length === 0">
283
+ <p class="pbx-pb-2 pbx-text-xs">No Components added yet</p>
258
284
  </div>
259
285
 
260
286
  <div v-if="getComponents">
261
287
  <div
262
288
  v-for="component in getComponents"
263
289
  :key="component.id"
264
- class="overflow-hidden border border-gray-100 mb-6"
290
+ class="pbx-overflow-hidden pbx-border pbx-border-gray-100 pbx-mb-6"
265
291
  >
266
292
  <!-- Id and Title above the table, styled to look connected -->
267
- <div class="bg-stone-800 pt-4 pb-1 border-b border-gray-200">
268
- <div class="overflow-x-auto">
269
- <table class="min-w-full">
270
- <thead class="bg-stone-800">
293
+ <div class="pbx-bg-stone-800 pbx-pt-4 pbx-1 pbx-border-b pbx-border-gray-200">
294
+ <div class="pbx-overflow-x-auto">
295
+ <table class="pbx-min-w-full">
296
+ <thead class="pbx-bg-stone-800">
271
297
  <tr>
272
- <th class="px-6 py-3 text-left text-xs text-gray-100 font-normal">
298
+ <th
299
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
300
+ >
273
301
  ID:
274
302
  </th>
275
303
  </tr>
276
304
  </thead>
277
- <tbody class="bg-stone-800 divide-y divide-gray-200">
305
+ <tbody class="pbx-bg-stone-800 pbx-divide-y pbx-divide-gray-200">
278
306
  <tr>
279
- <td class="px-6 py-3 text-left text-xs text-gray-100 font-normal">
307
+ <td
308
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
309
+ >
280
310
  {{ component.id }}
281
311
  </td>
282
312
  </tr>
283
313
  </tbody>
284
314
  </table>
285
315
  </div>
286
- <div class="overflow-x-auto">
287
- <table class="min-w-full">
288
- <thead class="bg-stone-800">
316
+ <div class="pbx-overflow-x-auto">
317
+ <table class="pbx-min-w-full">
318
+ <thead class="pbx-bg-stone-800">
289
319
  <tr>
290
320
  <th
291
- class="px-6 py-3 text-left text-xs text-gray-100 font-normal border-t"
321
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-t"
292
322
  >
293
323
  Title:
294
324
  </th>
295
325
  </tr>
296
326
  </thead>
297
- <tbody class="bg-stone-800 divide-y divide-gray-200">
327
+ <tbody class="pbx-bg-stone-800 pbx-divide-y pbx-divide-gray-200">
298
328
  <tr>
299
329
  <td
300
- class="px-6 py-3 text-left text-xs text-gray-100 font-normal whitespace-pre-line"
330
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-whitespace-pre-line"
301
331
  >
302
332
  {{ component.title }}
303
333
  </td>
@@ -306,22 +336,26 @@ function prettifyHtml(html) {
306
336
  </table>
307
337
  </div>
308
338
  </div>
309
- <div class="overflow-x-auto">
310
- <table class="min-w-full">
311
- <thead class="bg-stone-800">
339
+ <div class="pbx-overflow-x-auto">
340
+ <table class="pbx-min-w-full">
341
+ <thead class="pbx-bg-stone-800">
312
342
  <tr>
313
- <th class="px-6 py-3 text-left text-xs text-gray-100 font-normal">
343
+ <th
344
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
345
+ >
314
346
  HTML Code:
315
347
  </th>
316
348
  </tr>
317
349
  </thead>
318
- <tbody class="bg-stone-800 divide-y divide-gray-200">
350
+ <tbody class="pbx-bg-stone-800 pbx-divide-y pbx-divide-gray-200">
319
351
  <tr>
320
- <td class="px-6 py-3 text-left text-xs text-gray-100 font-normal">
352
+ <td
353
+ class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
354
+ >
321
355
  <pre
322
- class="text-xs text-gray-100 whitespace-pre-lines font-sans flex items-start justify-left"
356
+ class="pbx-text-xs pbx-text-gray-100 pbx-whitespace-pre-lines pbx-font-sans pbx-flex pbx-items-start pbx-justify-left"
323
357
  >
324
- <code class="font-sans" v-html="prettifyHtml(component.html_code)"></code>
358
+ <code class="pbx-font-sans" v-html="prettifyHtml(component.html_code)"></code>
325
359
  </pre>
326
360
  </td>
327
361
  </tr>