Feature/tabs 9.1.0

CHANGELOG.md

@@ -1,6 +1,40 @@
 # 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
+
+- **Repeater-Decode mit Slot-ID** – `MFormRepeaterHelper::decode()` akzeptiert jetzt neben String-Payloads auch direkt numerische Value-Slots (z. B. `decode(1)`).
+- **Klare API für Slot-basierten Zugriff** – neue Methode `MFormRepeaterHelper::decodeById(int $valueId)` für die direkte Auflösung über den REDAXO-Value-Slot.
+- **Form Builder Output aktualisiert** – generierter Repeater-Output nutzt nun bevorzugt `MFormRepeaterHelper::decode(<slot>)` statt `decode('REX_VALUE[...]')`.
+- **Doku und Demo-Beispiele vereinheitlicht** – Repeater-Beispiele wurden auf die bevorzugte Slot-ID-Variante umgestellt, die alte String-Nutzung bleibt kompatibel.
+- **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/flex-repeater.css

@@ -548,7 +548,7 @@ body.rex-theme-dark .mfr-btn-copy {
 
 .mfr-item-body.form-horizontal .mfr-field-group .control-label,
 .mfr-nested-body.form-horizontal .mfr-field-group .control-label {
-    word-break: break-word;
+    overflow-wrap: anywhere;
 }
 
 /* Vertical / Inline Layout: Label oben, Feld darunter, volle Breite. */

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,16 @@ body.rex-theme-dark .mform-fb {
     color: var(--fb-text-faint);
 }
 
+.mform-fb__colorswatch-help {
+    overflow-wrap: anywhere;
+}
+
+.mform-fb__colorswatch-help code {
+    display: inline;
+    white-space: normal;
+    overflow-wrap: anywhere;
+}
+
 /* ---- Code Output --------------------------------------------------------- */
 .mform-fb__code-bar {
     display: flex;

assets/css/list-widget.css

@@ -137,7 +137,7 @@
     flex-direction: column;
     align-items: flex-start;
     gap: .45rem;
-    word-break: break-word;
+    overflow-wrap: anywhere;
 }
 
 .mform-list-widget.mform-list-widget-medialist.is-grid-view .mform-list-item-media {

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);*/
     }

assets/js/flex-repeater.js

@@ -259,16 +259,35 @@
         const tag = field.tagName.toLowerCase();
         if (tag === 'input') {
             if (field.type === 'checkbox') {
-                const normalized = typeof value === 'string' ? value.trim().toLowerCase() : value;
-                field.checked = !(
-                    normalized === '' ||
-                    normalized === false ||
-                    normalized === 0 ||
-                    normalized === '0' ||
-                    normalized === 'false' ||
-                    normalized === 'off' ||
-                    normalized === 'no'
-                );
+                if (typeof value === 'boolean') {
+                    field.checked = value;
+                    return;
+                }
+
+                // Multi-Checkbox-Werte werden kommasepariert gespeichert (z. B. "1,2").
+                let selectedValues = [];
+                if (Array.isArray(value)) {
+                    selectedValues = value.map(function (v) { return String(v); });
+                } else if (typeof value === 'string') {
+                    const normalized = value.trim().toLowerCase();
+                    if (
+                        normalized !== '' &&
+                        normalized !== '0' &&
+                        normalized !== 'false' &&
+                        normalized !== 'off' &&
+                        normalized !== 'no'
+                    ) {
+                        selectedValues = value
+                            .split(',')
+                            .map(function (v) { return v.trim(); })
+                            .filter(function (v) { return v !== ''; });
+                    }
+                } else if (value !== 0 && value !== false && value !== '') {
+                    selectedValues = [String(value)];
+                }
+
+                const currentValue = String(field.value || '1');
+                field.checked = selectedValues.includes(currentValue);
                 return;
             }
             if (field.type === 'radio') {
@@ -299,12 +318,24 @@
      */
     function collectItemData(itemEl) {
         const data = {};
+        const checkboxValues = {};
 
         itemEl.querySelectorAll('[data-mfr-field]').forEach(function (field) {
             // Felder in nested Repeatern überspringen
             if (field.closest('.mfr-nested-repeater')) return;
 
             const key = field.dataset.mfrField;
+
+            if (field.tagName.toLowerCase() === 'input' && field.type === 'checkbox') {
+                if (!Array.isArray(checkboxValues[key])) {
+                    checkboxValues[key] = [];
+                }
+                if (field.checked) {
+                    checkboxValues[key].push(String(field.value || '1'));
+                }
+                return;
+            }
+
             const val = getFieldValue(field);
 
             if (val === null) {
@@ -315,6 +346,10 @@
             data[key] = val;
         });
 
+        Object.keys(checkboxValues).forEach(function (key) {
+            data[key] = checkboxValues[key].join(',');
+        });
+
         // Nested Repeater
         itemEl.querySelectorAll(':scope .mfr-nested-repeater').forEach(function (nested) {
             if (nested.closest('.mfr-item') !== itemEl) return; // nur direkte Kind-Nested
@@ -335,15 +370,32 @@
         if (!list) return items;
         list.querySelectorAll(':scope > .mfr-nested-item').forEach(function (nestedItem) {
             const itemData = {};
+            const checkboxValues = {};
             nestedItem.querySelectorAll('[data-mfr-field]').forEach(function (field) {
                 const key = field.dataset.mfrField;
+
+                if (field.tagName.toLowerCase() === 'input' && field.type === 'checkbox') {
+                    if (!Array.isArray(checkboxValues[key])) {
+                        checkboxValues[key] = [];
+                    }
+                    if (field.checked) {
+                        checkboxValues[key].push(String(field.value || '1'));
+                    }
+                    return;
+                }
+
                 const val = getFieldValue(field);
                 if (val === null) {
                     if (itemData[key] === undefined) itemData[key] = '';
                     return;
                 }
                 itemData[key] = val;
             });
+
+            Object.keys(checkboxValues).forEach(function (key) {
+                itemData[key] = checkboxValues[key].join(',');
+            });
+
             items.push(itemData);
         });
         return items;