Feature: Tabs 9.1 (ID-frei, modern/vertikal) + Form Builder + Repeater-Demos

CHANGELOG.md

@@ -1,6 +1,36 @@
 # MForm - REDAXO Addon für Modul-Input-Formulare
-#
-# Version 9.0.1
+
+## Version 9.1.0
+
+### Neu
+
+- **Tabs als ID-freie Implementierung** – `addTabElement()` funktioniert jetzt stabil in verschachtelten und dynamischen Kontexten (z. B. FlexRepeater, Fieldset, Collapse, Modal), ohne Bootstrap-ID-Verkabelung und ohne Kollisionen zwischen geklonten Instanzen.
+- **Optionale Tab-Modernisierung** – Tab-Navigation kann optional als modernisierte Variante gerendert werden über `tab-style => 'modern'` bzw. `data-group-tab-style => 'modern'`.
+- **Optionale vertikale Tab-Navigation** – Tabs können optional links neben dem Inhalt dargestellt werden über `tab-layout => 'vertical'` bzw. `data-group-tab-layout => 'vertical'` (inkl. Mobile-Fallback auf gestapelte Ansicht).
+- **Font-Awesome-Icons je Tab** – Icon-Unterstützung über `tab-icon` bleibt erhalten und funktioniert weiterhin in den neuen Tab-Varianten.
+- **Form Builder erweitert (Issue #403, 9.1 Scope)** – neue Palette-/Generator-Unterstützung für `addColorSwatchField()`, `addToggleCheckboxField()`, `addModalElement()` sowie Alert-Elemente (`addAlertInfo/Warning/Danger/Success`).
+
+### Verbesserungen
+
+- **ColorSwatch-UX im Form Builder** – zusätzliche Hilfe im Eigenschaften-Panel, Beispiel-Palette per Klick und erweiterte Options-Syntax für CSS-Klassen-Swatches mit optionaler Preview-Farbe (z. B. `.text-primary=Primaer CSS|#2f77bc`).
+- **Palette-Suche im Form Builder** – Live-Filter über Feld- und Wrapper-Typen inkl. Alias-Suche (z. B. `color`, `alert`, `link`) und Leerzustand-Hinweis bei keinen Treffern.
+- **Schneller Fokus auf die Suche** – `/` fokussiert direkt das Suchfeld in der Palette.
+- **Bessere Übersicht bei langen Listen** – Feld- und Wrapper-Liste haben jetzt eine maximale Höhe mit eigenem Scrollbereich in der linken Palette.
+- **Barrierefreiheit bei Tabs verbessert** – ARIA-Zustände und Verknüpfungen wurden für Standard-Tabs und Repeater-Tabs ergänzt (`aria-selected`, `aria-controls`, `aria-labelledby`).
+
+### Behoben
+
+- **Tab-Active-Class im Parser** – fehlendes Leerzeichen beim Anhängen von `active` korrigiert, damit bestehende Klassen nicht zu ungültigen Tokens zusammenlaufen.
+- **Dokubeispiele korrigiert** – fehlerhafte Beispiele in der Wrapper-/Repeater-Doku angepasst (`addCheckboxField`-Parameter, `addTextAreaField`-Methodenname).
+
+### Kompatibilität
+
+- Standardverhalten bleibt unverändert: Ohne neue Attribute bleiben Tabs visuell und funktional wie bisher.
+- Bestehende Module mit `addTabElement()` bleiben kompatibel.
+
+---
+
+## Version 9.0.1
 
 ### Behoben
 

assets/css/formbuilder.css

@@ -206,6 +206,35 @@ body.rex-theme-dark .mform-fb {
     padding: 0;
 }
 
+.mform-fb__field-list[data-fb-palette] {
+    max-height: 52vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 4px;
+}
+
+.mform-fb__field-list[data-fb-palette-wrap] {
+    max-height: 24vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 4px;
+}
+
+.mform-fb__palette-search {
+    margin: 0 0 10px;
+}
+
+.mform-fb__palette-search .form-control {
+    height: 34px;
+    font-size: 13px;
+}
+
+.mform-fb__palette-empty {
+    margin: 8px 0 0;
+    color: var(--fb-text-faint);
+    font-size: 12px;
+}
+
 .mform-fb__pal-item {
     background: var(--fb-bg-item);
     border: 1px solid var(--fb-border-strong);
@@ -486,6 +515,18 @@ body.rex-theme-dark .mform-fb {
     color: var(--fb-text-faint);
 }
 
+.mform-fb__colorswatch-help {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
+.mform-fb__colorswatch-help code {
+    display: inline;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
 /* ---- Code Output --------------------------------------------------------- */
 .mform-fb__code-bar {
     display: flex;

assets/css/mform.css

@@ -29,6 +29,116 @@
     background: #fff;
 }
 
+.mform .mform-tabs {
+    --mform-tab-nav-bg: #f7f9fc;
+    --mform-tab-nav-border: #dfe5ee;
+    --mform-tab-content-bg: #ffffff;
+    --mform-tab-content-border: #dfe5ee;
+    --mform-tab-link-color: #48586b;
+    --mform-tab-link-active-bg: #ffffff;
+    --mform-tab-link-active-color: #1d2e40;
+    --mform-tab-link-hover-bg: #eef3f8;
+}
+
+.mform .mform-tabs.mform-tabs--modern > .nav-tabs {
+    border-bottom: 1px solid var(--mform-tab-nav-border);
+    background: var(--mform-tab-nav-bg);
+    padding: 6px 6px 0;
+}
+
+.mform .mform-tabs.mform-tabs--modern > .nav-tabs > li > a {
+    border-radius: 8px 8px 0 0;
+    border: 1px solid transparent;
+    color: var(--mform-tab-link-color);
+    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
+}
+
+.mform .mform-tabs.mform-tabs--modern > .nav-tabs > li > a:hover,
+.mform .mform-tabs.mform-tabs--modern > .nav-tabs > li > a:focus {
+    background: var(--mform-tab-link-hover-bg);
+    color: var(--mform-tab-link-active-color);
+}
+
+.mform .mform-tabs.mform-tabs--modern > .nav-tabs > li.active > a,
+.mform .mform-tabs.mform-tabs--modern > .nav-tabs > li.active > a:hover,
+.mform .mform-tabs.mform-tabs--modern > .nav-tabs > li.active > a:focus {
+    background: var(--mform-tab-link-active-bg);
+    border-color: var(--mform-tab-content-border) var(--mform-tab-content-border) var(--mform-tab-link-active-bg);
+    color: var(--mform-tab-link-active-color);
+}
+
+.mform .mform-tabs.mform-tabs--modern > .tab-content {
+    border: 1px solid var(--mform-tab-content-border);
+    border-top: 0;
+    background: var(--mform-tab-content-bg);
+}
+
+.mform .mform-tabs.mform-tabs--vertical {
+    display: flex;
+    align-items: stretch;
+}
+
+.mform .mform-tabs.mform-tabs--vertical > .nav-tabs {
+    width: 240px;
+    min-width: 240px;
+    border-bottom: 0;
+    border-right: 1px solid var(--mform-tab-nav-border);
+    background: var(--mform-tab-nav-bg);
+    padding: 8px;
+}
+
+.mform .mform-tabs.mform-tabs--vertical > .nav-tabs > li {
+    float: none;
+    width: 100%;
+    margin-bottom: 4px;
+}
+
+.mform .mform-tabs.mform-tabs--vertical > .nav-tabs > li > a {
+    margin-right: 0;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    color: var(--mform-tab-link-color);
+}
+
+.mform .mform-tabs.mform-tabs--vertical > .nav-tabs > li > a:hover,
+.mform .mform-tabs.mform-tabs--vertical > .nav-tabs > li > a:focus {
+    background: var(--mform-tab-link-hover-bg);
+    color: var(--mform-tab-link-active-color);
+}
+
+.mform .mform-tabs.mform-tabs--vertical > .nav-tabs > li.active > a,
+.mform .mform-tabs.mform-tabs--vertical > .nav-tabs > li.active > a:hover,
+.mform .mform-tabs.mform-tabs--vertical > .nav-tabs > li.active > a:focus {
+    background: var(--mform-tab-link-active-bg);
+    border-color: var(--mform-tab-content-border);
+    color: var(--mform-tab-link-active-color);
+}
+
+.mform .mform-tabs.mform-tabs--vertical > .tab-content {
+    flex: 1;
+    border: 1px solid var(--mform-tab-content-border);
+    border-left: 0;
+    background: var(--mform-tab-content-bg);
+}
+
+@media (max-width: 767px) {
+    .mform .mform-tabs.mform-tabs--vertical {
+        display: block;
+    }
+
+    .mform .mform-tabs.mform-tabs--vertical > .nav-tabs {
+        width: auto;
+        min-width: 0;
+        border-right: 0;
+        border-bottom: 1px solid var(--mform-tab-nav-border);
+    }
+
+    .mform .mform-tabs.mform-tabs--vertical > .tab-content {
+        border-left: 1px solid var(--mform-tab-content-border);
+        border-top: 0;
+    }
+}
+
 .mform .mform-tabs.rex-page-nav:last-child {
     margin-bottom: 0;
 }
@@ -169,6 +279,17 @@ body.rex-theme-dark .mform .mform-tabs .nav-tabs {
     /*background-color: rgba(0, 0, 0, 0.15);*/
 }
 
+body.rex-theme-dark .mform .mform-tabs {
+    --mform-tab-nav-bg: #19222d;
+    --mform-tab-nav-border: #304050;
+    --mform-tab-content-bg: #202b35;
+    --mform-tab-content-border: #304050;
+    --mform-tab-link-color: #b9c7d6;
+    --mform-tab-link-active-bg: #202b35;
+    --mform-tab-link-active-color: #eef4fb;
+    --mform-tab-link-hover-bg: #243342;
+}
+
 body.rex-theme-dark .mform .mform-tabs .tab-content {
     background-color: #202b35;
 }
@@ -309,6 +430,17 @@ body.rex-theme-dark .mform .custom-link.input-group.is-empty input.form-control[
 }
 
 @media (prefers-color-scheme: dark) {
+    body.rex-has-theme:not(.rex-theme-light) .mform .mform-tabs {
+        --mform-tab-nav-bg: #19222d;
+        --mform-tab-nav-border: #304050;
+        --mform-tab-content-bg: #202b35;
+        --mform-tab-content-border: #304050;
+        --mform-tab-link-color: #b9c7d6;
+        --mform-tab-link-active-bg: #202b35;
+        --mform-tab-link-active-color: #eef4fb;
+        --mform-tab-link-hover-bg: #243342;
+    }
+
     body.rex-has-theme:not(.rex-theme-light) .mform .mform-tabs .nav-tabs {
         /*background-color: rgba(0, 0, 0, 0.15);*/
     }