feature to display as list in detail

README.md

@@ -43,6 +43,7 @@ public function fields(Request $request){
 | `setMultiselectProps`         | Array           | []         | this method allows you to set properties for the [vue multiselect component](https://vue-multiselect.js.org/#sub-props)                                                                                                                            |
 | `dependsOn`                   | String, String  | null, null | This method allows you to depend on belongsto field, this make an auto query                                                                                                 |
 | `canSelectAll`                | String, Boolean | 'Select All', true | This method allows you to have a select all checkbox and display custom message                                                                                              |
+| `showAsListInDetail`          | Boolean         | true       | This method allows you to display as list in detail                                                                                             |
 
 - Method optionsLabel('columnName'), this method is when you don't have column 'name' in your table and you want to label by another column name. By default it tracks by label 'name'.
 
@@ -100,6 +101,13 @@ public function handle(ActionFields $fields, Collection $models)
      ->canSelectAll('Seleccionar Todo'),
 ```
 
+- Method showAsListInDetail(), This method allows you to change the default view to list in detail
+
+```php
+     BelongsToManyField::make('Participants', 'participant', 'App\Nova\Participant')
+     ->showAsListInDetail(),
+```
+
 ### Validations
 This package implement all Laravel Validations, you need to pass the rules in rules method, rules are listed on laravel validations rules for arrays*.
 

resources/js/components/DetailField.vue

@@ -1,6 +1,30 @@
 <template>
   <panel-item :field="field">
     <div slot="value">
+      <div v-if="field.showAsList">
+        <div class="relative rounded-lg bg-white shadow border border-60">
+          <div class="overflow-hidden rounded-b-lg rounded-t-lg">
+            <div class="border-b border-50 cursor-text font-mono text-sm py-2 px-4"
+                 v-for="(resource, key) in field.value"
+                 :key="key">
+              <router-link
+                :to="{
+                name: 'detail',
+                params: {
+                  resourceName: field.resourceNameRelationship,
+                  resourceId: resource.id,
+                },
+              }"
+                class="no-underline dim text-primary font-bold"
+                v-if="field.viewable"
+              >{{resource[field.optionsLabel]}}
+              </router-link>
+              <span v-else>{{resource[field.optionsLabel]}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>
       <span v-for="(resource, key) in field.value" class="single">
         <router-link
           :to="{
@@ -15,14 +39,20 @@
         >{{resource[field.optionsLabel]}}</router-link>
         <span v-else>{{resource[field.optionsLabel]}}</span>
       </span>
+      </div>
     </div>
   </panel-item>
 </template>
 
 <script>
-export default {
-  props: ["resource", "resourceName", "resourceId", "field"]
-};
+  export default {
+    props: ["resource", "resourceName", "resourceId", "field"],
+    mounted() {
+      if (this.field.showAsList) {
+        console.log(this.field)
+      }
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
@@ -31,4 +61,4 @@ export default {
       content: ', ';
     }
   }
-</style>
+</style>

src/BelongsToManyField.php

@@ -17,6 +17,7 @@ class BelongsToManyField extends Field
     public $messageSelectAll = 'Select All';
     public $height = '350px';
     public $viewable = true;
+    public $showAsList = false;
 
     /**
      * The field's component.
@@ -96,6 +97,11 @@ public function canSelectAll($messageSelectAll = 'Select All', $selectAll = true
       return $this->withMeta(['selectAll' => $this->selectAll, 'messageSelectAll' => $this->messageSelectAll]);
     }
 
+    public function showAsListInDetail($showAsList = true){
+        $this->showAsList = $showAsList;
+        return $this->withMeta(['showAsList' => $this->showAsList]);
+    }
+
     public function viewable($viewable = true)
     {
         $this->viewable = $viewable;