feat(form): flexContent-Option für Flex-Spalte im Formular-Inhalt

Der scrollbare Inhaltsbereich der Form kann bei Bedarf als Flex-Spalte
gerendert werden, damit Masken-Kinder den verbleibenden Platz füllen und
in sich scrollen können, statt die gesamte Maske scrollbar zu machen.
Wirkt nur zusammen mit stickyButtons (Default true).

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
gg committed 2026-09-27 10:09:09 +02:00
1 parent 32afb35840
commit 929664453e
1 file changed
+16 -1
+16 -1
View File
@@ -27,6 +27,13 @@ export interface iForm {
* übergeben; die aufrufende Maske ist für Styling und Callbacks
* verantwortlich. */
extrabuttons?: m.Child[]
/** Wenn true, wird der scrollbare Inhaltsbereich der Form als
* Flex-Spalte gerendert. Masken können dann einzelne Kinder mit
* flex-Styles ausstatten, z.B. einen Bereich, der den verbleibenden
* Platz füllt (flex: '01 1 auto' + 'min-height': '0') und in sich
* scrollt, statt die gesamte Maske scrollbar zu machen. Wirkt nur
* zusammen mit stickyButtons (Default true). */
flexContent?: boolean
}
export const Form:m.ClosureComponent<iForm> = (vnode) => {
@@ -126,6 +133,14 @@ export const Form:m.ClosureComponent<iForm> = (vnode) => {
// Container, die Buttons bleiben am unteren Rand fixiert. Das
// umschließende form-Element wird zum flex-Container, damit das
// Layout auch bei Fenstergrößenänderung stabil bleibt.
// Stil des scrollbaren Inhaltsbereichs; optional als Flex-Spalte
// (flexContent), damit Masken-Kinder den verbleibenden Platz
// füllen können.
const contentStyle: any = {flex: '1', 'overflow-y': 'auto', 'padding-right': '8px'}
if (vnode.attrs.flexContent === true) {
contentStyle.display = 'flex'
contentStyle['flex-direction'] = 'column'
}
if (stickyButtons) {
return m("form", {
style: {display: 'flex', 'flex-direction': 'column', height: '100%'},
@@ -146,7 +161,7 @@ export const Form:m.ClosureComponent<iForm> = (vnode) => {
}
},
// Scrollbarer Formular-Inhalt.
m("div", {style: {flex: '1', 'overflow-y': 'auto', 'padding-right': '8px'}},
m("div", {style: contentStyle},
vnode.children
),
// Fixierter Button-Bereich.