@g1cloud/page-builder-editor 1.0.0-alpha.10 → 1.0.0-alpha.12

package/css/page-builder-editor.scss

@@ -69,8 +69,13 @@
   overflow-y: auto;
   padding: 8px 0;
   flex-grow: 1;
+
+  &:focus {
+    outline: none;
+  }
 }
 
+
 .pb-sidebar {
   width: 300px;
   overflow: auto;
@@ -238,10 +243,18 @@
 
     .tags {
       height: 60%;
+
+      .content {
+        overflow-y: auto;
+      }
     }
 
     .style {
       height: 40%;
+
+      .content {
+        overflow-y: auto;
+      }
     }
 
     .bs-code-editor {

package/dist/HtmlEditorModal-CRzp6l55.js

@@ -0,0 +1,131 @@
+import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createSlots, renderList } from "vue";
+import { useModalHandle, 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_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: {},
+    locales: {},
+    localeTabs: {}
+  },
+  emits: ["updateHtml"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const tabId = ref(props.localeTabs && props.localeTabs[0].tabId);
+    const modalHandle = useModalHandle();
+    const html = ref(props.html || {});
+    const preview = computed(() => {
+      var _a;
+      let data = {};
+      (_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>` : "";
+      });
+      return data;
+    });
+    const updateTags = (locale, value) => {
+      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] = {};
+      html.value[locale].style = value;
+    };
+    const ok = () => {
+      emit("updateHtml", html.value);
+      modalHandle.close();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(BSModalFrame), {
+        class: "pb-html-editor-modal",
+        title: "HTML Editor"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(unref(BSTabSheet), {
+              "tab-id": tabId.value,
+              "onUpdate:tabId": _cache[0] || (_cache[0] = ($event) => tabId.value = $event),
+              tabs: _ctx.localeTabs,
+              class: "flex-grow-1"
+            }, createSlots({ _: 2 }, [
+              renderList(_ctx.locales, (locale) => {
+                return {
+                  name: `tab-${locale}`,
+                  fn: withCtx(() => [
+                    createElementVNode("div", _hoisted_2, [
+                      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_7, [
+                        createElementVNode("div", _hoisted_8, [
+                          _hoisted_9,
+                          createElementVNode("div", _hoisted_10, [
+                            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, [
+                            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"])
+                          ])
+                        ])
+                      ])
+                    ])
+                  ])
+                };
+              })
+            ]), 1032, ["tab-id", "tabs"])
+          ])
+        ]),
+        buttons: withCtx(() => [
+          createElementVNode("div", { class: "bs-layout-horizontal justify-content-center" }, [
+            createElementVNode("button", {
+              class: "mr-4",
+              onClick: ok
+            }, "OK")
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/PageBuilderEditor.vue.d.ts

@@ -3,7 +3,8 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     title?: string | undefined;
     editMode?: string | undefined;
     pageContent?: any;
-    language?: string | undefined;
+    locales?: string[] | undefined;
+    locale?: string | undefined;
 }>, {
     getLocalDesignPartContent: () => any[] | undefined;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
@@ -11,7 +12,8 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     title?: string | undefined;
     editMode?: string | undefined;
     pageContent?: any;
-    language?: string | undefined;
+    locales?: string[] | undefined;
+    locale?: string | undefined;
 }>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

package/dist/{PbPropertyEditorHtml-BVT2SwoK.js → PbPropertyEditorHtml-CbEOlq-s.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-jUNIezk-.js";
+import { u as usePageBuilderEditor } from "./index-BFtI1jYj.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
@@ -17,13 +17,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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];
-      }
+      const locales = pageBuilder.getLocales();
+      const localeTabs = locales.map((v) => ({ tabId: `tab-${v}`, caption: v }));
       modal.openModal({
-        component: defineAsyncComponent(() => import("./HtmlEditorModal-oXFayeg-.js")),
+        component: defineAsyncComponent(() => import("./HtmlEditorModal-CRzp6l55.js")),
         style: {
           width: "80%",
           height: "80%",
@@ -31,16 +28,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           minHeight: "400px"
         },
         bind: {
-          html
+          html: JSON.parse(JSON.stringify(props.value || {})),
+          locales,
+          localeTabs
         },
         on: {
-          updateHtml: (html2) => {
-            const language2 = pageBuilder.getLanguage();
-            const value = {
-              ...props.value || {},
-              [language2]: html2
-            };
-            emit("update-property-value", { html: value });
+          updateHtml: (html) => {
+            emit("update-property-value", { html });
           }
         }
       });

package/dist/{PbPropertyEditorImage-DLwg5dJz.js → PbPropertyEditorImage-5RZoQbLF.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-jUNIezk-.js";
+import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-BFtI1jYj.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorMultilineText-Bv4luXWg.js → PbPropertyEditorMultilineText-BMF9jHpy.js}

@@ -1,6 +1,6 @@
-import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
-import { BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-jUNIezk-.js";
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
+import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
+import { u as usePageBuilderEditor } from "./index-BFtI1jYj.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];
@@ -14,29 +14,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const emitUpdatePropertyValue = (value) => {
-      const properties = {};
-      if (props.value && typeof props.value === "object") {
-        properties[props.property.propertyName] = {
-          ...props.value,
-          [language.value]: value
-        };
-      } else {
-        properties[props.property.propertyName] = {
-          [language.value]: value
-        };
-      }
-      emit("update-property-value", properties);
-    };
     const pageBuilder = usePageBuilderEditor();
-    const language = computed(() => pageBuilder.language.value);
+    const locales = computed(() => pageBuilder.getLocales());
     const text = computed({
       get() {
-        return props.value && typeof props.value === "object" ? props.value[language.value] : "";
+        return props.value;
       },
-      set() {
+      // @ts-ignore
+      set(value) {
       }
     });
+    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, [
@@ -45,16 +37,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, null, 8, _hoisted_3)
         ]),
         createElementVNode("div", null, [
-          createVNode(unref(BSTextArea), {
+          _ctx.property.multiLang ? (openBlock(), createBlock(unref(BSMultiLangTextArea), {
+            key: 0,
             modelValue: text.value,
             "onUpdate:modelValue": [
               _cache[0] || (_cache[0] = ($event) => text.value = $event),
               emitUpdatePropertyValue
             ],
-            prefix: language.value,
+            locales: locales.value,
+            height: "60px",
+            width: "100%"
+          }, null, 8, ["modelValue", "locales"])) : (openBlock(), createBlock(unref(BSTextArea), {
+            key: 1,
+            modelValue: text.value,
+            "onUpdate:modelValue": [
+              _cache[1] || (_cache[1] = ($event) => text.value = $event),
+              emitUpdatePropertyValue
+            ],
             height: "60px",
             width: "100%"
-          }, null, 8, ["modelValue", "prefix"])
+          }, null, 8, ["modelValue"]))
         ])
       ]);
     };

package/dist/{PbPropertyEditorProduct-6STGd-Zs.js → PbPropertyEditorProduct-Dt5vraZc.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-jUNIezk-.js";
+import { u as usePageBuilderEditor, a as PageBuilderEditorEvent } from "./index-BFtI1jYj.js";
 const _hoisted_1 = { class: "property-editor property-editor-product flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

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

@@ -1,15 +1,17 @@
-type Html = {
-    tags: string;
-    style: string;
-};
+import { TabEntry } from '@g1cloud/bluesea';
+
 declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    html?: Html | undefined;
+    html?: Record<string, unknown> | undefined;
+    locales?: string[] | undefined;
+    localeTabs?: TabEntry[] | undefined;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    updateHtml: (html: Html) => void;
+    updateHtml: (html: Record<string, unknown>) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    html?: Html | undefined;
+    html?: Record<string, unknown> | undefined;
+    locales?: string[] | undefined;
+    localeTabs?: TabEntry[] | undefined;
 }>>> & {
-    onUpdateHtml?: ((html: Html) => any) | undefined;
+    onUpdateHtml?: ((html: Record<string, unknown>) => any) | undefined;
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,14 +1,15 @@
 import { MultiLangText } from '@g1cloud/page-builder-viewer';
 import { PartProperty } from '../../../model/part-property.ts';
+import { MultiLangString } from '@g1cloud/bluesea';
 
 declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
     property: PartProperty;
-    value?: MultiLangText | undefined;
+    value?: MultiLangString | undefined;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update-property-value": (properties: Record<string, MultiLangText>) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     property: PartProperty;
-    value?: MultiLangText | undefined;
+    value?: MultiLangString | undefined;
 }>>> & {
     "onUpdate-property-value"?: ((properties: Record<string, MultiLangText>) => any) | undefined;
 }, {}, {}>;