@g1cloud/page-builder-editor 1.0.0-alpha.1 → 1.0.0-alpha.100

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,146 +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%;
-}
-
-.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,185 +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 {
-    padding: 0 8px;
-    margin: 6px 0;
-
-
-    .pb-tool-button-group {
-      &::after {
-        content: '';
-        height: 80%;
-        border-right: 1px solid $color-border-light;
-        align-self: center;
-      }
-
-      .pb-tool-button {
-        padding: 2px;
-
-        .tool-button {
-          width: 28px;
-          height: 28px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-  }
-}
-
-.pb-navigator {
-  width: 200px;
-  height: 100%;
-  overflow: auto;
-  border-right: 1px solid $color-border-light;
-}
-
-.pb-sidebar {
-  width: 300px;
-  overflow: auto;
-  border-left: 1px solid $color-border-light;
-
-  .pb-sidebar-properties {
-    padding: 4px 0;
-
-    .pb-sidebar-property-group {
-
-      padding: 4px 0;
-
-      .group-title {
-        padding: 4px 8px;
-        font-size: 90%;
-        font-weight: bold;
-      }
-
-      .group-editor {
-        padding: 4px 8px;
-        font-size: 0.9em;
-
-        .label {
-          padding: 0 0 8px 0;
-
-          label {
-            min-width: 6em;
-            max-width: 6em;
-            padding-right: 0.5em;
-            font-weight: bold;
-          }
-        }
-      }
-
-      .property-editor {
-        padding: 4px 8px;
-        font-size: 0.9em;
-
-        > .label {
-          padding: 0 0 8px 0;
-
-          label {
-            min-width: 6em;
-            max-width: 6em;
-            padding-right: 0.5em;
-            font-weight: bold;
-          }
-        }
-      }
-
-      .property-editor:nth-child(n+2) {
-        margin-top: 4px
-      }
-
-      @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-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;
-    }
-  }
-}

package/css/page-builder-viewer.scss

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

package/css/property-group-editor-background.scss

@@ -1,40 +0,0 @@
-.group-editor-background {
-  padding: 4px 8px;
-  font-size: 0.9em;
-
-  > div {
-    > label {
-      min-width: 6em;
-      max-width: 6em;
-      padding-right: 0.5em;
-      font-weight: bold;
-    }
-  }
-
-  .color {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .bs-text-input {
-      flex-grow: 1;
-    }
-  }
-
-  .image {
-    flex: 1;
-    padding-left: 8px;
-
-    button {
-      color: #fff;
-      border: none;
-      padding: 4px 12px;
-      cursor: pointer;
-      line-height: 1;
-      width: 100px;
-      height: 28px;
-      background-color: #1f8fff;
-    }
-  }
-}

package/css/property-group-editor-margin.scss

@@ -1,13 +0,0 @@
-.group-editor-margin {
-  padding: 4px 8px;
-  font-size: 0.9em;
-
-  > div {
-    > label {
-      min-width: 6em;
-      max-width: 6em;
-      padding-right: 0.5em;
-      font-weight: bold;
-    }
-  }
-}

package/css/property-group-editor-padding.scss

@@ -1,13 +0,0 @@
-.group-editor-padding {
-  padding: 4px 8px;
-  font-size: 0.9em;
-
-  > div {
-    > label {
-      min-width: 6em;
-      max-width: 6em;
-      padding-right: 0.5em;
-      font-weight: bold;
-    }
-  }
-}

package/css/property-group-editor-position.scss

@@ -1,13 +0,0 @@
-.group-editor-position {
-  padding: 4px 8px;
-  font-size: 0.9em;
-
-  > div {
-    > label {
-      min-width: 6em;
-      max-width: 6em;
-      padding-right: 0.5em;
-      font-weight: bold;
-    }
-  }
-}

package/css/property-group-editor-size.scss

@@ -1,13 +0,0 @@
-.group-editor-size {
-  padding: 4px 8px;
-  font-size: 0.9em;
-
-  > div {
-    > label {
-      min-width: 6em;
-      max-width: 6em;
-      padding-right: 0.5em;
-      font-weight: bold;
-    }
-  }
-}

package/css/variable.scss

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

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/PbPropertyEditorImage-BFIqG-bL.js

@@ -1,42 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
-import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor, P as PageBuilderEditorEvent } from "./index-BtILenNo.js";
-const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
-const _hoisted_2 = { class: "label" };
-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
-};

package/dist/PbPropertyEditorMultilineText-BMeNUGm8.js

@@ -1,42 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
-import { BSTextArea } from "@g1cloud/bluesea";
-const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
-const _hoisted_2 = { class: "label" };
-const _hoisted_3 = ["textContent"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "PbPropertyEditorMultilineText",
-  props: {
-    property: {},
-    value: {}
-  },
-  emits: ["update-property-value"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const emitUpdatePropertyValue = (value) => {
-      const properties = {};
-      properties[props.property.propertyName] = value;
-      emit("update-property-value", properties);
-    };
-    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, [
-          createVNode(unref(BSTextArea), {
-            "model-value": _ctx.value,
-            height: "60px",
-            width: "100%",
-            "onUpdate:modelValue": emitUpdatePropertyValue
-          }, null, 8, ["model-value"])
-        ])
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/dist/PbPropertyEditorProduct--cf9LI2Z.js

@@ -1,49 +0,0 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
-import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor, P as PageBuilderEditorEvent } from "./index-BtILenNo.js";
-const _hoisted_1 = { class: "property-editor property-editor-product flex-align-center" };
-const _hoisted_2 = { class: "label" };
-const _hoisted_3 = ["textContent"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "PbPropertyEditorProduct",
-  props: {
-    property: {},
-    value: {}
-  },
-  emits: ["update-property-value"],
-  setup(__props, { emit: __emit }) {
-    const pageBuilder = usePageBuilderEditor();
-    useModal();
-    const emit = __emit;
-    const selectProducts = () => {
-      var _a;
-      let itemCodes = "";
-      const selectedParts = pageBuilder.context.getSelectedParts();
-      if (selectedParts && selectedParts.length === 1) {
-        itemCodes = ((_a = selectedParts[0].properties) == null ? void 0 : _a.products) || "";
-      }
-      PageBuilderEditorEvent.emit.requestProducts({
-        pageBuilderId: pageBuilder.instanceId,
-        itemCodes,
-        callback: (products) => {
-          emit("update-property-value", { products: products.map((v) => v.itemCode).join(",") });
-        }
-      });
-    };
-    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: selectProducts }, "Select Product")
-        ])
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};