@myissue/vue-website-page-builder 3.4.1 → 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 +14 -14
- package/dist/vue-website-page-builder.umd.cjs +14 -14
- package/package.json +1 -1
- package/src/PageBuilder/PageBuilder.vue +1 -1
- package/src/PageBuilder/Preview.vue +2 -2
- package/src/css/style.css +16 -20
- package/src/tests/componentsArray.test.json +4 -4
- package/src/utils/html-elements/component.ts +10 -10
|
@@ -104,7 +104,7 @@ const Wh = { class: "pbx-font-sans" }, Uh = {
|
|
|
104
104
|
])
|
|
105
105
|
]));
|
|
106
106
|
}
|
|
107
|
-
}), Kh = { key: 0 }, Gh = { 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" }, Jh = { id: "page-builder-
|
|
107
|
+
}), Kh = { key: 0 }, Gh = { 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" }, Jh = { id: "page-builder-wrapper" }, Yh = ["innerHTML"], Xh = { key: 1 }, vp = {
|
|
108
108
|
__name: "Preview",
|
|
109
109
|
props: {
|
|
110
110
|
mobile: {
|
|
@@ -124,7 +124,7 @@ const Wh = { class: "pbx-font-sans" }, Uh = {
|
|
|
124
124
|
if (e.mobile && r.value && t.value) {
|
|
125
125
|
const s = r.value.contentWindow.document;
|
|
126
126
|
s.open(), s.write(
|
|
127
|
-
`<!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">${t.value}</div></body></html>`
|
|
127
|
+
`<!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">${t.value}</div></body></html>`
|
|
128
128
|
), s.close(), document.querySelectorAll('link[rel="stylesheet"], style').forEach((l) => {
|
|
129
129
|
s.head.appendChild(l.cloneNode(!0));
|
|
130
130
|
});
|
|
@@ -22964,7 +22964,7 @@ class="flex items-centre justify-start font-medium text-black bg-gray-200">
|
|
|
22964
22964
|
{
|
|
22965
22965
|
title: "Single Image",
|
|
22966
22966
|
html_code: `<section>
|
|
22967
|
-
<div class="
|
|
22967
|
+
<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="${de}" alt="provider"></div></div></div></div>
|
|
22968
22968
|
</section>`,
|
|
22969
22969
|
cover_image: null,
|
|
22970
22970
|
category: "Image"
|
|
@@ -22972,7 +22972,7 @@ class="flex items-centre justify-start font-medium text-black bg-gray-200">
|
|
|
22972
22972
|
{
|
|
22973
22973
|
title: "Two Vertical Images",
|
|
22974
22974
|
html_code: `<section>
|
|
22975
|
-
<div class="
|
|
22975
|
+
<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="${de}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${de}" alt="provider"> </div> </div> </div> </div>
|
|
22976
22976
|
</section>`,
|
|
22977
22977
|
cover_image: null,
|
|
22978
22978
|
category: "Image"
|
|
@@ -22980,7 +22980,7 @@ class="flex items-centre justify-start font-medium text-black bg-gray-200">
|
|
|
22980
22980
|
{
|
|
22981
22981
|
title: "Two Square Images",
|
|
22982
22982
|
html_code: `<section>
|
|
22983
|
-
<div class="
|
|
22983
|
+
<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="${de}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${de}" alt="provider"></div></div> </div></div>
|
|
22984
22984
|
</section>`,
|
|
22985
22985
|
cover_image: null,
|
|
22986
22986
|
category: "Image"
|
|
@@ -22988,7 +22988,7 @@ class="flex items-centre justify-start font-medium text-black bg-gray-200">
|
|
|
22988
22988
|
{
|
|
22989
22989
|
title: "Three Square Images",
|
|
22990
22990
|
html_code: `<section>
|
|
22991
|
-
<div class="
|
|
22991
|
+
<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="${de}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${de}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${de}" alt="provider"></div></div> </div></div>
|
|
22992
22992
|
</section>`,
|
|
22993
22993
|
cover_image: null,
|
|
22994
22994
|
category: "Image"
|
|
@@ -22996,7 +22996,7 @@ class="flex items-centre justify-start font-medium text-black bg-gray-200">
|
|
|
22996
22996
|
{
|
|
22997
22997
|
title: "Four Square Images",
|
|
22998
22998
|
html_code: `<section>
|
|
22999
|
-
<div class="
|
|
22999
|
+
<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="${de}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${de}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${de}" alt="provider"></div> <div><img class="object-cover w-full object-top aspect-square " src="${de}" alt="provider"></div> </div> </div> </div>
|
|
23000
23000
|
</section>`,
|
|
23001
23001
|
cover_image: null,
|
|
23002
23002
|
category: "Image"
|
|
@@ -23004,7 +23004,7 @@ class="flex items-centre justify-start font-medium text-black bg-gray-200">
|
|
|
23004
23004
|
{
|
|
23005
23005
|
title: "Six Square Images Grid",
|
|
23006
23006
|
html_code: `<section>
|
|
23007
|
-
<div class="
|
|
23007
|
+
<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2">
|
|
23008
23008
|
<div class="mx-auto max-w-7xl">
|
|
23009
23009
|
<div class="grid grid-cols-2 md:grid-cols-3 myPrimaryGap">
|
|
23010
23010
|
|
|
@@ -23042,7 +23042,7 @@ class="flex items-centre justify-start font-medium text-black bg-gray-200">
|
|
|
23042
23042
|
{
|
|
23043
23043
|
title: "Two Square Images With Text",
|
|
23044
23044
|
html_code: `<section>
|
|
23045
|
-
<div class="
|
|
23045
|
+
<div class="md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl">
|
|
23046
23046
|
<div class="myPrimaryGap lg:flex lg:justify-center"><div class="flex-1 py-2">
|
|
23047
23047
|
<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="${de}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square " src="${de}" alt="provider"> </div> </div> </div>
|
|
23048
23048
|
|
|
@@ -23055,7 +23055,7 @@ class="flex items-centre justify-start font-medium text-black bg-gray-200">
|
|
|
23055
23055
|
{
|
|
23056
23056
|
title: "Three Vertical Images",
|
|
23057
23057
|
html_code: `<section>
|
|
23058
|
-
<div class="
|
|
23058
|
+
<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="${de}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${de}" alt="provider"> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] " src="${de}" alt="provider"></div></div> </div></div>
|
|
23059
23059
|
</section>`,
|
|
23060
23060
|
cover_image: null,
|
|
23061
23061
|
category: "Image"
|
|
@@ -23063,7 +23063,7 @@ class="flex items-centre justify-start font-medium text-black bg-gray-200">
|
|
|
23063
23063
|
{
|
|
23064
23064
|
title: "Four Square Images With Text",
|
|
23065
23065
|
html_code: `<section>
|
|
23066
|
-
<div class="
|
|
23066
|
+
<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="${de}" 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="${de}" 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="${de}" 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="${de}" 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>
|
|
23067
23067
|
</section>`,
|
|
23068
23068
|
cover_image: null,
|
|
23069
23069
|
category: "Image & Text"
|
|
@@ -23071,7 +23071,7 @@ class="flex items-centre justify-start font-medium text-black bg-gray-200">
|
|
|
23071
23071
|
{
|
|
23072
23072
|
title: "Three Square Images With Text",
|
|
23073
23073
|
html_code: `<section>
|
|
23074
|
-
<div class="
|
|
23074
|
+
<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="${de}" 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="${de}" 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="${de}" 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>
|
|
23075
23075
|
</section>`,
|
|
23076
23076
|
cover_image: null,
|
|
23077
23077
|
category: "Image & Text"
|
|
@@ -24781,7 +24781,7 @@ const LC = ["src"], NC = {
|
|
|
24781
24781
|
}, MT = { class: "pbx-overflow-hidden pbx-shadow pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 md:pbx-rounded-lg" }, ET = { class: "pbx-overflow-x-auto" }, TT = { class: "pbx-w-max" }, OT = { class: "pbx-bg-white pbx-divide-y pbx-divide-gray-200" }, BT = { class: "pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500" }, PT = { class: "pbx-min-w-[30rem] pbx-w-max" }, AT = { key: 0 }, _T = { key: 1 }, LT = { key: 0 }, NT = { class: "pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500" }, DT = { class: "pbx-min-w-[30rem] pbx-w-max" }, IT = { class: "pbx-inline-flex pbx-items-center pbx-px-2.5 pbx-py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium" }, $T = { class: "pbx-mt-4 pbx-mb-4 pbx-py-8 pbx-px-2 pbx-border pbx-border-solid pbx-border-gray-600 pbx-rounded-xl" }, RT = { class: "pbx-mt-4 pbx-whitespace-pre-wrap pbx-text-white pbx-overflow-hidden pbx-bg-gray-900" }, FT = { class: "pbx-px-4 pbx-pb-8 pbx-pt-4 pbx-text-white pbx-text-xs pbx-break-all" }, HT = { class: "pbx-myPrimaryParagraph pbx-text-xs pbx-text-white" }, jT = {
|
|
24782
24782
|
__name: "PageBuilderSettings",
|
|
24783
24783
|
setup(n) {
|
|
24784
|
-
const e = "3.4.
|
|
24784
|
+
const e = "3.4.2", t = Se, r = I(() => t.getPageBuilderConfig);
|
|
24785
24785
|
return (o, i) => {
|
|
24786
24786
|
var s, l, a, p, c, u, f, h, b, m, x, v, C, S, g, O;
|
|
24787
24787
|
return w(), E("div", uE, [
|
|
@@ -25998,7 +25998,7 @@ const Bh = /* @__PURE__ */ Gs(HB, [["render", zB]]), VB = { class: "pbx-text-xs
|
|
|
25998
25998
|
x.value && x.value.userSettings && x.value.userSettings.language ? (w(), E("div", cP, [
|
|
25999
25999
|
xe(d("select", {
|
|
26000
26000
|
id: "pbx-lang",
|
|
26001
|
-
class: "pbx-myPrimarySelect pbx-min-w-
|
|
26001
|
+
class: "pbx-myPrimarySelect pbx-min-w-20",
|
|
26002
26002
|
"onUpdate:modelValue": _[11] || (_[11] = (le) => f.value = le)
|
|
26003
26003
|
}, [
|
|
26004
26004
|
Array.isArray(x.value.userSettings.language.enable) && x.value.userSettings.language.enable.length >= 1 ? (w(!0), E(Z, { key: 0 }, fe(y(t).availableLanguage().filter((le) => x.value.userSettings.language.enable.includes(le)), (le) => (w(), E("option", {
|