Collapsed Preview Attribute

composer.json

@@ -21,8 +21,8 @@
         "php": "^7.3|^8.0",
         "ext-json": "*",
         "laravel/framework": "^8.0|^9.0|^10.0|^11.0",
-        "laravel/nova": "^4.0",
-        "nova-kit/nova-packages-tool": "^1.3.1"
+        "laravel/nova": "^4.34",
+        "nova-kit/nova-packages-tool": "^1.16"
     },
     "autoload": {
         "psr-4": {

resources/js/components/FormGroup.vue

@@ -25,7 +25,7 @@
 
                     <p class="text-80 grow px-4">
                       <span class="mr-3 font-semibold">#{{ index + 1 }}</span>
-                      {{ group.title }}
+                      {{ group.title }}<span v-if="collapsedPreview !== null">: <span class="mr-3 font-semibold">{{ truncate(collapsedPreview, 30) }}</span></span>
                     </p>
 
                     <div class="flex" v-if="!readonly">
@@ -85,6 +85,7 @@
                     :mode="mode"
                     :show-help-text="item.helpText != null"
                     :class="{ 'remove-bottom-border': index == group.fields.length - 1 }"
+                    @change="handleFieldChanged($event, item)"
                 />
             </div>
         </div>
@@ -113,10 +114,21 @@ export default {
             removeMessage: false,
             collapsed: this.group.collapsed,
             readonly: this.group.readonly,
+            collapsedPreview: null,
         };
     },
 
     computed: {
+        collapsedPreviewAttribute() {
+            let collapsedPreviewAttribute = null;
+            for (const [key, layout] of Object.entries(this.field.layouts)) {
+                if (layout.name === this.group.name) {
+                    collapsedPreviewAttribute = layout.collapsedPreviewAttribute;
+                }
+            }
+
+            return collapsedPreviewAttribute;
+        },
         titleStyle() {
             let classes = ['border-t', 'border-r', 'border-l', 'border-gray-200', 'dark:border-gray-700', 'rounded-t-lg'];
 
@@ -142,7 +154,23 @@ export default {
         }
     },
 
+    mounted() {
+        Object.values(this.group.fields).forEach(field => {
+          let attribute = field.attribute.split('__').pop();
+          if (this.collapsedPreviewAttribute && attribute === this.collapsedPreviewAttribute) {
+            this.collapsedPreview = field.value;
+          }
+        });
+    },
+
     methods: {
+        truncate(value, length) {
+            if (value.length > length) {
+                return value.substring(0, length) + "...";
+            } else {
+                return value;
+            }
+        },
         /**
          * Move this group up
          */
@@ -187,7 +215,13 @@ export default {
          */
         collapse() {
             this.collapsed = true;
-        }
+        },
+
+        handleFieldChanged(event, item) {
+            if (item.attribute.split('__').pop() === this.collapsedPreviewAttribute) {
+                this.collapsedPreview = event.target.value;
+            }
+        },
     },
 }
 </script>

src/Layouts/Layout.php

@@ -66,6 +66,13 @@ class Layout implements LayoutInterface, JsonSerializable, ArrayAccess, Arrayabl
      */
     protected $fields;
 
+    /**
+     * The layout's preview attribute
+     *
+     * @var string
+     */
+    protected $collapsedPreviewAttribute;
+
     /**
      * The attributes that should be cast to native types.
      *
@@ -181,6 +188,16 @@ public function name()
         return $this->name;
     }
 
+    /**
+     * Retrieve the layout's collapsed preview attribute
+     *
+     * @return string
+     */
+    public function collapsedPreviewAttribute()
+    {
+        return $this->collapsedPreviewAttribute;
+    }
+
     /**
      * Retrieve the layout's title
      *
@@ -686,6 +703,7 @@ public function jsonSerialize()
             'name' => $this->name,
             'title' => $this->title,
             'fields' => $this->fields->jsonSerialize(),
+            'collapsedPreviewAttribute' => $this->collapsedPreviewAttribute(),
             'limit' => $this->limit,
         ];
     }