diff --git a/composer.json b/composer.json
index 22726d8e..9461bc7c 100644
--- a/composer.json
+++ b/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": {
diff --git a/resources/js/components/FormGroup.vue b/resources/js/components/FormGroup.vue
index cab6ad07..a25dc5c6 100644
--- a/resources/js/components/FormGroup.vue
+++ b/resources/js/components/FormGroup.vue
@@ -25,7 +25,7 @@
#{{ index + 1 }}
- {{ group.title }}
+ {{ group.title }}: {{ truncate(collapsedPreview, 30) }}
@@ -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)"
/>
@@ -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;
+ }
+ },
},
}
diff --git a/src/Layouts/Layout.php b/src/Layouts/Layout.php
index f324f9b8..18a4f1ff 100644
--- a/src/Layouts/Layout.php
+++ b/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,
];
}