@myissue/vue-website-page-builder 3.3.83 → 3.3.85
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{ar-COgc0DCm.js → ar-ITBqBm-d.js} +72 -41
- package/dist/{de-CGky7E-a.js → de-BJpPaS11.js} +68 -37
- package/dist/{en-DU_tZbAN.js → en-B_2bnBr-.js} +71 -40
- package/dist/{es-OjYclQFK.js → es-whPPQx5J.js} +68 -37
- package/dist/{fr-q_n3yaNn.js → fr-BT4veodQ.js} +72 -41
- package/dist/{hi-PCyw3ByF.js → hi-ebTmcUsS.js} +75 -44
- package/dist/{ja-fF78DiFn.js → ja-BRtI2tes.js} +69 -38
- package/dist/{pt-h1yUOPEo.js → pt-DcvtSuUT.js} +74 -43
- package/dist/{ru-91i2N905.js → ru-Q6PD0n2W.js} +62 -31
- package/dist/style.css +1 -1
- package/dist/vue-website-page-builder.js +6382 -6245
- package/dist/vue-website-page-builder.umd.cjs +96 -63
- package/dist/{zh-Hans-DU7U45Js.js → zh-Hans-CZQ2JK7v.js} +69 -38
- package/package.json +1 -1
- package/src/Components/Modals/BuilderComponents.vue +1 -1
- package/src/Components/Modals/MediaLibraryModal.vue +1 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue +3 -0
- package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue +70 -67
- package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue +2 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +1 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/StyleEditor.vue +2 -1
- package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +4 -2
- package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue +152 -56
- package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +8 -8
- package/src/Components/TipTap/TipTap.vue +12 -15
- package/src/PageBuilder/PageBuilder.vue +101 -80
- package/src/composables/extractCleanHTMLFromPageBuilder.ts +1 -1
- package/src/css/dev-global.css +0 -9
- package/src/css/style.css +2 -37
- package/src/locales/ar.json +26 -1
- package/src/locales/de.json +26 -1
- package/src/locales/en.json +24 -2
- package/src/locales/es.json +26 -1
- package/src/locales/fr.json +26 -1
- package/src/locales/hi.json +26 -1
- package/src/locales/ja.json +26 -1
- package/src/locales/pt.json +26 -1
- package/src/locales/ru.json +26 -1
- package/src/locales/zh-Hans.json +26 -1
- package/src/services/PageBuilderService.ts +95 -50
- package/src/tailwind-safelist.html +1 -1
- package/src/{Components/PageBuilder → tests}/DefaultComponents/DefaultBuilderComponents.vue +49 -10
- package/src/tests/TestComponents/DemoMediaLibraryComponentTest.vue +1 -1
- package/src/{Components → tests/TestComponents}/DemoUnsplash.vue +5 -5
- package/src/utils/componentPreviews.ts +35 -0
- package/src/utils/html-elements/component.ts +17 -3
- /package/src/{Components/PageBuilder → tests}/DefaultComponents/DefaultMediaLibraryComponent.vue +0 -0
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import { ref, computed } from 'vue'
|
|
3
3
|
import { sharedPageBuilderStore } from '../../../stores/shared-store'
|
|
4
|
+
import { useTranslations } from '../../../composables/useTranslations'
|
|
5
|
+
|
|
6
|
+
const { translate } = useTranslations()
|
|
4
7
|
|
|
5
8
|
// Use shared store instance
|
|
6
9
|
const pageBuilderStateStore = sharedPageBuilderStore
|
|
@@ -19,15 +22,87 @@ const current = ref('element')
|
|
|
19
22
|
const updateCurrentTab = function (tab) {
|
|
20
23
|
current.value = tab
|
|
21
24
|
}
|
|
22
|
-
|
|
23
25
|
function prettifyHtml(html) {
|
|
24
26
|
if (!html) return ''
|
|
25
|
-
|
|
27
|
+
|
|
28
|
+
const tab = ' '
|
|
29
|
+
let indentLevel = 0
|
|
30
|
+
let result = ''
|
|
31
|
+
|
|
32
|
+
// Basic HTML entity escaping
|
|
33
|
+
const escapedHtml = html
|
|
26
34
|
.replace(/&/g, '&')
|
|
27
35
|
.replace(/</g, '<')
|
|
28
|
-
.replace(/>/g, '>')
|
|
29
36
|
.replace(/"/g, '"')
|
|
30
37
|
.replace(/'/g, ''')
|
|
38
|
+
|
|
39
|
+
// Split into tokens, keeping the tags
|
|
40
|
+
const tokens = escapedHtml.split(/(<[^>]+>)/g)
|
|
41
|
+
|
|
42
|
+
const selfClosingTags = [
|
|
43
|
+
'<area',
|
|
44
|
+
'<base',
|
|
45
|
+
'<br',
|
|
46
|
+
'<col',
|
|
47
|
+
'<embed',
|
|
48
|
+
'<hr',
|
|
49
|
+
'<img',
|
|
50
|
+
'<input',
|
|
51
|
+
'<link',
|
|
52
|
+
'<meta',
|
|
53
|
+
'<param',
|
|
54
|
+
'<source',
|
|
55
|
+
'<track',
|
|
56
|
+
'<wbr',
|
|
57
|
+
]
|
|
58
|
+
|
|
59
|
+
tokens.forEach((token) => {
|
|
60
|
+
const trimmed = token.trim()
|
|
61
|
+
if (!trimmed) return
|
|
62
|
+
|
|
63
|
+
const isTag = trimmed.startsWith('<') && trimmed.endsWith('>')
|
|
64
|
+
const isClosingTag = isTag && trimmed.startsWith('</')
|
|
65
|
+
|
|
66
|
+
// Adjust indentation level
|
|
67
|
+
if (isClosingTag) {
|
|
68
|
+
indentLevel = Math.max(0, indentLevel - 1)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Add indentation
|
|
72
|
+
let line = tab.repeat(indentLevel) + trimmed
|
|
73
|
+
|
|
74
|
+
// Syntax highlighting using spans
|
|
75
|
+
if (isTag) {
|
|
76
|
+
line = line.replace(/(<\/?[[\w\s="/.':;#-\/\?]+>)/g, (match) => {
|
|
77
|
+
const tagName = match.match(/<\/?([\w-]+)/)?.[1]
|
|
78
|
+
let highlighted = match.replace(
|
|
79
|
+
/(<\/?[\w-]+)/g,
|
|
80
|
+
`<span class="html-tag-symbol"><</span><span class="html-tag-name">${tagName}</span>`,
|
|
81
|
+
)
|
|
82
|
+
|
|
83
|
+
// Highlight attributes
|
|
84
|
+
highlighted = highlighted.replace(
|
|
85
|
+
/([\w-]+)=("[^"]*")/g,
|
|
86
|
+
'<span class="html-attribute-name">$1</span><span class="html-operator">=</span><span class="html-attribute-value">$2</span>',
|
|
87
|
+
)
|
|
88
|
+
|
|
89
|
+
return highlighted + '<span class="html-tag-symbol">></span>'
|
|
90
|
+
})
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
result += line + '\n'
|
|
94
|
+
|
|
95
|
+
// Increase indent for next line
|
|
96
|
+
if (isTag && !isClosingTag) {
|
|
97
|
+
const isSelfClosing =
|
|
98
|
+
trimmed.endsWith('/>') || selfClosingTags.some((tag) => trimmed.startsWith(tag))
|
|
99
|
+
if (!isSelfClosing) {
|
|
100
|
+
indentLevel++
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
})
|
|
104
|
+
|
|
105
|
+
return result
|
|
31
106
|
}
|
|
32
107
|
</script>
|
|
33
108
|
|
|
@@ -39,37 +114,42 @@ function prettifyHtml(html) {
|
|
|
39
114
|
class="pbx-flex pbx-items-left pbx-flex-col pbx-myPrimaryGap pbx-border-myPrimaryMediumGrayColor"
|
|
40
115
|
>
|
|
41
116
|
<p class="pbx-myPrimaryParagraph">
|
|
42
|
-
|
|
43
|
-
|
|
117
|
+
{{
|
|
118
|
+
translate(
|
|
119
|
+
'Overview of Selected Element, Component, and Components. This section provides real-time updates based on your HTML selection.',
|
|
120
|
+
)
|
|
121
|
+
}}
|
|
44
122
|
</p>
|
|
45
123
|
|
|
46
124
|
<!-- Types - start -->
|
|
47
125
|
<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-
|
|
50
|
-
<div class="pbx-flex pbx-bg-
|
|
126
|
+
<h4 class="pbx-myPrimaryParagraph pbx-text-xs pbx-pb-2">{{ translate('Types') }}</h4>
|
|
127
|
+
<div class="pbx-text-gray-100 pbx-overflow-hidden pbx-bg-gray-900">
|
|
128
|
+
<div class="pbx-flex pbx-bg-gray-900 pbx-ring-1 ring-white/5">
|
|
51
129
|
<div
|
|
52
130
|
class="pbx-mb-px pbx-flex pbx-text-xs pbx-font-medium pbx-text-myPrimaryMediumGrayColor"
|
|
53
131
|
>
|
|
54
|
-
<div class="pbx-px-4 pbx-py-4 pbx-text-gray-100">Types</div>
|
|
132
|
+
<div class="pbx-px-4 pbx-py-4 pbx-text-gray-100">{{ translate('Types') }}</div>
|
|
55
133
|
</div>
|
|
56
134
|
</div>
|
|
57
135
|
<div class="pbx-px-4 pbx-pb-8 pbx-pt-4 pbx-text-gray-100 pbx-text-xs">
|
|
58
136
|
<p class="pbx-text-xs pbx-pb-2">
|
|
59
|
-
<span>Element type: </span>
|
|
137
|
+
<span>{{ translate('Element type:') }} </span>
|
|
60
138
|
<span>
|
|
61
139
|
{{ typeof getElement }}
|
|
62
140
|
</span>
|
|
63
141
|
</p>
|
|
64
142
|
|
|
65
143
|
<p class="pbx-text-xs pbx-pb-2">
|
|
66
|
-
<span>Component type: </span>
|
|
144
|
+
<span>{{ translate('Component type:') }} </span>
|
|
67
145
|
{{ typeof getComponent }}
|
|
68
146
|
</p>
|
|
69
147
|
<p class="pbx-text-xs pbx-pb-2">
|
|
70
|
-
<span>Components: </span>
|
|
148
|
+
<span>{{ translate('Components:') }} </span>
|
|
71
149
|
<span>
|
|
72
|
-
{{
|
|
150
|
+
{{
|
|
151
|
+
Array.isArray(getComponents) === true ? translate('array') : typeof getComponents
|
|
152
|
+
}}
|
|
73
153
|
</span>
|
|
74
154
|
</p>
|
|
75
155
|
</div>
|
|
@@ -78,9 +158,9 @@ function prettifyHtml(html) {
|
|
|
78
158
|
<!-- Types - end -->
|
|
79
159
|
<!-- Code Block Component - start-->
|
|
80
160
|
<div>
|
|
81
|
-
<h4 class="pbx-myPrimaryParagraph pbx-text-xs pbx-pb-2">Content</h4>
|
|
82
|
-
<div class="pbx-overflow-hidden pbx-bg-
|
|
83
|
-
<div class="pbx-flex pbx-bg-
|
|
161
|
+
<h4 class="pbx-myPrimaryParagraph pbx-text-xs pbx-pb-2">{{ translate('Content') }}</h4>
|
|
162
|
+
<div class="pbx-overflow-hidden pbx-bg-gray-900">
|
|
163
|
+
<div class="pbx-flex pbx-bg-gray-900 pbx-ring-1 ring-white/5">
|
|
84
164
|
<div
|
|
85
165
|
class="pbx-mb-px pbx-flex pbx-text-xs pbx-font-medium pbx-text-myPrimaryMediumGrayColor"
|
|
86
166
|
>
|
|
@@ -89,21 +169,21 @@ function prettifyHtml(html) {
|
|
|
89
169
|
class="pbx-px-4 pbx-py-4 pbx-cursor-pointer"
|
|
90
170
|
:class="[current === 'element' ? 'pbx-text-gray-100' : '']"
|
|
91
171
|
>
|
|
92
|
-
Element
|
|
172
|
+
{{ translate('Element') }}
|
|
93
173
|
</div>
|
|
94
174
|
<div
|
|
95
175
|
@click="updateCurrentTab('component')"
|
|
96
176
|
class="pbx-px-4 pbx-py-4 pbx-cursor-pointer"
|
|
97
177
|
:class="[current === 'component' ? 'pbx-text-gray-100' : '']"
|
|
98
178
|
>
|
|
99
|
-
Component
|
|
179
|
+
{{ translate('Component') }}
|
|
100
180
|
</div>
|
|
101
181
|
<div
|
|
102
182
|
@click="updateCurrentTab('components')"
|
|
103
183
|
class="pbx-px-4 pbx-py-4 pbx-cursor-pointer"
|
|
104
184
|
:class="[current === 'components' ? 'pbx-text-gray-100' : '']"
|
|
105
185
|
>
|
|
106
|
-
Components added
|
|
186
|
+
{{ translate('Components added') }}
|
|
107
187
|
{{ Array.isArray(getComponents) && getComponents.length }}
|
|
108
188
|
</div>
|
|
109
189
|
</div>
|
|
@@ -112,7 +192,9 @@ function prettifyHtml(html) {
|
|
|
112
192
|
<div v-if="current === 'element'">
|
|
113
193
|
<div v-if="!getComponent">
|
|
114
194
|
<p class="pbx-pb-2 pbx-text-xs">
|
|
115
|
-
{{
|
|
195
|
+
{{
|
|
196
|
+
getComponent === null ? translate('No Element selected') : typeof getComponent
|
|
197
|
+
}}
|
|
116
198
|
</p>
|
|
117
199
|
</div>
|
|
118
200
|
<div
|
|
@@ -120,20 +202,20 @@ function prettifyHtml(html) {
|
|
|
120
202
|
class="pbx-overflow-hidden pbx-border-solid pbx-border pbx-border-gray-100 pbx-mb-6"
|
|
121
203
|
>
|
|
122
204
|
<div
|
|
123
|
-
class="pbx-border-0 pbx-bg-
|
|
205
|
+
class="pbx-border-0 pbx-bg-gray-900 pbx-pt-4 pbx-1 pbx-border-solid pbx-border-b pbx-border-gray-200"
|
|
124
206
|
>
|
|
125
207
|
<div class="pbx-overflow-x-auto">
|
|
126
208
|
<table class="pbx-min-w-full">
|
|
127
|
-
<thead class="pbx-bg-
|
|
209
|
+
<thead class="pbx-bg-gray-900">
|
|
128
210
|
<tr>
|
|
129
211
|
<th
|
|
130
212
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
131
213
|
>
|
|
132
|
-
Selected HTML:
|
|
214
|
+
{{ translate('Selected HTML:') }}
|
|
133
215
|
</th>
|
|
134
216
|
</tr>
|
|
135
217
|
</thead>
|
|
136
|
-
<tbody class="pbx-bg-
|
|
218
|
+
<tbody class="pbx-bg-gray-900 pbx-divide-y pbx-divide-gray-200">
|
|
137
219
|
<tr>
|
|
138
220
|
<td
|
|
139
221
|
class="pbx-border-0 pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-solid pbx-border-b"
|
|
@@ -146,16 +228,16 @@ function prettifyHtml(html) {
|
|
|
146
228
|
</div>
|
|
147
229
|
<div class="pbx-overflow-x-auto">
|
|
148
230
|
<table class="pbx-min-w-full">
|
|
149
|
-
<thead class="pbx-bg-
|
|
231
|
+
<thead class="pbx-bg-gray-900">
|
|
150
232
|
<tr>
|
|
151
233
|
<th
|
|
152
234
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
153
235
|
>
|
|
154
|
-
Element src:
|
|
236
|
+
{{ translate('Element src:') }}
|
|
155
237
|
</th>
|
|
156
238
|
</tr>
|
|
157
239
|
</thead>
|
|
158
|
-
<tbody class="pbx-bg-
|
|
240
|
+
<tbody class="pbx-bg-gray-900 pbx-divide-y pbx-divide-gray-200">
|
|
159
241
|
<tr>
|
|
160
242
|
<td
|
|
161
243
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-whitespace-pre-line"
|
|
@@ -169,16 +251,16 @@ function prettifyHtml(html) {
|
|
|
169
251
|
</div>
|
|
170
252
|
<div class="pbx-overflow-x-auto">
|
|
171
253
|
<table class="pbx-min-w-full">
|
|
172
|
-
<thead class="pbx-bg-
|
|
254
|
+
<thead class="pbx-bg-gray-900">
|
|
173
255
|
<tr>
|
|
174
256
|
<th
|
|
175
257
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
176
258
|
>
|
|
177
|
-
Element classes:
|
|
259
|
+
{{ translate('Element classes:') }}
|
|
178
260
|
</th>
|
|
179
261
|
</tr>
|
|
180
262
|
</thead>
|
|
181
|
-
<tbody class="pbx-bg-
|
|
263
|
+
<tbody class="pbx-bg-gray-900 pbx-divide-y pbx-divide-gray-200">
|
|
182
264
|
<tr>
|
|
183
265
|
<td
|
|
184
266
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
@@ -199,7 +281,9 @@ function prettifyHtml(html) {
|
|
|
199
281
|
<div v-if="current === 'component'">
|
|
200
282
|
<div v-if="!getComponent">
|
|
201
283
|
<p class="pbx-pb-2 pbx-text-xs">
|
|
202
|
-
{{
|
|
284
|
+
{{
|
|
285
|
+
getComponent === null ? translate('No Component selected') : typeof getComponent
|
|
286
|
+
}}
|
|
203
287
|
</p>
|
|
204
288
|
</div>
|
|
205
289
|
<div
|
|
@@ -207,20 +291,20 @@ function prettifyHtml(html) {
|
|
|
207
291
|
class="pbx-overflow-hidden pbx-border-solid pbx-border pbx-border-gray-100 pbx-mb-6"
|
|
208
292
|
>
|
|
209
293
|
<div
|
|
210
|
-
class="pbx-border-0 pbx-bg-
|
|
294
|
+
class="pbx-border-0 pbx-bg-gray-900 pbx-pt-4 pbx-1 pbx-border-solid pbx-border-b pbx-border-gray-200"
|
|
211
295
|
>
|
|
212
296
|
<div class="pbx-overflow-x-auto">
|
|
213
297
|
<table class="pbx-min-w-full">
|
|
214
|
-
<thead class="pbx-bg-
|
|
298
|
+
<thead class="pbx-bg-gray-900">
|
|
215
299
|
<tr>
|
|
216
300
|
<th
|
|
217
301
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
218
302
|
>
|
|
219
|
-
ID:
|
|
303
|
+
{{ translate('ID:') }}
|
|
220
304
|
</th>
|
|
221
305
|
</tr>
|
|
222
306
|
</thead>
|
|
223
|
-
<tbody class="pbx-bg-
|
|
307
|
+
<tbody class="pbx-bg-gray-900 pbx-divide-y pbx-divide-gray-200">
|
|
224
308
|
<tr>
|
|
225
309
|
<td
|
|
226
310
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
@@ -233,16 +317,16 @@ function prettifyHtml(html) {
|
|
|
233
317
|
</div>
|
|
234
318
|
<div class="pbx-overflow-x-auto">
|
|
235
319
|
<table class="pbx-min-w-full">
|
|
236
|
-
<thead class="pbx-bg-
|
|
320
|
+
<thead class="pbx-bg-gray-900">
|
|
237
321
|
<tr>
|
|
238
322
|
<th
|
|
239
323
|
class="pbx-border-0 pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-solid pbx-border-t pbx-border-gray-200"
|
|
240
324
|
>
|
|
241
|
-
Title:
|
|
325
|
+
{{ translate('Title:') }}
|
|
242
326
|
</th>
|
|
243
327
|
</tr>
|
|
244
328
|
</thead>
|
|
245
|
-
<tbody class="pbx-bg-
|
|
329
|
+
<tbody class="pbx-bg-gray-900 pbx-divide-y pbx-divide-gray-200">
|
|
246
330
|
<tr>
|
|
247
331
|
<td
|
|
248
332
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-whitespace-pre-line"
|
|
@@ -256,24 +340,24 @@ function prettifyHtml(html) {
|
|
|
256
340
|
</div>
|
|
257
341
|
<div class="pbx-overflow-x-auto">
|
|
258
342
|
<table class="pbx-min-w-full">
|
|
259
|
-
<thead class="pbx-bg-
|
|
343
|
+
<thead class="pbx-bg-gray-900">
|
|
260
344
|
<tr>
|
|
261
345
|
<th
|
|
262
346
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
263
347
|
>
|
|
264
|
-
HTML Code:
|
|
348
|
+
{{ translate('HTML Code:') }}
|
|
265
349
|
</th>
|
|
266
350
|
</tr>
|
|
267
351
|
</thead>
|
|
268
|
-
<tbody class="pbx-bg-
|
|
352
|
+
<tbody class="pbx-bg-gray-900 pbx-divide-y pbx-divide-gray-200">
|
|
269
353
|
<tr>
|
|
270
354
|
<td
|
|
271
355
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
272
356
|
>
|
|
273
357
|
<pre
|
|
274
|
-
class="pbx-text-xs pbx-text-gray-100 pbx-whitespace-pre-
|
|
358
|
+
class="pbx-text-xs pbx-text-gray-100 pbx-whitespace-pre-wrap pbx-font-sans pbx-flex pbx-items-start pbx-justify-left"
|
|
275
359
|
>
|
|
276
|
-
<code class="pbx-font-sans" v-html="prettifyHtml(getComponent?.html_code)"></code>
|
|
360
|
+
<code class="pbx-font-sans pbx-bg-gray-800 pbx-p-4 pbx-rounded-md pbx-block pbx-w-full" v-html="prettifyHtml(getComponent?.html_code)"></code>
|
|
277
361
|
</pre>
|
|
278
362
|
</td>
|
|
279
363
|
</tr>
|
|
@@ -284,7 +368,7 @@ function prettifyHtml(html) {
|
|
|
284
368
|
</div>
|
|
285
369
|
<div v-if="current === 'components'">
|
|
286
370
|
<div v-if="Array.isArray(getComponents) && getComponents.length === 0">
|
|
287
|
-
<p class="pbx-pb-2 pbx-text-xs">No Components added yet</p>
|
|
371
|
+
<p class="pbx-pb-2 pbx-text-xs">{{ translate('No Components added yet') }}</p>
|
|
288
372
|
</div>
|
|
289
373
|
|
|
290
374
|
<div v-if="getComponents">
|
|
@@ -295,20 +379,20 @@ function prettifyHtml(html) {
|
|
|
295
379
|
>
|
|
296
380
|
<!-- Id and Title above the table, styled to look connected -->
|
|
297
381
|
<div
|
|
298
|
-
class="pbx-border-0 pbx-bg-
|
|
382
|
+
class="pbx-border-0 pbx-bg-gray-900 pbx-pt-4 pbx-1 pbx-border-solid pbx-border-b pbx-border-gray-200"
|
|
299
383
|
>
|
|
300
384
|
<div class="pbx-overflow-x-auto">
|
|
301
385
|
<table class="pbx-min-w-full">
|
|
302
|
-
<thead class="pbx-bg-
|
|
386
|
+
<thead class="pbx-bg-gray-900">
|
|
303
387
|
<tr>
|
|
304
388
|
<th
|
|
305
389
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
306
390
|
>
|
|
307
|
-
ID:
|
|
391
|
+
{{ translate('ID:') }}
|
|
308
392
|
</th>
|
|
309
393
|
</tr>
|
|
310
394
|
</thead>
|
|
311
|
-
<tbody class="pbx-bg-
|
|
395
|
+
<tbody class="pbx-bg-gray-900 pbx-divide-y pbx-divide-gray-200">
|
|
312
396
|
<tr>
|
|
313
397
|
<td
|
|
314
398
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
@@ -321,16 +405,16 @@ function prettifyHtml(html) {
|
|
|
321
405
|
</div>
|
|
322
406
|
<div class="pbx-overflow-x-auto">
|
|
323
407
|
<table class="pbx-min-w-full">
|
|
324
|
-
<thead class="pbx-bg-
|
|
408
|
+
<thead class="pbx-bg-gray-900">
|
|
325
409
|
<tr>
|
|
326
410
|
<th
|
|
327
411
|
class="pbx-border-0 pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-solid pbx-border-t pbx-border-gray-200"
|
|
328
412
|
>
|
|
329
|
-
Title:
|
|
413
|
+
{{ translate('Title:') }}
|
|
330
414
|
</th>
|
|
331
415
|
</tr>
|
|
332
416
|
</thead>
|
|
333
|
-
<tbody class="pbx-bg-
|
|
417
|
+
<tbody class="pbx-bg-gray-900 pbx-divide-y pbx-divide-gray-200">
|
|
334
418
|
<tr>
|
|
335
419
|
<td
|
|
336
420
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-whitespace-pre-line"
|
|
@@ -344,24 +428,24 @@ function prettifyHtml(html) {
|
|
|
344
428
|
</div>
|
|
345
429
|
<div class="pbx-overflow-x-auto">
|
|
346
430
|
<table class="pbx-min-w-full">
|
|
347
|
-
<thead class="pbx-bg-
|
|
431
|
+
<thead class="pbx-bg-gray-900">
|
|
348
432
|
<tr>
|
|
349
433
|
<th
|
|
350
434
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
351
435
|
>
|
|
352
|
-
HTML Code:
|
|
436
|
+
{{ translate('HTML Code:') }}
|
|
353
437
|
</th>
|
|
354
438
|
</tr>
|
|
355
439
|
</thead>
|
|
356
|
-
<tbody class="pbx-bg-
|
|
440
|
+
<tbody class="pbx-bg-gray-900 pbx-divide-y pbx-divide-gray-200">
|
|
357
441
|
<tr>
|
|
358
442
|
<td
|
|
359
443
|
class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal"
|
|
360
444
|
>
|
|
361
445
|
<pre
|
|
362
|
-
class="pbx-text-xs pbx-text-gray-100 pbx-whitespace-pre-
|
|
446
|
+
class="pbx-text-xs pbx-text-gray-100 pbx-whitespace-pre-wrap pbx-font-sans pbx-flex pbx-items-start pbx-justify-left"
|
|
363
447
|
>
|
|
364
|
-
<code class="pbx-font-sans" v-html="prettifyHtml(component.html_code)"></code>
|
|
448
|
+
<code class="pbx-font-sans pbx-w-full" v-html="prettifyHtml(component.html_code)"></code>
|
|
365
449
|
</pre>
|
|
366
450
|
</td>
|
|
367
451
|
</tr>
|
|
@@ -378,3 +462,15 @@ function prettifyHtml(html) {
|
|
|
378
462
|
</div>
|
|
379
463
|
</div>
|
|
380
464
|
</template>
|
|
465
|
+
|
|
466
|
+
<style>
|
|
467
|
+
.html-tag {
|
|
468
|
+
color: #ff79c6;
|
|
469
|
+
}
|
|
470
|
+
.html-attribute {
|
|
471
|
+
color: #50fa7b;
|
|
472
|
+
}
|
|
473
|
+
.html-value {
|
|
474
|
+
color: #f1fa8c;
|
|
475
|
+
}
|
|
476
|
+
</style>
|
|
@@ -108,7 +108,7 @@ const openHTMLSettings = function () {
|
|
|
108
108
|
"
|
|
109
109
|
>
|
|
110
110
|
<div
|
|
111
|
-
class="pbx-text-white pbx-rounded-full pbx-bg-myPrimaryBrandColor pbx-flex pbx-justify-center pbx-items-center pbx-text-xs pbx-h-8 pbx-min-
|
|
111
|
+
class="pbx-text-white pbx-rounded-full pbx-bg-myPrimaryBrandColor pbx-flex pbx-justify-center pbx-items-center pbx-text-xs pbx-d pbx-min-d pbx-max-d lg:pbx-w-8 lg:pbx-h-8 lg:pbx-min-w-8 lg:pbx-max-w-8 pbx-w-8 pbx-h-8 pbx-min-w-8 pbx-max-w-8 pbx-font-normal"
|
|
112
112
|
>
|
|
113
113
|
{{
|
|
114
114
|
typeof getPageBuilderConfig.userForPageBuilder.name === 'string' &&
|
|
@@ -116,7 +116,7 @@ const openHTMLSettings = function () {
|
|
|
116
116
|
}}
|
|
117
117
|
</div>
|
|
118
118
|
<div
|
|
119
|
-
class="pbx-hidden pbx-text-xs pbx-
|
|
119
|
+
class="pbx-hidden pbx-text-xs pbx-d lg:pbx-flex pbx-items-center pbx-font-normal pbx-w-max pbx-break-keep"
|
|
120
120
|
>
|
|
121
121
|
{{ getPageBuilderConfig.userForPageBuilder.name }}
|
|
122
122
|
</div>
|
|
@@ -126,7 +126,7 @@ const openHTMLSettings = function () {
|
|
|
126
126
|
|
|
127
127
|
<!-- User With image Start-->
|
|
128
128
|
<div
|
|
129
|
-
class="pbx-flex pbx-items-center lg:pbx-myPrimaryTag pbx-whitespace-nowrap pbx-py-0 pbx-gap-4 pbx-w-max"
|
|
129
|
+
class="pbx-flex pbx-items-center lg:pbx-myPrimaryTag pbx-whitespace-nowrap pbx-py-0 pbx-gap-4 pbx-w-max pbx-h-12 pbx-ml-2"
|
|
130
130
|
v-if="
|
|
131
131
|
getPageBuilderConfig &&
|
|
132
132
|
getPageBuilderConfig.userForPageBuilder &&
|
|
@@ -137,16 +137,16 @@ const openHTMLSettings = function () {
|
|
|
137
137
|
"
|
|
138
138
|
>
|
|
139
139
|
<div
|
|
140
|
-
class="pbx-text-white pbx-flex-shrink-0 pbx-
|
|
140
|
+
class="pbx-text-white pbx-flex-shrink-0 pbx-d pbx-w-10 pbx-h-10 pbx-rounded-full pbx-flex pbx-justify-center pbx-items-center pbx-text-xs pbx-rounded-l-full"
|
|
141
141
|
>
|
|
142
142
|
<img
|
|
143
|
-
alt="
|
|
143
|
+
alt="Avatar"
|
|
144
144
|
:src="`${getPageBuilderConfig.userForPageBuilder.image}`"
|
|
145
|
-
class="pbx-block pbx-inset-0 pbx-object-top pbx-h-8 pbx-min-
|
|
145
|
+
class="pbx-block pbx-inset-0 pbx-object-top pbx-d pbx-min-d pbx-max-d lg:pbx-w-8 lg:pbx-h-8 lg:pbx-min-w-8 lg:pbx-max-w-8 pbx-w-8 pbx-h-8 pbx-min-w-8 pbx-max-w-8 pbx-object-cover pbx-rounded-full"
|
|
146
146
|
/>
|
|
147
147
|
</div>
|
|
148
148
|
<div
|
|
149
|
-
class="pbx-hidden pbx-text-xs pbx-
|
|
149
|
+
class="pbx-hidden pbx-text-xs pbx-d lg:pbx-flex pbx-items-center pbx-font-normal pbx-w-max pbx-break-keep"
|
|
150
150
|
>
|
|
151
151
|
{{ getPageBuilderConfig.userForPageBuilder.name }}
|
|
152
152
|
</div>
|
|
@@ -218,7 +218,7 @@ const openHTMLSettings = function () {
|
|
|
218
218
|
<ModalBuilder
|
|
219
219
|
maxWidth="5xl"
|
|
220
220
|
:showModalBuilder="showHTMLSettings"
|
|
221
|
-
title="Selected HTML"
|
|
221
|
+
:title="translate('Selected HTML')"
|
|
222
222
|
@closeMainModalBuilder="handleHTMLSettings"
|
|
223
223
|
minHeight=""
|
|
224
224
|
maxHeight=""
|
|
@@ -8,21 +8,18 @@ const pageBuilderService = getPageBuilder()
|
|
|
8
8
|
|
|
9
9
|
<template>
|
|
10
10
|
<div>
|
|
11
|
-
<
|
|
12
|
-
<
|
|
13
|
-
<div
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<span>{{ translate('Edit text and links') }}</span>
|
|
22
|
-
</button>
|
|
23
|
-
</div>
|
|
11
|
+
<template v-if="pageBuilderService.isSelectedElementValidText()">
|
|
12
|
+
<div class="pbx-flex pbx-flex-col pbx-border-solid pbx-border pbx-border-gray-400">
|
|
13
|
+
<div
|
|
14
|
+
@click="pageBuilderService.toggleTipTapModal(true)"
|
|
15
|
+
class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor"
|
|
16
|
+
>
|
|
17
|
+
<p class="pbx-myPrimaryParagraph pbx-font-medium pbx-my-0 pbx-py-0">
|
|
18
|
+
{{ translate('Text') }}
|
|
19
|
+
</p>
|
|
20
|
+
<span class="material-symbols-outlined"> chevron_right </span>
|
|
24
21
|
</div>
|
|
25
|
-
</
|
|
26
|
-
</
|
|
22
|
+
</div>
|
|
23
|
+
</template>
|
|
27
24
|
</div>
|
|
28
25
|
</template>
|