@g1cloud/page-builder-editor 1.0.0-alpha.96 → 1.0.0-alpha.98

package/css/page-builder-editor.css

@@ -216,23 +216,24 @@
   flex-direction: row;
   align-items: center;
 }
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color label {
+  display: inline-block;
+  width: 80px;
+}
 .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color .bs-text-input {
-  flex-grow: 1;
+  flex-grow: 0;
+  width: 104px;
 }
-.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image {
-  flex: 1;
-  padding-left: 8px;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image label {
+  display: inline-block;
+  width: 80px;
 }
-.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image button {
-  color: #fff;
-  border: none;
-  padding: 4px 12px;
-  cursor: pointer;
-  line-height: 1;
-  width: 120px;
-  height: 26px;
-  background-color: var(--primary);
-  border-radius: 2px;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image .bs-button.select-button {
+  width: 132px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image .url {
+  word-break: break-word !important;
+  word-wrap: break-word !important;
 }
 .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color {
   width: 50%;

package/dist/{PbPropertyEditorColor-CbJ-nhwi.js → PbPropertyEditorColor-CpCyIjwS.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
 import { vT, BSTextInput } from "@g1cloud/bluesea";
-import { P as PbColorPicker } from "./index-BGT2UpHO.js";
+import { P as PbColorPicker } from "./index-bTsjAv2l.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = { class: "bs-layout-horizontal flex-align-center color" };

package/dist/{PbPropertyEditorCssLength-Di_-TNSV.js → PbPropertyEditorCssLength-DxcSclK9.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
 import { vT, BSTextInput } from "@g1cloud/bluesea";
-import { t as toCssLength } from "./index-BGT2UpHO.js";
+import { t as toCssLength } from "./index-bTsjAv2l.js";
 const _hoisted_1 = { class: "property-editor property-editor-number flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorHtml-7ckF6FtJ.js → PbPropertyEditorHtml-Chtjtv6-.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, defineAsyncComponent } from "vue";
 import { useModal, vT } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BGT2UpHO.js";
+import { u as usePageBuilderEditor } from "./index-bTsjAv2l.js";
 const _hoisted_1 = { class: "property-editor property-editor-html flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorImage-DL6jG71W.js → PbPropertyEditorImage-DvjpV1hv.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, toDisplayString, createVNode, createCommentVNode, Fragment } from "vue";
-import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-BGT2UpHO.js";
+import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-bTsjAv2l.js";
 import { useModal, vT, BSButton, BSMultiLangTextInput, showNotification } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-image" };
 const _hoisted_2 = { class: "title" };

package/dist/{PbPropertyEditorMultilineText-D_QXOpQ-.js → PbPropertyEditorMultilineText-B0JUZw_Q.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
 import { vT, BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BGT2UpHO.js";
+import { u as usePageBuilderEditor } from "./index-bTsjAv2l.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorText-CRii5ReX.js → PbPropertyEditorText-BpLqKfaJ.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
 import { vT, BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BGT2UpHO.js";
+import { u as usePageBuilderEditor } from "./index-bTsjAv2l.js";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorYoutube-BJ7tl-K6.js → PbPropertyEditorYoutube-D9rwvL_i.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref } from "vue";
 import { useModal, vT } from "@g1cloud/bluesea";
-import { s as selectYoutubeVideo } from "./index-BGT2UpHO.js";
+import { s as selectYoutubeVideo } from "./index-bTsjAv2l.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbWidgetAddModal-Y_2_QQY2.js → PbWidgetAddModal-BnF61r3d.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
 import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
-import { w as widgetPartDefinitions } from "./index-BGT2UpHO.js";
+import { w as widgetPartDefinitions } from "./index-bTsjAv2l.js";
 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"];

package/dist/{index-BGT2UpHO.js → index-bTsjAv2l.js}

@@ -6886,16 +6886,26 @@ const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
   props: {
     part: {}
   },
-  emits: ["update:visible"],
+  emits: ["hideParent", "showParent"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const visible = ref(true);
-    const updateVisible = (value) => {
+    const hideParent = () => {
       var _a, _b;
-      visible.value = value;
+      visible.value = false;
       const hideParentWhenInvisible = ((_a = props.part.properties) == null ? void 0 : _a.hideParentWhenInvisible) === true || ((_b = props.part.properties) == null ? void 0 : _b.hideParentWhenInvisible) === "true";
-      emit("update:visible", value, hideParentWhenInvisible);
+      if (hideParentWhenInvisible) {
+        emit("hideParent", props.part.partId);
+      }
+    };
+    const showParent = () => {
+      var _a, _b;
+      visible.value = true;
+      const hideParentWhenInvisible = ((_a = props.part.properties) == null ? void 0 : _a.hideParentWhenInvisible) === true || ((_b = props.part.properties) == null ? void 0 : _b.hideParentWhenInvisible) === "true";
+      if (hideParentWhenInvisible) {
+        emit("showParent", props.part.partId);
+      }
     };
     const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
     const style = computed(() => ({
@@ -6939,7 +6949,8 @@ const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
         thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
           key: 0,
           part: _ctx.part,
-          "onUpdate:visible": updateVisible
+          onHideParent: hideParent,
+          onShowParent: showParent
         }, null, 40, ["part"])) : createCommentVNode("", true)
       ], 14, _hoisted_1$8$1)), [
         [vShow, visible.value]
@@ -6953,16 +6964,23 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
     part: {},
     isMobilePage: { type: Boolean }
   },
-  emits: ["update:visible"],
+  emits: ["hideParent", "showParent"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const hiddenChildren = ref({});
     const visible = ref(true);
-    const updateVisible = (value, hideParentWhenInvisible) => {
-      if (hideParentWhenInvisible && !value) {
-        visible.value = false;
+    const hideParent = (partId) => {
+      visible.value = false;
+      hiddenChildren.value[partId] = true;
+      emit("hideParent", props.part.partId);
+    };
+    const showParent = (partId) => {
+      delete hiddenChildren.value[partId];
+      if (Object.keys(hiddenChildren.value).length === 0) {
+        visible.value = true;
+        emit("showParent", props.part.partId);
       }
-      emit("update:visible", visible.value, hideParentWhenInvisible);
     };
     const validTags = ["div", "section", "li"];
     const tag = computed(() => {
@@ -7013,7 +7031,8 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
             return openBlock(), createBlock$1(_sfc_main$b$1, {
               key: child.partId,
               part: child,
-              "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
+              onHideParent: hideParent,
+              onShowParent: showParent
             }, null, 8, ["part"]);
           }), 128)) : createCommentVNode("", true)
         ]),
@@ -7030,12 +7049,22 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
     part: {},
     isMobilePage: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["hideParent", "showParent"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
+    const hiddenChildren = ref({});
     const visible = ref(true);
-    const updateVisible = (value, hideParentWhenInvisible) => {
-      if (hideParentWhenInvisible && !value) {
-        visible.value = false;
+    const hideParent = (partId) => {
+      visible.value = false;
+      hiddenChildren.value[partId] = true;
+      emit("hideParent", props.part.partId);
+    };
+    const showParent = (partId) => {
+      delete hiddenChildren.value[partId];
+      if (Object.keys(hiddenChildren.value).length === 0) {
+        visible.value = true;
+        emit("showParent", props.part.partId);
       }
     };
     const validTags = ["div", "section", "ul"];
@@ -7088,7 +7117,8 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
               key: child.partId,
               "is-mobile-page": _ctx.isMobilePage,
               part: child,
-              "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
+              onHideParent: hideParent,
+              onShowParent: showParent
             }, null, 8, ["is-mobile-page", "part"]);
           }), 128)) : createCommentVNode("", true)
         ]),
@@ -8562,16 +8592,16 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-CRii5ReX.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BpLqKfaJ.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-D_QXOpQ-.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-B0JUZw_Q.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
-    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-Di_-TNSV.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CbJ-nhwi.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DL6jG71W.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-7ckF6FtJ.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-BJ7tl-K6.js"))
+    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-DxcSclK9.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CpCyIjwS.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DvjpV1hv.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Chtjtv6-.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-D9rwvL_i.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -11868,10 +11898,10 @@ const _sfc_main$i = defineComponent({
       }
     );
     watch(
-      () => color.value,
-      () => setTimeout(() => {
+      () => appliedColor.value,
+      () => {
         if (appliedColor.value) emit("change-color", appliedColor.value);
-      }, 100),
+      },
       { deep: true }
     );
     watch(
@@ -11935,9 +11965,12 @@ const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_
 const _hoisted_1$g = { class: "group-editor group-editor-background" };
 const _hoisted_2$8 = { class: "flex-align-center" };
 const _hoisted_3$5 = { class: "title" };
-const _hoisted_4$4 = { class: "bs-layout-horizontal" };
-const _hoisted_5$4 = { class: "color" };
-const _hoisted_6$4 = { class: "image" };
+const _hoisted_4$4 = { class: "color" };
+const _hoisted_5$4 = { class: "image mt-4" };
+const _hoisted_6$4 = {
+  key: 0,
+  class: "url mt-8"
+};
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorBackground",
   props: {
@@ -11948,18 +11981,20 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const props = __props;
     const pageBuilder = usePageBuilderEditor();
     const modal = useModal();
-    const color = computed(() => getPropertyValueOfParts(props.selectedParts, "backgroundColor"));
-    const emptyColor = () => {
-    };
     const updatePropertyValue = (properties) => {
       pageBuilder.commandRegistry.executeCommand(
         ChangePropertyCommand.COMMAND_ID,
         { properties, targetParts: props.selectedParts }
       );
     };
+    const color = computed(() => getPropertyValueOfParts(props.selectedParts, "backgroundColor"));
+    const emptyColor = () => {
+    };
     const saveOriginalColor = () => {
     };
     const updateColor = (value) => updatePropertyValue({ backgroundColor: value });
+    const deleteColor = (value) => updatePropertyValue({ backgroundColor: "" });
+    const image = computed(() => getPropertyValueOfParts(props.selectedParts, "backgroundImage"));
     const selectImage = () => {
       const imageProvider = pageBuilder.getProvider("imageProvider");
       if (imageProvider) {
@@ -11970,6 +12005,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         });
       }
     };
+    const deleteImage = (value) => updatePropertyValue({ backgroundImage: "" });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("div", _hoisted_2$8, [
@@ -11978,27 +12014,63 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               [unref(vT), { key: "pb.prop.background" }]
             ])
           ]),
-          createElementVNode("div", _hoisted_4$4, [
-            createElementVNode("div", _hoisted_5$4, [
+          createElementVNode("div", null, [
+            createElementVNode("div", _hoisted_4$4, [
+              withDirectives(createElementVNode("label", null, null, 512), [
+                [unref(vT), { key: "pb.prop.color" }]
+              ]),
               createVNode(PbColorPicker, {
                 value: color.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))
+                onChangeColor: _cache[1] || (_cache[1] = ($event) => updateColor($event))
               }, null, 8, ["value"]),
               createVNode(unref(BSTextInput), {
                 "model-value": color.value,
                 class: "ml-4",
                 width: "",
                 "onUpdate:modelValue": updateColor
-              }, null, 8, ["model-value"])
+              }, null, 8, ["model-value"]),
+              color.value ? withDirectives((openBlock(), createBlock$1(unref(BSButton), {
+                key: 0,
+                class: "ml-4 px-4",
+                "left-icon": "close",
+                onClick: deleteColor
+              }, null, 512)), [
+                [
+                  unref(vT),
+                  { key: "pb.menu.delete" },
+                  void 0,
+                  { title: true }
+                ]
+              ]) : createCommentVNode("", true)
             ]),
-            createElementVNode("div", _hoisted_6$4, [
-              withDirectives(createElementVNode("button", { onClick: selectImage }, null, 512), [
-                [unref(vT), { key: "pb.prop.selectImage" }]
-              ])
+            createElementVNode("div", _hoisted_5$4, [
+              withDirectives(createElementVNode("label", null, null, 512), [
+                [unref(vT), { key: "pb.prop.image" }]
+              ]),
+              createVNode(unref(BSButton), {
+                caption: { key: "pb.prop.selectImage" },
+                "button-color": "blue",
+                class: "select-button",
+                onClick: selectImage
+              }),
+              image.value ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
+                createTextVNode(toDisplayString(image.value) + " ", 1),
+                withDirectives(createVNode(unref(BSButton), {
+                  class: "ml-4 px-4",
+                  "left-icon": "close",
+                  onClick: deleteImage
+                }, null, 512), [
+                  [
+                    unref(vT),
+                    { key: "pb.menu.delete" },
+                    void 0,
+                    { title: true }
+                  ]
+                ])
+              ])) : createCommentVNode("", true)
             ])
           ])
         ])
@@ -13312,7 +13384,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-Y_2_QQY2.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BnF61r3d.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -15749,6 +15821,10 @@ const enTexts = [
     key: "pb.menu.addWidgetInside",
     text: "Add Widget Inside"
   },
+  {
+    key: "pb.menu.delete",
+    text: "Delete"
+  },
   {
     key: "pb.menu.deletePart",
     text: "Delete"
@@ -15805,6 +15881,10 @@ const enTexts = [
     key: "pb.prop.background",
     text: "Background"
   },
+  {
+    key: "pb.prop.color",
+    text: "Color"
+  },
   {
     key: "pb.prop.selectImage",
     text: "Select Image"
@@ -16087,6 +16167,10 @@ const jaTexts = [
     key: "pb.menu.addWidgetInside",
     text: "内側にウィジェットを追加"
   },
+  {
+    key: "pb.menu.delete",
+    text: "削除"
+  },
   {
     key: "pb.menu.deletePart",
     text: "削除"
@@ -16143,6 +16227,10 @@ const jaTexts = [
     key: "pb.prop.background",
     text: "背景"
   },
+  {
+    key: "pb.prop.color",
+    text: "色"
+  },
   {
     key: "pb.prop.selectImage",
     text: "画像を選択"
@@ -16425,6 +16513,10 @@ const koTexts = [
     key: "pb.menu.addWidgetInside",
     text: "안쪽에 위젯 추가"
   },
+  {
+    key: "pb.menu.delete",
+    text: "삭제"
+  },
   {
     key: "pb.menu.deletePart",
     text: "삭제"
@@ -16481,6 +16573,10 @@ const koTexts = [
     key: "pb.prop.background",
     text: "배경"
   },
+  {
+    key: "pb.prop.color",
+    text: "색상"
+  },
   {
     key: "pb.prop.selectImage",
     text: "이미지 선택"
@@ -16763,6 +16859,10 @@ const zhTexts = [
     key: "pb.menu.addWidgetInside",
     text: "在内部添加小部件"
   },
+  {
+    key: "pb.menu.delete",
+    text: "删除"
+  },
   {
     key: "pb.menu.deletePart",
     text: "删除"
@@ -16819,6 +16919,10 @@ const zhTexts = [
     key: "pb.prop.background",
     text: "背景"
   },
+  {
+    key: "pb.prop.color",
+    text: "色"
+  },
   {
     key: "pb.prop.selectImage",
     text: "选择图片"
@@ -17101,6 +17205,10 @@ const frTexts = [
     key: "pb.menu.addWidgetInside",
     text: "Ajouter un widget à l'intérieur"
   },
+  {
+    key: "pb.menu.delete",
+    text: "Supprimer"
+  },
   {
     key: "pb.menu.deletePart",
     text: "Supprimer"
@@ -17157,6 +17265,10 @@ const frTexts = [
     key: "pb.prop.background",
     text: "Arrière-plan"
   },
+  {
+    key: "pb.prop.color",
+    text: "Couleur"
+  },
   {
     key: "pb.prop.selectImage",
     text: "Sélectionner une image"

package/dist/page-builder-editor.js

@@ -1,4 +1,4 @@
-import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, v, x, y, z, A, D, E } from "./index-BGT2UpHO.js";
+import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, v, x, y, z, A, D, E } from "./index-bTsjAv2l.js";
 export {
   B as BLOCK_TYPE,
   b as Block,

package/dist/page-builder-editor.umd.cjs

@@ -6887,16 +6887,26 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     props: {
       part: {}
     },
-    emits: ["update:visible"],
+    emits: ["hideParent", "showParent"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
       const visible = vue.ref(true);
-      const updateVisible = (value) => {
+      const hideParent = () => {
         var _a, _b;
-        visible.value = value;
+        visible.value = false;
         const hideParentWhenInvisible = ((_a = props.part.properties) == null ? void 0 : _a.hideParentWhenInvisible) === true || ((_b = props.part.properties) == null ? void 0 : _b.hideParentWhenInvisible) === "true";
-        emit("update:visible", value, hideParentWhenInvisible);
+        if (hideParentWhenInvisible) {
+          emit("hideParent", props.part.partId);
+        }
+      };
+      const showParent = () => {
+        var _a, _b;
+        visible.value = true;
+        const hideParentWhenInvisible = ((_a = props.part.properties) == null ? void 0 : _a.hideParentWhenInvisible) === true || ((_b = props.part.properties) == null ? void 0 : _b.hideParentWhenInvisible) === "true";
+        if (hideParentWhenInvisible) {
+          emit("showParent", props.part.partId);
+        }
       };
       const classNames = vue.computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
       const style = vue.computed(() => ({
@@ -6940,7 +6950,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           thisComponent.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(thisComponent.value), {
             key: 0,
             part: _ctx.part,
-            "onUpdate:visible": updateVisible
+            onHideParent: hideParent,
+            onShowParent: showParent
           }, null, 40, ["part"])) : vue.createCommentVNode("", true)
         ], 14, _hoisted_1$8$1)), [
           [vue.vShow, visible.value]
@@ -6954,16 +6965,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       part: {},
       isMobilePage: { type: Boolean }
     },
-    emits: ["update:visible"],
+    emits: ["hideParent", "showParent"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
+      const hiddenChildren = vue.ref({});
       const visible = vue.ref(true);
-      const updateVisible = (value, hideParentWhenInvisible) => {
-        if (hideParentWhenInvisible && !value) {
-          visible.value = false;
+      const hideParent = (partId) => {
+        visible.value = false;
+        hiddenChildren.value[partId] = true;
+        emit("hideParent", props.part.partId);
+      };
+      const showParent = (partId) => {
+        delete hiddenChildren.value[partId];
+        if (Object.keys(hiddenChildren.value).length === 0) {
+          visible.value = true;
+          emit("showParent", props.part.partId);
         }
-        emit("update:visible", visible.value, hideParentWhenInvisible);
       };
       const validTags = ["div", "section", "li"];
       const tag = vue.computed(() => {
@@ -7014,7 +7032,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               return vue.openBlock(), vue.createBlock(_sfc_main$b$1, {
                 key: child.partId,
                 part: child,
-                "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
+                onHideParent: hideParent,
+                onShowParent: showParent
               }, null, 8, ["part"]);
             }), 128)) : vue.createCommentVNode("", true)
           ]),
@@ -7031,12 +7050,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       part: {},
       isMobilePage: { type: Boolean }
     },
-    setup(__props) {
+    emits: ["hideParent", "showParent"],
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
+      const hiddenChildren = vue.ref({});
       const visible = vue.ref(true);
-      const updateVisible = (value, hideParentWhenInvisible) => {
-        if (hideParentWhenInvisible && !value) {
-          visible.value = false;
+      const hideParent = (partId) => {
+        visible.value = false;
+        hiddenChildren.value[partId] = true;
+        emit("hideParent", props.part.partId);
+      };
+      const showParent = (partId) => {
+        delete hiddenChildren.value[partId];
+        if (Object.keys(hiddenChildren.value).length === 0) {
+          visible.value = true;
+          emit("showParent", props.part.partId);
         }
       };
       const validTags = ["div", "section", "ul"];
@@ -7089,7 +7118,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 key: child.partId,
                 "is-mobile-page": _ctx.isMobilePage,
                 part: child,
-                "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
+                onHideParent: hideParent,
+                onShowParent: showParent
               }, null, 8, ["is-mobile-page", "part"]);
             }), 128)) : vue.createCommentVNode("", true)
           ]),
@@ -11869,10 +11899,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
       );
       vue.watch(
-        () => color.value,
-        () => setTimeout(() => {
+        () => appliedColor.value,
+        () => {
           if (appliedColor.value) emit("change-color", appliedColor.value);
-        }, 100),
+        },
         { deep: true }
       );
       vue.watch(
@@ -11936,9 +11966,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$v = { class: "group-editor group-editor-background" };
   const _hoisted_2$m = { class: "flex-align-center" };
   const _hoisted_3$c = { class: "title" };
-  const _hoisted_4$8 = { class: "bs-layout-horizontal" };
-  const _hoisted_5$7 = { class: "color" };
-  const _hoisted_6$6 = { class: "image" };
+  const _hoisted_4$8 = { class: "color" };
+  const _hoisted_5$7 = { class: "image mt-4" };
+  const _hoisted_6$6 = {
+    key: 0,
+    class: "url mt-8"
+  };
   const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBackground",
     props: {
@@ -11949,18 +11982,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const props = __props;
       const pageBuilder = usePageBuilderEditor();
       const modal = bluesea.useModal();
-      const color = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "backgroundColor"));
-      const emptyColor = () => {
-      };
       const updatePropertyValue = (properties) => {
         pageBuilder.commandRegistry.executeCommand(
           ChangePropertyCommand.COMMAND_ID,
           { properties, targetParts: props.selectedParts }
         );
       };
+      const color = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "backgroundColor"));
+      const emptyColor = () => {
+      };
       const saveOriginalColor = () => {
       };
       const updateColor = (value) => updatePropertyValue({ backgroundColor: value });
+      const deleteColor = (value) => updatePropertyValue({ backgroundColor: "" });
+      const image = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "backgroundImage"));
       const selectImage = () => {
         const imageProvider = pageBuilder.getProvider("imageProvider");
         if (imageProvider) {
@@ -11971,6 +12006,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           });
         }
       };
+      const deleteImage = (value) => updatePropertyValue({ backgroundImage: "" });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
           vue.createElementVNode("div", _hoisted_2$m, [
@@ -11979,27 +12015,63 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 [vue.unref(bluesea.vT), { key: "pb.prop.background" }]
               ])
             ]),
-            vue.createElementVNode("div", _hoisted_4$8, [
-              vue.createElementVNode("div", _hoisted_5$7, [
+            vue.createElementVNode("div", null, [
+              vue.createElementVNode("div", _hoisted_4$8, [
+                vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
+                  [vue.unref(bluesea.vT), { key: "pb.prop.color" }]
+                ]),
                 vue.createVNode(PbColorPicker, {
                   value: color.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))
+                  onChangeColor: _cache[1] || (_cache[1] = ($event) => updateColor($event))
                 }, null, 8, ["value"]),
                 vue.createVNode(vue.unref(bluesea.BSTextInput), {
                   "model-value": color.value,
                   class: "ml-4",
                   width: "",
                   "onUpdate:modelValue": updateColor
-                }, null, 8, ["model-value"])
+                }, null, 8, ["model-value"]),
+                color.value ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSButton), {
+                  key: 0,
+                  class: "ml-4 px-4",
+                  "left-icon": "close",
+                  onClick: deleteColor
+                }, null, 512)), [
+                  [
+                    vue.unref(bluesea.vT),
+                    { key: "pb.menu.delete" },
+                    void 0,
+                    { title: true }
+                  ]
+                ]) : vue.createCommentVNode("", true)
               ]),
-              vue.createElementVNode("div", _hoisted_6$6, [
-                vue.withDirectives(vue.createElementVNode("button", { onClick: selectImage }, null, 512), [
-                  [vue.unref(bluesea.vT), { key: "pb.prop.selectImage" }]
-                ])
+              vue.createElementVNode("div", _hoisted_5$7, [
+                vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
+                  [vue.unref(bluesea.vT), { key: "pb.prop.image" }]
+                ]),
+                vue.createVNode(vue.unref(bluesea.BSButton), {
+                  caption: { key: "pb.prop.selectImage" },
+                  "button-color": "blue",
+                  class: "select-button",
+                  onClick: selectImage
+                }),
+                image.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$6, [
+                  vue.createTextVNode(vue.toDisplayString(image.value) + " ", 1),
+                  vue.withDirectives(vue.createVNode(vue.unref(bluesea.BSButton), {
+                    class: "ml-4 px-4",
+                    "left-icon": "close",
+                    onClick: deleteImage
+                  }, null, 512), [
+                    [
+                      vue.unref(bluesea.vT),
+                      { key: "pb.menu.delete" },
+                      void 0,
+                      { title: true }
+                    ]
+                  ])
+                ])) : vue.createCommentVNode("", true)
               ])
             ])
           ])
@@ -15750,6 +15822,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.menu.addWidgetInside",
       text: "Add Widget Inside"
     },
+    {
+      key: "pb.menu.delete",
+      text: "Delete"
+    },
     {
       key: "pb.menu.deletePart",
       text: "Delete"
@@ -15806,6 +15882,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.prop.background",
       text: "Background"
     },
+    {
+      key: "pb.prop.color",
+      text: "Color"
+    },
     {
       key: "pb.prop.selectImage",
       text: "Select Image"
@@ -16088,6 +16168,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.menu.addWidgetInside",
       text: "内側にウィジェットを追加"
     },
+    {
+      key: "pb.menu.delete",
+      text: "削除"
+    },
     {
       key: "pb.menu.deletePart",
       text: "削除"
@@ -16144,6 +16228,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.prop.background",
       text: "背景"
     },
+    {
+      key: "pb.prop.color",
+      text: "色"
+    },
     {
       key: "pb.prop.selectImage",
       text: "画像を選択"
@@ -16426,6 +16514,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.menu.addWidgetInside",
       text: "안쪽에 위젯 추가"
     },
+    {
+      key: "pb.menu.delete",
+      text: "삭제"
+    },
     {
       key: "pb.menu.deletePart",
       text: "삭제"
@@ -16482,6 +16574,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.prop.background",
       text: "배경"
     },
+    {
+      key: "pb.prop.color",
+      text: "색상"
+    },
     {
       key: "pb.prop.selectImage",
       text: "이미지 선택"
@@ -16764,6 +16860,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.menu.addWidgetInside",
       text: "在内部添加小部件"
     },
+    {
+      key: "pb.menu.delete",
+      text: "删除"
+    },
     {
       key: "pb.menu.deletePart",
       text: "删除"
@@ -16820,6 +16920,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.prop.background",
       text: "背景"
     },
+    {
+      key: "pb.prop.color",
+      text: "色"
+    },
     {
       key: "pb.prop.selectImage",
       text: "选择图片"
@@ -17102,6 +17206,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.menu.addWidgetInside",
       text: "Ajouter un widget à l'intérieur"
     },
+    {
+      key: "pb.menu.delete",
+      text: "Supprimer"
+    },
     {
       key: "pb.menu.deletePart",
       text: "Supprimer"
@@ -17158,6 +17266,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       key: "pb.prop.background",
       text: "Arrière-plan"
     },
+    {
+      key: "pb.prop.color",
+      text: "Couleur"
+    },
     {
       key: "pb.prop.selectImage",
       text: "Sélectionner une image"

package/dist/style.css

@@ -216,23 +216,24 @@
   flex-direction: row;
   align-items: center;
 }
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color label {
+  display: inline-block;
+  width: 80px;
+}
 .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color .bs-text-input {
-  flex-grow: 1;
+  flex-grow: 0;
+  width: 104px;
 }
-.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image {
-  flex: 1;
-  padding-left: 8px;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image label {
+  display: inline-block;
+  width: 80px;
 }
-.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image button {
-  color: #fff;
-  border: none;
-  padding: 4px 12px;
-  cursor: pointer;
-  line-height: 1;
-  width: 120px;
-  height: 26px;
-  background-color: var(--primary);
-  border-radius: 2px;
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image .bs-button.select-button {
+  width: 132px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image .url {
+  word-break: break-word !important;
+  word-wrap: break-word !important;
 }
 .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color {
   width: 50%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.96",
+  "version": "1.0.0-alpha.98",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -17,7 +17,7 @@
   "author": "zag@g1project.net",
   "license": "LicenseRef-LICENSE",
   "peerDependencies": {
-    "@g1cloud/bluesea": "5.0.0-beta.3",
+    "@g1cloud/bluesea": "5.0.0-beta.21",
     "vue3-youtube": "^0.1.9"
   },
   "dependencies": {
@@ -31,7 +31,7 @@
     "vue-router": "^4.4.3",
     "vue3-click-away": "^1.2.4",
     "yjs": "^13.6.14",
-    "@g1cloud/page-builder-viewer": "1.0.0-alpha.96"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.98"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",

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

@@ -5,25 +5,35 @@
     flex-direction: row;
     align-items: center;
 
+    label {
+      display: inline-block;
+      width: 80px;
+    }
+
     .bs-text-input {
-      flex-grow: 1;
+      flex-grow: 0;
+      width: 104px;
     }
   }
 
   .image {
-    flex: 1;
-    padding-left: 8px;
+    // flex: 1;
+    // display: flex;
+    // flex-direction: row;
+    // align-items: center;
+
+    label {
+      display: inline-block;
+      width: 80px;
+    }
+
+    .bs-button.select-button {
+      width: 132px;
+    }
 
-    button {
-      color: #fff;
-      border: none;
-      padding: 4px 12px;
-      cursor: pointer;
-      line-height: 1;
-      width: 120px;
-      height: 26px;
-      background-color: var(--primary);
-      border-radius: 2px;
+    .url {
+      word-break: break-word !important;
+      word-wrap: break-word !important;
     }
   }
 }