@g1cloud/page-builder-editor 1.0.0-alpha.77 → 1.0.0-alpha.79

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 (44) hide show
  1. package/css/page-builder-editor.css +373 -0
  2. package/css/page-builder-viewer.css +195 -0
  3. package/dist/{PbPropertyEditorColor-CIbIVOH6.js → PbPropertyEditorColor-5SJkOBUx.js} +1 -1
  4. package/dist/{PbPropertyEditorCssLength-B-4sVDmD.js → PbPropertyEditorCssLength-CNHbyz8V.js} +1 -1
  5. package/dist/{PbPropertyEditorHtml-D-P-rK2d.js → PbPropertyEditorHtml-DdQPQqJb.js} +1 -1
  6. package/dist/{PbPropertyEditorImage-Djqz82Tj.js → PbPropertyEditorImage-D0kxh68g.js} +1 -1
  7. package/dist/{PbPropertyEditorMultilineText-DFfXK9Mh.js → PbPropertyEditorMultilineText-BRLH4Ayi.js} +1 -1
  8. package/dist/{PbPropertyEditorText-Bl87u7Hn.js → PbPropertyEditorText-DDtYWGlr.js} +1 -1
  9. package/dist/{PbPropertyEditorYoutube-vn68-hix.js → PbPropertyEditorYoutube-BxrZ1nyk.js} +1 -1
  10. package/dist/{PbWidgetAddModal-jAxxY2xD.js → PbWidgetAddModal-uVBBeNVl.js} +1 -1
  11. package/dist/{index-BhMJnNHk.js → index-BVTz0PeS.js} +14 -12
  12. package/dist/page-builder-editor.js +1 -1
  13. package/dist/page-builder-editor.umd.cjs +5 -3
  14. package/dist/style.css +369 -2
  15. package/package.json +8 -6
  16. package/scss/page-builder-editor.scss +320 -0
  17. package/scss/page-builder-viewer.scss +1 -0
  18. package/{css → scss}/page-widget.scss +1 -1
  19. package/{css → scss}/page.scss +0 -1
  20. package/{css → scss}/property-editor-image.scss +4 -3
  21. package/{css → scss}/property-group-editor-background.scss +3 -2
  22. package/{css → scss}/property-group-editor-media.scss +4 -3
  23. package/css/page-builder-editor.scss +0 -315
  24. package/css/variable.scss +0 -5
  25. package/dist/css/page-builder-editor.css +0 -388
  26. /package/{css → scss}/canvas.scss +0 -0
  27. /package/{css → scss}/page-block.scss +0 -0
  28. /package/{css → scss}/page-page.scss +0 -0
  29. /package/{css → scss}/page-section.scss +0 -0
  30. /package/{css → scss}/property-editor-color.scss +0 -0
  31. /package/{css → scss}/property-editor-html.scss +0 -0
  32. /package/{css → scss}/property-editor-multiline-text.scss +0 -0
  33. /package/{css → scss}/property-editor-number.scss +0 -0
  34. /package/{css → scss}/property-editor-product.scss +0 -0
  35. /package/{css → scss}/property-editor-readonly-text.scss +0 -0
  36. /package/{css → scss}/property-editor-select.scss +0 -0
  37. /package/{css → scss}/property-editor-text.scss +0 -0
  38. /package/{css → scss}/property-editor-youtube.scss +0 -0
  39. /package/{css → scss}/property-group-editor-border.scss +0 -0
  40. /package/{css → scss}/property-group-editor-margin.scss +0 -0
  41. /package/{css → scss}/property-group-editor-padding.scss +0 -0
  42. /package/{css → scss}/property-group-editor-position.scss +0 -0
  43. /package/{css → scss}/property-group-editor-size.scss +0 -0
  44. /package/{css → scss}/property-localpart.scss +0 -0
package/dist/{index-BhMJnNHk.js → index-BVTz0PeS.js} RENAMED
@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
2
2
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
3
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
4
  import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, watch, onMounted, onBeforeUnmount, createBlock as createBlock$1, resolveDynamicComponent, unref, provide, inject, renderList, normalizeProps, mergeProps, normalizeClass, withDirectives, vShow, reactive, defineAsyncComponent, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, createTextVNode, markRaw, toHandlers, Teleport } from "vue";
5
- import { notNull, vT, BSTextInput, vClickOutside, useModal, BSButton, BSMultiLangTextInput, showNotification, BSSelect, BSTree, useContextMenu, i18n } from "@g1cloud/bluesea";
5
+ import { notNull, vT, BSTextInput, vClickOutside, useModal, BSButton, BSMultiLangTextInput, showNotification, BSSelect, BSTree, useContextMenu, i18n, BSHorizontalLayoutResizer } from "@g1cloud/bluesea";
6
6
  import YouTube from "vue3-youtube";
7
7
  const create$5 = () => /* @__PURE__ */ new Map();
8
8
  const copy = (m) => {
@@ -8318,16 +8318,16 @@ class PartManager {
8318
8318
  const defaultPartPropertyEditors = () => {
8319
8319
  return {
8320
8320
  "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
8321
- "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-Bl87u7Hn.js")),
8321
+ "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DDtYWGlr.js")),
8322
8322
  "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
8323
8323
  "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
8324
- "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DFfXK9Mh.js")),
8324
+ "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BRLH4Ayi.js")),
8325
8325
  "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
8326
- "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-B-4sVDmD.js")),
8327
- "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CIbIVOH6.js")),
8328
- "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-Djqz82Tj.js")),
8329
- "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-D-P-rK2d.js")),
8330
- "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-vn68-hix.js"))
8326
+ "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-CNHbyz8V.js")),
8327
+ "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-5SJkOBUx.js")),
8328
+ "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-D0kxh68g.js")),
8329
+ "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DdQPQqJb.js")),
8330
+ "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-BxrZ1nyk.js"))
8331
8331
  };
8332
8332
  };
8333
8333
  const getPropertyValueOfParts = (parts, propertyName) => {
@@ -12883,7 +12883,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
12883
12883
  let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
12884
12884
  const openWidgetAddModal = (modal, args, callback) => {
12885
12885
  modal.openModal({
12886
- component: defineAsyncComponent(() => import("./PbWidgetAddModal-jAxxY2xD.js")),
12886
+ component: defineAsyncComponent(() => import("./PbWidgetAddModal-uVBBeNVl.js")),
12887
12887
  style: {
12888
12888
  width: "80%",
12889
12889
  height: "80%",
@@ -14629,7 +14629,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
14629
14629
  };
14630
14630
  }
14631
14631
  });
14632
- const _hoisted_1$7 = { class: "bs-layout-vertical border" };
14632
+ const _hoisted_1$7 = { class: "bs-layout-vertical" };
14633
14633
  const _sfc_main$8 = /* @__PURE__ */ defineComponent({
14634
14634
  __name: "PbNavigator",
14635
14635
  setup(__props) {
@@ -14875,7 +14875,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
14875
14875
  const _hoisted_1$5 = { class: "pb-sidebar-properties" };
14876
14876
  const _hoisted_2$1 = {
14877
14877
  key: 0,
14878
- class: "bg-primary-500 text-white pl-16 py-8"
14878
+ class: "pb-sidebar-title"
14879
14879
  };
14880
14880
  const _sfc_main$5 = /* @__PURE__ */ defineComponent({
14881
14881
  __name: "PbSidebarProperties",
@@ -15025,7 +15025,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
15025
15025
  };
15026
15026
  }
15027
15027
  });
15028
- const canvasStyle = ':root {\n --color-canvas-frame-bg: #aaa;\n}\n\n.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: var(--color-canvas-frame-bg);\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}';
15028
+ const canvasStyle = '.pb-page {\n display: flex;\n flex-direction: column;\n width: 100%;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n overflow-x: hidden;\n}\n.pb-page .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}\n.pb-page .pb-section .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}\n.pb-page .pb-section .pb-block .pb-widget {\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .text {\n color: #333;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n.pb-page .pb-section .pb-block .pb-media-widget {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .video {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-html-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .youtube {\n width: 100%;\n height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-container-widget {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget {\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: center;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n width: 25%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .product {\n width: 95%;\n margin: 0 auto;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty span {\n font-size: 40px;\n color: #999;\n line-height: 200px;\n vertical-align: middle;\n}\n@media (max-width: 768px) {\n .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n.pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n.pb-page .pb-section .pb-block .pb-login-widget {\n height: 200px;\n text-align: center;\n}\n.pb-page .pb-section .pb-block .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.pb-page * {\n box-sizing: border-box;\n}\n.pb-viewer {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow-y: auto;\n}\n.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\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.pb-page .pb-page-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n background-color: #fff;\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.pb-page * {\n box-sizing: border-box;\n}\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\n}\n.pb-add-widget-button button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 8px;\n background: none;\n border: none;\n cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n.pb-section {\n 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.pb-section:empty {\n background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\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.pb-section.pb-section-static {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n outline: none;\n}\n.pb-block {\n display: flex;\n min-width: 1px;\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n.pb-block.selected::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.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.pb-widget * {\n pointer-events: none;\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.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.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.pb-widget .pan-handle {\n position: absolute;\n left: -6px;\n top: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: move;\n pointer-events: auto !important;\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}\nbody {\n margin: 0;\n padding: 0;\n background-color: var(--color-canvas-frame-bg);\n overflow: hidden;\n}\n.font-icon, .material-icons-outlined {\n font-family: "Material Symbols Outlined", monospace;\n font-size: 1rem;\n max-width: 1em;\n}\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\n}\n.pb-add-section-handle {\n position: relative;\n text-align: center;\n cursor: pointer;\n z-index: 5;\n height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n opacity: 0;\n pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n opacity: 1;\n}\n.pb-add-section-handle > i {\n 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}';
15029
15029
  const _hoisted_1$2 = ["width"];
15030
15030
  const _sfc_main$2 = /* @__PURE__ */ defineComponent({
15031
15031
  __name: "PbPageFrame",
@@ -16942,7 +16942,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
16942
16942
  createVNode(_sfc_main$9, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
16943
16943
  createElementVNode("div", _hoisted_2, [
16944
16944
  createVNode(_sfc_main$8),
16945
+ createVNode(unref(BSHorizontalLayoutResizer)),
16945
16946
  createVNode(_sfc_main$1),
16947
+ createVNode(unref(BSHorizontalLayoutResizer)),
16946
16948
  createVNode(_sfc_main$4)
16947
16949
  ])
16948
16950
  ]);
package/dist/page-builder-editor.js CHANGED
@@ -1,4 +1,4 @@
1
- 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-BhMJnNHk.js";
1
+ 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-BVTz0PeS.js";
2
2
  export {
3
3
  B as BLOCK_TYPE,
4
4
  b as Block,
package/dist/page-builder-editor.umd.cjs CHANGED
@@ -14630,7 +14630,7 @@ ${_html.style}
14630
14630
  };
14631
14631
  }
14632
14632
  });
14633
- const _hoisted_1$m = { class: "bs-layout-vertical border" };
14633
+ const _hoisted_1$m = { class: "bs-layout-vertical" };
14634
14634
  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
14635
14635
  __name: "PbNavigator",
14636
14636
  setup(__props) {
@@ -14876,7 +14876,7 @@ ${_html.style}
14876
14876
  const _hoisted_1$k = { class: "pb-sidebar-properties" };
14877
14877
  const _hoisted_2$f = {
14878
14878
  key: 0,
14879
- class: "bg-primary-500 text-white pl-16 py-8"
14879
+ class: "pb-sidebar-title"
14880
14880
  };
14881
14881
  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
14882
14882
  __name: "PbSidebarProperties",
@@ -15026,7 +15026,7 @@ ${_html.style}
15026
15026
  };
15027
15027
  }
15028
15028
  });
15029
- const canvasStyle = ':root {\n --color-canvas-frame-bg: #aaa;\n}\n\n.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: var(--color-canvas-frame-bg);\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}';
15029
+ const canvasStyle = '.pb-page {\n display: flex;\n flex-direction: column;\n width: 100%;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n overflow-x: hidden;\n}\n.pb-page .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}\n.pb-page .pb-section .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}\n.pb-page .pb-section .pb-block .pb-widget {\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .text {\n color: #333;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n.pb-page .pb-section .pb-block .pb-media-widget {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .video {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-html-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .youtube {\n width: 100%;\n height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-container-widget {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget {\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: center;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n width: 25%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .product {\n width: 95%;\n margin: 0 auto;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty span {\n font-size: 40px;\n color: #999;\n line-height: 200px;\n vertical-align: middle;\n}\n@media (max-width: 768px) {\n .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n.pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n.pb-page .pb-section .pb-block .pb-login-widget {\n height: 200px;\n text-align: center;\n}\n.pb-page .pb-section .pb-block .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.pb-page * {\n box-sizing: border-box;\n}\n.pb-viewer {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow-y: auto;\n}\n.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\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.pb-page .pb-page-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n background-color: #fff;\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.pb-page * {\n box-sizing: border-box;\n}\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\n}\n.pb-add-widget-button button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 8px;\n background: none;\n border: none;\n cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n.pb-section {\n 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.pb-section:empty {\n background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\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.pb-section.pb-section-static {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n outline: none;\n}\n.pb-block {\n display: flex;\n min-width: 1px;\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n.pb-block.selected::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.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.pb-widget * {\n pointer-events: none;\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.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.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.pb-widget .pan-handle {\n position: absolute;\n left: -6px;\n top: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: move;\n pointer-events: auto !important;\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}\nbody {\n margin: 0;\n padding: 0;\n background-color: var(--color-canvas-frame-bg);\n overflow: hidden;\n}\n.font-icon, .material-icons-outlined {\n font-family: "Material Symbols Outlined", monospace;\n font-size: 1rem;\n max-width: 1em;\n}\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\n}\n.pb-add-section-handle {\n position: relative;\n text-align: center;\n cursor: pointer;\n z-index: 5;\n height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n opacity: 0;\n pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n opacity: 1;\n}\n.pb-add-section-handle > i {\n 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}';
15030
15030
  const _hoisted_1$h = ["width"];
15031
15031
  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15032
15032
  __name: "PbPageFrame",
@@ -16943,7 +16943,9 @@ ${_html.style}
16943
16943
  vue.createVNode(_sfc_main$o, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
16944
16944
  vue.createElementVNode("div", _hoisted_2$e, [
16945
16945
  vue.createVNode(_sfc_main$n),
16946
+ vue.createVNode(vue.unref(bluesea.BSHorizontalLayoutResizer)),
16946
16947
  vue.createVNode(_sfc_main$g),
16948
+ vue.createVNode(vue.unref(bluesea.BSHorizontalLayoutResizer)),
16947
16949
  vue.createVNode(_sfc_main$j)
16948
16950
  ])
16949
16951
  ]);
package/dist/style.css CHANGED
@@ -1,6 +1,373 @@
1
- :root {
1
+ @charset "UTF-8";
2
+ .pb-editor {
2
3
  --color-canvas-frame-bg: #aaa;
4
+ height: 100%;
3
5
  }
4
- .pb-editor .pb-editor-body .tab-bar {
6
+ .pb-editor .pb-menu {
7
+ width: 100%;
8
+ }
9
+ .pb-editor .pb-menu .pb-toolbar {
10
+ margin: 0 -8px;
11
+ }
12
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group::after {
13
+ content: "";
14
+ margin: 0 8px;
15
+ height: 80%;
16
+ border-right: 1px solid var(--border-light);
17
+ align-self: center;
18
+ }
19
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button {
20
+ padding: 2px;
21
+ margin: 0 2px;
22
+ }
23
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button {
24
+ width: 28px;
25
+ height: 28px;
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ }
30
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-editor-body .pb-part-add-modal .group .part, .pb-editor .pb-editor-body .pb-part-add-modal .group .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part {
31
+ user-select: none;
32
+ cursor: pointer;
33
+ }
34
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable:hover, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-editor-body .pb-part-add-modal .group .part:hover, .pb-editor .pb-editor-body .pb-part-add-modal .group .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:hover {
35
+ filter: opacity(75%);
36
+ }
37
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable:active, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-editor-body .pb-part-add-modal .group .part:active, .pb-editor .pb-editor-body .pb-part-add-modal .group .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:active {
38
+ filter: opacity(50%);
39
+ }
40
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable.disabled, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-editor-body .pb-part-add-modal .group .disabled.part, .pb-editor .pb-editor-body .pb-part-add-modal .group .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .disabled.part {
41
+ filter: opacity(40%);
42
+ }
43
+ .pb-editor .pb-editor-body {
44
+ padding: 8px 0 0;
45
+ height: 1px;
46
+ }
47
+ .pb-editor .pb-editor-body .pb-canvas-wrapper {
48
+ background-color: var(--color-canvas-frame-bg);
49
+ flex-grow: 1;
50
+ min-width: 0;
51
+ width: 0;
52
+ height: 100%;
53
+ padding: 20px;
54
+ outline: none;
55
+ overflow: auto;
56
+ }
57
+ .pb-editor .pb-editor-body .pb-canvas {
58
+ display: flex;
59
+ flex-direction: row;
60
+ transform-origin: top left;
61
+ width: fit-content;
62
+ height: 100%;
63
+ margin: 0;
64
+ }
65
+ .pb-editor .pb-editor-body .pb-page-frame iframe.page-frame {
66
+ border: 0;
67
+ }
68
+ .pb-editor .pb-editor-body .bs-tab-sheet .tab-bar .tabs {
69
+ padding-top: 0;
70
+ }
71
+ .pb-editor .pb-editor-body .pb-navigator {
72
+ position: relative;
73
+ width: 200px;
74
+ height: 1px;
75
+ overflow-y: auto;
76
+ padding: 8px 0;
77
+ flex-grow: 1;
78
+ border: 1px solid var(--border-light);
79
+ border-right-color: var(--color-canvas-frame-bg);
80
+ }
81
+ .pb-editor .pb-editor-body .pb-navigator:focus {
82
+ outline: none;
83
+ }
84
+ .pb-editor .pb-editor-body .pb-sidebar {
85
+ width: 300px;
86
+ overflow: auto;
87
+ border: 1px solid var(--border-light);
88
+ border-left-color: var(--color-canvas-frame-bg);
89
+ }
90
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties {
91
+ padding: 0;
92
+ }
93
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-title {
94
+ padding: 8px;
95
+ background-color: var(--blue-bg);
96
+ color: var(--blue);
97
+ font-weight: 600;
98
+ }
99
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group:not(:empty) {
100
+ padding: 8px;
101
+ border-bottom: 1px solid var(--border-light);
102
+ }
103
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-title > label {
104
+ padding: 4px 0;
105
+ font-size: 90%;
106
+ font-weight: 600;
107
+ }
108
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor {
109
+ padding: 4px 0;
110
+ font-size: 0.9em;
111
+ }
112
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .title {
113
+ padding: 0 0 8px 0;
114
+ }
115
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .title label {
116
+ min-width: 6em;
117
+ max-width: 6em;
118
+ padding-right: 0.5em;
119
+ font-weight: bold;
120
+ }
121
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .sub-title label {
122
+ min-width: 6em;
123
+ max-width: 6em;
124
+ padding-right: 0.5em;
125
+ font-weight: 400;
126
+ }
127
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor {
128
+ padding: 4px 0;
129
+ font-size: 0.9em;
130
+ }
131
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor > .title {
132
+ padding: 0 0 8px 0;
133
+ }
134
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor > .title > label {
135
+ min-width: 6em;
136
+ max-width: 6em;
137
+ padding-right: 0.5em;
138
+ font-weight: 600;
139
+ }
140
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor:nth-child(n+2) {
141
+ margin-top: 4px;
142
+ }
143
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-color .color {
144
+ width: 50%;
145
+ }
146
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-image button.select-button {
147
+ color: var(--white);
148
+ border: none;
149
+ padding: 4px 12px;
150
+ cursor: pointer;
151
+ line-height: 1;
152
+ width: 120px;
153
+ height: 26px;
154
+ background-color: var(--primary);
155
+ border-radius: 2px;
156
+ }
157
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-image .input-area {
158
+ height: 24px;
159
+ }
160
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product button {
161
+ color: #fff;
162
+ border: none;
163
+ padding: 4px 12px;
164
+ cursor: pointer;
165
+ line-height: 1;
166
+ width: 200px;
167
+ height: 28px;
168
+ background-color: #1f8fff;
169
+ }
170
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product .input-area {
171
+ height: 24px;
172
+ }
173
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-select .bs-select {
174
+ display: block;
175
+ }
176
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-select .input-area {
177
+ height: 24px;
178
+ }
179
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .bs-text-input {
180
+ display: block;
181
+ }
182
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .input-area {
183
+ height: 24px;
184
+ }
185
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .bs-text-input {
186
+ display: block;
187
+ }
188
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .input-area {
189
+ height: 24px;
190
+ }
191
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html button {
192
+ color: #fff;
193
+ border: none;
194
+ padding: 4px 12px;
195
+ cursor: pointer;
196
+ line-height: 1;
197
+ width: 100px;
198
+ height: 28px;
199
+ background-color: #1f8fff;
200
+ }
201
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html .input-area {
202
+ height: 24px;
203
+ }
204
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color {
205
+ flex: 1;
206
+ display: flex;
207
+ flex-direction: row;
208
+ align-items: center;
209
+ }
210
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color .bs-text-input {
211
+ flex-grow: 1;
212
+ }
213
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image {
214
+ flex: 1;
215
+ padding-left: 8px;
216
+ }
217
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image button {
218
+ color: #fff;
219
+ border: none;
220
+ padding: 4px 12px;
221
+ cursor: pointer;
222
+ line-height: 1;
223
+ width: 120px;
224
+ height: 26px;
225
+ background-color: var(--primary);
226
+ border-radius: 2px;
227
+ }
228
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color {
229
+ width: 50%;
230
+ flex: 1;
231
+ display: flex;
232
+ flex-direction: row;
233
+ align-items: center;
234
+ }
235
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color .bs-text-input {
236
+ flex-grow: 1;
237
+ }
238
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .corner-icon {
239
+ width: 1.1em;
240
+ height: 1.1em;
241
+ fill: #000;
242
+ }
243
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media button.select-button {
244
+ color: var(--white);
245
+ border: none;
246
+ padding: 4px 12px;
247
+ cursor: pointer;
248
+ line-height: 1;
249
+ width: 120px;
250
+ height: 26px;
251
+ background-color: var(--primary);
252
+ border-radius: 2px;
253
+ }
254
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media .input-area {
255
+ height: 24px;
256
+ }
257
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .title {
258
+ font-weight: 600;
259
+ }
260
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part button {
261
+ color: #fff;
262
+ border: none;
263
+ padding: 0 4px;
264
+ cursor: pointer;
265
+ line-height: 1;
266
+ height: 24px;
267
+ background-color: #1f8fff;
268
+ }
269
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .input-area {
270
+ height: 24px;
271
+ }
272
+ .pb-editor .pb-editor-body .pb-color-picker {
273
+ display: inline-flex;
274
+ position: relative;
275
+ }
276
+ .pb-editor .pb-editor-body .pb-color-picker .buttons {
277
+ display: flex;
5
278
  padding: 0;
279
+ }
280
+ .pb-editor .pb-editor-body .pb-color-picker .buttons button {
281
+ width: 24px;
282
+ height: 24px;
283
+ display: flex;
284
+ justify-content: center;
285
+ align-items: center;
286
+ }
287
+ .pb-editor .pb-editor-body .pb-color-picker .buttons button.none {
288
+ position: relative;
289
+ overflow: hidden;
290
+ }
291
+ .pb-editor .pb-editor-body .pb-color-picker .buttons button.none::after {
292
+ content: " ";
293
+ display: inline-block;
294
+ width: 100px;
295
+ height: 1px;
296
+ background: red;
297
+ position: absolute;
298
+ top: 50%;
299
+ left: 50%;
300
+ transform: translate(-50%, -50%) rotate(45deg);
301
+ }
302
+ .pb-editor .pb-editor-body .pb-color-picker .buttons button.picker-button {
303
+ border: 1px solid #cccccc;
304
+ }
305
+ .pb-editor .pb-editor-body .pb-color-picker .buttons button i {
306
+ font-size: 1.4rem;
307
+ }
308
+ .pb-editor .pb-editor-body .pb-color-picker .sketch-wrap {
309
+ width: 220px;
310
+ position: absolute;
311
+ z-index: 10;
312
+ left: -12px;
313
+ top: 24px;
314
+ white-space: break-spaces;
315
+ text-align: left;
316
+ }
317
+ .pb-editor .pb-editor-body .pb-part-add-modal .section-title {
318
+ font-weight: 700;
319
+ }
320
+ .pb-editor .pb-editor-body .pb-part-add-modal .group .part {
321
+ border: 1px solid var(--border-light);
322
+ border-radius: 4px;
323
+ padding: 8px 16px;
324
+ }
325
+ .pb-editor .pb-editor-body .pb-html-editor-modal .preview {
326
+ width: 50%;
327
+ }
328
+ .pb-editor .pb-editor-body .pb-html-editor-modal .preview .content {
329
+ border: solid 1px #ccc;
330
+ }
331
+ .pb-editor .pb-editor-body .pb-html-editor-modal .preview .content iframe {
332
+ width: 100%;
333
+ height: 100%;
334
+ }
335
+ .pb-editor .pb-editor-body .pb-html-editor-modal .editor {
336
+ width: 50%;
337
+ }
338
+ .pb-editor .pb-editor-body .pb-html-editor-modal .editor .bs-tab-sheet > :nth-child(2) {
339
+ height: 0;
340
+ }
341
+ .pb-editor .pb-editor-body .pb-html-editor-modal .editor .tags {
342
+ height: 60%;
343
+ }
344
+ .pb-editor .pb-editor-body .pb-html-editor-modal .editor .style {
345
+ height: 40%;
346
+ }
347
+ .pb-editor .pb-editor-body .pb-html-editor-modal .editor .bs-code-editor {
348
+ height: 100%;
349
+ }
350
+ .pb-editor .pb-editor-body .pb-html-editor-modal .buttons {
351
+ text-align: center;
352
+ }
353
+ .pb-editor .pb-editor-body .pb-html-editor-modal .buttons button {
354
+ color: #fff;
355
+ border: none;
356
+ padding: 4px 12px;
357
+ cursor: pointer;
358
+ line-height: 1;
359
+ height: 28px;
360
+ background-color: #1f8fff;
361
+ }
362
+ .pb-editor .pb-editor-body .pb-youtube-modal .flex-grow-1.overflow-auto {
363
+ overflow: hidden !important;
364
+ }
365
+ .pb-editor .pb-editor-body .pb-youtube-modal button {
366
+ color: #fff;
367
+ border: none;
368
+ padding: 4px 12px;
369
+ cursor: pointer;
370
+ line-height: 1;
371
+ height: 28px;
372
+ background-color: #1f8fff;
6
373
  }