@g1cloud/page-builder-editor 1.0.0-alpha.21 → 1.0.0-alpha.22

package/css/canvas-page.scss

@@ -1,25 +1,18 @@
-.pb-page {
-  // @import "pb-simple-carousel";
-  // @import "pb-simple-html";
-  // @import "pb-simple-media";
-  // @import "pb-simple-button";
-  // @import "pb-animation";
-  // @import "coupon-download";
-  // @import "pb-tabs";
-  // @import "pb-image-map";
-
+.pb-page-wrapper {
   margin: 0 auto;
-  margin-top: 20px;
+  padding: 0;
+}
+
+.pb-page {
+  margin: 20px 0 auto 0;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;
-  // background-color: white;
 
   .pb-page-content {
     &.selected {
       outline: 2px solid #4998f8;
       outline-offset: 5px;
-      // z-index: 9999;
     }
   }
 

package/css/canvas.scss

@@ -16,29 +16,30 @@ html, body {
 }
 
 body {
-  background-color: white;
-  height: 100%;
   margin: 0;
+  padding: 0;
+  background-color: $color-canvas-frame-bg;
+  overflow: auto;
 }
 
 .pb-canvas-wrapper {
-  padding: 32px 40px 56px 40px;
-  height: 100%;
-  background-color: $color-canvas-frame-bg;
-  overflow: auto;
+  margin: 0;
+  padding: 0;
+  width: fit-content;
+  //overflow: auto;
 
   .pb-canvas {
-    // background-color: white;
     display: flex;
     flex-direction: row;
+    flex: 1 1 auto;
+    //flex-grow: 1;
+    //flex-shrink: 1;
     transform-origin: top left;
-
     width: fit-content;
-    min-width: 40px;
-    min-height: 40px;
-    // box-shadow: 4px 4px 8px $color-gray;
-    margin: 0 auto;
-    // margin-bottom: 100px;
+    //margin: 0 auto;
+    margin: 0;
+    //padding: 0;
+    padding: 32px 40px 56px 40px;
   }
 }
 
@@ -46,20 +47,14 @@ body {
   background-color: #ff3333;
   opacity: 0.5;
   border-radius: 2px;
-  // z-index: 999;
 }
 
 .pb-add-section-handle {
   position: relative;
-  // width: 33.33%;
-  // background: rgba(230, 126, 34, 0.5);
-  // position: relative;
   text-align: center;
   cursor: pointer;
   z-index: 5;
   height: 0;
-  // opacity: 0;
-  // margin: 0;
 
   &.top::before,
   &.bottom::before,
@@ -69,39 +64,22 @@ body {
     left: 0;
     right: 0;
     top: 0;
-    // height: 2px;
-    // background: rgba(0, 0, 0, 0.5);
     opacity: 0;
     pointer-events: none;
   }
 
   &.top {
-    // top: 0;
-    // left: 50%;
-    // transform: translate(-50%, -50%);
-    // margin-top: 24px;
-    // margin-bottom: 24px;
   }
 
   &.middle {
-    // top: 0;
-    // left: 50%;
-    // transform: translate(-50%, -50%);
-    // margin-top: 24px;
-    // margin-bottom: 24px;
   }
 
   &.bottom {
-    // bottom: 0;
     left: 50%;
     bottom: -32px;
-    // transform: translate(-50%, 50%);
-    // margin-top: 24px;
   }
 
   &:hover {
-    // opacity: 1;
-
     &.top::before,
     &.bottom::before,
     &.middle::before,

package/css/page-builder-editor.scss

@@ -234,7 +234,11 @@
 
     .content {
       border: solid 1px #ccc;
-      overflow-y: auto;
+
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 
@@ -245,7 +249,6 @@
       height: 60%;
 
       .content {
-        overflow-y: auto;
       }
     }
 
@@ -253,7 +256,6 @@
       height: 40%;
 
       .content {
-        overflow-y: auto;
       }
     }
 

package/dist/{PbHtmlEditorModal-aaecwH7V.js → PbHtmlEditorModal-pn7PlMQg.js}

@@ -1,42 +1,45 @@
-import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createSlots, renderList } from "vue";
-import { useModalHandle, BSModalFrame, BSTabSheet, BSCodeEditor } from "@g1cloud/bluesea";
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createSlots, renderList } from "vue";
+import { useModalHandle, waitDuring, BSModalFrame, BSTabSheet, BSCodeEditor } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "bs-layout-vertical flex-grow-1 h-full" };
 const _hoisted_2 = { class: "bs-layout-horizontal h-full pt-8" };
-const _hoisted_3 = { class: "preview flex-grow-1" };
+const _hoisted_3 = { class: "preview" };
 const _hoisted_4 = { class: "bs-layout-vertical w-full h-full" };
 const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "title pb-4" }, "Preview", -1);
-const _hoisted_6 = ["innerHTML"];
-const _hoisted_7 = { class: "editor bs-layout-vertical pl-8" };
-const _hoisted_8 = { class: "tags bs-layout-vertical w-full" };
-const _hoisted_9 = /* @__PURE__ */ createElementVNode("div", { class: "title pb-4" }, "HTML", -1);
-const _hoisted_10 = { class: "content flex-grow-1" };
-const _hoisted_11 = { class: "style bs-layout-vertical w-full pt-8" };
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("div", { class: "title pb-4" }, "Style", -1);
-const _hoisted_13 = { class: "content flex-grow-1" };
+const _hoisted_6 = { class: "content flex-grow-1" };
+const _hoisted_7 = ["srcdoc"];
+const _hoisted_8 = { class: "editor bs-layout-vertical pl-8 h-full" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PbHtmlEditorModal",
   props: {
     html: {},
     locales: {},
-    localeTabs: {}
+    localeTabs: {},
+    pageBuilder: {}
   },
   emits: ["updateHtml"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const tabId = ref(props.localeTabs && props.localeTabs[0].tabId);
+    const localeTabId = ref(props.localeTabs && props.localeTabs[0].tabId);
     const modalHandle = useModalHandle();
     const html = ref(props.html || {});
     const preview = computed(() => {
       var _a;
       let data = {};
+      const externalCss = props.pageBuilder.getExternalCss();
       (_a = props.locales) == null ? void 0 : _a.forEach((locale) => {
         const _html = html.value[locale] || { tags: "", style: "" };
-        data[locale] = _html.tags ? `${_html.tags}
-<style>${_html.style}</style>` : "";
+        data[locale] = _html.tags ? `${externalCss}
+<style>${_html.style}</style>
+${_html.tags}` : "";
       });
       return data;
     });
+    const editorTabs = [
+      { tabId: "tags", caption: "Tags" },
+      { tabId: "style", caption: "Style" }
+    ];
+    const editorTabId = ref("tags");
     const updateTags = (locale, value) => {
       if (!html.value)
         html.value = {};
@@ -55,6 +58,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("updateHtml", html.value);
       modalHandle.close();
     };
+    const editorHeight = ref("");
+    const updateEditorHeight = async () => {
+      await waitDuring(50);
+      if (editorHeight.value) {
+        const editor = document.querySelector(".bs-code-editor");
+        if (editor) {
+          editor.style.height = editorHeight.value;
+        }
+      }
+    };
+    let resizeObserver;
+    onMounted(async () => {
+      await waitDuring(50);
+      const editorParent = document.querySelector(".editor > .bs-tab-sheet > .bs-layout-vertical");
+      resizeObserver = new ResizeObserver(() => {
+        if (editorParent && editorParent.clientHeight) {
+          editorHeight.value = `${editorParent.clientHeight}px`;
+          updateEditorHeight();
+        }
+      });
+      if (editorParent) {
+        resizeObserver.observe(editorParent);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(BSModalFrame), {
         class: "pb-html-editor-modal",
@@ -63,8 +95,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1, [
             createVNode(unref(BSTabSheet), {
-              "tab-id": tabId.value,
-              "onUpdate:tabId": _cache[0] || (_cache[0] = ($event) => tabId.value = $event),
+              "tab-id": localeTabId.value,
+              "onUpdate:tabId": [
+                _cache[1] || (_cache[1] = ($event) => localeTabId.value = $event),
+                updateEditorHeight
+              ],
               tabs: _ctx.localeTabs,
               class: "flex-grow-1"
             }, createSlots({ _: 2 }, [
@@ -76,35 +111,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       createElementVNode("div", _hoisted_3, [
                         createElementVNode("div", _hoisted_4, [
                           _hoisted_5,
-                          createElementVNode("div", {
-                            class: "content flex-grow-1",
-                            innerHTML: preview.value[locale]
-                          }, null, 8, _hoisted_6)
+                          createElementVNode("div", _hoisted_6, [
+                            createElementVNode("iframe", {
+                              srcdoc: preview.value[locale]
+                            }, null, 8, _hoisted_7)
+                          ])
                         ])
                       ]),
-                      createElementVNode("div", _hoisted_7, [
-                        createElementVNode("div", _hoisted_8, [
-                          _hoisted_9,
-                          createElementVNode("div", _hoisted_10, [
+                      createElementVNode("div", _hoisted_8, [
+                        createVNode(unref(BSTabSheet), {
+                          "tab-id": editorTabId.value,
+                          "onUpdate:tabId": [
+                            _cache[0] || (_cache[0] = ($event) => editorTabId.value = $event),
+                            updateEditorHeight
+                          ],
+                          tabs: editorTabs,
+                          class: "flex-grow-1"
+                        }, {
+                          tags: withCtx(() => [
                             createVNode(unref(BSCodeEditor), {
                               "model-value": (html.value[locale] || {}).tags,
                               "editor-height": "100%",
                               lang: "html",
                               "onUpdate:modelValue": (value) => updateTags(locale, value)
                             }, null, 8, ["model-value", "onUpdate:modelValue"])
-                          ])
-                        ]),
-                        createElementVNode("div", _hoisted_11, [
-                          _hoisted_12,
-                          createElementVNode("div", _hoisted_13, [
+                          ]),
+                          style: withCtx(() => [
                             createVNode(unref(BSCodeEditor), {
                               "model-value": (html.value[locale] || {}).style,
                               "editor-height": "100%",
                               lang: "css",
                               "onUpdate:modelValue": (value) => updateStyle(locale, value)
                             }, null, 8, ["model-value", "onUpdate:modelValue"])
-                          ])
-                        ])
+                          ]),
+                          _: 2
+                        }, 1032, ["tab-id"])
                       ])
                     ])
                   ])

package/dist/{PbPropertyEditorColor-BFMkFOYX.js → PbPropertyEditorColor-C554e0iO.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
 import { BSTextInput } from "@g1cloud/bluesea";
-import { P as PbColorPicker } from "./index-Cr-_-n9T.js";
+import { P as PbColorPicker } from "./index-Bss8IrUk.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorHtml-DZw8qbJH.js → PbPropertyEditorHtml-CB99C_DG.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-Cr-_-n9T.js";
+import { u as usePageBuilderEditor } from "./index-Bss8IrUk.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
@@ -20,7 +20,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const locales = pageBuilder.getLocales();
       const localeTabs = locales.map((v) => ({ tabId: `tab-${v}`, caption: v }));
       modal.openModal({
-        component: defineAsyncComponent(() => import("./PbHtmlEditorModal-aaecwH7V.js")),
+        component: defineAsyncComponent(() => import("./PbHtmlEditorModal-pn7PlMQg.js")),
         style: {
           width: "80%",
           height: "80%",
@@ -30,7 +30,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         bind: {
           html: JSON.parse(JSON.stringify(props.value || {})),
           locales,
-          localeTabs
+          localeTabs,
+          pageBuilder
         },
         on: {
           updateHtml: (html) => {

package/dist/{PbPropertyEditorImage-BQhiQyNM.js → PbPropertyEditorImage-CMPr66Dx.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
-import { u as usePageBuilderEditor } from "./index-Cr-_-n9T.js";
+import { u as usePageBuilderEditor } from "./index-Bss8IrUk.js";
 import { useModal } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };

package/dist/{PbPropertyEditorMultilineText-CT3vTbYY.js → PbPropertyEditorMultilineText-BR1FNVi6.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
 import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-Cr-_-n9T.js";
+import { u as usePageBuilderEditor } from "./index-Bss8IrUk.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorText-DmM_LMjC.js → PbPropertyEditorText-CWmfX2bt.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
 import { BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-Cr-_-n9T.js";
+import { u as usePageBuilderEditor } from "./index-Bss8IrUk.js";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbWidgetAddModal-BoYfb0dm.js → PbWidgetAddModal-haOQfRIi.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
 import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
-import { w as widgetPartDefinitions } from "./index-Cr-_-n9T.js";
+import { w as widgetPartDefinitions } from "./index-Bss8IrUk.js";
 const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
 const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", {
   class: "mb-8",

package/dist/components/modal/PbHtmlEditorModal.vue.d.ts

@@ -1,15 +1,18 @@
+import { PageBuilderEditor } from '../../model/page-builder-editor.ts';
 import { TabEntry } from '@g1cloud/bluesea';
 
 declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
     html?: Record<string, unknown> | undefined;
     locales?: string[] | undefined;
     localeTabs?: TabEntry[] | undefined;
+    pageBuilder: PageBuilderEditor;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     updateHtml: (html: Record<string, unknown>) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     html?: Record<string, unknown> | undefined;
     locales?: string[] | undefined;
     localeTabs?: TabEntry[] | undefined;
+    pageBuilder: PageBuilderEditor;
 }>>> & {
     onUpdateHtml?: ((html: Record<string, unknown>) => any) | undefined;
 }, {}, {}>;

package/dist/components/part/PbPage.vue.d.ts

@@ -1,11 +1,11 @@
 import { IPart } from '@g1cloud/page-builder-viewer';
 
 declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    page: IPart | undefined;
+    part: IPart;
     width: number;
     isMobilePage: boolean;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    page: IPart | undefined;
+    part: IPart;
     width: number;
     isMobilePage: boolean;
 }>>>, {}, {}>;

package/dist/components/part/PbPageWrapper.vue.d.ts

@@ -0,0 +1,21 @@
+import { IPart } from '@g1cloud/page-builder-viewer';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    part: IPart;
+    width: number;
+    isMobilePage: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    part: IPart;
+    width: number;
+    isMobilePage: boolean;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};