Fix #81 - Add index fieldtype display

resources/js/ResponsiveFieldtypeIndex.vue

@@ -1,16 +1,32 @@
 <template>
-  <div>
-
+  <div class="text-2xs flex">
+    <a
+        v-for="asset in assets"
+        :key="asset.id"
+        :href="asset.url"
+        target="_blank"
+        :title="asset.breakpoint"
+    >
+      <asset-thumbnail :asset="asset" class="h-8 max-w-3xs -my-sm" />
+    </a>
   </div>
 </template>
 
 <script>
+import AssetThumbnail from '../../vendor/statamic/cms/resources/js/components/assets/Browser/Thumbnail.vue';
 
 export default {
   mixins: [IndexFieldtype],
+  components: {AssetThumbnail},
 
   computed: {
+    assets() {
+      if (this.value) {
+        return this.value.reverse();
+      }
 
+      return [];
+    }
   }
 };
 </script>

src/Fieldtypes/ResponsiveFields.php

@@ -103,7 +103,7 @@ public function getConfig(): array
                                 ? __('Sets how the image is fitted to its target ratio.')
                                 : '',
                             'type' => 'select',
-                            'default' => $breakpoint === 'default' ? 'crop_focal' : null,
+                            'default' => null,
                             'options' => [
                                 'crop_focal' => __('Focal crop'),
                                 'contain' => __('Contain'),

src/Fieldtypes/ResponsiveFieldtype.php

@@ -2,13 +2,20 @@
 
 namespace Spatie\ResponsiveImages\Fieldtypes;
 
+use Spatie\ResponsiveImages\Breakpoint;
 use Spatie\ResponsiveImages\Fieldtypes\ResponsiveFields as ResponsiveFields;
 use Spatie\ResponsiveImages\GraphQL\ResponsiveFieldType as GraphQLResponsiveFieldtype;
+use Spatie\ResponsiveImages\Responsive;
+use Spatie\ResponsiveImages\Tags\ResponsiveTag;
+use Statamic\Assets\Asset;
 use Statamic\Facades\Blueprint;
 use Statamic\Facades\GraphQL;
 use Statamic\Fields\Fields as BlueprintFields;
 use Statamic\Fields\Fieldtype;
+use Statamic\Fieldtypes\Assets\Assets;
 use Statamic\Support\Arr;
+use Statamic\Tags\Context;
+use Statamic\Tags\Parameters;
 
 class ResponsiveFieldtype extends Fieldtype
 {
@@ -115,6 +122,37 @@ public function preProcess($data)
         return $this->fields()->addValues($data ?? [])->preProcess()->values()->all();
     }
 
+    public function preProcessIndex($data)
+    {
+        $data = $this->augment($data);
+
+        if (!isset($data['src'])) {
+            return [];
+        }
+
+        $responsive = new Responsive($data['src'], Parameters::make($data, Context::make()));
+
+        return $responsive->breakPoints()
+            ->map(function (Breakpoint $breakpoint) {
+                $arr = [
+                    'id' => $breakpoint->asset->id(),
+                    'is_image' => $isImage = $breakpoint->asset->isImage(),
+                    'extension' => $breakpoint->asset->extension(),
+                    'url' => $breakpoint->asset->url(),
+                    'breakpoint' => $breakpoint->label,
+                ];
+
+                if ($isImage) {
+                    $arr['thumbnail'] = cp_route('assets.thumbnails.show', [
+                        'encoded_asset' => base64_encode($breakpoint->asset->id()),
+                        'size' => 'thumbnail',
+                    ]);
+                }
+
+                return $arr;
+            });
+    }
+
     public function process($data)
     {
         return Arr::removeNullValues(