Fixed isDirty state of entitydetail being shown properly.

resources/js/components/AttributeList.vue

@@ -441,8 +441,9 @@
                 if(state.attributeValues[e.attribute_id].moderation_edit_state == 'active') {
                     return;
                 }
-
-                context.emit('dirty', e);
+                const dirtyValues = getDirtyValues();
+                const isDirty = Object.keys(dirtyValues).length > 0;
+                context.emit('dirty', e, isDirty);
             };
             const resetListValues = _ => {
                 for(let k in attrRefs.value) {

resources/js/components/EntityDetail.vue

@@ -306,7 +306,7 @@
                         :metadata-addon="hasReferenceGroup"
                         :selections="state.entityTypeSelections"
                         :values="state.entity.data"
-                        @dirty="e => setFormState(e, tg.id)"
+                        @dirty="(e, isDirty) => setFormState(e, isDirty, tg.id)"
                         @metadata="showMetadata"
                     />
                 </form>
@@ -788,8 +788,8 @@
             const showTabActions = (grp, status) => {
                 state.attributeGrpHovered = status ? grp : null;
             };
-            const setFormState = (e, grp) => {
-                state.dirtyStates[grp] = e.dirty && e.valid;
+            const setFormState = (e, isDirty, grp) => {
+                state.dirtyStates[grp] = isDirty;
                 updateDependencyState(e.attribute_id, e.value);
             };
             const getDirtyValues = grp => {

resources/js/components/forms/indicators/DirtyStateIndicator.vue

@@ -0,0 +1,44 @@
+<template>
+    <div
+        class="dity-state-indicator"
+        :style="style"
+    />
+</template>
+
+<script>
+    import { computed } from 'vue';
+
+    export default {
+        props: {
+            value: {
+                type: Object,
+                required: true,
+            },
+        }, setup(props) {
+
+            const isDirty = computed(() => {
+                return props?.value?.meta?.dirty;
+            });
+
+
+            const isUnset = computed(() => {
+                return props?.value?.meta?.dirty == null;
+            });
+
+
+            const size = 10;
+            const style = computed(() => {
+                return {
+                    width: `${size}px`,
+                    height: `${size}px`,
+                    borderRadius: '50%',
+                    backgroundColor: isUnset.value ? 'red' : isDirty.value ? 'orange' : 'green',
+                };
+            });
+
+            return {
+                style
+            };
+        },
+    };
+</script>