@g1cloud/page-builder-editor 1.0.0-alpha.32 → 1.0.0-alpha.34
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/page-page.scss +3 -7
- package/css/page-section.scss +1 -0
- package/dist/PbPropertyEditorBoolean-C7-iSAtn.js +38 -0
- package/dist/{PbPropertyEditorColor-CQqLwB4B.js → PbPropertyEditorColor-D7_bQLN4.js} +1 -1
- package/dist/{PbPropertyEditorHtml-CeCp8qgN.js → PbPropertyEditorHtml-BSfmWiwq.js} +1 -1
- package/dist/{PbPropertyEditorImage-BIxdt8XI.js → PbPropertyEditorImage-CeAWWLQE.js} +1 -1
- package/dist/{PbPropertyEditorMultilineText-4sF6PJTE.js → PbPropertyEditorMultilineText-yHnhkc9I.js} +1 -1
- package/dist/{PbPropertyEditorNumber-DrxTz2s1.js → PbPropertyEditorNumber-TTgo0zbQ.js} +9 -2
- package/dist/{PbPropertyEditorText-9hf9BTum.js → PbPropertyEditorText-BcsUyRxP.js} +1 -1
- package/dist/{PbPropertyEditorYoutube-B-pIw-m5.js → PbPropertyEditorYoutube-Bn0DdIOD.js} +1 -1
- package/dist/{PbWidgetAddModal-CFwyR_Bq.js → PbWidgetAddModal-BzG-lkZp.js} +1 -1
- package/dist/components/sidebar/property/PbPropertyEditorBoolean.vue.d.ts +23 -0
- package/dist/{index-iOtzsn-m.js → index-BaB2TtF-.js} +133 -95
- package/dist/index.d.ts +3 -0
- package/dist/model/default-part-property-group.d.ts +2 -0
- package/dist/model/part-property.d.ts +1 -1
- package/dist/page-builder-editor.js +1 -1
- package/dist/page-builder-editor.umd.cjs +302 -220
- package/package.json +2 -2
package/css/page-page.scss
CHANGED
|
@@ -4,19 +4,15 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.pb-page {
|
|
7
|
-
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
8
9
|
margin: 0 auto;
|
|
10
|
+
width: 100%;
|
|
9
11
|
background-position: 50% 50%;
|
|
10
12
|
background-repeat: no-repeat;
|
|
11
13
|
background-size: cover;
|
|
12
14
|
|
|
13
15
|
.pb-page-content {
|
|
14
|
-
//&.selected {
|
|
15
|
-
// outline: 2px solid #4998f8;
|
|
16
|
-
// outline-offset: -2px;
|
|
17
|
-
// z-index: 999;
|
|
18
|
-
//}
|
|
19
|
-
|
|
20
16
|
&.selected::before {
|
|
21
17
|
content: "";
|
|
22
18
|
position: absolute;
|
package/css/page-section.scss
CHANGED
|
@@ -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
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
|
|
2
2
|
import { BSTextInput } from "@g1cloud/bluesea";
|
|
3
|
-
import { P as PbColorPicker } from "./index-
|
|
3
|
+
import { P as PbColorPicker } from "./index-BaB2TtF-.js";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-color" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
|
6
6
|
const _hoisted_3 = ["textContent"];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
|
|
2
2
|
import { useModal } from "@g1cloud/bluesea";
|
|
3
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
3
|
+
import { u as usePageBuilderEditor } from "./index-BaB2TtF-.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 _hoisted_3 = ["textContent"];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
|
|
2
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
2
|
+
import { u as usePageBuilderEditor } from "./index-BaB2TtF-.js";
|
|
3
3
|
import { useModal } from "@g1cloud/bluesea";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
package/dist/{PbPropertyEditorMultilineText-4sF6PJTE.js → PbPropertyEditorMultilineText-yHnhkc9I.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
|
|
2
2
|
import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
|
|
3
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
3
|
+
import { u as usePageBuilderEditor } from "./index-BaB2TtF-.js";
|
|
4
4
|
const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
|
|
5
5
|
const _hoisted_2 = { class: "title" };
|
|
6
6
|
const _hoisted_3 = ["textContent"];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
|
|
1
|
+
import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
|
|
2
2
|
import { BSNumberInput } from "@g1cloud/bluesea";
|
|
3
3
|
const _hoisted_1 = { class: "property-editor property-editor-number flex-align-center" };
|
|
4
4
|
const _hoisted_2 = { class: "title" };
|
|
@@ -13,6 +13,13 @@ 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
25
|
properties[props.property.propertyName] = `${value}`;
|
|
@@ -27,7 +34,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
27
34
|
]),
|
|
28
35
|
createElementVNode("div", null, [
|
|
29
36
|
createVNode(unref(BSNumberInput), {
|
|
30
|
-
"model-value":
|
|
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, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
|
|
2
2
|
import { BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
|
|
3
|
-
import { u as usePageBuilderEditor } from "./index-
|
|
3
|
+
import { u as usePageBuilderEditor } from "./index-BaB2TtF-.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 _hoisted_3 = ["textContent"];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
|
|
2
2
|
import { useModal } from "@g1cloud/bluesea";
|
|
3
|
-
import { s as selectYoutubeVideo } from "./index-
|
|
3
|
+
import { s as selectYoutubeVideo } from "./index-BaB2TtF-.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 _hoisted_3 = ["textContent"];
|
|
@@ -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-
|
|
3
|
+
import { w as widgetPartDefinitions } from "./index-BaB2TtF-.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"];
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { PartProperty } from '../../../model/part-property.ts';
|
|
2
|
+
|
|
3
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
4
|
+
property: PartProperty;
|
|
5
|
+
value?: string | undefined;
|
|
6
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
7
|
+
"update-property-value": (properties: Record<string, string>) => void;
|
|
8
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
9
|
+
property: PartProperty;
|
|
10
|
+
value?: string | undefined;
|
|
11
|
+
}>>> & Readonly<{
|
|
12
|
+
"onUpdate-property-value"?: ((properties: Record<string, string>) => any) | undefined;
|
|
13
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
14
|
+
export default _default;
|
|
15
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
16
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
17
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
18
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
19
|
+
} : {
|
|
20
|
+
type: import('vue').PropType<T[K]>;
|
|
21
|
+
required: true;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
@@ -6683,80 +6683,87 @@ class Part {
|
|
|
6683
6683
|
return ((_a = this.properties) == null ? void 0 : _a.classNames) || "";
|
|
6684
6684
|
}
|
|
6685
6685
|
getAlignStyleValue(align) {
|
|
6686
|
-
|
|
6687
|
-
|
|
6688
|
-
|
|
6686
|
+
switch (align) {
|
|
6687
|
+
case "start":
|
|
6688
|
+
return "flex-start";
|
|
6689
|
+
case "end":
|
|
6690
|
+
return "flex-end";
|
|
6691
|
+
case "center":
|
|
6692
|
+
return "center";
|
|
6693
|
+
case "between":
|
|
6694
|
+
return "space-between";
|
|
6695
|
+
default:
|
|
6696
|
+
return;
|
|
6697
|
+
}
|
|
6689
6698
|
}
|
|
6690
6699
|
getStyles(isMobilePage) {
|
|
6691
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
|
|
6700
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q;
|
|
6692
6701
|
const style = {};
|
|
6693
|
-
|
|
6694
|
-
|
|
6695
|
-
style.alignSelf = this.getAlignStyleValue(align);
|
|
6696
|
-
} else if (this.isPage()) {
|
|
6697
|
-
style.display = "flex";
|
|
6698
|
-
style.flexDirection = "column";
|
|
6699
|
-
style.alignItems = this.getAlignStyleValue(align);
|
|
6702
|
+
if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
|
|
6703
|
+
style.flexDirection = "row";
|
|
6700
6704
|
} else {
|
|
6701
|
-
|
|
6702
|
-
|
|
6703
|
-
|
|
6704
|
-
style.flexDirection = "row";
|
|
6705
|
-
style.justifyContent = this.getAlignStyleValue(align);
|
|
6706
|
-
} else if (direction === "vertical") {
|
|
6707
|
-
style.display = "flex";
|
|
6708
|
-
style.flexDirection = "column";
|
|
6709
|
-
style.alignItems = this.getAlignStyleValue(align);
|
|
6710
|
-
}
|
|
6711
|
-
}
|
|
6712
|
-
if (((_d = this.properties) == null ? void 0 : _d.wrap) === "wrap") {
|
|
6705
|
+
style.flexDirection = "column";
|
|
6706
|
+
}
|
|
6707
|
+
if (((_b = this.properties) == null ? void 0 : _b.wrap) === "wrap") {
|
|
6713
6708
|
style.flexWrap = "wrap";
|
|
6714
6709
|
}
|
|
6715
|
-
|
|
6716
|
-
|
|
6717
|
-
|
|
6718
|
-
if (
|
|
6719
|
-
|
|
6720
|
-
if (
|
|
6721
|
-
|
|
6722
|
-
|
|
6723
|
-
|
|
6724
|
-
|
|
6725
|
-
|
|
6726
|
-
|
|
6727
|
-
if ((
|
|
6728
|
-
if ((
|
|
6729
|
-
if ((
|
|
6730
|
-
if ((
|
|
6731
|
-
if ((
|
|
6732
|
-
if ((
|
|
6733
|
-
if ((
|
|
6734
|
-
if ((
|
|
6735
|
-
if ((
|
|
6736
|
-
if ((
|
|
6737
|
-
if ((
|
|
6738
|
-
if ((
|
|
6739
|
-
if ((
|
|
6740
|
-
if ((
|
|
6741
|
-
if ((
|
|
6742
|
-
if ((
|
|
6743
|
-
if ((
|
|
6744
|
-
if ((
|
|
6745
|
-
if ((
|
|
6710
|
+
const alignItems = this.getAlignStyleValue((_c = this.properties) == null ? void 0 : _c.alignItems);
|
|
6711
|
+
const justifyContent = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.justifyContent);
|
|
6712
|
+
const alignSelf = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.alignSelf);
|
|
6713
|
+
if (this.isWidget()) {
|
|
6714
|
+
if (alignSelf) style.alignSelf = alignSelf;
|
|
6715
|
+
} else if (this.isPage()) {
|
|
6716
|
+
if (alignItems) style.alignItems = alignItems;
|
|
6717
|
+
} else {
|
|
6718
|
+
if (alignItems) style.alignItems = alignItems;
|
|
6719
|
+
if (justifyContent) style.justifyContent = justifyContent;
|
|
6720
|
+
if (alignSelf) style.alignSelf = alignSelf;
|
|
6721
|
+
}
|
|
6722
|
+
if ((_f = this.properties) == null ? void 0 : _f.margin) style.margin = this.properties.margin;
|
|
6723
|
+
if ((_g = this.properties) == null ? void 0 : _g.marginLeft) style.marginLeft = this.properties.marginLeft;
|
|
6724
|
+
if ((_h = this.properties) == null ? void 0 : _h.marginRight) style.marginRight = this.properties.marginRight;
|
|
6725
|
+
if ((_i = this.properties) == null ? void 0 : _i.marginTop) style.marginTop = this.properties.marginTop;
|
|
6726
|
+
if ((_j = this.properties) == null ? void 0 : _j.marginBottom) style.marginBottom = this.properties.marginBottom;
|
|
6727
|
+
if ((_k = this.properties) == null ? void 0 : _k.padding) style.padding = this.properties.padding;
|
|
6728
|
+
if ((_l = this.properties) == null ? void 0 : _l.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
|
|
6729
|
+
if ((_m = this.properties) == null ? void 0 : _m.paddingRight) style.paddingRight = this.properties.paddingRight;
|
|
6730
|
+
if ((_n = this.properties) == null ? void 0 : _n.paddingTop) style.paddingTop = this.properties.paddingTop;
|
|
6731
|
+
if ((_o = this.properties) == null ? void 0 : _o.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
|
|
6732
|
+
if ((_p = this.properties) == null ? void 0 : _p.left) style.left = this.properties.left;
|
|
6733
|
+
if ((_q = this.properties) == null ? void 0 : _q.right) style.right = this.properties.right;
|
|
6734
|
+
if ((_r = this.properties) == null ? void 0 : _r.top) style.top = this.properties.top;
|
|
6735
|
+
if ((_s = this.properties) == null ? void 0 : _s.bottom) style.bottom = this.properties.bottom;
|
|
6736
|
+
if ((_t = this.properties) == null ? void 0 : _t.width) style.width = this.properties.width;
|
|
6737
|
+
if ((_u = this.properties) == null ? void 0 : _u.height) style.height = this.properties.height;
|
|
6738
|
+
if ((_v = this.properties) == null ? void 0 : _v.maxWidth) style.maxWidth = this.properties.maxWidth;
|
|
6739
|
+
if ((_w = this.properties) == null ? void 0 : _w.maxHeight) style.maxHeight = this.properties.maxHeight;
|
|
6740
|
+
if ((_x = this.properties) == null ? void 0 : _x.minWidth) style.minWidth = this.properties.minWidth;
|
|
6741
|
+
if ((_y = this.properties) == null ? void 0 : _y.minHeight) style.minHeight = this.properties.minHeight;
|
|
6742
|
+
if ((_z = this.properties) == null ? void 0 : _z.textAlign) style.textAlign = this.properties.textAlign;
|
|
6743
|
+
if ((_A = this.properties) == null ? void 0 : _A.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
|
|
6744
|
+
if ((_B = this.properties) == null ? void 0 : _B.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
|
|
6745
|
+
if ((_C = this.properties) == null ? void 0 : _C.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
|
|
6746
|
+
if ((_D = this.properties) == null ? void 0 : _D.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
|
|
6747
|
+
if ((_E = this.properties) == null ? void 0 : _E.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
|
|
6748
|
+
if ((_F = this.properties) == null ? void 0 : _F.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
|
|
6749
|
+
if ((_G = this.properties) == null ? void 0 : _G.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
|
|
6750
|
+
if ((_H = this.properties) == null ? void 0 : _H.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
|
|
6751
|
+
if ((_I = this.properties) == null ? void 0 : _I.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
|
|
6752
|
+
if (((_J = this.properties) == null ? void 0 : _J.borderColor) && style.borderLeftWidth) {
|
|
6746
6753
|
style.borderLeftStyle = "solid";
|
|
6747
|
-
style.borderLeftColor = (
|
|
6754
|
+
style.borderLeftColor = (_K = this.properties) == null ? void 0 : _K.borderColor;
|
|
6748
6755
|
}
|
|
6749
|
-
if (((
|
|
6756
|
+
if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderRightWidth) {
|
|
6750
6757
|
style.borderRightStyle = "solid";
|
|
6751
|
-
style.borderRightColor = (
|
|
6758
|
+
style.borderRightColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
|
|
6752
6759
|
}
|
|
6753
|
-
if (((
|
|
6760
|
+
if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderTopWidth) {
|
|
6754
6761
|
style.borderTopStyle = "solid";
|
|
6755
|
-
style.borderTopColor = (
|
|
6762
|
+
style.borderTopColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
|
|
6756
6763
|
}
|
|
6757
|
-
if (((
|
|
6764
|
+
if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderBottomWidth) {
|
|
6758
6765
|
style.borderBottomStyle = "solid";
|
|
6759
|
-
style.borderBottomColor = (
|
|
6766
|
+
style.borderBottomColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
|
|
6760
6767
|
}
|
|
6761
6768
|
return style;
|
|
6762
6769
|
}
|
|
@@ -8121,14 +8128,15 @@ class PartManager {
|
|
|
8121
8128
|
const defaultPartPropertyEditors = () => {
|
|
8122
8129
|
return {
|
|
8123
8130
|
"readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
|
|
8124
|
-
"text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-
|
|
8125
|
-
"number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-
|
|
8126
|
-
"
|
|
8131
|
+
"text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BcsUyRxP.js")),
|
|
8132
|
+
"number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-TTgo0zbQ.js")),
|
|
8133
|
+
"boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-C7-iSAtn.js")),
|
|
8134
|
+
"multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-yHnhkc9I.js")),
|
|
8127
8135
|
"select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
|
|
8128
|
-
"color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-
|
|
8129
|
-
"image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-
|
|
8130
|
-
"html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-
|
|
8131
|
-
"youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-
|
|
8136
|
+
"color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-D7_bQLN4.js")),
|
|
8137
|
+
"image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-CeAWWLQE.js")),
|
|
8138
|
+
"html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BSfmWiwq.js")),
|
|
8139
|
+
"youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-Bn0DdIOD.js"))
|
|
8132
8140
|
};
|
|
8133
8141
|
};
|
|
8134
8142
|
const getPropertyValueOfParts = (parts, propertyName) => {
|
|
@@ -8368,11 +8376,7 @@ const locateRight = (style, top, height) => {
|
|
|
8368
8376
|
style.height = height || "";
|
|
8369
8377
|
};
|
|
8370
8378
|
const getLayoutDirection = (isMobilePage, properties) => {
|
|
8371
|
-
|
|
8372
|
-
return properties && properties.directionSm || "vertical";
|
|
8373
|
-
} else {
|
|
8374
|
-
return properties && properties.directionLg || "horizontal";
|
|
8375
|
-
}
|
|
8379
|
+
return properties && properties.direction || (isMobilePage ? "vertical" : "horizontal");
|
|
8376
8380
|
};
|
|
8377
8381
|
const _export_sfc = (sfc, props) => {
|
|
8378
8382
|
const target = sfc.__vccOpts || sfc;
|
|
@@ -11940,14 +11944,8 @@ const layoutGroup = () => {
|
|
|
11940
11944
|
caption: "Layout",
|
|
11941
11945
|
properties: [
|
|
11942
11946
|
{
|
|
11943
|
-
propertyName: "
|
|
11944
|
-
caption: "
|
|
11945
|
-
propertyType: "select",
|
|
11946
|
-
params: "vertical,horizontal"
|
|
11947
|
-
},
|
|
11948
|
-
{
|
|
11949
|
-
propertyName: "directionLg",
|
|
11950
|
-
caption: "Direction for PC (> 768px)",
|
|
11947
|
+
propertyName: "direction",
|
|
11948
|
+
caption: "Layout",
|
|
11951
11949
|
propertyType: "select",
|
|
11952
11950
|
params: "vertical,horizontal"
|
|
11953
11951
|
},
|
|
@@ -11966,10 +11964,50 @@ const alignGroup = () => {
|
|
|
11966
11964
|
caption: "Align",
|
|
11967
11965
|
properties: [
|
|
11968
11966
|
{
|
|
11969
|
-
propertyName: "
|
|
11970
|
-
caption: "Align",
|
|
11967
|
+
propertyName: "alignItems",
|
|
11968
|
+
caption: "Align Items",
|
|
11969
|
+
propertyType: "select",
|
|
11970
|
+
params: "start,center,end"
|
|
11971
|
+
},
|
|
11972
|
+
{
|
|
11973
|
+
propertyName: "justifyContent",
|
|
11974
|
+
caption: "Justify Content",
|
|
11975
|
+
propertyType: "select",
|
|
11976
|
+
params: "start,center,end,between"
|
|
11977
|
+
},
|
|
11978
|
+
{
|
|
11979
|
+
propertyName: "alignSelf",
|
|
11980
|
+
caption: "Align Self",
|
|
11981
|
+
propertyType: "select",
|
|
11982
|
+
params: "start,center,end"
|
|
11983
|
+
}
|
|
11984
|
+
]
|
|
11985
|
+
};
|
|
11986
|
+
};
|
|
11987
|
+
const alignItemsGroup = () => {
|
|
11988
|
+
return {
|
|
11989
|
+
groupName: "align",
|
|
11990
|
+
caption: "Align",
|
|
11991
|
+
properties: [
|
|
11992
|
+
{
|
|
11993
|
+
propertyName: "alignItems",
|
|
11994
|
+
caption: "Align Items",
|
|
11971
11995
|
propertyType: "select",
|
|
11972
|
-
params: "
|
|
11996
|
+
params: "start,center,end"
|
|
11997
|
+
}
|
|
11998
|
+
]
|
|
11999
|
+
};
|
|
12000
|
+
};
|
|
12001
|
+
const alignSelfGroup = () => {
|
|
12002
|
+
return {
|
|
12003
|
+
groupName: "align",
|
|
12004
|
+
caption: "Align",
|
|
12005
|
+
properties: [
|
|
12006
|
+
{
|
|
12007
|
+
propertyName: "alignSelf",
|
|
12008
|
+
caption: "Align Self",
|
|
12009
|
+
propertyType: "select",
|
|
12010
|
+
params: ",start,center,end"
|
|
11973
12011
|
}
|
|
11974
12012
|
]
|
|
11975
12013
|
};
|
|
@@ -12051,7 +12089,7 @@ const defaultPropertyGroups = () => {
|
|
|
12051
12089
|
return [layoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
|
|
12052
12090
|
};
|
|
12053
12091
|
const defaultWidgetPropertyGroups = () => {
|
|
12054
|
-
return [
|
|
12092
|
+
return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
|
|
12055
12093
|
};
|
|
12056
12094
|
const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
12057
12095
|
__name: "PbContainerWidget",
|
|
@@ -12102,13 +12140,13 @@ const pageParts = [
|
|
|
12102
12140
|
}
|
|
12103
12141
|
]
|
|
12104
12142
|
},
|
|
12105
|
-
|
|
12143
|
+
alignItemsGroup(),
|
|
12106
12144
|
paddingGroup(),
|
|
12107
12145
|
backgroundGroup(),
|
|
12108
12146
|
commonGroup()
|
|
12109
12147
|
],
|
|
12110
12148
|
initialProperties: {
|
|
12111
|
-
|
|
12149
|
+
alignItems: "center"
|
|
12112
12150
|
},
|
|
12113
12151
|
allowsChild: () => true,
|
|
12114
12152
|
creator: () => _sfc_main$l
|
|
@@ -12125,9 +12163,9 @@ const sectionParts = [
|
|
|
12125
12163
|
...defaultPropertyGroups()
|
|
12126
12164
|
],
|
|
12127
12165
|
initialProperties: {
|
|
12128
|
-
|
|
12129
|
-
|
|
12130
|
-
|
|
12166
|
+
direction: "horizontal",
|
|
12167
|
+
alignItems: "start",
|
|
12168
|
+
justifyContent: "start"
|
|
12131
12169
|
},
|
|
12132
12170
|
allowsChild: () => true,
|
|
12133
12171
|
creator: () => _sfc_main$l
|
|
@@ -12144,9 +12182,9 @@ const blockParts = [
|
|
|
12144
12182
|
...defaultPropertyGroups()
|
|
12145
12183
|
],
|
|
12146
12184
|
initialProperties: {
|
|
12147
|
-
|
|
12148
|
-
|
|
12149
|
-
|
|
12185
|
+
direction: "vertical",
|
|
12186
|
+
alignItems: "start",
|
|
12187
|
+
justifyContent: "start"
|
|
12150
12188
|
},
|
|
12151
12189
|
allowsChild: () => true,
|
|
12152
12190
|
creator: () => _sfc_main$n
|
|
@@ -12430,7 +12468,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
|
|
|
12430
12468
|
let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
|
|
12431
12469
|
const openWidgetAddModal = (modal, args, callback) => {
|
|
12432
12470
|
modal.openModal({
|
|
12433
|
-
component: defineAsyncComponent(() => import("./PbWidgetAddModal-
|
|
12471
|
+
component: defineAsyncComponent(() => import("./PbWidgetAddModal-BzG-lkZp.js")),
|
|
12434
12472
|
style: {
|
|
12435
12473
|
width: "80%",
|
|
12436
12474
|
height: "80%",
|
|
@@ -14333,7 +14371,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
14333
14371
|
};
|
|
14334
14372
|
}
|
|
14335
14373
|
});
|
|
14336
|
-
const canvasStyle = '.pb-page-wrapper {\n margin: 0 auto;\n padding: 0;\n}\n\n.pb-page {\n
|
|
14374
|
+
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 margin: 0 auto;\n width: 100%;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.pb-page .pb-page-content.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-page * {\n box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n width: 100%;\n height: 100%;\n min-height: 200px;\n position: relative;\n}\n\n.pb-add-widget-button button {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 8px;\n background: none;\n border: none;\n cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n font-size: 1rem;\n vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n font-size: 1rem;\n vertical-align: middle;\n margin-left: 0.4rem;\n}\n\n.pb-section {\n display: flex;\n position: relative;\n width: 100%;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n outline: 1px dashed #ccc;\n background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n content: "";\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n outline: none;\n}\n\n.pb-block {\n display: flex;\n min-width: 1px;\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget {\n position: relative;\n outline: 1px dashed #ccc;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n pointer-events: auto !important;\n}\n\n.pb-widget * {\n pointer-events: none;\n}\n\n.pb-widget.selected::before {\n content: "";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid #4998f8;\n z-index: 999;\n pointer-events: none;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-widget .pan-handle {\n position: absolute;\n left: -6px;\n top: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: move;\n pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n position: absolute;\n right: -6px;\n bottom: -6px;\n width: 12px;\n height: 12px;\n background-color: #27ae60;\n cursor: nwse-resize;\n pointer-events: auto !important;\n}\n\n.pb-widget {\n position: relative;\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n}\n\n.pb-widget .children {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.pb-text-widget {\n width: 100%;\n height: fit-content;\n}\n\n.pb-text-widget .text {\n color: #333;\n}\n\n.pb-text-widget .placeholder {\n padding: 4px 0;\n font-size: 18px;\n text-align: center;\n color: #999;\n}\n\n.pb-image-widget {\n width: 100%;\n}\n\n.pb-image-widget .image {\n width: 100%;\n}\n\n.pb-image-widget .placeholder {\n height: 100px;\n background-color: #eee;\n text-align: center;\n}\n\n.pb-image-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\n.font-icon {\n font-family: Material Symbols Outlined, monospace;\n font-size: 1rem;\n max-width: 1em;\n}\n\nhtml, body {\n font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n font-size: 12px;\n}\n\nbody {\n margin: 0;\n padding: 0;\n background-color: #aaa;\n overflow: hidden;\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 left: 50%;\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 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}';
|
|
14337
14375
|
const _hoisted_1$2 = ["height", "width"];
|
|
14338
14376
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
14339
14377
|
__name: "PbPageFrame",
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
import { PartProperty } from './model/part-property.ts';
|
|
2
|
+
|
|
1
3
|
export { default as PageBuilderEditor } from './PageBuilderEditor.vue';
|
|
4
|
+
export type { PartProperty };
|
|
2
5
|
export * from './model/event';
|
|
3
6
|
export * from './model/plugin';
|
|
4
7
|
export * from '@g1cloud/page-builder-viewer';
|
|
@@ -7,6 +7,8 @@ export declare const paddingGroup: () => PartPropertyGroup;
|
|
|
7
7
|
export declare const commonGroup: () => PartPropertyGroup;
|
|
8
8
|
export declare const layoutGroup: () => PartPropertyGroup;
|
|
9
9
|
export declare const alignGroup: () => PartPropertyGroup;
|
|
10
|
+
export declare const alignItemsGroup: () => PartPropertyGroup;
|
|
11
|
+
export declare const alignSelfGroup: () => PartPropertyGroup;
|
|
10
12
|
export declare const backgroundGroup: () => PartPropertyGroup;
|
|
11
13
|
export declare const borderGroup: () => PartPropertyGroup;
|
|
12
14
|
export declare const defaultPropertyGroups: () => PartPropertyGroup[];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { IPart } from '@g1cloud/page-builder-viewer';
|
|
2
2
|
import { Component } from 'vue';
|
|
3
3
|
|
|
4
|
-
export type PartPropertyType = 'readonly-text' | 'text' | 'number' | 'multiline-text' | 'select' | string;
|
|
4
|
+
export type PartPropertyType = 'readonly-text' | 'text' | 'number' | 'boolean' | 'multiline-text' | 'select' | string;
|
|
5
5
|
export type PartPropertyEditor = (property: PartProperty, parts: IPart[]) => Component | undefined;
|
|
6
6
|
export type PartProperty = {
|
|
7
7
|
propertyName: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, t, v, x, y, z, A, C } from "./index-
|
|
1
|
+
import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, t, v, x, y, z, A, C } from "./index-BaB2TtF-.js";
|
|
2
2
|
export {
|
|
3
3
|
B as BLOCK_TYPE,
|
|
4
4
|
b as Block,
|