[4.x] Prevent handling field previews when previews are disabled (#9353)

resources/js/components/fieldtypes/ArrayFieldtype.vue

@@ -170,6 +170,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return _.reduce(this.value, (carry, value, key) => {
                 let str = `${key}: ${value}`;
                 if (carry) str = carry + ', ' + str;

resources/js/components/fieldtypes/ButtonGroupFieldtype.vue

@@ -28,6 +28,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             var option = _.findWhere(this.config.options, {value: this.value});
             return (option) ? option.label : this.value;
         },

resources/js/components/fieldtypes/CheckboxesFieldtype.vue

@@ -34,6 +34,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return this.values.map(value => {
                 const option = _.findWhere(this.options, { value });
                 return option ? option.label : value;

resources/js/components/fieldtypes/CodeFieldtype.vue

@@ -105,6 +105,8 @@ export default {
             return 'theme-' + this.config.theme;
         },
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return this.value.code ? truncate(this.value.code, 60) : '';
         },
         readOnlyOption() {

resources/js/components/fieldtypes/ColorFieldtype.vue

@@ -92,6 +92,8 @@ export default {
     computed: {
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return this.value
                 ? `<span class="little-dot" style="background-color:${this.value}"></span>`
                 : null;

resources/js/components/fieldtypes/DateFieldtype.vue

@@ -159,6 +159,7 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
             if (! this.value.date) return;
 
             if (this.isRange) {

resources/js/components/fieldtypes/Fieldtype.vue

@@ -21,6 +21,10 @@ export default {
             type: Boolean,
             default: false
         },
+        showFieldPreviews: {
+            type: Boolean,
+            default: false
+        },
         namePrefix: String,
         fieldPathPrefix: String,
     },
@@ -56,6 +60,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return this.value;
         },
 
@@ -71,6 +77,8 @@ export default {
         replicatorPreview: {
             immediate: true,
             handler(text) {
+                if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
                 this.$emit('replicator-preview-updated', text);
             }
         }

resources/js/components/fieldtypes/GroupFieldtype.vue

@@ -106,6 +106,8 @@ export default {
             return this.config.fields;
         },
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return Object.values(this.value).join(', ');
         }
     },

resources/js/components/fieldtypes/RadioFieldtype.vue

@@ -32,6 +32,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             var option = _.findWhere(this.config.options, {value: this.value});
             return (option) ? option.label : this.value;
         },

resources/js/components/fieldtypes/SelectFieldtype.vue

@@ -110,6 +110,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return this.selectedOptions.map(option => option.label).join(', ');
         },
 

resources/js/components/fieldtypes/TableFieldtype.vue

@@ -163,6 +163,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             // Join all values with commas. Exclude any empties.
             return _(this.data)
                 .map(row => row.value.cells.filter(cell => !!cell).join(', '))

resources/js/components/fieldtypes/ToggleFieldtype.vue

@@ -16,6 +16,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return (this.value ? '✓' : '✗') + ' ' + __(this.config.display);
         }
 

resources/js/components/fieldtypes/assets/AssetsFieldtype.vue

@@ -336,6 +336,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return replicatorPreviewHtml(_.map(this.assets, (asset) => {
                 return (asset.isImage || asset.isSvg) ?
                     `<img src="${asset.thumbnail}" width="20" height="20" title="${asset.basename}" />`

resources/js/components/fieldtypes/bard/BardFieldtype.vue

@@ -286,6 +286,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             const stack = JSON.parse(this.value);
             let text = '';
             while (stack.length) {

resources/js/components/fieldtypes/bard/Set.vue

@@ -44,6 +44,7 @@
                     :set-index="index"
                     :field-path="fieldPath(field)"
                     :read-only="isReadOnly"
+                    :show-field-previews="showFieldPreviews"
                     @updated="updated(field.handle, $event)"
                     @meta-updated="metaUpdated(field.handle, $event)"
                     @focus="focused"

resources/js/components/fieldtypes/grid/Grid.vue

@@ -136,6 +136,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return `${__(this.config.display)}: ${__n(':count row|:count rows', this.value.length)}`;
         }
 

resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue

@@ -692,6 +692,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return marked(this.data || '', { renderer: new PlainTextRenderer })
                 .replace(/<\/?[^>]+(>|$)/g, "");
         }

resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue

@@ -134,6 +134,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return this.value.map(id => {
                 const item = _.findWhere(this.meta.data, { id });
                 return item ? item.title : id;

resources/js/components/fieldtypes/replicator/Field.vue

@@ -23,6 +23,7 @@
             :field-path-prefix="fieldPath"
             :has-error="hasError || hasNestedError"
             :read-only="isReadOnly"
+            :show-field-previews="showFieldPreviews"
             @input="$emit('updated', $event)"
             @meta-updated="$emit('meta-updated', $event)"
             @focus="$emit('focus')"
@@ -69,6 +70,7 @@ export default {
             type: String
         },
         readOnly: Boolean,
+        showFieldPreviews: Boolean,
     },
 
     inject: ['storeName'],

resources/js/components/fieldtypes/replicator/Replicator.vue

@@ -172,6 +172,8 @@ export default {
         },
 
         replicatorPreview() {
+            if (! this.showFieldPreviews || ! this.config.replicator_preview) return;
+
             return `${__(this.config.display)}: ${__n(':count set|:count sets', this.value.length)}`;
         }
     },

resources/js/components/fieldtypes/replicator/Set.vue

@@ -44,6 +44,7 @@
                     :set-index="index"
                     :field-path="fieldPath(field)"
                     :read-only="isReadOnly"
+                    :show-field-previews="showFieldPreviews"
                     @updated="updated(field.handle, $event)"
                     @meta-updated="metaUpdated(field.handle, $event)"
                     @focus="$emit('focus')"