@g1cloud/page-builder-editor 1.0.0-alpha.33 → 1.0.0-alpha.34
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/css/page-page.scss +3 -7
- package/css/page-section.scss +1 -0
- package/dist/{PbPropertyEditorColor-Btwd1WP_.js → PbPropertyEditorColor-D7_bQLN4.js} +1 -1
- package/dist/{PbPropertyEditorHtml-DQpflvo0.js → PbPropertyEditorHtml-BSfmWiwq.js} +1 -1
- package/dist/{PbPropertyEditorImage-BV2SeGBT.js → PbPropertyEditorImage-CeAWWLQE.js} +1 -1
- package/dist/{PbPropertyEditorMultilineText-RrUB1pI3.js → PbPropertyEditorMultilineText-yHnhkc9I.js} +1 -1
- package/dist/{PbPropertyEditorText-tvKIJh2H.js → PbPropertyEditorText-BcsUyRxP.js} +1 -1
- package/dist/{PbPropertyEditorYoutube-Bcq06f0I.js → PbPropertyEditorYoutube-Bn0DdIOD.js} +1 -1
- package/dist/{PbWidgetAddModal-Ca9HNoSU.js → PbWidgetAddModal-BzG-lkZp.js} +1 -1
- package/dist/{index-B8JifwHW.js → index-BaB2TtF-.js} +131 -94
- package/dist/model/default-part-property-group.d.ts +2 -0
- package/dist/page-builder-editor.js +1 -1
- package/dist/page-builder-editor.umd.cjs +124 -87
- package/package.json +2 -2
package/css/page-page.scss
CHANGED
|
@@ -4,19 +4,15 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.pb-page {
|
|
7
|
-
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
8
9
|
margin: 0 auto;
|
|
10
|
+
width: 100%;
|
|
9
11
|
background-position: 50% 50%;
|
|
10
12
|
background-repeat: no-repeat;
|
|
11
13
|
background-size: cover;
|
|
12
14
|
|
|
13
15
|
.pb-page-content {
|
|
14
|
-
//&.selected {
|
|
15
|
-
// outline: 2px solid #4998f8;
|
|
16
|
-
// outline-offset: -2px;
|
|
17
|
-
// z-index: 999;
|
|
18
|
-
//}
|
|
19
|
-
|
|
20
16
|
&.selected::before {
|
|
21
17
|
content: "";
|
|
22
18
|
position: absolute;
|
package/css/page-section.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
|
|
2
2
|
import { BSTextInput } from "@g1cloud/bluesea";
|
|
3
|
-
import { P as PbColorPicker } from "./index-
|
|
3
|
+
import { P as PbColorPicker } from "./index-BaB2TtF-.js";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-color" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
|
6
6
|
const _hoisted_3 = ["textContent"];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
|
|
2
2
|
import { useModal } from "@g1cloud/bluesea";
|
|
3
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
3
|
+
import { u as usePageBuilderEditor } from "./index-BaB2TtF-.js";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
|
6
6
|
const _hoisted_3 = ["textContent"];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
|
|
2
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
2
|
+
import { u as usePageBuilderEditor } from "./index-BaB2TtF-.js";
|
|
3
3
|
import { useModal } from "@g1cloud/bluesea";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
package/dist/{PbPropertyEditorMultilineText-RrUB1pI3.js → PbPropertyEditorMultilineText-yHnhkc9I.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
|
|
2
2
|
import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
|
|
3
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
3
|
+
import { u as usePageBuilderEditor } from "./index-BaB2TtF-.js";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
|
6
6
|
const _hoisted_3 = ["textContent"];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
|
|
2
2
|
import { BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
|
|
3
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
3
|
+
import { u as usePageBuilderEditor } from "./index-BaB2TtF-.js";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
|
6
6
|
const _hoisted_3 = ["textContent"];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
|
|
2
2
|
import { useModal } from "@g1cloud/bluesea";
|
|
3
|
-
import { s as selectYoutubeVideo } from "./index-
|
|
3
|
+
import { s as selectYoutubeVideo } from "./index-BaB2TtF-.js";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
|
6
6
|
const _hoisted_3 = ["textContent"];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
|
|
2
2
|
import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
|
|
3
|
-
import { w as widgetPartDefinitions } from "./index-
|
|
3
|
+
import { w as widgetPartDefinitions } from "./index-BaB2TtF-.js";
|
|
4
4
|
const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
|
|
5
5
|
const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
|
|
6
6
|
const _hoisted_3 = ["onClick", "textContent"];
|
|
@@ -6683,80 +6683,87 @@ class Part {
|
|
|
6683
6683
|
return ((_a = this.properties) == null ? void 0 : _a.classNames) || "";
|
|
6684
6684
|
}
|
|
6685
6685
|
getAlignStyleValue(align) {
|
|
6686
|
-
|
|
6687
|
-
|
|
6688
|
-
|
|
6686
|
+
switch (align) {
|
|
6687
|
+
case "start":
|
|
6688
|
+
return "flex-start";
|
|
6689
|
+
case "end":
|
|
6690
|
+
return "flex-end";
|
|
6691
|
+
case "center":
|
|
6692
|
+
return "center";
|
|
6693
|
+
case "between":
|
|
6694
|
+
return "space-between";
|
|
6695
|
+
default:
|
|
6696
|
+
return;
|
|
6697
|
+
}
|
|
6689
6698
|
}
|
|
6690
6699
|
getStyles(isMobilePage) {
|
|
6691
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
|
|
6700
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q;
|
|
6692
6701
|
const style = {};
|
|
6693
|
-
|
|
6694
|
-
|
|
6695
|
-
style.alignSelf = this.getAlignStyleValue(align);
|
|
6696
|
-
} else if (this.isPage()) {
|
|
6697
|
-
style.display = "flex";
|
|
6698
|
-
style.flexDirection = "column";
|
|
6699
|
-
style.alignItems = this.getAlignStyleValue(align);
|
|
6702
|
+
if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
|
|
6703
|
+
style.flexDirection = "row";
|
|
6700
6704
|
} else {
|
|
6701
|
-
|
|
6702
|
-
|
|
6703
|
-
|
|
6704
|
-
style.flexDirection = "row";
|
|
6705
|
-
style.justifyContent = this.getAlignStyleValue(align);
|
|
6706
|
-
} else if (direction === "vertical") {
|
|
6707
|
-
style.display = "flex";
|
|
6708
|
-
style.flexDirection = "column";
|
|
6709
|
-
style.alignItems = this.getAlignStyleValue(align);
|
|
6710
|
-
}
|
|
6711
|
-
}
|
|
6712
|
-
if (((_d = this.properties) == null ? void 0 : _d.wrap) === "wrap") {
|
|
6705
|
+
style.flexDirection = "column";
|
|
6706
|
+
}
|
|
6707
|
+
if (((_b = this.properties) == null ? void 0 : _b.wrap) === "wrap") {
|
|
6713
6708
|
style.flexWrap = "wrap";
|
|
6714
6709
|
}
|
|
6715
|
-
|
|
6716
|
-
|
|
6717
|
-
|
|
6718
|
-
if (
|
|
6719
|
-
|
|
6720
|
-
if (
|
|
6721
|
-
|
|
6722
|
-
|
|
6723
|
-
|
|
6724
|
-
|
|
6725
|
-
|
|
6726
|
-
|
|
6727
|
-
if ((
|
|
6728
|
-
if ((
|
|
6729
|
-
if ((
|
|
6730
|
-
if ((
|
|
6731
|
-
if ((
|
|
6732
|
-
if ((
|
|
6733
|
-
if ((
|
|
6734
|
-
if ((
|
|
6735
|
-
if ((
|
|
6736
|
-
if ((
|
|
6737
|
-
if ((
|
|
6738
|
-
if ((
|
|
6739
|
-
if ((
|
|
6740
|
-
if ((
|
|
6741
|
-
if ((
|
|
6742
|
-
if ((
|
|
6743
|
-
if ((
|
|
6744
|
-
if ((
|
|
6745
|
-
if ((
|
|
6710
|
+
const alignItems = this.getAlignStyleValue((_c = this.properties) == null ? void 0 : _c.alignItems);
|
|
6711
|
+
const justifyContent = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.justifyContent);
|
|
6712
|
+
const alignSelf = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.alignSelf);
|
|
6713
|
+
if (this.isWidget()) {
|
|
6714
|
+
if (alignSelf) style.alignSelf = alignSelf;
|
|
6715
|
+
} else if (this.isPage()) {
|
|
6716
|
+
if (alignItems) style.alignItems = alignItems;
|
|
6717
|
+
} else {
|
|
6718
|
+
if (alignItems) style.alignItems = alignItems;
|
|
6719
|
+
if (justifyContent) style.justifyContent = justifyContent;
|
|
6720
|
+
if (alignSelf) style.alignSelf = alignSelf;
|
|
6721
|
+
}
|
|
6722
|
+
if ((_f = this.properties) == null ? void 0 : _f.margin) style.margin = this.properties.margin;
|
|
6723
|
+
if ((_g = this.properties) == null ? void 0 : _g.marginLeft) style.marginLeft = this.properties.marginLeft;
|
|
6724
|
+
if ((_h = this.properties) == null ? void 0 : _h.marginRight) style.marginRight = this.properties.marginRight;
|
|
6725
|
+
if ((_i = this.properties) == null ? void 0 : _i.marginTop) style.marginTop = this.properties.marginTop;
|
|
6726
|
+
if ((_j = this.properties) == null ? void 0 : _j.marginBottom) style.marginBottom = this.properties.marginBottom;
|
|
6727
|
+
if ((_k = this.properties) == null ? void 0 : _k.padding) style.padding = this.properties.padding;
|
|
6728
|
+
if ((_l = this.properties) == null ? void 0 : _l.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
|
|
6729
|
+
if ((_m = this.properties) == null ? void 0 : _m.paddingRight) style.paddingRight = this.properties.paddingRight;
|
|
6730
|
+
if ((_n = this.properties) == null ? void 0 : _n.paddingTop) style.paddingTop = this.properties.paddingTop;
|
|
6731
|
+
if ((_o = this.properties) == null ? void 0 : _o.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
|
|
6732
|
+
if ((_p = this.properties) == null ? void 0 : _p.left) style.left = this.properties.left;
|
|
6733
|
+
if ((_q = this.properties) == null ? void 0 : _q.right) style.right = this.properties.right;
|
|
6734
|
+
if ((_r = this.properties) == null ? void 0 : _r.top) style.top = this.properties.top;
|
|
6735
|
+
if ((_s = this.properties) == null ? void 0 : _s.bottom) style.bottom = this.properties.bottom;
|
|
6736
|
+
if ((_t = this.properties) == null ? void 0 : _t.width) style.width = this.properties.width;
|
|
6737
|
+
if ((_u = this.properties) == null ? void 0 : _u.height) style.height = this.properties.height;
|
|
6738
|
+
if ((_v = this.properties) == null ? void 0 : _v.maxWidth) style.maxWidth = this.properties.maxWidth;
|
|
6739
|
+
if ((_w = this.properties) == null ? void 0 : _w.maxHeight) style.maxHeight = this.properties.maxHeight;
|
|
6740
|
+
if ((_x = this.properties) == null ? void 0 : _x.minWidth) style.minWidth = this.properties.minWidth;
|
|
6741
|
+
if ((_y = this.properties) == null ? void 0 : _y.minHeight) style.minHeight = this.properties.minHeight;
|
|
6742
|
+
if ((_z = this.properties) == null ? void 0 : _z.textAlign) style.textAlign = this.properties.textAlign;
|
|
6743
|
+
if ((_A = this.properties) == null ? void 0 : _A.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
|
|
6744
|
+
if ((_B = this.properties) == null ? void 0 : _B.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
|
|
6745
|
+
if ((_C = this.properties) == null ? void 0 : _C.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
|
|
6746
|
+
if ((_D = this.properties) == null ? void 0 : _D.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
|
|
6747
|
+
if ((_E = this.properties) == null ? void 0 : _E.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
|
|
6748
|
+
if ((_F = this.properties) == null ? void 0 : _F.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
|
|
6749
|
+
if ((_G = this.properties) == null ? void 0 : _G.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
|
|
6750
|
+
if ((_H = this.properties) == null ? void 0 : _H.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
|
|
6751
|
+
if ((_I = this.properties) == null ? void 0 : _I.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
|
|
6752
|
+
if (((_J = this.properties) == null ? void 0 : _J.borderColor) && style.borderLeftWidth) {
|
|
6746
6753
|
style.borderLeftStyle = "solid";
|
|
6747
|
-
style.borderLeftColor = (
|
|
6754
|
+
style.borderLeftColor = (_K = this.properties) == null ? void 0 : _K.borderColor;
|
|
6748
6755
|
}
|
|
6749
|
-
if (((
|
|
6756
|
+
if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderRightWidth) {
|
|
6750
6757
|
style.borderRightStyle = "solid";
|
|
6751
|
-
style.borderRightColor = (
|
|
6758
|
+
style.borderRightColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
|
|
6752
6759
|
}
|
|
6753
|
-
if (((
|
|
6760
|
+
if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderTopWidth) {
|
|
6754
6761
|
style.borderTopStyle = "solid";
|
|
6755
|
-
style.borderTopColor = (
|
|
6762
|
+
style.borderTopColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
|
|
6756
6763
|
}
|
|
6757
|
-
if (((
|
|
6764
|
+
if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderBottomWidth) {
|
|
6758
6765
|
style.borderBottomStyle = "solid";
|
|
6759
|
-
style.borderBottomColor = (
|
|
6766
|
+
style.borderBottomColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
|
|
6760
6767
|
}
|
|
6761
6768
|
return style;
|
|
6762
6769
|
}
|
|
@@ -8121,15 +8128,15 @@ class PartManager {
|
|
|
8121
8128
|
const defaultPartPropertyEditors = () => {
|
|
8122
8129
|
return {
|
|
8123
8130
|
"readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
|
|
8124
|
-
"text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-
|
|
8131
|
+
"text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BcsUyRxP.js")),
|
|
8125
8132
|
"number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-TTgo0zbQ.js")),
|
|
8126
8133
|
"boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-C7-iSAtn.js")),
|
|
8127
|
-
"multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-
|
|
8134
|
+
"multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-yHnhkc9I.js")),
|
|
8128
8135
|
"select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
|
|
8129
|
-
"color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-
|
|
8130
|
-
"image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-
|
|
8131
|
-
"html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-
|
|
8132
|
-
"youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-
|
|
8136
|
+
"color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-D7_bQLN4.js")),
|
|
8137
|
+
"image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-CeAWWLQE.js")),
|
|
8138
|
+
"html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BSfmWiwq.js")),
|
|
8139
|
+
"youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-Bn0DdIOD.js"))
|
|
8133
8140
|
};
|
|
8134
8141
|
};
|
|
8135
8142
|
const getPropertyValueOfParts = (parts, propertyName) => {
|
|
@@ -8369,11 +8376,7 @@ const locateRight = (style, top, height) => {
|
|
|
8369
8376
|
style.height = height || "";
|
|
8370
8377
|
};
|
|
8371
8378
|
const getLayoutDirection = (isMobilePage, properties) => {
|
|
8372
|
-
|
|
8373
|
-
return properties && properties.directionSm || "vertical";
|
|
8374
|
-
} else {
|
|
8375
|
-
return properties && properties.directionLg || "horizontal";
|
|
8376
|
-
}
|
|
8379
|
+
return properties && properties.direction || (isMobilePage ? "vertical" : "horizontal");
|
|
8377
8380
|
};
|
|
8378
8381
|
const _export_sfc = (sfc, props) => {
|
|
8379
8382
|
const target = sfc.__vccOpts || sfc;
|
|
@@ -11941,14 +11944,8 @@ const layoutGroup = () => {
|
|
|
11941
11944
|
caption: "Layout",
|
|
11942
11945
|
properties: [
|
|
11943
11946
|
{
|
|
11944
|
-
propertyName: "
|
|
11945
|
-
caption: "
|
|
11946
|
-
propertyType: "select",
|
|
11947
|
-
params: "vertical,horizontal"
|
|
11948
|
-
},
|
|
11949
|
-
{
|
|
11950
|
-
propertyName: "directionLg",
|
|
11951
|
-
caption: "Direction for PC (> 768px)",
|
|
11947
|
+
propertyName: "direction",
|
|
11948
|
+
caption: "Layout",
|
|
11952
11949
|
propertyType: "select",
|
|
11953
11950
|
params: "vertical,horizontal"
|
|
11954
11951
|
},
|
|
@@ -11967,10 +11964,50 @@ const alignGroup = () => {
|
|
|
11967
11964
|
caption: "Align",
|
|
11968
11965
|
properties: [
|
|
11969
11966
|
{
|
|
11970
|
-
propertyName: "
|
|
11971
|
-
caption: "Align",
|
|
11967
|
+
propertyName: "alignItems",
|
|
11968
|
+
caption: "Align Items",
|
|
11969
|
+
propertyType: "select",
|
|
11970
|
+
params: "start,center,end"
|
|
11971
|
+
},
|
|
11972
|
+
{
|
|
11973
|
+
propertyName: "justifyContent",
|
|
11974
|
+
caption: "Justify Content",
|
|
11975
|
+
propertyType: "select",
|
|
11976
|
+
params: "start,center,end,between"
|
|
11977
|
+
},
|
|
11978
|
+
{
|
|
11979
|
+
propertyName: "alignSelf",
|
|
11980
|
+
caption: "Align Self",
|
|
11981
|
+
propertyType: "select",
|
|
11982
|
+
params: "start,center,end"
|
|
11983
|
+
}
|
|
11984
|
+
]
|
|
11985
|
+
};
|
|
11986
|
+
};
|
|
11987
|
+
const alignItemsGroup = () => {
|
|
11988
|
+
return {
|
|
11989
|
+
groupName: "align",
|
|
11990
|
+
caption: "Align",
|
|
11991
|
+
properties: [
|
|
11992
|
+
{
|
|
11993
|
+
propertyName: "alignItems",
|
|
11994
|
+
caption: "Align Items",
|
|
11972
11995
|
propertyType: "select",
|
|
11973
|
-
params: "
|
|
11996
|
+
params: "start,center,end"
|
|
11997
|
+
}
|
|
11998
|
+
]
|
|
11999
|
+
};
|
|
12000
|
+
};
|
|
12001
|
+
const alignSelfGroup = () => {
|
|
12002
|
+
return {
|
|
12003
|
+
groupName: "align",
|
|
12004
|
+
caption: "Align",
|
|
12005
|
+
properties: [
|
|
12006
|
+
{
|
|
12007
|
+
propertyName: "alignSelf",
|
|
12008
|
+
caption: "Align Self",
|
|
12009
|
+
propertyType: "select",
|
|
12010
|
+
params: ",start,center,end"
|
|
11974
12011
|
}
|
|
11975
12012
|
]
|
|
11976
12013
|
};
|
|
@@ -12052,7 +12089,7 @@ const defaultPropertyGroups = () => {
|
|
|
12052
12089
|
return [layoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
|
|
12053
12090
|
};
|
|
12054
12091
|
const defaultWidgetPropertyGroups = () => {
|
|
12055
|
-
return [
|
|
12092
|
+
return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
|
|
12056
12093
|
};
|
|
12057
12094
|
const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
12058
12095
|
__name: "PbContainerWidget",
|
|
@@ -12103,13 +12140,13 @@ const pageParts = [
|
|
|
12103
12140
|
}
|
|
12104
12141
|
]
|
|
12105
12142
|
},
|
|
12106
|
-
|
|
12143
|
+
alignItemsGroup(),
|
|
12107
12144
|
paddingGroup(),
|
|
12108
12145
|
backgroundGroup(),
|
|
12109
12146
|
commonGroup()
|
|
12110
12147
|
],
|
|
12111
12148
|
initialProperties: {
|
|
12112
|
-
|
|
12149
|
+
alignItems: "center"
|
|
12113
12150
|
},
|
|
12114
12151
|
allowsChild: () => true,
|
|
12115
12152
|
creator: () => _sfc_main$l
|
|
@@ -12126,9 +12163,9 @@ const sectionParts = [
|
|
|
12126
12163
|
...defaultPropertyGroups()
|
|
12127
12164
|
],
|
|
12128
12165
|
initialProperties: {
|
|
12129
|
-
|
|
12130
|
-
|
|
12131
|
-
|
|
12166
|
+
direction: "horizontal",
|
|
12167
|
+
alignItems: "start",
|
|
12168
|
+
justifyContent: "start"
|
|
12132
12169
|
},
|
|
12133
12170
|
allowsChild: () => true,
|
|
12134
12171
|
creator: () => _sfc_main$l
|
|
@@ -12145,9 +12182,9 @@ const blockParts = [
|
|
|
12145
12182
|
...defaultPropertyGroups()
|
|
12146
12183
|
],
|
|
12147
12184
|
initialProperties: {
|
|
12148
|
-
|
|
12149
|
-
|
|
12150
|
-
|
|
12185
|
+
direction: "vertical",
|
|
12186
|
+
alignItems: "start",
|
|
12187
|
+
justifyContent: "start"
|
|
12151
12188
|
},
|
|
12152
12189
|
allowsChild: () => true,
|
|
12153
12190
|
creator: () => _sfc_main$n
|
|
@@ -12431,7 +12468,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
|
|
|
12431
12468
|
let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
|
|
12432
12469
|
const openWidgetAddModal = (modal, args, callback) => {
|
|
12433
12470
|
modal.openModal({
|
|
12434
|
-
component: defineAsyncComponent(() => import("./PbWidgetAddModal-
|
|
12471
|
+
component: defineAsyncComponent(() => import("./PbWidgetAddModal-BzG-lkZp.js")),
|
|
12435
12472
|
style: {
|
|
12436
12473
|
width: "80%",
|
|
12437
12474
|
height: "80%",
|
|
@@ -14334,7 +14371,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
14334
14371
|
};
|
|
14335
14372
|
}
|
|
14336
14373
|
});
|
|
14337
|
-
const canvasStyle = '.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\n}\n\n.pb-page {\n
|
|
14374
|
+
const canvasStyle = '.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\n}\n\n.pb-page {\n display: flex;\n flex-direction: column;\n margin: 0 auto;\n width: 100%;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.pb-page .pb-page-content.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-page * {\n box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\n}\n\n.pb-add-widget-button button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 8px;\n background: none;\n border: none;\n cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n\n.pb-section {\n display: flex;\n position: relative;\n width: 100%;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n outline: 1px dashed #ccc;\n background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n outline: none;\n}\n\n.pb-block {\n display: flex;\n min-width: 1px;\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget {\n position: relative;\n outline: 1px dashed #ccc;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n pointer-events: auto !important;\n}\n\n.pb-widget * {\n pointer-events: none;\n}\n\n.pb-widget.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-widget .pan-handle {\n position: absolute;\n left: -6px;\n top: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: move;\n pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n position: absolute;\n right: -6px;\n bottom: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: nwse-resize;\n pointer-events: auto !important;\n}\n\n.pb-widget {\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-text-widget .text {\n color: #333;\n}\n\n.pb-text-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-image-widget {\n width: 100%;\n}\n\n.pb-image-widget .image {\n width: 100%;\n}\n\n.pb-image-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-youtube-widget {\n width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n width: 100%;\n height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-container-widget {\n width: 100%;\n}\n\n.pb-container-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-product-list-widget {\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n width: 95%;\n margin: 0 auto;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n font-size: 40px;\n color: #999;\n line-height: 200px;\n vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n\n.pb-login-widget {\n height: 200px;\n text-align: center;\n}\n\n.pb-login-widget h3 {\n padding: 0;\n margin: 0;\n font-size: 32px;\n font-weight: bold;\n color: #ccc;\n line-height: 200px;\n vertical-align: middle;\n}\n\n.font-icon {\n font-family: Material Symbols Outlined, monospace;\n font-size: 1rem;\n max-width: 1em;\n}\n\nhtml, body {\n font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n font-size: 12px;\n}\n\nbody {\n margin: 0;\n padding: 0;\n background-color: #aaa;\n overflow: hidden;\n}\n\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\n}\n\n.pb-add-section-handle {\n position: relative;\n text-align: center;\n cursor: pointer;\n z-index: 5;\n height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n left: 50%;\n bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n opacity: 1;\n}\n\n.pb-add-section-handle > i {\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: 0;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}';
|
|
14338
14375
|
const _hoisted_1$2 = ["height", "width"];
|
|
14339
14376
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
14340
14377
|
__name: "PbPageFrame",
|
|
@@ -7,6 +7,8 @@ export declare const paddingGroup: () => PartPropertyGroup;
|
|
|
7
7
|
export declare const commonGroup: () => PartPropertyGroup;
|
|
8
8
|
export declare const layoutGroup: () => PartPropertyGroup;
|
|
9
9
|
export declare const alignGroup: () => PartPropertyGroup;
|
|
10
|
+
export declare const alignItemsGroup: () => PartPropertyGroup;
|
|
11
|
+
export declare const alignSelfGroup: () => PartPropertyGroup;
|
|
10
12
|
export declare const backgroundGroup: () => PartPropertyGroup;
|
|
11
13
|
export declare const borderGroup: () => PartPropertyGroup;
|
|
12
14
|
export declare const defaultPropertyGroups: () => PartPropertyGroup[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, t, v, x, y, z, A, C } from "./index-
|
|
1
|
+
import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, t, v, x, y, z, A, C } from "./index-BaB2TtF-.js";
|
|
2
2
|
export {
|
|
3
3
|
B as BLOCK_TYPE,
|
|
4
4
|
b as Block,
|
|
@@ -6684,80 +6684,87 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
6684
6684
|
return ((_a = this.properties) == null ? void 0 : _a.classNames) || "";
|
|
6685
6685
|
}
|
|
6686
6686
|
getAlignStyleValue(align) {
|
|
6687
|
-
|
|
6688
|
-
|
|
6689
|
-
|
|
6687
|
+
switch (align) {
|
|
6688
|
+
case "start":
|
|
6689
|
+
return "flex-start";
|
|
6690
|
+
case "end":
|
|
6691
|
+
return "flex-end";
|
|
6692
|
+
case "center":
|
|
6693
|
+
return "center";
|
|
6694
|
+
case "between":
|
|
6695
|
+
return "space-between";
|
|
6696
|
+
default:
|
|
6697
|
+
return;
|
|
6698
|
+
}
|
|
6690
6699
|
}
|
|
6691
6700
|
getStyles(isMobilePage) {
|
|
6692
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
|
|
6701
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q;
|
|
6693
6702
|
const style = {};
|
|
6694
|
-
|
|
6695
|
-
|
|
6696
|
-
style.alignSelf = this.getAlignStyleValue(align);
|
|
6697
|
-
} else if (this.isPage()) {
|
|
6698
|
-
style.display = "flex";
|
|
6699
|
-
style.flexDirection = "column";
|
|
6700
|
-
style.alignItems = this.getAlignStyleValue(align);
|
|
6703
|
+
if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
|
|
6704
|
+
style.flexDirection = "row";
|
|
6701
6705
|
} else {
|
|
6702
|
-
|
|
6703
|
-
|
|
6704
|
-
|
|
6705
|
-
style.flexDirection = "row";
|
|
6706
|
-
style.justifyContent = this.getAlignStyleValue(align);
|
|
6707
|
-
} else if (direction === "vertical") {
|
|
6708
|
-
style.display = "flex";
|
|
6709
|
-
style.flexDirection = "column";
|
|
6710
|
-
style.alignItems = this.getAlignStyleValue(align);
|
|
6711
|
-
}
|
|
6712
|
-
}
|
|
6713
|
-
if (((_d = this.properties) == null ? void 0 : _d.wrap) === "wrap") {
|
|
6706
|
+
style.flexDirection = "column";
|
|
6707
|
+
}
|
|
6708
|
+
if (((_b = this.properties) == null ? void 0 : _b.wrap) === "wrap") {
|
|
6714
6709
|
style.flexWrap = "wrap";
|
|
6715
6710
|
}
|
|
6716
|
-
|
|
6717
|
-
|
|
6718
|
-
|
|
6719
|
-
if (
|
|
6720
|
-
|
|
6721
|
-
if (
|
|
6722
|
-
|
|
6723
|
-
|
|
6724
|
-
|
|
6725
|
-
|
|
6726
|
-
|
|
6727
|
-
|
|
6728
|
-
if ((
|
|
6729
|
-
if ((
|
|
6730
|
-
if ((
|
|
6731
|
-
if ((
|
|
6732
|
-
if ((
|
|
6733
|
-
if ((
|
|
6734
|
-
if ((
|
|
6735
|
-
if ((
|
|
6736
|
-
if ((
|
|
6737
|
-
if ((
|
|
6738
|
-
if ((
|
|
6739
|
-
if ((
|
|
6740
|
-
if ((
|
|
6741
|
-
if ((
|
|
6742
|
-
if ((
|
|
6743
|
-
if ((
|
|
6744
|
-
if ((
|
|
6745
|
-
if ((
|
|
6746
|
-
if ((
|
|
6711
|
+
const alignItems = this.getAlignStyleValue((_c = this.properties) == null ? void 0 : _c.alignItems);
|
|
6712
|
+
const justifyContent = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.justifyContent);
|
|
6713
|
+
const alignSelf = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.alignSelf);
|
|
6714
|
+
if (this.isWidget()) {
|
|
6715
|
+
if (alignSelf) style.alignSelf = alignSelf;
|
|
6716
|
+
} else if (this.isPage()) {
|
|
6717
|
+
if (alignItems) style.alignItems = alignItems;
|
|
6718
|
+
} else {
|
|
6719
|
+
if (alignItems) style.alignItems = alignItems;
|
|
6720
|
+
if (justifyContent) style.justifyContent = justifyContent;
|
|
6721
|
+
if (alignSelf) style.alignSelf = alignSelf;
|
|
6722
|
+
}
|
|
6723
|
+
if ((_f = this.properties) == null ? void 0 : _f.margin) style.margin = this.properties.margin;
|
|
6724
|
+
if ((_g = this.properties) == null ? void 0 : _g.marginLeft) style.marginLeft = this.properties.marginLeft;
|
|
6725
|
+
if ((_h = this.properties) == null ? void 0 : _h.marginRight) style.marginRight = this.properties.marginRight;
|
|
6726
|
+
if ((_i = this.properties) == null ? void 0 : _i.marginTop) style.marginTop = this.properties.marginTop;
|
|
6727
|
+
if ((_j = this.properties) == null ? void 0 : _j.marginBottom) style.marginBottom = this.properties.marginBottom;
|
|
6728
|
+
if ((_k = this.properties) == null ? void 0 : _k.padding) style.padding = this.properties.padding;
|
|
6729
|
+
if ((_l = this.properties) == null ? void 0 : _l.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
|
|
6730
|
+
if ((_m = this.properties) == null ? void 0 : _m.paddingRight) style.paddingRight = this.properties.paddingRight;
|
|
6731
|
+
if ((_n = this.properties) == null ? void 0 : _n.paddingTop) style.paddingTop = this.properties.paddingTop;
|
|
6732
|
+
if ((_o = this.properties) == null ? void 0 : _o.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
|
|
6733
|
+
if ((_p = this.properties) == null ? void 0 : _p.left) style.left = this.properties.left;
|
|
6734
|
+
if ((_q = this.properties) == null ? void 0 : _q.right) style.right = this.properties.right;
|
|
6735
|
+
if ((_r = this.properties) == null ? void 0 : _r.top) style.top = this.properties.top;
|
|
6736
|
+
if ((_s = this.properties) == null ? void 0 : _s.bottom) style.bottom = this.properties.bottom;
|
|
6737
|
+
if ((_t = this.properties) == null ? void 0 : _t.width) style.width = this.properties.width;
|
|
6738
|
+
if ((_u = this.properties) == null ? void 0 : _u.height) style.height = this.properties.height;
|
|
6739
|
+
if ((_v = this.properties) == null ? void 0 : _v.maxWidth) style.maxWidth = this.properties.maxWidth;
|
|
6740
|
+
if ((_w = this.properties) == null ? void 0 : _w.maxHeight) style.maxHeight = this.properties.maxHeight;
|
|
6741
|
+
if ((_x = this.properties) == null ? void 0 : _x.minWidth) style.minWidth = this.properties.minWidth;
|
|
6742
|
+
if ((_y = this.properties) == null ? void 0 : _y.minHeight) style.minHeight = this.properties.minHeight;
|
|
6743
|
+
if ((_z = this.properties) == null ? void 0 : _z.textAlign) style.textAlign = this.properties.textAlign;
|
|
6744
|
+
if ((_A = this.properties) == null ? void 0 : _A.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
|
|
6745
|
+
if ((_B = this.properties) == null ? void 0 : _B.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
|
|
6746
|
+
if ((_C = this.properties) == null ? void 0 : _C.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
|
|
6747
|
+
if ((_D = this.properties) == null ? void 0 : _D.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
|
|
6748
|
+
if ((_E = this.properties) == null ? void 0 : _E.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
|
|
6749
|
+
if ((_F = this.properties) == null ? void 0 : _F.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
|
|
6750
|
+
if ((_G = this.properties) == null ? void 0 : _G.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
|
|
6751
|
+
if ((_H = this.properties) == null ? void 0 : _H.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
|
|
6752
|
+
if ((_I = this.properties) == null ? void 0 : _I.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
|
|
6753
|
+
if (((_J = this.properties) == null ? void 0 : _J.borderColor) && style.borderLeftWidth) {
|
|
6747
6754
|
style.borderLeftStyle = "solid";
|
|
6748
|
-
style.borderLeftColor = (
|
|
6755
|
+
style.borderLeftColor = (_K = this.properties) == null ? void 0 : _K.borderColor;
|
|
6749
6756
|
}
|
|
6750
|
-
if (((
|
|
6757
|
+
if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderRightWidth) {
|
|
6751
6758
|
style.borderRightStyle = "solid";
|
|
6752
|
-
style.borderRightColor = (
|
|
6759
|
+
style.borderRightColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
|
|
6753
6760
|
}
|
|
6754
|
-
if (((
|
|
6761
|
+
if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderTopWidth) {
|
|
6755
6762
|
style.borderTopStyle = "solid";
|
|
6756
|
-
style.borderTopColor = (
|
|
6763
|
+
style.borderTopColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
|
|
6757
6764
|
}
|
|
6758
|
-
if (((
|
|
6765
|
+
if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderBottomWidth) {
|
|
6759
6766
|
style.borderBottomStyle = "solid";
|
|
6760
|
-
style.borderBottomColor = (
|
|
6767
|
+
style.borderBottomColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
|
|
6761
6768
|
}
|
|
6762
6769
|
return style;
|
|
6763
6770
|
}
|
|
@@ -8370,11 +8377,7 @@ ${_html.style}
|
|
|
8370
8377
|
style.height = height || "";
|
|
8371
8378
|
};
|
|
8372
8379
|
const getLayoutDirection = (isMobilePage, properties) => {
|
|
8373
|
-
|
|
8374
|
-
return properties && properties.directionSm || "vertical";
|
|
8375
|
-
} else {
|
|
8376
|
-
return properties && properties.directionLg || "horizontal";
|
|
8377
|
-
}
|
|
8380
|
+
return properties && properties.direction || (isMobilePage ? "vertical" : "horizontal");
|
|
8378
8381
|
};
|
|
8379
8382
|
const _export_sfc = (sfc, props) => {
|
|
8380
8383
|
const target = sfc.__vccOpts || sfc;
|
|
@@ -11942,14 +11945,8 @@ ${_html.style}
|
|
|
11942
11945
|
caption: "Layout",
|
|
11943
11946
|
properties: [
|
|
11944
11947
|
{
|
|
11945
|
-
propertyName: "
|
|
11946
|
-
caption: "
|
|
11947
|
-
propertyType: "select",
|
|
11948
|
-
params: "vertical,horizontal"
|
|
11949
|
-
},
|
|
11950
|
-
{
|
|
11951
|
-
propertyName: "directionLg",
|
|
11952
|
-
caption: "Direction for PC (> 768px)",
|
|
11948
|
+
propertyName: "direction",
|
|
11949
|
+
caption: "Layout",
|
|
11953
11950
|
propertyType: "select",
|
|
11954
11951
|
params: "vertical,horizontal"
|
|
11955
11952
|
},
|
|
@@ -11968,10 +11965,50 @@ ${_html.style}
|
|
|
11968
11965
|
caption: "Align",
|
|
11969
11966
|
properties: [
|
|
11970
11967
|
{
|
|
11971
|
-
propertyName: "
|
|
11972
|
-
caption: "Align",
|
|
11968
|
+
propertyName: "alignItems",
|
|
11969
|
+
caption: "Align Items",
|
|
11970
|
+
propertyType: "select",
|
|
11971
|
+
params: "start,center,end"
|
|
11972
|
+
},
|
|
11973
|
+
{
|
|
11974
|
+
propertyName: "justifyContent",
|
|
11975
|
+
caption: "Justify Content",
|
|
11976
|
+
propertyType: "select",
|
|
11977
|
+
params: "start,center,end,between"
|
|
11978
|
+
},
|
|
11979
|
+
{
|
|
11980
|
+
propertyName: "alignSelf",
|
|
11981
|
+
caption: "Align Self",
|
|
11982
|
+
propertyType: "select",
|
|
11983
|
+
params: "start,center,end"
|
|
11984
|
+
}
|
|
11985
|
+
]
|
|
11986
|
+
};
|
|
11987
|
+
};
|
|
11988
|
+
const alignItemsGroup = () => {
|
|
11989
|
+
return {
|
|
11990
|
+
groupName: "align",
|
|
11991
|
+
caption: "Align",
|
|
11992
|
+
properties: [
|
|
11993
|
+
{
|
|
11994
|
+
propertyName: "alignItems",
|
|
11995
|
+
caption: "Align Items",
|
|
11973
11996
|
propertyType: "select",
|
|
11974
|
-
params: "
|
|
11997
|
+
params: "start,center,end"
|
|
11998
|
+
}
|
|
11999
|
+
]
|
|
12000
|
+
};
|
|
12001
|
+
};
|
|
12002
|
+
const alignSelfGroup = () => {
|
|
12003
|
+
return {
|
|
12004
|
+
groupName: "align",
|
|
12005
|
+
caption: "Align",
|
|
12006
|
+
properties: [
|
|
12007
|
+
{
|
|
12008
|
+
propertyName: "alignSelf",
|
|
12009
|
+
caption: "Align Self",
|
|
12010
|
+
propertyType: "select",
|
|
12011
|
+
params: ",start,center,end"
|
|
11975
12012
|
}
|
|
11976
12013
|
]
|
|
11977
12014
|
};
|
|
@@ -12053,7 +12090,7 @@ ${_html.style}
|
|
|
12053
12090
|
return [layoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
|
|
12054
12091
|
};
|
|
12055
12092
|
const defaultWidgetPropertyGroups = () => {
|
|
12056
|
-
return [
|
|
12093
|
+
return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
|
|
12057
12094
|
};
|
|
12058
12095
|
const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
|
|
12059
12096
|
__name: "PbContainerWidget",
|
|
@@ -12104,13 +12141,13 @@ ${_html.style}
|
|
|
12104
12141
|
}
|
|
12105
12142
|
]
|
|
12106
12143
|
},
|
|
12107
|
-
|
|
12144
|
+
alignItemsGroup(),
|
|
12108
12145
|
paddingGroup(),
|
|
12109
12146
|
backgroundGroup(),
|
|
12110
12147
|
commonGroup()
|
|
12111
12148
|
],
|
|
12112
12149
|
initialProperties: {
|
|
12113
|
-
|
|
12150
|
+
alignItems: "center"
|
|
12114
12151
|
},
|
|
12115
12152
|
allowsChild: () => true,
|
|
12116
12153
|
creator: () => _sfc_main$z
|
|
@@ -12127,9 +12164,9 @@ ${_html.style}
|
|
|
12127
12164
|
...defaultPropertyGroups()
|
|
12128
12165
|
],
|
|
12129
12166
|
initialProperties: {
|
|
12130
|
-
|
|
12131
|
-
|
|
12132
|
-
|
|
12167
|
+
direction: "horizontal",
|
|
12168
|
+
alignItems: "start",
|
|
12169
|
+
justifyContent: "start"
|
|
12133
12170
|
},
|
|
12134
12171
|
allowsChild: () => true,
|
|
12135
12172
|
creator: () => _sfc_main$z
|
|
@@ -12146,9 +12183,9 @@ ${_html.style}
|
|
|
12146
12183
|
...defaultPropertyGroups()
|
|
12147
12184
|
],
|
|
12148
12185
|
initialProperties: {
|
|
12149
|
-
|
|
12150
|
-
|
|
12151
|
-
|
|
12186
|
+
direction: "vertical",
|
|
12187
|
+
alignItems: "start",
|
|
12188
|
+
justifyContent: "start"
|
|
12152
12189
|
},
|
|
12153
12190
|
allowsChild: () => true,
|
|
12154
12191
|
creator: () => _sfc_main$B
|
|
@@ -14335,7 +14372,7 @@ ${_html.style}
|
|
|
14335
14372
|
};
|
|
14336
14373
|
}
|
|
14337
14374
|
});
|
|
14338
|
-
const canvasStyle = '.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\n}\n\n.pb-page {\n
|
|
14375
|
+
const canvasStyle = '.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\n}\n\n.pb-page {\n display: flex;\n flex-direction: column;\n margin: 0 auto;\n width: 100%;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.pb-page .pb-page-content.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-page * {\n box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\n}\n\n.pb-add-widget-button button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 8px;\n background: none;\n border: none;\n cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n\n.pb-section {\n display: flex;\n position: relative;\n width: 100%;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n outline: 1px dashed #ccc;\n background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n outline: none;\n}\n\n.pb-block {\n display: flex;\n min-width: 1px;\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget {\n position: relative;\n outline: 1px dashed #ccc;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n pointer-events: auto !important;\n}\n\n.pb-widget * {\n pointer-events: none;\n}\n\n.pb-widget.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-widget .pan-handle {\n position: absolute;\n left: -6px;\n top: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: move;\n pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n position: absolute;\n right: -6px;\n bottom: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: nwse-resize;\n pointer-events: auto !important;\n}\n\n.pb-widget {\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-text-widget .text {\n color: #333;\n}\n\n.pb-text-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-image-widget {\n width: 100%;\n}\n\n.pb-image-widget .image {\n width: 100%;\n}\n\n.pb-image-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-youtube-widget {\n width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n width: 100%;\n height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-container-widget {\n width: 100%;\n}\n\n.pb-container-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-product-list-widget {\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n width: 95%;\n margin: 0 auto;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n font-size: 40px;\n color: #999;\n line-height: 200px;\n vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n\n.pb-login-widget {\n height: 200px;\n text-align: center;\n}\n\n.pb-login-widget h3 {\n padding: 0;\n margin: 0;\n font-size: 32px;\n font-weight: bold;\n color: #ccc;\n line-height: 200px;\n vertical-align: middle;\n}\n\n.font-icon {\n font-family: Material Symbols Outlined, monospace;\n font-size: 1rem;\n max-width: 1em;\n}\n\nhtml, body {\n font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n font-size: 12px;\n}\n\nbody {\n margin: 0;\n padding: 0;\n background-color: #aaa;\n overflow: hidden;\n}\n\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\n}\n\n.pb-add-section-handle {\n position: relative;\n text-align: center;\n cursor: pointer;\n z-index: 5;\n height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n left: 50%;\n bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n opacity: 1;\n}\n\n.pb-add-section-handle > i {\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: 0;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}';
|
|
14339
14376
|
const _hoisted_1$g = ["height", "width"];
|
|
14340
14377
|
const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
|
|
14341
14378
|
__name: "PbPageFrame",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@g1cloud/page-builder-editor",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.0-alpha.
|
|
4
|
+
"version": "1.0.0-alpha.34",
|
|
5
5
|
"engins": {
|
|
6
6
|
"node": ">= 20.0.0"
|
|
7
7
|
},
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"vue-router": "^4.4.3",
|
|
31
31
|
"vue3-click-away": "^1.2.4",
|
|
32
32
|
"yjs": "^13.6.14",
|
|
33
|
-
"@g1cloud/page-builder-viewer": "1.0.0-alpha.
|
|
33
|
+
"@g1cloud/page-builder-viewer": "1.0.0-alpha.34"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/node": "^20.12.7",
|