@g1cloud/page-builder-editor 1.0.0-alpha.35 → 1.0.0-alpha.37

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.
@@ -6,13 +6,18 @@
6
6
  .pb-page {
7
7
  display: flex;
8
8
  flex-direction: column;
9
- margin: 0 auto;
9
+ align-items: center;
10
10
  width: 100%;
11
+ padding-bottom: 100px;
11
12
  background-position: 50% 50%;
12
13
  background-repeat: no-repeat;
13
14
  background-size: cover;
14
15
 
15
16
  .pb-page-content {
17
+ display: flex;
18
+ flex-direction: column;
19
+ width: 100%;
20
+
16
21
  &.selected::before {
17
22
  content: "";
18
23
  position: absolute;
package/css/page.scss CHANGED
@@ -10,11 +10,6 @@
10
10
  max-width: 1em;
11
11
  }
12
12
 
13
- html, body {
14
- font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;
15
- font-size: 12px;
16
- }
17
-
18
13
  body {
19
14
  margin: 0;
20
15
  padding: 0;
@@ -54,7 +49,6 @@ body {
54
49
  }
55
50
 
56
51
  &.bottom {
57
- left: 50%;
58
52
  bottom: -32px;
59
53
  }
60
54
 
@@ -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-EsPg-Em5.js";
3
+ import { P as PbColorPicker } from "./index-D1WOGghM.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-EsPg-Em5.js";
3
+ import { u as usePageBuilderEditor } from "./index-D1WOGghM.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-EsPg-Em5.js";
2
+ import { u as usePageBuilderEditor } from "./index-D1WOGghM.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" };
@@ -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-EsPg-Em5.js";
3
+ import { u as usePageBuilderEditor } from "./index-D1WOGghM.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-EsPg-Em5.js";
3
+ import { u as usePageBuilderEditor } from "./index-D1WOGghM.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-EsPg-Em5.js";
3
+ import { s as selectYoutubeVideo } from "./index-D1WOGghM.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-EsPg-Em5.js";
3
+ import { w as widgetPartDefinitions } from "./index-D1WOGghM.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"];
@@ -6715,19 +6715,23 @@ class Part {
6715
6715
  }
6716
6716
  }
6717
6717
  getStyles(isMobilePage) {
6718
- 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;
6718
+ 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, _R;
6719
6719
  const style = {};
6720
6720
  if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
6721
6721
  style.flexDirection = "row";
6722
- } else {
6722
+ } else if (((_b = this.properties) == null ? void 0 : _b.direction) === "vertical") {
6723
+ style.flexDirection = "column";
6724
+ } else if (this.isSection()) {
6725
+ style.flexDirection = "row";
6726
+ } else if (this.isBlock()) {
6723
6727
  style.flexDirection = "column";
6724
6728
  }
6725
- if (((_b = this.properties) == null ? void 0 : _b.wrap) === "wrap") {
6729
+ if (((_c = this.properties) == null ? void 0 : _c.wrap) === "wrap") {
6726
6730
  style.flexWrap = "wrap";
6727
6731
  }
6728
- const alignItems = this.getAlignStyleValue((_c = this.properties) == null ? void 0 : _c.alignItems);
6729
- const justifyContent = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.justifyContent);
6730
- const alignSelf = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.alignSelf);
6732
+ const alignItems = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.alignItems);
6733
+ const justifyContent = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.justifyContent);
6734
+ const alignSelf = this.getAlignStyleValue((_f = this.properties) == null ? void 0 : _f.alignSelf);
6731
6735
  if (this.isWidget()) {
6732
6736
  if (alignSelf) style.alignSelf = alignSelf;
6733
6737
  } else if (this.isPage()) {
@@ -6737,51 +6741,51 @@ class Part {
6737
6741
  if (justifyContent) style.justifyContent = justifyContent;
6738
6742
  if (alignSelf) style.alignSelf = alignSelf;
6739
6743
  }
6740
- if ((_f = this.properties) == null ? void 0 : _f.margin) style.margin = this.properties.margin;
6741
- if ((_g = this.properties) == null ? void 0 : _g.marginLeft) style.marginLeft = this.properties.marginLeft;
6742
- if ((_h = this.properties) == null ? void 0 : _h.marginRight) style.marginRight = this.properties.marginRight;
6743
- if ((_i = this.properties) == null ? void 0 : _i.marginTop) style.marginTop = this.properties.marginTop;
6744
- if ((_j = this.properties) == null ? void 0 : _j.marginBottom) style.marginBottom = this.properties.marginBottom;
6745
- if ((_k = this.properties) == null ? void 0 : _k.padding) style.padding = this.properties.padding;
6746
- if ((_l = this.properties) == null ? void 0 : _l.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
6747
- if ((_m = this.properties) == null ? void 0 : _m.paddingRight) style.paddingRight = this.properties.paddingRight;
6748
- if ((_n = this.properties) == null ? void 0 : _n.paddingTop) style.paddingTop = this.properties.paddingTop;
6749
- if ((_o = this.properties) == null ? void 0 : _o.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
6750
- if ((_p = this.properties) == null ? void 0 : _p.left) style.left = this.properties.left;
6751
- if ((_q = this.properties) == null ? void 0 : _q.right) style.right = this.properties.right;
6752
- if ((_r = this.properties) == null ? void 0 : _r.top) style.top = this.properties.top;
6753
- if ((_s = this.properties) == null ? void 0 : _s.bottom) style.bottom = this.properties.bottom;
6754
- if ((_t = this.properties) == null ? void 0 : _t.width) style.width = this.properties.width;
6755
- if ((_u = this.properties) == null ? void 0 : _u.height) style.height = this.properties.height;
6756
- if ((_v = this.properties) == null ? void 0 : _v.maxWidth) style.maxWidth = this.properties.maxWidth;
6757
- if ((_w = this.properties) == null ? void 0 : _w.maxHeight) style.maxHeight = this.properties.maxHeight;
6758
- if ((_x = this.properties) == null ? void 0 : _x.minWidth) style.minWidth = this.properties.minWidth;
6759
- if ((_y = this.properties) == null ? void 0 : _y.minHeight) style.minHeight = this.properties.minHeight;
6760
- if ((_z = this.properties) == null ? void 0 : _z.textAlign) style.textAlign = this.properties.textAlign;
6761
- if ((_A = this.properties) == null ? void 0 : _A.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
6762
- if ((_B = this.properties) == null ? void 0 : _B.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
6763
- if ((_C = this.properties) == null ? void 0 : _C.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
6764
- if ((_D = this.properties) == null ? void 0 : _D.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
6765
- if ((_E = this.properties) == null ? void 0 : _E.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
6766
- if ((_F = this.properties) == null ? void 0 : _F.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
6767
- if ((_G = this.properties) == null ? void 0 : _G.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
6768
- if ((_H = this.properties) == null ? void 0 : _H.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
6769
- if ((_I = this.properties) == null ? void 0 : _I.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
6770
- if (((_J = this.properties) == null ? void 0 : _J.borderColor) && style.borderLeftWidth) {
6744
+ if ((_g = this.properties) == null ? void 0 : _g.margin) style.margin = this.properties.margin;
6745
+ if ((_h = this.properties) == null ? void 0 : _h.marginLeft) style.marginLeft = this.properties.marginLeft;
6746
+ if ((_i = this.properties) == null ? void 0 : _i.marginRight) style.marginRight = this.properties.marginRight;
6747
+ if ((_j = this.properties) == null ? void 0 : _j.marginTop) style.marginTop = this.properties.marginTop;
6748
+ if ((_k = this.properties) == null ? void 0 : _k.marginBottom) style.marginBottom = this.properties.marginBottom;
6749
+ if ((_l = this.properties) == null ? void 0 : _l.padding) style.padding = this.properties.padding;
6750
+ if ((_m = this.properties) == null ? void 0 : _m.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
6751
+ if ((_n = this.properties) == null ? void 0 : _n.paddingRight) style.paddingRight = this.properties.paddingRight;
6752
+ if ((_o = this.properties) == null ? void 0 : _o.paddingTop) style.paddingTop = this.properties.paddingTop;
6753
+ if ((_p = this.properties) == null ? void 0 : _p.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
6754
+ if ((_q = this.properties) == null ? void 0 : _q.left) style.left = this.properties.left;
6755
+ if ((_r = this.properties) == null ? void 0 : _r.right) style.right = this.properties.right;
6756
+ if ((_s = this.properties) == null ? void 0 : _s.top) style.top = this.properties.top;
6757
+ if ((_t = this.properties) == null ? void 0 : _t.bottom) style.bottom = this.properties.bottom;
6758
+ if ((_u = this.properties) == null ? void 0 : _u.width) style.width = this.properties.width;
6759
+ if ((_v = this.properties) == null ? void 0 : _v.height) style.height = this.properties.height;
6760
+ if ((_w = this.properties) == null ? void 0 : _w.maxWidth) style.maxWidth = this.properties.maxWidth;
6761
+ if ((_x = this.properties) == null ? void 0 : _x.maxHeight) style.maxHeight = this.properties.maxHeight;
6762
+ if ((_y = this.properties) == null ? void 0 : _y.minWidth) style.minWidth = this.properties.minWidth;
6763
+ if ((_z = this.properties) == null ? void 0 : _z.minHeight) style.minHeight = this.properties.minHeight;
6764
+ if ((_A = this.properties) == null ? void 0 : _A.textAlign) style.textAlign = this.properties.textAlign;
6765
+ if ((_B = this.properties) == null ? void 0 : _B.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
6766
+ if ((_C = this.properties) == null ? void 0 : _C.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
6767
+ if ((_D = this.properties) == null ? void 0 : _D.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
6768
+ if ((_E = this.properties) == null ? void 0 : _E.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
6769
+ if ((_F = this.properties) == null ? void 0 : _F.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
6770
+ if ((_G = this.properties) == null ? void 0 : _G.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
6771
+ if ((_H = this.properties) == null ? void 0 : _H.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
6772
+ if ((_I = this.properties) == null ? void 0 : _I.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
6773
+ if ((_J = this.properties) == null ? void 0 : _J.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
6774
+ if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderLeftWidth) {
6771
6775
  style.borderLeftStyle = "solid";
6772
- style.borderLeftColor = (_K = this.properties) == null ? void 0 : _K.borderColor;
6776
+ style.borderLeftColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
6773
6777
  }
6774
- if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderRightWidth) {
6778
+ if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderRightWidth) {
6775
6779
  style.borderRightStyle = "solid";
6776
- style.borderRightColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
6780
+ style.borderRightColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
6777
6781
  }
6778
- if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderTopWidth) {
6782
+ if (((_O = this.properties) == null ? void 0 : _O.borderColor) && style.borderTopWidth) {
6779
6783
  style.borderTopStyle = "solid";
6780
- style.borderTopColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
6784
+ style.borderTopColor = (_P = this.properties) == null ? void 0 : _P.borderColor;
6781
6785
  }
6782
- if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderBottomWidth) {
6786
+ if (((_Q = this.properties) == null ? void 0 : _Q.borderColor) && style.borderBottomWidth) {
6783
6787
  style.borderBottomStyle = "solid";
6784
- style.borderBottomColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
6788
+ style.borderBottomColor = (_R = this.properties) == null ? void 0 : _R.borderColor;
6785
6789
  }
6786
6790
  return style;
6787
6791
  }
@@ -7454,17 +7458,13 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
7454
7458
  "data-part-id": _ctx.part.partId,
7455
7459
  style: normalizeStyle(style.value)
7456
7460
  }, [
7457
- createElementVNode("div", {
7458
- class: normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
7459
- }, [
7460
- (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (section) => {
7461
- return openBlock(), createBlock$1(_sfc_main$9$1, {
7462
- key: section.partId,
7463
- "is-mobile-page": _ctx.isMobilePage,
7464
- part: section
7465
- }, null, 8, ["is-mobile-page", "part"]);
7466
- }), 128))
7467
- ], 2)
7461
+ (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (section) => {
7462
+ return openBlock(), createBlock$1(_sfc_main$9$1, {
7463
+ key: section.partId,
7464
+ "is-mobile-page": _ctx.isMobilePage,
7465
+ part: section
7466
+ }, null, 8, ["is-mobile-page", "part"]);
7467
+ }), 128))
7468
7468
  ], 14, _hoisted_1$2$1)
7469
7469
  ], 64);
7470
7470
  };
@@ -8145,15 +8145,15 @@ class PartManager {
8145
8145
  const defaultPartPropertyEditors = () => {
8146
8146
  return {
8147
8147
  "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
8148
- "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-bXscT9jE.js")),
8148
+ "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DYFsKLw3.js")),
8149
8149
  "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-TTgo0zbQ.js")),
8150
8150
  "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-C7-iSAtn.js")),
8151
- "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BqEprlZ-.js")),
8151
+ "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-D06TJqWF.js")),
8152
8152
  "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
8153
- "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-Cb7qpN96.js")),
8154
- "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BG7rGnU3.js")),
8155
- "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DRmHv8Gm.js")),
8156
- "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-Bz_UU0kC.js"))
8153
+ "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-Dk0MS-6z.js")),
8154
+ "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-zMooa_HL.js")),
8155
+ "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DASXlPF1.js")),
8156
+ "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-CT1pn88F.js"))
8157
8157
  };
8158
8158
  };
8159
8159
  const getPropertyValueOfParts = (parts, propertyName) => {
@@ -12487,7 +12487,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
12487
12487
  let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
12488
12488
  const openWidgetAddModal = (modal, args, callback) => {
12489
12489
  modal.openModal({
12490
- component: defineAsyncComponent(() => import("./PbWidgetAddModal-Cfhjs6Z4.js")),
12490
+ component: defineAsyncComponent(() => import("./PbWidgetAddModal-CuuohgRc.js")),
12491
12491
  style: {
12492
12492
  width: "80%",
12493
12493
  height: "80%",
@@ -13245,7 +13245,7 @@ const enableAddBlockMenu = (pageBuilder, direction, commandId, caption) => {
13245
13245
  var _a, _b;
13246
13246
  const selected = pageBuilder.context.getSelectedParts()[0];
13247
13247
  const block = pageBuilder.partManager.findNearestBlock(selected);
13248
- if (block && ((_b = (_a = block.parent) == null ? void 0 : _a.properties) == null ? void 0 : _b.direction) === direction) {
13248
+ if (block && (((_b = (_a = block.parent) == null ? void 0 : _a.properties) == null ? void 0 : _b.direction) || "vertical") === direction) {
13249
13249
  return menuItemForCommand(pageBuilder, commandId, caption);
13250
13250
  }
13251
13251
  };
@@ -13253,7 +13253,7 @@ const enableAddWidgetMenu = (pageBuilder, direction, commandId, caption) => {
13253
13253
  var _a, _b, _c;
13254
13254
  const selected = pageBuilder.context.getSelectedParts()[0];
13255
13255
  if (selected) {
13256
- if (((_a = selected.parent) == null ? void 0 : _a.isBlock()) && ((_c = (_b = selected.parent) == null ? void 0 : _b.properties) == null ? void 0 : _c.direction) === direction || !selected.isNestedWidget() && !direction) {
13256
+ if (((_a = selected.parent) == null ? void 0 : _a.isBlock()) && (((_c = (_b = selected.parent) == null ? void 0 : _b.properties) == null ? void 0 : _c.direction) || "horizontal") === direction || !selected.isNestedWidget() && !direction) {
13257
13257
  return menuItemForCommand(pageBuilder, commandId, caption);
13258
13258
  }
13259
13259
  }
@@ -14440,13 +14440,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
14440
14440
  minHeight: ((_b = (_a = props.part) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
14441
14441
  };
14442
14442
  });
14443
- const properties = computed(() => {
14443
+ const contentStyle = computed(() => {
14444
14444
  var _a, _b;
14445
14445
  return {
14446
- style: {
14447
- ...(_a = props.part) == null ? void 0 : _a.getStyles(props.isMobilePage),
14448
- ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
14449
- }
14446
+ ...(_a = props.part) == null ? void 0 : _a.getStyles(props.isMobilePage),
14447
+ ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
14450
14448
  };
14451
14449
  });
14452
14450
  const selected = computed(() => !!props.part && editor.context.isSelected(props.part));
@@ -14487,9 +14485,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
14487
14485
  onContextmenu: showContextMenu,
14488
14486
  onMousedown: withModifiers(handleClick, ["stop"])
14489
14487
  }, [
14490
- createElementVNode("div", mergeProps({
14491
- class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
14492
- }, properties.value), [
14488
+ createElementVNode("div", {
14489
+ class: normalizeClass([selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]),
14490
+ style: normalizeStyle(contentStyle.value)
14491
+ }, [
14493
14492
  (openBlock(true), createElementBlock(Fragment, null, renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
14494
14493
  return openBlock(), createBlock$1(_sfc_main$l, {
14495
14494
  key: section.partId,
@@ -14497,20 +14496,19 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
14497
14496
  part: section
14498
14497
  }, null, 8, ["is-mobile-page", "part"]);
14499
14498
  }), 128))
14500
- ], 16),
14499
+ ], 6),
14501
14500
  createElementVNode("div", {
14502
14501
  class: "pb-add-section-handle bottom",
14503
14502
  onClick: addSection
14504
14503
  }, _cache[0] || (_cache[0] = [
14505
14504
  createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1)
14506
14505
  ]))
14507
- ], 46, _hoisted_1$3),
14508
- _cache[1] || (_cache[1] = createElementVNode("div", { style: { "height": "100px" } }, null, -1))
14506
+ ], 46, _hoisted_1$3)
14509
14507
  ], 64);
14510
14508
  };
14511
14509
  }
14512
14510
  });
14513
- 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}';
14511
+ 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 align-items: center;\n width: 100%;\n padding-bottom: 100px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.pb-page .pb-page-content {\n display: flex;\n flex-direction: column;\n width: 100%;\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\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 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}';
14514
14512
  const _hoisted_1$2 = ["width"];
14515
14513
  const _sfc_main$2 = /* @__PURE__ */ defineComponent({
14516
14514
  __name: "PbPageFrame",
@@ -14535,24 +14533,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
14535
14533
  const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
14536
14534
  head.innerHTML = `
14537
14535
  <meta charset="UTF-8"/>
14538
- <link href="https://fonts.googleapis.com" rel="preconnect">
14539
- <link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
14540
- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500&display=swap" rel="stylesheet">
14541
- <link
14542
- href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&family=Noto+Sans:wght@400;500&display=swap"
14543
- rel="stylesheet">
14544
- <link
14545
- href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Sans+KR:wght@400;500&family=Noto+Sans:wght@400;500&display=swap"
14546
- rel="stylesheet">
14547
- <link
14548
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
14549
- rel="stylesheet"/>
14550
- <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" />
14551
-
14552
- <link href="https://bluesea5.g1project.net/assets/index-DjQFWKLW.css" rel="stylesheet" />
14553
-
14554
14536
  ${externalCss}
14555
-
14556
14537
  <style>${canvasStyle}</style>
14557
14538
  `;
14558
14539
  const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
@@ -14585,9 +14566,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
14585
14566
  if (!iframeRef.value || !iframeRef.value.contentDocument) return;
14586
14567
  const iframeBody = iframeRef.value.contentDocument.body;
14587
14568
  if (iframeBody) {
14588
- iframeRef.value.style.height = "1px";
14569
+ void iframeBody.offsetHeight;
14589
14570
  const newHeight = iframeBody.scrollHeight;
14590
- iframeRef.value.style.height = `${newHeight}px`;
14571
+ if (iframeRef.value.style.height !== `${newHeight}px`) {
14572
+ iframeRef.value.style.height = `${newHeight}px`;
14573
+ }
14591
14574
  }
14592
14575
  });
14593
14576
  };
@@ -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-EsPg-Em5.js";
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-D1WOGghM.js";
2
2
  export {
3
3
  B as BLOCK_TYPE,
4
4
  b as Block,
@@ -6716,19 +6716,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
6716
6716
  }
6717
6717
  }
6718
6718
  getStyles(isMobilePage) {
6719
- 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;
6719
+ 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, _R;
6720
6720
  const style = {};
6721
6721
  if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
6722
6722
  style.flexDirection = "row";
6723
- } else {
6723
+ } else if (((_b = this.properties) == null ? void 0 : _b.direction) === "vertical") {
6724
+ style.flexDirection = "column";
6725
+ } else if (this.isSection()) {
6726
+ style.flexDirection = "row";
6727
+ } else if (this.isBlock()) {
6724
6728
  style.flexDirection = "column";
6725
6729
  }
6726
- if (((_b = this.properties) == null ? void 0 : _b.wrap) === "wrap") {
6730
+ if (((_c = this.properties) == null ? void 0 : _c.wrap) === "wrap") {
6727
6731
  style.flexWrap = "wrap";
6728
6732
  }
6729
- const alignItems = this.getAlignStyleValue((_c = this.properties) == null ? void 0 : _c.alignItems);
6730
- const justifyContent = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.justifyContent);
6731
- const alignSelf = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.alignSelf);
6733
+ const alignItems = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.alignItems);
6734
+ const justifyContent = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.justifyContent);
6735
+ const alignSelf = this.getAlignStyleValue((_f = this.properties) == null ? void 0 : _f.alignSelf);
6732
6736
  if (this.isWidget()) {
6733
6737
  if (alignSelf) style.alignSelf = alignSelf;
6734
6738
  } else if (this.isPage()) {
@@ -6738,51 +6742,51 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
6738
6742
  if (justifyContent) style.justifyContent = justifyContent;
6739
6743
  if (alignSelf) style.alignSelf = alignSelf;
6740
6744
  }
6741
- if ((_f = this.properties) == null ? void 0 : _f.margin) style.margin = this.properties.margin;
6742
- if ((_g = this.properties) == null ? void 0 : _g.marginLeft) style.marginLeft = this.properties.marginLeft;
6743
- if ((_h = this.properties) == null ? void 0 : _h.marginRight) style.marginRight = this.properties.marginRight;
6744
- if ((_i = this.properties) == null ? void 0 : _i.marginTop) style.marginTop = this.properties.marginTop;
6745
- if ((_j = this.properties) == null ? void 0 : _j.marginBottom) style.marginBottom = this.properties.marginBottom;
6746
- if ((_k = this.properties) == null ? void 0 : _k.padding) style.padding = this.properties.padding;
6747
- if ((_l = this.properties) == null ? void 0 : _l.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
6748
- if ((_m = this.properties) == null ? void 0 : _m.paddingRight) style.paddingRight = this.properties.paddingRight;
6749
- if ((_n = this.properties) == null ? void 0 : _n.paddingTop) style.paddingTop = this.properties.paddingTop;
6750
- if ((_o = this.properties) == null ? void 0 : _o.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
6751
- if ((_p = this.properties) == null ? void 0 : _p.left) style.left = this.properties.left;
6752
- if ((_q = this.properties) == null ? void 0 : _q.right) style.right = this.properties.right;
6753
- if ((_r = this.properties) == null ? void 0 : _r.top) style.top = this.properties.top;
6754
- if ((_s = this.properties) == null ? void 0 : _s.bottom) style.bottom = this.properties.bottom;
6755
- if ((_t = this.properties) == null ? void 0 : _t.width) style.width = this.properties.width;
6756
- if ((_u = this.properties) == null ? void 0 : _u.height) style.height = this.properties.height;
6757
- if ((_v = this.properties) == null ? void 0 : _v.maxWidth) style.maxWidth = this.properties.maxWidth;
6758
- if ((_w = this.properties) == null ? void 0 : _w.maxHeight) style.maxHeight = this.properties.maxHeight;
6759
- if ((_x = this.properties) == null ? void 0 : _x.minWidth) style.minWidth = this.properties.minWidth;
6760
- if ((_y = this.properties) == null ? void 0 : _y.minHeight) style.minHeight = this.properties.minHeight;
6761
- if ((_z = this.properties) == null ? void 0 : _z.textAlign) style.textAlign = this.properties.textAlign;
6762
- if ((_A = this.properties) == null ? void 0 : _A.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
6763
- if ((_B = this.properties) == null ? void 0 : _B.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
6764
- if ((_C = this.properties) == null ? void 0 : _C.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
6765
- if ((_D = this.properties) == null ? void 0 : _D.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
6766
- if ((_E = this.properties) == null ? void 0 : _E.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
6767
- if ((_F = this.properties) == null ? void 0 : _F.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
6768
- if ((_G = this.properties) == null ? void 0 : _G.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
6769
- if ((_H = this.properties) == null ? void 0 : _H.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
6770
- if ((_I = this.properties) == null ? void 0 : _I.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
6771
- if (((_J = this.properties) == null ? void 0 : _J.borderColor) && style.borderLeftWidth) {
6745
+ if ((_g = this.properties) == null ? void 0 : _g.margin) style.margin = this.properties.margin;
6746
+ if ((_h = this.properties) == null ? void 0 : _h.marginLeft) style.marginLeft = this.properties.marginLeft;
6747
+ if ((_i = this.properties) == null ? void 0 : _i.marginRight) style.marginRight = this.properties.marginRight;
6748
+ if ((_j = this.properties) == null ? void 0 : _j.marginTop) style.marginTop = this.properties.marginTop;
6749
+ if ((_k = this.properties) == null ? void 0 : _k.marginBottom) style.marginBottom = this.properties.marginBottom;
6750
+ if ((_l = this.properties) == null ? void 0 : _l.padding) style.padding = this.properties.padding;
6751
+ if ((_m = this.properties) == null ? void 0 : _m.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
6752
+ if ((_n = this.properties) == null ? void 0 : _n.paddingRight) style.paddingRight = this.properties.paddingRight;
6753
+ if ((_o = this.properties) == null ? void 0 : _o.paddingTop) style.paddingTop = this.properties.paddingTop;
6754
+ if ((_p = this.properties) == null ? void 0 : _p.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
6755
+ if ((_q = this.properties) == null ? void 0 : _q.left) style.left = this.properties.left;
6756
+ if ((_r = this.properties) == null ? void 0 : _r.right) style.right = this.properties.right;
6757
+ if ((_s = this.properties) == null ? void 0 : _s.top) style.top = this.properties.top;
6758
+ if ((_t = this.properties) == null ? void 0 : _t.bottom) style.bottom = this.properties.bottom;
6759
+ if ((_u = this.properties) == null ? void 0 : _u.width) style.width = this.properties.width;
6760
+ if ((_v = this.properties) == null ? void 0 : _v.height) style.height = this.properties.height;
6761
+ if ((_w = this.properties) == null ? void 0 : _w.maxWidth) style.maxWidth = this.properties.maxWidth;
6762
+ if ((_x = this.properties) == null ? void 0 : _x.maxHeight) style.maxHeight = this.properties.maxHeight;
6763
+ if ((_y = this.properties) == null ? void 0 : _y.minWidth) style.minWidth = this.properties.minWidth;
6764
+ if ((_z = this.properties) == null ? void 0 : _z.minHeight) style.minHeight = this.properties.minHeight;
6765
+ if ((_A = this.properties) == null ? void 0 : _A.textAlign) style.textAlign = this.properties.textAlign;
6766
+ if ((_B = this.properties) == null ? void 0 : _B.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
6767
+ if ((_C = this.properties) == null ? void 0 : _C.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
6768
+ if ((_D = this.properties) == null ? void 0 : _D.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
6769
+ if ((_E = this.properties) == null ? void 0 : _E.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
6770
+ if ((_F = this.properties) == null ? void 0 : _F.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
6771
+ if ((_G = this.properties) == null ? void 0 : _G.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
6772
+ if ((_H = this.properties) == null ? void 0 : _H.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
6773
+ if ((_I = this.properties) == null ? void 0 : _I.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
6774
+ if ((_J = this.properties) == null ? void 0 : _J.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
6775
+ if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderLeftWidth) {
6772
6776
  style.borderLeftStyle = "solid";
6773
- style.borderLeftColor = (_K = this.properties) == null ? void 0 : _K.borderColor;
6777
+ style.borderLeftColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
6774
6778
  }
6775
- if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderRightWidth) {
6779
+ if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderRightWidth) {
6776
6780
  style.borderRightStyle = "solid";
6777
- style.borderRightColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
6781
+ style.borderRightColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
6778
6782
  }
6779
- if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderTopWidth) {
6783
+ if (((_O = this.properties) == null ? void 0 : _O.borderColor) && style.borderTopWidth) {
6780
6784
  style.borderTopStyle = "solid";
6781
- style.borderTopColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
6785
+ style.borderTopColor = (_P = this.properties) == null ? void 0 : _P.borderColor;
6782
6786
  }
6783
- if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderBottomWidth) {
6787
+ if (((_Q = this.properties) == null ? void 0 : _Q.borderColor) && style.borderBottomWidth) {
6784
6788
  style.borderBottomStyle = "solid";
6785
- style.borderBottomColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
6789
+ style.borderBottomColor = (_R = this.properties) == null ? void 0 : _R.borderColor;
6786
6790
  }
6787
6791
  return style;
6788
6792
  }
@@ -7455,17 +7459,13 @@ ${_html.style}
7455
7459
  "data-part-id": _ctx.part.partId,
7456
7460
  style: vue.normalizeStyle(style.value)
7457
7461
  }, [
7458
- vue.createElementVNode("div", {
7459
- class: vue.normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
7460
- }, [
7461
- (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (section) => {
7462
- return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
7463
- key: section.partId,
7464
- "is-mobile-page": _ctx.isMobilePage,
7465
- part: section
7466
- }, null, 8, ["is-mobile-page", "part"]);
7467
- }), 128))
7468
- ], 2)
7462
+ (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (section) => {
7463
+ return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
7464
+ key: section.partId,
7465
+ "is-mobile-page": _ctx.isMobilePage,
7466
+ part: section
7467
+ }, null, 8, ["is-mobile-page", "part"]);
7468
+ }), 128))
7469
7469
  ], 14, _hoisted_1$2$1)
7470
7470
  ], 64);
7471
7471
  };
@@ -13246,7 +13246,7 @@ ${_html.style}
13246
13246
  var _a, _b;
13247
13247
  const selected = pageBuilder.context.getSelectedParts()[0];
13248
13248
  const block = pageBuilder.partManager.findNearestBlock(selected);
13249
- if (block && ((_b = (_a = block.parent) == null ? void 0 : _a.properties) == null ? void 0 : _b.direction) === direction) {
13249
+ if (block && (((_b = (_a = block.parent) == null ? void 0 : _a.properties) == null ? void 0 : _b.direction) || "vertical") === direction) {
13250
13250
  return menuItemForCommand(pageBuilder, commandId, caption);
13251
13251
  }
13252
13252
  };
@@ -13254,7 +13254,7 @@ ${_html.style}
13254
13254
  var _a, _b, _c;
13255
13255
  const selected = pageBuilder.context.getSelectedParts()[0];
13256
13256
  if (selected) {
13257
- if (((_a = selected.parent) == null ? void 0 : _a.isBlock()) && ((_c = (_b = selected.parent) == null ? void 0 : _b.properties) == null ? void 0 : _c.direction) === direction || !selected.isNestedWidget() && !direction) {
13257
+ if (((_a = selected.parent) == null ? void 0 : _a.isBlock()) && (((_c = (_b = selected.parent) == null ? void 0 : _b.properties) == null ? void 0 : _c.direction) || "horizontal") === direction || !selected.isNestedWidget() && !direction) {
13258
13258
  return menuItemForCommand(pageBuilder, commandId, caption);
13259
13259
  }
13260
13260
  }
@@ -14441,13 +14441,11 @@ ${_html.style}
14441
14441
  minHeight: ((_b = (_a = props.part) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
14442
14442
  };
14443
14443
  });
14444
- const properties = vue.computed(() => {
14444
+ const contentStyle = vue.computed(() => {
14445
14445
  var _a, _b;
14446
14446
  return {
14447
- style: {
14448
- ...(_a = props.part) == null ? void 0 : _a.getStyles(props.isMobilePage),
14449
- ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
14450
- }
14447
+ ...(_a = props.part) == null ? void 0 : _a.getStyles(props.isMobilePage),
14448
+ ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
14451
14449
  };
14452
14450
  });
14453
14451
  const selected = vue.computed(() => !!props.part && editor.context.isSelected(props.part));
@@ -14488,9 +14486,10 @@ ${_html.style}
14488
14486
  onContextmenu: showContextMenu,
14489
14487
  onMousedown: vue.withModifiers(handleClick, ["stop"])
14490
14488
  }, [
14491
- vue.createElementVNode("div", vue.mergeProps({
14492
- class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
14493
- }, properties.value), [
14489
+ vue.createElementVNode("div", {
14490
+ class: vue.normalizeClass([selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]),
14491
+ style: vue.normalizeStyle(contentStyle.value)
14492
+ }, [
14494
14493
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
14495
14494
  return vue.openBlock(), vue.createBlock(_sfc_main$z, {
14496
14495
  key: section.partId,
@@ -14498,20 +14497,19 @@ ${_html.style}
14498
14497
  part: section
14499
14498
  }, null, 8, ["is-mobile-page", "part"]);
14500
14499
  }), 128))
14501
- ], 16),
14500
+ ], 6),
14502
14501
  vue.createElementVNode("div", {
14503
14502
  class: "pb-add-section-handle bottom",
14504
14503
  onClick: addSection
14505
14504
  }, _cache[0] || (_cache[0] = [
14506
14505
  vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1)
14507
14506
  ]))
14508
- ], 46, _hoisted_1$h),
14509
- _cache[1] || (_cache[1] = vue.createElementVNode("div", { style: { "height": "100px" } }, null, -1))
14507
+ ], 46, _hoisted_1$h)
14510
14508
  ], 64);
14511
14509
  };
14512
14510
  }
14513
14511
  });
14514
- 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}';
14512
+ 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 align-items: center;\n width: 100%;\n padding-bottom: 100px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.pb-page .pb-page-content {\n display: flex;\n flex-direction: column;\n width: 100%;\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\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 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}';
14515
14513
  const _hoisted_1$g = ["width"];
14516
14514
  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
14517
14515
  __name: "PbPageFrame",
@@ -14536,24 +14534,7 @@ ${_html.style}
14536
14534
  const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
14537
14535
  head.innerHTML = `
14538
14536
  <meta charset="UTF-8"/>
14539
- <link href="https://fonts.googleapis.com" rel="preconnect">
14540
- <link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
14541
- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500&display=swap" rel="stylesheet">
14542
- <link
14543
- href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&family=Noto+Sans:wght@400;500&display=swap"
14544
- rel="stylesheet">
14545
- <link
14546
- href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Sans+KR:wght@400;500&family=Noto+Sans:wght@400;500&display=swap"
14547
- rel="stylesheet">
14548
- <link
14549
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
14550
- rel="stylesheet"/>
14551
- <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" />
14552
-
14553
- <link href="https://bluesea5.g1project.net/assets/index-DjQFWKLW.css" rel="stylesheet" />
14554
-
14555
14537
  ${externalCss}
14556
-
14557
14538
  <style>${canvasStyle}</style>
14558
14539
  `;
14559
14540
  const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
@@ -14586,9 +14567,11 @@ ${_html.style}
14586
14567
  if (!iframeRef.value || !iframeRef.value.contentDocument) return;
14587
14568
  const iframeBody = iframeRef.value.contentDocument.body;
14588
14569
  if (iframeBody) {
14589
- iframeRef.value.style.height = "1px";
14570
+ void iframeBody.offsetHeight;
14590
14571
  const newHeight = iframeBody.scrollHeight;
14591
- iframeRef.value.style.height = `${newHeight}px`;
14572
+ if (iframeRef.value.style.height !== `${newHeight}px`) {
14573
+ iframeRef.value.style.height = `${newHeight}px`;
14574
+ }
14592
14575
  }
14593
14576
  });
14594
14577
  };
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.35",
4
+ "version": "1.0.0-alpha.37",
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.35"
33
+ "@g1cloud/page-builder-viewer": "1.0.0-alpha.37"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@types/node": "^20.12.7",