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

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 (20) hide show
  1. package/css/canvas.scss +1 -1
  2. package/css/page-builder-editor.scss +24 -5
  3. package/css/page.scss +1 -1
  4. package/css/variable.scss +4 -0
  5. package/dist/{PbPropertyEditorColor-CRUPv7e6.js → PbPropertyEditorColor-CIbIVOH6.js} +1 -1
  6. package/dist/{PbPropertyEditorCssLength-DECtcGWr.js → PbPropertyEditorCssLength-B-4sVDmD.js} +1 -1
  7. package/dist/{PbPropertyEditorHtml-DKeEg8Q2.js → PbPropertyEditorHtml-D-P-rK2d.js} +1 -1
  8. package/dist/{PbPropertyEditorImage-PEILG_Cx.js → PbPropertyEditorImage-Djqz82Tj.js} +1 -1
  9. package/dist/{PbPropertyEditorMultilineText-RbI_6mDe.js → PbPropertyEditorMultilineText-DFfXK9Mh.js} +1 -1
  10. package/dist/{PbPropertyEditorText-BJK-i2RV.js → PbPropertyEditorText-Bl87u7Hn.js} +1 -1
  11. package/dist/{PbPropertyEditorYoutube-BEzsNZG-.js → PbPropertyEditorYoutube-vn68-hix.js} +1 -1
  12. package/dist/{PbWidgetAddModal-B_mxaSD-.js → PbWidgetAddModal-jAxxY2xD.js} +1 -1
  13. package/dist/css/page-builder-editor.css +392 -0
  14. package/dist/{index-Dlp_xq19.js → index-BhMJnNHk.js} +9 -9
  15. package/dist/page-builder-editor.js +1 -1
  16. package/dist/page-builder-editor.umd.cjs +1 -1
  17. package/dist/style.css +3 -0
  18. package/package.json +5 -4
  19. package/css/bluesea.scss +0 -8244
  20. package/css/page-builder-viewer.scss +0 -1
package/css/canvas.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .pb-canvas-wrapper {
3
- background-color: $color-canvas-frame-bg;
3
+ background-color: var(--color-canvas-frame-bg);
4
4
  flex-grow: 1;
5
5
  min-width: 0;
6
6
  width: 0;
package/css/page-builder-editor.scss CHANGED
@@ -1,5 +1,24 @@
1
- @import 'variable';
2
- @import 'canvas';
1
+ @use "variable" as *;
2
+ @use "canvas" as *;
3
+ @use "../dist/style.css";
4
+
5
+
6
+ .bs-clickable {
7
+ user-select: none;
8
+ cursor: pointer;
9
+
10
+ &:hover {
11
+ filter: opacity(75%);
12
+ }
13
+
14
+ &:active {
15
+ filter: opacity(50%);
16
+ }
17
+
18
+ &.disabled {
19
+ filter: opacity(40%)
20
+ }
21
+ }
3
22
 
4
23
  .pb-menu {
5
24
  width: 100%;
@@ -12,7 +31,7 @@
12
31
  content: '';
13
32
  margin: 0 8px;
14
33
  height: 80%;
15
- border-right: 1px solid $color-border-light;
34
+ border-right: 1px solid var(--border-light);
16
35
  align-self: center;
17
36
  }
18
37
 
@@ -69,7 +88,7 @@
69
88
  .pb-sidebar {
70
89
  width: 300px;
71
90
  overflow: auto;
72
- border: 1px solid $color-border-light;
91
+ border: 1px solid var(--border-light);
73
92
 
74
93
  .pb-sidebar-properties {
75
94
  padding: 0;
@@ -217,7 +236,7 @@
217
236
 
218
237
  .part {
219
238
  @extend .bs-clickable;
220
- border: 1px solid $color-border-light;
239
+ border: 1px solid var(--border-light);
221
240
  border-radius: 4px;
222
241
  padding: 8px 16px;
223
242
  }
package/css/page.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  body {
8
8
  margin: 0;
9
9
  padding: 0;
10
- background-color: $color-canvas-frame-bg;
10
+ background-color: var(--color-canvas-frame-bg);
11
11
  overflow: hidden;
12
12
  }
13
13
 
package/css/variable.scss CHANGED
@@ -1 +1,5 @@
1
1
  $color-canvas-frame-bg: #aaa;
2
+
3
+ :root {
4
+ --color-canvas-frame-bg: #{$color-canvas-frame-bg};
5
+ }
package/dist/{PbPropertyEditorColor-CRUPv7e6.js → PbPropertyEditorColor-CIbIVOH6.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-Dlp_xq19.js";
3
+ import { P as PbColorPicker } from "./index-BhMJnNHk.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/{PbPropertyEditorCssLength-DECtcGWr.js → PbPropertyEditorCssLength-B-4sVDmD.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 { t as toCssLength } from "./index-Dlp_xq19.js";
3
+ import { t as toCssLength } from "./index-BhMJnNHk.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-number flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
package/dist/{PbPropertyEditorHtml-DKeEg8Q2.js → PbPropertyEditorHtml-D-P-rK2d.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-Dlp_xq19.js";
3
+ import { u as usePageBuilderEditor } from "./index-BhMJnNHk.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-html flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
package/dist/{PbPropertyEditorImage-PEILG_Cx.js → PbPropertyEditorImage-Djqz82Tj.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-Dlp_xq19.js";
2
+ import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-BhMJnNHk.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-RbI_6mDe.js → PbPropertyEditorMultilineText-DFfXK9Mh.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-Dlp_xq19.js";
3
+ import { u as usePageBuilderEditor } from "./index-BhMJnNHk.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-BJK-i2RV.js → PbPropertyEditorText-Bl87u7Hn.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-Dlp_xq19.js";
3
+ import { u as usePageBuilderEditor } from "./index-BhMJnNHk.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-BEzsNZG-.js → PbPropertyEditorYoutube-vn68-hix.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-Dlp_xq19.js";
3
+ import { s as selectYoutubeVideo } from "./index-BhMJnNHk.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-B_mxaSD-.js → PbWidgetAddModal-jAxxY2xD.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-Dlp_xq19.js";
3
+ import { w as widgetPartDefinitions } from "./index-BhMJnNHk.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/css/page-builder-editor.css ADDED
@@ -0,0 +1,392 @@
1
+ @charset "UTF-8";
2
+ :root {
3
+ --color-canvas-frame-bg: #aaa;
4
+ }
5
+
6
+ .pb-canvas-wrapper {
7
+ background-color: var(--color-canvas-frame-bg);
8
+ flex-grow: 1;
9
+ min-width: 0;
10
+ width: 0;
11
+ height: 100%;
12
+ padding: 20px;
13
+ outline: none;
14
+ overflow: auto;
15
+ }
16
+
17
+ .pb-canvas {
18
+ display: flex;
19
+ flex-direction: row;
20
+ transform-origin: top left;
21
+ width: fit-content;
22
+ height: 100%;
23
+ margin: 0;
24
+ }
25
+
26
+ .pb-page-frame iframe.page-frame {
27
+ border: 0;
28
+ }
29
+
30
+ :root {
31
+ --color-canvas-frame-bg: #aaa;
32
+ }
33
+
34
+ .pb-editor .pb-editor-body {
35
+ height: 100%;
36
+ }
37
+
38
+ .pb-editor .pb-editor-body .tab-bar {
39
+ padding: 0;
40
+ }
41
+
42
+ .bs-clickable, .pb-part-add-modal .group .part {
43
+ user-select: none;
44
+ cursor: pointer;
45
+ }
46
+ .bs-clickable:hover, .pb-part-add-modal .group .part:hover {
47
+ filter: opacity(75%);
48
+ }
49
+ .bs-clickable:active, .pb-part-add-modal .group .part:active {
50
+ filter: opacity(50%);
51
+ }
52
+ .bs-clickable.disabled, .pb-part-add-modal .group .disabled.part {
53
+ filter: opacity(40%);
54
+ }
55
+
56
+ .pb-menu {
57
+ width: 100%;
58
+ }
59
+ .pb-menu .pb-toolbar {
60
+ margin: 0 -8px;
61
+ }
62
+ .pb-menu .pb-toolbar .pb-tool-button-group::after {
63
+ content: "";
64
+ margin: 0 8px;
65
+ height: 80%;
66
+ border-right: 1px solid var(--border-light);
67
+ align-self: center;
68
+ }
69
+ .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button {
70
+ padding: 2px;
71
+ margin: 0 2px;
72
+ }
73
+ .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button {
74
+ width: 28px;
75
+ height: 28px;
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ }
80
+
81
+ .editor-wrapper {
82
+ height: 100%;
83
+ }
84
+
85
+ .pb-editor {
86
+ height: 100%;
87
+ }
88
+
89
+ .pb-editor-body {
90
+ padding: 8px 0 0;
91
+ gap: 8px;
92
+ height: 1px;
93
+ }
94
+ .pb-editor-body .bs-tab-sheet .tab-bar .tabs {
95
+ padding-top: 0;
96
+ }
97
+
98
+ .pb-navigator {
99
+ width: 200px;
100
+ height: 1px;
101
+ overflow-y: auto;
102
+ padding: 8px 0;
103
+ flex-grow: 1;
104
+ }
105
+ .pb-navigator:focus {
106
+ outline: none;
107
+ }
108
+
109
+ .pb-sidebar {
110
+ width: 300px;
111
+ overflow: auto;
112
+ border: 1px solid var(--border-light);
113
+ }
114
+ .pb-sidebar .pb-sidebar-properties {
115
+ padding: 0;
116
+ }
117
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group:not(:empty) {
118
+ padding: 16px 16px;
119
+ border-bottom: 1px solid #eaeaea;
120
+ }
121
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-title > label {
122
+ padding: 4px 0;
123
+ font-size: 90%;
124
+ font-weight: 600;
125
+ }
126
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor {
127
+ padding: 4px 0;
128
+ font-size: 0.9em;
129
+ }
130
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .title {
131
+ padding: 0 0 8px 0;
132
+ }
133
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .title label {
134
+ min-width: 6em;
135
+ max-width: 6em;
136
+ padding-right: 0.5em;
137
+ font-weight: bold;
138
+ }
139
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .sub-title label {
140
+ min-width: 6em;
141
+ max-width: 6em;
142
+ padding-right: 0.5em;
143
+ font-weight: 400;
144
+ }
145
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor {
146
+ padding: 4px 0;
147
+ font-size: 0.9em;
148
+ }
149
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor > .title {
150
+ padding: 0 0 8px 0;
151
+ }
152
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor > .title > label {
153
+ min-width: 6em;
154
+ max-width: 6em;
155
+ padding-right: 0.5em;
156
+ font-weight: 600;
157
+ }
158
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor:nth-child(n+2) {
159
+ margin-top: 4px;
160
+ }
161
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-color .color {
162
+ width: 50%;
163
+ }
164
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-image button.select-button {
165
+ color: #fff;
166
+ border: none;
167
+ padding: 4px 12px;
168
+ cursor: pointer;
169
+ line-height: 1;
170
+ width: 120px;
171
+ height: 28px;
172
+ background-color: #1f8fff;
173
+ }
174
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-image .input-area {
175
+ height: 24px;
176
+ }
177
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product button {
178
+ color: #fff;
179
+ border: none;
180
+ padding: 4px 12px;
181
+ cursor: pointer;
182
+ line-height: 1;
183
+ width: 200px;
184
+ height: 28px;
185
+ background-color: #1f8fff;
186
+ }
187
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product .input-area {
188
+ height: 24px;
189
+ }
190
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-select .bs-select {
191
+ display: block;
192
+ }
193
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-select .input-area {
194
+ height: 24px;
195
+ }
196
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .bs-text-input {
197
+ display: block;
198
+ }
199
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .input-area {
200
+ height: 24px;
201
+ }
202
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .bs-text-input {
203
+ display: block;
204
+ }
205
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .input-area {
206
+ height: 24px;
207
+ }
208
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html button {
209
+ color: #fff;
210
+ border: none;
211
+ padding: 4px 12px;
212
+ cursor: pointer;
213
+ line-height: 1;
214
+ width: 100px;
215
+ height: 28px;
216
+ background-color: #1f8fff;
217
+ }
218
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html .input-area {
219
+ height: 24px;
220
+ }
221
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color {
222
+ flex: 1;
223
+ display: flex;
224
+ flex-direction: row;
225
+ align-items: center;
226
+ }
227
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color .bs-text-input {
228
+ flex-grow: 1;
229
+ }
230
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image {
231
+ flex: 1;
232
+ padding-left: 8px;
233
+ }
234
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image button {
235
+ color: #fff;
236
+ border: none;
237
+ padding: 4px 12px;
238
+ cursor: pointer;
239
+ line-height: 1;
240
+ width: 120px;
241
+ height: 28px;
242
+ background-color: #1f8fff;
243
+ }
244
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color {
245
+ width: 50%;
246
+ flex: 1;
247
+ display: flex;
248
+ flex-direction: row;
249
+ align-items: center;
250
+ }
251
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color .bs-text-input {
252
+ flex-grow: 1;
253
+ }
254
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .corner-icon {
255
+ width: 1.1em;
256
+ height: 1.1em;
257
+ fill: #000;
258
+ }
259
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media button.select-button {
260
+ color: #fff;
261
+ border: none;
262
+ padding: 4px 12px;
263
+ cursor: pointer;
264
+ line-height: 1;
265
+ width: 120px;
266
+ height: 28px;
267
+ background-color: #1f8fff;
268
+ }
269
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media .input-area {
270
+ height: 24px;
271
+ }
272
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .title {
273
+ font-weight: 600;
274
+ }
275
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part button {
276
+ color: #fff;
277
+ border: none;
278
+ padding: 0 4px;
279
+ cursor: pointer;
280
+ line-height: 1;
281
+ height: 24px;
282
+ background-color: #1f8fff;
283
+ }
284
+ .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .input-area {
285
+ height: 24px;
286
+ }
287
+
288
+ .pb-color-picker {
289
+ display: inline-flex;
290
+ position: relative;
291
+ }
292
+ .pb-color-picker .buttons {
293
+ display: flex;
294
+ padding: 0;
295
+ }
296
+ .pb-color-picker .buttons button {
297
+ width: 24px;
298
+ height: 24px;
299
+ display: flex;
300
+ justify-content: center;
301
+ align-items: center;
302
+ }
303
+ .pb-color-picker .buttons button.none {
304
+ position: relative;
305
+ overflow: hidden;
306
+ }
307
+ .pb-color-picker .buttons button.none::after {
308
+ content: " ";
309
+ display: inline-block;
310
+ width: 100px;
311
+ height: 1px;
312
+ background: red;
313
+ position: absolute;
314
+ top: 50%;
315
+ left: 50%;
316
+ transform: translate(-50%, -50%) rotate(45deg);
317
+ }
318
+ .pb-color-picker .buttons button.picker-button {
319
+ border: 1px solid #cccccc;
320
+ }
321
+ .pb-color-picker .buttons button i {
322
+ font-size: 1.4rem;
323
+ }
324
+ .pb-color-picker .sketch-wrap {
325
+ width: 220px;
326
+ position: absolute;
327
+ z-index: 10;
328
+ left: -12px;
329
+ top: 24px;
330
+ white-space: break-spaces;
331
+ text-align: left;
332
+ }
333
+
334
+ .pb-part-add-modal .section-title {
335
+ font-weight: 700;
336
+ }
337
+ .pb-part-add-modal .group .part {
338
+ border: 1px solid var(--border-light);
339
+ border-radius: 4px;
340
+ padding: 8px 16px;
341
+ }
342
+
343
+ .pb-html-editor-modal .preview {
344
+ width: 50%;
345
+ }
346
+ .pb-html-editor-modal .preview .content {
347
+ border: solid 1px #ccc;
348
+ }
349
+ .pb-html-editor-modal .preview .content iframe {
350
+ width: 100%;
351
+ height: 100%;
352
+ }
353
+ .pb-html-editor-modal .editor {
354
+ width: 50%;
355
+ }
356
+ .pb-html-editor-modal .editor .bs-tab-sheet > :nth-child(2) {
357
+ height: 0;
358
+ }
359
+ .pb-html-editor-modal .editor .tags {
360
+ height: 60%;
361
+ }
362
+ .pb-html-editor-modal .editor .style {
363
+ height: 40%;
364
+ }
365
+ .pb-html-editor-modal .editor .bs-code-editor {
366
+ height: 100%;
367
+ }
368
+ .pb-html-editor-modal .buttons {
369
+ text-align: center;
370
+ }
371
+ .pb-html-editor-modal .buttons button {
372
+ color: #fff;
373
+ border: none;
374
+ padding: 4px 12px;
375
+ cursor: pointer;
376
+ line-height: 1;
377
+ height: 28px;
378
+ background-color: #1f8fff;
379
+ }
380
+
381
+ .pb-youtube-modal .flex-grow-1.overflow-auto {
382
+ overflow: hidden !important;
383
+ }
384
+ .pb-youtube-modal button {
385
+ color: #fff;
386
+ border: none;
387
+ padding: 4px 12px;
388
+ cursor: pointer;
389
+ line-height: 1;
390
+ height: 28px;
391
+ background-color: #1f8fff;
392
+ }
package/dist/{index-Dlp_xq19.js → index-BhMJnNHk.js} RENAMED
@@ -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-BJK-i2RV.js")),
8321
+ "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-Bl87u7Hn.js")),
8322
8322
  "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
8323
8323
  "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
8324
- "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-RbI_6mDe.js")),
8324
+ "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DFfXK9Mh.js")),
8325
8325
  "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
8326
- "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-DECtcGWr.js")),
8327
- "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CRUPv7e6.js")),
8328
- "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-PEILG_Cx.js")),
8329
- "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DKeEg8Q2.js")),
8330
- "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-BEzsNZG-.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"))
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-B_mxaSD-.js")),
12886
+ component: defineAsyncComponent(() => import("./PbWidgetAddModal-jAxxY2xD.js")),
12887
12887
  style: {
12888
12888
  width: "80%",
12889
12889
  height: "80%",
@@ -15025,7 +15025,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
15025
15025
  };
15026
15026
  }
15027
15027
  });
15028
- const canvasStyle = '.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\n}\n\n.pb-page {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding-bottom: 100px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.pb-page .pb-page-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n background-color: #fff;\n}\n\n.pb-page .pb-page-content.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-page * {\n box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\n}\n\n.pb-add-widget-button button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 8px;\n background: none;\n border: none;\n cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n\n.pb-section {\n display: flex;\n position: relative;\n width: 100%;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n outline: 1px dashed #ccc;\n}\n\n.pb-section:empty {\n background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n outline: none;\n}\n\n.pb-block {\n display: flex;\n min-width: 1px;\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget {\n position: relative;\n outline: 1px dashed #ccc;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n pointer-events: auto !important;\n min-height: 50px;\n}\n\n.pb-widget * {\n pointer-events: none;\n}\n\n.pb-widget > .invalid-widget {\n display: flex;\n height: 50px;\n justify-content: center;\n align-items: center;\n width: 100%;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-widget.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-widget .pan-handle {\n position: absolute;\n left: -6px;\n top: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: move;\n pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n position: absolute;\n right: -6px;\n bottom: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: nwse-resize;\n pointer-events: auto !important;\n}\n\n.pb-widget {\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-text-widget .text {\n color: #333;\n}\n\n.pb-text-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-media-widget {\n width: 100%;\n}\n\n.pb-media-widget .image {\n width: 100%;\n}\n\n.pb-media-widget .video {\n width: 100%;\n}\n\n.pb-media-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-media-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-youtube-widget {\n width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n width: 100%;\n height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-container-widget {\n width: 100%;\n}\n\n.pb-container-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-product-list-widget {\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n width: 95%;\n margin: 0 auto;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n font-size: 40px;\n color: #999;\n line-height: 200px;\n vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n\n.pb-login-widget {\n height: 200px;\n text-align: center;\n}\n\n.pb-login-widget h3 {\n padding: 0;\n margin: 0;\n font-size: 32px;\n font-weight: bold;\n color: #ccc;\n line-height: 200px;\n vertical-align: middle;\n}\n\nbody {\n margin: 0;\n padding: 0;\n background-color: #aaa;\n overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n font-family: "Material Symbols Outlined", monospace;\n font-size: 1rem;\n max-width: 1em;\n}\n\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\n}\n\n.pb-add-section-handle {\n position: relative;\n text-align: center;\n cursor: pointer;\n z-index: 5;\n height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n opacity: 1;\n}\n\n.pb-add-section-handle > i {\n font-style: normal;\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: 0;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}';
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}';
15029
15029
  const _hoisted_1$2 = ["width"];
15030
15030
  const _sfc_main$2 = /* @__PURE__ */ defineComponent({
15031
15031
  __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, v, x, y, z, A, D, E } from "./index-Dlp_xq19.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-BhMJnNHk.js";
2
2
  export {
3
3
  B as BLOCK_TYPE,
4
4
  b as Block,
package/dist/page-builder-editor.umd.cjs CHANGED
@@ -15026,7 +15026,7 @@ ${_html.style}
15026
15026
  };
15027
15027
  }
15028
15028
  });
15029
- const canvasStyle = '.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\n}\n\n.pb-page {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding-bottom: 100px;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.pb-page .pb-page-content {\n display: flex;\n flex-direction: column;\n width: 100%;\n background-color: #fff;\n}\n\n.pb-page .pb-page-content.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-page * {\n box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\n}\n\n.pb-add-widget-button button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 8px;\n background: none;\n border: none;\n cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n\n.pb-section {\n display: flex;\n position: relative;\n width: 100%;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n outline: 1px dashed #ccc;\n}\n\n.pb-section:empty {\n background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n outline: none;\n}\n\n.pb-block {\n display: flex;\n min-width: 1px;\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget {\n position: relative;\n outline: 1px dashed #ccc;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n pointer-events: auto !important;\n min-height: 50px;\n}\n\n.pb-widget * {\n pointer-events: none;\n}\n\n.pb-widget > .invalid-widget {\n display: flex;\n height: 50px;\n justify-content: center;\n align-items: center;\n width: 100%;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-widget.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-widget .pan-handle {\n position: absolute;\n left: -6px;\n top: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: move;\n pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n position: absolute;\n right: -6px;\n bottom: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: nwse-resize;\n pointer-events: auto !important;\n}\n\n.pb-widget {\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-text-widget .text {\n color: #333;\n}\n\n.pb-text-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-media-widget {\n width: 100%;\n}\n\n.pb-media-widget .image {\n width: 100%;\n}\n\n.pb-media-widget .video {\n width: 100%;\n}\n\n.pb-media-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-media-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-html-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-iframe-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-youtube-widget {\n width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n width: 100%;\n height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-container-widget {\n width: 100%;\n}\n\n.pb-container-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n font-size: 40px;\n color: #999;\n line-height: 100px;\n vertical-align: middle;\n}\n\n.pb-product-list-widget {\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n width: 95%;\n margin: 0 auto;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n margin-top: 8px;\n font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n margin-top: 8px;\n font-size: 14px;\n font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n height: 200px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n font-size: 40px;\n color: #999;\n line-height: 200px;\n vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n .pb-product-list-widget .product-wrapper {\n width: 50%;\n }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n width: 50%;\n}\n\n.pb-login-widget {\n height: 200px;\n text-align: center;\n}\n\n.pb-login-widget h3 {\n padding: 0;\n margin: 0;\n font-size: 32px;\n font-weight: bold;\n color: #ccc;\n line-height: 200px;\n vertical-align: middle;\n}\n\nbody {\n margin: 0;\n padding: 0;\n background-color: #aaa;\n overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n font-family: "Material Symbols Outlined", monospace;\n font-size: 1rem;\n max-width: 1em;\n}\n\n.pb-position-mark {\n background-color: #ff3333;\n opacity: 0.5;\n border-radius: 2px;\n}\n\n.pb-add-section-handle {\n position: relative;\n text-align: center;\n cursor: pointer;\n z-index: 5;\n height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n opacity: 1;\n}\n\n.pb-add-section-handle > i {\n font-style: normal;\n vertical-align: middle;\n position: absolute;\n top: 50%;\n left: 0;\n font-size: 2rem;\n transform: translate(-50%, -50%);\n opacity: 0.2;\n}';
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}';
15030
15030
  const _hoisted_1$h = ["width"];
15031
15031
  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
15032
15032
  __name: "PbPageFrame",