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

package/css/canvas.scss

@@ -1,124 +1,26 @@
-@import 'variable';
-@import 'canvas-page';
-@import 'canvas-section';
-@import 'canvas-block';
-@import 'canvas-widget';
 
-.font-icon {
-  font-family: Material Symbols Outlined, monospace;
-  font-size: 1rem;
-  max-width: 1em;
-}
-
-html, body {
-  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;
-  font-size: 12px;
-}
-
-body {
-  margin: 0;
-  padding: 0;
+.pb-canvas-wrapper {
   background-color: $color-canvas-frame-bg;
+  flex-grow: 1;
+  min-width: 0;
+  width: 0;
+  height: 100%;
+  padding: 20px;
   overflow: auto;
 }
 
-.pb-canvas-wrapper {
-  margin: 0;
-  padding: 0;
+.pb-canvas {
+  display: flex;
+  flex-direction: row;
+  transform-origin: top left;
   width: fit-content;
-  //overflow: auto;
-
-  .pb-canvas {
-    display: flex;
-    flex-direction: row;
-    flex: 1 1 auto;
-    //flex-grow: 1;
-    //flex-shrink: 1;
-    transform-origin: top left;
-    width: fit-content;
-    //margin: 0 auto;
-    margin: 0;
-    //padding: 0;
-    padding: 32px 40px 56px 40px;
-  }
-}
-
-.pb-position-mark {
-  background-color: #ff3333;
-  opacity: 0.5;
-  border-radius: 2px;
-}
-
-.pb-add-section-handle {
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-  z-index: 5;
-  height: 0;
-
-  &.top::before,
-  &.bottom::before,
-  &.middle::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  &.top {
-  }
-
-  &.middle {
-  }
-
-  &.bottom {
-    left: 50%;
-    bottom: -32px;
-  }
-
-  &:hover {
-    &.top::before,
-    &.bottom::before,
-    &.middle::before,
-    > i {
-      opacity: 1;
-    }
-  }
-
-  > i {
-    vertical-align: middle;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    font-size: 2rem;
-    transform: translate(-50%, -50%);
-    opacity: 0.2;
-  }
-}
-
-.pb-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  vertical-align: middle;
-}
-
-.pb-guideline {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
   height: 100%;
-  pointer-events: none;
+  margin: 0;
+}
 
-  &.selected {
-    z-index: 3;
-  }
+.pb-page-frame {
 
-  &.preselect {
-    z-index: 4;
+  iframe.page-frame {
+    border: 0;
   }
-}
+}

package/css/{canvas-block.scss → page-block.scss}

@@ -12,9 +12,21 @@
     background-color: #f0f0f0;
   }
 
-  &.selected {
-    outline: 2px solid #4998f8;
-    outline-offset: 1px;
+  //&.selected {
+  //  outline: 2px solid #4998f8;
+  //  outline-offset: -2px;
+  //  z-index: 999;
+  //}
+
+  &.selected::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid #4998f8;
     z-index: 999;
+    pointer-events: none;
   }
 }

package/css/page-builder-editor.scss

@@ -1,14 +1,5 @@
 @import 'variable';
-
-.pb-canvas-frame {
-  background-color: $color-canvas-frame-bg;
-
-  iframe.canvas-frame {
-    width: 100%;
-    height: 100%;
-    border: 0;
-  }
-}
+@import 'canvas';
 
 .pb-menu {
   width: 100%;
@@ -75,7 +66,6 @@
   }
 }
 
-
 .pb-sidebar {
   width: 300px;
   overflow: auto;

package/css/{canvas-page.scss → page-page.scss}

@@ -4,15 +4,29 @@
 }
 
 .pb-page {
-  margin: 20px 0 auto 0;
+  width: 100%;
+  margin: 0;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;
 
   .pb-page-content {
-    &.selected {
-      outline: 2px solid #4998f8;
-      outline-offset: 5px;
+    //&.selected {
+    //  outline: 2px solid #4998f8;
+    //  outline-offset: -2px;
+    //  z-index: 999;
+    //}
+
+    &.selected::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: 2px solid #4998f8;
+      z-index: 999;
+      pointer-events: none;
     }
   }
 

package/css/{canvas-section.scss → page-section.scss}

@@ -10,10 +10,22 @@
     background-color: #f0f0f0;
   }
 
-  &.selected {
-    outline: 2px solid #4998f8;
-    outline-offset: 1px;
+  //&.selected {
+  //  outline: 2px solid #4998f8;
+  //  outline-offset: -2px;
+  //  z-index: 999;
+  //}
+
+  &.selected::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid #4998f8;
     z-index: 999;
+    pointer-events: none;
   }
 
   &.pb-section-static {

package/css/{canvas-widget.scss → page-widget.scss}

@@ -5,10 +5,22 @@
   background-repeat: no-repeat;
   background-size: cover;
 
-  &.selected {
-    outline: 2px solid #4998f8;
-    outline-offset: 1px;
+  //&.selected {
+  //  outline: 2px solid #4998f8;
+  //  outline-offset: -2px;
+  //  z-index: 999;
+  //}
+
+  &.selected::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid #4998f8;
     z-index: 999;
+    pointer-events: none;
   }
 
   .children {

package/css/page.scss

@@ -0,0 +1,79 @@
+@import 'variable';
+@import 'page-page';
+@import 'page-section';
+@import 'page-block';
+@import 'page-widget';
+
+.font-icon {
+  font-family: Material Symbols Outlined, monospace;
+  font-size: 1rem;
+  max-width: 1em;
+}
+
+html, body {
+  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;
+  font-size: 12px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: $color-canvas-frame-bg;
+  overflow: hidden;
+}
+
+.pb-position-mark {
+  background-color: #ff3333;
+  opacity: 0.5;
+  border-radius: 2px;
+}
+
+.pb-add-section-handle {
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  z-index: 5;
+  height: 0;
+
+  &.top::before,
+  &.bottom::before,
+  &.middle::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &.top {
+  }
+
+  &.middle {
+  }
+
+  &.bottom {
+    left: 50%;
+    bottom: -32px;
+  }
+
+  &:hover {
+    &.top::before,
+    &.bottom::before,
+    &.middle::before,
+    > i {
+      opacity: 1;
+    }
+  }
+
+  > i {
+    vertical-align: middle;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    font-size: 2rem;
+    transform: translate(-50%, -50%);
+    opacity: 0.2;
+  }
+}

package/css/property-editor-youtube.scss

@@ -0,0 +1,16 @@
+.property-editor-youtube {
+  button {
+    color: #fff;
+    border: none;
+    padding: 4px 12px;
+    cursor: pointer;
+    line-height: 1;
+    width: 120px;
+    height: 28px;
+    background-color: #1f8fff;
+  }
+
+  .input-area {
+    height: 24px;
+  }
+}

package/dist/PageBuilderEditor.vue.d.ts

@@ -1,6 +1,6 @@
 import { PageBuilderToolbarPlugin } from './model/plugin.ts';
 
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     instanceId?: string | undefined;
     title?: string | undefined;
     pageContent?: string | undefined;
@@ -8,9 +8,9 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     locale?: string | undefined;
     toolbarPlugin?: PageBuilderToolbarPlugin | undefined;
     plugin?: unknown;
-}>, {
+}>>, {
     getPageContent: () => string;
-}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     instanceId?: string | undefined;
     title?: string | undefined;
     pageContent?: string | undefined;
@@ -18,7 +18,7 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     locale?: string | undefined;
     toolbarPlugin?: PageBuilderToolbarPlugin | undefined;
     plugin?: unknown;
-}>>>, {}, {}>;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -1,11 +1,11 @@
-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";
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createSlots, renderList, normalizeStyle } from "vue";
+import { useModalHandle, waitDuring, BSModalFrame, BSTabSheet, BSSelect, 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" };
 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 = { class: "content flex-grow-1" };
+const _hoisted_5 = { class: "bs-layout-horizontal pb-4 align-items-center justify-content-between" };
+const _hoisted_6 = { class: "content flex-grow-1 overflow-y-hidden" };
 const _hoisted_7 = ["srcdoc"];
 const _hoisted_8 = { class: "editor bs-layout-vertical pl-8 h-full" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -23,6 +23,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const localeTabId = ref(props.localeTabs && props.localeTabs[0].tabId);
     const modalHandle = useModalHandle();
     const html = ref(props.html || {});
+    const previewWidth = ref(480);
+    const previewStyle = computed(() => ({
+      width: `${previewWidth.value}px`,
+      height: "100%",
+      overflow: "auto",
+      transformOrigin: `top left`
+    }));
     const preview = computed(() => {
       var _a;
       let data = {};
@@ -41,17 +48,13 @@ ${_html.tags}` : "";
     ];
     const editorTabId = ref("tags");
     const updateTags = (locale, value) => {
-      if (!html.value)
-        html.value = {};
-      if (!html.value[locale])
-        html.value[locale] = {};
+      if (!html.value) html.value = {};
+      if (!html.value[locale]) html.value[locale] = {};
       html.value[locale].tags = value;
     };
     const updateStyle = (locale, value) => {
-      if (!html.value)
-        html.value = {};
-      if (!html.value[locale])
-        html.value[locale] = {};
+      if (!html.value) html.value = {};
+      if (!html.value[locale]) html.value[locale] = {};
       html.value[locale].style = value;
     };
     const ok = () => {
@@ -97,7 +100,7 @@ ${_html.tags}` : "";
             createVNode(unref(BSTabSheet), {
               "tab-id": localeTabId.value,
               "onUpdate:tabId": [
-                _cache[1] || (_cache[1] = ($event) => localeTabId.value = $event),
+                _cache[2] || (_cache[2] = ($event) => localeTabId.value = $event),
                 updateEditorHeight
               ],
               tabs: _ctx.localeTabs,
@@ -110,11 +113,21 @@ ${_html.tags}` : "";
                     createElementVNode("div", _hoisted_2, [
                       createElementVNode("div", _hoisted_3, [
                         createElementVNode("div", _hoisted_4, [
-                          _hoisted_5,
+                          createElementVNode("div", _hoisted_5, [
+                            _cache[3] || (_cache[3] = createElementVNode("div", { class: "title pb-4" }, "Preview", -1)),
+                            createVNode(unref(BSSelect), {
+                              modelValue: previewWidth.value,
+                              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => previewWidth.value = $event),
+                              items: [480, 768, 1024, 1280],
+                              "label-provider": (v) => `Screen Size: ${v}px`,
+                              "view-model": false
+                            }, null, 8, ["modelValue", "label-provider"])
+                          ]),
                           createElementVNode("div", _hoisted_6, [
                             createElementVNode("iframe", {
-                              srcdoc: preview.value[locale]
-                            }, null, 8, _hoisted_7)
+                              srcdoc: preview.value[locale],
+                              style: normalizeStyle(previewStyle.value)
+                            }, null, 12, _hoisted_7)
                           ])
                         ])
                       ]),
@@ -122,15 +135,16 @@ ${_html.tags}` : "";
                         createVNode(unref(BSTabSheet), {
                           "tab-id": editorTabId.value,
                           "onUpdate:tabId": [
-                            _cache[0] || (_cache[0] = ($event) => editorTabId.value = $event),
+                            _cache[1] || (_cache[1] = ($event) => editorTabId.value = $event),
                             updateEditorHeight
                           ],
                           tabs: editorTabs,
-                          class: "flex-grow-1"
+                          class: "compact flex-grow-1"
                         }, {
                           tags: withCtx(() => [
                             createVNode(unref(BSCodeEditor), {
                               "model-value": (html.value[locale] || {}).tags,
+                              class: "border-top-0",
                               "editor-height": "100%",
                               lang: "html",
                               "onUpdate:modelValue": (value) => updateTags(locale, value)
@@ -139,6 +153,7 @@ ${_html.tags}` : "";
                           style: withCtx(() => [
                             createVNode(unref(BSCodeEditor), {
                               "model-value": (html.value[locale] || {}).style,
+                              class: "border-top-0",
                               "editor-height": "100%",
                               lang: "css",
                               "onUpdate:modelValue": (value) => updateStyle(locale, value)

package/dist/{PbPropertyEditorColor-C554e0iO.js → PbPropertyEditorColor-CjVPQ69L.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-Bss8IrUk.js";
+import { P as PbColorPicker } from "./index-B7bPjhdc.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorHtml-CB99C_DG.js → PbPropertyEditorHtml-BA2fVHPA.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-Bss8IrUk.js";
+import { u as usePageBuilderEditor } from "./index-B7bPjhdc.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-pn7PlMQg.js")),
+        component: defineAsyncComponent(() => import("./PbHtmlEditorModal-dDR38rNy.js")),
         style: {
           width: "80%",
           height: "80%",

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

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
-import { u as usePageBuilderEditor } from "./index-Bss8IrUk.js";
+import { u as usePageBuilderEditor } from "./index-B7bPjhdc.js";
 import { useModal } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
@@ -18,8 +18,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const selectImage = () => {
       const imageProvider = pageBuilder.getProvider("imageProvider");
       if (imageProvider) {
-        imageProvider({ modal }, (url) => {
-          emit("update-property-value", { image: url });
+        imageProvider({ modal }, (media) => {
+          emit("update-property-value", { media });
         });
       }
     };

package/dist/{PbPropertyEditorMultilineText-BR1FNVi6.js → PbPropertyEditorMultilineText-ru4ikHma.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-Bss8IrUk.js";
+import { u as usePageBuilderEditor } from "./index-B7bPjhdc.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorText-CWmfX2bt.js → PbPropertyEditorText-tVPcjTNt.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-Bss8IrUk.js";
+import { u as usePageBuilderEditor } from "./index-B7bPjhdc.js";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/PbPropertyEditorYoutube-Dlfj7kat.js

@@ -0,0 +1,39 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
+import { useModal } from "@g1cloud/bluesea";
+import { s as selectYoutubeVideo } from "./index-B7bPjhdc.js";
+const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
+const _hoisted_2 = { class: "title" };
+const _hoisted_3 = ["textContent"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PbPropertyEditorYoutube",
+  props: {
+    property: {},
+    value: {}
+  },
+  emits: ["update-property-value"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const modal = useModal();
+    const emit = __emit;
+    const selectVideo = () => {
+      selectYoutubeVideo(modal, props.value, (url) => {
+        emit("update-property-value", { url: url || "" });
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("label", {
+            textContent: toDisplayString(_ctx.property.caption)
+          }, null, 8, _hoisted_3)
+        ]),
+        createElementVNode("div", null, [
+          createElementVNode("button", { onClick: selectVideo }, "Select Video")
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/{PbScreenSelectModal-DDATc9n1.js → PbScreenSelectModal-CnI1IsvW.js}

@@ -1,8 +1,7 @@
 import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode } from "vue";
 import { useModalHandle, BSModalFrame, BSRadioButton, BSButton } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "mb-16" };
-const _hoisted_2 = /* @__PURE__ */ createElementVNode("label", { class: "mr-8" }, "Which screen do you want to keep?", -1);
-const _hoisted_3 = { class: "text-right" };
+const _hoisted_2 = { class: "text-right" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PbScreenSelectModal",
   emits: ["select"],
@@ -22,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createElementVNode("div", null, [
             createElementVNode("div", _hoisted_1, [
-              _hoisted_2,
+              _cache[2] || (_cache[2] = createElementVNode("label", { class: "mr-8" }, "Which screen do you want to keep?", -1)),
               createElementVNode("div", null, [
                 createVNode(unref(BSRadioButton), {
                   modelValue: selection.value,
@@ -44,7 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ]),
         buttons: withCtx(() => [
-          createElementVNode("div", _hoisted_3, [
+          createElementVNode("div", _hoisted_2, [
             createVNode(unref(BSButton), {
               "button-color": "blue",
               caption: "OK",