lib-pixelbuild 0.2.0 → 0.2.1
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/dist/builders/PageBuilder.js +2 -1
- package/dist/components/CardComponent.js +10 -4
- package/dist/components/MapComponent.js +1 -1
- package/dist/components/SliderComponent.js +3 -3
- package/dist/elements/ButtonElement.js +2 -1
- package/dist/elements/IconMap.js +2 -2
- package/dist/elements/InputElement.js +4 -3
- package/dist/layouts/Header.js +2 -4
- package/dist/renderers/SectionRenderer.js +5 -3
- package/dist/services/EmailService.js +3 -1
- package/package.json +2 -2
|
@@ -7,6 +7,7 @@ function mergeStyles(websiteStyles, pageStyles) {
|
|
|
7
7
|
for (const key of Object.keys(pageStyles)) {
|
|
8
8
|
const val = pageStyles[key];
|
|
9
9
|
if (val !== '' && val !== null && val !== undefined) {
|
|
10
|
+
;
|
|
10
11
|
merged[key] = val;
|
|
11
12
|
}
|
|
12
13
|
}
|
|
@@ -41,7 +42,7 @@ const PageBuilder = memo(function PageBuilder({ website, page, editionMode }) {
|
|
|
41
42
|
marginTop: toCssValue(mergedStyles.marginTop),
|
|
42
43
|
marginBottom: toCssValue(mergedStyles.marginBottom),
|
|
43
44
|
borderRadius: toCssValue(mergedStyles.borderRadius),
|
|
44
|
-
minHeight: page.sections.length === 0 ? '200px' : undefined
|
|
45
|
+
minHeight: page.sections.length === 0 ? '200px' : undefined
|
|
45
46
|
}), [mergedStyles, page.sections.length]);
|
|
46
47
|
return (_jsxs(Suspense, { fallback: _jsx("div", { children: website.properties.loadingMessage }), children: [!editionMode && (_jsxs(Helmet, { children: [_jsx("title", { children: page.title }), _jsx("meta", { name: "description", content: page.title }), _jsx("meta", { property: "og:title", content: page.title }), _jsx("meta", { property: "og:description", content: page.title }), _jsx("meta", { property: "og:image", content: page.title })] })), _jsxs("div", { style: pageStyle, children: [_jsx(SectionRenderer, { sections: page.sections, editionMode: editionMode }), page.sections.length === 0 && editionMode && (_jsx("div", { style: { padding: '40px', textAlign: 'center', color: '#94a3b8' }, children: "No sections configured. Use the layout editor to add content." }))] })] }));
|
|
47
48
|
});
|
|
@@ -38,7 +38,7 @@ const CardComponent = memo(function CardComponent({ component }) {
|
|
|
38
38
|
cardTitleColor: properties === null || properties === void 0 ? void 0 : properties.cardTitleColor,
|
|
39
39
|
cardTitleSize: properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
|
|
40
40
|
cardTextColor: properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
|
|
41
|
-
cardTextSize: properties === null || properties === void 0 ? void 0 : properties.cardTextSize
|
|
41
|
+
cardTextSize: properties === null || properties === void 0 ? void 0 : properties.cardTextSize
|
|
42
42
|
}), [
|
|
43
43
|
properties === null || properties === void 0 ? void 0 : properties.cardElement1,
|
|
44
44
|
properties === null || properties === void 0 ? void 0 : properties.cardElement2,
|
|
@@ -49,14 +49,14 @@ const CardComponent = memo(function CardComponent({ component }) {
|
|
|
49
49
|
properties === null || properties === void 0 ? void 0 : properties.cardTitleColor,
|
|
50
50
|
properties === null || properties === void 0 ? void 0 : properties.cardTitleSize,
|
|
51
51
|
properties === null || properties === void 0 ? void 0 : properties.cardTextColor,
|
|
52
|
-
properties === null || properties === void 0 ? void 0 : properties.cardTextSize
|
|
52
|
+
properties === null || properties === void 0 ? void 0 : properties.cardTextSize
|
|
53
53
|
]);
|
|
54
54
|
const orderedElements = useMemo(() => {
|
|
55
55
|
const cardOrder = [
|
|
56
56
|
cardProps.cardElement1,
|
|
57
57
|
cardProps.cardElement2,
|
|
58
58
|
cardProps.cardElement3,
|
|
59
|
-
cardProps.cardElement4
|
|
59
|
+
cardProps.cardElement4
|
|
60
60
|
].filter((v) => typeof v === 'string' && v.length > 0);
|
|
61
61
|
if (cardOrder.length > 0) {
|
|
62
62
|
return cardOrder
|
|
@@ -64,7 +64,13 @@ const CardComponent = memo(function CardComponent({ component }) {
|
|
|
64
64
|
.filter((el) => el !== undefined);
|
|
65
65
|
}
|
|
66
66
|
return orderBySort(component.elements);
|
|
67
|
-
}, [
|
|
67
|
+
}, [
|
|
68
|
+
cardProps.cardElement1,
|
|
69
|
+
cardProps.cardElement2,
|
|
70
|
+
cardProps.cardElement3,
|
|
71
|
+
cardProps.cardElement4,
|
|
72
|
+
component.elements
|
|
73
|
+
]);
|
|
68
74
|
const elements = useMemo(() => orderedElements.map((el) => applyCardStyles(el, cardProps)), [orderedElements, cardProps]);
|
|
69
75
|
return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
|
|
70
76
|
});
|
|
@@ -64,7 +64,7 @@ function InteractiveSliderComponent({ component }) {
|
|
|
64
64
|
display: 'flex',
|
|
65
65
|
alignItems: 'center',
|
|
66
66
|
justifyContent: 'center',
|
|
67
|
-
transition: 'background 0.2s'
|
|
67
|
+
transition: 'background 0.2s'
|
|
68
68
|
}, children: _jsx("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", children: _jsx("path", { d: "M8.5 1L1.5 8L8.5 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("button", { type: "button", "aria-label": "Proximo slide", onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(instanceRef.current.track.details.rel + 1); }, style: {
|
|
69
69
|
position: 'absolute',
|
|
70
70
|
right: 8,
|
|
@@ -84,7 +84,7 @@ function InteractiveSliderComponent({ component }) {
|
|
|
84
84
|
display: 'flex',
|
|
85
85
|
alignItems: 'center',
|
|
86
86
|
justifyContent: 'center',
|
|
87
|
-
transition: 'background 0.2s'
|
|
87
|
+
transition: 'background 0.2s'
|
|
88
88
|
}, children: _jsx("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", children: _jsx("path", { d: "M1.5 1L8.5 8L1.5 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })), showDots && (_jsx("div", { "aria-label": "Navegacao do slider", style: { display: 'flex', justifyContent: 'center', gap: 6, marginTop: 12 }, children: slides.map((element, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": currentSlide === index ? 'true' : undefined, onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(index); }, style: {
|
|
89
89
|
width: 28,
|
|
90
90
|
height: 28,
|
|
@@ -99,7 +99,7 @@ function InteractiveSliderComponent({ component }) {
|
|
|
99
99
|
display: 'flex',
|
|
100
100
|
alignItems: 'center',
|
|
101
101
|
justifyContent: 'center',
|
|
102
|
-
transition: 'all 0.2s'
|
|
102
|
+
transition: 'all 0.2s'
|
|
103
103
|
}, children: index + 1 }, element.id))) }))] }));
|
|
104
104
|
}
|
|
105
105
|
export function SliderComponent({ component, editionMode = false }) {
|
|
@@ -56,6 +56,7 @@ export function ButtonElement({ element, formId }) {
|
|
|
56
56
|
if (hidden)
|
|
57
57
|
return null;
|
|
58
58
|
const buttonType = properties.type === 'button' || properties.type === 'submit' || properties.type === 'reset'
|
|
59
|
-
? properties.type
|
|
59
|
+
? properties.type
|
|
60
|
+
: undefined;
|
|
60
61
|
return (_jsx(ElementColWrapper, { element: element, children: _jsx(Button, { as: properties.path ? 'a' : 'button', type: buttonType, variant: getString(properties, 'variant', buttonType ? 'primary' : getString(properties, 'type', 'primary')), href: getString(properties, 'path'), target: properties.path ? '_blank' : undefined, rel: properties.path ? 'noopener noreferrer' : undefined, disabled: loading, onClick: handleClick, style: element.styles, children: loading ? (_jsxs(_Fragment, { children: [_jsx("output", { "aria-busy": "true", children: _jsx(Spinner, { as: "span", animation: "border", size: "sm", "aria-hidden": "true" }) }), ' ' + getString(properties, 'message')] })) : (getString(properties, 'text') || getString(properties, 'title')) }) }));
|
|
61
62
|
}
|
package/dist/elements/IconMap.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FaArrowRight, FaBars, FaCalendar, FaCheck, FaChevronLeft, FaChevronRight, FaClock, FaEnvelope, FaFacebookF, FaGlobe, FaHeart, FaHome, FaInfoCircle, FaInstagram, FaLink, FaMapMarkerAlt, FaPhone, FaQuestionCircle, FaQuoteLeft, FaSearch, FaShoppingCart, FaStar, FaTimes, FaTwitter, FaUser, FaWhatsapp, FaYoutube
|
|
1
|
+
import { FaArrowRight, FaBars, FaCalendar, FaCheck, FaChevronLeft, FaChevronRight, FaClock, FaEnvelope, FaFacebookF, FaGlobe, FaHeart, FaHome, FaInfoCircle, FaInstagram, FaLink, FaMapMarkerAlt, FaPhone, FaQuestionCircle, FaQuoteLeft, FaSearch, FaShoppingCart, FaStar, FaTimes, FaTwitter, FaUser, FaWhatsapp, FaYoutube } from 'react-icons/fa';
|
|
2
2
|
export const iconMap = {
|
|
3
3
|
FaArrowRight,
|
|
4
4
|
FaBars,
|
|
@@ -26,5 +26,5 @@ export const iconMap = {
|
|
|
26
26
|
FaTwitter,
|
|
27
27
|
FaUser,
|
|
28
28
|
FaWhatsapp,
|
|
29
|
-
FaYoutube
|
|
29
|
+
FaYoutube
|
|
30
30
|
};
|
|
@@ -59,7 +59,8 @@ export function InputElement({ element, formId }) {
|
|
|
59
59
|
const setCheckedValue = (checked, value) => {
|
|
60
60
|
const store = UseFormStore.getState();
|
|
61
61
|
if (checked && element.elementType === ElementTypeEnum.Radio && name && resolvedFormId !== undefined) {
|
|
62
|
-
store
|
|
62
|
+
store
|
|
63
|
+
.getElementsByForm(resolvedFormId)
|
|
63
64
|
.filter((field) => field.id !== element.id && field.type === ElementTypeEnum.Radio && field.name === name)
|
|
64
65
|
.forEach((field) => store.setElementState(field.id, { value: '' }));
|
|
65
66
|
}
|
|
@@ -75,12 +76,12 @@ export function InputElement({ element, formId }) {
|
|
|
75
76
|
const data = typeof option === 'object' && option !== null ? option : null;
|
|
76
77
|
const value = String((_a = data === null || data === void 0 ? void 0 : data.value) !== null && _a !== void 0 ? _a : option);
|
|
77
78
|
const text = String((_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.label) !== null && _b !== void 0 ? _b : data === null || data === void 0 ? void 0 : data.text) !== null && _c !== void 0 ? _c : data === null || data === void 0 ? void 0 : data.title) !== null && _d !== void 0 ? _d : value);
|
|
78
|
-
return _jsx("option", { value: value, children: text }, `${value}-${index}`);
|
|
79
|
+
return (_jsx("option", { value: value, children: text }, `${value}-${index}`));
|
|
79
80
|
}) }));
|
|
80
81
|
}
|
|
81
82
|
if (element.elementType === ElementTypeEnum.Checkbox || element.elementType === ElementTypeEnum.Radio) {
|
|
82
83
|
const value = getString(properties, 'value', 'on');
|
|
83
|
-
return (_jsxs("div", { className: "form-check", children: [_jsx("input", { id: controlId, type: element.elementType, defaultChecked: getBoolean(properties, 'checked'), value: value, onChange: (e) => setCheckedValue(e.target.checked, value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `form-check-input${error ? ' is-invalid' : ''}`, style: element.styles }), label && _jsx("label", { className: "form-check-label", htmlFor: controlId, children: label })] }));
|
|
84
|
+
return (_jsxs("div", { className: "form-check", children: [_jsx("input", { id: controlId, type: element.elementType, defaultChecked: getBoolean(properties, 'checked'), value: value, onChange: (e) => setCheckedValue(e.target.checked, value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `form-check-input${error ? ' is-invalid' : ''}`, style: element.styles }), label && (_jsx("label", { className: "form-check-label", htmlFor: controlId, children: label }))] }));
|
|
84
85
|
}
|
|
85
86
|
if (element.elementType === ElementTypeEnum.File) {
|
|
86
87
|
return (_jsx("div", { className: "alert alert-secondary", role: "status", style: element.styles, children: "File upload not available in this form." }));
|
package/dist/layouts/Header.js
CHANGED
|
@@ -7,9 +7,7 @@ export function Header({ website, imageBaseUrl }) {
|
|
|
7
7
|
const headerStyles = website.header.styles;
|
|
8
8
|
const domain = (website.domain || '').replaceAll('.', '');
|
|
9
9
|
const location = useLocation();
|
|
10
|
-
const menuPages = useMemo(() => (website.pages || [])
|
|
11
|
-
.filter((p) => p.menu === true)
|
|
12
|
-
.sort((a, b) => (a.menuOrder || 0) - (b.menuOrder || 0)), [website.pages]);
|
|
10
|
+
const menuPages = useMemo(() => (website.pages || []).filter((p) => p.menu === true).sort((a, b) => (a.menuOrder || 0) - (b.menuOrder || 0)), [website.pages]);
|
|
13
11
|
const isActive = useCallback((path) => {
|
|
14
12
|
const currentPath = location.pathname;
|
|
15
13
|
if (path === '/')
|
|
@@ -30,7 +28,7 @@ export function Header({ website, imageBaseUrl }) {
|
|
|
30
28
|
margin: '0 12px',
|
|
31
29
|
paddingBottom: '4px',
|
|
32
30
|
borderBottom: active ? '2px solid #c0ad5b' : '2px solid transparent',
|
|
33
|
-
transition: 'color 0.3s, border-color 0.3s'
|
|
31
|
+
transition: 'color 0.3s, border-color 0.3s'
|
|
34
32
|
}, children: p.title }, p.id));
|
|
35
33
|
}) }) })] }))] }) }));
|
|
36
34
|
}
|
|
@@ -24,7 +24,8 @@ const GridRenderer = memo(function GridRenderer({ section, editionMode }) {
|
|
|
24
24
|
const grid = gridClass(section.id);
|
|
25
25
|
const columns = useMemo(() => section.columns.filter((col) => col.components.some((c) => c.enabled) || col.childSections.length > 0), [section.columns]);
|
|
26
26
|
const css = useMemo(() => {
|
|
27
|
-
const rules = columns
|
|
27
|
+
const rules = columns
|
|
28
|
+
.map((column) => {
|
|
28
29
|
const properties = column.properties || {};
|
|
29
30
|
const row = Math.max(0, Number(properties.row) || 0);
|
|
30
31
|
const rowSpan = Math.max(1, Number(properties.rowSpan) || 1);
|
|
@@ -37,7 +38,8 @@ const GridRenderer = memo(function GridRenderer({ section, editionMode }) {
|
|
|
37
38
|
`@media (min-width:576px){.${grid} .${columnClass}{grid-column:span ${sm}}}`,
|
|
38
39
|
`@media (min-width:768px){.${grid} .${columnClass}{grid-column:span ${md};grid-row:${row + 1}/span ${rowSpan}}}`
|
|
39
40
|
].join('');
|
|
40
|
-
})
|
|
41
|
+
})
|
|
42
|
+
.join('');
|
|
41
43
|
return `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}${rules}`;
|
|
42
44
|
}, [grid, columns]);
|
|
43
45
|
return (_jsxs(_Fragment, { children: [_jsx("style", { children: css }), _jsx("div", { id: `section-${section.id}`, className: grid, style: section.sectionType === 'row' ? section.styles : undefined, children: columns.map((column) => (_jsx("div", { id: `column-${column.id}`, className: gridClass(column.id), style: column.styles, children: _jsx(ColumnContent, { column: column, editionMode: editionMode }) }, column.id))) })] }));
|
|
@@ -51,7 +53,7 @@ const SectionContent = memo(function SectionContent({ section, editionMode }) {
|
|
|
51
53
|
return (_jsx(Row, { id: `section-${section.id}`, style: section.sectionType === 'row' ? section.styles : undefined, children: section.columns.map((column) => (_jsx(ColumnRenderer, { column: column, editionMode: editionMode }, column.id))) }));
|
|
52
54
|
}, [usesGrid, section, editionMode]);
|
|
53
55
|
if (section.sectionType === 'container-fluid') {
|
|
54
|
-
return _jsx(Container, { fluid: true, style: section.styles, children: content });
|
|
56
|
+
return (_jsx(Container, { fluid: true, style: section.styles, children: content }));
|
|
55
57
|
}
|
|
56
58
|
if (section.sectionType === 'container') {
|
|
57
59
|
return _jsx(Container, { style: section.styles, children: content });
|
|
@@ -37,7 +37,9 @@ class EmailService {
|
|
|
37
37
|
`CPF: ${(_d = document === null || document === void 0 ? void 0 : document.value) !== null && _d !== void 0 ? _d : ''}`,
|
|
38
38
|
`E-mail: ${(_e = email === null || email === void 0 ? void 0 : email.value) !== null && _e !== void 0 ? _e : ''}`,
|
|
39
39
|
`Celular: ${(_f = phone === null || phone === void 0 ? void 0 : phone.value) !== null && _f !== void 0 ? _f : ''}`
|
|
40
|
-
]
|
|
40
|
+
]
|
|
41
|
+
.filter(Boolean)
|
|
42
|
+
.join('\n')
|
|
41
43
|
};
|
|
42
44
|
}
|
|
43
45
|
}
|