@g1cloud/page-builder-editor 1.0.0-alpha.4 → 1.0.0-alpha.40

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 (95) hide show
  1. package/css/canvas.scss +16 -137
  2. package/css/{canvas-block.scss → page-block.scss} +15 -3
  3. package/css/page-builder-editor.scss +95 -22
  4. package/css/{canvas-page.scss → page-page.scss} +24 -16
  5. package/css/{canvas-section.scss → page-section.scss} +17 -3
  6. package/css/{canvas-widget.scss → page-widget.scss} +22 -3
  7. package/css/page.scss +74 -0
  8. package/css/property-editor-color.scss +5 -0
  9. package/css/property-editor-html.scss +16 -0
  10. package/css/property-editor-image.scss +1 -1
  11. package/css/property-editor-number.scss +10 -0
  12. package/css/property-editor-youtube.scss +16 -0
  13. package/css/property-group-editor-background.scss +1 -13
  14. package/css/property-group-editor-border.scss +6 -12
  15. package/css/property-group-editor-margin.scss +0 -11
  16. package/css/property-group-editor-padding.scss +0 -11
  17. package/css/property-group-editor-position.scss +0 -11
  18. package/css/property-group-editor-size.scss +0 -11
  19. package/css/property-localpart.scss +2 -2
  20. package/dist/PageBuilderEditor.vue.d.ts +15 -11
  21. package/dist/PbHtmlEditorModal-dDR38rNy.js +187 -0
  22. package/dist/PbPropertyEditorBoolean-C7-iSAtn.js +38 -0
  23. package/dist/PbPropertyEditorColor-CxzuXdSU.js +57 -0
  24. package/dist/PbPropertyEditorHtml-CAwd0B2-.js +59 -0
  25. package/dist/{PbPropertyEditorImage-EuqsavTF.js → PbPropertyEditorImage-BUrb2xHD.js} +9 -9
  26. package/dist/{PbPropertyEditorMultilineText-CfRbKELF.js → PbPropertyEditorMultilineText-BZHzQltK.js} +26 -24
  27. package/dist/{PbPropertyEditorText-DNdXl-Tr.js → PbPropertyEditorNumber-TTgo0zbQ.js} +15 -8
  28. package/dist/{PbPropertyEditorReadonlyText-Bk0WJxA0.js → PbPropertyEditorReadonlyText-Dgp_AVOD.js} +1 -1
  29. package/dist/{PbPropertyEditorSelect-BJovN1su.js → PbPropertyEditorSelect-CWedbXJI.js} +1 -1
  30. package/dist/PbPropertyEditorText-6sglUVrs.js +51 -0
  31. package/dist/PbPropertyEditorYoutube-D4YwWYvB.js +39 -0
  32. package/dist/PbScreenSelectModal-CnI1IsvW.js +66 -0
  33. package/dist/PbWidgetAddModal-B1D1-muE.js +80 -0
  34. package/dist/PbYoutubeModal-8vQ_IPA0.js +68 -0
  35. package/dist/components/canvas/PbCanvas.vue.d.ts +1 -1
  36. package/dist/components/depart/PbLoginDepart.vue.d.ts +3 -3
  37. package/dist/components/menu/PbMenu.vue.d.ts +16 -1
  38. package/dist/components/menu/PbToolbar.vue.d.ts +16 -1
  39. package/dist/components/menu/PbToolbarButton.vue.d.ts +3 -3
  40. package/dist/components/menu/PbToolbarButtonGroup.vue.d.ts +3 -3
  41. package/dist/components/modal/PbHtmlEditorModal.vue.d.ts +28 -0
  42. package/dist/components/modal/PbPartAddModal.vue.d.ts +4 -4
  43. package/dist/components/modal/PbScreenSelectModal.vue.d.ts +6 -0
  44. package/dist/components/modal/PbWidgetAddModal.vue.d.ts +4 -4
  45. package/dist/components/modal/PbYoutubeModal.vue.d.ts +19 -0
  46. package/dist/components/navigator/PbNavigator.vue.d.ts +1 -1
  47. package/dist/components/part/PbAddWidgetButton.vue.d.ts +1 -1
  48. package/dist/components/part/PbBlock.vue.d.ts +7 -3
  49. package/dist/components/part/PbContainerWidget.vue.d.ts +19 -0
  50. package/dist/components/part/PbPage.vue.d.ts +5 -5
  51. package/dist/components/part/PbPageFrame.vue.d.ts +19 -0
  52. package/dist/components/part/PbSection.vue.d.ts +7 -3
  53. package/dist/components/part/PbWidget.vue.d.ts +5 -3
  54. package/dist/components/sidebar/PbSidebar.vue.d.ts +1 -1
  55. package/dist/components/sidebar/PbSidebarProperties.vue.d.ts +1 -1
  56. package/dist/components/sidebar/PbSidebarPropertyEditor.vue.d.ts +3 -3
  57. package/dist/components/sidebar/PbSidebarPropertyGroupEditor.vue.d.ts +3 -3
  58. package/dist/components/sidebar/property/{PbPropertyEditorProduct.vue.d.ts → PbPropertyEditorBoolean.vue.d.ts} +4 -4
  59. package/dist/components/sidebar/property/{PbPropertyLocalMarketingPart.vue.d.ts → PbPropertyEditorColor.vue.d.ts} +9 -9
  60. package/dist/components/sidebar/property/PbPropertyEditorHtml.vue.d.ts +23 -0
  61. package/dist/components/sidebar/property/PbPropertyEditorImage.vue.d.ts +7 -6
  62. package/dist/components/sidebar/property/PbPropertyEditorMultilineText.vue.d.ts +7 -6
  63. package/dist/components/sidebar/property/PbPropertyEditorNumber.vue.d.ts +23 -0
  64. package/dist/components/sidebar/property/PbPropertyEditorReadonlyText.vue.d.ts +3 -3
  65. package/dist/components/sidebar/property/PbPropertyEditorSelect.vue.d.ts +4 -4
  66. package/dist/components/sidebar/property/PbPropertyEditorText.vue.d.ts +9 -8
  67. package/dist/components/sidebar/property/PbPropertyEditorYoutube.vue.d.ts +23 -0
  68. package/dist/components/sidebar/property/PbPropertyGroupEditorBackground.vue.d.ts +3 -3
  69. package/dist/components/sidebar/property/PbPropertyGroupEditorBorder.vue.d.ts +3 -3
  70. package/dist/components/sidebar/property/PbPropertyGroupEditorMargin.vue.d.ts +3 -3
  71. package/dist/components/sidebar/property/PbPropertyGroupEditorPadding.vue.d.ts +3 -3
  72. package/dist/components/sidebar/property/PbPropertyGroupEditorPosition.vue.d.ts +3 -3
  73. package/dist/components/sidebar/property/PbPropertyGroupEditorSize.vue.d.ts +3 -3
  74. package/dist/components/ui/PbColorPicker.vue.d.ts +21 -8
  75. package/dist/directives/vPartHandler.d.ts +1 -0
  76. package/dist/{index-Mob7K7vK.js → index-CujMrKaK.js} +2777 -2065
  77. package/dist/index.d.ts +5 -0
  78. package/dist/model/command.d.ts +26 -13
  79. package/dist/model/context.d.ts +22 -25
  80. package/dist/model/default-part-property-group.d.ts +3 -0
  81. package/dist/model/event.d.ts +0 -56
  82. package/dist/model/model.d.ts +9 -5
  83. package/dist/model/page-builder-editor.d.ts +36 -13
  84. package/dist/model/page-builder-util.d.ts +2 -0
  85. package/dist/model/part-definintion.d.ts +3 -2
  86. package/dist/model/part-manager.d.ts +2 -1
  87. package/dist/model/part-property.d.ts +2 -3
  88. package/dist/model/plugin.d.ts +15 -0
  89. package/dist/page-builder-editor.js +26 -19
  90. package/dist/page-builder-editor.umd.cjs +3435 -2238
  91. package/package.json +9 -6
  92. package/dist/PbPartAddModal-DuLpnV4E.js +0 -50
  93. package/dist/PbPropertyEditorProduct-COnCyYJl.js +0 -49
  94. package/dist/PbWidgetAddModal-CQvFYzfU.js +0 -55
  95. package/dist/components/canvas/PbCanvasFrame.vue.d.ts +0 -2
@@ -1,13 +1,2 @@
1
1
  .group-editor-margin {
2
- padding: 4px 8px;
3
- font-size: 0.9em;
4
-
5
- > div {
6
- > label {
7
- min-width: 6em;
8
- max-width: 6em;
9
- padding-right: 0.5em;
10
- font-weight: bold;
11
- }
12
- }
13
2
  }
@@ -1,13 +1,2 @@
1
1
  .group-editor-padding {
2
- padding: 4px 8px;
3
- font-size: 0.9em;
4
-
5
- > div {
6
- > label {
7
- min-width: 6em;
8
- max-width: 6em;
9
- padding-right: 0.5em;
10
- font-weight: bold;
11
- }
12
- }
13
2
  }
@@ -1,13 +1,2 @@
1
1
  .group-editor-position {
2
- padding: 4px 8px;
3
- font-size: 0.9em;
4
-
5
- > div {
6
- > label {
7
- min-width: 6em;
8
- max-width: 6em;
9
- padding-right: 0.5em;
10
- font-weight: bold;
11
- }
12
- }
13
2
  }
@@ -1,13 +1,2 @@
1
1
  .group-editor-size {
2
- padding: 4px 8px;
3
- font-size: 0.9em;
4
-
5
- > div {
6
- > label {
7
- min-width: 6em;
8
- max-width: 6em;
9
- padding-right: 0.5em;
10
- font-weight: bold;
11
- }
12
- }
13
2
  }
@@ -1,7 +1,7 @@
1
1
  .property-editor-local-part {
2
2
 
3
- .label {
4
- font-weight: bold;
3
+ .title {
4
+ font-weight: 600;
5
5
  }
6
6
 
7
7
  button {
@@ -1,20 +1,24 @@
1
- declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
1
+ import { PageBuilderToolbarPlugin } from './model/plugin.ts';
2
+
3
+ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
2
4
  instanceId?: string | undefined;
3
5
  title?: string | undefined;
4
- editMode?: string | undefined;
5
- pageContent?: any;
6
+ pageContent?: string | undefined;
6
7
  locales?: string[] | undefined;
7
- language?: string | undefined;
8
- }>, {
9
- getLocalDesignPartContent: () => any[] | undefined;
10
- }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
8
+ locale?: string | undefined;
9
+ toolbarPlugin?: PageBuilderToolbarPlugin | undefined;
10
+ plugin?: unknown;
11
+ }>>, {
12
+ getPageContent: () => string;
13
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
11
14
  instanceId?: string | undefined;
12
15
  title?: string | undefined;
13
- editMode?: string | undefined;
14
- pageContent?: any;
16
+ pageContent?: string | undefined;
15
17
  locales?: string[] | undefined;
16
- language?: string | undefined;
17
- }>>>, {}, {}>;
18
+ locale?: string | undefined;
19
+ toolbarPlugin?: PageBuilderToolbarPlugin | undefined;
20
+ plugin?: unknown;
21
+ }>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
18
22
  export default _default;
19
23
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
20
24
  type __VLS_TypePropsToRuntimeProps<T> = {
@@ -0,0 +1,187 @@
1
+ import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createSlots, renderList, normalizeStyle } from "vue";
2
+ import { useModalHandle, waitDuring, BSModalFrame, BSTabSheet, BSSelect, BSCodeEditor } from "@g1cloud/bluesea";
3
+ const _hoisted_1 = { class: "bs-layout-vertical flex-grow-1 h-full" };
4
+ const _hoisted_2 = { class: "bs-layout-horizontal h-full pt-8" };
5
+ const _hoisted_3 = { class: "preview" };
6
+ const _hoisted_4 = { class: "bs-layout-vertical w-full h-full" };
7
+ const _hoisted_5 = { class: "bs-layout-horizontal pb-4 align-items-center justify-content-between" };
8
+ const _hoisted_6 = { class: "content flex-grow-1 overflow-y-hidden" };
9
+ const _hoisted_7 = ["srcdoc"];
10
+ const _hoisted_8 = { class: "editor bs-layout-vertical pl-8 h-full" };
11
+ const _sfc_main = /* @__PURE__ */ defineComponent({
12
+ __name: "PbHtmlEditorModal",
13
+ props: {
14
+ html: {},
15
+ locales: {},
16
+ localeTabs: {},
17
+ pageBuilder: {}
18
+ },
19
+ emits: ["updateHtml"],
20
+ setup(__props, { emit: __emit }) {
21
+ const props = __props;
22
+ const emit = __emit;
23
+ const localeTabId = ref(props.localeTabs && props.localeTabs[0].tabId);
24
+ const modalHandle = useModalHandle();
25
+ const html = ref(props.html || {});
26
+ const previewWidth = ref(480);
27
+ const previewStyle = computed(() => ({
28
+ width: `${previewWidth.value}px`,
29
+ height: "100%",
30
+ overflow: "auto",
31
+ transformOrigin: `top left`
32
+ }));
33
+ const preview = computed(() => {
34
+ var _a;
35
+ let data = {};
36
+ const externalCss = props.pageBuilder.getExternalCss();
37
+ (_a = props.locales) == null ? void 0 : _a.forEach((locale) => {
38
+ const _html = html.value[locale] || { tags: "", style: "" };
39
+ data[locale] = _html.tags ? `${externalCss}
40
+ <style>${_html.style}</style>
41
+ ${_html.tags}` : "";
42
+ });
43
+ return data;
44
+ });
45
+ const editorTabs = [
46
+ { tabId: "tags", caption: "Tags" },
47
+ { tabId: "style", caption: "Style" }
48
+ ];
49
+ const editorTabId = ref("tags");
50
+ const updateTags = (locale, value) => {
51
+ if (!html.value) html.value = {};
52
+ if (!html.value[locale]) html.value[locale] = {};
53
+ html.value[locale].tags = value;
54
+ };
55
+ const updateStyle = (locale, value) => {
56
+ if (!html.value) html.value = {};
57
+ if (!html.value[locale]) html.value[locale] = {};
58
+ html.value[locale].style = value;
59
+ };
60
+ const ok = () => {
61
+ emit("updateHtml", html.value);
62
+ modalHandle.close();
63
+ };
64
+ const editorHeight = ref("");
65
+ const updateEditorHeight = async () => {
66
+ await waitDuring(50);
67
+ if (editorHeight.value) {
68
+ const editor = document.querySelector(".bs-code-editor");
69
+ if (editor) {
70
+ editor.style.height = editorHeight.value;
71
+ }
72
+ }
73
+ };
74
+ let resizeObserver;
75
+ onMounted(async () => {
76
+ await waitDuring(50);
77
+ const editorParent = document.querySelector(".editor > .bs-tab-sheet > .bs-layout-vertical");
78
+ resizeObserver = new ResizeObserver(() => {
79
+ if (editorParent && editorParent.clientHeight) {
80
+ editorHeight.value = `${editorParent.clientHeight}px`;
81
+ updateEditorHeight();
82
+ }
83
+ });
84
+ if (editorParent) {
85
+ resizeObserver.observe(editorParent);
86
+ }
87
+ });
88
+ onBeforeUnmount(() => {
89
+ if (resizeObserver) {
90
+ resizeObserver.disconnect();
91
+ }
92
+ });
93
+ return (_ctx, _cache) => {
94
+ return openBlock(), createBlock(unref(BSModalFrame), {
95
+ class: "pb-html-editor-modal",
96
+ title: "HTML Editor"
97
+ }, {
98
+ default: withCtx(() => [
99
+ createElementVNode("div", _hoisted_1, [
100
+ createVNode(unref(BSTabSheet), {
101
+ "tab-id": localeTabId.value,
102
+ "onUpdate:tabId": [
103
+ _cache[2] || (_cache[2] = ($event) => localeTabId.value = $event),
104
+ updateEditorHeight
105
+ ],
106
+ tabs: _ctx.localeTabs,
107
+ class: "flex-grow-1"
108
+ }, createSlots({ _: 2 }, [
109
+ renderList(_ctx.locales, (locale) => {
110
+ return {
111
+ name: `tab-${locale}`,
112
+ fn: withCtx(() => [
113
+ createElementVNode("div", _hoisted_2, [
114
+ createElementVNode("div", _hoisted_3, [
115
+ createElementVNode("div", _hoisted_4, [
116
+ createElementVNode("div", _hoisted_5, [
117
+ _cache[3] || (_cache[3] = createElementVNode("div", { class: "title pb-4" }, "Preview", -1)),
118
+ createVNode(unref(BSSelect), {
119
+ modelValue: previewWidth.value,
120
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => previewWidth.value = $event),
121
+ items: [480, 768, 1024, 1280],
122
+ "label-provider": (v) => `Screen Size: ${v}px`,
123
+ "view-model": false
124
+ }, null, 8, ["modelValue", "label-provider"])
125
+ ]),
126
+ createElementVNode("div", _hoisted_6, [
127
+ createElementVNode("iframe", {
128
+ srcdoc: preview.value[locale],
129
+ style: normalizeStyle(previewStyle.value)
130
+ }, null, 12, _hoisted_7)
131
+ ])
132
+ ])
133
+ ]),
134
+ createElementVNode("div", _hoisted_8, [
135
+ createVNode(unref(BSTabSheet), {
136
+ "tab-id": editorTabId.value,
137
+ "onUpdate:tabId": [
138
+ _cache[1] || (_cache[1] = ($event) => editorTabId.value = $event),
139
+ updateEditorHeight
140
+ ],
141
+ tabs: editorTabs,
142
+ class: "compact flex-grow-1"
143
+ }, {
144
+ tags: withCtx(() => [
145
+ createVNode(unref(BSCodeEditor), {
146
+ "model-value": (html.value[locale] || {}).tags,
147
+ class: "border-top-0",
148
+ "editor-height": "100%",
149
+ lang: "html",
150
+ "onUpdate:modelValue": (value) => updateTags(locale, value)
151
+ }, null, 8, ["model-value", "onUpdate:modelValue"])
152
+ ]),
153
+ style: withCtx(() => [
154
+ createVNode(unref(BSCodeEditor), {
155
+ "model-value": (html.value[locale] || {}).style,
156
+ class: "border-top-0",
157
+ "editor-height": "100%",
158
+ lang: "css",
159
+ "onUpdate:modelValue": (value) => updateStyle(locale, value)
160
+ }, null, 8, ["model-value", "onUpdate:modelValue"])
161
+ ]),
162
+ _: 2
163
+ }, 1032, ["tab-id"])
164
+ ])
165
+ ])
166
+ ])
167
+ };
168
+ })
169
+ ]), 1032, ["tab-id", "tabs"])
170
+ ])
171
+ ]),
172
+ buttons: withCtx(() => [
173
+ createElementVNode("div", { class: "bs-layout-horizontal justify-content-center" }, [
174
+ createElementVNode("button", {
175
+ class: "mr-4",
176
+ onClick: ok
177
+ }, "OK")
178
+ ])
179
+ ]),
180
+ _: 1
181
+ });
182
+ };
183
+ }
184
+ });
185
+ export {
186
+ _sfc_main as default
187
+ };
@@ -0,0 +1,38 @@
1
+ import { defineComponent, ref, openBlock, createElementBlock, createElementVNode, createVNode, unref } from "vue";
2
+ import { BSCheckbox } from "@g1cloud/bluesea";
3
+ const _hoisted_1 = { class: "property-editor property-editor-boolean flex-align-center my-12" };
4
+ const _sfc_main = /* @__PURE__ */ defineComponent({
5
+ __name: "PbPropertyEditorBoolean",
6
+ props: {
7
+ property: {},
8
+ value: {}
9
+ },
10
+ emits: ["update-property-value"],
11
+ setup(__props, { emit: __emit }) {
12
+ const props = __props;
13
+ const booleanValue = ref((props == null ? void 0 : props.value) === "true");
14
+ const emit = __emit;
15
+ const emitUpdatePropertyValue = (value) => {
16
+ const properties = {};
17
+ properties[props.property.propertyName] = value ? "true" : "false";
18
+ emit("update-property-value", properties);
19
+ };
20
+ return (_ctx, _cache) => {
21
+ return openBlock(), createElementBlock("div", _hoisted_1, [
22
+ createElementVNode("div", null, [
23
+ createVNode(unref(BSCheckbox), {
24
+ modelValue: booleanValue.value,
25
+ "onUpdate:modelValue": [
26
+ _cache[0] || (_cache[0] = ($event) => booleanValue.value = $event),
27
+ emitUpdatePropertyValue
28
+ ],
29
+ label: _ctx.property.caption
30
+ }, null, 8, ["modelValue", "label"])
31
+ ])
32
+ ]);
33
+ };
34
+ }
35
+ });
36
+ export {
37
+ _sfc_main as default
38
+ };
@@ -0,0 +1,57 @@
1
+ import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
2
+ import { BSTextInput } from "@g1cloud/bluesea";
3
+ import { P as PbColorPicker } from "./index-CujMrKaK.js";
4
+ const _hoisted_1 = { class: "property-editor property-editor-color" };
5
+ const _hoisted_2 = { class: "title" };
6
+ const _hoisted_3 = ["textContent"];
7
+ const _hoisted_4 = { class: "bs-layout-horizontal flex-align-center color" };
8
+ const _sfc_main = /* @__PURE__ */ defineComponent({
9
+ __name: "PbPropertyEditorColor",
10
+ props: {
11
+ property: {},
12
+ value: {}
13
+ },
14
+ emits: ["update-property-value"],
15
+ setup(__props, { emit: __emit }) {
16
+ const props = __props;
17
+ const emit = __emit;
18
+ const emptyColor = () => {
19
+ };
20
+ const saveOriginalColor = () => {
21
+ };
22
+ const updateColor = (value) => {
23
+ const properties = {};
24
+ properties[props.property.propertyName] = value;
25
+ emit("update-property-value", properties);
26
+ };
27
+ return (_ctx, _cache) => {
28
+ return openBlock(), createElementBlock("div", _hoisted_1, [
29
+ createElementVNode("div", _hoisted_2, [
30
+ createElementVNode("label", {
31
+ textContent: toDisplayString(_ctx.property.caption)
32
+ }, null, 8, _hoisted_3)
33
+ ]),
34
+ createElementVNode("div", _hoisted_4, [
35
+ createVNode(PbColorPicker, {
36
+ value: _ctx.value,
37
+ "hide-delete": "",
38
+ onEmpty: _cache[0] || (_cache[0] = ($event) => emptyColor()),
39
+ onHide: _cache[1] || (_cache[1] = ($event) => updateColor($event)),
40
+ onShow: saveOriginalColor,
41
+ onChangeColor: _cache[2] || (_cache[2] = ($event) => updateColor($event))
42
+ }, null, 8, ["value"]),
43
+ createVNode(unref(BSTextInput), {
44
+ "model-value": _ctx.value,
45
+ prefix: { type: "font-icon", value: "palette" },
46
+ class: "ml-4",
47
+ width: "",
48
+ "onUpdate:modelValue": updateColor
49
+ }, null, 8, ["model-value"])
50
+ ])
51
+ ]);
52
+ };
53
+ }
54
+ });
55
+ export {
56
+ _sfc_main as default
57
+ };
@@ -0,0 +1,59 @@
1
+ import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
2
+ import { useModal } from "@g1cloud/bluesea";
3
+ import { u as usePageBuilderEditor } from "./index-CujMrKaK.js";
4
+ const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
5
+ const _hoisted_2 = { class: "title" };
6
+ const _hoisted_3 = ["textContent"];
7
+ const _sfc_main = /* @__PURE__ */ defineComponent({
8
+ __name: "PbPropertyEditorHtml",
9
+ props: {
10
+ property: {},
11
+ value: {}
12
+ },
13
+ emits: ["update-property-value"],
14
+ setup(__props, { emit: __emit }) {
15
+ const props = __props;
16
+ const modal = useModal();
17
+ const pageBuilder = usePageBuilderEditor();
18
+ const emit = __emit;
19
+ const editHtml = () => {
20
+ const locales = pageBuilder.getLocales();
21
+ const localeTabs = locales.map((v) => ({ tabId: `tab-${v}`, caption: v }));
22
+ modal.openModal({
23
+ component: defineAsyncComponent(() => import("./PbHtmlEditorModal-dDR38rNy.js")),
24
+ style: {
25
+ width: "80%",
26
+ height: "80%",
27
+ minWidth: "500px",
28
+ minHeight: "400px"
29
+ },
30
+ bind: {
31
+ html: JSON.parse(JSON.stringify(props.value || {})),
32
+ locales,
33
+ localeTabs,
34
+ pageBuilder
35
+ },
36
+ on: {
37
+ updateHtml: (html) => {
38
+ emit("update-property-value", { html });
39
+ }
40
+ }
41
+ });
42
+ };
43
+ return (_ctx, _cache) => {
44
+ return openBlock(), createElementBlock("div", _hoisted_1, [
45
+ createElementVNode("div", _hoisted_2, [
46
+ createElementVNode("label", {
47
+ textContent: toDisplayString(_ctx.property.caption)
48
+ }, null, 8, _hoisted_3)
49
+ ]),
50
+ createElementVNode("div", null, [
51
+ createElementVNode("button", { onClick: editHtml }, "Edit HTML")
52
+ ])
53
+ ]);
54
+ };
55
+ }
56
+ });
57
+ export {
58
+ _sfc_main as default
59
+ };
@@ -1,8 +1,8 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
2
+ import { u as usePageBuilderEditor } from "./index-CujMrKaK.js";
2
3
  import { useModal } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor, P as PageBuilderEditorEvent } from "./index-Mob7K7vK.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
5
- const _hoisted_2 = { class: "label" };
5
+ const _hoisted_2 = { class: "title" };
6
6
  const _hoisted_3 = ["textContent"];
7
7
  const _sfc_main = /* @__PURE__ */ defineComponent({
8
8
  __name: "PbPropertyEditorImage",
@@ -12,16 +12,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
12
12
  },
13
13
  emits: ["update-property-value"],
14
14
  setup(__props, { emit: __emit }) {
15
- useModal();
16
15
  const pageBuilder = usePageBuilderEditor();
16
+ const modal = useModal();
17
17
  const emit = __emit;
18
18
  const selectImage = () => {
19
- PageBuilderEditorEvent.emit.requestImage({
20
- pageBuilderId: pageBuilder.instanceId,
21
- callback: (url) => {
22
- emit("update-property-value", { image: url });
23
- }
24
- });
19
+ const imageProvider = pageBuilder.getProvider("imageProvider");
20
+ if (imageProvider) {
21
+ imageProvider({ modal }, (media) => {
22
+ emit("update-property-value", { media });
23
+ });
24
+ }
25
25
  };
26
26
  return (_ctx, _cache) => {
27
27
  return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -1,8 +1,8 @@
1
- import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
2
- import { BSTextArea } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor } from "./index-Mob7K7vK.js";
1
+ import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
2
+ import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
3
+ import { u as usePageBuilderEditor } from "./index-CujMrKaK.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
5
- const _hoisted_2 = { class: "label" };
5
+ const _hoisted_2 = { class: "title" };
6
6
  const _hoisted_3 = ["textContent"];
7
7
  const _sfc_main = /* @__PURE__ */ defineComponent({
8
8
  __name: "PbPropertyEditorMultilineText",
@@ -14,29 +14,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
14
14
  setup(__props, { emit: __emit }) {
15
15
  const props = __props;
16
16
  const emit = __emit;
17
- const emitUpdatePropertyValue = (value) => {
18
- const properties = {};
19
- if (props.value && typeof props.value === "object") {
20
- properties[props.property.propertyName] = {
21
- ...props.value,
22
- [language.value]: value
23
- };
24
- } else {
25
- properties[props.property.propertyName] = {
26
- [language.value]: value
27
- };
28
- }
29
- emit("update-property-value", properties);
30
- };
31
17
  const pageBuilder = usePageBuilderEditor();
32
- const language = computed(() => pageBuilder.language.value);
18
+ const locales = computed(() => pageBuilder.getLocales());
33
19
  const text = computed({
34
20
  get() {
35
- return props.value && typeof props.value === "object" ? props.value[language.value] : "";
21
+ return props.value;
36
22
  },
37
- set() {
23
+ // @ts-ignore
24
+ set(value) {
38
25
  }
39
26
  });
27
+ const emitUpdatePropertyValue = (value) => {
28
+ const properties = {};
29
+ properties[props.property.propertyName] = value;
30
+ emit("update-property-value", properties);
31
+ };
40
32
  return (_ctx, _cache) => {
41
33
  return openBlock(), createElementBlock("div", _hoisted_1, [
42
34
  createElementVNode("div", _hoisted_2, [
@@ -45,16 +37,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
45
37
  }, null, 8, _hoisted_3)
46
38
  ]),
47
39
  createElementVNode("div", null, [
48
- createVNode(unref(BSTextArea), {
40
+ _ctx.property.multiLang ? (openBlock(), createBlock(unref(BSMultiLangTextArea), {
41
+ key: 0,
49
42
  modelValue: text.value,
50
43
  "onUpdate:modelValue": [
51
44
  _cache[0] || (_cache[0] = ($event) => text.value = $event),
52
45
  emitUpdatePropertyValue
53
46
  ],
54
- prefix: language.value,
47
+ locales: locales.value,
48
+ height: "60px",
49
+ width: "100%"
50
+ }, null, 8, ["modelValue", "locales"])) : (openBlock(), createBlock(unref(BSTextArea), {
51
+ key: 1,
52
+ modelValue: text.value,
53
+ "onUpdate:modelValue": [
54
+ _cache[1] || (_cache[1] = ($event) => text.value = $event),
55
+ emitUpdatePropertyValue
56
+ ],
55
57
  height: "60px",
56
58
  width: "100%"
57
- }, null, 8, ["modelValue", "prefix"])
59
+ }, null, 8, ["modelValue"]))
58
60
  ])
59
61
  ]);
60
62
  };
@@ -1,10 +1,10 @@
1
- import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
2
- import { BSTextInput } from "@g1cloud/bluesea";
3
- const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
4
- const _hoisted_2 = { class: "label" };
1
+ import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
2
+ import { BSNumberInput } from "@g1cloud/bluesea";
3
+ const _hoisted_1 = { class: "property-editor property-editor-number flex-align-center" };
4
+ const _hoisted_2 = { class: "title" };
5
5
  const _hoisted_3 = ["textContent"];
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
7
- __name: "PbPropertyEditorText",
7
+ __name: "PbPropertyEditorNumber",
8
8
  props: {
9
9
  property: {},
10
10
  value: {}
@@ -13,9 +13,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
13
13
  setup(__props, { emit: __emit }) {
14
14
  const props = __props;
15
15
  const emit = __emit;
16
+ const modelValue = computed(() => {
17
+ if (props.value && !isNaN(Number(props.value))) {
18
+ return Number(props.value);
19
+ } else {
20
+ return void 0;
21
+ }
22
+ });
16
23
  const emitUpdatePropertyValue = (value) => {
17
24
  const properties = {};
18
- properties[props.property.propertyName] = value;
25
+ properties[props.property.propertyName] = `${value}`;
19
26
  emit("update-property-value", properties);
20
27
  };
21
28
  return (_ctx, _cache) => {
@@ -26,8 +33,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
26
33
  }, null, 8, _hoisted_3)
27
34
  ]),
28
35
  createElementVNode("div", null, [
29
- createVNode(unref(BSTextInput), {
30
- "model-value": _ctx.value,
36
+ createVNode(unref(BSNumberInput), {
37
+ "model-value": modelValue.value,
31
38
  width: "100%",
32
39
  "onUpdate:modelValue": emitUpdatePropertyValue
33
40
  }, null, 8, ["model-value"])
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
2
2
  const _hoisted_1 = { class: "property-editor property-editor-readonly-text" };
3
- const _hoisted_2 = { class: "label" };
3
+ const _hoisted_2 = { class: "title" };
4
4
  const _hoisted_3 = ["textContent"];
5
5
  const _hoisted_4 = ["textContent"];
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -1,7 +1,7 @@
1
1
  import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
2
2
  import { BSSelect } from "@g1cloud/bluesea";
3
3
  const _hoisted_1 = { class: "property-editor property-editor-select flex-align-center" };
4
- const _hoisted_2 = { class: "label" };
4
+ const _hoisted_2 = { class: "title" };
5
5
  const _hoisted_3 = ["textContent"];
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
7
7
  __name: "PbPropertyEditorSelect",