@g1cloud/page-builder-editor 1.0.0-alpha.16 → 1.0.0-alpha.17

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

@@ -6894,12 +6894,12 @@ var __publicField = (obj, key, value) => {
       this.rootPart = vue.ref(new RootPart());
     }
   };
-  const _hoisted_1$7$1 = ["data-model-id"];
-  const _hoisted_2$3$1 = {
+  const _hoisted_1$8$1 = ["data-model-id"];
+  const _hoisted_2$5$1 = {
     key: 1,
     class: "pb-nested-widget"
   };
-  const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$a$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidget",
     props: {
       part: {}
@@ -6921,7 +6921,7 @@ var __publicField = (obj, key, value) => {
             key: 0,
             part: _ctx.part
           }, null, 8, ["part"])) : vue.createCommentVNode("", true),
-          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3$1, [
+          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5$1, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childComponents.value, (child) => {
               return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(child.component), {
                 key: child.part.partId,
@@ -6929,12 +6929,12 @@ var __publicField = (obj, key, value) => {
               }, null, 8, ["part"]);
             }), 128))
           ])) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$7$1);
+        ], 16, _hoisted_1$8$1);
       };
     }
   });
-  const _hoisted_1$6$1 = ["data-model-id"];
-  const _sfc_main$8$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$7$1 = ["data-model-id"];
+  const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
       part: {}
@@ -6952,17 +6952,17 @@ var __publicField = (obj, key, value) => {
           style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
         }, properties.value), [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$a$1, {
               key: child.partId,
               part: child
             }, null, 8, ["part"]);
           }), 128))
-        ], 16, _hoisted_1$6$1);
+        ], 16, _hoisted_1$7$1);
       };
     }
   });
-  const _hoisted_1$5$1 = { class: "pb-block" };
-  const _hoisted_2$2$1 = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_1$6$1 = { class: "pb-block" };
+  const _hoisted_2$4$1 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "pb-widget",
     style: { "margin": "0 auto" }
   }, [
@@ -6970,22 +6970,22 @@ var __publicField = (obj, key, value) => {
       /* @__PURE__ */ vue.createElementVNode("h3", null, "Login Design Part")
     ])
   ], -1);
-  const _hoisted_3$1$1 = [
-    _hoisted_2$2$1
+  const _hoisted_3$4$1 = [
+    _hoisted_2$4$1
   ];
-  const _sfc_main$7$1 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$8$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbLoginDepart",
     props: {
       part: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5$1, _hoisted_3$1$1);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6$1, _hoisted_3$4$1);
       };
     }
   });
-  const _hoisted_1$4$1 = ["data-model-id"];
-  const _sfc_main$6$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$5$1 = ["data-model-id"];
+  const _sfc_main$7$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
       part: {}
@@ -7001,94 +7001,74 @@ var __publicField = (obj, key, value) => {
           "data-model-id": _ctx.part.partId,
           style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
         }, properties.value), [
-          ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$7$1, {
+          ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$8$1, {
             key: 0,
             part: _ctx.part
           }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.part.children, (block) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$8$1, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
               key: block.partId,
               part: block
             }, null, 8, ["part"]);
           }), 128)) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$4$1);
+        ], 16, _hoisted_1$5$1);
       };
     }
   });
-  const _hoisted_1$3$1 = { class: "pb-image-widget" };
-  const _hoisted_2$1$1 = ["src"];
-  const _hoisted_3$s = {
+  const _hoisted_1$4$1 = { class: "pb-image-widget" };
+  const _hoisted_2$3$1 = ["src"];
+  const _hoisted_3$3$1 = {
     key: 1,
-    class: "empty"
+    class: "placeholder"
   };
   const _hoisted_4$i = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "image", -1);
   const _hoisted_5$9 = [
     _hoisted_4$i
   ];
-  const _sfc_main$5$1 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$6$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbImageWidget",
     props: {
       part: {},
-      viewMode: { type: Boolean, default: false }
+      placeholder: { type: Boolean }
     },
     setup(__props) {
       return (_ctx, _cache) => {
         var _a, _b;
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4$1, [
           ((_a = _ctx.part.properties) == null ? void 0 : _a.image) ? (vue.openBlock(), vue.createElementBlock("img", {
             key: 0,
             src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
             alt: "",
             class: "image"
-          }, null, 8, _hoisted_2$1$1)) : !_ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$s, _hoisted_5$9)) : vue.createCommentVNode("", true)
+          }, null, 8, _hoisted_2$3$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3$1, _hoisted_5$9)) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
-  const _hoisted_1$2$1 = ["textContent"];
-  const _sfc_main$4$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$3$1 = { class: "pb-text-widget" };
+  const _hoisted_2$2$1 = ["textContent"];
+  const _hoisted_3$2$1 = {
+    key: 1,
+    class: "placeholder",
+    textContent: "Empty Text"
+  };
+  const _sfc_main$5$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbTextWidget",
     props: {
       part: {},
-      viewMode: { type: Boolean, default: false }
+      placeholder: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
       const pageBuilder = usePageBuilder();
-      const emptyClass = vue.computed(() => {
-        var _a;
-        if (props.viewMode) {
-          return false;
-        } else if ((_a = props.part.properties) == null ? void 0 : _a.text) {
-          if (typeof props.part.properties.text === "string") {
-            return true;
-          } else {
-            return !props.part.properties.text[pageBuilder.locale.value];
-          }
-        } else {
-          return true;
-        }
-      });
       const text = vue.computed(() => {
         var _a;
         if ((_a = props.part.properties) == null ? void 0 : _a.text) {
           if (typeof props.part.properties.text === "string") {
-            if (props.viewMode) {
-              return "";
-            } else {
-              return "Empty text";
-            }
+            return props.part.properties.text;
           } else {
-            const t = props.part.properties.text[pageBuilder.locale.value];
-            if (props.viewMode) {
-              return t || "";
-            } else {
-              return t || "Empty text";
-            }
+            const locale = pageBuilder.getLocale();
+            return props.part.properties.text[locale] || "";
           }
-        } else if (props.viewMode) {
-          return "";
-        } else {
-          return "Empty text";
         }
       });
       const style = vue.computed(() => {
@@ -7101,23 +7081,29 @@ var __publicField = (obj, key, value) => {
         };
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass([[emptyClass.value ? "empty" : ""], "pb-text-widget"])
-        }, [
-          vue.createElementVNode("div", vue.mergeProps({ class: "text" }, style.value, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, [
+          text.value ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+            key: 0,
+            class: "text"
+          }, style.value, {
             textContent: vue.toDisplayString(text.value)
-          }), null, 16, _hoisted_1$2$1)
-        ], 2);
+          }), null, 16, _hoisted_2$2$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2$1)) : vue.createCommentVNode("", true)
+        ]);
       };
     }
   });
-  const _hoisted_1$1$1 = ["innerHTML"];
-  const _hoisted_2$v = { key: 1 };
-  const _sfc_main$3$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$2$1 = { class: "pb-html-widget" };
+  const _hoisted_2$1$1 = ["innerHTML"];
+  const _hoisted_3$1$1 = {
+    key: 1,
+    class: "placeholder",
+    textContent: "Empty HTML"
+  };
+  const _sfc_main$4$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbHtmlWidget",
     props: {
       part: {},
-      viewMode: { type: Boolean, default: false }
+      placeholder: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
@@ -7144,23 +7130,69 @@ ${_html.style}
         var _a;
         return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
       });
-      const emptyClass = vue.computed(() => {
-        if (props.viewMode) {
-          return false;
-        } else {
-          return !html.value;
-        }
-      });
+      vue.computed(() => props.placeholder ? !html.value : false);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass([[emptyClass.value ? "empty" : ""], "pb-html-widget"])
-        }, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2$1, [
           html.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             class: "html",
             innerHTML: html.value
-          }, null, 8, _hoisted_1$1$1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$v, "Empty HTML"))
-        ], 2);
+          }, null, 8, _hoisted_2$1$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1$1)) : vue.createCommentVNode("", true)
+        ]);
+      };
+    }
+  });
+  const _hoisted_1$1$1 = { class: "pb-iframe-widget" };
+  const _hoisted_2$v = ["src"];
+  const _hoisted_3$s = {
+    key: 1,
+    class: "placeholder",
+    textContent: "Empty URL"
+  };
+  const _sfc_main$3$1 = /* @__PURE__ */ vue.defineComponent({
+    __name: "PbIframeWidget",
+    props: {
+      part: {},
+      placeholder: { type: Boolean }
+    },
+    setup(__props) {
+      const props = __props;
+      const pageBuilder = usePageBuilder();
+      const url = vue.computed(() => {
+        var _a;
+        const url2 = (_a = props.part.properties) == null ? void 0 : _a.url;
+        if (!url2)
+          return;
+        if (typeof url2 !== "object")
+          return;
+        const locale = pageBuilder.getLocale();
+        return url2[locale];
+      });
+      const style = vue.computed(() => ({
+        style: {
+          width: "100%",
+          height: `${height.value}px`
+        }
+      }));
+      const height = vue.ref(200);
+      const updateHeight = (event) => {
+        if (event.data && event.data.height) {
+          height.value = event.data.height;
+        }
+      };
+      vue.onMounted(() => {
+        window.addEventListener("message", updateHeight);
+      });
+      vue.onBeforeUnmount(() => {
+        window.removeEventListener("message", updateHeight);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1$1, [
+          url.value ? (vue.openBlock(), vue.createElementBlock("iframe", vue.mergeProps({
+            key: 0,
+            src: url.value
+          }, style.value), null, 16, _hoisted_2$v)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$s)) : vue.createCommentVNode("", true)
+        ]);
       };
     }
   });
@@ -7168,41 +7200,46 @@ ${_html.style}
     "Section": {
       partType: "Section",
       partName: "Section",
-      creator: () => _sfc_main$6$1
+      creator: () => _sfc_main$7$1
     },
     "GlobalDesignPart": {
       partType: "Section",
       partName: "GlobalDesignPart",
-      creator: () => _sfc_main$6$1
+      creator: () => _sfc_main$7$1
     },
     "LocalDesignPart": {
       partType: "Section",
       partName: "LocalDesignPart",
-      creator: () => _sfc_main$6$1
+      creator: () => _sfc_main$7$1
     },
     "LocalMarketingPart": {
       partType: "Section",
       partName: "LocalMarketingPart",
-      creator: () => _sfc_main$6$1
+      creator: () => _sfc_main$7$1
     },
     "Block": {
       partType: "Block",
       partName: "Block",
-      creator: () => _sfc_main$8$1
+      creator: () => _sfc_main$9$1
     },
     "TextWidget": {
       partType: "Widget",
       partName: "TextWidget",
-      creator: () => _sfc_main$4$1
+      creator: () => _sfc_main$5$1
     },
     "ImageWidget": {
       partType: "Widget",
       partName: "ImageWidget",
-      creator: () => _sfc_main$5$1
+      creator: () => _sfc_main$6$1
     },
     "HtmlWidget": {
       partType: "Widget",
       partName: "HtmlWidget",
+      creator: () => _sfc_main$4$1
+    },
+    "IframeWidget": {
+      partType: "Widget",
+      partName: "IframeWidget",
       creator: () => _sfc_main$3$1
     }
   };
@@ -7348,7 +7385,7 @@ ${_html.style}
             class: vue.normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$6$1, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$7$1, {
                 key: section.partId,
                 part: section
               }, null, 8, ["part"]);
@@ -8767,13 +8804,15 @@ ${_html.style}
         }, properties.value), [
           thisComponent.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(thisComponent.value), {
             key: 0,
-            part: _ctx.part
+            part: _ctx.part,
+            placeholder: true
           }, null, 8, ["part"])) : vue.createCommentVNode("", true),
           childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$t, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childComponents.value, (child) => {
               return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(child.component), {
                 key: child.part.partId,
-                part: child.part
+                part: child.part,
+                placeholder: true
               }, null, 8, ["part"]);
             }), 128))
           ])) : vue.createCommentVNode("", true),
@@ -12043,7 +12082,7 @@ ${_html.style}
       },
       localized: true,
       allowsChild: () => false,
-      creator: () => _sfc_main$4$1
+      creator: () => _sfc_main$5$1
     },
     {
       partType: "Widget",
@@ -12069,7 +12108,7 @@ ${_html.style}
       initialProperties: {},
       localized: true,
       allowsChild: () => false,
-      creator: () => _sfc_main$5$1
+      creator: () => _sfc_main$6$1
     },
     {
       partType: "Widget",
@@ -12096,6 +12135,33 @@ ${_html.style}
       initialProperties: {},
       localized: true,
       allowsChild: () => false,
+      creator: () => _sfc_main$4$1
+    },
+    {
+      partType: "Widget",
+      partName: "IframeWidget",
+      caption: "IFrame",
+      icon: "code",
+      propertyGroups: [
+        {
+          groupName: "iframe",
+          caption: "Iframe",
+          properties: [
+            {
+              propertyName: "url",
+              caption: "URL",
+              propertyType: "text",
+              params: "",
+              localized: true,
+              multiLang: true
+            }
+          ]
+        },
+        ...defaultWidgetPropertyGroups()
+      ],
+      initialProperties: {},
+      localized: true,
+      allowsChild: () => false,
       creator: () => _sfc_main$3$1
     }
   ];
@@ -13624,7 +13690,7 @@ ${_html.style}
       };
     }
   });
-  const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget.empty {\n  padding: 4px 0;\n  font-size: 18px;\n  color: #999;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
+  const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
   const _hoisted_1$l = { class: "pb-canvas-frame" };
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvasFrame",
@@ -13638,7 +13704,7 @@ ${_html.style}
           return (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
         },
         () => {
-          var _a, _b, _c, _d, _e;
+          var _a, _b, _c, _d, _e, _f, _g, _h;
           if ((_c = (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document) == null ? void 0 : _c.head) {
             const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
             head.innerHTML = `
@@ -13661,6 +13727,16 @@ ${_html.style}
           <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" />
           <style>${canvasStyle}</style>
         `;
+            const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
+            script2.innerHTML = `
+          function forwardPostMessage(event) {
+            if (event.data) {
+              window.parent.postMessage(event.data, '*');
+            }
+          }
+          window.addEventListener('message', forwardPostMessage);
+        `;
+            (_h = iframeRef.value) == null ? void 0 : _h.contentWindow.document.head.appendChild(script2);
             pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(iframeRef.value.contentWindow.document.body);
             stopIframeWatch();
           }
@@ -14477,6 +14553,8 @@ ${_html.style}
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
+      const pageBuilder = usePageBuilderEditor();
+      const locales = vue.computed(() => pageBuilder.getLocales());
       const emitUpdatePropertyValue = (value) => {
         const properties = {};
         properties[props.property.propertyName] = value;
@@ -14490,11 +14568,18 @@ ${_html.style}
             }, null, 8, _hoisted_3$9)
           ]),
           vue.createElementVNode("div", null, [
-            vue.createVNode(vue.unref(bluesea.BSTextInput), {
+            _ctx.property.multiLang ? (vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSMultiLangTextInput), {
+              key: 0,
+              locales: locales.value,
               "model-value": _ctx.value,
               width: "100%",
               "onUpdate:modelValue": emitUpdatePropertyValue
-            }, null, 8, ["model-value"])
+            }, null, 8, ["locales", "model-value"])) : (vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSTextInput), {
+              key: 1,
+              "model-value": _ctx.value,
+              width: "100%",
+              "onUpdate:modelValue": emitUpdatePropertyValue
+            }, null, 8, ["model-value"]))
           ])
         ]);
       };
@@ -15097,9 +15182,10 @@ ${_html.style}
   exports2.PageBuilderViewerEvent = PageBuilderViewerEvent;
   exports2.Part = Part;
   exports2.PbCustomWidget = _sfc_main$B;
-  exports2.PbHtmlWidget = _sfc_main$3$1;
-  exports2.PbImageWidget = _sfc_main$5$1;
-  exports2.PbTextWidget = _sfc_main$4$1;
+  exports2.PbHtmlWidget = _sfc_main$4$1;
+  exports2.PbIframeWidget = _sfc_main$3$1;
+  exports2.PbImageWidget = _sfc_main$6$1;
+  exports2.PbTextWidget = _sfc_main$5$1;
   exports2.ROOT_TYPE = ROOT_TYPE$1;
   exports2.RootPart = RootPart;
   exports2.SECTION_TYPE = SECTION_TYPE$1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.17",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -16,7 +16,7 @@
   "author": "zag@g1project.net",
   "license": "LicenseRef-LICENSE",
   "peerDependencies": {
-    "@g1cloud/bluesea": "5.0.0-alpha.60"
+    "@g1cloud/bluesea": "5.0.0-alpha.66"
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.5.0",
@@ -28,7 +28,7 @@
     "vue-router": "^4.3.2",
     "vue3-click-away": "^1.2.4",
     "yjs": "^13.6.14",
-    "@g1cloud/page-builder-viewer": "1.0.0-alpha.16"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.17"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",