@1urso/generic-editor 0.1.12 → 0.1.14

package/README.md

@@ -210,7 +210,8 @@ The output of `onSave` is a JSON ready to be stored.
     "sortProp": "nome",
     "sortOrder": "asc",
     "newestPosition": "bottom",
-    "scrollDirection": "down"
+    "scrollDirection": "down",
+    "containerHeight": 400 // Optional: Limits the list height (scrollable)
   }
 }
 ```

package/dist/editor/context.d.ts

@@ -16,6 +16,7 @@ export interface IListSettings {
     sortOrder: 'asc' | 'desc';
     newestPosition?: 'top' | 'bottom';
     scrollDirection?: 'up' | 'down';
+    containerHeight?: number;
 }
 export interface IProp {
     name: string;

package/dist/generic-editor.js

@@ -14329,13 +14329,13 @@ const Preview = () => {
 		})
 	});
 }, EditorSettings = () => {
-	let { state: s, updateListSettings: d, setCanvasHeight: w } = useEditor(), [k, F] = useState(""), [L, V] = useState("150");
+	let { state: s, updateListSettings: d, setCanvasHeight: w } = useEditor(), [k, F] = useState(""), [L, V] = useState("asc"), [U, K] = useState("bottom"), [q, J] = useState("down"), [$, pA] = useState("150"), [mA, hA] = useState("");
 	return useEffect(() => {
-		F(s.listSettings.sortProp || "__none__"), V(String(s.canvasHeight || 150));
-	}, [s.listSettings.sortProp, s.canvasHeight]), useEffect(() => {
-		let s = parseInt(L, 10);
+		F(s.listSettings.sortProp || "__none__"), V(s.listSettings.sortOrder || "asc"), K(s.listSettings.newestPosition || "bottom"), J(s.listSettings.scrollDirection || "down"), hA(s.listSettings.containerHeight ? String(s.listSettings.containerHeight) : ""), pA(String(s.canvasHeight || 150));
+	}, [s.listSettings, s.canvasHeight]), useEffect(() => {
+		let s = parseInt($, 10);
 		!isNaN(s) && s > 0 && w(s);
-	}, [L, w]), /* @__PURE__ */ jsxs(s$2, { children: [/* @__PURE__ */ jsx(n$2, { children: /* @__PURE__ */ jsxs(o, {
+	}, [$, w]), /* @__PURE__ */ jsxs(s$2, { children: [/* @__PURE__ */ jsx(n$2, { children: /* @__PURE__ */ jsxs(o, {
 		variant: "soft",
 		color: "gray",
 		style: {
@@ -14394,8 +14394,8 @@ const Preview = () => {
 								as: "div",
 								children: "Direção"
 							}), /* @__PURE__ */ jsxs(C, {
-								value: s.listSettings.sortOrder,
-								onValueChange: (s) => d({ sortOrder: s }),
+								value: L,
+								onValueChange: (s) => V(s),
 								children: [/* @__PURE__ */ jsx(u$2, {}), /* @__PURE__ */ jsxs(g, { children: [/* @__PURE__ */ jsx(v$1, {
 									value: "asc",
 									children: "Crescente (A-Z)"
@@ -14416,8 +14416,8 @@ const Preview = () => {
 									as: "div",
 									children: "Posição do Recente"
 								}), /* @__PURE__ */ jsxs(C, {
-									value: s.listSettings.newestPosition || "bottom",
-									onValueChange: (s) => d({ newestPosition: s }),
+									value: U,
+									onValueChange: (s) => K(s),
 									children: [/* @__PURE__ */ jsx(u$2, { style: { width: "100%" } }), /* @__PURE__ */ jsxs(g, { children: [/* @__PURE__ */ jsx(v$1, {
 										value: "top",
 										children: "Topo (Início)"
@@ -14434,8 +14434,8 @@ const Preview = () => {
 									as: "div",
 									children: "Comportamento de Rolagem"
 								}), /* @__PURE__ */ jsxs(C, {
-									value: s.listSettings.scrollDirection || "down",
-									onValueChange: (s) => d({ scrollDirection: s }),
+									value: q,
+									onValueChange: (s) => J(s),
 									children: [/* @__PURE__ */ jsx(u$2, { style: { width: "100%" } }), /* @__PURE__ */ jsxs(g, { children: [/* @__PURE__ */ jsx(v$1, {
 										value: "down",
 										children: "Descer (Padrão)"
@@ -14446,25 +14446,60 @@ const Preview = () => {
 								})]
 							})]
 						}),
-						/* @__PURE__ */ jsxs(p$1, { children: [
-							/* @__PURE__ */ jsx(p$2, {
-								size: "1",
-								mb: "1",
-								as: "div",
-								children: "Altura do Item da Lista (px)"
-							}),
-							/* @__PURE__ */ jsx(u, {
-								type: "number",
-								min: "10",
-								value: L,
-								onChange: (s) => V(s.target.value)
-							}),
-							/* @__PURE__ */ jsx(p$2, {
-								size: "1",
-								color: "gray",
-								children: "Define a altura visual de cada item na lista para referência."
-							})
-						] }),
+						/* @__PURE__ */ jsx(p$2, {
+							size: "2",
+							weight: "bold",
+							mt: "2",
+							children: "Dimensões"
+						}),
+						/* @__PURE__ */ jsxs(p, {
+							gap: "3",
+							align: "center",
+							children: [/* @__PURE__ */ jsxs(p$1, {
+								flexGrow: "1",
+								children: [
+									/* @__PURE__ */ jsx(p$2, {
+										size: "1",
+										mb: "1",
+										as: "div",
+										children: "Altura do Item (Template) (px)"
+									}),
+									/* @__PURE__ */ jsx(u, {
+										type: "number",
+										min: "10",
+										value: $,
+										onChange: (s) => pA(s.target.value)
+									}),
+									/* @__PURE__ */ jsx(p$2, {
+										size: "1",
+										color: "gray",
+										children: "Altura de cada item individual na lista."
+									})
+								]
+							}), /* @__PURE__ */ jsxs(p$1, {
+								flexGrow: "1",
+								children: [
+									/* @__PURE__ */ jsx(p$2, {
+										size: "1",
+										mb: "1",
+										as: "div",
+										children: "Altura da Lista (Container) (px)"
+									}),
+									/* @__PURE__ */ jsx(u, {
+										type: "number",
+										min: "0",
+										placeholder: "Auto (100%)",
+										value: mA,
+										onChange: (s) => hA(s.target.value)
+									}),
+									/* @__PURE__ */ jsx(p$2, {
+										size: "1",
+										color: "gray",
+										children: "Altura total da lista. Se exceder, rola. Vazio = 100%."
+									})
+								]
+							})]
+						}),
 						/* @__PURE__ */ jsx(p$2, {
 							size: "1",
 							color: "gray",
@@ -14483,7 +14518,14 @@ const Preview = () => {
 					children: "Cancelar"
 				}) }), /* @__PURE__ */ jsx(D$1, { children: /* @__PURE__ */ jsx(o, {
 					onClick: () => {
-						d({ sortProp: k === "__none__" ? "" : k });
+						let s = parseInt(mA, 10);
+						d({
+							sortProp: k === "__none__" ? "" : k,
+							sortOrder: L,
+							newestPosition: U,
+							scrollDirection: q,
+							containerHeight: !isNaN(s) && s > 0 ? s : void 0
+						});
 					},
 					children: "Salvar Alterações"
 				}) })]
@@ -14590,7 +14632,8 @@ var EditorContent = ({ layout: s, initialState: w, onSave: k, theme: F = "light"
 											isList: X.isList,
 											mockData: X.mockData,
 											singleMockData: X.singleMockData,
-											listSettings: X.listSettings
+											listSettings: X.listSettings,
+											canvasHeight: X.canvasHeight
 										};
 										k(JSON.stringify(s, null, 2));
 									}
@@ -14746,5 +14789,5 @@ const GenericEditor = (s) => /* @__PURE__ */ jsx(EditorProvider, {
 	availableProps: s.layout.props,
 	theme: s.theme,
 	children: /* @__PURE__ */ jsx(EditorContent, { ...s })
-}), generateHTML = (s, d, w = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(s, d, w), getRendererCode = () => "\n/**\n * Render Template\n * @param {Array} elements - The JSON configuration of elements\n * @param {Object|Array} data - The data object to inject (Object for single, Array for list)\n * @param {Object} options - { isList: boolean, listSettings: { sortProp: string, sortOrder: 'asc'|'desc', newestPosition: 'top'|'bottom', scrollDirection: 'up'|'down' }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n    const { isList, listSettings, canvasHeight } = options;\n\n    const camelToKebab = (string) => {\n        return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n    };\n\n    const styleObjectToString = (style) => {\n        if (!style) return '';\n        const pxProps = ['width', 'height', 'top', 'left', 'right', 'bottom', 'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth'];\n        \n        return Object.entries(style)\n            .map(([key, value]) => {\n                if (value === undefined || value === null) return '';\n                const cssKey = camelToKebab(key);\n                const cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n                return `${cssKey}: ${cssValue}`;\n            })\n            .filter(Boolean)\n            .join('; ');\n    };\n\n    const renderItem = (itemData, index = 0, offsetY = 0) => {\n        return elements.map(element => {\n            let content = element.content;\n            let imgSrc = '';\n\n            if (element.type === 'text') {\n                content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                    const val = itemData[key.trim()];\n                    return val !== undefined && val !== null ? String(val) : match;\n                });\n            } else if (element.type === 'image') {\n                 if (element.dataBinding) {\n                    const val = itemData[element.dataBinding];\n                    if (val !== undefined && val !== null) {\n                        imgSrc = String(val);\n                    } else {\n                        imgSrc = content;\n                    }\n                 } else {\n                     imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                        const val = itemData[key.trim()];\n                        return val !== undefined && val !== null ? String(val) : match;\n                    });\n                 }\n            }\n\n            const baseStyle = {\n                position: 'absolute',\n                left: element.x,\n                top: element.y + offsetY,\n                width: element.width,\n                height: element.height,\n                transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n                overflow: 'hidden',\n                ...element.style\n            };\n            \n            // Fix: remove padding if it's not explicitly set, or handle it for text\n            if (element.type === 'text' && !baseStyle.padding) {\n                // baseStyle.padding = '8px'; // Removed default padding to respect resize box\n            }\n            \n            const styleString = styleObjectToString(baseStyle);\n\n            if (element.type === 'text') {\n                return `<div style=\"${styleString}\">${content}</div>`;\n            } else if (element.type === 'image') {\n                const imgStyle = styleObjectToString({\n                    width: '100%',\n                    height: '100%',\n                    objectFit: element.style?.objectFit || 'cover',\n                    display: 'block'\n                });\n                return `<div style=\"${styleString}\"><img src=\"${imgSrc}\" alt=\"Element\" style=\"${imgStyle}\" /></div>`;\n            } else if (element.type === 'box') {\n                 return `<div style=\"${styleString}\"></div>`;\n            }\n            return '';\n        }).join('\\n');\n    };\n\n    if (isList && Array.isArray(data)) {\n        // Calculate item height\n        const itemHeight = canvasHeight || Math.max(...elements.map(el => el.y + el.height));\n\n        // Sort data\n        let listData = [...data];\n        if (listSettings && listSettings.sortProp) {\n            const prop = listSettings.sortProp;\n            const order = listSettings.sortOrder === 'asc' ? 1 : -1;\n            listData.sort((a, b) => {\n                const valA = a[prop];\n                const valB = b[prop];\n                if (valA < valB) return -1 * order;\n                if (valA > valB) return 1 * order;\n                return 0;\n            });\n        }\n        \n        // Handle newest position\n        if (listSettings && listSettings.newestPosition === 'top') {\n             listData.reverse();\n        }\n\n        // Generate HTML for all items\n        const itemsHtml = listData.map((item, index) => {\n             const itemHtml = renderItem(item, index, 0); \n             const itemContainerStyle = styleObjectToString({\n                 position: 'relative',\n                 height: itemHeight,\n                 width: '100%',\n                 marginBottom: 0\n             });\n             \n             return `<div class=\"list-item\" style=\"${itemContainerStyle}\">${itemHtml}</div>`;\n        }).join('\\n');\n\n        // Animation Styles based on settings\n        const scrollDirection = (listSettings && listSettings.scrollDirection) || 'down';\n        \n        const justify = (listSettings && listSettings.newestPosition === 'top') ? 'flex-start' : 'flex-end';\n\n        const animationCss = `\n            @keyframes slideIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\n            }\n            .list-wrapper {\n                display: flex;\n                flex-direction: column;\n                justify-content: ${justify};\n                height: 100%;\n                width: 100%;\n                overflow-y: auto;\n                overflow-x: hidden;\n                box-sizing: border-box;\n                padding: 10px;\n            }\n            .list-item {\n                flex-shrink: 0;\n                animation: slideIn 0.3s ease-out;\n                margin-bottom: 10px;\n                width: 100%;\n                position: relative;\n            }\n        `;\n\n        return `\n            <style>${animationCss}</style>\n            <div class=\"list-wrapper\">\n                ${itemsHtml}\n            </div>\n        `;\n    }\n\n    // Single Item\n    const contentHtml = renderItem(data);\n    return `<div style=\"position: relative; width: 100%; height: 100%; overflow: hidden;\">${contentHtml}</div>`;\n}\n";
+}), generateHTML = (s, d, w = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(s, d, w), getRendererCode = () => "\n/**\n * Render Template\n * @param {Array} elements - The JSON configuration of elements\n * @param {Object|Array} data - The data object to inject (Object for single, Array for list)\n * @param {Object} options - { isList: boolean, listSettings: { sortProp: string, sortOrder: 'asc'|'desc', newestPosition: 'top'|'bottom', scrollDirection: 'up'|'down' }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n    const { isList, listSettings, canvasHeight } = options;\n\n    const camelToKebab = (string) => {\n        return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n    };\n\n    const styleObjectToString = (style) => {\n        if (!style) return '';\n        const pxProps = ['width', 'height', 'top', 'left', 'right', 'bottom', 'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth'];\n        \n        return Object.entries(style)\n            .map(([key, value]) => {\n                if (value === undefined || value === null) return '';\n                const cssKey = camelToKebab(key);\n                const cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n                return `${cssKey}: ${cssValue}`;\n            })\n            .filter(Boolean)\n            .join('; ');\n    };\n\n    const renderItem = (itemData, index = 0, offsetY = 0) => {\n        return elements.map(element => {\n            let content = element.content;\n            let imgSrc = '';\n\n            if (element.type === 'text') {\n                content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                    const val = itemData[key.trim()];\n                    return val !== undefined && val !== null ? String(val) : match;\n                });\n            } else if (element.type === 'image') {\n                 if (element.dataBinding) {\n                    const val = itemData[element.dataBinding];\n                    if (val !== undefined && val !== null) {\n                        imgSrc = String(val);\n                    } else {\n                        imgSrc = content;\n                    }\n                 } else {\n                     imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                        const val = itemData[key.trim()];\n                        return val !== undefined && val !== null ? String(val) : match;\n                    });\n                 }\n            }\n\n            const baseStyle = {\n                position: 'absolute',\n                left: element.x,\n                top: element.y + offsetY,\n                width: element.width,\n                height: element.height,\n                transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n                overflow: 'hidden',\n                ...element.style\n            };\n            \n            // Fix: remove padding if it's not explicitly set, or handle it for text\n            if (element.type === 'text' && !baseStyle.padding) {\n                // baseStyle.padding = '8px'; // Removed default padding to respect resize box\n            }\n            \n            const styleString = styleObjectToString(baseStyle);\n\n            if (element.type === 'text') {\n                return `<div style=\"${styleString}\">${content}</div>`;\n            } else if (element.type === 'image') {\n                const imgStyle = styleObjectToString({\n                    width: '100%',\n                    height: '100%',\n                    objectFit: element.style?.objectFit || 'cover',\n                    display: 'block'\n                });\n                return `<div style=\"${styleString}\"><img src=\"${imgSrc}\" alt=\"Element\" style=\"${imgStyle}\" /></div>`;\n            } else if (element.type === 'box') {\n                 return `<div style=\"${styleString}\"></div>`;\n            }\n            return '';\n        }).join('\\n');\n    };\n\n    if (isList && Array.isArray(data)) {\n        // Calculate item height\n        const itemHeight = canvasHeight || Math.max(...elements.map(el => el.y + el.height));\n\n        // Sort data\n        let listData = [...data];\n        if (listSettings && listSettings.sortProp) {\n            const prop = listSettings.sortProp;\n            const order = listSettings.sortOrder === 'asc' ? 1 : -1;\n            listData.sort((a, b) => {\n                const valA = a[prop];\n                const valB = b[prop];\n                if (valA < valB) return -1 * order;\n                if (valA > valB) return 1 * order;\n                return 0;\n            });\n        }\n        \n        // Handle newest position\n        if (listSettings && listSettings.newestPosition === 'top') {\n             listData.reverse();\n        }\n\n        // Generate HTML for all items\n        const itemsHtml = listData.map((item, index) => {\n             const itemHtml = renderItem(item, index, 0); \n             const itemContainerStyle = styleObjectToString({\n                 position: 'relative',\n                 height: itemHeight,\n                 width: '100%',\n                 marginBottom: 0\n             });\n             \n             return `<div class=\"list-item\" style=\"${itemContainerStyle}\">${itemHtml}</div>`;\n        }).join('\\n');\n\n        // Animation Styles based on settings\n        const scrollDirection = (listSettings && listSettings.scrollDirection) || 'down';\n        const containerHeight = (listSettings && listSettings.containerHeight) ? listSettings.containerHeight + 'px' : '100%';\n        \n        const justify = (listSettings && listSettings.newestPosition === 'top') ? 'flex-start' : 'flex-end';\n\n        const animationCss = `\n            @keyframes slideIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\n            }\n            .list-wrapper {\n                display: flex;\n                flex-direction: column;\n                justify-content: ${justify};\n                height: ${containerHeight};\n                width: 100%;\n                overflow-y: auto;\n                overflow-x: hidden;\n                box-sizing: border-box;\n                padding: 10px;\n            }\n            .list-item {\n                flex-shrink: 0;\n                animation: slideIn 0.3s ease-out;\n                margin-bottom: 10px;\n                width: 100%;\n                position: relative;\n            }\n        `;\n\n        return `\n            <style>${animationCss}</style>\n            <div class=\"list-wrapper\">\n                ${itemsHtml}\n            </div>\n        `;\n    }\n\n    // Single Item\n    const contentHtml = renderItem(data);\n    return `<div style=\"position: relative; width: 100%; height: 100%; overflow: hidden;\">${contentHtml}</div>`;\n}\n";
 export { GenericEditor as EditorContent, generateHTML };