Feature/tabs 9.1.0

CHANGELOG.md

@@ -12,6 +12,10 @@
 
 ### 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.

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;

assets/js/formbuilder.js

@@ -126,6 +126,7 @@
 
         var state = [];
         var nextId = 1;
+        var STORAGE_KEY = 'mform.formbuilder.state.v1';
         // Klassische REDAXO-Module haben pro Slot-Typ ein Limit von 20 (REX_VALUE / REX_MEDIA / REX_LINK / ...).
         // Der Builder vergibt fortlaufende IDs; ueber 20 hinaus werden Werte ggf. nicht mehr persistiert.
         var MAX_FIELD_ID = 20;
@@ -256,6 +257,91 @@
             return null;
         }
 
+        function isContainerType(type) {
+            return type === 'repeater' || type === 'tab' || type === 'fieldset' || type === 'modal';
+        }
+
+        function sanitizeItem(raw) {
+            if (!raw || !raw.type || !TYPES[raw.type]) {
+                return null;
+            }
+
+            var item = JSON.parse(JSON.stringify(raw));
+            item.uid = (typeof item.uid === 'string' && item.uid !== '')
+                ? item.uid
+                : ('fb-' + (Math.random().toString(36).slice(2, 8)));
+
+            var parsedId = parseInt(item.id, 10);
+            item.id = Number.isFinite(parsedId) && parsedId > 0 ? parsedId : 1;
+
+            if (isContainerType(item.type)) {
+                var children = Array.isArray(item.children) ? item.children : [];
+                item.children = children
+                    .map(sanitizeItem)
+                    .filter(function (child) { return child !== null; });
+            } else {
+                item.children = null;
+            }
+
+            return item;
+        }
+
+        function collectMaxIdFromState(list) {
+            var max = 0;
+            (list || []).forEach(function (item) {
+                if (typeof item.id === 'number' && item.id > max) {
+                    max = item.id;
+                }
+                if (Array.isArray(item.children)) {
+                    var childMax = collectMaxIdFromState(item.children);
+                    if (childMax > max) {
+                        max = childMax;
+                    }
+                }
+            });
+            return max;
+        }
+
+        function persistBuilderState() {
+            try {
+                window.localStorage.setItem(STORAGE_KEY, JSON.stringify({ state: state }));
+            } catch (_e) {
+                // ignore storage failures (private mode / blocked storage)
+            }
+        }
+
+        function clearPersistedBuilderState() {
+            try {
+                window.localStorage.removeItem(STORAGE_KEY);
+            } catch (_e) {
+                // ignore storage failures
+            }
+        }
+
+        function restoreBuilderState() {
+            try {
+                var raw = window.localStorage.getItem(STORAGE_KEY);
+                if (!raw) {
+                    return;
+                }
+
+                var parsed = JSON.parse(raw);
+                if (!parsed || !Array.isArray(parsed.state)) {
+                    return;
+                }
+
+                var restored = parsed.state
+                    .map(sanitizeItem)
+                    .filter(function (item) { return item !== null; });
+
+                state = restored;
+                nextId = collectMaxIdFromState(state) + 1;
+                activeItem = null;
+            } catch (_e) {
+                // ignore malformed persisted data
+            }
+        }
+
         // Tree-aware: depth of the deepest nested repeater chain inside `item`.
         // Counts only repeater nesting (Tabs/Fieldsets sind UI-Wrapper und
         // zaehlen nicht als eigene Repeater-Ebene), aber traversiert dadurch).
@@ -700,6 +786,7 @@
             state = [];
             nextId = 1;
             activeItem = null;
+            clearPersistedBuilderState();
             renderProps();
             renderCanvas();
             emitCode();
@@ -1177,8 +1264,9 @@
 
         function emitCode() {
             if (state.length === 0) {
-                setCodeText($code, '// Noch keine Felder hinzugefuegt.');
-                setCodeText($output, '// Noch keine Felder hinzugefuegt.');
+                setCodeText($code, '<?php\n\n// Noch keine Felder hinzugefuegt.');
+                setCodeText($output, '<?php\n\n// Noch keine Felder hinzugefuegt.');
+                clearPersistedBuilderState();
                 var emptySlotMsg = document.querySelector('[data-fb-slot-warning]');
                 if (emptySlotMsg) {
                     emptySlotMsg.style.display = 'none';
@@ -1187,6 +1275,8 @@
                 return;
             }
             var lines = [];
+            lines.push('<?php');
+            lines.push('');
             lines.push('use FriendsOfRedaxo\\MForm;');
             lines.push('');
             lines.push('$mform = MForm::factory();');
@@ -1347,7 +1437,9 @@
             if (item.type !== 'select' && item.type !== 'radio' && item.type !== 'checkbox' && item.type !== 'checkboxgroup' && item.type !== 'togglecheckbox' && item.type !== 'colorswatch') {
                 return [];
             }
-            var opts = parseOptions(item.options || '');
+            var opts = item.type === 'colorswatch'
+                ? parseColorSwatches(item.options || '')
+                : parseOptions(item.options || '');
             if (!opts.length) return [];
             var lines = ['moegliche Werte:'];
             opts.forEach(function (o) {
@@ -1396,7 +1488,7 @@
             if (rowVar === 'row') {
                 lines.push(indent + '// Repeater' + lbl + ' \u2013 dekodierte Items als Array von Zeilen');
                 outputUses.repeaterHelper = true;
-                lines.push(indent + '$' + name + ' = MFormRepeaterHelper::decode("REX_VALUE[' + item.id + ']");');
+                lines.push(indent + '$' + name + ' = MFormRepeaterHelper::decode(' + item.id + ');');
                 lines.push(indent + 'foreach ($' + name + ' as $' + rowVar + ') {');
             } else {
                 lines.push(indent + '// verschachtelter Repeater' + lbl);
@@ -1473,7 +1565,7 @@
 
         function emitOutputCode() {
             if (state.length === 0) {
-                setCodeText($output, '// Noch keine Felder hinzugefuegt.');
+                setCodeText($output, '<?php\n\n// Noch keine Felder hinzugefuegt.');
                 return;
             }
             // Tracking, welche use-Statements wir brauchen.
@@ -1570,11 +1662,13 @@
                 head.push('');
             }
 
-            setCodeText($output, head.concat(body).join('\n').replace(/\n{3,}/g, '\n\n').trimEnd());
+            setCodeText($output, ['<?php', ''].concat(head, body).join('\n').replace(/\n{3,}/g, '\n\n').trimEnd());
+            persistBuilderState();
         }
 
         // ---- Init -----------------------------------------------------------
 
+        restoreBuilderState();
         renderCanvas();
         emitCode();
         initCodeViewers();

docs/03_customlink.md

@@ -271,7 +271,7 @@ Normalisiert definierte Link-Felder innerhalb einer Repeater-Liste in einem Schr
 use FriendsOfRedaxo\MForm\Repeater\MFormRepeaterHelper;
 use FriendsOfRedaxo\MForm\Utils\MFormOutputHelper;
 
-$items = MFormRepeaterHelper::decode('REX_VALUE[1]');
+$items = MFormRepeaterHelper::decode(1);
 
 // fuegt pro Feld `<feldname>_normalized` hinzu
 $items = MFormOutputHelper::normalizeRepeaterItems($items, ['link', 'cta']);

docs/07_repeater.md

@@ -42,7 +42,7 @@ echo $mform->show();
 use FriendsOfRedaxo\MForm\Repeater\MFormRepeaterHelper;
 
 // decode() filtert deaktivierte Items und entfernt __disabled automatisch
-$items = MFormRepeaterHelper::decode('REX_VALUE[2]');
+$items = MFormRepeaterHelper::decode(2);
 ?>
 
 <h1>REX_VALUE[1]</h1>
@@ -64,12 +64,12 @@ Ab Version 9 gibt es eine Kurzform für das Auslesen von Repeater-Werten:
 
 | Methode | Verwendung |
 |---------|-----------|
-| `decode(string $rexValue)` | **Empfohlen** – übernimmt JSON-Dekodierung, Entity-Dekodierung und Item-Filterung in einem Schritt. |
+| `decode(int\|string $source)` | **Empfohlen** – übernimmt Slot-Auflösung (bei `int`) sowie JSON-/Entity-Dekodierung und Item-Filterung in einem Schritt. |
 | `prepareItemsForOutput(array $items)` | Wenn der Array bereits dekodiert vorliegt (z. B. aus einer DB-Abfrage). |
 
 ```php
 // Neu (v9): kürzeste Form im Modul-Output
-$rows = MFormRepeaterHelper::decode('REX_VALUE[id=1]');
+$rows = MFormRepeaterHelper::decode(1);
 
 // Äquivalent mit prepareItemsForOutput (v8-kompatibel)
 $raw   = json_decode(html_entity_decode('REX_VALUE[id=1]', ENT_QUOTES | ENT_HTML5, 'UTF-8'), true) ?? [];
@@ -86,7 +86,7 @@ Nach dem Dekodieren stehen weitere Hilfsmethoden für typische Ausgabeszenarien
 <?php
 use FriendsOfRedaxo\MForm\Repeater\MFormRepeaterHelper;
 
-$items = MFormRepeaterHelper::decode('REX_VALUE[1]');
+$items = MFormRepeaterHelper::decode(1);
 
 // Nach Feldwert filtern
 $news = MFormRepeaterHelper::filterByField($items, 'category', 'news');
@@ -165,7 +165,7 @@ echo $mform->show();
 <?php
 use FriendsOfRedaxo\MForm\Repeater\MFormRepeaterHelper;
 
-$sections = MFormRepeaterHelper::decode('REX_VALUE[2]');
+$sections = MFormRepeaterHelper::decode(2);
 ?>
 
 <h1><?= rex_escape('REX_VALUE[1]') ?></h1>
@@ -413,7 +413,7 @@ echo $mform->show();
 use FriendsOfRedaxo\MForm\Repeater\MFormRepeaterHelper;
 use FriendsOfRedaxo\MForm\Utils\MFormOutputHelper;
 
-$items = MFormRepeaterHelper::decode('REX_VALUE[1]');
+$items = MFormRepeaterHelper::decode(1);
 
 // Einheitliche Link-Normalisierung fuer Repeater + Nicht-Repeater-Formate
 $items = MFormOutputHelper::normalizeRepeaterItems($items, ['link']);

docs/08_mblock_migration.md

@@ -62,7 +62,7 @@ echo MForm::factory()
 <?php
 use FriendsOfRedaxo\MForm\Repeater\MFormRepeaterHelper;
 
-$items = MFormRepeaterHelper::decode('REX_VALUE[id=1]');
+$items = MFormRepeaterHelper::decode(1);
 
 foreach ($items as $item) {
     echo '<h3>' . rex_escape($item['title'] ?? '') . '</h3>';
@@ -85,7 +85,7 @@ Beim Auslesen von Custom-Link-Feldern aus Repeater-Items kann der Wert je nach K
 use FriendsOfRedaxo\MForm\Repeater\MFormRepeaterHelper;
 use FriendsOfRedaxo\MForm\Utils\MFormOutputHelper;
 
-$items = MFormRepeaterHelper::decode('REX_VALUE[id=1]');
+$items = MFormRepeaterHelper::decode(1);
 
 // Option A: Normalisierung pro Link-Feld direkt bei der Ausgabe
 foreach ($items as $item) {
@@ -519,7 +519,7 @@ echo $main->show();
 use FriendsOfRedaxo\MForm\Repeater\MFormRepeaterHelper;
 use FriendsOfRedaxo\MForm\Utils\MFormOutputHelper;
 
-$cards = MFormRepeaterHelper::decode('REX_VALUE[id=1]');
+$cards = MFormRepeaterHelper::decode(1);
 
 foreach ($cards as $card) {
     $title = (string) ($card['header'] ?? '');