@g1cloud/page-builder-editor 1.0.0-alpha.9 → 1.0.0-alpha.90

package/css/canvas-widget.scss

@@ -1,41 +0,0 @@
-.pb-widget {
-  position: relative;
-  outline: 1px dashed #ccc;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  &.selected {
-    outline: 2px solid #27ae60;
-    outline-offset: 1px;
-    z-index: 999;
-  }
-
-  .children {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-
-  .pan-handle {
-    position: absolute;
-    left: -6px;
-    top: -6px;
-    width: 12px;
-    height: 12px;
-    background-color: #27ae60;
-    cursor: move;
-  }
-
-  .resize-handle {
-    position: absolute;
-    right: -6px;
-    bottom: -6px;
-    width: 12px;
-    height: 12px;
-    background-color: #27ae60;
-    cursor: nwse-resize;
-  }
-}
-
-@import "@g1cloud/page-builder-viewer/css/widget";

package/css/canvas.scss

@@ -1,147 +0,0 @@
-@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 {
-  background-color: white;
-  height: 100%;
-  margin: 0;
-}
-
-.pb-canvas-wrapper {
-  padding: 32px 40px 56px 40px;
-  height: 100%;
-  background-color: $color-canvas-frame-bg;
-  overflow: auto;
-
-  .pb-canvas {
-    // background-color: white;
-    display: flex;
-    flex-direction: row;
-    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;
-  }
-}
-
-.pb-position-mark {
-  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,
-  &.middle::before {
-    content: '';
-    position: absolute;
-    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,
-    > i {
-      opacity: 1;
-    }
-  }
-
-  > i {
-    vertical-align: middle;
-    position: absolute;
-    top: 50%;
-    // left: 50%;
-    left: -20px;
-    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;
-
-  &.selected {
-    z-index: 3;
-  }
-
-  &.preselect {
-    z-index: 4;
-  }
-}

package/css/page-builder-editor.scss

@@ -1,265 +0,0 @@
-@import 'variable';
-
-.pb-canvas-frame {
-  background-color: $color-canvas-frame-bg;
-
-  iframe.canvas-frame {
-    width: 100%;
-    height: 100%;
-    border: 0;
-  }
-}
-
-.pb-menu {
-  width: 100%;
-
-  .pb-toolbar {
-    margin: 0 -8px;
-
-    .pb-tool-button-group {
-      &::after {
-        content: '';
-        margin: 0 8px;
-        height: 80%;
-        border-right: 1px solid $color-border-light;
-        align-self: center;
-      }
-
-      .pb-tool-button {
-        padding: 2px;
-        margin: 0 2px;
-
-        .tool-button {
-          width: 28px;
-          height: 28px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-  }
-}
-
-.editor-wrapper {
-  height: 100%;
-}
-
-.pb-editor {
-  height: 100%;
-}
-
-.pb-editor-body {
-  padding: 8px 0 0;
-  gap: 8px;
-  height: 1px;
-
-  .bs-tab-sheet {
-    .tab-bar {
-      .tabs {
-        padding-top: 0;
-      }
-    }
-  }
-}
-
-.pb-navigator {
-  width: 200px;
-  height: 1px;
-  overflow-y: auto;
-  padding: 8px 0;
-  flex-grow: 1;
-}
-
-.pb-sidebar {
-  width: 300px;
-  overflow: auto;
-  border: 1px solid $color-border-light;
-
-  .pb-sidebar-properties {
-    padding: 0;
-
-    .pb-sidebar-property-group {
-      &:not(:empty) {
-        padding: 16px 16px;
-        border-bottom: 1px solid #eaeaea;
-
-      }
-
-      .group-title {
-        > label {
-          padding: 4px 0;
-          font-size: 90%;
-          font-weight: 600;
-        }
-      }
-
-      .group-editor {
-        padding: 4px 0;
-        font-size: 0.9em;
-
-        .title {
-          padding: 0 0 8px 0;
-
-          label {
-            min-width: 6em;
-            max-width: 6em;
-            padding-right: 0.5em;
-            font-weight: bold;
-          }
-        }
-
-        .sub-title {
-          label {
-            min-width: 6em;
-            max-width: 6em;
-            padding-right: 0.5em;
-            font-weight: 400;
-          }
-        }
-      }
-
-      .property-editor {
-        padding: 4px 0;
-        font-size: 0.9em;
-
-        > .title {
-          padding: 0 0 8px 0;
-
-          > label {
-            min-width: 6em;
-            max-width: 6em;
-            padding-right: 0.5em;
-            font-weight: 600;
-          }
-        }
-      }
-
-      .property-editor:nth-child(n+2) {
-        margin-top: 4px
-      }
-
-      @import "./property-editor-color";
-      @import "./property-editor-image";
-      @import "./property-editor-multiline-text";
-      @import "./property-editor-product";
-      @import "./property-editor-readonly-text";
-      @import "./property-editor-select";
-      @import "./property-editor-text";
-      @import "./property-editor-html";
-
-      @import "./property-group-editor-background";
-      @import "./property-group-editor-border";
-      @import "./property-group-editor-position";
-      @import "./property-group-editor-size";
-
-      @import "./property-localpart";
-    }
-  }
-}
-
-.pb-color-picker {
-  display: inline-flex;
-  position: relative;
-
-  .buttons {
-    display: flex;
-    padding: 0;
-
-    button {
-      width: 24px;
-      height: 24px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &.none {
-        position: relative;
-        overflow: hidden;
-
-        &::after {
-          content: "\00A0";
-          display: inline-block;
-          width: 100px;
-          height: 1px;
-          background: red;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%) rotate(45deg);
-        }
-      }
-
-      &.picker-button {
-        border: 1px solid #cccccc;
-      }
-
-      i {
-        font-size: 1.4rem;
-      }
-    }
-  }
-
-  .sketch-wrap {
-    width: 220px;
-    position: absolute;
-    z-index: 10;
-    left: -12px;
-    top: 24px;
-    white-space: break-spaces;
-    text-align: left;
-  }
-}
-
-.pb-part-add-modal {
-  .group {
-
-    .part {
-      @extend .bs-clickable;
-      border: 1px solid $color-border-light;
-      border-radius: 4px;
-      padding: 8px 16px;
-    }
-  }
-}
-
-.pb-html-editor-modal {
-  .preview {
-    width: 50%;
-
-    .content {
-      border: solid 1px #ccc;
-      overflow-y: auto;
-    }
-  }
-
-  .editor {
-    width: 50%;
-
-    .tags {
-      height: 60%;
-    }
-
-    .style {
-      height: 40%;
-    }
-
-    .bs-code-editor {
-      height: 100%;
-    }
-  }
-
-  .buttons {
-    text-align: center;
-
-    button {
-      color: #fff;
-      border: none;
-      padding: 4px 12px;
-      cursor: pointer;
-      line-height: 1;
-      height: 28px;
-      background-color: #1f8fff;
-    }
-  }
-}

package/css/page-builder-viewer.scss

@@ -1 +0,0 @@
-@import '@g1cloud/page-builder-viewer/css/page-builder-viewer';

package/css/variable.scss

@@ -1 +0,0 @@
-$color-canvas-frame-bg: #aaa;

package/dist/HtmlEditorModal-DDoVYM6n.js

@@ -1,94 +0,0 @@
-import { defineComponent, ref, computed, onMounted, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode } from "vue";
-import { useModalHandle, BSModalFrame, BSCodeEditor } from "@g1cloud/bluesea";
-const _hoisted_1 = { class: "bs-layout-vertical pb-html-editor-modal flex-grow-1 h-full" };
-const _hoisted_2 = { class: "bs-layout-horizontal flex-grow-1" };
-const _hoisted_3 = { class: "preview flex-grow-1" };
-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 _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "HtmlEditorModal",
-  props: {
-    html: {}
-  },
-  emits: ["updateHtml"],
-  setup(__props, { emit: __emit }) {
-    var _a, _b;
-    const props = __props;
-    const emit = __emit;
-    const modalHandle = useModalHandle();
-    const tags = ref(((_a = props.html) == null ? void 0 : _a.tags) || "");
-    const style = ref(((_b = props.html) == null ? void 0 : _b.style) || "");
-    const html = computed(() => `${tags.value || ""}
-<style>${style.value || ""}</style>`);
-    onMounted(async () => {
-    });
-    const ok = () => {
-      emit("updateHtml", {
-        tags: tags.value || "",
-        style: style.value || ""
-      });
-      modalHandle.close();
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(BSModalFrame), { title: "HTML Editor" }, {
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
-            createElementVNode("div", _hoisted_2, [
-              createElementVNode("div", _hoisted_3, [
-                createElementVNode("div", _hoisted_4, [
-                  _hoisted_5,
-                  createElementVNode("div", {
-                    class: "content flex-grow-1",
-                    innerHTML: html.value
-                  }, null, 8, _hoisted_6)
-                ])
-              ]),
-              createElementVNode("div", _hoisted_7, [
-                createElementVNode("div", _hoisted_8, [
-                  _hoisted_9,
-                  createElementVNode("div", _hoisted_10, [
-                    createVNode(unref(BSCodeEditor), {
-                      modelValue: tags.value,
-                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tags.value = $event),
-                      "editor-height": "100%",
-                      lang: "html"
-                    }, null, 8, ["modelValue"])
-                  ])
-                ]),
-                createElementVNode("div", _hoisted_11, [
-                  _hoisted_12,
-                  createElementVNode("div", _hoisted_13, [
-                    createVNode(unref(BSCodeEditor), {
-                      modelValue: style.value,
-                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => style.value = $event),
-                      "editor-height": "100%",
-                      lang: "css"
-                    }, null, 8, ["modelValue"])
-                  ])
-                ])
-              ])
-            ]),
-            createElementVNode("div", { class: "buttons pt-24" }, [
-              createElementVNode("button", {
-                class: "mr-4",
-                onClick: ok
-              }, "OK")
-            ])
-          ])
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/dist/PbPartAddModal-DuLpnV4E.js

@@ -1,50 +0,0 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
-import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
-const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
-const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
-const _hoisted_3 = ["onClick", "textContent"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "PbPartAddModal",
-  props: {
-    pageBuilder: {},
-    partDefinitionGroups: {}
-  },
-  emits: ["selectHandler"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const modalHandle = useModalHandle();
-    const select = (partDefinition) => {
-      emit("selectHandler", partDefinition);
-      modalHandle.close();
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(BSModalFrame), { title: "Add Design Part" }, {
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.partDefinitionGroups, (group) => {
-              return openBlock(), createElementBlock("div", {
-                key: group.groupName,
-                class: "group mb-16"
-              }, [
-                createElementVNode("div", _hoisted_2, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(group.partDefinitions, (part) => {
-                    return openBlock(), createElementBlock("div", {
-                      key: part.partName,
-                      class: "part",
-                      onClick: ($event) => select(part),
-                      textContent: toDisplayString(part.caption)
-                    }, null, 8, _hoisted_3);
-                  }), 128))
-                ])
-              ]);
-            }), 128))
-          ])
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/dist/PbPropertyEditorHtml-Co4dM1CR.js

@@ -1,64 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
-import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-DQ22qk5v.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: "PbPropertyEditorHtml",
-  props: {
-    property: {},
-    value: {}
-  },
-  emits: ["update-property-value"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const modal = useModal();
-    const pageBuilder = usePageBuilderEditor();
-    const emit = __emit;
-    const editHtml = () => {
-      const language = pageBuilder.getLanguage();
-      let html;
-      if (props.value && typeof props.value === "object") {
-        html = props.value[language];
-      }
-      modal.openModal({
-        component: defineAsyncComponent(() => import("./HtmlEditorModal-DDoVYM6n.js")),
-        style: {
-          width: "80%",
-          height: "80%",
-          minWidth: "500px",
-          minHeight: "400px"
-        },
-        bind: {
-          html
-        },
-        on: {
-          updateHtml: (html2) => {
-            const language2 = pageBuilder.getLanguage();
-            const value = {
-              ...props.value || {},
-              [language2]: html2
-            };
-            emit("update-property-value", { html: value });
-          }
-        }
-      });
-    };
-    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: editHtml }, "Edit HTML")
-        ])
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/dist/PbPropertyEditorImage-DRDbq11U.js

@@ -1,42 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
-import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-DQ22qk5v.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: "PbPropertyEditorImage",
-  props: {
-    property: {},
-    value: {}
-  },
-  emits: ["update-property-value"],
-  setup(__props, { emit: __emit }) {
-    useModal();
-    const pageBuilder = usePageBuilderEditor();
-    const emit = __emit;
-    const selectImage = () => {
-      PageBuilderEditorEvent.emit.requestImage({
-        pageBuilderId: pageBuilder.instanceId,
-        callback: (url) => {
-          emit("update-property-value", { image: 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: selectImage }, "Select Image")
-        ])
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};