lib-pixelbuild 0.3.8 → 0.3.9
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.
|
@@ -5,6 +5,34 @@ import { PbRow } from '../ui/PbRow.js';
|
|
|
5
5
|
import { ElementFactory } from '../factories/ElementFactory.js';
|
|
6
6
|
import { orderBySort } from '../utils/orderBySort.js';
|
|
7
7
|
const elementFactory = new ElementFactory();
|
|
8
|
+
const INSET_STYLE_KEYS = new Set([
|
|
9
|
+
'borderColor',
|
|
10
|
+
'borderStyle',
|
|
11
|
+
'borderWidth',
|
|
12
|
+
'borderTopWidth',
|
|
13
|
+
'borderRightWidth',
|
|
14
|
+
'borderBottomWidth',
|
|
15
|
+
'borderLeftWidth',
|
|
16
|
+
'borderRadius',
|
|
17
|
+
'backgroundColor',
|
|
18
|
+
'backgroundImage',
|
|
19
|
+
'backgroundSize',
|
|
20
|
+
'backgroundPosition',
|
|
21
|
+
'boxShadow'
|
|
22
|
+
]);
|
|
23
|
+
function splitCardStyles(styles, inset) {
|
|
24
|
+
const container = {};
|
|
25
|
+
const body = {};
|
|
26
|
+
for (const [key, value] of Object.entries(styles !== null && styles !== void 0 ? styles : {})) {
|
|
27
|
+
if (inset && INSET_STYLE_KEYS.has(key)) {
|
|
28
|
+
body[key] = value;
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
container[key] = value;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return { container: container, body: body };
|
|
35
|
+
}
|
|
8
36
|
function applyCardStyles(element, props) {
|
|
9
37
|
const overrides = {};
|
|
10
38
|
if (element.elementType === 'icon') {
|
|
@@ -46,7 +74,10 @@ const CardComponent = memo(function CardComponent({ component }) {
|
|
|
46
74
|
cardTitleSize: properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
|
|
47
75
|
cardTextColor: properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
|
|
48
76
|
cardTextSize: properties === null || properties === void 0 ? void 0 : properties.cardTextSize,
|
|
49
|
-
cardElementGap: properties === null || properties === void 0 ? void 0 : properties.cardElementGap
|
|
77
|
+
cardElementGap: properties === null || properties === void 0 ? void 0 : properties.cardElementGap,
|
|
78
|
+
cardContentPadding: properties === null || properties === void 0 ? void 0 : properties.cardContentPadding,
|
|
79
|
+
cardContentAlign: properties === null || properties === void 0 ? void 0 : properties.cardContentAlign,
|
|
80
|
+
cardInsetBorder: properties === null || properties === void 0 ? void 0 : properties.cardInsetBorder
|
|
50
81
|
}), [
|
|
51
82
|
properties === null || properties === void 0 ? void 0 : properties.cardElement1,
|
|
52
83
|
properties === null || properties === void 0 ? void 0 : properties.cardElement2,
|
|
@@ -58,7 +89,10 @@ const CardComponent = memo(function CardComponent({ component }) {
|
|
|
58
89
|
properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
|
|
59
90
|
properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
|
|
60
91
|
properties === null || properties === void 0 ? void 0 : properties.cardTextSize,
|
|
61
|
-
properties === null || properties === void 0 ? void 0 : properties.cardElementGap
|
|
92
|
+
properties === null || properties === void 0 ? void 0 : properties.cardElementGap,
|
|
93
|
+
properties === null || properties === void 0 ? void 0 : properties.cardContentPadding,
|
|
94
|
+
properties === null || properties === void 0 ? void 0 : properties.cardContentAlign,
|
|
95
|
+
properties === null || properties === void 0 ? void 0 : properties.cardInsetBorder
|
|
62
96
|
]);
|
|
63
97
|
const orderedElements = useMemo(() => {
|
|
64
98
|
const cardOrder = [
|
|
@@ -84,19 +118,36 @@ const CardComponent = memo(function CardComponent({ component }) {
|
|
|
84
118
|
const layout = String((properties === null || properties === void 0 ? void 0 : properties.cardLayout) || 'stacked');
|
|
85
119
|
const rawGap = cardProps.cardElementGap;
|
|
86
120
|
const elementGap = rawGap === '' || rawGap == null ? '0' : String(rawGap);
|
|
121
|
+
const contentPadding = typeof cardProps.cardContentPadding === 'string' ? cardProps.cardContentPadding : '';
|
|
122
|
+
const insetBorder = cardProps.cardInsetBorder === true || cardProps.cardInsetBorder === 'true';
|
|
123
|
+
const contentAlign = typeof cardProps.cardContentAlign === 'string' && cardProps.cardContentAlign !== 'left'
|
|
124
|
+
? cardProps.cardContentAlign
|
|
125
|
+
: undefined;
|
|
126
|
+
const { containerStyle, bodyStyle } = useMemo(() => {
|
|
127
|
+
const { container, body } = splitCardStyles(component.styles, insetBorder);
|
|
128
|
+
if (contentPadding)
|
|
129
|
+
body.padding = contentPadding;
|
|
130
|
+
if (contentAlign)
|
|
131
|
+
body.textAlign = contentAlign;
|
|
132
|
+
return { containerStyle: container, bodyStyle: body };
|
|
133
|
+
}, [component.styles, insetBorder, contentPadding, contentAlign]);
|
|
87
134
|
const rowGapStyle = { gap: elementGap };
|
|
135
|
+
let content;
|
|
88
136
|
if (layout === 'icon-left' || layout === 'icon-right') {
|
|
89
137
|
const icon = elements.find((element) => element.elementType === 'icon');
|
|
90
138
|
const others = elements.filter((element) => element !== icon);
|
|
91
139
|
const iconBox = icon ? _jsx("div", { style: { flex: '0 0 auto' }, children: elementFactory.build(stripWidth(icon)) }) : null;
|
|
92
140
|
const contentBox = (_jsx("div", { style: { flex: '1 1 220px', minWidth: 0 }, children: others.map((element) => elementFactory.build(stripWidth(element))) }));
|
|
93
|
-
|
|
141
|
+
content = (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: elementGap, flexWrap: 'wrap' }, children: [layout === 'icon-left' ? iconBox : contentBox, layout === 'icon-left' ? contentBox : iconBox] }));
|
|
94
142
|
}
|
|
95
|
-
if (layout === 'icon-top') {
|
|
143
|
+
else if (layout === 'icon-top') {
|
|
96
144
|
const icon = elements.find((element) => element.elementType === 'icon');
|
|
97
145
|
const others = elements.filter((element) => element !== icon);
|
|
98
|
-
|
|
146
|
+
content = (_jsxs("div", { style: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: elementGap }, children: [icon && _jsx("div", { style: { display: 'inline-block' }, children: elementFactory.build(centerStyles(icon)) }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: elementGap }, children: others.map((element) => elementFactory.build(centerStyles(element))) })] }));
|
|
147
|
+
}
|
|
148
|
+
else {
|
|
149
|
+
content = (_jsx(PbRow, { id: "element-row", style: rowGapStyle, children: elements.map((element) => elementFactory.build(element)) }));
|
|
99
150
|
}
|
|
100
|
-
return (_jsx(PbContainer, {
|
|
151
|
+
return (_jsx(PbContainer, { "data-pb-component": component.id, style: containerStyle, children: _jsx("div", { style: bodyStyle, children: content }) }));
|
|
101
152
|
});
|
|
102
153
|
export { CardComponent };
|