[6.x] Error indicator for grid/replicator/bard based on id

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

@@ -212,10 +212,15 @@ export default {
                 bard: this.makeBardProvide(),
                 bardSets: this.config.sets,
             },
+            errorsById: {},
         };
     },
 
     computed: {
+        setFieldPathPrefix() {
+            return this.fieldPathPrefix ? `${this.fieldPathPrefix}.${this.handle}` : this.handle;
+        },
+
         toolbarIsFixed() {
             return this.config.toolbar_mode === 'fixed';
         },
@@ -277,16 +282,6 @@ export default {
             return this.publishContainer.site ?? this.$config.get('selectedSite');
         },
 
-        setsWithErrors() {
-            if (!this.publishContainer) return [];
-
-            return Object.values(this.setIndexes).filter((setIndex) => {
-                const prefix = `${this.fieldPathPrefix || this.handle}.${setIndex}.`;
-
-                return Object.keys(this.publishContainer.errors).some((key) => key.startsWith(prefix));
-            });
-        },
-
         replicatorPreview() {
             if (!this.showFieldPreviews || !this.config.replicator_preview) return;
             const stack = [...this.value];
@@ -423,6 +418,27 @@ export default {
         fullScreenMode() {
             this.initEditor();
         },
+
+        'publishContainer.errors': {
+            immediate: true,
+            handler(errors) {
+                this.errorsById = Object.entries(errors).reduce((acc, [key, value]) => {
+                    if (!key.startsWith(this.setFieldPathPrefix)) {
+                        return acc;
+                    }
+
+                    const subKey = key.replace(`${this.setFieldPathPrefix}.`, '');
+                    const setIndex = subKey.split('.').shift();
+                    const setId = this.value[setIndex]?.attrs.id;
+
+                    if (setId) {
+                        acc[setId] = value;
+                    }
+
+                    return acc;
+                }, {});
+            },
+        },
     },
 
     methods: {
@@ -750,6 +766,10 @@ export default {
             }
         },
 
+        setHasError(id) {
+            return this.errorsById.hasOwnProperty(id) && this.errorsById[id].length > 0;
+        },
+
         valueToContent(value) {
             return value.length ? { type: 'doc', content: value } : null;
         },

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

@@ -247,7 +247,7 @@ export default {
         },
 
         hasError() {
-            return this.extension.options.bard.setsWithErrors.includes(this.index);
+            return this.extension.options.bard.setHasError(this.node.attrs.id);
         },
 
         showFieldPreviews() {

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

@@ -28,6 +28,7 @@
                         :can-add-rows="canAddRows"
                         :allow-fullscreen="config.fullscreen"
                         :hide-display="config.hide_display"
+                        :errors="publishContainer.errors"
                         @updated="updated"
                         @meta-updated="updateRowMeta"
                         @removed="removed"

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

@@ -1,5 +1,5 @@
 <template>
-    <tr :class="[sortableItemClass, { 'opacity-50': isExcessive }]">
+    <tr :class="[sortableItemClass, { 'opacity-50': isExcessive, 'inset-ring-1 inset-ring-red': hasError }]">
         <td v-if="grid.isReorderable" class="drag-handle" :class="sortableHandleClass"></td>
 
         <FieldsProvider
@@ -70,6 +70,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        hasError: {
+            type: Boolean,
+            default: false,
+        },
     },
 
     inject: ['grid', 'sortableItemClass', 'sortableHandleClass'],

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

@@ -27,6 +27,7 @@
                     :values="row"
                     :meta="meta[row._id]"
                     :name="name"
+                    :has-error="rowHasError(row._id)"
                     :field-path-prefix="fieldPathPrefix"
                     :meta-path-prefix="metaPathPrefix"
                     :can-delete="canDeleteRows"

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

@@ -1,7 +1,8 @@
 <template>
     <div
         class="bg-white dark:bg-gray-850 rounded-xl ring ring-gray-300 dark:ring-x-0 dark:ring-b-0 dark:ring-gray-700 shadow-ui-md"
-        :class="[sortableItemClass, { 'opacity-50': isExcessive }]"
+        :class="[sortableItemClass, { 'opacity-50': isExcessive, 'ring-red-500': hasError }]"
+        :data-error="hasError ?? undefined"
     >
         <header class="bg-gray-50 dark:bg-gray-900 rounded-t-xl border-b border-gray-300 dark:border-gray-700 ps-4 pe-2 py-1.5 flex items-center justify-between">
             <ui-drag-handle :class="{ [sortableHandleClass]: grid.isReorderable }" />

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

@@ -31,6 +31,7 @@
                     :meta-path-prefix="metaPathPrefix"
                     :can-delete="canDeleteRows"
                     :can-add-rows="canAddRows"
+                    :has-error="rowHasError(row._id)"
                     @updated="(row, value) => $emit('updated', row, value)"
                     @meta-updated="$emit('meta-updated', row._id, $event)"
                     @duplicate="(row) => $emit('duplicate', row)"

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

@@ -1,9 +1,15 @@
 <script>
 export default {
-    props: ['fields', 'rows', 'meta', 'name', 'canDeleteRows', 'canAddRows', 'allowFullscreen', 'hideDisplay'],
+    props: ['fields', 'rows', 'meta', 'name', 'canDeleteRows', 'canAddRows', 'allowFullscreen', 'hideDisplay', 'errors'],
 
     inject: ['grid'],
 
+    data() {
+        return {
+            errorsById: {},
+        };
+    },
+
     computed: {
         sortableItemClass() {
             return `${this.name}-sortable-item`;
@@ -28,5 +34,38 @@ export default {
             sortableHandleClass: this.sortableHandleClass,
         };
     },
+
+    watch: {
+        errors: {
+            immediate: true,
+            handler(errors) {
+                this.errorsById = Object.entries(errors).reduce((acc, [key, value]) => {
+                    if (!key.startsWith(this.fieldPathPrefix)) {
+                        return acc;
+                    }
+
+                    const subKey = key.replace(`${this.fieldPathPrefix}.`, '');
+                    const rowIndex = subKey.split('.').shift();
+                    const rowId = this.rows[rowIndex]?._id;
+
+                    if (rowId) {
+                        acc[rowId] = value;
+                    }
+
+                    return acc;
+                }, {});
+            },
+        },
+    },
+
+    methods: {
+        rowHasError(id) {
+            if (Object.keys(this.errorsById).length === 0) {
+                return false;
+            }
+
+            return this.errorsById.hasOwnProperty(id) && this.errorsById[id].length > 0;
+        }
+    },
 };
 </script>

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

@@ -45,7 +45,7 @@
                                     :enabled="set.enabled"
                                     :read-only
                                     :can-add-set="canAddSet"
-                                    :has-error="setHasError(index)"
+                                    :has-error="setHasError(set._id)"
                                     :show-field-previews="config.previews"
                                     @collapsed="collapseSet(set._id)"
                                     @expanded="expandSet(set._id)"
@@ -108,6 +108,7 @@ export default {
             provide: {
                 replicatorSets: this.config.sets,
             },
+            errorsById: {},
         };
     },
 
@@ -264,10 +265,12 @@ export default {
             }, 1);
         },
 
-        setHasError(index) {
-            const prefix = `${this.fieldPathPrefix || this.handle}.${index}.`;
+        setHasError(id) {
+            if (Object.keys(this.errorsById).length === 0) {
+                return false;
+            }
 
-            return Object.keys(this.publishContainer.errors ?? []).some((handle) => handle.startsWith(prefix));
+            return this.errorsById.hasOwnProperty(id) && this.errorsById[id].length > 0;
         },
     },
 
@@ -291,6 +294,27 @@ export default {
         collapsed(collapsed) {
             this.updateMeta({ ...this.meta, collapsed: clone(collapsed) });
         },
+
+        'publishContainer.errors': {
+            immediate: true,
+            handler(errors) {
+                this.errorsById = Object.entries(errors).reduce((acc, [key, value]) => {
+                    if (!key.startsWith(this.setFieldPathPrefix)) {
+                        return acc;
+                    }
+
+                    const subKey = key.replace(`${this.setFieldPathPrefix}.`, '');
+                    const setIndex = subKey.split('.').shift();
+                    const setId = this.value[setIndex]?._id;
+
+                    if (setId) {
+                        acc[setId] = value;
+                    }
+
+                    return acc;
+                }, {});
+            },
+        },
     },
 };
 </script>

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

@@ -125,6 +125,7 @@ function destroy() {
         <div
             layout
             class="shadow-ui-sm relative z-2 w-full rounded-lg border border-gray-200 bg-white text-base dark:border-x-0 dark:border-t-0 dark:border-white/10 dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black"
+            :class="{ 'border-red-500': hasError }"
             :data-collapsed="collapsed ?? undefined"
             :data-error="hasError ?? undefined"
             :data-invalid="isInvalid ?? undefined"

resources/js/components/ui/Publish/Field.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useTemplateRef, watch } from 'vue';
+import { computed, useTemplateRef, watch, ref } from 'vue';
 import { injectContainerContext } from './Container.vue';
 import { injectFieldsContext } from './FieldsProvider.vue';
 import { Field, Icon, Tooltip, Label } from '@statamic/ui';
@@ -51,6 +51,7 @@ const meta = computed(() => {
     const key = [metaPathPrefix.value, handle].filter(Boolean).join('.');
     return data_get(containerMeta.value, key);
 });
+
 const errors = computed(() => containerErrors.value[fullPath.value]);
 const fieldId = computed(() => `field_${fullPath.value.replaceAll('.', '_')}`);
 const namePrefix = '';