@g1cloud/page-builder-editor 1.0.0-alpha.6 → 1.0.0-alpha.8

package/css/page-builder-editor.scss

@@ -19,6 +19,7 @@
     .pb-tool-button-group {
       &::after {
         content: '';
+        margin: 0 8px;
         height: 80%;
         border-right: 1px solid $color-border-light;
         align-self: center;
@@ -26,6 +27,7 @@
 
       .pb-tool-button {
         padding: 2px;
+        margin: 0 2px;
 
         .tool-button {
           width: 28px;
@@ -75,23 +77,28 @@
   border: 1px solid $color-border-light;
 
   .pb-sidebar-properties {
-    padding: 4px 0;
+    padding: 0;
 
     .pb-sidebar-property-group {
+      &:not(:empty) {
+        padding: 16px 16px;
+        border-bottom: 1px solid #eaeaea;
 
-      padding: 4px 0;
+      }
 
       .group-title {
-        padding: 4px 8px;
-        font-size: 90%;
-        font-weight: bold;
+        > label {
+          padding: 4px 0;
+          font-size: 90%;
+          font-weight: 600;
+        }
       }
 
       .group-editor {
-        padding: 4px 8px;
+        padding: 4px 0;
         font-size: 0.9em;
 
-        .label {
+        .title {
           padding: 0 0 8px 0;
 
           label {
@@ -101,20 +108,29 @@
             font-weight: bold;
           }
         }
+
+        .sub-title {
+          label {
+            min-width: 6em;
+            max-width: 6em;
+            padding-right: 0.5em;
+            font-weight: 400;
+          }
+        }
       }
 
       .property-editor {
-        padding: 4px 8px;
+        padding: 4px 0;
         font-size: 0.9em;
 
-        > .label {
+        > .title {
           padding: 0 0 8px 0;
 
-          label {
+          > label {
             min-width: 6em;
             max-width: 6em;
             padding-right: 0.5em;
-            font-weight: bold;
+            font-weight: 600;
           }
         }
       }
@@ -123,12 +139,14 @@
         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";
@@ -203,4 +221,45 @@
       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/property-editor-color.scss

@@ -0,0 +1,5 @@
+.property-editor-color {
+  .color {
+    width: 50%;
+  }
+}

package/css/property-editor-html.scss

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

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

@@ -1,16 +1,4 @@
 .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;

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

@@ -1,16 +1,4 @@
 .group-editor-border {
-  padding: 4px 8px;
-  font-size: 0.9em;
-
-  > div {
-    > label {
-      min-width: 6em;
-      max-width: 6em;
-      padding-right: 0.5em;
-      font-weight: bold;
-    }
-  }
-
   .color {
     width: 50%;
     flex: 1;
@@ -22,4 +10,10 @@
       flex-grow: 1;
     }
   }
+
+  .corner-icon {
+    width: 1.1em;
+    height: 1.1em;
+    fill: #000;
+  }
 }

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

@@ -1,13 +1,2 @@
 .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 +1,2 @@
 .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 +1,2 @@
 .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 +1,2 @@
 .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/property-localpart.scss

@@ -1,7 +1,7 @@
 .property-editor-local-part {
 
-  .label {
-    font-weight: bold;
+  .title {
+    font-weight: 600;
   }
 
   button {

package/dist/HtmlEditorModal-DDoVYM6n.js

@@ -0,0 +1,94 @@
+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/PbPropertyEditorColor-BonGhf7Z.js

@@ -0,0 +1,57 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
+import { BSTextInput } from "@g1cloud/bluesea";
+import { P as PbColorPicker } from "./index-CFgXLaTI.js";
+const _hoisted_1 = { class: "property-editor property-editor-color" };
+const _hoisted_2 = { class: "title" };
+const _hoisted_3 = ["textContent"];
+const _hoisted_4 = { class: "bs-layout-horizontal flex-align-center color" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PbPropertyEditorColor",
+  props: {
+    property: {},
+    value: {}
+  },
+  emits: ["update-property-value"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const emptyColor = () => {
+    };
+    const saveOriginalColor = () => {
+    };
+    const updateColor = (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", _hoisted_4, [
+          createVNode(PbColorPicker, {
+            value: _ctx.value,
+            "hide-delete": "",
+            onEmpty: _cache[0] || (_cache[0] = ($event) => emptyColor()),
+            onHide: _cache[1] || (_cache[1] = ($event) => updateColor($event)),
+            onShow: saveOriginalColor,
+            onChangeColor: _cache[2] || (_cache[2] = ($event) => updateColor($event))
+          }, null, 8, ["value"]),
+          createVNode(unref(BSTextInput), {
+            "model-value": _ctx.value,
+            prefix: { type: "font-icon", value: "palette" },
+            class: "ml-4",
+            width: "",
+            "onUpdate:modelValue": updateColor
+          }, null, 8, ["model-value"])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/PbPropertyEditorHtml-DfOWZr6S.js

@@ -0,0 +1,65 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
+import { useModal } from "@g1cloud/bluesea";
+import { u as usePageBuilderEditor } from "./index-CFgXLaTI.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%",
+          maxWidth: "800px",
+          minWidth: "500px",
+          maxHeight: "800px"
+        },
+        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-D85hteOg.js → PbPropertyEditorImage-Du9R6CBU.js}

@@ -1,8 +1,8 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor, P as PageBuilderEditorEvent } from "./index-DQLcq5fP.js";
+import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-CFgXLaTI.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
-const _hoisted_2 = { class: "label" };
+const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyEditorImage",

package/dist/{PbPropertyEditorMultilineText-BFzT7dlG.js → PbPropertyEditorMultilineText-bEBZmvFa.js}

@@ -1,8 +1,8 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
 import { BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-DQLcq5fP.js";
+import { u as usePageBuilderEditor } from "./index-CFgXLaTI.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
-const _hoisted_2 = { class: "label" };
+const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyEditorMultilineText",

package/dist/{PbPropertyEditorProduct-CUSpnV8o.js → PbPropertyEditorProduct-gzGulWGg.js}

@@ -1,8 +1,8 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor, P as PageBuilderEditorEvent } from "./index-DQLcq5fP.js";
+import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-CFgXLaTI.js";
 const _hoisted_1 = { class: "property-editor property-editor-product flex-align-center" };
-const _hoisted_2 = { class: "label" };
+const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyEditorProduct",

package/dist/{PbPropertyEditorReadonlyText-Bk0WJxA0.js → PbPropertyEditorReadonlyText-Dgp_AVOD.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
 const _hoisted_1 = { class: "property-editor property-editor-readonly-text" };
-const _hoisted_2 = { class: "label" };
+const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
 const _hoisted_4 = ["textContent"];
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorSelect-BJovN1su.js → PbPropertyEditorSelect-CWedbXJI.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
 import { BSSelect } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-select flex-align-center" };
-const _hoisted_2 = { class: "label" };
+const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyEditorSelect",

package/dist/{PbPropertyEditorText-DNdXl-Tr.js → PbPropertyEditorText-BWOKvwD9.js}

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
 import { BSTextInput } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
-const _hoisted_2 = { class: "label" };
+const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyEditorText",

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

@@ -0,0 +1,23 @@
+type Html = {
+    tags: string;
+    style: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    html?: Html | undefined;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    updateHtml: (html: Html) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    html?: Html | undefined;
+}>>> & {
+    onUpdateHtml?: ((html: Html) => any) | undefined;
+}, {}, {}>;
+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;
+    };
+};

package/dist/components/sidebar/property/PbPropertyEditorColor.vue.d.ts

@@ -0,0 +1,23 @@
+import { PartProperty } from '../../../model/part-property.ts';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    property: PartProperty;
+    value?: string | undefined;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update-property-value": (properties: Record<string, string>) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    property: PartProperty;
+    value?: string | undefined;
+}>>> & {
+    "onUpdate-property-value"?: ((properties: Record<string, string>) => any) | undefined;
+}, {}, {}>;
+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;
+    };
+};

package/dist/components/sidebar/property/PbPropertyEditorHtml.vue.d.ts

@@ -0,0 +1,23 @@
+import { PartProperty } from '../../../model/part-property.ts';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    property: PartProperty;
+    value?: unknown;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update-property-value": (properties: Record<string, unknown>) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    property: PartProperty;
+    value?: unknown;
+}>>> & {
+    "onUpdate-property-value"?: ((properties: Record<string, unknown>) => any) | undefined;
+}, {}, {}>;
+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;
+    };
+};

package/dist/components/ui/PbColorPicker.vue.d.ts

@@ -5,10 +5,10 @@ declare const _default: import('vue').DefineComponent<{
         default: string;
     };
 }, {
-    appliedColor: import('vue').ComputedRef<string>;
+    appliedColor: import('vue').ComputedRef<any>;
     isShowColorPicker: import('vue').Ref<boolean>;
     toggle: (value?: boolean) => void;
-    color: import('vue').Ref<string>;
+    color: import('vue').Ref<any>;
     emptyColor: () => void;
     colorHistory: string[] | undefined;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{