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

package/css/page-page.scss

@@ -17,6 +17,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+    background-color: #fff;
 
     &.selected::before {
       content: "";

package/css/page-section.scss

@@ -6,18 +6,15 @@
   background-repeat: no-repeat;
   background-size: cover;
   outline: 1px dashed #ccc;
-  background-color: #fff;
+
+  &:empty {
+    background-color: #fff;
+  }
 
   &:hover:not(:has(.pb-block:hover)) {
     background-color: #f0f0f0;
   }
 
-  //&.selected {
-  //  outline: 2px solid #4998f8;
-  //  outline-offset: -2px;
-  //  z-index: 999;
-  //}
-
   &.selected::before {
     content: "";
     position: absolute;

package/dist/{PbPropertyEditorColor-DE3eH4kY.js → PbPropertyEditorColor-Bburxcfo.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-D_Af8_UC.js";
+import { P as PbColorPicker } from "./index-CEBGHWjv.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-Cku7TH0H.js

@@ -0,0 +1,42 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
+import { vT, BSTextInput } from "@g1cloud/bluesea";
+import { t as toCssLength } from "./index-CEBGHWjv.js";
+const _hoisted_1 = { class: "property-editor property-editor-number flex-align-center" };
+const _hoisted_2 = { class: "title" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PbPropertyEditorCssLength",
+  props: {
+    property: {},
+    value: {}
+  },
+  emits: ["update-property-value"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const emitUpdatePropertyValue = (value) => {
+      const cssLength = toCssLength(value || "");
+      const properties = {};
+      properties[props.property.propertyName] = `${cssLength}`;
+      emit("update-property-value", properties);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          withDirectives(createElementVNode("label", null, null, 512), [
+            [unref(vT), { key: _ctx.property.caption }]
+          ])
+        ]),
+        createElementVNode("div", null, [
+          createVNode(unref(BSTextInput), {
+            "model-value": _ctx.value,
+            width: "100%",
+            "onUpdate:modelValue": emitUpdatePropertyValue
+          }, null, 8, ["model-value"])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/{PbPropertyEditorHtml-CNeTyj09.js → PbPropertyEditorHtml-BlzCBvjh.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-D_Af8_UC.js";
+import { u as usePageBuilderEditor } from "./index-CEBGHWjv.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-BR8g41aN.js → PbPropertyEditorImage-D-ZvZqEl.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-D_Af8_UC.js";
+import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-CEBGHWjv.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-DYbAZ4hz.js → PbPropertyEditorMultilineText-Lm27UPXU.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-D_Af8_UC.js";
+import { u as usePageBuilderEditor } from "./index-CEBGHWjv.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorText-BlUBlNyG.js → PbPropertyEditorText-BFZszY0B.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-D_Af8_UC.js";
+import { u as usePageBuilderEditor } from "./index-CEBGHWjv.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-HsOJ6Oxj.js → PbPropertyEditorYoutube-veiAlowu.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-D_Af8_UC.js";
+import { s as selectYoutubeVideo } from "./index-CEBGHWjv.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-C_6443Z3.js → PbWidgetAddModal-8BvUYv62.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-D_Af8_UC.js";
+import { w as widgetPartDefinitions } from "./index-CEBGHWjv.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/components/sidebar/property/PbPropertyEditorCssLength.vue.d.ts

@@ -0,0 +1,23 @@
+import { PartProperty } from '../../../model/part-property.ts';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    property: PartProperty;
+    value?: string | undefined;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update-property-value": (properties: Record<string, unknown>) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    property: PartProperty;
+    value?: string | undefined;
+}>>> & Readonly<{
+    "onUpdate-property-value"?: ((properties: Record<string, unknown>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/{index-D_Af8_UC.js → index-CEBGHWjv.js}

@@ -6957,7 +6957,7 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
           innerHTML: styleTag.value
         }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
         withDirectives(createElementVNode("div", {
-          class: normalizeClass([classNames.value, "pb-block"]),
+          class: normalizeClass(classNames.value),
           "data-part-id": _ctx.part.partId,
           style: normalizeStyle(style.value)
         }, [
@@ -7003,7 +7003,7 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
           innerHTML: styleTag.value
         }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
         withDirectives(createElementVNode("div", {
-          class: normalizeClass([classNames.value, "pb-section"]),
+          class: normalizeClass(classNames.value),
           "data-part-id": _ctx.part.partId,
           style: normalizeStyle(style.value)
         }, [
@@ -8210,15 +8210,16 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BlUBlNyG.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BFZszY0B.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DYbAZ4hz.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-Lm27UPXU.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-DE3eH4kY.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BR8g41aN.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CNeTyj09.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-HsOJ6Oxj.js"))
+    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-Cku7TH0H.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-Bburxcfo.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-D-ZvZqEl.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BlzCBvjh.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-veiAlowu.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -9316,6 +9317,18 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
+function toCssLength(value) {
+  const cssLengthPattern = /^-?\d+(\.\d+)?(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc)$/;
+  value = value.trim().replace(/\s+(?=[a-zA-Z%]+)/g, "");
+  if (cssLengthPattern.test(value)) {
+    return value;
+  }
+  const numberMatch = value.match(/-?\d+(\.\d+)?/);
+  if (!numberMatch) {
+    return "";
+  }
+  return `${numberMatch[0]}px`;
+}
 const _hoisted_1$o = { class: "group-editor group-editor-position" };
 const _hoisted_2$f = { class: "flex-align-center" };
 const _hoisted_3$c = { class: "title" };
@@ -9343,10 +9356,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         { properties, targetParts: props.selectedParts }
       );
     };
-    const updateLeft = (value) => updatePropertyValue({ left: value });
-    const updateRight = (value) => updatePropertyValue({ right: value });
-    const updateTop = (value) => updatePropertyValue({ top: value });
-    const updateBottom = (value) => updatePropertyValue({ bottom: value });
+    const updateLeft = (value) => updatePropertyValue({ left: toCssLength(value) });
+    const updateRight = (value) => updatePropertyValue({ right: toCssLength(value) });
+    const updateTop = (value) => updatePropertyValue({ top: toCssLength(value) });
+    const updateBottom = (value) => updatePropertyValue({ bottom: toCssLength(value) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createElementVNode("div", _hoisted_2$f, [
@@ -9435,12 +9448,12 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         { properties, targetParts: props.selectedParts }
       );
     };
-    const updateWidth = (value) => updatePropertyValue({ width: value });
-    const updateHeight = (value) => updatePropertyValue({ height: value });
-    const updateMaxWidth = (value) => updatePropertyValue({ maxWidth: value });
-    const updateMaxHeight = (value) => updatePropertyValue({ maxHeight: value });
-    const updateMinWidth = (value) => updatePropertyValue({ minWidth: value });
-    const updateMinHeight = (value) => updatePropertyValue({ minHeight: value });
+    const updateWidth = (value) => updatePropertyValue({ width: toCssLength(value) });
+    const updateHeight = (value) => updatePropertyValue({ height: toCssLength(value) });
+    const updateMaxWidth = (value) => updatePropertyValue({ maxWidth: toCssLength(value) });
+    const updateMaxHeight = (value) => updatePropertyValue({ maxHeight: toCssLength(value) });
+    const updateMinWidth = (value) => updatePropertyValue({ minWidth: toCssLength(value) });
+    const updateMinHeight = (value) => updatePropertyValue({ minHeight: toCssLength(value) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("div", _hoisted_2$e, [
@@ -11584,14 +11597,14 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const saveOriginalColor = () => {
     };
     const updateColor = (value) => updatePropertyValue({ borderColor: value });
-    const updateBorderLeftWidth = (value) => updatePropertyValue({ borderLeftWidth: value });
-    const updateBorderRightWidth = (value) => updatePropertyValue({ borderRightWidth: value });
-    const updateBorderTopWidth = (value) => updatePropertyValue({ borderTopWidth: value });
-    const updateBorderBottomWidth = (value) => updatePropertyValue({ borderBottomWidth: value });
-    const updateBorderTopLeftRadius = (value) => updatePropertyValue({ borderTopLeftRadius: value });
-    const updateBorderTopRightRadius = (value) => updatePropertyValue({ borderTopRightRadius: value });
-    const updateBorderBottomLeftRadius = (value) => updatePropertyValue({ borderBottomLeftRadius: value });
-    const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: value });
+    const updateBorderLeftWidth = (value) => updatePropertyValue({ borderLeftWidth: toCssLength(value) });
+    const updateBorderRightWidth = (value) => updatePropertyValue({ borderRightWidth: toCssLength(value) });
+    const updateBorderTopWidth = (value) => updatePropertyValue({ borderTopWidth: toCssLength(value) });
+    const updateBorderBottomWidth = (value) => updatePropertyValue({ borderBottomWidth: toCssLength(value) });
+    const updateBorderTopLeftRadius = (value) => updatePropertyValue({ borderTopLeftRadius: toCssLength(value) });
+    const updateBorderTopRightRadius = (value) => updatePropertyValue({ borderTopRightRadius: toCssLength(value) });
+    const updateBorderBottomLeftRadius = (value) => updatePropertyValue({ borderBottomLeftRadius: toCssLength(value) });
+    const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: toCssLength(value) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$f, [
         createElementVNode("div", _hoisted_2$6, [
@@ -11750,10 +11763,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         { properties, targetParts: props.selectedParts }
       );
     };
-    const updateLeft = (value) => updatePropertyValue({ marginLeft: value });
-    const updateRight = (value) => updatePropertyValue({ marginRight: value });
-    const updateTop = (value) => updatePropertyValue({ marginTop: value });
-    const updateBottom = (value) => updatePropertyValue({ marginBottom: value });
+    const updateLeft = (value) => updatePropertyValue({ marginLeft: toCssLength(value) });
+    const updateRight = (value) => updatePropertyValue({ marginRight: toCssLength(value) });
+    const updateTop = (value) => updatePropertyValue({ marginTop: toCssLength(value) });
+    const updateBottom = (value) => updatePropertyValue({ marginBottom: toCssLength(value) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("div", _hoisted_2$5, [
@@ -11838,10 +11851,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         { properties, targetParts: props.selectedParts }
       );
     };
-    const updateLeft = (value) => updatePropertyValue({ paddingLeft: value });
-    const updateRight = (value) => updatePropertyValue({ paddingRight: value });
-    const updateTop = (value) => updatePropertyValue({ paddingTop: value });
-    const updateBottom = (value) => updatePropertyValue({ paddingBottom: value });
+    const updateLeft = (value) => updatePropertyValue({ paddingLeft: toCssLength(value) });
+    const updateRight = (value) => updatePropertyValue({ paddingRight: toCssLength(value) });
+    const updateTop = (value) => updatePropertyValue({ paddingTop: toCssLength(value) });
+    const updateBottom = (value) => updatePropertyValue({ paddingBottom: toCssLength(value) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
         createElementVNode("div", _hoisted_2$4, [
@@ -11907,22 +11920,22 @@ const positionGroup = () => {
       {
         propertyName: "left",
         caption: "Left",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "right",
         caption: "Right",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "top",
         caption: "Top",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "bottom",
         caption: "Bottom",
-        propertyType: "text"
+        propertyType: "css-length"
       }
     ],
     propertyGroupEditor: () => _sfc_main$k
@@ -11936,32 +11949,32 @@ const sizeGroup = () => {
       {
         propertyName: "width",
         caption: "Width",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "height",
         caption: "Height",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "minWidth",
         caption: "Min Width",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "minHeight",
         caption: "Min Height",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "maxWidth",
         caption: "Max Width",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "maxHeight",
         caption: "Max Height",
-        propertyType: "text"
+        propertyType: "css-length"
       }
     ],
     propertyGroupEditor: () => _sfc_main$j
@@ -11975,22 +11988,22 @@ const marginGroup = () => {
       {
         propertyName: "marginLeft",
         caption: "Left",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "marginRight",
         caption: "Right",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "marginTop",
         caption: "Top",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "marginBottom",
         caption: "Bottom",
-        propertyType: "text"
+        propertyType: "css-length"
       }
     ],
     propertyGroupEditor: () => _sfc_main$f
@@ -12004,22 +12017,22 @@ const paddingGroup = () => {
       {
         propertyName: "paddingLeft",
         caption: "Left",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "paddingRight",
         caption: "Right",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "paddingTop",
         caption: "Top",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "paddingBottom",
         caption: "Bottom",
-        propertyType: "text"
+        propertyType: "css-length"
       }
     ],
     propertyGroupEditor: () => _sfc_main$e
@@ -12174,42 +12187,42 @@ const borderGroup = () => {
       {
         propertyName: "borderLeftWidth",
         caption: "Border Left Width",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "borderRightWidth",
         caption: "Border Right Width",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "borderTopWidth",
         caption: "Border Top Width",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "borderBottomWidth",
         caption: "Border Bottom Width",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "borderTopLeftRadius",
         caption: "Border Top Left Radius",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "borderTopRightRadius",
         caption: "Border Top Right Radius",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "borderBottomLeftRadius",
         caption: "Border Bottom Left Radius",
-        propertyType: "text"
+        propertyType: "css-length"
       },
       {
         propertyName: "borderBottomRightRadius",
         caption: "Border Bottom Right Radius",
-        propertyType: "text"
+        propertyType: "css-length"
       }
     ],
     propertyGroupEditor: () => _sfc_main$g
@@ -12757,7 +12770,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-C_6443Z3.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-8BvUYv62.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -14545,8 +14558,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const rowMoved = (event) => {
       var _a, _b, _c, _d, _e, _f;
       let page2 = pageBuilder.context.getSelectedPage();
-      const parentPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
-      if (!parentPartId) return;
+      const destPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
+      if (!destPartId) return;
       let ok = false;
       if (event.row.isSection()) {
         if ((_b = event.destParent) == null ? void 0 : _b.isPage()) ok = true;
@@ -14561,7 +14574,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
       if (ok) {
         backupPartSelection();
-        pageBuilder.model.moveElements(event.row.partId, parentPartId, event.destIndex, void 0, true);
+        pageBuilder.model.moveElements(event.row.partId, destPartId, event.destIndex, void 0, true);
       }
     };
     const selectedRows = computed({
@@ -14655,7 +14668,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             "key-provider": (part) => part.partId,
             "label-provider": labelProvider,
             class: "max-w-320",
-            "dont-change-data-when-rowmoved": "",
+            "dont-change-data-when-row-moved": "",
             "multi-select": "",
             "show-move-button": "",
             onRowMoved: rowMoved
@@ -14887,7 +14900,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\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\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\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\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\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\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\n.pb-section-static .pb-widget {\n  outline: none;\n}\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\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\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  pointer-events: auto !important;\n  min-height: 50px;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\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  pointer-events: auto !important;\n}\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  pointer-events: auto !important;\n}\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\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-media-widget {\n  width: 100%;\n}\n\n.pb-media-widget .image {\n  width: 100%;\n}\n\n.pb-media-widget .video {\n  width: 100%;\n}\n\n.pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\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\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\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\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\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\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\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\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\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\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\n.pb-add-section-handle.bottom {\n  bottom: -32px;\n}\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\n.pb-add-section-handle > i {\n  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
+const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #fff;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\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\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n}\n\n.pb-section:empty {\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\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\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\n.pb-section-static .pb-widget {\n  outline: none;\n}\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\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\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  pointer-events: auto !important;\n  min-height: 50px;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\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  pointer-events: auto !important;\n}\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  pointer-events: auto !important;\n}\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\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-media-widget {\n  width: 100%;\n}\n\n.pb-media-widget .image {\n  width: 100%;\n}\n\n.pb-media-widget .video {\n  width: 100%;\n}\n\n.pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\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\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\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\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\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\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\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\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\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\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\n.pb-add-section-handle.bottom {\n  bottom: -32px;\n}\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\n.pb-add-section-handle > i {\n  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
 const _hoisted_1$2 = ["width"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PbPageFrame",
@@ -16461,10 +16474,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  usePageBuilder as A,
+  providePageBuilderViewer as A,
   BLOCK_TYPE$1 as B,
   ChangePropertyCommand as C,
-  usePageBuilderViewer as D,
+  usePageBuilder as D,
+  usePageBuilderViewer as E,
   Model$1 as M,
   PbColorPicker as P,
   ROOT_TYPE$1 as R,
@@ -16490,11 +16504,11 @@ export {
   Widget as q,
   createPageBuilderViewer as r,
   selectYoutubeVideo as s,
-  createPartComponent as t,
+  toCssLength as t,
   usePageBuilderEditor as u,
-  createPartComponents as v,
+  createPartComponent as v,
   widgetPartDefinitions as w,
-  getPartClassName as x,
-  providePageBuilder as y,
-  providePageBuilderViewer as z
+  createPartComponents as x,
+  getPartClassName as y,
+  providePageBuilder as z
 };

package/dist/model/part-property.d.ts

@@ -1,7 +1,7 @@
 import { IPart } from '@g1cloud/page-builder-viewer';
 import { Component } from 'vue';
 
-export type PartPropertyType = 'readonly-text' | 'text' | 'number' | 'boolean' | 'multiline-text' | 'select' | string;
+export type PartPropertyType = 'readonly-text' | 'text' | 'number' | 'boolean' | 'multiline-text' | 'select' | 'css-length' | string;
 export type PartPropertyEditor = (property: PartProperty, parts: IPart[]) => Component | undefined;
 export type PartProperty = {
     propertyName: string;

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, t, v, x, y, z, A, D } from "./index-D_Af8_UC.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-CEBGHWjv.js";
 export {
   B as BLOCK_TYPE,
   b as Block,
@@ -24,11 +24,11 @@ export {
   W as WIDGET_TYPE,
   q as Widget,
   r as createPageBuilderViewer,
-  t as createPartComponent,
-  v as createPartComponents,
-  x as getPartClassName,
-  y as providePageBuilder,
-  z as providePageBuilderViewer,
-  A as usePageBuilder,
-  D as usePageBuilderViewer
+  v as createPartComponent,
+  x as createPartComponents,
+  y as getPartClassName,
+  z as providePageBuilder,
+  A as providePageBuilderViewer,
+  D as usePageBuilder,
+  E as usePageBuilderViewer
 };