@g1cloud/page-builder-editor 1.0.0-alpha.73 → 1.0.0-alpha.75

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

@@ -7216,28 +7216,132 @@ ${_html.style}
         if (!url2) return;
         if (typeof url2 !== "object") return;
         const locale = pageBuilder.getLocale();
-        return url2[locale];
+        let _url = url2[locale];
+        if (_url) {
+          const timestamp = (/* @__PURE__ */ new Date()).getTime();
+          _url = _url.indexOf("?") >= 0 ? `${_url}&` : `${_url}?`;
+          _url = `${_url}&widgetId=${props.part.partId}`;
+          _url = `${_url}&${timestamp}`;
+          return _url;
+        }
+        return "";
       });
-      const style = vue.computed(() => ({
+      const contentHeight = vue.ref(0);
+      const style = vue.ref({
         width: "100%",
-        height: `${height.value}px`
-      }));
-      const height = vue.ref(200);
-      const updateHeight = (event) => {
-        console.log(event);
-        if (event.data && event.data.height) {
-          height.value = event.data.height;
+        height: ""
+      });
+      const iframeHeight = vue.ref(0);
+      vue.watch(
+        () => {
+          var _a;
+          return [iframeHeight.value, contentHeight.value, (_a = props.part.properties) == null ? void 0 : _a.height];
+        },
+        () => {
+          var _a;
+          if (iframeHeight.value) {
+            style.value.height = `${iframeHeight.value}px`;
+          } else if (contentHeight.value) {
+            style.value.height = `${contentHeight.value}px`;
+          } else if ((_a = props.part.properties) == null ? void 0 : _a.height) {
+            style.value.height = props.part.properties.height;
+          } else {
+            style.value.height = "200px";
+          }
+        },
+        { immediate: true }
+      );
+      const updateHeightByMessage = (event) => {
+        if (event.data && event.data.widgetId === props.part.partId && event.data.height) {
+          contentHeight.value = event.data.height;
+        }
+      };
+      vue.onMounted(() => {
+        window.addEventListener("message", updateHeightByMessage);
+      });
+      vue.onBeforeUnmount(() => {
+        window.removeEventListener("message", updateHeightByMessage);
+      });
+      const iframeRef = vue.ref();
+      let resizeObserver;
+      let mutationObserver;
+      let setupInterval;
+      function getContentHeight(doc) {
+        const body = doc.body;
+        const html = doc.documentElement;
+        const scrollH = Math.max((body == null ? void 0 : body.scrollHeight) || 0, (html == null ? void 0 : html.scrollHeight) || 0);
+        const boundH = Math.max(
+          (body == null ? void 0 : body.getBoundingClientRect().height) || 0,
+          (html == null ? void 0 : html.getBoundingClientRect().height) || 0
+        );
+        return Math.max(scrollH, boundH);
+      }
+      const updateHeight = () => {
+        var _a;
+        const iframe = iframeRef.value;
+        if (!iframe) return;
+        try {
+          const doc = iframe.contentDocument || ((_a = iframe.contentWindow) == null ? void 0 : _a.document);
+          if (!doc) return;
+          const newHeight = getContentHeight(doc);
+          if (newHeight !== iframeHeight.value) {
+            iframeHeight.value = newHeight;
+          }
+        } catch (e) {
         }
       };
+      const setupObservers = () => {
+        const iframe = iframeRef.value;
+        const doc = iframe == null ? void 0 : iframe.contentDocument;
+        const body = doc == null ? void 0 : doc.body;
+        if (!doc || !body) return;
+        resizeObserver = new ResizeObserver(updateHeight);
+        resizeObserver.observe(body);
+        mutationObserver = new MutationObserver(updateHeight);
+        mutationObserver.observe(body, {
+          childList: true,
+          subtree: true,
+          attributes: true
+        });
+        updateHeight();
+      };
       vue.onMounted(() => {
-        window.addEventListener("message", updateHeight);
+        setupInterval = setInterval(() => {
+          if (!iframeRef.value) return;
+          const doc = iframeRef.value.contentDocument;
+          if ((doc == null ? void 0 : doc.readyState) === "complete") {
+            setupObservers();
+            if (setupInterval) {
+              clearInterval(setupInterval);
+              setupInterval = void 0;
+            }
+          }
+        }, 1e3);
       });
       vue.onBeforeUnmount(() => {
-        window.removeEventListener("message", updateHeight);
+        resizeObserver == null ? void 0 : resizeObserver.disconnect();
+        mutationObserver == null ? void 0 : mutationObserver.disconnect();
+        if (setupInterval) {
+          clearInterval(setupInterval);
+          setupInterval = void 0;
+        }
       });
+      vue.watch(
+        () => [iframeRef.value],
+        () => {
+          if (iframeRef.value) {
+            iframeRef.value.addEventListener("load", () => {
+              setupObservers();
+            });
+          }
+        },
+        { immediate: true }
+      );
       return (_ctx, _cache) => {
         return url.value ? (vue.openBlock(), vue.createElementBlock("iframe", {
           key: 0,
+          ref_key: "iframeRef",
+          ref: iframeRef,
           src: url.value,
           style: vue.normalizeStyle(style.value)
         }, null, 12, _hoisted_1$4$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1$1)) : vue.createCommentVNode("", true);
@@ -7534,7 +7638,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$1$1 = ["innerHTML"];
-  const _hoisted_2$v = { class: "pb-viewer" };
+  const _hoisted_2$w = { class: "pb-viewer" };
   const _sfc_main$2$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBuilderViewer",
     props: {
@@ -7575,7 +7679,7 @@ ${_html.style}
             key: 0,
             innerHTML: vue.unref(externalCss)
           }, null, 8, _hoisted_1$1$1)) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_2$v, [
+          vue.createElementVNode("div", _hoisted_2$w, [
             part.value ? (vue.openBlock(), vue.createBlock(_sfc_main$3$1, {
               key: 0,
               "is-mobile-page": _ctx.isMobilePage,
@@ -7621,9 +7725,13 @@ ${_html.style}
       const props = __props;
       const pageBuilder = usePageBuilder();
       const comp = vue.computed(() => pageBuilder.getCustomWidgetComponent(props.part));
-      const bind = vue.computed(() => ({
-        ...props.part.properties || {}
-      }));
+      const bind = vue.computed(() => {
+        var _a;
+        return {
+          "class": ((_a = props.part.properties) == null ? void 0 : _a.widgetClassNames) || void 0,
+          ...props.part.properties || {}
+        };
+      });
       return (_ctx, _cache) => {
         return comp.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(comp.value), vue.normalizeProps(vue.mergeProps({ key: 0 }, bind.value)), null, 16)) : vue.createCommentVNode("", true);
       };
@@ -8510,7 +8618,7 @@ ${_html.style}
     return mouseTracker;
   };
   const _hoisted_1$H = ["data-part-id", "draggable"];
-  const _hoisted_2$u = {
+  const _hoisted_2$v = {
     key: 1,
     class: "invalid-widget",
     textContent: "Invalid Widget"
@@ -8940,7 +9048,7 @@ ${_html.style}
             draggable: draggable.value,
             style: vue.normalizeStyle(style.value)
           }, [
-            component.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(component.value), vue.normalizeProps(vue.mergeProps({ key: 0 }, bind.value)), null, 16)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$u)),
+            component.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(component.value), vue.normalizeProps(vue.mergeProps({ key: 0 }, bind.value)), null, 16)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$v)),
             selected.value && _ctx.part.isNestedWidget() ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 2,
               class: "pan-handle",
@@ -9331,7 +9439,7 @@ ${_html.style}
     return `${numberMatch[0]}px`;
   }
   const _hoisted_1$D = { class: "group-editor group-editor-position" };
-  const _hoisted_2$t = { class: "flex-align-center" };
+  const _hoisted_2$u = { class: "flex-align-center" };
   const _hoisted_3$j = { class: "title" };
   const _hoisted_4$e = { class: "flex-grow-1" };
   const _hoisted_5$a = { class: "bg-gray-100 py-5 rounded-8" };
@@ -9363,7 +9471,7 @@ ${_html.style}
       const updateBottom = (value) => updatePropertyValue({ bottom: toCssLength(value) });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
-          vue.createElementVNode("div", _hoisted_2$t, [
+          vue.createElementVNode("div", _hoisted_2$u, [
             vue.createElementVNode("div", _hoisted_3$j, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.position" }]
@@ -9419,7 +9527,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$C = { class: "group-editor group-editor-size" };
-  const _hoisted_2$s = { class: "flex-align-center" };
+  const _hoisted_2$t = { class: "flex-align-center" };
   const _hoisted_3$i = { class: "title" };
   const _hoisted_4$d = { class: "flex-grow-1 bs-layout-horizontal" };
   const _hoisted_5$9 = { class: "flex-align-center mt-12" };
@@ -9457,7 +9565,7 @@ ${_html.style}
       const updateMinHeight = (value) => updatePropertyValue({ minHeight: toCssLength(value) });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
-          vue.createElementVNode("div", _hoisted_2$s, [
+          vue.createElementVNode("div", _hoisted_2$t, [
             vue.createElementVNode("div", _hoisted_3$i, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.size" }]
@@ -9681,7 +9789,7 @@ ${_html.style}
     }
   };
   const _hoisted_1$B = { class: "vc-alpha" };
-  const _hoisted_2$r = { class: "vc-alpha-checkboard-wrap" };
+  const _hoisted_2$s = { class: "vc-alpha-checkboard-wrap" };
   const _hoisted_3$h = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-alpha-picker" },
@@ -9695,7 +9803,7 @@ ${_html.style}
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Checkboard = vue.resolveComponent("Checkboard");
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
-      vue.createElementVNode("div", _hoisted_2$r, [
+      vue.createElementVNode("div", _hoisted_2$s, [
         vue.createVNode(_component_Checkboard)
       ]),
       vue.createElementVNode(
@@ -10799,7 +10907,7 @@ ${_html.style}
     }
   };
   const _hoisted_1$A = { class: "vc-editable-input" };
-  const _hoisted_2$q = ["aria-labelledby"];
+  const _hoisted_2$r = ["aria-labelledby"];
   const _hoisted_3$g = ["id", "for"];
   const _hoisted_4$b = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10811,7 +10919,7 @@ ${_html.style}
         class: "vc-input__input",
         onKeydown: _cache[1] || (_cache[1] = (...args) => $options.handleKeyDown && $options.handleKeyDown(...args)),
         onInput: _cache[2] || (_cache[2] = (...args) => $options.update && $options.update(...args))
-      }, null, 40, _hoisted_2$q), [
+      }, null, 40, _hoisted_2$r), [
         [vue.vModelText, $options.val]
       ]),
       vue.createElementVNode("span", {
@@ -10905,7 +11013,7 @@ ${_html.style}
     -1
     /* HOISTED */
   );
-  const _hoisted_2$p = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_2$q = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation--black" },
     null,
@@ -10935,7 +11043,7 @@ ${_html.style}
       },
       [
         _hoisted_1$z,
-        _hoisted_2$p,
+        _hoisted_2$q,
         vue.createElementVNode(
           "div",
           {
@@ -11084,7 +11192,7 @@ ${_html.style}
     }
   };
   const _hoisted_1$y = ["aria-valuenow"];
-  const _hoisted_2$o = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_2$p = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-hue-picker" },
     null,
@@ -11092,7 +11200,7 @@ ${_html.style}
     /* HOISTED */
   );
   const _hoisted_3$e = [
-    _hoisted_2$o
+    _hoisted_2$p
   ];
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -11220,7 +11328,7 @@ ${_html.style}
     }
   };
   const _hoisted_1$x = { class: "vc-sketch-saturation-wrap" };
-  const _hoisted_2$n = { class: "vc-sketch-controls" };
+  const _hoisted_2$o = { class: "vc-sketch-controls" };
   const _hoisted_3$d = { class: "vc-sketch-sliders" };
   const _hoisted_4$9 = { class: "vc-sketch-hue-wrap" };
   const _hoisted_5$8 = {
@@ -11268,7 +11376,7 @@ ${_html.style}
             onChange: $options.childChange
           }, null, 8, ["value", "onChange"])
         ]),
-        vue.createElementVNode("div", _hoisted_2$n, [
+        vue.createElementVNode("div", _hoisted_2$o, [
           vue.createElementVNode("div", _hoisted_3$d, [
             vue.createElementVNode("div", _hoisted_4$9, [
               vue.createVNode(_component_Hue, {
@@ -11435,7 +11543,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$w = { class: "buttons" };
-  const _hoisted_2$m = { class: "sketch-wrap" };
+  const _hoisted_2$n = { class: "sketch-wrap" };
   function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Sketch = vue.resolveComponent("Sketch");
     const _directive_click_outside = vue.resolveDirective("click-outside");
@@ -11459,7 +11567,7 @@ ${_html.style}
           vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1)
         ]))) : vue.createCommentVNode("", true)
       ]),
-      vue.createElementVNode("div", _hoisted_2$m, [
+      vue.createElementVNode("div", _hoisted_2$n, [
         _ctx.isShowColorPicker ? (vue.openBlock(), vue.createBlock(_component_Sketch, {
           key: 0,
           modelValue: _ctx.color,
@@ -11473,7 +11581,7 @@ ${_html.style}
   }
   const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render]]);
   const _hoisted_1$v = { class: "group-editor group-editor-background" };
-  const _hoisted_2$l = { class: "flex-align-center" };
+  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" };
@@ -11512,7 +11620,7 @@ ${_html.style}
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
-          vue.createElementVNode("div", _hoisted_2$l, [
+          vue.createElementVNode("div", _hoisted_2$m, [
             vue.createElementVNode("div", _hoisted_3$c, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.background" }]
@@ -11551,7 +11659,7 @@ ${_html.style}
   const BottomLeftCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(180)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
   const BottomRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(90)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
   const _hoisted_1$u = { class: "group-editor group-editor-border" };
-  const _hoisted_2$k = { class: "flex-align-center" };
+  const _hoisted_2$l = { class: "flex-align-center" };
   const _hoisted_3$b = { class: "title" };
   const _hoisted_4$7 = { class: "" };
   const _hoisted_5$6 = { class: "sub-title" };
@@ -11608,7 +11716,7 @@ ${_html.style}
       const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: toCssLength(value) });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
-          vue.createElementVNode("div", _hoisted_2$k, [
+          vue.createElementVNode("div", _hoisted_2$l, [
             vue.createElementVNode("div", _hoisted_3$b, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.border" }]
@@ -11738,7 +11846,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$t = { class: "group-editor group-editor-margin" };
-  const _hoisted_2$j = { class: "flex-align-center" };
+  const _hoisted_2$k = { class: "flex-align-center" };
   const _hoisted_3$a = { class: "title" };
   const _hoisted_4$6 = { class: "flex-grow-1" };
   const _hoisted_5$5 = { class: "bg-gray-100 py-5 rounded-8" };
@@ -11770,7 +11878,7 @@ ${_html.style}
       const updateBottom = (value) => updatePropertyValue({ marginBottom: toCssLength(value) });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
-          vue.createElementVNode("div", _hoisted_2$j, [
+          vue.createElementVNode("div", _hoisted_2$k, [
             vue.createElementVNode("div", _hoisted_3$a, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.margin" }]
@@ -11826,7 +11934,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$s = { class: "group-editor group-editor-padding" };
-  const _hoisted_2$i = { class: "flex-align-center" };
+  const _hoisted_2$j = { class: "flex-align-center" };
   const _hoisted_3$9 = { class: "title" };
   const _hoisted_4$5 = { class: "flex-grow-1" };
   const _hoisted_5$4 = { class: "bg-gray-100 py-5 rounded-8" };
@@ -11858,7 +11966,7 @@ ${_html.style}
       const updateBottom = (value) => updatePropertyValue({ paddingBottom: toCssLength(value) });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
-          vue.createElementVNode("div", _hoisted_2$i, [
+          vue.createElementVNode("div", _hoisted_2$j, [
             vue.createElementVNode("div", _hoisted_3$9, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.padding" }]
@@ -12069,6 +12177,11 @@ ${_html.style}
           caption: "pb.prop.style",
           propertyType: "multiline-text"
         },
+        {
+          propertyName: "widgetClassNames",
+          caption: "pb.prop.widgetClassNames",
+          propertyType: "text"
+        },
         {
           propertyName: "partId",
           caption: "pb.prop.partId",
@@ -12249,7 +12362,7 @@ ${_html.style}
     return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup(), hideParentGroup()];
   };
   const _hoisted_1$r = { class: "group-editor group-editor-media" };
-  const _hoisted_2$h = { class: "title" };
+  const _hoisted_2$i = { class: "title" };
   const _hoisted_3$8 = {
     key: 0,
     class: "title mt-12"
@@ -12313,7 +12426,7 @@ ${_html.style}
       return (_ctx, _cache) => {
         var _a, _b, _c, _d;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
-          vue.createElementVNode("div", _hoisted_2$h, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
               [vue.unref(bluesea.vT), { key: "pb.prop.media" }]
             ])
@@ -14419,7 +14532,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$o = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-  const _hoisted_2$g = { class: "bs-layout-horizontal align-items-center" };
+  const _hoisted_2$h = { class: "bs-layout-horizontal align-items-center" };
   const _hoisted_3$7 = { class: "mr-8" };
   const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbar",
@@ -14471,7 +14584,7 @@ ${_html.style}
       return (_ctx, _cache) => {
         var _a, _b, _c;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
-          vue.createElementVNode("div", _hoisted_2$g, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttonGroups), (group) => {
               return vue.openBlock(), vue.createBlock(_sfc_main$q, {
                 key: group.groupId,
@@ -14668,7 +14781,7 @@ ${_html.style}
               "icon-provider": iconProvider,
               "key-provider": (part) => part.partId,
               "label-provider": labelProvider,
-              class: "max-w-320",
+              class: "max-w-320 h-full",
               "dont-change-data-when-row-moved": "",
               "multi-select": "",
               "show-move-button": "",
@@ -14715,7 +14828,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$l = { class: "pb-sidebar-property-group" };
-  const _hoisted_2$f = {
+  const _hoisted_2$g = {
     key: 0,
     class: "group-title"
   };
@@ -14734,7 +14847,7 @@ ${_html.style}
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
-          _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
+          _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, [
             vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
               [vue.unref(bluesea.vT), { key: _ctx.group.caption }]
             ])
@@ -14761,6 +14874,10 @@ ${_html.style}
     }
   });
   const _hoisted_1$k = { class: "pb-sidebar-properties" };
+  const _hoisted_2$f = {
+    key: 0,
+    class: "bg-primary-500 text-white pl-16 py-8"
+  };
   const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebarProperties",
     setup(__props) {
@@ -14778,8 +14895,16 @@ ${_html.style}
           return [];
         }
       });
+      const partName = vue.computed(() => {
+        if (selectedParts.length === 1) {
+          const part = selectedParts[0];
+          const def = pageBuilder.partManager.getPartDefinition(part.partName);
+          if (def) return def.caption;
+        }
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+          partName.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, vue.toDisplayString(partName.value), 1)) : vue.createCommentVNode("", true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(properties.value, (group) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: `${partsKey.value}_${group.groupName}`
@@ -15180,7 +15305,7 @@ ${_html.style}
     },
     {
       key: "pb.prop.classNames",
-      text: "Class Names"
+      text: "CSS Class Names"
     },
     {
       key: "pb.prop.inlineStyle",
@@ -15190,6 +15315,10 @@ ${_html.style}
       key: "pb.prop.style",
       text: "CSS Style"
     },
+    {
+      key: "pb.prop.widgetClassNames",
+      text: "Widget Class Names"
+    },
     {
       key: "pb.prop.partId",
       text: "ID"
@@ -15510,7 +15639,7 @@ ${_html.style}
     },
     {
       key: "pb.prop.classNames",
-      text: "クラス名"
+      text: "CSS クラス"
     },
     {
       key: "pb.prop.inlineStyle",
@@ -15520,6 +15649,10 @@ ${_html.style}
       key: "pb.prop.style",
       text: "CSS スタイル"
     },
+    {
+      key: "pb.prop.widgetClassNames",
+      text: "ウィジェットの CSS クラス"
+    },
     {
       key: "pb.prop.partId",
       text: "ID"
@@ -15850,6 +15983,10 @@ ${_html.style}
       key: "pb.prop.style",
       text: "CSS 스타일"
     },
+    {
+      key: "pb.prop.widgetClassNames",
+      text: "위젯 CSS 클래스"
+    },
     {
       key: "pb.prop.partId",
       text: "ID"
@@ -16170,7 +16307,7 @@ ${_html.style}
     },
     {
       key: "pb.prop.classNames",
-      text: "类名"
+      text: "CSS 类名"
     },
     {
       key: "pb.prop.inlineStyle",
@@ -16180,6 +16317,10 @@ ${_html.style}
       key: "pb.prop.style",
       text: "CSS 样式"
     },
+    {
+      key: "pb.prop.widgetClassNames",
+      text: "小部件的 CSS 类名"
+    },
     {
       key: "pb.prop.partId",
       text: "ID"
@@ -16401,10 +16542,345 @@ ${_html.style}
       text: "已复制。"
     }
   ];
+  const frTexts = [
+    {
+      key: "pb.button.undo",
+      text: "Annuler"
+    },
+    {
+      key: "pb.button.redo",
+      text: "Rétablir"
+    },
+    {
+      key: "pb.button.copyAll",
+      text: "Copier tout"
+    },
+    {
+      key: "pb.button.copy",
+      text: "Copier"
+    },
+    {
+      key: "pb.button.cut",
+      text: "Couper"
+    },
+    {
+      key: "pb.button.paste",
+      text: "Coller"
+    },
+    {
+      key: "pb.button.delete",
+      text: "Supprimer"
+    },
+    {
+      key: "pb.button.addSection",
+      text: "Ajouter une section"
+    },
+    {
+      key: "pb.button.addBlock",
+      text: "Ajouter un bloc"
+    },
+    {
+      key: "pb.button.addWidget",
+      text: "Ajouter un widget"
+    },
+    {
+      key: "pb.menu.addSectionAbove",
+      text: "Ajouter une section au-dessus"
+    },
+    {
+      key: "pb.menu.addSectionBelow",
+      text: "Ajouter une section en dessous"
+    },
+    {
+      key: "pb.menu.addBlockLeft",
+      text: "Ajouter un bloc à gauche"
+    },
+    {
+      key: "pb.menu.addBlockRight",
+      text: "Ajouter un bloc à droite"
+    },
+    {
+      key: "pb.menu.addBlockAbove",
+      text: "Ajouter un bloc au-dessus"
+    },
+    {
+      key: "pb.menu.addBlockBelow",
+      text: "Ajouter un bloc en dessous"
+    },
+    {
+      key: "pb.menu.addWidgetLeft",
+      text: "Ajouter un widget à gauche"
+    },
+    {
+      key: "pb.menu.addWidgetRight",
+      text: "Ajouter un widget à droite"
+    },
+    {
+      key: "pb.menu.addWidgetAbove",
+      text: "Ajouter un widget au-dessus"
+    },
+    {
+      key: "pb.menu.addWidgetBelow",
+      text: "Ajouter un widget en dessous"
+    },
+    {
+      key: "pb.menu.addWidgetInside",
+      text: "Ajouter un widget à l'intérieur"
+    },
+    {
+      key: "pb.menu.deletePart",
+      text: "Supprimer"
+    },
+    {
+      key: "pb.prop.name",
+      text: "Nom"
+    },
+    {
+      key: "pb.prop.id",
+      text: "ID de balise"
+    },
+    {
+      key: "pb.prop.classNames",
+      text: "Noms de classes CSS"
+    },
+    {
+      key: "pb.prop.inlineStyle",
+      text: "Style CSS en ligne"
+    },
+    {
+      key: "pb.prop.style",
+      text: "Style CSS"
+    },
+    {
+      key: "pb.prop.widgetClassNames",
+      text: "Noms de classes du widget"
+    },
+    {
+      key: "pb.prop.partId",
+      text: "ID"
+    },
+    {
+      key: "pb.prop.size",
+      text: "Taille"
+    },
+    {
+      key: "pb.prop.maxSize",
+      text: "Taille maximale"
+    },
+    {
+      key: "pb.prop.minSize",
+      text: "Taille minimale"
+    },
+    {
+      key: "pb.prop.margin",
+      text: "Marge"
+    },
+    {
+      key: "pb.prop.padding",
+      text: "Rembourrage"
+    },
+    {
+      key: "pb.prop.background",
+      text: "Arrière-plan"
+    },
+    {
+      key: "pb.prop.selectImage",
+      text: "Sélectionner une image"
+    },
+    {
+      key: "pb.prop.border",
+      text: "Bordure"
+    },
+    {
+      key: "pb.prop.borderColor",
+      text: "Couleur"
+    },
+    {
+      key: "pb.prop.borderWidth",
+      text: "Largeur de bordure"
+    },
+    {
+      key: "pb.prop.borderRadius",
+      text: "Rayon de bordure"
+    },
+    {
+      key: "pb.prop.position",
+      text: "Position"
+    },
+    {
+      key: "pb.prop.editHtml",
+      text: "Modifier le HTML"
+    },
+    {
+      key: "pb.prop.selectMedia",
+      text: "Sélectionner un média"
+    },
+    {
+      key: "pb.prop.altText",
+      text: "Texte alternatif"
+    },
+    {
+      key: "pb.prop.link",
+      text: "Lien"
+    },
+    {
+      key: "pb.prop.linkTarget",
+      text: "Cible du lien"
+    },
+    {
+      key: "pb.prop.thumbnail",
+      text: "Miniature"
+    },
+    {
+      key: "pb.prop.layout",
+      text: "Disposition"
+    },
+    {
+      key: "pb.prop.direction",
+      text: "Direction"
+    },
+    {
+      key: "pb.prop.wrap",
+      text: "Retour à la ligne"
+    },
+    {
+      key: "pb.prop.gap",
+      text: "Espacement"
+    },
+    {
+      key: "pb.prop.align",
+      text: "Aligner"
+    },
+    {
+      key: "pb.prop.alignItems",
+      text: "Aligner les éléments"
+    },
+    {
+      key: "pb.prop.justifyContent",
+      text: "Justifier le contenu"
+    },
+    {
+      key: "pb.prop.alignSelf",
+      text: "Auto-alignement"
+    },
+    {
+      key: "pb.prop.maxWidth",
+      text: "Largeur maximale"
+    },
+    {
+      key: "pb.prop.text",
+      text: "Texte"
+    },
+    {
+      key: "pb.prop.fontSize",
+      text: "Taille de police"
+    },
+    {
+      key: "pb.prop.fontWeight",
+      text: "Épaisseur de police"
+    },
+    {
+      key: "pb.prop.textAlign",
+      text: "Alignement du texte"
+    },
+    {
+      key: "pb.prop.fontColor",
+      text: "Couleur de police"
+    },
+    {
+      key: "pb.prop.image",
+      text: "Image"
+    },
+    {
+      key: "pb.prop.media",
+      text: "Média"
+    },
+    {
+      key: "pb.prop.html",
+      text: "HTML"
+    },
+    {
+      key: "pb.prop.url",
+      text: "URL"
+    },
+    {
+      key: "pb.prop.aspectRatio",
+      text: "Rapport hauteur/largeur"
+    },
+    {
+      key: "pb.prop.selectVideo",
+      text: "Sélectionner une vidéo"
+    },
+    {
+      key: "pb.button.ok",
+      text: "OK"
+    },
+    {
+      key: "pb.button.cancel",
+      text: "Annuler"
+    },
+    {
+      key: "pb.modal.addWidget.title",
+      text: "Ajouter un widget"
+    },
+    {
+      key: "pb.modal.youtube.title",
+      text: "Vidéo YouTube"
+    },
+    {
+      key: "pb.modal.youtube.url",
+      text: "URL"
+    },
+    {
+      key: "pb.modal.youtube.preview",
+      text: "Aperçu"
+    },
+    {
+      key: "pb.modal.screenSelect.title",
+      text: "Sélectionner un écran"
+    },
+    {
+      key: "pb.modal.screenSelect.message",
+      text: "Quel écran souhaitez-vous conserver ?"
+    },
+    {
+      key: "pb.modal.screenSelect.pc",
+      text: "PC"
+    },
+    {
+      key: "pb.modal.screenSelect.mobile",
+      text: "Mobile"
+    },
+    {
+      key: "pb.modal.htmlEditor.title",
+      text: "Éditeur HTML"
+    },
+    {
+      key: "pb.modal.htmlEditor.preview",
+      text: "Aperçu"
+    },
+    {
+      key: "pb.modal.htmlEditor.tags",
+      text: "Balises"
+    },
+    {
+      key: "pb.modal.htmlEditor.style",
+      text: "Style"
+    },
+    {
+      key: "pb.prop.hideParentWhenInvisible",
+      text: "Masquer le bloc et la section si le widget est invisible"
+    },
+    {
+      key: "pb.prop.copied",
+      text: "Copié."
+    }
+  ];
   bluesea.i18n.addTexts("en", enTexts);
   bluesea.i18n.addTexts("ja", jaTexts);
   bluesea.i18n.addTexts("ko", koTexts);
   bluesea.i18n.addTexts("zh", zhTexts);
+  bluesea.i18n.addTexts("fr", frTexts);
   const _hoisted_1$f = { class: "pb-editor bs-layout-vertical flex-grow-1" };
   const _hoisted_2$e = { class: "pb-editor-body bs-layout-horizontal flex-grow-1" };
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({