@myissue/vue-website-page-builder 3.4.1 → 3.4.4
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/style.css +1 -1
- package/dist/vue-website-page-builder.js +25 -25
- package/dist/vue-website-page-builder.umd.cjs +17 -17
- package/package.json +1 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +1 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue +2 -2
- package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +1 -1
- package/src/Components/TipTap/TipTapInput.vue +7 -7
- package/src/PageBuilder/PageBuilder.vue +1 -1
- package/src/PageBuilder/Preview.vue +2 -2
- package/src/css/style.css +16 -23
- package/src/tests/TestComponents/DemoUnsplash.vue +5 -5
- package/src/tests/componentsArray.test.json +4 -4
- package/src/utils/html-elements/component.ts +10 -10
package/package.json
CHANGED
|
@@ -46,7 +46,7 @@ watch(
|
|
|
46
46
|
>
|
|
47
47
|
<ListboxButton
|
|
48
48
|
v-if="globalPageLayout"
|
|
49
|
-
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 pbx-bg-white hover:pbx-text-black pbx-text-black pbx-font-sans pbx-font-medium"
|
|
49
|
+
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 pbx-bg-white hover:pbx-text-black pbx-text-black pbx-font-sans pbx-font-medium pbx-border-0"
|
|
50
50
|
>
|
|
51
51
|
<div class="pbx-flex pbx-justify-start pbx-items-center pbx-gap-2">
|
|
52
52
|
<div
|
|
@@ -85,7 +85,7 @@ const handleDelete = function () {
|
|
|
85
85
|
class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black"
|
|
86
86
|
:class="[
|
|
87
87
|
canMoveUp
|
|
88
|
-
? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0'
|
|
88
|
+
? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-cursor-pointer'
|
|
89
89
|
: 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
|
|
90
90
|
]"
|
|
91
91
|
>
|
|
@@ -98,7 +98,7 @@ const handleDelete = function () {
|
|
|
98
98
|
class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black"
|
|
99
99
|
:class="[
|
|
100
100
|
canMoveDown
|
|
101
|
-
? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0'
|
|
101
|
+
? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-cursor-pointer'
|
|
102
102
|
: 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
|
|
103
103
|
]"
|
|
104
104
|
>
|
|
@@ -46,7 +46,7 @@ watch(
|
|
|
46
46
|
>
|
|
47
47
|
<ListboxButton
|
|
48
48
|
v-if="globalPageLayout"
|
|
49
|
-
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 pbx-bg-white hover:pbx-text-black pbx-text-black pbx-font-sans pbx-font-medium"
|
|
49
|
+
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 pbx-bg-white hover:pbx-text-black pbx-text-black pbx-font-sans pbx-font-medium pbx-border-0"
|
|
50
50
|
>
|
|
51
51
|
<div class="pbx-flex pbx-justify-start pbx-items-center pbx-gap-2">
|
|
52
52
|
<div
|
|
@@ -234,7 +234,7 @@ onMounted(() => {
|
|
|
234
234
|
<button
|
|
235
235
|
@click="pageBuilderService.toggleTipTapModal(false)"
|
|
236
236
|
type="button"
|
|
237
|
-
class="pbx-myPrimaryTag"
|
|
237
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
238
238
|
>
|
|
239
239
|
<span class="material-symbols-outlined"> save </span>
|
|
240
240
|
<span>{{ translate('Save') }}</span>
|
|
@@ -249,7 +249,7 @@ onMounted(() => {
|
|
|
249
249
|
<button
|
|
250
250
|
@click="editor.chain().focus().setHardBreak().run()"
|
|
251
251
|
type="button"
|
|
252
|
-
class="pbx-myPrimaryTag"
|
|
252
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
253
253
|
>
|
|
254
254
|
<span class="material-symbols-outlined"> keyboard_return </span>
|
|
255
255
|
<span>{{ translate('Line break') }}</span>
|
|
@@ -260,7 +260,7 @@ onMounted(() => {
|
|
|
260
260
|
<button
|
|
261
261
|
@click="editor.chain().focus().toggleBold().run()"
|
|
262
262
|
type="button"
|
|
263
|
-
class="pbx-myPrimaryTag"
|
|
263
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
264
264
|
:class="{ 'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('bold') }"
|
|
265
265
|
>
|
|
266
266
|
<span class="material-symbols-outlined"> format_bold </span>
|
|
@@ -272,7 +272,7 @@ onMounted(() => {
|
|
|
272
272
|
<button
|
|
273
273
|
@click="handleURL"
|
|
274
274
|
type="button"
|
|
275
|
-
class="pbx-myPrimaryTag"
|
|
275
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
276
276
|
:class="{ 'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('link') }"
|
|
277
277
|
>
|
|
278
278
|
<span class="material-symbols-outlined"> link </span>
|
|
@@ -284,7 +284,7 @@ onMounted(() => {
|
|
|
284
284
|
<button
|
|
285
285
|
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
|
286
286
|
type="button"
|
|
287
|
-
class="pbx-myPrimaryTag"
|
|
287
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
288
288
|
:class="{
|
|
289
289
|
'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('heading', {
|
|
290
290
|
level: 2,
|
|
@@ -300,7 +300,7 @@ onMounted(() => {
|
|
|
300
300
|
<button
|
|
301
301
|
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
|
302
302
|
type="button"
|
|
303
|
-
class="pbx-myPrimaryTag"
|
|
303
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
304
304
|
:class="{
|
|
305
305
|
'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('heading', {
|
|
306
306
|
level: 3,
|
|
@@ -316,7 +316,7 @@ onMounted(() => {
|
|
|
316
316
|
<button
|
|
317
317
|
@click="editor.chain().focus().toggleBulletList().run()"
|
|
318
318
|
type="button"
|
|
319
|
-
class="pbx-myPrimaryTag"
|
|
319
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
320
320
|
:class="{
|
|
321
321
|
'pbx-bg-myPrimaryLinkColor pbx-text-white': editor.isActive('bulletList'),
|
|
322
322
|
}"
|
|
@@ -28,7 +28,7 @@ watchEffect(() => {
|
|
|
28
28
|
const doc = iframe.contentWindow.document
|
|
29
29
|
doc.open()
|
|
30
30
|
doc.write(
|
|
31
|
-
`<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div class="pbx-font-sans pbx-text-black">${htmlPage.value}</div></body></html>`,
|
|
31
|
+
`<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div id="page-builder-wrapper" class="pbx-font-sans pbx-text-black">${htmlPage.value}</div></body></html>`,
|
|
32
32
|
)
|
|
33
33
|
doc.close()
|
|
34
34
|
|
|
@@ -46,7 +46,7 @@ watchEffect(() => {
|
|
|
46
46
|
<div
|
|
47
47
|
class="pbx-text-black pbx-w-full pbx-inset-x-0 pbx-h-[90vh] pbx-bg-white pbx-overflow-x-scroll lg:pbx-pt-2 pbx-pt-2"
|
|
48
48
|
>
|
|
49
|
-
<div id="page-builder-
|
|
49
|
+
<div id="page-builder-wrapper">
|
|
50
50
|
<div class="" v-html="htmlPage"></div>
|
|
51
51
|
</div>
|
|
52
52
|
</div>
|
package/src/css/style.css
CHANGED
|
@@ -478,13 +478,6 @@
|
|
|
478
478
|
|
|
479
479
|
.pbx-myPrimaryInput,
|
|
480
480
|
.pbx-myPrimarySelect {
|
|
481
|
-
appearance: none;
|
|
482
|
-
-webkit-appearance: none;
|
|
483
|
-
-moz-appearance: none;
|
|
484
|
-
|
|
485
|
-
background-repeat: no-repeat;
|
|
486
|
-
background-size: 1rem;
|
|
487
|
-
padding-right: 1rem;
|
|
488
481
|
}
|
|
489
482
|
|
|
490
483
|
.pbx-myPrimaryInput:focus,
|
|
@@ -504,22 +497,22 @@
|
|
|
504
497
|
border: 1px #dee6f0 solid;
|
|
505
498
|
}
|
|
506
499
|
|
|
507
|
-
#
|
|
508
|
-
#
|
|
509
|
-
#
|
|
510
|
-
#
|
|
511
|
-
#
|
|
512
|
-
#
|
|
513
|
-
#
|
|
514
|
-
#
|
|
515
|
-
#
|
|
516
|
-
#
|
|
517
|
-
#
|
|
518
|
-
#
|
|
519
|
-
#
|
|
520
|
-
#
|
|
521
|
-
#
|
|
522
|
-
#
|
|
500
|
+
#page-builder-wrapper blockquote,
|
|
501
|
+
#page-builder-wrapper dl,
|
|
502
|
+
#page-builder-wrapper dd,
|
|
503
|
+
#page-builder-wrapper pre,
|
|
504
|
+
#page-builder-wrapper hr,
|
|
505
|
+
#page-builder-wrapper figure,
|
|
506
|
+
#page-builder-wrapper p,
|
|
507
|
+
#page-builder-wrapper h1,
|
|
508
|
+
#page-builder-wrapper h2,
|
|
509
|
+
#page-builder-wrapper h3,
|
|
510
|
+
#page-builder-wrapper h4,
|
|
511
|
+
#page-builder-wrapper h5,
|
|
512
|
+
#page-builder-wrapper h6,
|
|
513
|
+
#page-builder-wrapper ul,
|
|
514
|
+
#page-builder-wrapper ol,
|
|
515
|
+
#page-builder-wrapper li {
|
|
523
516
|
margin: 0;
|
|
524
517
|
}
|
|
525
518
|
|
|
@@ -183,7 +183,7 @@ onMounted(async () => {
|
|
|
183
183
|
<button
|
|
184
184
|
@click="searchByOrientation('landscape')"
|
|
185
185
|
type="button"
|
|
186
|
-
class="pbx-myPrimaryTag"
|
|
186
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
187
187
|
:class="{
|
|
188
188
|
'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'landscape',
|
|
189
189
|
'': getOrientationValue !== 'landscape',
|
|
@@ -194,7 +194,7 @@ onMounted(async () => {
|
|
|
194
194
|
<button
|
|
195
195
|
@click="searchByOrientation('portrait')"
|
|
196
196
|
type="button"
|
|
197
|
-
class="pbx-myPrimaryTag"
|
|
197
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
198
198
|
:class="{
|
|
199
199
|
'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'portrait',
|
|
200
200
|
'': getOrientationValue !== 'portrait',
|
|
@@ -205,7 +205,7 @@ onMounted(async () => {
|
|
|
205
205
|
<button
|
|
206
206
|
@click="searchByOrientation('squarish')"
|
|
207
207
|
type="button"
|
|
208
|
-
class="pbx-myPrimaryTag"
|
|
208
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
209
209
|
:class="{
|
|
210
210
|
'pbx-bg-myPrimaryBrandColor pbx-text-white': getOrientationValue === 'squarish',
|
|
211
211
|
'': getOrientationValue !== 'squarish',
|
|
@@ -251,7 +251,7 @@ onMounted(async () => {
|
|
|
251
251
|
<button
|
|
252
252
|
v-if="Number(getCurrentPageNumber) > 1"
|
|
253
253
|
:disabled="Number(getCurrentPageNumber) < 1"
|
|
254
|
-
class="pbx-myPrimaryTag"
|
|
254
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
255
255
|
@click="previousPage(Number(getCurrentPageNumber--))"
|
|
256
256
|
>
|
|
257
257
|
{{
|
|
@@ -264,7 +264,7 @@ onMounted(async () => {
|
|
|
264
264
|
</span>
|
|
265
265
|
<button
|
|
266
266
|
:disabled="Number(getCurrentPageNumber) >= getUnsplashImages.total_pages"
|
|
267
|
-
class="pbx-myPrimaryTag"
|
|
267
|
+
class="pbx-myPrimaryTag pbx-cursor-pointer"
|
|
268
268
|
:class="{
|
|
269
269
|
'pbx-opacity-50': Number(getCurrentPageNumber) >= getUnsplashImages.total_pages,
|
|
270
270
|
}"
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"title": "Text"
|
|
11
11
|
},
|
|
12
12
|
{
|
|
13
|
-
"html_code": "<section data-component-title=\"Three Vertical Images\">\n<div class=\"
|
|
13
|
+
"html_code": "<section data-component-title=\"Three Vertical Images\">\n<div class=\"md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2 pbx-bg-black\"><div class=\"pbx-mx-auto pbx-max-w-7xl pbx-m\"><div class=\"pbx-myPrimaryGap pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-3 lg:pbx-grid-cols-3\"> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] pbx-rounded-tl-full\" src=\"https://images.unsplash.com/photo-1632765866070-3fadf25d3d5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjh8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDgzMXww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"b2fb2e61-c916-4195-9cd2-c1d25747b4f7\"> </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] pbx-rounded-full\" src=\"https://images.unsplash.com/photo-1542513217-0b0eedf7005d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMDR8fG1vZGVsfGVufDB8fHx8MTc0OTgzMDc5MXww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"fdf36a14-f7ef-4025-942f-c87b20b18005\"> </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] pbx-rounded-br-full\" src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyNnx8bW9kZWx8ZW58MHx8fHwxNzQ5ODMwNzM1fDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"618a74a7-5d41-4dce-937c-130dd7490569\"></div></div> </div></div>\n</section>",
|
|
14
14
|
"id": "0bb012a0-631a-497f-9b7f-832313b64a2b",
|
|
15
15
|
"title": "Three Vertical Images"
|
|
16
16
|
},
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"title": "Text"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
|
-
"html_code": "<section data-component-title=\"Two Vertical Images\">\n<div class=\"
|
|
28
|
+
"html_code": "<section data-component-title=\"Two Vertical Images\">\n<div class=\"md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2\"><div class=\"pbx-mx-auto pbx-max-w-7xl\"><div class=\"pbx-myPrimaryGap pbx-grid pbx-grid-cols-2 sm:pbx-grid-cols-2 lg:pbx-grid-cols-2\"> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] \" src=\"https://images.unsplash.com/photo-1592966719124-2ca2978ba325?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxraW5mb2xrfGVufDB8fHx8MTc0OTgzMTAzM3ww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"536340a5-c7e1-479d-a2ae-a85e6dacc2df\"> </div> <div class=\"pbx-flex-1 pbx-py-2\"> <img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-[9/16] \" src=\"https://images.unsplash.com/photo-1549298222-1c31e8915347?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwzfHxtYWdhemluZSUyMGZhc2hpb258ZW58MHx8fHwxNzQ5ODMxNTEwfDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"provider\" data-image=\"41655496-4742-4cc6-bc3c-abe7c2b241fb\"> </div> </div> </div> </div>\n</section>",
|
|
29
29
|
"id": "d3b5a3e4-29a3-4b03-88b6-1f77d319af74",
|
|
30
30
|
"title": "Two Vertical Images"
|
|
31
31
|
},
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"title": "Text"
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
|
-
"html_code": "<section data-component-title=\"YouTube Video\">\n <div class=\"pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl pbx-
|
|
43
|
+
"html_code": "<section data-component-title=\"YouTube Video\">\n <div class=\"pbx-py-4\">\n <div class=\"pbx-mx-auto pbx-max-w-7xl pbx-pt-6 pbx-pb-6\">\n <div id=\"youtube-video\" class=\"pbx-aspect-video pbx-p-4\">\n\n <iframe frameborder=\"0\" allowfullscreen=\"\" class=\"pbx-w-full pbx-aspect-video\" src=\"https://www.youtube.com/embed/pJvwV1Fm0vU\" allow=\"accelerometer; autoplay; clipboard-write;\">\n </iframe>\n </div>\n </div>\n </div>\n </section>",
|
|
44
44
|
"id": "33a26684-eb95-43c9-adb4-d7bce0ca60f7",
|
|
45
45
|
"title": "YouTube Video"
|
|
46
46
|
},
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"title": "Text"
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"html_code": "<sectio data-component-title=\"Six Square Images Grid\">\n<div class=\"
|
|
58
|
+
"html_code": "<sectio data-component-title=\"Six Square Images Grid\">\n<div class=\"md:pbx-pt-12 md:pbx-pb-12 pbx-pt-4 pbx-pb-4 lg:pbx-px-4 pbx-px-2 pbx-rounded-tr-full pbx-bg-yellow-100 pbx-rounded-bl-full\">\n<div class=\"pbx-mx-auto pbx-max-w-7xl\">\n<div class=\"pbx-grid pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-myPrimaryGap\">\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1616837874254-8d5aaa63e273?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxOXx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1MDR8MA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1608042314453-ae338d80c427?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwyfHxqZXdlcmx5fGVufDB8fHx8MTc1MTAyMTUwNHww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square \" src=\"https://images.unsplash.com/photo-1621939745912-aad97fd3a34d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw1MXx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1NDN8MA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square pbx-object-bottom\" src=\"https://images.unsplash.com/photo-1617038220319-276d3cfab638?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw1fHxqZXdlcmx5fGVufDB8fHx8MTc1MTAyMTUwNHww&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square pbx-object-bottom\" src=\"https://images.unsplash.com/photo-1594924571793-f6517415f594?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHw0Nnx8amV3ZXJseXxlbnwwfHx8fDE3NTEwMjE1Mjd8MA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"pbx-object-cover pbx-w-full pbx-aspect-square pbx-object-top\" src=\"https://images.unsplash.com/photo-1683099869102-bcf8791eb0e5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTI0Mzl8MHwxfHNlYXJjaHwxMjV8fGpld2VybHl8ZW58MHx8fHwxNzUxMDIxNTc4fDA&ixlib=rb-4.1.0&q=80&w=1080\" alt=\"image\">\n</div>\n\n</div>\n</div>\n</div>\n</sectio>",
|
|
59
59
|
"id": "7bcda060-8ed5-482f-bcf4-aa6bd7fdb193",
|
|
60
60
|
"title": "Six Square Images Grid"
|
|
61
61
|
}
|
|
@@ -22,61 +22,61 @@ const component: Components[] = [
|
|
|
22
22
|
data: [
|
|
23
23
|
{
|
|
24
24
|
title: 'Single Image',
|
|
25
|
-
html_code: `<section>\n<div class="
|
|
25
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div></div></div></div>\n</section>`,
|
|
26
26
|
cover_image: null,
|
|
27
27
|
category: 'Image',
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
title: 'Two Vertical Images',
|
|
31
|
-
html_code: `<section>\n<div class="
|
|
31
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider"> </div> </div> </div> </div>\n</section>`,
|
|
32
32
|
cover_image: null,
|
|
33
33
|
category: 'Image',
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
title: 'Two Square Images',
|
|
37
|
-
html_code: `<section>\n<div class="
|
|
37
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
38
38
|
cover_image: null,
|
|
39
39
|
category: 'Image',
|
|
40
40
|
},
|
|
41
41
|
{
|
|
42
42
|
title: 'Three Square Images',
|
|
43
|
-
html_code: `<section>\n<div class="
|
|
43
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
44
44
|
cover_image: null,
|
|
45
45
|
category: 'Image',
|
|
46
46
|
},
|
|
47
47
|
{
|
|
48
48
|
title: 'Four Square Images',
|
|
49
|
-
html_code: `<section>\n<div class="
|
|
49
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"> <div class="mx-auto max-w-7xl"> <div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"></div> </div> </div> </div>\n</section>`,
|
|
50
50
|
cover_image: null,
|
|
51
51
|
category: 'Image',
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
54
|
title: 'Six Square Images Grid',
|
|
55
|
-
html_code: `<section>\n<div class="
|
|
55
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div class="grid grid-cols-2 md:grid-cols-3 myPrimaryGap">\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="image">\n</div>\n\n</div>\n</div>\n</div>\n</section>`,
|
|
56
56
|
cover_image: null,
|
|
57
57
|
category: 'Image',
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
title: 'Two Square Images With Text',
|
|
61
|
-
html_code: `<section>\n<div class="
|
|
61
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl">\n<div class="myPrimaryGap lg:flex lg:justify-center"><div class="flex-1 py-2">\n<div class="grid myPrimaryGap grid-cols-1 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> </div> </div> </div>\n\n<div class="flex-1 py-2"> <div class="break-words py-2"><p>Start customizing by editing this default text directly in the editor.</p></div></div> \n</div></div></div>\n</section>`,
|
|
62
62
|
cover_image: null,
|
|
63
63
|
category: 'Image & Text',
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
66
|
title: 'Three Vertical Images',
|
|
67
|
-
html_code: `<section>\n<div class="
|
|
67
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${placeholderImage}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
68
68
|
cover_image: null,
|
|
69
69
|
category: 'Image',
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
72
|
title: 'Four Square Images With Text',
|
|
73
|
-
html_code: `<section>\n<div class="
|
|
73
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"><div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
74
74
|
cover_image: null,
|
|
75
75
|
category: 'Image & Text',
|
|
76
76
|
},
|
|
77
77
|
{
|
|
78
78
|
title: 'Three Square Images With Text',
|
|
79
|
-
html_code: `<section>\n<div class="
|
|
79
|
+
html_code: `<section>\n<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${placeholderImage}" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Start customizing by editing this default text directly in the editor.</p></div> </div> </div> </div> </div>\n</section>`,
|
|
80
80
|
cover_image: null,
|
|
81
81
|
category: 'Image & Text',
|
|
82
82
|
},
|