From f44afc5e7ad7a4450a9cc91b95e9aaa4e8eddd35 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 18 Dec 2024 21:19:54 +0000
Subject: [PATCH] [5.x] Fix replicator preview for Group fields (#11280)

Co-authored-by: Jason Varga <jason@pixelfear.com>
---
 resources/js/components/fieldtypes/GroupFieldtype.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/GroupFieldtype.vue b/resources/js/components/fieldtypes/GroupFieldtype.vue
index eed9be0c3e..93427060df 100644
--- a/resources/js/components/fieldtypes/GroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/GroupFieldtype.vue
@@ -30,10 +30,12 @@
                                 :errors="errors(field.handle)"
                                 :field-path="fieldPath(field.handle)"
                                 :read-only="isReadOnly"
+                                :show-field-previews="config.replicator_preview"
                                 @updated="updated(field.handle, $event)"
                                 @meta-updated="updateMeta(field.handle, $event)"
                                 @focus="$emit('focus')"
                                 @blur="$emit('blur')"
+                                @replicator-preview-updated="previewUpdated(field.handle, $event)"
                             />
                         </div>
                     </div>
@@ -57,11 +59,13 @@
 import Fieldtype from './Fieldtype.vue';
 import SetField from './replicator/Field.vue';
 import { ValidatesFieldConditions } from '../field-conditions/FieldConditions.js';
+import ManagesPreviewText from "./replicator/ManagesPreviewText";
 
 export default {
     mixins: [
         Fieldtype,
         ValidatesFieldConditions,
+        ManagesPreviewText,
     ],
     components: { SetField },
     data() {
@@ -69,6 +73,7 @@ export default {
             containerWidth: null,
             focused: false,
             fullScreenMode: false,
+            previews: {},
             provide: {
                 group: this.makeGroupProvide(),
                 storeName: this.storeName,
@@ -86,7 +91,7 @@ export default {
         replicatorPreview() {
             if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
 
-            return Object.values(this.value).join(', ');
+            return replicatorPreviewHtml(this.previewText);
         },
         internalFieldActions() {
             return [
@@ -150,6 +155,10 @@ export default {
             this.$emit('meta-updated', { ...this.meta, [handle]: value });
         },
 
+        previewUpdated(handle, value) {
+            this.previews = { ...this.previews, [handle]: value };
+        },
+
         fieldPath(handle) {
             return (this.fieldPathPrefix || this.handle) + '.' + handle;
         },