@g1cloud/page-builder-editor 1.0.0-alpha.19 → 1.0.0-alpha.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/canvas-block.scss +1 -1
- package/css/canvas-section.scss +1 -1
- package/css/canvas-widget.scss +1 -1
- package/dist/PageBuilderEditor.vue.d.ts +2 -2
- package/dist/{PbPropertyEditorColor-B6_DIy47.js → PbPropertyEditorColor-BC6HW3q7.js} +1 -1
- package/dist/{PbPropertyEditorHtml-BiMjuW0k.js → PbPropertyEditorHtml-DGiHzR3a.js} +1 -1
- package/dist/{PbPropertyEditorImage-BwHm3YZo.js → PbPropertyEditorImage-BFqppMwa.js} +1 -1
- package/dist/{PbPropertyEditorMultilineText-JyXSHgdX.js → PbPropertyEditorMultilineText-BdgciM4C.js} +1 -1
- package/dist/{PbPropertyEditorText-dMHwoG4V.js → PbPropertyEditorText-BDKWUgPG.js} +1 -1
- package/dist/{PbWidgetAddModal-eGdqZyZu.js → PbWidgetAddModal-BKP0MLJe.js} +1 -1
- package/dist/{index-C8Vb2KOj.js → index-KDwlEwIU.js} +16 -18
- package/dist/model/page-builder-editor.d.ts +2 -2
- package/dist/page-builder-editor.js +1 -1
- package/dist/page-builder-editor.umd.cjs +10 -12
- package/package.json +2 -2
package/css/canvas-block.scss
CHANGED
package/css/canvas-section.scss
CHANGED
package/css/canvas-widget.scss
CHANGED
|
@@ -3,7 +3,7 @@ import { PageBuilderToolbarPlugin } from './model/plugin.ts';
|
|
|
3
3
|
declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
|
|
4
4
|
instanceId?: string | undefined;
|
|
5
5
|
title?: string | undefined;
|
|
6
|
-
pageContent?:
|
|
6
|
+
pageContent?: string | undefined;
|
|
7
7
|
locales?: string[] | undefined;
|
|
8
8
|
locale?: string | undefined;
|
|
9
9
|
toolbarPlugin?: PageBuilderToolbarPlugin | undefined;
|
|
@@ -13,7 +13,7 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
|
|
|
13
13
|
}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
14
14
|
instanceId?: string | undefined;
|
|
15
15
|
title?: string | undefined;
|
|
16
|
-
pageContent?:
|
|
16
|
+
pageContent?: string | undefined;
|
|
17
17
|
locales?: string[] | undefined;
|
|
18
18
|
locale?: string | undefined;
|
|
19
19
|
toolbarPlugin?: PageBuilderToolbarPlugin | undefined;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
|
|
2
2
|
import { BSTextInput } from "@g1cloud/bluesea";
|
|
3
|
-
import { P as PbColorPicker } from "./index-
|
|
3
|
+
import { P as PbColorPicker } from "./index-KDwlEwIU.js";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-color" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
|
6
6
|
const _hoisted_3 = ["textContent"];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
|
|
2
2
|
import { useModal } from "@g1cloud/bluesea";
|
|
3
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
3
|
+
import { u as usePageBuilderEditor } from "./index-KDwlEwIU.js";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
|
6
6
|
const _hoisted_3 = ["textContent"];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
|
|
2
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
2
|
+
import { u as usePageBuilderEditor } from "./index-KDwlEwIU.js";
|
|
3
3
|
import { useModal } from "@g1cloud/bluesea";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
package/dist/{PbPropertyEditorMultilineText-JyXSHgdX.js → PbPropertyEditorMultilineText-BdgciM4C.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
|
|
2
2
|
import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
|
|
3
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
3
|
+
import { u as usePageBuilderEditor } from "./index-KDwlEwIU.js";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
|
6
6
|
const _hoisted_3 = ["textContent"];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
|
|
2
2
|
import { BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
|
|
3
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
3
|
+
import { u as usePageBuilderEditor } from "./index-KDwlEwIU.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, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
|
|
2
2
|
import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
|
|
3
|
-
import { w as widgetPartDefinitions } from "./index-
|
|
3
|
+
import { w as widgetPartDefinitions } from "./index-KDwlEwIU.js";
|
|
4
4
|
const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
|
|
5
5
|
const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", {
|
|
6
6
|
class: "mb-8",
|
|
@@ -7221,8 +7221,9 @@ class PageBuilderViewerImpl {
|
|
|
7221
7221
|
return Promise.resolve();
|
|
7222
7222
|
return provider(part.properties);
|
|
7223
7223
|
}
|
|
7224
|
-
render(
|
|
7225
|
-
const
|
|
7224
|
+
render(data) {
|
|
7225
|
+
const _data = JSON.parse(data || "{}") || {};
|
|
7226
|
+
const rootPart = this.parsePartContent(_data);
|
|
7226
7227
|
if (rootPart) {
|
|
7227
7228
|
if (rootPart.children) {
|
|
7228
7229
|
for (let page of rootPart.children) {
|
|
@@ -8001,12 +8002,12 @@ class PartManager {
|
|
|
8001
8002
|
const defaultPartPropertyEditors = () => {
|
|
8002
8003
|
return {
|
|
8003
8004
|
"readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
|
|
8004
|
-
"text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-
|
|
8005
|
-
"multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-
|
|
8005
|
+
"text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BDKWUgPG.js")),
|
|
8006
|
+
"multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BdgciM4C.js")),
|
|
8006
8007
|
"select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
|
|
8007
|
-
"color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-
|
|
8008
|
-
"image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-
|
|
8009
|
-
"html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-
|
|
8008
|
+
"color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-BC6HW3q7.js")),
|
|
8009
|
+
"image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BFqppMwa.js")),
|
|
8010
|
+
"html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DGiHzR3a.js"))
|
|
8010
8011
|
};
|
|
8011
8012
|
};
|
|
8012
8013
|
const getPropertyValueOfParts = (parts, propertyName) => {
|
|
@@ -12118,7 +12119,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
|
|
|
12118
12119
|
let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
|
|
12119
12120
|
const openWidgetAddModal = (modal, args, callback) => {
|
|
12120
12121
|
modal.openModal({
|
|
12121
|
-
component: defineAsyncComponent(() => import("./PbWidgetAddModal-
|
|
12122
|
+
component: defineAsyncComponent(() => import("./PbWidgetAddModal-BKP0MLJe.js")),
|
|
12122
12123
|
style: {
|
|
12123
12124
|
width: "80%",
|
|
12124
12125
|
height: "80%",
|
|
@@ -13345,16 +13346,13 @@ class PageBuilderEditorImpl {
|
|
|
13345
13346
|
}
|
|
13346
13347
|
initData(data) {
|
|
13347
13348
|
this.model.rootPart.language = this.locale.value;
|
|
13348
|
-
|
|
13349
|
-
|
|
13350
|
-
|
|
13351
|
-
|
|
13352
|
-
|
|
13353
|
-
|
|
13354
|
-
}
|
|
13355
|
-
if (!parts) {
|
|
13349
|
+
const _data = JSON.parse(data || "{}") || {};
|
|
13350
|
+
let rootPart = partFromJsonObject(_data, true);
|
|
13351
|
+
if (!rootPart)
|
|
13352
|
+
rootPart = new RootPart();
|
|
13353
|
+
let parts = rootPart.children;
|
|
13354
|
+
if (!parts)
|
|
13356
13355
|
parts = [this.getEmptyPageContent(), this.getEmptyPageContent()];
|
|
13357
|
-
}
|
|
13358
13356
|
let partIdsToDelete = void 0;
|
|
13359
13357
|
if (this.model.rootPart.children && this.model.rootPart.children.length) {
|
|
13360
13358
|
partIdsToDelete = this.model.rootPart.children.map((v) => v.partId);
|
|
@@ -13649,7 +13647,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
13649
13647
|
};
|
|
13650
13648
|
}
|
|
13651
13649
|
});
|
|
13652
|
-
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:
|
|
13650
|
+
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: 2px solid #4998f8;\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: 2px solid #4998f8;\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 #4998f8;\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 .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\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 .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n.pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\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: 0;\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}';
|
|
13653
13651
|
const _hoisted_1$9 = { class: "pb-canvas-frame" };
|
|
13654
13652
|
const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|
13655
13653
|
__name: "PbCanvasFrame",
|
|
@@ -27,7 +27,7 @@ export interface PageBuilderEditor extends PageBuilder {
|
|
|
27
27
|
locales: Ref<string[]>;
|
|
28
28
|
registerPlugin(plugin: PageBuilderPlugin): void;
|
|
29
29
|
registerCustomPlugin(plugin: any): void;
|
|
30
|
-
initData(data?:
|
|
30
|
+
initData(data?: string): void;
|
|
31
31
|
undo(): void;
|
|
32
32
|
redo(): void;
|
|
33
33
|
zoom(scale: number): void;
|
|
@@ -67,7 +67,7 @@ export declare class PageBuilderEditorImpl implements PageBuilderEditor {
|
|
|
67
67
|
provideCustomWidgetData(part: IPart): Promise<unknown>;
|
|
68
68
|
registerPlugin(plugin: PageBuilderPlugin): void;
|
|
69
69
|
registerCustomPlugin(plugin: any): void;
|
|
70
|
-
initData(data?:
|
|
70
|
+
initData(data?: string): void;
|
|
71
71
|
undo(): void;
|
|
72
72
|
redo(): void;
|
|
73
73
|
zoom(scale: number): void;
|
|
@@ -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, x } from "./index-
|
|
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, x } from "./index-KDwlEwIU.js";
|
|
2
2
|
export {
|
|
3
3
|
B as BLOCK_TYPE,
|
|
4
4
|
b as Block,
|
|
@@ -7223,8 +7223,9 @@ ${_html.style}
|
|
|
7223
7223
|
return Promise.resolve();
|
|
7224
7224
|
return provider(part.properties);
|
|
7225
7225
|
}
|
|
7226
|
-
render(
|
|
7227
|
-
const
|
|
7226
|
+
render(data) {
|
|
7227
|
+
const _data = JSON.parse(data || "{}") || {};
|
|
7228
|
+
const rootPart = this.parsePartContent(_data);
|
|
7228
7229
|
if (rootPart) {
|
|
7229
7230
|
if (rootPart.children) {
|
|
7230
7231
|
for (let page of rootPart.children) {
|
|
@@ -13347,16 +13348,13 @@ ${_html.style}
|
|
|
13347
13348
|
}
|
|
13348
13349
|
initData(data) {
|
|
13349
13350
|
this.model.rootPart.language = this.locale.value;
|
|
13350
|
-
|
|
13351
|
-
|
|
13352
|
-
|
|
13353
|
-
|
|
13354
|
-
|
|
13355
|
-
|
|
13356
|
-
}
|
|
13357
|
-
if (!parts) {
|
|
13351
|
+
const _data = JSON.parse(data || "{}") || {};
|
|
13352
|
+
let rootPart = partFromJsonObject(_data, true);
|
|
13353
|
+
if (!rootPart)
|
|
13354
|
+
rootPart = new RootPart();
|
|
13355
|
+
let parts = rootPart.children;
|
|
13356
|
+
if (!parts)
|
|
13358
13357
|
parts = [this.getEmptyPageContent(), this.getEmptyPageContent()];
|
|
13359
|
-
}
|
|
13360
13358
|
let partIdsToDelete = void 0;
|
|
13361
13359
|
if (this.model.rootPart.children && this.model.rootPart.children.length) {
|
|
13362
13360
|
partIdsToDelete = this.model.rootPart.children.map((v) => v.partId);
|
|
@@ -13651,7 +13649,7 @@ ${_html.style}
|
|
|
13651
13649
|
};
|
|
13652
13650
|
}
|
|
13653
13651
|
});
|
|
13654
|
-
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:
|
|
13652
|
+
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: 2px solid #4998f8;\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: 2px solid #4998f8;\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 #4998f8;\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 .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\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 .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n.pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\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: 0;\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}';
|
|
13655
13653
|
const _hoisted_1$j = { class: "pb-canvas-frame" };
|
|
13656
13654
|
const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
|
|
13657
13655
|
__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.
|
|
4
|
+
"version": "1.0.0-alpha.20",
|
|
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.
|
|
31
|
+
"@g1cloud/page-builder-viewer": "1.0.0-alpha.20"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@types/node": "^20.12.7",
|