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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/css/page-page.scss +1 -0
  2. package/css/page-section.scss +4 -7
  3. package/dist/{PbPropertyEditorColor-DE3eH4kY.js → PbPropertyEditorColor-Bburxcfo.js} +1 -1
  4. package/dist/PbPropertyEditorCssLength-Cku7TH0H.js +42 -0
  5. package/dist/{PbPropertyEditorHtml-CNeTyj09.js → PbPropertyEditorHtml-BlzCBvjh.js} +1 -1
  6. package/dist/{PbPropertyEditorImage-BR8g41aN.js → PbPropertyEditorImage-D-ZvZqEl.js} +1 -1
  7. package/dist/{PbPropertyEditorMultilineText-DYbAZ4hz.js → PbPropertyEditorMultilineText-Lm27UPXU.js} +1 -1
  8. package/dist/{PbPropertyEditorText-BlUBlNyG.js → PbPropertyEditorText-BFZszY0B.js} +1 -1
  9. package/dist/{PbPropertyEditorYoutube-HsOJ6Oxj.js → PbPropertyEditorYoutube-veiAlowu.js} +1 -1
  10. package/dist/{PbWidgetAddModal-C_6443Z3.js → PbWidgetAddModal-8BvUYv62.js} +1 -1
  11. package/dist/components/sidebar/property/PbPropertyEditorCssLength.vue.d.ts +23 -0
  12. package/dist/{index-D_Af8_UC.js → index-CEBGHWjv.js} +87 -73
  13. package/dist/model/part-property.d.ts +1 -1
  14. package/dist/page-builder-editor.js +8 -8
  15. package/dist/page-builder-editor.umd.cjs +303 -250
  16. package/dist/utils/common.d.ts +1 -0
  17. package/package.json +2 -2
package/dist/page-builder-editor.umd.cjs CHANGED
@@ -6958,7 +6958,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
6958
6958
  innerHTML: styleTag.value
6959
6959
  }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
6960
6960
  vue.withDirectives(vue.createElementVNode("div", {
6961
- class: vue.normalizeClass([classNames.value, "pb-block"]),
6961
+ class: vue.normalizeClass(classNames.value),
6962
6962
  "data-part-id": _ctx.part.partId,
6963
6963
  style: vue.normalizeStyle(style.value)
6964
6964
  }, [
@@ -7004,7 +7004,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
7004
7004
  innerHTML: styleTag.value
7005
7005
  }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
7006
7006
  vue.withDirectives(vue.createElementVNode("div", {
7007
- class: vue.normalizeClass([classNames.value, "pb-section"]),
7007
+ class: vue.normalizeClass(classNames.value),
7008
7008
  "data-part-id": _ctx.part.partId,
7009
7009
  style: vue.normalizeStyle(style.value)
7010
7010
  }, [
@@ -7379,7 +7379,7 @@ ${_html.style}
7379
7379
  plugin.widgets.forEach((v) => {
7380
7380
  const w = { ...v };
7381
7381
  w.partType = "Widget";
7382
- w.creator = () => _sfc_main$E;
7382
+ w.creator = () => _sfc_main$F;
7383
7383
  partDefinitions$1[v.partName] = w;
7384
7384
  });
7385
7385
  }
@@ -7534,7 +7534,7 @@ ${_html.style}
7534
7534
  }
7535
7535
  });
7536
7536
  const _hoisted_1$1$1 = ["innerHTML"];
7537
- const _hoisted_2$u = { class: "pb-viewer" };
7537
+ const _hoisted_2$v = { class: "pb-viewer" };
7538
7538
  const _sfc_main$2$1 = /* @__PURE__ */ vue.defineComponent({
7539
7539
  __name: "PageBuilderViewer",
7540
7540
  props: {
@@ -7575,7 +7575,7 @@ ${_html.style}
7575
7575
  key: 0,
7576
7576
  innerHTML: vue.unref(externalCss)
7577
7577
  }, null, 8, _hoisted_1$1$1)) : vue.createCommentVNode("", true),
7578
- vue.createElementVNode("div", _hoisted_2$u, [
7578
+ vue.createElementVNode("div", _hoisted_2$v, [
7579
7579
  part.value ? (vue.openBlock(), vue.createBlock(_sfc_main$3$1, {
7580
7580
  key: 0,
7581
7581
  "is-mobile-page": _ctx.isMobilePage,
@@ -7586,7 +7586,7 @@ ${_html.style}
7586
7586
  };
7587
7587
  }
7588
7588
  });
7589
- const _hoisted_1$I = {
7589
+ const _hoisted_1$J = {
7590
7590
  key: 1,
7591
7591
  class: "placeholder",
7592
7592
  textContent: "Empty Widget"
@@ -7607,11 +7607,11 @@ ${_html.style}
7607
7607
  key: child.part.partId,
7608
7608
  part: child.part
7609
7609
  }, null, 8, ["part"]);
7610
- }), 128)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$I)) : vue.createCommentVNode("", true);
7610
+ }), 128)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J)) : vue.createCommentVNode("", true);
7611
7611
  };
7612
7612
  }
7613
7613
  });
7614
- const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
7614
+ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
7615
7615
  __name: "PbCustomWidget",
7616
7616
  props: {
7617
7617
  part: {},
@@ -8216,6 +8216,7 @@ ${_html.style}
8216
8216
  "boolean": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorBoolean)),
8217
8217
  "multiline-text": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorMultilineText)),
8218
8218
  "select": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorSelect)),
8219
+ "css-length": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorCssLength)),
8219
8220
  "color": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorColor)),
8220
8221
  "image": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorImage)),
8221
8222
  "html": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorHtml)),
@@ -8468,10 +8469,10 @@ ${_html.style}
8468
8469
  }
8469
8470
  return target;
8470
8471
  };
8471
- const _sfc_main$D = {};
8472
- const _hoisted_1$H = { class: "pb-add-widget-button" };
8472
+ const _sfc_main$E = {};
8473
+ const _hoisted_1$I = { class: "pb-add-widget-button" };
8473
8474
  function _sfc_render$1(_ctx, _cache) {
8474
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$H, [
8475
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$I, [
8475
8476
  vue.createElementVNode("button", {
8476
8477
  onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
8477
8478
  }, _cache[1] || (_cache[1] = [
@@ -8480,7 +8481,7 @@ ${_html.style}
8480
8481
  ]))
8481
8482
  ]);
8482
8483
  }
8483
- const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["render", _sfc_render$1]]);
8484
+ const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["render", _sfc_render$1]]);
8484
8485
  const MOUSE_TRACKER_KEY = "mouseTracker";
8485
8486
  const MOUSE_TRACKER_NOT_FOUND = "MouseTracker not found";
8486
8487
  class MouseTracker {
@@ -8508,13 +8509,13 @@ ${_html.style}
8508
8509
  if (!mouseTracker) throw Error(MOUSE_TRACKER_NOT_FOUND);
8509
8510
  return mouseTracker;
8510
8511
  };
8511
- const _hoisted_1$G = ["data-part-id", "draggable"];
8512
- const _hoisted_2$t = {
8512
+ const _hoisted_1$H = ["data-part-id", "draggable"];
8513
+ const _hoisted_2$u = {
8513
8514
  key: 1,
8514
8515
  class: "invalid-widget",
8515
8516
  textContent: "Invalid Widget"
8516
8517
  };
8517
- const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
8518
+ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
8518
8519
  __name: "PbWidget",
8519
8520
  props: {
8520
8521
  part: {},
@@ -8939,7 +8940,7 @@ ${_html.style}
8939
8940
  draggable: draggable.value,
8940
8941
  style: vue.normalizeStyle(style.value)
8941
8942
  }, [
8942
- 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$t)),
8943
+ 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)),
8943
8944
  selected.value && _ctx.part.isNestedWidget() ? (vue.openBlock(), vue.createElementBlock("div", {
8944
8945
  key: 2,
8945
8946
  class: "pan-handle",
@@ -8950,15 +8951,15 @@ ${_html.style}
8950
8951
  class: "resize-handle",
8951
8952
  onMousedown: resizeChild
8952
8953
  }, null, 32)) : vue.createCommentVNode("", true)
8953
- ], 14, _hoisted_1$G)), [
8954
+ ], 14, _hoisted_1$H)), [
8954
8955
  [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
8955
8956
  ])
8956
8957
  ], 64);
8957
8958
  };
8958
8959
  }
8959
8960
  });
8960
- const _hoisted_1$F = ["data-part-id"];
8961
- const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
8961
+ const _hoisted_1$G = ["data-part-id"];
8962
+ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
8962
8963
  __name: "PbBlock",
8963
8964
  props: {
8964
8965
  part: {},
@@ -9149,27 +9150,27 @@ ${_html.style}
9149
9150
  onAddWidget: addWidget
9150
9151
  })) : vue.createCommentVNode("", true),
9151
9152
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
9152
- return vue.openBlock(), vue.createBlock(_sfc_main$C, {
9153
+ return vue.openBlock(), vue.createBlock(_sfc_main$D, {
9153
9154
  key: child.partId,
9154
9155
  part: child
9155
9156
  }, null, 8, ["part"]);
9156
9157
  }), 128))
9157
- ], 16, _hoisted_1$F)), [
9158
+ ], 16, _hoisted_1$G)), [
9158
9159
  [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
9159
9160
  ])
9160
9161
  ], 64);
9161
9162
  };
9162
9163
  }
9163
9164
  });
9164
- const _hoisted_1$E = { class: "pb-block" };
9165
- const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
9165
+ const _hoisted_1$F = { class: "pb-block" };
9166
+ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
9166
9167
  __name: "PbLoginDepart",
9167
9168
  props: {
9168
9169
  part: {}
9169
9170
  },
9170
9171
  setup(__props) {
9171
9172
  return (_ctx, _cache) => {
9172
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, _cache[0] || (_cache[0] = [
9173
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, _cache[0] || (_cache[0] = [
9173
9174
  vue.createElementVNode("div", {
9174
9175
  class: "pb-widget",
9175
9176
  style: { "margin": "0 auto" }
@@ -9182,8 +9183,8 @@ ${_html.style}
9182
9183
  };
9183
9184
  }
9184
9185
  });
9185
- const _hoisted_1$D = ["data-part-id"];
9186
- const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
9186
+ const _hoisted_1$E = ["data-part-id"];
9187
+ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
9187
9188
  __name: "PbSection",
9188
9189
  props: {
9189
9190
  part: {},
@@ -9294,13 +9295,13 @@ ${_html.style}
9294
9295
  style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
9295
9296
  }, properties.value), [
9296
9297
  ((_b = _ctx.part.properties) == null ? void 0 : _b.sectionType) === "static" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
9297
- ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
9298
+ ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
9298
9299
  key: 0,
9299
9300
  part: _ctx.part
9300
9301
  }, null, 8, ["part"])) : vue.createCommentVNode("", true)
9301
9302
  ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
9302
9303
  _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (block) => {
9303
- return vue.openBlock(), vue.createBlock(_sfc_main$B, {
9304
+ return vue.openBlock(), vue.createBlock(_sfc_main$C, {
9304
9305
  key: block.partId,
9305
9306
  "is-mobile-page": _ctx.isMobilePage,
9306
9307
  part: block
@@ -9310,22 +9311,34 @@ ${_html.style}
9310
9311
  onAddWidget: addWidget
9311
9312
  }))
9312
9313
  ], 64))
9313
- ], 16, _hoisted_1$D)), [
9314
+ ], 16, _hoisted_1$E)), [
9314
9315
  [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
9315
9316
  ])
9316
9317
  ], 64);
9317
9318
  };
9318
9319
  }
9319
9320
  });
9320
- const _hoisted_1$C = { class: "group-editor group-editor-position" };
9321
- const _hoisted_2$s = { class: "flex-align-center" };
9321
+ function toCssLength(value) {
9322
+ const cssLengthPattern = /^-?\d+(\.\d+)?(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc)$/;
9323
+ value = value.trim().replace(/\s+(?=[a-zA-Z%]+)/g, "");
9324
+ if (cssLengthPattern.test(value)) {
9325
+ return value;
9326
+ }
9327
+ const numberMatch = value.match(/-?\d+(\.\d+)?/);
9328
+ if (!numberMatch) {
9329
+ return "";
9330
+ }
9331
+ return `${numberMatch[0]}px`;
9332
+ }
9333
+ const _hoisted_1$D = { class: "group-editor group-editor-position" };
9334
+ const _hoisted_2$t = { class: "flex-align-center" };
9322
9335
  const _hoisted_3$j = { class: "title" };
9323
9336
  const _hoisted_4$e = { class: "flex-grow-1" };
9324
9337
  const _hoisted_5$a = { class: "bg-gray-100 py-5 rounded-8" };
9325
9338
  const _hoisted_6$9 = { class: "text-center" };
9326
9339
  const _hoisted_7$8 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
9327
9340
  const _hoisted_8$7 = { class: "text-center" };
9328
- const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
9341
+ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
9329
9342
  __name: "PbPropertyGroupEditorPosition",
9330
9343
  props: {
9331
9344
  group: {},
@@ -9344,13 +9357,13 @@ ${_html.style}
9344
9357
  { properties, targetParts: props.selectedParts }
9345
9358
  );
9346
9359
  };
9347
- const updateLeft = (value) => updatePropertyValue({ left: value });
9348
- const updateRight = (value) => updatePropertyValue({ right: value });
9349
- const updateTop = (value) => updatePropertyValue({ top: value });
9350
- const updateBottom = (value) => updatePropertyValue({ bottom: value });
9360
+ const updateLeft = (value) => updatePropertyValue({ left: toCssLength(value) });
9361
+ const updateRight = (value) => updatePropertyValue({ right: toCssLength(value) });
9362
+ const updateTop = (value) => updatePropertyValue({ top: toCssLength(value) });
9363
+ const updateBottom = (value) => updatePropertyValue({ bottom: toCssLength(value) });
9351
9364
  return (_ctx, _cache) => {
9352
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
9353
- vue.createElementVNode("div", _hoisted_2$s, [
9365
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
9366
+ vue.createElementVNode("div", _hoisted_2$t, [
9354
9367
  vue.createElementVNode("div", _hoisted_3$j, [
9355
9368
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
9356
9369
  [vue.unref(bluesea.vT), { key: "pb.prop.position" }]
@@ -9405,8 +9418,8 @@ ${_html.style}
9405
9418
  };
9406
9419
  }
9407
9420
  });
9408
- const _hoisted_1$B = { class: "group-editor group-editor-size" };
9409
- const _hoisted_2$r = { class: "flex-align-center" };
9421
+ const _hoisted_1$C = { class: "group-editor group-editor-size" };
9422
+ const _hoisted_2$s = { class: "flex-align-center" };
9410
9423
  const _hoisted_3$i = { class: "title" };
9411
9424
  const _hoisted_4$d = { class: "flex-grow-1 bs-layout-horizontal" };
9412
9425
  const _hoisted_5$9 = { class: "flex-align-center mt-12" };
@@ -9415,7 +9428,7 @@ ${_html.style}
9415
9428
  const _hoisted_8$6 = { class: "flex-align-center mt-12" };
9416
9429
  const _hoisted_9$3 = { class: "title" };
9417
9430
  const _hoisted_10$3 = { class: "flex-grow-1 bs-layout-horizontal" };
9418
- const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
9431
+ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
9419
9432
  __name: "PbPropertyGroupEditorSize",
9420
9433
  props: {
9421
9434
  group: {},
@@ -9436,15 +9449,15 @@ ${_html.style}
9436
9449
  { properties, targetParts: props.selectedParts }
9437
9450
  );
9438
9451
  };
9439
- const updateWidth = (value) => updatePropertyValue({ width: value });
9440
- const updateHeight = (value) => updatePropertyValue({ height: value });
9441
- const updateMaxWidth = (value) => updatePropertyValue({ maxWidth: value });
9442
- const updateMaxHeight = (value) => updatePropertyValue({ maxHeight: value });
9443
- const updateMinWidth = (value) => updatePropertyValue({ minWidth: value });
9444
- const updateMinHeight = (value) => updatePropertyValue({ minHeight: value });
9452
+ const updateWidth = (value) => updatePropertyValue({ width: toCssLength(value) });
9453
+ const updateHeight = (value) => updatePropertyValue({ height: toCssLength(value) });
9454
+ const updateMaxWidth = (value) => updatePropertyValue({ maxWidth: toCssLength(value) });
9455
+ const updateMaxHeight = (value) => updatePropertyValue({ maxHeight: toCssLength(value) });
9456
+ const updateMinWidth = (value) => updatePropertyValue({ minWidth: toCssLength(value) });
9457
+ const updateMinHeight = (value) => updatePropertyValue({ minHeight: toCssLength(value) });
9445
9458
  return (_ctx, _cache) => {
9446
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
9447
- vue.createElementVNode("div", _hoisted_2$r, [
9459
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
9460
+ vue.createElementVNode("div", _hoisted_2$s, [
9448
9461
  vue.createElementVNode("div", _hoisted_3$i, [
9449
9462
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
9450
9463
  [vue.unref(bluesea.vT), { key: "pb.prop.size" }]
@@ -9667,8 +9680,8 @@ ${_html.style}
9667
9680
  }
9668
9681
  }
9669
9682
  };
9670
- const _hoisted_1$A = { class: "vc-alpha" };
9671
- const _hoisted_2$q = { class: "vc-alpha-checkboard-wrap" };
9683
+ const _hoisted_1$B = { class: "vc-alpha" };
9684
+ const _hoisted_2$r = { class: "vc-alpha-checkboard-wrap" };
9672
9685
  const _hoisted_3$h = /* @__PURE__ */ vue.createElementVNode(
9673
9686
  "div",
9674
9687
  { class: "vc-alpha-picker" },
@@ -9681,8 +9694,8 @@ ${_html.style}
9681
9694
  ];
9682
9695
  function render$4(_ctx, _cache, $props, $setup, $data, $options) {
9683
9696
  const _component_Checkboard = vue.resolveComponent("Checkboard");
9684
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
9685
- vue.createElementVNode("div", _hoisted_2$q, [
9697
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
9698
+ vue.createElementVNode("div", _hoisted_2$r, [
9686
9699
  vue.createVNode(_component_Checkboard)
9687
9700
  ]),
9688
9701
  vue.createElementVNode(
@@ -10785,12 +10798,12 @@ ${_html.style}
10785
10798
  // }
10786
10799
  }
10787
10800
  };
10788
- const _hoisted_1$z = { class: "vc-editable-input" };
10789
- const _hoisted_2$p = ["aria-labelledby"];
10801
+ const _hoisted_1$A = { class: "vc-editable-input" };
10802
+ const _hoisted_2$q = ["aria-labelledby"];
10790
10803
  const _hoisted_3$g = ["id", "for"];
10791
10804
  const _hoisted_4$b = { class: "vc-input__desc" };
10792
10805
  function render$3(_ctx, _cache, $props, $setup, $data, $options) {
10793
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
10806
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
10794
10807
  vue.withDirectives(vue.createElementVNode("input", {
10795
10808
  ref: "input",
10796
10809
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.val = $event),
@@ -10798,7 +10811,7 @@ ${_html.style}
10798
10811
  class: "vc-input__input",
10799
10812
  onKeydown: _cache[1] || (_cache[1] = (...args) => $options.handleKeyDown && $options.handleKeyDown(...args)),
10800
10813
  onInput: _cache[2] || (_cache[2] = (...args) => $options.update && $options.update(...args))
10801
- }, null, 40, _hoisted_2$p), [
10814
+ }, null, 40, _hoisted_2$q), [
10802
10815
  [vue.vModelText, $options.val]
10803
10816
  ]),
10804
10817
  vue.createElementVNode("span", {
@@ -10885,14 +10898,14 @@ ${_html.style}
10885
10898
  }
10886
10899
  }
10887
10900
  };
10888
- const _hoisted_1$y = /* @__PURE__ */ vue.createElementVNode(
10901
+ const _hoisted_1$z = /* @__PURE__ */ vue.createElementVNode(
10889
10902
  "div",
10890
10903
  { class: "vc-saturation--white" },
10891
10904
  null,
10892
10905
  -1
10893
10906
  /* HOISTED */
10894
10907
  );
10895
- const _hoisted_2$o = /* @__PURE__ */ vue.createElementVNode(
10908
+ const _hoisted_2$p = /* @__PURE__ */ vue.createElementVNode(
10896
10909
  "div",
10897
10910
  { class: "vc-saturation--black" },
10898
10911
  null,
@@ -10921,8 +10934,8 @@ ${_html.style}
10921
10934
  onTouchstart: _cache[2] || (_cache[2] = (...args) => $options.handleChange && $options.handleChange(...args))
10922
10935
  },
10923
10936
  [
10924
- _hoisted_1$y,
10925
- _hoisted_2$o,
10937
+ _hoisted_1$z,
10938
+ _hoisted_2$p,
10926
10939
  vue.createElementVNode(
10927
10940
  "div",
10928
10941
  {
@@ -11070,8 +11083,8 @@ ${_html.style}
11070
11083
  }
11071
11084
  }
11072
11085
  };
11073
- const _hoisted_1$x = ["aria-valuenow"];
11074
- const _hoisted_2$n = /* @__PURE__ */ vue.createElementVNode(
11086
+ const _hoisted_1$y = ["aria-valuenow"];
11087
+ const _hoisted_2$o = /* @__PURE__ */ vue.createElementVNode(
11075
11088
  "div",
11076
11089
  { class: "vc-hue-picker" },
11077
11090
  null,
@@ -11079,7 +11092,7 @@ ${_html.style}
11079
11092
  /* HOISTED */
11080
11093
  );
11081
11094
  const _hoisted_3$e = [
11082
- _hoisted_2$n
11095
+ _hoisted_2$o
11083
11096
  ];
11084
11097
  function render$1(_ctx, _cache, $props, $setup, $data, $options) {
11085
11098
  return vue.openBlock(), vue.createElementBlock(
@@ -11110,7 +11123,7 @@ ${_html.style}
11110
11123
  4
11111
11124
  /* STYLE */
11112
11125
  )
11113
- ], 40, _hoisted_1$x)
11126
+ ], 40, _hoisted_1$y)
11114
11127
  ],
11115
11128
  2
11116
11129
  /* CLASS */
@@ -11206,8 +11219,8 @@ ${_html.style}
11206
11219
  }
11207
11220
  }
11208
11221
  };
11209
- const _hoisted_1$w = { class: "vc-sketch-saturation-wrap" };
11210
- const _hoisted_2$m = { class: "vc-sketch-controls" };
11222
+ const _hoisted_1$x = { class: "vc-sketch-saturation-wrap" };
11223
+ const _hoisted_2$n = { class: "vc-sketch-controls" };
11211
11224
  const _hoisted_3$d = { class: "vc-sketch-sliders" };
11212
11225
  const _hoisted_4$9 = { class: "vc-sketch-hue-wrap" };
11213
11226
  const _hoisted_5$8 = {
@@ -11249,13 +11262,13 @@ ${_html.style}
11249
11262
  class: vue.normalizeClass(["vc-sketch", [$props.disableAlpha ? "vc-sketch__disable-alpha" : ""]])
11250
11263
  },
11251
11264
  [
11252
- vue.createElementVNode("div", _hoisted_1$w, [
11265
+ vue.createElementVNode("div", _hoisted_1$x, [
11253
11266
  vue.createVNode(_component_Saturation, {
11254
11267
  value: _ctx.colors,
11255
11268
  onChange: $options.childChange
11256
11269
  }, null, 8, ["value", "onChange"])
11257
11270
  ]),
11258
- vue.createElementVNode("div", _hoisted_2$m, [
11271
+ vue.createElementVNode("div", _hoisted_2$n, [
11259
11272
  vue.createElementVNode("div", _hoisted_3$d, [
11260
11273
  vue.createElementVNode("div", _hoisted_4$9, [
11261
11274
  vue.createVNode(_component_Hue, {
@@ -11361,7 +11374,7 @@ ${_html.style}
11361
11374
  script.render = render;
11362
11375
  script.__file = "src/components/sketch/sketch.vue";
11363
11376
  script.install = install;
11364
- const _sfc_main$w = vue.defineComponent({
11377
+ const _sfc_main$x = vue.defineComponent({
11365
11378
  name: "PbColorPicker",
11366
11379
  components: {
11367
11380
  Sketch: script
@@ -11421,8 +11434,8 @@ ${_html.style}
11421
11434
  };
11422
11435
  }
11423
11436
  });
11424
- const _hoisted_1$v = { class: "buttons" };
11425
- const _hoisted_2$l = { class: "sketch-wrap" };
11437
+ const _hoisted_1$w = { class: "buttons" };
11438
+ const _hoisted_2$m = { class: "sketch-wrap" };
11426
11439
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
11427
11440
  const _component_Sketch = vue.resolveComponent("Sketch");
11428
11441
  const _directive_click_outside = vue.resolveDirective("click-outside");
@@ -11431,7 +11444,7 @@ ${_html.style}
11431
11444
  onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
11432
11445
  }, ["stop"]))
11433
11446
  }, [
11434
- vue.createElementVNode("div", _hoisted_1$v, [
11447
+ vue.createElementVNode("div", _hoisted_1$w, [
11435
11448
  vue.renderSlot(_ctx.$slots, "button", vue.normalizeProps(vue.guardReactiveProps({ toggle: _ctx.toggle, color: _ctx.color })), () => [
11436
11449
  vue.createElementVNode("button", {
11437
11450
  class: vue.normalizeClass([{ none: !_ctx.color }, "picker-button"]),
@@ -11446,7 +11459,7 @@ ${_html.style}
11446
11459
  vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1)
11447
11460
  ]))) : vue.createCommentVNode("", true)
11448
11461
  ]),
11449
- vue.createElementVNode("div", _hoisted_2$l, [
11462
+ vue.createElementVNode("div", _hoisted_2$m, [
11450
11463
  _ctx.isShowColorPicker ? (vue.openBlock(), vue.createBlock(_component_Sketch, {
11451
11464
  key: 0,
11452
11465
  modelValue: _ctx.color,
@@ -11458,14 +11471,14 @@ ${_html.style}
11458
11471
  [_directive_click_outside, () => _ctx.toggle(false)]
11459
11472
  ]);
11460
11473
  }
11461
- const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render]]);
11462
- const _hoisted_1$u = { class: "group-editor group-editor-background" };
11463
- const _hoisted_2$k = { class: "flex-align-center" };
11474
+ const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render]]);
11475
+ const _hoisted_1$v = { class: "group-editor group-editor-background" };
11476
+ const _hoisted_2$l = { class: "flex-align-center" };
11464
11477
  const _hoisted_3$c = { class: "title" };
11465
11478
  const _hoisted_4$8 = { class: "bs-layout-horizontal" };
11466
11479
  const _hoisted_5$7 = { class: "color" };
11467
11480
  const _hoisted_6$6 = { class: "image" };
11468
- const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
11481
+ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
11469
11482
  __name: "PbPropertyGroupEditorBackground",
11470
11483
  props: {
11471
11484
  group: {},
@@ -11498,8 +11511,8 @@ ${_html.style}
11498
11511
  }
11499
11512
  };
11500
11513
  return (_ctx, _cache) => {
11501
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
11502
- vue.createElementVNode("div", _hoisted_2$k, [
11514
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
11515
+ vue.createElementVNode("div", _hoisted_2$l, [
11503
11516
  vue.createElementVNode("div", _hoisted_3$c, [
11504
11517
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
11505
11518
  [vue.unref(bluesea.vT), { key: "pb.prop.background" }]
@@ -11537,8 +11550,8 @@ ${_html.style}
11537
11550
  const TopRightCornerIcon = "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'%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";
11538
11551
  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";
11539
11552
  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";
11540
- const _hoisted_1$t = { class: "group-editor group-editor-border" };
11541
- const _hoisted_2$j = { class: "flex-align-center" };
11553
+ const _hoisted_1$u = { class: "group-editor group-editor-border" };
11554
+ const _hoisted_2$k = { class: "flex-align-center" };
11542
11555
  const _hoisted_3$b = { class: "title" };
11543
11556
  const _hoisted_4$7 = { class: "" };
11544
11557
  const _hoisted_5$6 = { class: "sub-title" };
@@ -11556,7 +11569,7 @@ ${_html.style}
11556
11569
  const _hoisted_17 = { class: "bg-gray-100 py-5 rounded-8" };
11557
11570
  const _hoisted_18 = { class: "" };
11558
11571
  const _hoisted_19 = { class: "mt-2" };
11559
- const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
11572
+ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
11560
11573
  __name: "PbPropertyGroupEditorBorder",
11561
11574
  props: {
11562
11575
  group: {},
@@ -11585,17 +11598,17 @@ ${_html.style}
11585
11598
  const saveOriginalColor = () => {
11586
11599
  };
11587
11600
  const updateColor = (value) => updatePropertyValue({ borderColor: value });
11588
- const updateBorderLeftWidth = (value) => updatePropertyValue({ borderLeftWidth: value });
11589
- const updateBorderRightWidth = (value) => updatePropertyValue({ borderRightWidth: value });
11590
- const updateBorderTopWidth = (value) => updatePropertyValue({ borderTopWidth: value });
11591
- const updateBorderBottomWidth = (value) => updatePropertyValue({ borderBottomWidth: value });
11592
- const updateBorderTopLeftRadius = (value) => updatePropertyValue({ borderTopLeftRadius: value });
11593
- const updateBorderTopRightRadius = (value) => updatePropertyValue({ borderTopRightRadius: value });
11594
- const updateBorderBottomLeftRadius = (value) => updatePropertyValue({ borderBottomLeftRadius: value });
11595
- const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: value });
11601
+ const updateBorderLeftWidth = (value) => updatePropertyValue({ borderLeftWidth: toCssLength(value) });
11602
+ const updateBorderRightWidth = (value) => updatePropertyValue({ borderRightWidth: toCssLength(value) });
11603
+ const updateBorderTopWidth = (value) => updatePropertyValue({ borderTopWidth: toCssLength(value) });
11604
+ const updateBorderBottomWidth = (value) => updatePropertyValue({ borderBottomWidth: toCssLength(value) });
11605
+ const updateBorderTopLeftRadius = (value) => updatePropertyValue({ borderTopLeftRadius: toCssLength(value) });
11606
+ const updateBorderTopRightRadius = (value) => updatePropertyValue({ borderTopRightRadius: toCssLength(value) });
11607
+ const updateBorderBottomLeftRadius = (value) => updatePropertyValue({ borderBottomLeftRadius: toCssLength(value) });
11608
+ const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: toCssLength(value) });
11596
11609
  return (_ctx, _cache) => {
11597
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
11598
- vue.createElementVNode("div", _hoisted_2$j, [
11610
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
11611
+ vue.createElementVNode("div", _hoisted_2$k, [
11599
11612
  vue.createElementVNode("div", _hoisted_3$b, [
11600
11613
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
11601
11614
  [vue.unref(bluesea.vT), { key: "pb.prop.border" }]
@@ -11724,15 +11737,15 @@ ${_html.style}
11724
11737
  };
11725
11738
  }
11726
11739
  });
11727
- const _hoisted_1$s = { class: "group-editor group-editor-margin" };
11728
- const _hoisted_2$i = { class: "flex-align-center" };
11740
+ const _hoisted_1$t = { class: "group-editor group-editor-margin" };
11741
+ const _hoisted_2$j = { class: "flex-align-center" };
11729
11742
  const _hoisted_3$a = { class: "title" };
11730
11743
  const _hoisted_4$6 = { class: "flex-grow-1" };
11731
11744
  const _hoisted_5$5 = { class: "bg-gray-100 py-5 rounded-8" };
11732
11745
  const _hoisted_6$4 = { class: "text-center" };
11733
11746
  const _hoisted_7$4 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
11734
11747
  const _hoisted_8$3 = { class: "text-center" };
11735
- const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
11748
+ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
11736
11749
  __name: "PbPropertyGroupEditorMargin",
11737
11750
  props: {
11738
11751
  group: {},
@@ -11751,13 +11764,13 @@ ${_html.style}
11751
11764
  { properties, targetParts: props.selectedParts }
11752
11765
  );
11753
11766
  };
11754
- const updateLeft = (value) => updatePropertyValue({ marginLeft: value });
11755
- const updateRight = (value) => updatePropertyValue({ marginRight: value });
11756
- const updateTop = (value) => updatePropertyValue({ marginTop: value });
11757
- const updateBottom = (value) => updatePropertyValue({ marginBottom: value });
11767
+ const updateLeft = (value) => updatePropertyValue({ marginLeft: toCssLength(value) });
11768
+ const updateRight = (value) => updatePropertyValue({ marginRight: toCssLength(value) });
11769
+ const updateTop = (value) => updatePropertyValue({ marginTop: toCssLength(value) });
11770
+ const updateBottom = (value) => updatePropertyValue({ marginBottom: toCssLength(value) });
11758
11771
  return (_ctx, _cache) => {
11759
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
11760
- vue.createElementVNode("div", _hoisted_2$i, [
11772
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
11773
+ vue.createElementVNode("div", _hoisted_2$j, [
11761
11774
  vue.createElementVNode("div", _hoisted_3$a, [
11762
11775
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
11763
11776
  [vue.unref(bluesea.vT), { key: "pb.prop.margin" }]
@@ -11812,15 +11825,15 @@ ${_html.style}
11812
11825
  };
11813
11826
  }
11814
11827
  });
11815
- const _hoisted_1$r = { class: "group-editor group-editor-padding" };
11816
- const _hoisted_2$h = { class: "flex-align-center" };
11828
+ const _hoisted_1$s = { class: "group-editor group-editor-padding" };
11829
+ const _hoisted_2$i = { class: "flex-align-center" };
11817
11830
  const _hoisted_3$9 = { class: "title" };
11818
11831
  const _hoisted_4$5 = { class: "flex-grow-1" };
11819
11832
  const _hoisted_5$4 = { class: "bg-gray-100 py-5 rounded-8" };
11820
11833
  const _hoisted_6$3 = { class: "text-center" };
11821
11834
  const _hoisted_7$3 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
11822
11835
  const _hoisted_8$2 = { class: "text-center" };
11823
- const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
11836
+ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
11824
11837
  __name: "PbPropertyGroupEditorPadding",
11825
11838
  props: {
11826
11839
  group: {},
@@ -11839,13 +11852,13 @@ ${_html.style}
11839
11852
  { properties, targetParts: props.selectedParts }
11840
11853
  );
11841
11854
  };
11842
- const updateLeft = (value) => updatePropertyValue({ paddingLeft: value });
11843
- const updateRight = (value) => updatePropertyValue({ paddingRight: value });
11844
- const updateTop = (value) => updatePropertyValue({ paddingTop: value });
11845
- const updateBottom = (value) => updatePropertyValue({ paddingBottom: value });
11855
+ const updateLeft = (value) => updatePropertyValue({ paddingLeft: toCssLength(value) });
11856
+ const updateRight = (value) => updatePropertyValue({ paddingRight: toCssLength(value) });
11857
+ const updateTop = (value) => updatePropertyValue({ paddingTop: toCssLength(value) });
11858
+ const updateBottom = (value) => updatePropertyValue({ paddingBottom: toCssLength(value) });
11846
11859
  return (_ctx, _cache) => {
11847
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
11848
- vue.createElementVNode("div", _hoisted_2$h, [
11860
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
11861
+ vue.createElementVNode("div", _hoisted_2$i, [
11849
11862
  vue.createElementVNode("div", _hoisted_3$9, [
11850
11863
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
11851
11864
  [vue.unref(bluesea.vT), { key: "pb.prop.padding" }]
@@ -11908,25 +11921,25 @@ ${_html.style}
11908
11921
  {
11909
11922
  propertyName: "left",
11910
11923
  caption: "Left",
11911
- propertyType: "text"
11924
+ propertyType: "css-length"
11912
11925
  },
11913
11926
  {
11914
11927
  propertyName: "right",
11915
11928
  caption: "Right",
11916
- propertyType: "text"
11929
+ propertyType: "css-length"
11917
11930
  },
11918
11931
  {
11919
11932
  propertyName: "top",
11920
11933
  caption: "Top",
11921
- propertyType: "text"
11934
+ propertyType: "css-length"
11922
11935
  },
11923
11936
  {
11924
11937
  propertyName: "bottom",
11925
11938
  caption: "Bottom",
11926
- propertyType: "text"
11939
+ propertyType: "css-length"
11927
11940
  }
11928
11941
  ],
11929
- propertyGroupEditor: () => _sfc_main$y
11942
+ propertyGroupEditor: () => _sfc_main$z
11930
11943
  };
11931
11944
  };
11932
11945
  const sizeGroup = () => {
@@ -11937,35 +11950,35 @@ ${_html.style}
11937
11950
  {
11938
11951
  propertyName: "width",
11939
11952
  caption: "Width",
11940
- propertyType: "text"
11953
+ propertyType: "css-length"
11941
11954
  },
11942
11955
  {
11943
11956
  propertyName: "height",
11944
11957
  caption: "Height",
11945
- propertyType: "text"
11958
+ propertyType: "css-length"
11946
11959
  },
11947
11960
  {
11948
11961
  propertyName: "minWidth",
11949
11962
  caption: "Min Width",
11950
- propertyType: "text"
11963
+ propertyType: "css-length"
11951
11964
  },
11952
11965
  {
11953
11966
  propertyName: "minHeight",
11954
11967
  caption: "Min Height",
11955
- propertyType: "text"
11968
+ propertyType: "css-length"
11956
11969
  },
11957
11970
  {
11958
11971
  propertyName: "maxWidth",
11959
11972
  caption: "Max Width",
11960
- propertyType: "text"
11973
+ propertyType: "css-length"
11961
11974
  },
11962
11975
  {
11963
11976
  propertyName: "maxHeight",
11964
11977
  caption: "Max Height",
11965
- propertyType: "text"
11978
+ propertyType: "css-length"
11966
11979
  }
11967
11980
  ],
11968
- propertyGroupEditor: () => _sfc_main$x
11981
+ propertyGroupEditor: () => _sfc_main$y
11969
11982
  };
11970
11983
  };
11971
11984
  const marginGroup = () => {
@@ -11976,25 +11989,25 @@ ${_html.style}
11976
11989
  {
11977
11990
  propertyName: "marginLeft",
11978
11991
  caption: "Left",
11979
- propertyType: "text"
11992
+ propertyType: "css-length"
11980
11993
  },
11981
11994
  {
11982
11995
  propertyName: "marginRight",
11983
11996
  caption: "Right",
11984
- propertyType: "text"
11997
+ propertyType: "css-length"
11985
11998
  },
11986
11999
  {
11987
12000
  propertyName: "marginTop",
11988
12001
  caption: "Top",
11989
- propertyType: "text"
12002
+ propertyType: "css-length"
11990
12003
  },
11991
12004
  {
11992
12005
  propertyName: "marginBottom",
11993
12006
  caption: "Bottom",
11994
- propertyType: "text"
12007
+ propertyType: "css-length"
11995
12008
  }
11996
12009
  ],
11997
- propertyGroupEditor: () => _sfc_main$t
12010
+ propertyGroupEditor: () => _sfc_main$u
11998
12011
  };
11999
12012
  };
12000
12013
  const paddingGroup = () => {
@@ -12005,25 +12018,25 @@ ${_html.style}
12005
12018
  {
12006
12019
  propertyName: "paddingLeft",
12007
12020
  caption: "Left",
12008
- propertyType: "text"
12021
+ propertyType: "css-length"
12009
12022
  },
12010
12023
  {
12011
12024
  propertyName: "paddingRight",
12012
12025
  caption: "Right",
12013
- propertyType: "text"
12026
+ propertyType: "css-length"
12014
12027
  },
12015
12028
  {
12016
12029
  propertyName: "paddingTop",
12017
12030
  caption: "Top",
12018
- propertyType: "text"
12031
+ propertyType: "css-length"
12019
12032
  },
12020
12033
  {
12021
12034
  propertyName: "paddingBottom",
12022
12035
  caption: "Bottom",
12023
- propertyType: "text"
12036
+ propertyType: "css-length"
12024
12037
  }
12025
12038
  ],
12026
- propertyGroupEditor: () => _sfc_main$s
12039
+ propertyGroupEditor: () => _sfc_main$t
12027
12040
  };
12028
12041
  };
12029
12042
  const commonGroup = () => {
@@ -12159,7 +12172,7 @@ ${_html.style}
12159
12172
  propertyType: "image"
12160
12173
  }
12161
12174
  ],
12162
- propertyGroupEditor: () => _sfc_main$v
12175
+ propertyGroupEditor: () => _sfc_main$w
12163
12176
  };
12164
12177
  };
12165
12178
  const borderGroup = () => {
@@ -12175,45 +12188,45 @@ ${_html.style}
12175
12188
  {
12176
12189
  propertyName: "borderLeftWidth",
12177
12190
  caption: "Border Left Width",
12178
- propertyType: "text"
12191
+ propertyType: "css-length"
12179
12192
  },
12180
12193
  {
12181
12194
  propertyName: "borderRightWidth",
12182
12195
  caption: "Border Right Width",
12183
- propertyType: "text"
12196
+ propertyType: "css-length"
12184
12197
  },
12185
12198
  {
12186
12199
  propertyName: "borderTopWidth",
12187
12200
  caption: "Border Top Width",
12188
- propertyType: "text"
12201
+ propertyType: "css-length"
12189
12202
  },
12190
12203
  {
12191
12204
  propertyName: "borderBottomWidth",
12192
12205
  caption: "Border Bottom Width",
12193
- propertyType: "text"
12206
+ propertyType: "css-length"
12194
12207
  },
12195
12208
  {
12196
12209
  propertyName: "borderTopLeftRadius",
12197
12210
  caption: "Border Top Left Radius",
12198
- propertyType: "text"
12211
+ propertyType: "css-length"
12199
12212
  },
12200
12213
  {
12201
12214
  propertyName: "borderTopRightRadius",
12202
12215
  caption: "Border Top Right Radius",
12203
- propertyType: "text"
12216
+ propertyType: "css-length"
12204
12217
  },
12205
12218
  {
12206
12219
  propertyName: "borderBottomLeftRadius",
12207
12220
  caption: "Border Bottom Left Radius",
12208
- propertyType: "text"
12221
+ propertyType: "css-length"
12209
12222
  },
12210
12223
  {
12211
12224
  propertyName: "borderBottomRightRadius",
12212
12225
  caption: "Border Bottom Right Radius",
12213
- propertyType: "text"
12226
+ propertyType: "css-length"
12214
12227
  }
12215
12228
  ],
12216
- propertyGroupEditor: () => _sfc_main$u
12229
+ propertyGroupEditor: () => _sfc_main$v
12217
12230
  };
12218
12231
  };
12219
12232
  const hideParentGroup = () => {
@@ -12235,8 +12248,8 @@ ${_html.style}
12235
12248
  const defaultWidgetPropertyGroups = () => {
12236
12249
  return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup(), hideParentGroup()];
12237
12250
  };
12238
- const _hoisted_1$q = { class: "group-editor group-editor-media" };
12239
- const _hoisted_2$g = { class: "title" };
12251
+ const _hoisted_1$r = { class: "group-editor group-editor-media" };
12252
+ const _hoisted_2$h = { class: "title" };
12240
12253
  const _hoisted_3$8 = {
12241
12254
  key: 0,
12242
12255
  class: "title mt-12"
@@ -12246,7 +12259,7 @@ ${_html.style}
12246
12259
  const _hoisted_6$2 = { class: "title mt-12" };
12247
12260
  const _hoisted_7$2 = { class: "title mt-12" };
12248
12261
  const _hoisted_8$1 = { class: "title mt-12" };
12249
- const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
12262
+ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
12250
12263
  __name: "PbPropertyGroupEditorMedia",
12251
12264
  props: {
12252
12265
  group: {},
@@ -12299,8 +12312,8 @@ ${_html.style}
12299
12312
  };
12300
12313
  return (_ctx, _cache) => {
12301
12314
  var _a, _b, _c, _d;
12302
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
12303
- vue.createElementVNode("div", _hoisted_2$g, [
12315
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
12316
+ vue.createElementVNode("div", _hoisted_2$h, [
12304
12317
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
12305
12318
  [vue.unref(bluesea.vT), { key: "pb.prop.media" }]
12306
12319
  ])
@@ -12417,7 +12430,7 @@ ${_html.style}
12417
12430
  alignItems: "center"
12418
12431
  },
12419
12432
  allowsChild: () => true,
12420
- creator: () => _sfc_main$z
12433
+ creator: () => _sfc_main$A
12421
12434
  }
12422
12435
  ];
12423
12436
  const sectionParts = [
@@ -12436,7 +12449,7 @@ ${_html.style}
12436
12449
  justifyContent: "start"
12437
12450
  },
12438
12451
  allowsChild: () => true,
12439
- creator: () => _sfc_main$z
12452
+ creator: () => _sfc_main$A
12440
12453
  }
12441
12454
  ];
12442
12455
  const blockParts = [
@@ -12455,7 +12468,7 @@ ${_html.style}
12455
12468
  justifyContent: "start"
12456
12469
  },
12457
12470
  allowsChild: () => true,
12458
- creator: () => _sfc_main$B
12471
+ creator: () => _sfc_main$C
12459
12472
  }
12460
12473
  ];
12461
12474
  const widgets = [
@@ -12556,7 +12569,7 @@ ${_html.style}
12556
12569
  readonly: true
12557
12570
  }
12558
12571
  ],
12559
- propertyGroupEditor: () => _sfc_main$r
12572
+ propertyGroupEditor: () => _sfc_main$s
12560
12573
  },
12561
12574
  ...defaultWidgetPropertyGroups()
12562
12575
  ],
@@ -14093,7 +14106,7 @@ ${_html.style}
14093
14106
  group.partDefinitions.forEach((part) => {
14094
14107
  const p = { ...part };
14095
14108
  p.partType = "Widget";
14096
- p.creator = () => _sfc_main$E;
14109
+ p.creator = () => _sfc_main$F;
14097
14110
  p.propertyGroups = [...p.propertyGroups, ...defaultWidgetPropertyGroups()];
14098
14111
  partDefinitions2[p.partName] = p;
14099
14112
  g.partDefinitions.push(p);
@@ -14350,8 +14363,8 @@ ${_html.style}
14350
14363
  });
14351
14364
  }
14352
14365
  }
14353
- const _hoisted_1$p = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
14354
- const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
14366
+ const _hoisted_1$q = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
14367
+ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
14355
14368
  __name: "PbToolbarButton",
14356
14369
  props: {
14357
14370
  button: {}
@@ -14364,7 +14377,7 @@ ${_html.style}
14364
14377
  (_b = (_a = props.button).handler) == null ? void 0 : _b.call(_a, pageBuilder);
14365
14378
  };
14366
14379
  return (_ctx, _cache) => {
14367
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
14380
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
14368
14381
  vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
14369
14382
  class: "tool-button bs-clickable",
14370
14383
  onClick: handleClick
@@ -14386,17 +14399,17 @@ ${_html.style}
14386
14399
  };
14387
14400
  }
14388
14401
  });
14389
- const _hoisted_1$o = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
14390
- const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
14402
+ const _hoisted_1$p = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
14403
+ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
14391
14404
  __name: "PbToolbarButtonGroup",
14392
14405
  props: {
14393
14406
  group: {}
14394
14407
  },
14395
14408
  setup(__props) {
14396
14409
  return (_ctx, _cache) => {
14397
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
14410
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
14398
14411
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.group.buttons, (button) => {
14399
- return vue.openBlock(), vue.createBlock(_sfc_main$q, {
14412
+ return vue.openBlock(), vue.createBlock(_sfc_main$r, {
14400
14413
  key: button.buttonId,
14401
14414
  button
14402
14415
  }, null, 8, ["button"]);
@@ -14405,10 +14418,10 @@ ${_html.style}
14405
14418
  };
14406
14419
  }
14407
14420
  });
14408
- const _hoisted_1$n = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
14409
- const _hoisted_2$f = { class: "bs-layout-horizontal align-items-center" };
14421
+ const _hoisted_1$o = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
14422
+ const _hoisted_2$g = { class: "bs-layout-horizontal align-items-center" };
14410
14423
  const _hoisted_3$7 = { class: "mr-8" };
14411
- const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
14424
+ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
14412
14425
  __name: "PbToolbar",
14413
14426
  props: {
14414
14427
  plugin: {}
@@ -14457,10 +14470,10 @@ ${_html.style}
14457
14470
  });
14458
14471
  return (_ctx, _cache) => {
14459
14472
  var _a, _b, _c;
14460
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
14461
- vue.createElementVNode("div", _hoisted_2$f, [
14473
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
14474
+ vue.createElementVNode("div", _hoisted_2$g, [
14462
14475
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttonGroups), (group) => {
14463
- return vue.openBlock(), vue.createBlock(_sfc_main$p, {
14476
+ return vue.openBlock(), vue.createBlock(_sfc_main$q, {
14464
14477
  key: group.groupId,
14465
14478
  group
14466
14479
  }, null, 8, ["group"]);
@@ -14490,22 +14503,22 @@ ${_html.style}
14490
14503
  };
14491
14504
  }
14492
14505
  });
14493
- const _hoisted_1$m = { class: "pb-menu bs-layout-vertical" };
14494
- const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
14506
+ const _hoisted_1$n = { class: "pb-menu bs-layout-vertical" };
14507
+ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
14495
14508
  __name: "PbMenu",
14496
14509
  props: {
14497
14510
  toolbarPlugin: {}
14498
14511
  },
14499
14512
  setup(__props) {
14500
14513
  return (_ctx, _cache) => {
14501
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
14502
- vue.createVNode(_sfc_main$o, { plugin: _ctx.toolbarPlugin }, null, 8, ["plugin"])
14514
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
14515
+ vue.createVNode(_sfc_main$p, { plugin: _ctx.toolbarPlugin }, null, 8, ["plugin"])
14503
14516
  ]);
14504
14517
  };
14505
14518
  }
14506
14519
  });
14507
- const _hoisted_1$l = { class: "bs-layout-vertical border" };
14508
- const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
14520
+ const _hoisted_1$m = { class: "bs-layout-vertical border" };
14521
+ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
14509
14522
  __name: "PbNavigator",
14510
14523
  setup(__props) {
14511
14524
  const pageBuilder = usePageBuilderEditor();
@@ -14546,8 +14559,8 @@ ${_html.style}
14546
14559
  const rowMoved = (event) => {
14547
14560
  var _a, _b, _c, _d, _e, _f;
14548
14561
  let page2 = pageBuilder.context.getSelectedPage();
14549
- const parentPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
14550
- if (!parentPartId) return;
14562
+ const destPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
14563
+ if (!destPartId) return;
14551
14564
  let ok = false;
14552
14565
  if (event.row.isSection()) {
14553
14566
  if ((_b = event.destParent) == null ? void 0 : _b.isPage()) ok = true;
@@ -14562,7 +14575,7 @@ ${_html.style}
14562
14575
  }
14563
14576
  if (ok) {
14564
14577
  backupPartSelection();
14565
- pageBuilder.model.moveElements(event.row.partId, parentPartId, event.destIndex, void 0, true);
14578
+ pageBuilder.model.moveElements(event.row.partId, destPartId, event.destIndex, void 0, true);
14566
14579
  }
14567
14580
  };
14568
14581
  const selectedRows = vue.computed({
@@ -14631,7 +14644,7 @@ ${_html.style}
14631
14644
  PageBuilderEditorEvent.off.modelUpdatedByUI(modelUpdateHandler);
14632
14645
  });
14633
14646
  return (_ctx, _cache) => {
14634
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
14647
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
14635
14648
  vue.createElementVNode("div", {
14636
14649
  ref_key: "tree",
14637
14650
  ref: tree,
@@ -14656,7 +14669,7 @@ ${_html.style}
14656
14669
  "key-provider": (part) => part.partId,
14657
14670
  "label-provider": labelProvider,
14658
14671
  class: "max-w-320",
14659
- "dont-change-data-when-rowmoved": "",
14672
+ "dont-change-data-when-row-moved": "",
14660
14673
  "multi-select": "",
14661
14674
  "show-move-button": "",
14662
14675
  onRowMoved: rowMoved
@@ -14666,7 +14679,7 @@ ${_html.style}
14666
14679
  };
14667
14680
  }
14668
14681
  });
14669
- const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
14682
+ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
14670
14683
  __name: "PbSidebarPropertyEditor",
14671
14684
  props: {
14672
14685
  property: {},
@@ -14701,12 +14714,12 @@ ${_html.style}
14701
14714
  };
14702
14715
  }
14703
14716
  });
14704
- const _hoisted_1$k = { class: "pb-sidebar-property-group" };
14705
- const _hoisted_2$e = {
14717
+ const _hoisted_1$l = { class: "pb-sidebar-property-group" };
14718
+ const _hoisted_2$f = {
14706
14719
  key: 0,
14707
14720
  class: "group-title"
14708
14721
  };
14709
- const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
14722
+ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
14710
14723
  __name: "PbSidebarPropertyGroupEditor",
14711
14724
  props: {
14712
14725
  group: {},
@@ -14720,8 +14733,8 @@ ${_html.style}
14720
14733
  return (_b = (_a = props.group).propertyGroupEditor) == null ? void 0 : _b.call(_a, props.group, props.selectedParts);
14721
14734
  });
14722
14735
  return (_ctx, _cache) => {
14723
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
14724
- _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
14736
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
14737
+ _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
14725
14738
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
14726
14739
  [vue.unref(bluesea.vT), { key: _ctx.group.caption }]
14727
14740
  ])
@@ -14735,7 +14748,7 @@ ${_html.style}
14735
14748
  return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
14736
14749
  key: `${_ctx.partsKey}_${property.propertyName}`
14737
14750
  }, [
14738
- !property.readonly ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
14751
+ !property.readonly ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
14739
14752
  key: 0,
14740
14753
  property,
14741
14754
  "selected-parts": _ctx.selectedParts
@@ -14747,8 +14760,8 @@ ${_html.style}
14747
14760
  };
14748
14761
  }
14749
14762
  });
14750
- const _hoisted_1$j = { class: "pb-sidebar-properties" };
14751
- const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
14763
+ const _hoisted_1$k = { class: "pb-sidebar-properties" };
14764
+ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
14752
14765
  __name: "PbSidebarProperties",
14753
14766
  setup(__props) {
14754
14767
  const pageBuilder = usePageBuilderEditor();
@@ -14766,12 +14779,12 @@ ${_html.style}
14766
14779
  }
14767
14780
  });
14768
14781
  return (_ctx, _cache) => {
14769
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
14782
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
14770
14783
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(properties.value, (group) => {
14771
14784
  return vue.openBlock(), vue.createElementBlock("div", {
14772
14785
  key: `${partsKey.value}_${group.groupName}`
14773
14786
  }, [
14774
- vue.createVNode(_sfc_main$k, {
14787
+ vue.createVNode(_sfc_main$l, {
14775
14788
  group,
14776
14789
  partsKey: partsKey.value,
14777
14790
  "selected-parts": vue.unref(selectedParts)
@@ -14782,19 +14795,19 @@ ${_html.style}
14782
14795
  };
14783
14796
  }
14784
14797
  });
14785
- const _hoisted_1$i = { class: "pb-sidebar" };
14786
- const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
14798
+ const _hoisted_1$j = { class: "pb-sidebar" };
14799
+ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
14787
14800
  __name: "PbSidebar",
14788
14801
  setup(__props) {
14789
14802
  return (_ctx, _cache) => {
14790
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
14791
- vue.createVNode(_sfc_main$j)
14803
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
14804
+ vue.createVNode(_sfc_main$k)
14792
14805
  ]);
14793
14806
  };
14794
14807
  }
14795
14808
  });
14796
- const _hoisted_1$h = ["data-part-id"];
14797
- const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
14809
+ const _hoisted_1$i = ["data-part-id"];
14810
+ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
14798
14811
  __name: "PbPage",
14799
14812
  props: {
14800
14813
  part: {},
@@ -14869,7 +14882,7 @@ ${_html.style}
14869
14882
  style: vue.normalizeStyle(contentStyle.value)
14870
14883
  }, [
14871
14884
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
14872
- return vue.openBlock(), vue.createBlock(_sfc_main$z, {
14885
+ return vue.openBlock(), vue.createBlock(_sfc_main$A, {
14873
14886
  key: section.partId,
14874
14887
  "is-mobile-page": _ctx.isMobilePage,
14875
14888
  part: section
@@ -14883,14 +14896,14 @@ ${_html.style}
14883
14896
  }, _cache[0] || (_cache[0] = [
14884
14897
  vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1)
14885
14898
  ]))
14886
- ], 46, _hoisted_1$h)
14899
+ ], 46, _hoisted_1$i)
14887
14900
  ], 64);
14888
14901
  };
14889
14902
  }
14890
14903
  });
14891
- 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}';
14892
- const _hoisted_1$g = ["width"];
14893
- const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
14904
+ 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}';
14905
+ const _hoisted_1$h = ["width"];
14906
+ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
14894
14907
  __name: "PbPageFrame",
14895
14908
  props: {
14896
14909
  part: {},
@@ -14999,12 +15012,12 @@ ${_html.style}
14999
15012
  style: vue.normalizeStyle(style.value),
15000
15013
  width: `${width.value}px`,
15001
15014
  class: "page-frame mt-12"
15002
- }, null, 12, _hoisted_1$g),
15015
+ }, null, 12, _hoisted_1$h),
15003
15016
  ((_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document.body) ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
15004
15017
  key: 0,
15005
15018
  to: (_d = (_c = iframeRef.value) == null ? void 0 : _c.contentWindow) == null ? void 0 : _d.document.body
15006
15019
  }, [
15007
- vue.createVNode(_sfc_main$h, {
15020
+ vue.createVNode(_sfc_main$i, {
15008
15021
  "is-mobile-page": isMobilePage.value,
15009
15022
  part: _ctx.part,
15010
15023
  width: width.value
@@ -15014,11 +15027,11 @@ ${_html.style}
15014
15027
  };
15015
15028
  }
15016
15029
  });
15017
- const _hoisted_1$f = {
15030
+ const _hoisted_1$g = {
15018
15031
  key: 1,
15019
15032
  style: { "width": "20px" }
15020
15033
  };
15021
- const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
15034
+ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
15022
15035
  __name: "PbCanvas",
15023
15036
  setup(__props) {
15024
15037
  const pageBuilder = usePageBuilderEditor();
@@ -15052,13 +15065,13 @@ ${_html.style}
15052
15065
  tabindex: "0"
15053
15066
  }, [
15054
15067
  vue.createElementVNode("div", vue.mergeProps({ class: "pb-canvas" }, style.value), [
15055
- partS.value ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
15068
+ partS.value ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
15056
15069
  key: 0,
15057
15070
  part: partS.value,
15058
15071
  width: 480
15059
15072
  }, null, 8, ["part"])) : vue.createCommentVNode("", true),
15060
- partL.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f)) : vue.createCommentVNode("", true),
15061
- partL.value ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
15073
+ partL.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g)) : vue.createCommentVNode("", true),
15074
+ partL.value ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
15062
15075
  key: 2,
15063
15076
  part: partL.value,
15064
15077
  width: 1024
@@ -16392,9 +16405,9 @@ ${_html.style}
16392
16405
  bluesea.i18n.addTexts("ja", jaTexts);
16393
16406
  bluesea.i18n.addTexts("ko", koTexts);
16394
16407
  bluesea.i18n.addTexts("zh", zhTexts);
16395
- const _hoisted_1$e = { class: "pb-editor bs-layout-vertical flex-grow-1" };
16396
- const _hoisted_2$d = { class: "pb-editor-body bs-layout-horizontal flex-grow-1" };
16397
- const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
16408
+ const _hoisted_1$f = { class: "pb-editor bs-layout-vertical flex-grow-1" };
16409
+ const _hoisted_2$e = { class: "pb-editor-body bs-layout-horizontal flex-grow-1" };
16410
+ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
16398
16411
  __name: "PageBuilderEditor",
16399
16412
  props: {
16400
16413
  instanceId: {},
@@ -16446,25 +16459,25 @@ ${_html.style}
16446
16459
  pastePageContent
16447
16460
  });
16448
16461
  return (_ctx, _cache) => {
16449
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
16462
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
16450
16463
  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("script"), {
16451
16464
  id: "youtube-iframe-js-api-script",
16452
16465
  src: "https://www.youtube.com/iframe_api"
16453
16466
  })),
16454
- vue.createVNode(_sfc_main$n, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
16455
- vue.createElementVNode("div", _hoisted_2$d, [
16456
- vue.createVNode(_sfc_main$m),
16457
- vue.createVNode(_sfc_main$f),
16458
- vue.createVNode(_sfc_main$i)
16467
+ vue.createVNode(_sfc_main$o, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
16468
+ vue.createElementVNode("div", _hoisted_2$e, [
16469
+ vue.createVNode(_sfc_main$n),
16470
+ vue.createVNode(_sfc_main$g),
16471
+ vue.createVNode(_sfc_main$j)
16459
16472
  ])
16460
16473
  ]);
16461
16474
  };
16462
16475
  }
16463
16476
  });
16464
- const _hoisted_1$d = { class: "property-editor property-editor-readonly-text" };
16465
- const _hoisted_2$c = { class: "title" };
16477
+ const _hoisted_1$e = { class: "property-editor property-editor-readonly-text" };
16478
+ const _hoisted_2$d = { class: "title" };
16466
16479
  const _hoisted_3$6 = ["textContent"];
16467
- const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
16480
+ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
16468
16481
  __name: "PbPropertyEditorReadonlyText",
16469
16482
  props: {
16470
16483
  property: {},
@@ -16472,8 +16485,8 @@ ${_html.style}
16472
16485
  },
16473
16486
  setup(__props) {
16474
16487
  return (_ctx, _cache) => {
16475
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
16476
- vue.createElementVNode("div", _hoisted_2$c, [
16488
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
16489
+ vue.createElementVNode("div", _hoisted_2$d, [
16477
16490
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
16478
16491
  [vue.unref(bluesea.vT), { key: _ctx.property.caption }]
16479
16492
  ])
@@ -16489,11 +16502,11 @@ ${_html.style}
16489
16502
  });
16490
16503
  const PbPropertyEditorReadonlyText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
16491
16504
  __proto__: null,
16492
- default: _sfc_main$d
16505
+ default: _sfc_main$e
16493
16506
  }, Symbol.toStringTag, { value: "Module" }));
16494
- const _hoisted_1$c = { class: "property-editor property-editor-text flex-align-center" };
16495
- const _hoisted_2$b = { class: "title" };
16496
- const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
16507
+ const _hoisted_1$d = { class: "property-editor property-editor-text flex-align-center" };
16508
+ const _hoisted_2$c = { class: "title" };
16509
+ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
16497
16510
  __name: "PbPropertyEditorText",
16498
16511
  props: {
16499
16512
  property: {},
@@ -16511,8 +16524,8 @@ ${_html.style}
16511
16524
  emit("update-property-value", properties);
16512
16525
  };
16513
16526
  return (_ctx, _cache) => {
16514
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
16515
- vue.createElementVNode("div", _hoisted_2$b, [
16527
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
16528
+ vue.createElementVNode("div", _hoisted_2$c, [
16516
16529
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
16517
16530
  [vue.unref(bluesea.vT), { key: _ctx.property.caption }]
16518
16531
  ])
@@ -16537,11 +16550,11 @@ ${_html.style}
16537
16550
  });
16538
16551
  const PbPropertyEditorText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
16539
16552
  __proto__: null,
16540
- default: _sfc_main$c
16553
+ default: _sfc_main$d
16541
16554
  }, Symbol.toStringTag, { value: "Module" }));
16542
- const _hoisted_1$b = { class: "property-editor property-editor-number flex-align-center" };
16543
- const _hoisted_2$a = { class: "title" };
16544
- const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
16555
+ const _hoisted_1$c = { class: "property-editor property-editor-number flex-align-center" };
16556
+ const _hoisted_2$b = { class: "title" };
16557
+ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
16545
16558
  __name: "PbPropertyEditorNumber",
16546
16559
  props: {
16547
16560
  property: {},
@@ -16564,8 +16577,8 @@ ${_html.style}
16564
16577
  emit("update-property-value", properties);
16565
16578
  };
16566
16579
  return (_ctx, _cache) => {
16567
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
16568
- vue.createElementVNode("div", _hoisted_2$a, [
16580
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
16581
+ vue.createElementVNode("div", _hoisted_2$b, [
16569
16582
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
16570
16583
  [vue.unref(bluesea.vT), { key: _ctx.property.caption }]
16571
16584
  ])
@@ -16583,10 +16596,10 @@ ${_html.style}
16583
16596
  });
16584
16597
  const PbPropertyEditorNumber = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
16585
16598
  __proto__: null,
16586
- default: _sfc_main$b
16599
+ default: _sfc_main$c
16587
16600
  }, Symbol.toStringTag, { value: "Module" }));
16588
- const _hoisted_1$a = { class: "property-editor property-editor-boolean flex-align-center my-12" };
16589
- const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
16601
+ const _hoisted_1$b = { class: "property-editor property-editor-boolean flex-align-center my-12" };
16602
+ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
16590
16603
  __name: "PbPropertyEditorBoolean",
16591
16604
  props: {
16592
16605
  property: {},
@@ -16603,7 +16616,7 @@ ${_html.style}
16603
16616
  emit("update-property-value", properties);
16604
16617
  };
16605
16618
  return (_ctx, _cache) => {
16606
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
16619
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
16607
16620
  vue.createElementVNode("div", null, [
16608
16621
  vue.createVNode(vue.unref(bluesea.BSCheckbox), {
16609
16622
  modelValue: booleanValue.value,
@@ -16620,11 +16633,11 @@ ${_html.style}
16620
16633
  });
16621
16634
  const PbPropertyEditorBoolean = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
16622
16635
  __proto__: null,
16623
- default: _sfc_main$a
16636
+ default: _sfc_main$b
16624
16637
  }, Symbol.toStringTag, { value: "Module" }));
16625
- const _hoisted_1$9 = { class: "property-editor property-editor-multiline-text" };
16626
- const _hoisted_2$9 = { class: "title" };
16627
- const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
16638
+ const _hoisted_1$a = { class: "property-editor property-editor-multiline-text" };
16639
+ const _hoisted_2$a = { class: "title" };
16640
+ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
16628
16641
  __name: "PbPropertyEditorMultilineText",
16629
16642
  props: {
16630
16643
  property: {},
@@ -16650,8 +16663,8 @@ ${_html.style}
16650
16663
  emit("update-property-value", properties);
16651
16664
  };
16652
16665
  return (_ctx, _cache) => {
16653
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
16654
- vue.createElementVNode("div", _hoisted_2$9, [
16666
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
16667
+ vue.createElementVNode("div", _hoisted_2$a, [
16655
16668
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
16656
16669
  [vue.unref(bluesea.vT), { key: _ctx.property.caption }]
16657
16670
  ])
@@ -16684,11 +16697,11 @@ ${_html.style}
16684
16697
  });
16685
16698
  const PbPropertyEditorMultilineText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
16686
16699
  __proto__: null,
16687
- default: _sfc_main$9
16700
+ default: _sfc_main$a
16688
16701
  }, Symbol.toStringTag, { value: "Module" }));
16689
- const _hoisted_1$8 = { class: "property-editor property-editor-select flex-align-center" };
16690
- const _hoisted_2$8 = { class: "title" };
16691
- const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
16702
+ const _hoisted_1$9 = { class: "property-editor property-editor-select flex-align-center" };
16703
+ const _hoisted_2$9 = { class: "title" };
16704
+ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
16692
16705
  __name: "PbPropertyEditorSelect",
16693
16706
  props: {
16694
16707
  property: {},
@@ -16707,8 +16720,8 @@ ${_html.style}
16707
16720
  emit("update-property-value", properties);
16708
16721
  };
16709
16722
  return (_ctx, _cache) => {
16710
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
16711
- vue.createElementVNode("div", _hoisted_2$8, [
16723
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
16724
+ vue.createElementVNode("div", _hoisted_2$9, [
16712
16725
  vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
16713
16726
  [vue.unref(bluesea.vT), { key: _ctx.property.caption }]
16714
16727
  ])
@@ -16725,6 +16738,46 @@ ${_html.style}
16725
16738
  }
16726
16739
  });
16727
16740
  const PbPropertyEditorSelect = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
16741
+ __proto__: null,
16742
+ default: _sfc_main$9
16743
+ }, Symbol.toStringTag, { value: "Module" }));
16744
+ const _hoisted_1$8 = { class: "property-editor property-editor-number flex-align-center" };
16745
+ const _hoisted_2$8 = { class: "title" };
16746
+ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
16747
+ __name: "PbPropertyEditorCssLength",
16748
+ props: {
16749
+ property: {},
16750
+ value: {}
16751
+ },
16752
+ emits: ["update-property-value"],
16753
+ setup(__props, { emit: __emit }) {
16754
+ const props = __props;
16755
+ const emit = __emit;
16756
+ const emitUpdatePropertyValue = (value) => {
16757
+ const cssLength = toCssLength(value || "");
16758
+ const properties = {};
16759
+ properties[props.property.propertyName] = `${cssLength}`;
16760
+ emit("update-property-value", properties);
16761
+ };
16762
+ return (_ctx, _cache) => {
16763
+ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
16764
+ vue.createElementVNode("div", _hoisted_2$8, [
16765
+ vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
16766
+ [vue.unref(bluesea.vT), { key: _ctx.property.caption }]
16767
+ ])
16768
+ ]),
16769
+ vue.createElementVNode("div", null, [
16770
+ vue.createVNode(vue.unref(bluesea.BSTextInput), {
16771
+ "model-value": _ctx.value,
16772
+ width: "100%",
16773
+ "onUpdate:modelValue": emitUpdatePropertyValue
16774
+ }, null, 8, ["model-value"])
16775
+ ])
16776
+ ]);
16777
+ };
16778
+ }
16779
+ });
16780
+ const PbPropertyEditorCssLength = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
16728
16781
  __proto__: null,
16729
16782
  default: _sfc_main$8
16730
16783
  }, Symbol.toStringTag, { value: "Module" }));
@@ -17398,12 +17451,12 @@ ${_html.tags}` : "";
17398
17451
  exports2.PAGE_BUILDER_KEY = PAGE_BUILDER_KEY;
17399
17452
  exports2.PAGE_TYPE = PAGE_TYPE$1;
17400
17453
  exports2.Page = Page;
17401
- exports2.PageBuilderEditor = _sfc_main$e;
17454
+ exports2.PageBuilderEditor = _sfc_main$f;
17402
17455
  exports2.PageBuilderEditorEvent = PageBuilderEditorEvent;
17403
17456
  exports2.PageBuilderViewer = _sfc_main$2$1;
17404
17457
  exports2.Part = Part;
17405
17458
  exports2.PbContainerWidget = _sfc_main$1$1;
17406
- exports2.PbCustomWidget = _sfc_main$E;
17459
+ exports2.PbCustomWidget = _sfc_main$F;
17407
17460
  exports2.PbHtmlWidget = _sfc_main$6$1;
17408
17461
  exports2.PbIframeWidget = _sfc_main$5$1;
17409
17462
  exports2.PbMediaWidget = _sfc_main$8$1;