@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.
- package/css/canvas.scss +16 -137
- package/css/{canvas-block.scss → page-block.scss} +15 -3
- package/css/page-builder-editor.scss +95 -22
- package/css/{canvas-page.scss → page-page.scss} +24 -16
- package/css/{canvas-section.scss → page-section.scss} +17 -3
- package/css/{canvas-widget.scss → page-widget.scss} +22 -3
- package/css/page.scss +74 -0
- package/css/property-editor-color.scss +5 -0
- package/css/property-editor-html.scss +16 -0
- package/css/property-editor-image.scss +1 -1
- package/css/property-editor-number.scss +10 -0
- package/css/property-editor-youtube.scss +16 -0
- package/css/property-group-editor-background.scss +1 -13
- package/css/property-group-editor-border.scss +6 -12
- package/css/property-group-editor-margin.scss +0 -11
- package/css/property-group-editor-padding.scss +0 -11
- package/css/property-group-editor-position.scss +0 -11
- package/css/property-group-editor-size.scss +0 -11
- package/css/property-localpart.scss +2 -2
- package/dist/PageBuilderEditor.vue.d.ts +15 -11
- package/dist/PbHtmlEditorModal-dDR38rNy.js +187 -0
- package/dist/PbPropertyEditorBoolean-C7-iSAtn.js +38 -0
- package/dist/PbPropertyEditorColor-CxzuXdSU.js +57 -0
- package/dist/PbPropertyEditorHtml-CAwd0B2-.js +59 -0
- package/dist/{PbPropertyEditorImage-EuqsavTF.js → PbPropertyEditorImage-BUrb2xHD.js} +9 -9
- package/dist/{PbPropertyEditorMultilineText-CfRbKELF.js → PbPropertyEditorMultilineText-BZHzQltK.js} +26 -24
- package/dist/{PbPropertyEditorText-DNdXl-Tr.js → PbPropertyEditorNumber-TTgo0zbQ.js} +15 -8
- package/dist/{PbPropertyEditorReadonlyText-Bk0WJxA0.js → PbPropertyEditorReadonlyText-Dgp_AVOD.js} +1 -1
- package/dist/{PbPropertyEditorSelect-BJovN1su.js → PbPropertyEditorSelect-CWedbXJI.js} +1 -1
- package/dist/PbPropertyEditorText-6sglUVrs.js +51 -0
- package/dist/PbPropertyEditorYoutube-D4YwWYvB.js +39 -0
- package/dist/PbScreenSelectModal-CnI1IsvW.js +66 -0
- package/dist/PbWidgetAddModal-B1D1-muE.js +80 -0
- package/dist/PbYoutubeModal-8vQ_IPA0.js +68 -0
- package/dist/components/canvas/PbCanvas.vue.d.ts +1 -1
- package/dist/components/depart/PbLoginDepart.vue.d.ts +3 -3
- package/dist/components/menu/PbMenu.vue.d.ts +16 -1
- package/dist/components/menu/PbToolbar.vue.d.ts +16 -1
- package/dist/components/menu/PbToolbarButton.vue.d.ts +3 -3
- package/dist/components/menu/PbToolbarButtonGroup.vue.d.ts +3 -3
- package/dist/components/modal/PbHtmlEditorModal.vue.d.ts +28 -0
- package/dist/components/modal/PbPartAddModal.vue.d.ts +4 -4
- package/dist/components/modal/PbScreenSelectModal.vue.d.ts +6 -0
- package/dist/components/modal/PbWidgetAddModal.vue.d.ts +4 -4
- package/dist/components/modal/PbYoutubeModal.vue.d.ts +19 -0
- package/dist/components/navigator/PbNavigator.vue.d.ts +1 -1
- package/dist/components/part/PbAddWidgetButton.vue.d.ts +1 -1
- package/dist/components/part/PbBlock.vue.d.ts +7 -3
- package/dist/components/part/PbContainerWidget.vue.d.ts +19 -0
- package/dist/components/part/PbPage.vue.d.ts +5 -5
- package/dist/components/part/PbPageFrame.vue.d.ts +19 -0
- package/dist/components/part/PbSection.vue.d.ts +7 -3
- package/dist/components/part/PbWidget.vue.d.ts +5 -3
- package/dist/components/sidebar/PbSidebar.vue.d.ts +1 -1
- package/dist/components/sidebar/PbSidebarProperties.vue.d.ts +1 -1
- package/dist/components/sidebar/PbSidebarPropertyEditor.vue.d.ts +3 -3
- package/dist/components/sidebar/PbSidebarPropertyGroupEditor.vue.d.ts +3 -3
- package/dist/components/sidebar/property/{PbPropertyEditorProduct.vue.d.ts → PbPropertyEditorBoolean.vue.d.ts} +4 -4
- package/dist/components/sidebar/property/{PbPropertyLocalMarketingPart.vue.d.ts → PbPropertyEditorColor.vue.d.ts} +9 -9
- package/dist/components/sidebar/property/PbPropertyEditorHtml.vue.d.ts +23 -0
- package/dist/components/sidebar/property/PbPropertyEditorImage.vue.d.ts +7 -6
- package/dist/components/sidebar/property/PbPropertyEditorMultilineText.vue.d.ts +7 -6
- package/dist/components/sidebar/property/PbPropertyEditorNumber.vue.d.ts +23 -0
- package/dist/components/sidebar/property/PbPropertyEditorReadonlyText.vue.d.ts +3 -3
- package/dist/components/sidebar/property/PbPropertyEditorSelect.vue.d.ts +4 -4
- package/dist/components/sidebar/property/PbPropertyEditorText.vue.d.ts +9 -8
- package/dist/components/sidebar/property/PbPropertyEditorYoutube.vue.d.ts +23 -0
- package/dist/components/sidebar/property/PbPropertyGroupEditorBackground.vue.d.ts +3 -3
- package/dist/components/sidebar/property/PbPropertyGroupEditorBorder.vue.d.ts +3 -3
- package/dist/components/sidebar/property/PbPropertyGroupEditorMargin.vue.d.ts +3 -3
- package/dist/components/sidebar/property/PbPropertyGroupEditorPadding.vue.d.ts +3 -3
- package/dist/components/sidebar/property/PbPropertyGroupEditorPosition.vue.d.ts +3 -3
- package/dist/components/sidebar/property/PbPropertyGroupEditorSize.vue.d.ts +3 -3
- package/dist/components/ui/PbColorPicker.vue.d.ts +21 -8
- package/dist/directives/vPartHandler.d.ts +1 -0
- package/dist/{index-Mob7K7vK.js → index-CujMrKaK.js} +2777 -2065
- package/dist/index.d.ts +5 -0
- package/dist/model/command.d.ts +26 -13
- package/dist/model/context.d.ts +22 -25
- package/dist/model/default-part-property-group.d.ts +3 -0
- package/dist/model/event.d.ts +0 -56
- package/dist/model/model.d.ts +9 -5
- package/dist/model/page-builder-editor.d.ts +36 -13
- package/dist/model/page-builder-util.d.ts +2 -0
- package/dist/model/part-definintion.d.ts +3 -2
- package/dist/model/part-manager.d.ts +2 -1
- package/dist/model/part-property.d.ts +2 -3
- package/dist/model/plugin.d.ts +15 -0
- package/dist/page-builder-editor.js +26 -19
- package/dist/page-builder-editor.umd.cjs +3435 -2238
- package/package.json +9 -6
- package/dist/PbPartAddModal-DuLpnV4E.js +0 -50
- package/dist/PbPropertyEditorProduct-COnCyYJl.js +0 -49
- package/dist/PbWidgetAddModal-CQvFYzfU.js +0 -55
- package/dist/components/canvas/PbCanvasFrame.vue.d.ts +0 -2
|
@@ -1,20 +1,24 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
5
|
-
pageContent?: any;
|
|
6
|
+
pageContent?: string | undefined;
|
|
6
7
|
locales?: string[] | undefined;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
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
|
-
|
|
14
|
-
pageContent?: any;
|
|
16
|
+
pageContent?: string | undefined;
|
|
15
17
|
locales?: string[] | undefined;
|
|
16
|
-
|
|
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: "
|
|
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
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
emit("update-property-value", {
|
|
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, [
|
package/dist/{PbPropertyEditorMultilineText-CfRbKELF.js → PbPropertyEditorMultilineText-BZHzQltK.js}
RENAMED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString,
|
|
2
|
-
import { BSTextArea } from "@g1cloud/bluesea";
|
|
3
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
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: "
|
|
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
|
|
18
|
+
const locales = computed(() => pageBuilder.getLocales());
|
|
33
19
|
const text = computed({
|
|
34
20
|
get() {
|
|
35
|
-
return props.value
|
|
21
|
+
return props.value;
|
|
36
22
|
},
|
|
37
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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"
|
|
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 {
|
|
3
|
-
const _hoisted_1 = { class: "property-editor property-editor-
|
|
4
|
-
const _hoisted_2 = { class: "
|
|
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: "
|
|
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(
|
|
30
|
-
"model-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"])
|
package/dist/{PbPropertyEditorReadonlyText-Bk0WJxA0.js → PbPropertyEditorReadonlyText-Dgp_AVOD.js}
RENAMED
|
@@ -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: "
|
|
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: "
|
|
4
|
+
const _hoisted_2 = { class: "title" };
|
|
5
5
|
const _hoisted_3 = ["textContent"];
|
|
6
6
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
7
7
|
__name: "PbPropertyEditorSelect",
|