@g1cloud/page-builder-editor 1.0.0-alpha.58 → 1.0.0-alpha.59

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 (12) hide show
  1. package/css/page-widget.scss +10 -5
  2. package/dist/{PbPropertyEditorColor-D9E4k6n_.js → PbPropertyEditorColor-yxTUPVwo.js} +1 -1
  3. package/dist/{PbPropertyEditorHtml-BZke0RcX.js → PbPropertyEditorHtml-BjTENWC9.js} +1 -1
  4. package/dist/{PbPropertyEditorImage-CRDZD17a.js → PbPropertyEditorImage-s2pj4vjF.js} +1 -1
  5. package/dist/{PbPropertyEditorMultilineText-C73clBfW.js → PbPropertyEditorMultilineText-BGQUnY2p.js} +1 -1
  6. package/dist/{PbPropertyEditorText-DaEdYvui.js → PbPropertyEditorText-DzXCAZtU.js} +1 -1
  7. package/dist/{PbPropertyEditorYoutube-B7LIYTe0.js → PbPropertyEditorYoutube-DgTDJLnB.js} +1 -1
  8. package/dist/{PbWidgetAddModal-BAxzht8d.js → PbWidgetAddModal-oXOvER0a.js} +1 -1
  9. package/dist/{index-DVb8Dbz9.js → index-B_Pvt4al.js} +26 -18
  10. package/dist/page-builder-editor.js +1 -1
  11. package/dist/page-builder-editor.umd.cjs +19 -11
  12. package/package.json +2 -2
package/css/page-widget.scss CHANGED
@@ -11,11 +11,16 @@
11
11
  pointer-events: none;
12
12
  }
13
13
 
14
- //&.selected {
15
- // outline: 2px solid #4998f8;
16
- // outline-offset: -2px;
17
- // z-index: 999;
18
- //}
14
+ > .invalid-widget {
15
+ display: flex;
16
+ height: 50px;
17
+ justify-content: center;
18
+ align-items: center;
19
+ width: 100%;
20
+ font-size: 18px;
21
+ text-align: center;
22
+ color: #999;
23
+ }
19
24
 
20
25
  &.selected::before {
21
26
  content: "";
package/dist/{PbPropertyEditorColor-D9E4k6n_.js → PbPropertyEditorColor-yxTUPVwo.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
2
2
  import { vT, BSTextInput } from "@g1cloud/bluesea";
3
- import { P as PbColorPicker } from "./index-DVb8Dbz9.js";
3
+ import { P as PbColorPicker } from "./index-B_Pvt4al.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-color" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _hoisted_3 = { class: "bs-layout-horizontal flex-align-center color" };
package/dist/{PbPropertyEditorHtml-BZke0RcX.js → PbPropertyEditorHtml-BjTENWC9.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, defineAsyncComponent } from "vue";
2
2
  import { useModal, vT } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor } from "./index-DVb8Dbz9.js";
3
+ import { u as usePageBuilderEditor } from "./index-B_Pvt4al.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
package/dist/{PbPropertyEditorImage-CRDZD17a.js → PbPropertyEditorImage-s2pj4vjF.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, toDisplayString, createVNode, createCommentVNode, Fragment } from "vue";
2
- import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-DVb8Dbz9.js";
2
+ import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-B_Pvt4al.js";
3
3
  import { useModal, vT, BSButton, BSMultiLangTextInput, showNotification } from "@g1cloud/bluesea";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-image" };
5
5
  const _hoisted_2 = { class: "title" };
package/dist/{PbPropertyEditorMultilineText-C73clBfW.js → PbPropertyEditorMultilineText-BGQUnY2p.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
2
2
  import { vT, BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor } from "./index-DVb8Dbz9.js";
3
+ import { u as usePageBuilderEditor } from "./index-B_Pvt4al.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
package/dist/{PbPropertyEditorText-DaEdYvui.js → PbPropertyEditorText-DzXCAZtU.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
2
2
  import { vT, BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor } from "./index-DVb8Dbz9.js";
3
+ import { u as usePageBuilderEditor } from "./index-B_Pvt4al.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
package/dist/{PbPropertyEditorYoutube-B7LIYTe0.js → PbPropertyEditorYoutube-DgTDJLnB.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref } from "vue";
2
2
  import { useModal, vT } from "@g1cloud/bluesea";
3
- import { s as selectYoutubeVideo } from "./index-DVb8Dbz9.js";
3
+ import { s as selectYoutubeVideo } from "./index-B_Pvt4al.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
package/dist/{PbWidgetAddModal-BAxzht8d.js → PbWidgetAddModal-oXOvER0a.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
2
2
  import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
3
- import { w as widgetPartDefinitions } from "./index-DVb8Dbz9.js";
3
+ import { w as widgetPartDefinitions } from "./index-B_Pvt4al.js";
4
4
  const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
5
5
  const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
6
6
  const _hoisted_3 = ["onClick", "textContent"];
package/dist/{index-DVb8Dbz9.js → index-B_Pvt4al.js} RENAMED
@@ -7266,9 +7266,12 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
7266
7266
  const isYTReady = ref(false);
7267
7267
  onMounted(() => {
7268
7268
  const interval = setInterval(() => {
7269
- if (window && window.YT) {
7270
- isYTReady.value = true;
7271
- clearInterval(interval);
7269
+ try {
7270
+ if (window && window.YT) {
7271
+ isYTReady.value = true;
7272
+ clearInterval(interval);
7273
+ }
7274
+ } catch (e) {
7272
7275
  }
7273
7276
  }, 500);
7274
7277
  });
@@ -7526,7 +7529,7 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
7526
7529
  }
7527
7530
  });
7528
7531
  const _hoisted_1$1$1 = ["innerHTML"];
7529
- const _hoisted_2$h = { class: "pb-viewer" };
7532
+ const _hoisted_2$i = { class: "pb-viewer" };
7530
7533
  const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
7531
7534
  __name: "PageBuilderViewer",
7532
7535
  props: {
@@ -7567,7 +7570,7 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
7567
7570
  key: 0,
7568
7571
  innerHTML: unref(externalCss)
7569
7572
  }, null, 8, _hoisted_1$1$1)) : createCommentVNode("", true),
7570
- createElementVNode("div", _hoisted_2$h, [
7573
+ createElementVNode("div", _hoisted_2$i, [
7571
7574
  part.value ? (openBlock(), createBlock$1(_sfc_main$3$1, {
7572
7575
  key: 0,
7573
7576
  "is-mobile-page": _ctx.isMobilePage,
@@ -8203,15 +8206,15 @@ class PartManager {
8203
8206
  const defaultPartPropertyEditors = () => {
8204
8207
  return {
8205
8208
  "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
8206
- "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DaEdYvui.js")),
8209
+ "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DzXCAZtU.js")),
8207
8210
  "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
8208
8211
  "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
8209
- "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-C73clBfW.js")),
8212
+ "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BGQUnY2p.js")),
8210
8213
  "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
8211
- "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-D9E4k6n_.js")),
8212
- "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-CRDZD17a.js")),
8213
- "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BZke0RcX.js")),
8214
- "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-B7LIYTe0.js"))
8214
+ "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-yxTUPVwo.js")),
8215
+ "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-s2pj4vjF.js")),
8216
+ "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BjTENWC9.js")),
8217
+ "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-DgTDJLnB.js"))
8215
8218
  };
8216
8219
  };
8217
8220
  const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8501,6 +8504,11 @@ const useMouseTracker = () => {
8501
8504
  return mouseTracker;
8502
8505
  };
8503
8506
  const _hoisted_1$s = ["data-part-id", "draggable"];
8507
+ const _hoisted_2$h = {
8508
+ key: 1,
8509
+ class: "invalid-widget",
8510
+ textContent: "Invalid Widget"
8511
+ };
8504
8512
  const _sfc_main$p = /* @__PURE__ */ defineComponent({
8505
8513
  __name: "PbWidget",
8506
8514
  props: {
@@ -8926,14 +8934,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
8926
8934
  draggable: draggable.value,
8927
8935
  style: normalizeStyle(style.value)
8928
8936
  }, [
8929
- component.value ? (openBlock(), createBlock$1(resolveDynamicComponent(component.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : createCommentVNode("", true),
8937
+ component.value ? (openBlock(), createBlock$1(resolveDynamicComponent(component.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : (openBlock(), createElementBlock("div", _hoisted_2$h)),
8930
8938
  selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
8931
- key: 1,
8939
+ key: 2,
8932
8940
  class: "pan-handle",
8933
8941
  onMousedown: panChild
8934
8942
  }, null, 32)) : createCommentVNode("", true),
8935
8943
  selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
8936
- key: 2,
8944
+ key: 3,
8937
8945
  class: "resize-handle",
8938
8946
  onMousedown: resizeChild
8939
8947
  }, null, 32)) : createCommentVNode("", true)
@@ -12770,7 +12778,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
12770
12778
  let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
12771
12779
  const openWidgetAddModal = (modal, args, callback) => {
12772
12780
  modal.openModal({
12773
- component: defineAsyncComponent(() => import("./PbWidgetAddModal-BAxzht8d.js")),
12781
+ component: defineAsyncComponent(() => import("./PbWidgetAddModal-oXOvER0a.js")),
12774
12782
  style: {
12775
12783
  width: "80%",
12776
12784
  height: "80%",
@@ -14150,7 +14158,7 @@ class PageBuilderEditorImpl {
14150
14158
  let rootPart = partFromJsonObject(_data, true);
14151
14159
  if (!rootPart) rootPart = new RootPart();
14152
14160
  let parts = rootPart.children;
14153
- if (!parts) parts = [this.getEmptyPageContent(), this.getEmptyPageContent()];
14161
+ if (!parts) parts = [this.getEmptyPageContent()];
14154
14162
  if (parts.length === 1) {
14155
14163
  parts[0].properties = {
14156
14164
  ...parts[0].properties || {},
@@ -14469,7 +14477,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
14469
14477
  createVNode(unref(BSSelect), {
14470
14478
  modelValue: screenCount.value,
14471
14479
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => screenCount.value = $event),
14472
- items: [{ value: 2, label: "Multiple Screen" }, { value: 1, label: "Single Screen" }],
14480
+ items: [{ value: 1, label: "Single Screen" }, { value: 2, label: "Multiple Screen" }],
14473
14481
  "label-provider": (v) => v.label,
14474
14482
  "value-provider": (v) => v.value,
14475
14483
  "view-mode": false
@@ -14887,7 +14895,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
14887
14895
  };
14888
14896
  }
14889
14897
  });
14890
- 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.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}';
14898
+ 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}';
14891
14899
  const _hoisted_1$2 = ["width"];
14892
14900
  const _sfc_main$2 = /* @__PURE__ */ defineComponent({
14893
14901
  __name: "PbPageFrame",
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, t, v, x, y, z, A, D } from "./index-DVb8Dbz9.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, t, v, x, y, z, A, D } from "./index-B_Pvt4al.js";
2
2
  export {
3
3
  B as BLOCK_TYPE,
4
4
  b as Block,
package/dist/page-builder-editor.umd.cjs CHANGED
@@ -7267,9 +7267,12 @@ ${_html.style}
7267
7267
  const isYTReady = vue.ref(false);
7268
7268
  vue.onMounted(() => {
7269
7269
  const interval = setInterval(() => {
7270
- if (window && window.YT) {
7271
- isYTReady.value = true;
7272
- clearInterval(interval);
7270
+ try {
7271
+ if (window && window.YT) {
7272
+ isYTReady.value = true;
7273
+ clearInterval(interval);
7274
+ }
7275
+ } catch (e) {
7273
7276
  }
7274
7277
  }, 500);
7275
7278
  });
@@ -7527,7 +7530,7 @@ ${_html.style}
7527
7530
  }
7528
7531
  });
7529
7532
  const _hoisted_1$1$1 = ["innerHTML"];
7530
- const _hoisted_2$u = { class: "pb-viewer" };
7533
+ const _hoisted_2$v = { class: "pb-viewer" };
7531
7534
  const _sfc_main$2$1 = /* @__PURE__ */ vue.defineComponent({
7532
7535
  __name: "PageBuilderViewer",
7533
7536
  props: {
@@ -7568,7 +7571,7 @@ ${_html.style}
7568
7571
  key: 0,
7569
7572
  innerHTML: vue.unref(externalCss)
7570
7573
  }, null, 8, _hoisted_1$1$1)) : vue.createCommentVNode("", true),
7571
- vue.createElementVNode("div", _hoisted_2$u, [
7574
+ vue.createElementVNode("div", _hoisted_2$v, [
7572
7575
  part.value ? (vue.openBlock(), vue.createBlock(_sfc_main$3$1, {
7573
7576
  key: 0,
7574
7577
  "is-mobile-page": _ctx.isMobilePage,
@@ -8502,6 +8505,11 @@ ${_html.style}
8502
8505
  return mouseTracker;
8503
8506
  };
8504
8507
  const _hoisted_1$G = ["data-part-id", "draggable"];
8508
+ const _hoisted_2$u = {
8509
+ key: 1,
8510
+ class: "invalid-widget",
8511
+ textContent: "Invalid Widget"
8512
+ };
8505
8513
  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
8506
8514
  __name: "PbWidget",
8507
8515
  props: {
@@ -8927,14 +8935,14 @@ ${_html.style}
8927
8935
  draggable: draggable.value,
8928
8936
  style: vue.normalizeStyle(style.value)
8929
8937
  }, [
8930
- component.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(component.value), vue.normalizeProps(vue.mergeProps({ key: 0 }, bind.value)), null, 16)) : vue.createCommentVNode("", true),
8938
+ 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)),
8931
8939
  selected.value && _ctx.part.isNestedWidget() ? (vue.openBlock(), vue.createElementBlock("div", {
8932
- key: 1,
8940
+ key: 2,
8933
8941
  class: "pan-handle",
8934
8942
  onMousedown: panChild
8935
8943
  }, null, 32)) : vue.createCommentVNode("", true),
8936
8944
  selected.value && _ctx.part.isNestedWidget() ? (vue.openBlock(), vue.createElementBlock("div", {
8937
- key: 2,
8945
+ key: 3,
8938
8946
  class: "resize-handle",
8939
8947
  onMousedown: resizeChild
8940
8948
  }, null, 32)) : vue.createCommentVNode("", true)
@@ -14151,7 +14159,7 @@ ${_html.style}
14151
14159
  let rootPart = partFromJsonObject(_data, true);
14152
14160
  if (!rootPart) rootPart = new RootPart();
14153
14161
  let parts = rootPart.children;
14154
- if (!parts) parts = [this.getEmptyPageContent(), this.getEmptyPageContent()];
14162
+ if (!parts) parts = [this.getEmptyPageContent()];
14155
14163
  if (parts.length === 1) {
14156
14164
  parts[0].properties = {
14157
14165
  ...parts[0].properties || {},
@@ -14470,7 +14478,7 @@ ${_html.style}
14470
14478
  vue.createVNode(vue.unref(bluesea.BSSelect), {
14471
14479
  modelValue: screenCount.value,
14472
14480
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => screenCount.value = $event),
14473
- items: [{ value: 2, label: "Multiple Screen" }, { value: 1, label: "Single Screen" }],
14481
+ items: [{ value: 1, label: "Single Screen" }, { value: 2, label: "Multiple Screen" }],
14474
14482
  "label-provider": (v) => v.label,
14475
14483
  "value-provider": (v) => v.value,
14476
14484
  "view-mode": false
@@ -14888,7 +14896,7 @@ ${_html.style}
14888
14896
  };
14889
14897
  }
14890
14898
  });
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.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}';
14899
+ 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
14900
  const _hoisted_1$g = ["width"];
14893
14901
  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
14894
14902
  __name: "PbPageFrame",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@g1cloud/page-builder-editor",
3
3
  "private": false,
4
- "version": "1.0.0-alpha.58",
4
+ "version": "1.0.0-alpha.59",
5
5
  "engins": {
6
6
  "node": ">= 20.0.0"
7
7
  },
@@ -30,7 +30,7 @@
30
30
  "vue-router": "^4.4.3",
31
31
  "vue3-click-away": "^1.2.4",
32
32
  "yjs": "^13.6.14",
33
- "@g1cloud/page-builder-viewer": "1.0.0-alpha.58"
33
+ "@g1cloud/page-builder-viewer": "1.0.0-alpha.59"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@types/node": "^20.12.7",