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

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.
@@ -7,6 +7,7 @@
7
7
  display: flex;
8
8
  flex-direction: column;
9
9
  margin: 0 auto;
10
+ padding-bottom: 100px;
10
11
  width: 100%;
11
12
  background-position: 50% 50%;
12
13
  background-repeat: no-repeat;
@@ -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-BPKptjBm.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-BPKptjBm.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-BPKptjBm.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-BPKptjBm.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-BPKptjBm.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-BPKptjBm.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-BPKptjBm.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"];
@@ -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-OLBLie3k.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-BaMj-tr_.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-BPku9nyl.js")),
8154
+ "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DnUH6vkj.js")),
8155
+ "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-eYbeszpS.js")),
8156
+ "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-DRCsiJt3.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-CvBeNnPx.js")),
12491
12491
  style: {
12492
12492
  width: "80%",
12493
12493
  height: "80%",
@@ -14504,13 +14504,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
14504
14504
  }, _cache[0] || (_cache[0] = [
14505
14505
  createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1)
14506
14506
  ]))
14507
- ], 46, _hoisted_1$3),
14508
- _cache[1] || (_cache[1] = createElementVNode("div", { style: { "height": "100px" } }, null, -1))
14507
+ ], 46, _hoisted_1$3)
14509
14508
  ], 64);
14510
14509
  };
14511
14510
  }
14512
14511
  });
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}';
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 margin: 0 auto;\n padding-bottom: 100px;\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}';
14514
14513
  const _hoisted_1$2 = ["width"];
14515
14514
  const _sfc_main$2 = /* @__PURE__ */ defineComponent({
14516
14515
  __name: "PbPageFrame",
@@ -14585,9 +14584,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
14585
14584
  if (!iframeRef.value || !iframeRef.value.contentDocument) return;
14586
14585
  const iframeBody = iframeRef.value.contentDocument.body;
14587
14586
  if (iframeBody) {
14588
- iframeRef.value.style.height = "1px";
14587
+ void iframeBody.offsetHeight;
14589
14588
  const newHeight = iframeBody.scrollHeight;
14590
- iframeRef.value.style.height = `${newHeight}px`;
14589
+ if (iframeRef.value.style.height !== `${newHeight}px`) {
14590
+ iframeRef.value.style.height = `${newHeight}px`;
14591
+ }
14591
14592
  }
14592
14593
  });
14593
14594
  };
@@ -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-BPKptjBm.js";
2
2
  export {
3
3
  B as BLOCK_TYPE,
4
4
  b as Block,
@@ -14505,13 +14505,12 @@ ${_html.style}
14505
14505
  }, _cache[0] || (_cache[0] = [
14506
14506
  vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1)
14507
14507
  ]))
14508
- ], 46, _hoisted_1$h),
14509
- _cache[1] || (_cache[1] = vue.createElementVNode("div", { style: { "height": "100px" } }, null, -1))
14508
+ ], 46, _hoisted_1$h)
14510
14509
  ], 64);
14511
14510
  };
14512
14511
  }
14513
14512
  });
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}';
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 padding-bottom: 100px;\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}';
14515
14514
  const _hoisted_1$g = ["width"];
14516
14515
  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
14517
14516
  __name: "PbPageFrame",
@@ -14586,9 +14585,11 @@ ${_html.style}
14586
14585
  if (!iframeRef.value || !iframeRef.value.contentDocument) return;
14587
14586
  const iframeBody = iframeRef.value.contentDocument.body;
14588
14587
  if (iframeBody) {
14589
- iframeRef.value.style.height = "1px";
14588
+ void iframeBody.offsetHeight;
14590
14589
  const newHeight = iframeBody.scrollHeight;
14591
- iframeRef.value.style.height = `${newHeight}px`;
14590
+ if (iframeRef.value.style.height !== `${newHeight}px`) {
14591
+ iframeRef.value.style.height = `${newHeight}px`;
14592
+ }
14592
14593
  }
14593
14594
  });
14594
14595
  };
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.36",
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.36"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@types/node": "^20.12.7",