@myissue/vue-website-page-builder 3.4.10 → 3.4.11
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/README.md +2 -0
- package/dist/style.css +1 -1
- package/dist/vue-website-page-builder.js +6286 -6141
- package/dist/vue-website-page-builder.umd.cjs +160 -102
- package/package.json +1 -1
- package/src/css/style.css +9 -16
- package/src/services/PageBuilderService.ts +11 -0
- package/src/tests/DefaultComponents/DefaultBuilderComponents.vue +152 -55
- package/src/utils/html-elements/component.ts +83 -46
- package/src/utils/html-elements/themes.ts +75 -0
package/package.json
CHANGED
package/src/css/style.css
CHANGED
|
@@ -440,10 +440,6 @@
|
|
|
440
440
|
width: 100%;
|
|
441
441
|
cursor: pointer;
|
|
442
442
|
}
|
|
443
|
-
#page-builder-editor strong,
|
|
444
|
-
#pagebuilder strong {
|
|
445
|
-
font-weight: 500;
|
|
446
|
-
}
|
|
447
443
|
|
|
448
444
|
.pbx-reorder-highlight {
|
|
449
445
|
animation: pbx-reorder-flash 0.4s ease-in-out;
|
|
@@ -520,18 +516,9 @@
|
|
|
520
516
|
#page-builder-editor ul,
|
|
521
517
|
#pagebuilder ul {
|
|
522
518
|
list-style: disc !important;
|
|
523
|
-
padding: 1rem 0 0
|
|
519
|
+
padding: 1rem 0 0 1.4rem;
|
|
524
520
|
margin-left: 1em;
|
|
525
|
-
line-height:
|
|
526
|
-
}
|
|
527
|
-
|
|
528
|
-
#page-builder-editor ol,
|
|
529
|
-
#page-builder-editor-editable-area ol,
|
|
530
|
-
#page-builder-editor ul,
|
|
531
|
-
#page-builder-editor-editable-area ul {
|
|
532
|
-
list-style: disc !important;
|
|
533
|
-
padding: 1rem 0 0 1rem;
|
|
534
|
-
line-height: 1.2;
|
|
521
|
+
line-height: 2rem;
|
|
535
522
|
}
|
|
536
523
|
|
|
537
524
|
.pbx-headless-dropdown {
|
|
@@ -593,9 +580,15 @@
|
|
|
593
580
|
color: inherit;
|
|
594
581
|
text-decoration: none;
|
|
595
582
|
}
|
|
583
|
+
|
|
584
|
+
#page-builder-editor strong,
|
|
585
|
+
#pagebuilder strong {
|
|
586
|
+
font: inherit;
|
|
587
|
+
font-weight: 500;
|
|
588
|
+
}
|
|
589
|
+
|
|
596
590
|
#pagebuilder code,
|
|
597
591
|
#pagebuilder pre,
|
|
598
|
-
#pagebuilder strong,
|
|
599
592
|
#pagebuilder em {
|
|
600
593
|
font: inherit;
|
|
601
594
|
font-weight: inherit;
|
|
@@ -2444,6 +2444,17 @@ export class PageBuilderService {
|
|
|
2444
2444
|
this.addHyperlinkToElement(hyperlinkEnable, urlInput || null, openHyperlinkInNewTab || false)
|
|
2445
2445
|
}
|
|
2446
2446
|
|
|
2447
|
+
public async addTheme(components: string): Promise<void> {
|
|
2448
|
+
try {
|
|
2449
|
+
if (components) {
|
|
2450
|
+
await this.mountComponentsToDOM(components)
|
|
2451
|
+
}
|
|
2452
|
+
await this.handleAutoSave()
|
|
2453
|
+
} catch (error) {
|
|
2454
|
+
console.error('Error adding component:', error)
|
|
2455
|
+
}
|
|
2456
|
+
}
|
|
2457
|
+
|
|
2447
2458
|
/**
|
|
2448
2459
|
* Adds a new component to the page builder.
|
|
2449
2460
|
* @param {ComponentObject} componentObject - The component to add.
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { ref, computed } from 'vue'
|
|
3
3
|
import componentHelpers from '../../utils/html-elements/componentHelpers'
|
|
4
4
|
import components from '../../utils/html-elements/component'
|
|
5
|
+
import themes from '../../utils/html-elements/themes'
|
|
5
6
|
import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
|
|
6
7
|
import type { ComponentObject } from '../../types'
|
|
7
8
|
import { getPageBuilder } from '../../composables/builderInstance'
|
|
@@ -20,6 +21,9 @@ defineProps({
|
|
|
20
21
|
|
|
21
22
|
const isLoading = ref(false)
|
|
22
23
|
|
|
24
|
+
const selectedThemeSelection = ref('Components')
|
|
25
|
+
|
|
26
|
+
const componentOrThemes = ['Components', 'Themes']
|
|
23
27
|
const selectedCategory = ref('All')
|
|
24
28
|
|
|
25
29
|
const categories = computed(() => {
|
|
@@ -34,9 +38,32 @@ const filteredComponents = computed(() => {
|
|
|
34
38
|
return components[0].components.data.filter((comp) => comp.category === selectedCategory.value)
|
|
35
39
|
})
|
|
36
40
|
|
|
41
|
+
const selectedThemeCategory = ref('All')
|
|
42
|
+
|
|
43
|
+
const themeCategories = computed(() => {
|
|
44
|
+
const allCategories = themes[0].themes.data.map((comp) => comp.category)
|
|
45
|
+
return ['All', ...new Set(allCategories)]
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
const filteredThemes = computed(() => {
|
|
49
|
+
if (selectedThemeCategory.value === 'All') {
|
|
50
|
+
return themes[0].themes.data
|
|
51
|
+
}
|
|
52
|
+
return themes[0].themes.data.filter((comp) => comp.category === selectedThemeCategory.value)
|
|
53
|
+
})
|
|
54
|
+
|
|
37
55
|
// Get modal close function
|
|
38
56
|
const { closeAddComponentModal } = usePageBuilderModal()
|
|
39
57
|
|
|
58
|
+
// Super simple component addition with professional modal closing!
|
|
59
|
+
const handleDropTheme = async function (components: string) {
|
|
60
|
+
isLoading.value = true
|
|
61
|
+
|
|
62
|
+
await pageBuilderService.addTheme(components)
|
|
63
|
+
closeAddComponentModal()
|
|
64
|
+
isLoading.value = false
|
|
65
|
+
}
|
|
66
|
+
|
|
40
67
|
// Super simple component addition with professional modal closing!
|
|
41
68
|
const handleDropComponent = async function (componentObject: ComponentObject) {
|
|
42
69
|
isLoading.value = true
|
|
@@ -104,81 +131,151 @@ const convertToComponentObject = function (comp: any): ComponentObject {
|
|
|
104
131
|
</div>
|
|
105
132
|
</template>
|
|
106
133
|
<div v-if="!isLoading">
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
134
|
+
<div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
|
|
135
|
+
<button
|
|
136
|
+
v-for="category in componentOrThemes"
|
|
137
|
+
:key="category"
|
|
138
|
+
@click="selectedThemeSelection = category"
|
|
139
|
+
class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
|
|
140
|
+
:class="[
|
|
141
|
+
selectedThemeSelection === category
|
|
142
|
+
? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
|
|
143
|
+
: 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
|
|
144
|
+
]"
|
|
112
145
|
>
|
|
146
|
+
{{ translate(category) }}
|
|
147
|
+
</button>
|
|
148
|
+
</div>
|
|
149
|
+
|
|
150
|
+
<!-- theme is selected start -->
|
|
151
|
+
<template v-if="selectedThemeSelection === 'Themes'">
|
|
152
|
+
<div class="pbx-mb-8">
|
|
153
|
+
<h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Themes') }}</h3>
|
|
154
|
+
<div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
|
|
155
|
+
<button
|
|
156
|
+
v-for="category in themeCategories"
|
|
157
|
+
:key="category"
|
|
158
|
+
@click="selectedThemeCategory = category"
|
|
159
|
+
class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
|
|
160
|
+
:class="[
|
|
161
|
+
selectedThemeCategory === category
|
|
162
|
+
? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
|
|
163
|
+
: 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
|
|
164
|
+
]"
|
|
165
|
+
>
|
|
166
|
+
{{ translate(category) }}
|
|
167
|
+
</button>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
113
170
|
<div
|
|
114
|
-
|
|
115
|
-
:key="helper.title"
|
|
116
|
-
class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
|
|
117
|
-
@click="handleDropComponent(helper)"
|
|
171
|
+
class="pbx-px-2 pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
|
|
118
172
|
>
|
|
119
173
|
<div
|
|
120
|
-
|
|
174
|
+
v-for="theme in filteredThemes"
|
|
175
|
+
:key="theme.title"
|
|
176
|
+
class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
|
|
177
|
+
@click="handleDropTheme(theme.html_code)"
|
|
121
178
|
>
|
|
122
|
-
<div
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
179
|
+
<div
|
|
180
|
+
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"
|
|
181
|
+
>
|
|
182
|
+
<!-- Use SVG preview instead of external images -->
|
|
183
|
+
<div
|
|
184
|
+
class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
|
|
185
|
+
v-html="theme.cover_image"
|
|
186
|
+
></div>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="pbx-p-3">
|
|
189
|
+
<h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">
|
|
190
|
+
{{ translate(theme.title) }}
|
|
191
|
+
</h4>
|
|
192
|
+
<div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
|
|
193
|
+
{{ translate('Click to add theme') }}
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
130
196
|
</div>
|
|
131
197
|
</div>
|
|
132
198
|
</div>
|
|
133
|
-
</
|
|
199
|
+
</template>
|
|
200
|
+
<!-- theme is selected end -->
|
|
134
201
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
<
|
|
138
|
-
|
|
139
|
-
<
|
|
140
|
-
|
|
141
|
-
:key="category"
|
|
142
|
-
@click="selectedCategory = category"
|
|
143
|
-
class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
|
|
144
|
-
:class="[
|
|
145
|
-
selectedCategory === category
|
|
146
|
-
? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
|
|
147
|
-
: 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
|
|
148
|
-
]"
|
|
202
|
+
<template v-if="selectedThemeSelection === 'Components'">
|
|
203
|
+
<!-- Helper Components Section -->
|
|
204
|
+
<div class="pbx-mb-8">
|
|
205
|
+
<h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Helper Components') }}</h3>
|
|
206
|
+
<div
|
|
207
|
+
class="pbx-px-2 pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
|
|
149
208
|
>
|
|
150
|
-
|
|
151
|
-
|
|
209
|
+
<div
|
|
210
|
+
v-for="helper in componentHelpers"
|
|
211
|
+
:key="helper.title"
|
|
212
|
+
class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
|
|
213
|
+
@click="handleDropComponent(helper)"
|
|
214
|
+
>
|
|
215
|
+
<div
|
|
216
|
+
class="pbx-max-h-72 pbx-cursor-pointer pbx-object-contain pbx-bg-white pbx-mx-auto"
|
|
217
|
+
>
|
|
218
|
+
<div v-if="false" class="pbx-mr-2" v-html="helper.icon"></div>
|
|
219
|
+
<h4 class="pbx-myPrimaryParagraph pbx-text-base pbx-font-medium">
|
|
220
|
+
{{ translate(helper.title) }}
|
|
221
|
+
</h4>
|
|
222
|
+
</div>
|
|
223
|
+
<div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
|
|
224
|
+
{{ translate('Click to add') }} {{ helper.title.toLowerCase() }}
|
|
225
|
+
{{ translate('component') }}
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
152
229
|
</div>
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
>
|
|
230
|
+
|
|
231
|
+
<!-- Regular Components Section -->
|
|
232
|
+
<div class="pbx-px-2" v-if="customMediaComponent">
|
|
233
|
+
<h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Layout Components') }}</h3>
|
|
234
|
+
<div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
|
|
235
|
+
<button
|
|
236
|
+
v-for="category in categories"
|
|
237
|
+
:key="category"
|
|
238
|
+
@click="selectedCategory = category"
|
|
239
|
+
class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
|
|
240
|
+
:class="[
|
|
241
|
+
selectedCategory === category
|
|
242
|
+
? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
|
|
243
|
+
: 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
|
|
244
|
+
]"
|
|
245
|
+
>
|
|
246
|
+
{{ translate(category) }}
|
|
247
|
+
</button>
|
|
248
|
+
</div>
|
|
156
249
|
<div
|
|
157
|
-
|
|
158
|
-
:key="comp.title"
|
|
159
|
-
class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
|
|
160
|
-
@click="handleDropComponent(convertToComponentObject(comp))"
|
|
250
|
+
class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4 pbx-pb-4"
|
|
161
251
|
>
|
|
162
252
|
<div
|
|
163
|
-
|
|
253
|
+
v-for="comp in filteredComponents"
|
|
254
|
+
:key="comp.title"
|
|
255
|
+
class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
|
|
256
|
+
@click="handleDropComponent(convertToComponentObject(comp))"
|
|
164
257
|
>
|
|
165
|
-
<!-- Use SVG preview instead of external images -->
|
|
166
258
|
<div
|
|
167
|
-
class="pbx-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
</
|
|
175
|
-
<div class="pbx-
|
|
176
|
-
|
|
259
|
+
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"
|
|
260
|
+
>
|
|
261
|
+
<!-- Use SVG preview instead of external images -->
|
|
262
|
+
<div
|
|
263
|
+
class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
|
|
264
|
+
v-html="comp.cover_image"
|
|
265
|
+
></div>
|
|
266
|
+
</div>
|
|
267
|
+
<div class="pbx-p-3">
|
|
268
|
+
<h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">
|
|
269
|
+
{{ translate(comp.title) }}
|
|
270
|
+
</h4>
|
|
271
|
+
<div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
|
|
272
|
+
{{ translate('Click to add component') }}
|
|
273
|
+
</div>
|
|
177
274
|
</div>
|
|
178
275
|
</div>
|
|
179
276
|
</div>
|
|
180
277
|
</div>
|
|
181
|
-
</
|
|
278
|
+
</template>
|
|
182
279
|
<div>
|
|
183
280
|
<button class="pbx-sr-only">Focusable fallback</button>
|
|
184
281
|
</div>
|
|
@@ -40,62 +40,47 @@ const component: Components[] = [
|
|
|
40
40
|
{
|
|
41
41
|
title: 'Single Image',
|
|
42
42
|
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="${getPlaceholderImageDataUrl()}" alt="provider"></div></div></div></div>\n</section>`,
|
|
43
|
-
category: '
|
|
43
|
+
category: 'Images',
|
|
44
44
|
cover_image: `
|
|
45
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="
|
|
46
|
-
<
|
|
47
|
-
<style
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
</
|
|
52
|
-
<rect class="bg" width="200" height="150"/>
|
|
53
|
-
<polygon class="fg" points="65 90.01 90 60.01 115 90.01"/>
|
|
54
|
-
<polygon class="fg" points="110 90.01 122.5 75.01 135 90.01"/>
|
|
55
|
-
<circle class="fg" cx="122.5" cy="64.15" r="4.16"/>
|
|
45
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="125.5201 272.4783 227.6296 170.7227" width="227.63px" height="170.723px">
|
|
46
|
+
<g transform="matrix(2.0564050674438477, 0, 0, 2.0564050674438477, -299.93572998046875, 191.27296447753906)" style="">
|
|
47
|
+
<rect class="bg" width="110.693" height="83.02" style="fill: rgb(56, 65, 82); stroke-width: 1;" x="206.893" y="39.489"/>
|
|
48
|
+
<polygon class="fg" points="242.868 89.308 256.705 72.703 270.543 89.308" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
|
|
49
|
+
<polygon class="fg" points="267.776 89.308 274.694 81.005 281.614 89.308" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
|
|
50
|
+
<circle class="fg" cx="274.694" cy="74.995" r="2.303" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
|
|
51
|
+
</g>
|
|
56
52
|
</svg>
|
|
57
53
|
`,
|
|
58
54
|
},
|
|
59
55
|
{
|
|
60
56
|
title: 'Two Vertical Images',
|
|
61
57
|
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="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> </div> </div> </div>\n</section>`,
|
|
62
|
-
category: '
|
|
58
|
+
category: 'Images',
|
|
63
59
|
cover_image: `
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
.cls-1 {
|
|
68
|
-
fill: #384152;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.cls-2 {
|
|
72
|
-
fill: #718096;
|
|
73
|
-
}
|
|
74
|
-
</style>
|
|
75
|
-
</defs>
|
|
60
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="77.1285 230.6534 251.166 229.0848" width="251.166px" height="229.085px">
|
|
61
|
+
<g transform="matrix(1.876052975654602, 0, 0, 1.876052975654602, 77.12846374511719, 230.65336608886716)" style="">
|
|
62
|
+
<rect class="cls-1" width="63.93" height="122.11" style="fill: rgb(56, 65, 82);"/>
|
|
76
63
|
<g>
|
|
77
|
-
<
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
<polygon class="cls-2" points="38.62 71.04 46.93 61.06 55.24 71.04 38.62 71.04"/>
|
|
81
|
-
<circle class="cls-2" cx="46.93" cy="53.84" r="2.77"/>
|
|
82
|
-
</g>
|
|
64
|
+
<polygon class="cls-2" points="8.68 71.04 25.31 51.08 41.94 71.04 8.68 71.04" style="fill: rgb(113, 128, 150);"/>
|
|
65
|
+
<polygon class="cls-2" points="38.62 71.04 46.93 61.06 55.24 71.04 38.62 71.04" style="fill: rgb(113, 128, 150);"/>
|
|
66
|
+
<circle class="cls-2" cx="46.93" cy="53.84" r="2.77" style="fill: rgb(113, 128, 150);"/>
|
|
83
67
|
</g>
|
|
68
|
+
</g>
|
|
69
|
+
<g transform="matrix(1.876052975654602, 0, 0, 1.876052975654602, 77.12846374511719, 230.65336608886716)" style="">
|
|
70
|
+
<rect class="cls-1" x="69.95" width="63.93" height="122.11" style="fill: rgb(56, 65, 82);"/>
|
|
84
71
|
<g>
|
|
85
|
-
<
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
<polygon class="cls-2" points="108.57 71.04 116.88 61.06 125.2 71.04 108.57 71.04"/>
|
|
89
|
-
<circle class="cls-2" cx="116.88" cy="53.84" r="2.77"/>
|
|
90
|
-
</g>
|
|
72
|
+
<polygon class="cls-2" points="78.64 71.04 95.27 51.08 111.89 71.04 78.64 71.04" style="fill: rgb(113, 128, 150);"/>
|
|
73
|
+
<polygon class="cls-2" points="108.57 71.04 116.88 61.06 125.2 71.04 108.57 71.04" style="fill: rgb(113, 128, 150);"/>
|
|
74
|
+
<circle class="cls-2" cx="116.88" cy="53.84" r="2.77" style="fill: rgb(113, 128, 150);"/>
|
|
91
75
|
</g>
|
|
92
|
-
</
|
|
76
|
+
</g>
|
|
77
|
+
</svg>
|
|
93
78
|
`,
|
|
94
79
|
},
|
|
95
80
|
{
|
|
96
81
|
title: 'Two Square Images',
|
|
97
82
|
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="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
98
|
-
category: '
|
|
83
|
+
category: 'Images',
|
|
99
84
|
cover_image: `
|
|
100
85
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.18 57.68">
|
|
101
86
|
<defs>
|
|
@@ -131,7 +116,7 @@ const component: Components[] = [
|
|
|
131
116
|
{
|
|
132
117
|
title: 'Three Square Images',
|
|
133
118
|
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="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
134
|
-
category: '
|
|
119
|
+
category: 'Images',
|
|
135
120
|
cover_image: `
|
|
136
121
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 53.92">
|
|
137
122
|
<defs>
|
|
@@ -158,7 +143,7 @@ const component: Components[] = [
|
|
|
158
143
|
{
|
|
159
144
|
title: 'Four Square Images',
|
|
160
145
|
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="${getPlaceholderImageDataUrl()}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"></div> </div> </div> </div>\n</section>`,
|
|
161
|
-
category: '
|
|
146
|
+
category: 'Images',
|
|
162
147
|
cover_image: `
|
|
163
148
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.34 42.55">
|
|
164
149
|
<defs>
|
|
@@ -194,7 +179,7 @@ const component: Components[] = [
|
|
|
194
179
|
{
|
|
195
180
|
title: 'Six Square Images Grid',
|
|
196
181
|
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="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" alt="image">\n</div>\n\n</div>\n</div>\n</div>\n</section>`,
|
|
197
|
-
category: '
|
|
182
|
+
category: 'Images',
|
|
198
183
|
cover_image: `
|
|
199
184
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 120.27">
|
|
200
185
|
<defs>
|
|
@@ -233,7 +218,7 @@ const component: Components[] = [
|
|
|
233
218
|
{
|
|
234
219
|
title: 'Two Square Images With Text',
|
|
235
220
|
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="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${getPlaceholderImageDataUrl()}" 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>`,
|
|
236
|
-
category: '
|
|
221
|
+
category: 'Images & Text',
|
|
237
222
|
cover_image: `
|
|
238
223
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.99 53.92">
|
|
239
224
|
<defs>
|
|
@@ -261,7 +246,7 @@ const component: Components[] = [
|
|
|
261
246
|
{
|
|
262
247
|
title: 'Three Vertical Images',
|
|
263
248
|
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="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${getPlaceholderImageDataUrl()}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${getPlaceholderImageDataUrl()}" alt="provider"></div></div> </div></div>\n</section>`,
|
|
264
|
-
category: '
|
|
249
|
+
category: 'Images',
|
|
265
250
|
cover_image: `
|
|
266
251
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.84 110.72">
|
|
267
252
|
<defs>
|
|
@@ -288,7 +273,7 @@ const component: Components[] = [
|
|
|
288
273
|
{
|
|
289
274
|
title: 'Four Square Images With Text',
|
|
290
275
|
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="${getPlaceholderImageDataUrl()}" 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="${getPlaceholderImageDataUrl()}" 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="${getPlaceholderImageDataUrl()}" 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="${getPlaceholderImageDataUrl()}" 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>`,
|
|
291
|
-
category: '
|
|
276
|
+
category: 'Images & Text',
|
|
292
277
|
cover_image: `
|
|
293
278
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.33 55.9">
|
|
294
279
|
<defs>
|
|
@@ -331,7 +316,59 @@ const component: Components[] = [
|
|
|
331
316
|
{
|
|
332
317
|
title: 'Three Square Images With Text',
|
|
333
318
|
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="${getPlaceholderImageDataUrl()}" 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="${getPlaceholderImageDataUrl()}" 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="${getPlaceholderImageDataUrl()}" 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>`,
|
|
334
|
-
category: '
|
|
319
|
+
category: 'Images & Text',
|
|
320
|
+
cover_image: `
|
|
321
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 70.84">
|
|
322
|
+
<defs>
|
|
323
|
+
<style>
|
|
324
|
+
.bg { fill: #384152; }
|
|
325
|
+
.fg { fill: #718096; }
|
|
326
|
+
</style>
|
|
327
|
+
</defs>
|
|
328
|
+
<rect class="bg" width="53.92" height="53.92"/>
|
|
329
|
+
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
330
|
+
<rect class="bg" x="123.37" width="53.92" height="53.92"/>
|
|
331
|
+
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
332
|
+
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
333
|
+
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
334
|
+
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
335
|
+
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
336
|
+
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
337
|
+
<polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
|
|
338
|
+
<polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
|
|
339
|
+
<circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
|
|
340
|
+
<rect class="bg" y="59.92" width="53.92" height="2.93"/>
|
|
341
|
+
<rect class="bg" y="63.91" width="53.92" height="2.93"/>
|
|
342
|
+
<rect class="bg" y="67.91" width="53.92" height="2.93"/>
|
|
343
|
+
<rect class="bg" x="62.15" y="59.92" width="53.92" height="2.93"/>
|
|
344
|
+
<rect class="bg" x="62.15" y="63.91" width="53.92" height="2.93"/>
|
|
345
|
+
<rect class="bg" x="62.15" y="67.91" width="53.92" height="2.93"/>
|
|
346
|
+
<rect class="bg" x="123.37" y="59.92" width="53.92" height="2.93"/>
|
|
347
|
+
<rect class="bg" x="123.37" y="63.91" width="53.92" height="2.93"/>
|
|
348
|
+
<rect class="bg" x="123.37" y="67.91" width="53.92" height="2.93"/>
|
|
349
|
+
</svg>
|
|
350
|
+
`,
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
title: 'Show Single Product',
|
|
354
|
+
html_code: `<section data-component-title="Three Square Images With Text" > <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"> <div class="pbx-flex-1 pbx-py-2"> <img class="pbx-object-cover pbx-w-full pbx-object-top pbx-aspect-square " src="${getPlaceholderImageDataUrl()}" alt="provider"> <div class="pbx-break-words pbx-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> </section>`,
|
|
355
|
+
category: 'Product',
|
|
356
|
+
cover_image: `
|
|
357
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="122.319 300.3 122.364 160.763" width="122.364px" height="160.763px">
|
|
358
|
+
<rect class="bg" width="122.364" height="122.364" style="fill: rgb(56, 65, 82); stroke-width: 1;" x="122.319" y="300.3"/>
|
|
359
|
+
<polygon class="fg" points="140.928 379.728 171.337 343.237 201.747 379.728" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
|
|
360
|
+
<polygon class="fg" points="195.665 379.728 210.87 361.483 226.052 379.728" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
|
|
361
|
+
<circle class="fg" cx="210.87" cy="348.297" r="5.061" style="fill: rgb(113, 128, 150); stroke-width: 1;"/>
|
|
362
|
+
<rect class="bg" y="436.28" width="122.364" height="6.65" style="fill: rgb(56, 65, 82); stroke-width: 1;" x="122.319"/>
|
|
363
|
+
<rect class="bg" y="445.335" width="122.364" height="6.65" style="fill: rgb(56, 65, 82); stroke-width: 1;" x="122.319"/>
|
|
364
|
+
<rect class="bg" y="454.413" width="122.364" height="6.65" style="fill: rgb(56, 65, 82); stroke-width: 1;" x="122.319"/>
|
|
365
|
+
</svg>
|
|
366
|
+
`,
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
title: 'Show Multiple Products',
|
|
370
|
+
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="${getPlaceholderImageDataUrl()}" 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="${getPlaceholderImageDataUrl()}" 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="${getPlaceholderImageDataUrl()}" 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>`,
|
|
371
|
+
category: 'Products',
|
|
335
372
|
cover_image: `
|
|
336
373
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 70.84">
|
|
337
374
|
<defs>
|