@g1cloud/page-builder-editor 1.0.0-alpha.12 → 1.0.0-alpha.13

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.
Files changed (9) hide show
  1. package/dist/{PbPropertyEditorColor-DXkzD-V2.js → PbPropertyEditorColor-CTMG6AE0.js} +1 -1
  2. package/dist/{PbPropertyEditorHtml-CbEOlq-s.js → PbPropertyEditorHtml-CH9j33dZ.js} +1 -1
  3. package/dist/{PbPropertyEditorImage-5RZoQbLF.js → PbPropertyEditorImage-CwzqZPij.js} +1 -1
  4. package/dist/{PbPropertyEditorMultilineText-BMF9jHpy.js → PbPropertyEditorMultilineText-DtQgTGo7.js} +1 -1
  5. package/dist/{PbPropertyEditorProduct-Dt5vraZc.js → PbPropertyEditorProduct-BHpPwsjx.js} +1 -1
  6. package/dist/{index-BFtI1jYj.js → index-CmE7SdtL.js} +6 -6
  7. package/dist/page-builder-editor.js +1 -1
  8. package/dist/page-builder-editor.umd.cjs +1 -1
  9. package/package.json +2 -2
package/dist/{PbPropertyEditorColor-DXkzD-V2.js → PbPropertyEditorColor-CTMG6AE0.js} RENAMED
@@ -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-BFtI1jYj.js";
3
+ import { P as PbColorPicker } from "./index-CmE7SdtL.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"];
package/dist/{PbPropertyEditorHtml-CbEOlq-s.js → PbPropertyEditorHtml-CH9j33dZ.js} RENAMED
@@ -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-BFtI1jYj.js";
3
+ import { u as usePageBuilderEditor } from "./index-CmE7SdtL.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"];
package/dist/{PbPropertyEditorImage-5RZoQbLF.js → PbPropertyEditorImage-CwzqZPij.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
2
2
  import { useModal } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-BFtI1jYj.js";
3
+ import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-CmE7SdtL.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"];
package/dist/{PbPropertyEditorMultilineText-BMF9jHpy.js → PbPropertyEditorMultilineText-DtQgTGo7.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
2
2
  import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor } from "./index-BFtI1jYj.js";
3
+ import { u as usePageBuilderEditor } from "./index-CmE7SdtL.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"];
package/dist/{PbPropertyEditorProduct-Dt5vraZc.js → PbPropertyEditorProduct-BHpPwsjx.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
2
2
  import { useModal } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-BFtI1jYj.js";
3
+ import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-CmE7SdtL.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-product flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _hoisted_3 = ["textContent"];
package/dist/{index-BFtI1jYj.js → index-CmE7SdtL.js} RENAMED
@@ -8066,12 +8066,12 @@ const defaultPartPropertyEditors = () => {
8066
8066
  return {
8067
8067
  "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
8068
8068
  "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BWOKvwD9.js")),
8069
- "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BMF9jHpy.js")),
8069
+ "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DtQgTGo7.js")),
8070
8070
  "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
8071
- "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-DXkzD-V2.js")),
8072
- "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-5RZoQbLF.js")),
8073
- "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CbEOlq-s.js")),
8074
- "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-Dt5vraZc.js"))
8071
+ "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CTMG6AE0.js")),
8072
+ "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-CwzqZPij.js")),
8073
+ "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CH9j33dZ.js")),
8074
+ "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-BHpPwsjx.js"))
8075
8075
  };
8076
8076
  };
8077
8077
  const getPropertyValueOfParts = (parts, propertyName) => {
@@ -13580,7 +13580,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
13580
13580
  };
13581
13581
  }
13582
13582
  });
13583
- const canvasStyle = '.pb-page {\n margin: 0 auto;\n margin-top: 20px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n outline: 2px solid #4998f8;\n outline-offset: 5px;\n}\n.pb-page * {\n box-sizing: border-box;\n}\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\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.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n.pb-section {\n position: relative;\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.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n.pb-section.selected {\n outline: 1px solid #e67e22;\n outline-offset: 1px;\n z-index: 999;\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.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.pb-section-static .pb-widget {\n outline: none;\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.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n.pb-block.selected {\n outline: 1px solid #8e44ad;\n outline-offset: 1px;\n z-index: 999;\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}\n.pb-widget.selected {\n outline: 2px solid #27ae60;\n outline-offset: 1px;\n z-index: 999;\n}\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\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}\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}\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.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-text-widget .text {\n color: #333;\n}\n.pb-text-widget.empty .text {\n color: #999;\n}\n.pb-image-widget {\n width: 100%;\n}\n.pb-image-widget .image {\n width: 100%;\n}\n.pb-image-widget .empty {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n.pb-image-widget .empty span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-html-widget.empty {\n padding: 4px 0;\n font-size: 18px;\n color: #999;\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.pb-product-list-widget .product-wrapper {\n width: 25%;\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.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\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@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n.pb-login-widget {\n height: 200px;\n text-align: center;\n}\n.pb-login-widget h3 {\n font-size: 32px;\n font-weight: bold;\n color: #ccc;\n line-height: 200px;\n vertical-align: middle;\n}\n.font-icon {\n font-family: Material Symbols Outlined, monospace;\n font-size: 1rem;\n max-width: 1em;\n}\nhtml, body {\n font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n font-size: 12px;\n}\nbody {\n background-color: white;\n height: 100%;\n margin: 0;\n}\n.pb-canvas-wrapper {\n padding: 32px 40px 56px 40px;\n height: 100%;\n background-color: #aaa;\n overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n display: flex;\n flex-direction: row;\n transform-origin: top left;\n width: fit-content;\n min-width: 40px;\n min-height: 40px;\n margin: 0 auto;\n}\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\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.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.pb-add-section-handle.bottom {\n left: 50%;\n bottom: -32px;\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.pb-add-section-handle > i {\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: -20px;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}\n.pb-button {\n background: none;\n border: none;\n cursor: pointer;\n vertical-align: middle;\n}\n.pb-guideline {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n.pb-guideline.selected {\n z-index: 3;\n}\n.pb-guideline.preselect {\n z-index: 4;\n}';
13583
+ const canvasStyle = '.pb-page {\n margin: 0 auto;\n margin-top: 20px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n outline: 2px solid #4998f8;\n outline-offset: 5px;\n}\n.pb-page * {\n box-sizing: border-box;\n}\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\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.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n.pb-section {\n position: relative;\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.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n.pb-section.selected {\n outline: 1px solid #e67e22;\n outline-offset: 1px;\n z-index: 999;\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.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.pb-section-static .pb-widget {\n outline: none;\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.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n.pb-block.selected {\n outline: 1px solid #8e44ad;\n outline-offset: 1px;\n z-index: 999;\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}\n.pb-widget.selected {\n outline: 2px solid #27ae60;\n outline-offset: 1px;\n z-index: 999;\n}\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\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}\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}\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.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-text-widget .text {\n color: #333;\n}\n.pb-text-widget.empty .text {\n color: #999;\n}\n.pb-image-widget {\n width: 100%;\n}\n.pb-image-widget .image {\n width: 100%;\n}\n.pb-image-widget .empty {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n.pb-image-widget .empty span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-html-widget.empty {\n padding: 4px 0;\n font-size: 18px;\n color: #999;\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.pb-product-list-widget .product-wrapper {\n width: 25%;\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.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\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@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n.pb-login-widget {\n height: 200px;\n text-align: center;\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.font-icon {\n font-family: Material Symbols Outlined, monospace;\n font-size: 1rem;\n max-width: 1em;\n}\nhtml, body {\n font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n font-size: 12px;\n}\nbody {\n background-color: white;\n height: 100%;\n margin: 0;\n}\n.pb-canvas-wrapper {\n padding: 32px 40px 56px 40px;\n height: 100%;\n background-color: #aaa;\n overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n display: flex;\n flex-direction: row;\n transform-origin: top left;\n width: fit-content;\n min-width: 40px;\n min-height: 40px;\n margin: 0 auto;\n}\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\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.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.pb-add-section-handle.bottom {\n left: 50%;\n bottom: -32px;\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.pb-add-section-handle > i {\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: -20px;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}\n.pb-button {\n background: none;\n border: none;\n cursor: pointer;\n vertical-align: middle;\n}\n.pb-guideline {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n.pb-guideline.selected {\n z-index: 3;\n}\n.pb-guideline.preselect {\n z-index: 4;\n}';
13584
13584
  const _hoisted_1$9 = { class: "pb-canvas-frame" };
13585
13585
  const _sfc_main$b = /* @__PURE__ */ defineComponent({
13586
13586
  __name: "PbCanvasFrame",
package/dist/page-builder-editor.js CHANGED
@@ -1,4 +1,4 @@
1
- import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, R, m, S, n, W, o, p, q, r, s, t, v, w } from "./index-BFtI1jYj.js";
1
+ import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, R, m, S, n, W, o, p, q, r, s, t, v, w } from "./index-CmE7SdtL.js";
2
2
  export {
3
3
  B as BLOCK_TYPE,
4
4
  b as Block,
package/dist/page-builder-editor.umd.cjs CHANGED
@@ -13582,7 +13582,7 @@ ${_html.style}
13582
13582
  };
13583
13583
  }
13584
13584
  });
13585
- const canvasStyle = '.pb-page {\n margin: 0 auto;\n margin-top: 20px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n outline: 2px solid #4998f8;\n outline-offset: 5px;\n}\n.pb-page * {\n box-sizing: border-box;\n}\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\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.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n.pb-section {\n position: relative;\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.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n.pb-section.selected {\n outline: 1px solid #e67e22;\n outline-offset: 1px;\n z-index: 999;\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.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.pb-section-static .pb-widget {\n outline: none;\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.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n.pb-block.selected {\n outline: 1px solid #8e44ad;\n outline-offset: 1px;\n z-index: 999;\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}\n.pb-widget.selected {\n outline: 2px solid #27ae60;\n outline-offset: 1px;\n z-index: 999;\n}\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\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}\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}\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.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-text-widget .text {\n color: #333;\n}\n.pb-text-widget.empty .text {\n color: #999;\n}\n.pb-image-widget {\n width: 100%;\n}\n.pb-image-widget .image {\n width: 100%;\n}\n.pb-image-widget .empty {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n.pb-image-widget .empty span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-html-widget.empty {\n padding: 4px 0;\n font-size: 18px;\n color: #999;\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.pb-product-list-widget .product-wrapper {\n width: 25%;\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.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\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@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n.pb-login-widget {\n height: 200px;\n text-align: center;\n}\n.pb-login-widget h3 {\n font-size: 32px;\n font-weight: bold;\n color: #ccc;\n line-height: 200px;\n vertical-align: middle;\n}\n.font-icon {\n font-family: Material Symbols Outlined, monospace;\n font-size: 1rem;\n max-width: 1em;\n}\nhtml, body {\n font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n font-size: 12px;\n}\nbody {\n background-color: white;\n height: 100%;\n margin: 0;\n}\n.pb-canvas-wrapper {\n padding: 32px 40px 56px 40px;\n height: 100%;\n background-color: #aaa;\n overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n display: flex;\n flex-direction: row;\n transform-origin: top left;\n width: fit-content;\n min-width: 40px;\n min-height: 40px;\n margin: 0 auto;\n}\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\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.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.pb-add-section-handle.bottom {\n left: 50%;\n bottom: -32px;\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.pb-add-section-handle > i {\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: -20px;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}\n.pb-button {\n background: none;\n border: none;\n cursor: pointer;\n vertical-align: middle;\n}\n.pb-guideline {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n.pb-guideline.selected {\n z-index: 3;\n}\n.pb-guideline.preselect {\n z-index: 4;\n}';
13585
+ const canvasStyle = '.pb-page {\n margin: 0 auto;\n margin-top: 20px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n outline: 2px solid #4998f8;\n outline-offset: 5px;\n}\n.pb-page * {\n box-sizing: border-box;\n}\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\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.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n.pb-section {\n position: relative;\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.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n.pb-section.selected {\n outline: 1px solid #e67e22;\n outline-offset: 1px;\n z-index: 999;\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.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.pb-section-static .pb-widget {\n outline: none;\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.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n.pb-block.selected {\n outline: 1px solid #8e44ad;\n outline-offset: 1px;\n z-index: 999;\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}\n.pb-widget.selected {\n outline: 2px solid #27ae60;\n outline-offset: 1px;\n z-index: 999;\n}\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\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}\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}\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.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-text-widget .text {\n color: #333;\n}\n.pb-text-widget.empty .text {\n color: #999;\n}\n.pb-image-widget {\n width: 100%;\n}\n.pb-image-widget .image {\n width: 100%;\n}\n.pb-image-widget .empty {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n.pb-image-widget .empty span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-html-widget.empty {\n padding: 4px 0;\n font-size: 18px;\n color: #999;\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.pb-product-list-widget .product-wrapper {\n width: 25%;\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.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\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@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n.pb-login-widget {\n height: 200px;\n text-align: center;\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.font-icon {\n font-family: Material Symbols Outlined, monospace;\n font-size: 1rem;\n max-width: 1em;\n}\nhtml, body {\n font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n font-size: 12px;\n}\nbody {\n background-color: white;\n height: 100%;\n margin: 0;\n}\n.pb-canvas-wrapper {\n padding: 32px 40px 56px 40px;\n height: 100%;\n background-color: #aaa;\n overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n display: flex;\n flex-direction: row;\n transform-origin: top left;\n width: fit-content;\n min-width: 40px;\n min-height: 40px;\n margin: 0 auto;\n}\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\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.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.pb-add-section-handle.bottom {\n left: 50%;\n bottom: -32px;\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.pb-add-section-handle > i {\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: -20px;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}\n.pb-button {\n background: none;\n border: none;\n cursor: pointer;\n vertical-align: middle;\n}\n.pb-guideline {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n.pb-guideline.selected {\n z-index: 3;\n}\n.pb-guideline.preselect {\n z-index: 4;\n}';
13586
13586
  const _hoisted_1$k = { class: "pb-canvas-frame" };
13587
13587
  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
13588
13588
  __name: "PbCanvasFrame",
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.12",
4
+ "version": "1.0.0-alpha.13",
5
5
  "engins": {
6
6
  "node": ">= 20.0.0"
7
7
  },
@@ -28,7 +28,7 @@
28
28
  "vue-router": "^4.3.2",
29
29
  "vue3-click-away": "^1.2.4",
30
30
  "yjs": "^13.6.14",
31
- "@g1cloud/page-builder-viewer": "1.0.0-alpha.12"
31
+ "@g1cloud/page-builder-viewer": "1.0.0-alpha.13"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@types/node": "^20.12.7",