@myissue/vue-website-page-builder 3.3.99 → 3.4.2
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 +31 -31
- package/dist/vue-website-page-builder.umd.cjs +17 -17
- package/package.json +1 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +4 -4
- package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +5 -5
- package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +4 -4
- package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue +1 -1
- package/src/Components/TipTap/TipTapInput.vue +1 -1
- package/src/PageBuilder/PageBuilder.vue +2 -2
- package/src/PageBuilder/Preview.vue +2 -2
- package/src/css/style.css +24 -16
- package/src/tests/DefaultComponents/DefaultBuilderComponents.vue +1 -1
- package/src/tests/componentsArray.test.json +4 -4
- package/src/utils/html-elements/component.ts +10 -10
package/package.json
CHANGED
|
@@ -46,11 +46,11 @@ 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"
|
|
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"
|
|
50
50
|
>
|
|
51
51
|
<div class="pbx-flex pbx-justify-start pbx-items-center pbx-gap-2">
|
|
52
52
|
<div
|
|
53
|
-
class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-
|
|
53
|
+
class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-600 pbx-rounded-sm pbx-bg-none pbx-border-solid"
|
|
54
54
|
:class="`pbx-bg-${backgroundColor?.replace('pbx-bg-', '')}`"
|
|
55
55
|
></div>
|
|
56
56
|
<div>{{ translate('Background Color') }}</div>
|
|
@@ -61,7 +61,7 @@ watch(
|
|
|
61
61
|
|
|
62
62
|
<ListboxButton
|
|
63
63
|
v-if="!globalPageLayout"
|
|
64
|
-
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
|
|
64
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
|
|
65
65
|
>
|
|
66
66
|
<div class="pbx-flex pbx-flex-col">
|
|
67
67
|
<div class="pbx-flex pbx-gap-2 pbx-items-center">
|
|
@@ -83,7 +83,7 @@ watch(
|
|
|
83
83
|
leave-to-class="pbx-opacity-0"
|
|
84
84
|
>
|
|
85
85
|
<ListboxOptions
|
|
86
|
-
class="pbx-absolute pbx-min-w-[12rem] pbx-z-40 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-gray-50 pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
|
|
86
|
+
class="pbx-headless-dropdown pbx-absolute pbx-min-w-[12rem] pbx-z-40 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-gray-50 pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
|
|
87
87
|
>
|
|
88
88
|
<ListboxOption
|
|
89
89
|
as="template"
|
|
@@ -268,7 +268,7 @@ const handleModalIframeSrc = function () {
|
|
|
268
268
|
<button
|
|
269
269
|
@click="handleModalIframeSrc"
|
|
270
270
|
type="button"
|
|
271
|
-
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
|
|
271
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
|
|
272
272
|
>
|
|
273
273
|
<span class="material-symbols-outlined"> play_circle </span>
|
|
274
274
|
</button>
|
|
@@ -285,7 +285,7 @@ const handleModalIframeSrc = function () {
|
|
|
285
285
|
<button
|
|
286
286
|
@click="handleModalPreviewTiptap"
|
|
287
287
|
type="button"
|
|
288
|
-
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
|
|
288
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
|
|
289
289
|
>
|
|
290
290
|
<span class="material-symbols-outlined"> edit </span>
|
|
291
291
|
</button>
|
|
@@ -305,7 +305,7 @@ const handleModalIframeSrc = function () {
|
|
|
305
305
|
<button
|
|
306
306
|
@click="handleAddImage"
|
|
307
307
|
type="button"
|
|
308
|
-
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
|
|
308
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
|
|
309
309
|
>
|
|
310
310
|
<span class="material-symbols-outlined"> add_photo_alternate </span>
|
|
311
311
|
</button>
|
|
@@ -327,7 +327,7 @@ const handleModalIframeSrc = function () {
|
|
|
327
327
|
<button
|
|
328
328
|
@click="pageBuilderService.deleteElementFromDOM"
|
|
329
329
|
type="button"
|
|
330
|
-
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
|
|
330
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
|
|
331
331
|
>
|
|
332
332
|
<span class="material-symbols-outlined"> delete </span>
|
|
333
333
|
</button>
|
|
@@ -335,7 +335,7 @@ const handleModalIframeSrc = function () {
|
|
|
335
335
|
|
|
336
336
|
<div
|
|
337
337
|
v-if="getElement && getComponent"
|
|
338
|
-
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
|
|
338
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
|
|
339
339
|
@click="pageBuilderService.clearHtmlSelection()"
|
|
340
340
|
>
|
|
341
341
|
<span class="material-symbols-outlined"> close</span>
|
|
@@ -46,11 +46,11 @@ 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"
|
|
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"
|
|
50
50
|
>
|
|
51
51
|
<div class="pbx-flex pbx-justify-start pbx-items-center pbx-gap-2">
|
|
52
52
|
<div
|
|
53
|
-
class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-
|
|
53
|
+
class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border pbx-border-gray-600 pbx-rounded-sm pbx-bg-none pbx-border-solid"
|
|
54
54
|
:class="`pbx-bg-${textColor?.replace('pbx-text-', '')}`"
|
|
55
55
|
></div>
|
|
56
56
|
<div>
|
|
@@ -63,7 +63,7 @@ watch(
|
|
|
63
63
|
|
|
64
64
|
<ListboxButton
|
|
65
65
|
v-if="!globalPageLayout"
|
|
66
|
-
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
|
|
66
|
+
class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-200 pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0 pbx-text-myPrimaryDarkGrayColor"
|
|
67
67
|
>
|
|
68
68
|
<div class="pbx-flex pbx-flex-col">
|
|
69
69
|
<div class="pbx-flex pbx-gap-2 pbx-items-center">
|
|
@@ -85,7 +85,7 @@ watch(
|
|
|
85
85
|
leave-to-class="pbx-opacity-0"
|
|
86
86
|
>
|
|
87
87
|
<ListboxOptions
|
|
88
|
-
class="pbx-absolute pbx-min-w-[12rem] pbx-z-40 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-gray-50 pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
|
|
88
|
+
class="pbx-headless-dropdown pbx-absolute pbx-min-w-[12rem] pbx-z-40 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-gray-50 pbx-py-1 pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm"
|
|
89
89
|
>
|
|
90
90
|
<ListboxOption
|
|
91
91
|
as="template"
|
|
@@ -97,7 +97,7 @@ const openHTMLSettings = function () {
|
|
|
97
97
|
<div class="pbx-mr-2">
|
|
98
98
|
<!-- User No image Start-->
|
|
99
99
|
<div
|
|
100
|
-
class="pbx-flex pbx-items-center pbx-myPrimaryTag pbx-whitespace-nowrap pbx-py-0"
|
|
100
|
+
class="pbx-flex pbx-items-center pbx-myPrimaryTag pbx-whitespace-nowrap pbx-py-0 pbx-gap-2"
|
|
101
101
|
v-if="
|
|
102
102
|
getPageBuilderConfig &&
|
|
103
103
|
getPageBuilderConfig.userForPageBuilder &&
|
|
@@ -224,7 +224,7 @@ onMounted(() => {
|
|
|
224
224
|
<div v-if="pageBuilderService.isSelectedElementValidText() && editor">
|
|
225
225
|
<div class="pbx-relative pbx-rounded-lg">
|
|
226
226
|
<div
|
|
227
|
-
class="pbx-flex pbx-justify-between pbx-myPrimaryGap pbx-items-center pbx-
|
|
227
|
+
class="pbx-flex pbx-justify-between pbx-myPrimaryGap pbx-items-center pbx-pb-2 pbx-mb-2 pbx-px-4 pbx-overflow-x-auto pbx-border-0 pbx-border-b pbx-border-solid pbx-border-gray-200"
|
|
228
228
|
>
|
|
229
229
|
<div>
|
|
230
230
|
<div>
|
|
@@ -761,7 +761,7 @@ onMounted(async () => {
|
|
|
761
761
|
>
|
|
762
762
|
<select
|
|
763
763
|
id="pbx-lang"
|
|
764
|
-
class="pbx-myPrimarySelect pbx-min-w-20
|
|
764
|
+
class="pbx-myPrimarySelect pbx-min-w-20"
|
|
765
765
|
v-model="languageSelction"
|
|
766
766
|
>
|
|
767
767
|
<template
|
|
@@ -1003,7 +1003,7 @@ onMounted(async () => {
|
|
|
1003
1003
|
box-shadow: none !important;
|
|
1004
1004
|
background: #fff;
|
|
1005
1005
|
min-height: 25rem;
|
|
1006
|
-
border-bottom: 1px solid #
|
|
1006
|
+
border-bottom: 1px solid #f1f1f1;
|
|
1007
1007
|
padding: 0px 0px 10px 16px;
|
|
1008
1008
|
margin-bottom: 20px;
|
|
1009
1009
|
padding-bottom: 100px;
|
|
@@ -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,6 +478,9 @@
|
|
|
478
478
|
|
|
479
479
|
.pbx-myPrimaryInput,
|
|
480
480
|
.pbx-myPrimarySelect {
|
|
481
|
+
background-repeat: no-repeat;
|
|
482
|
+
background-size: 1rem;
|
|
483
|
+
padding-right: 1rem;
|
|
481
484
|
}
|
|
482
485
|
|
|
483
486
|
.pbx-myPrimaryInput:focus,
|
|
@@ -497,22 +500,22 @@
|
|
|
497
500
|
border: 1px #dee6f0 solid;
|
|
498
501
|
}
|
|
499
502
|
|
|
500
|
-
#
|
|
501
|
-
#
|
|
502
|
-
#
|
|
503
|
-
#
|
|
504
|
-
#
|
|
505
|
-
#
|
|
506
|
-
#
|
|
507
|
-
#
|
|
508
|
-
#
|
|
509
|
-
#
|
|
510
|
-
#
|
|
511
|
-
#
|
|
512
|
-
#
|
|
513
|
-
#
|
|
514
|
-
#
|
|
515
|
-
#
|
|
503
|
+
#page-builder-wrapper blockquote,
|
|
504
|
+
#page-builder-wrapper dl,
|
|
505
|
+
#page-builder-wrapper dd,
|
|
506
|
+
#page-builder-wrapper pre,
|
|
507
|
+
#page-builder-wrapper hr,
|
|
508
|
+
#page-builder-wrapper figure,
|
|
509
|
+
#page-builder-wrapper p,
|
|
510
|
+
#page-builder-wrapper h1,
|
|
511
|
+
#page-builder-wrapper h2,
|
|
512
|
+
#page-builder-wrapper h3,
|
|
513
|
+
#page-builder-wrapper h4,
|
|
514
|
+
#page-builder-wrapper h5,
|
|
515
|
+
#page-builder-wrapper h6,
|
|
516
|
+
#page-builder-wrapper ul,
|
|
517
|
+
#page-builder-wrapper ol,
|
|
518
|
+
#page-builder-wrapper li {
|
|
516
519
|
margin: 0;
|
|
517
520
|
}
|
|
518
521
|
|
|
@@ -534,3 +537,8 @@
|
|
|
534
537
|
padding: 1rem 0 0 1rem;
|
|
535
538
|
line-height: 1.2;
|
|
536
539
|
}
|
|
540
|
+
|
|
541
|
+
.pbx-headless-dropdown {
|
|
542
|
+
list-style: none;
|
|
543
|
+
padding: 0;
|
|
544
|
+
}
|
|
@@ -163,7 +163,7 @@ const getSvgPreview = (title: string) => {
|
|
|
163
163
|
@click="handleDropComponent(convertToComponentObject(comp))"
|
|
164
164
|
>
|
|
165
165
|
<div
|
|
166
|
-
class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
|
|
166
|
+
class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
|
|
167
167
|
>
|
|
168
168
|
<!-- Use SVG preview instead of external images -->
|
|
169
169
|
<div
|
|
@@ -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-w-full 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
|
},
|