refactor tile component

src/home/Home.vue

@@ -4,17 +4,17 @@
     <template v-else>
       <div v-for="section in sections" :key="section.key" class="mb-4">
         <h1>{{ section.name }}</h1>
-        <Tiles :items="$data[section.key]" v-slot="{ item }" square>
+        <Tiles square>
-          <div class="text-truncate">
+          <Tile v-for="item in $data[section.key]" :key="item.id"
-            <router-link :to="{name: 'album', params: { id: item.id } }">
+            :image="item.image"
-              <strong>{{ item.name }}</strong>
+            :to="{name: 'album', params: { id: item.id } }"
-            </router-link>
+            :title="item.name">
-          </div>
+            <template v-slot:text>
-          <div class="text-truncate text-muted">
+              <router-link :to="{name: 'artist', params: { id: item.artistId } }">
-            <router-link :to="{name: 'artist', params: { id: item.artistId } }">
+                {{ item.artist }}
-              {{ item.artist }}
+              </router-link>
-            </router-link>
+            </template>
-          </div>
+          </Tile>
         </Tiles>
       </div>
     </template>

src/library/album/AlbumList.vue

@@ -1,30 +1,26 @@
 <template>
   <div>
     <Spinner :data="albums" v-slot="{albums: data}">
-      <Tiles :items="albums" v-slot="{ item }" square>
+      <Tiles square>
-        <div class="text-truncate">
+        <Tile v-for="item in albums" :key="item.id"
-          <router-link :to="{name: 'album', params: { id: item.id } }">
+          :image="item.image"
-            <strong>{{ item.name }}</strong>
+          :to="{name: 'album', params: { id: item.id } }"
-          </router-link>
+          :title="item.name">
-        </div>
+          <template v-slot:text>
-        <div class="text-truncate text-muted">
+            <router-link :to="{name: 'artist', params: { id: item.artistId } }">
-          <router-link :to="{name: 'artist', params: { id: item.artistId } }">
+              {{ item.artist }}
-            {{ item.artist }}
+            </router-link>
-          </router-link>
+          </template>
-        </div>
+        </Tile>
       </Tiles>
     </Spinner>
   </div>
 </template>
 <script lang="ts">
 import Vue from "vue";
-import AlbumCard from "./AlbumCard.vue";
 import { AlbumSort } from '@/shared/api';
 
 export default Vue.extend({
-  components: {
-    AlbumCard
-  },
   props: {
     msg: String
   },

src/library/artist/ArtistDetails.vue

@@ -10,33 +10,31 @@
       </div>
     </div>
     <h3 class="pt-5">Albums</h3>
-    <Tiles :items="item.albums" v-slot="{ item }" square>
+    <Tiles square>
-      <div class="text-truncate">
+      <Tile v-for="item in item.albums" :key="item.id"
-        <router-link :to="{name: 'album', params: { id: item.id } }">
+        :image="item.image"
-          <strong>{{ item.name }}</strong>
+        :to="{name: 'album', params: { id: item.id } }"
-        </router-link>
+        :title="item.name"
-      </div>
+        :text="item.artist">
-      <div class="text-truncate text-muted">
+      </Tile>
-        {{ item.artist }}
-      </div>
     </Tiles>
-
     <h3 class="pt-5">Similar artist</h3>
-    <Tiles :items="item.similarArtist" v-slot="{ item }">
+    <Tiles>
-      <ArtistCard :item="item"></ArtistCard>
+      <Tile v-for="item in item.similarArtist" :key="item.id"
+        :to="{name: 'artist', params: { id: item.id } }"
+        :title="item.name">
+        <template v-slot:text>
+          <strong>{{ item.albumCount }}</strong> albums
+        </template>
+      </Tile>
     </Tiles>
   </div>
 </template>
 <script lang="ts">
 import Vue from "vue";
-import AlbumCard from "@/library/album/AlbumCard.vue";
-import ArtistCard from "@/library/artist/ArtistCard.vue";
 
 export default Vue.extend({
-  components: {
+  components: {},
-    AlbumCard,
-    ArtistCard,
-  },
   props: {
     id: String
   },

src/library/artist/ArtistList.vue

@@ -1,23 +1,19 @@
 <template>
-  <Tiles :items="items" v-slot="{ item }">
+  <Tiles>
-    <div class="text-truncate">
+    <Tile v-for="item in items" :key="item.id"
-      <router-link :to="{name: 'artist', params: { id: item.id } }">
+      :image="item.image"
-        <strong>{{ item.name }}</strong>
+      :to="{name: 'artist', params: { id: item.id } }"
-      </router-link>
+      :title="item.name">
-    </div>
+      <template v-slot:text>
-     <div class="text-truncate text-muted">
+        <strong>{{ item.albumCount }}</strong> albums
-      <strong>{{ item.albumCount }}</strong> albums
+      </template>
-    </div>
+    </Tile>
   </Tiles>
 </template>
 <script lang="ts">
   import Vue from "vue";
-  import ArtistCard from "./ArtistCard.vue";
 
   export default Vue.extend({
-    components: {
-      ArtistCard,
-    },
     data() {
       return {
         items: []

src/library/genre/GenreList.vue

@@ -1,34 +1,30 @@
 <template>
-  <Tiles :items="items">
+  <Tiles>
-    <template v-slot="{ item }">
+    <Tile v-for="item in items" :key="item.id"
-      <div class="text-truncate">
+      :image="item.image"
-        <router-link :to="{name: 'genre', params: { id: item.id } }">
+      :to="{name: 'genre', params: { id: item.id } }"
-          <strong>{{ item.name }}</strong>
+      :title="item.name">
-        </router-link>
+      <template v-slot:text>
-      </div>
-      <div class="text-truncate text-muted">
         <strong>{{ item.albumCount }}</strong> albums ·
         <strong>{{ item.songCount }}</strong> songs
-      </div>
+      </template>
-    </template>
+    </Tile>
   </Tiles>
 </template>
 <script lang="ts">
 import Vue from "vue";
 
 export default Vue.extend({
-  components: {
+  components: {},
-    
-  },
   data() {
     return {
-      items: []
+      items: [],
     };
   },
   created() {
-    this.$api.getGenres().then(items => {
+    this.$api.getGenres().then((items) => {
       this.items = items;
     });
-  }
+  },
 });
 </script>

src/shared/components/Tile.vue

@@ -0,0 +1,44 @@
+<template functional>
+  <div class="tile card">
+    <div class="tile-img">
+      <img v-if="props.image" :src="props.image">
+      <Icon v-else class="tile-img-fallback text-muted" icon="music-note-beamed"/>
+    </div>
+    <div class="card-body">
+      <div class="text-truncate font-weight-bold">
+        <slot name="title">
+          <router-link :to="props.to">
+            {{ props.title }}
+          </router-link>
+        </slot>
+      </div>
+      <div class="text-truncate text-muted">
+        <slot name="text">
+          {{ props.text }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+  .tile-img {
+    position: relative;
+    width: 100%;
+    background-color: var(--secondary);
+
+    img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .tile-img-fallback {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 4.5rem;
+  }
+</style>

src/shared/components/Tiles.vue

@@ -1,18 +1,6 @@
 <template functional>
- <div class="tiles" :class="props.square ? 'tiles-sq' : 'tiles-rect'">
+  <div class="tiles" :class="props.square ? 'tiles-square' : 'tiles-rect'">
-    <div v-for="(item, index) in props.items" :key="item.id">
+    <slot></slot>
-      <div class="card">
-        <div class="tile-img bg-secondary">
-          <div class="tile-img-inner">
-            <img v-if="item.image" :src="item.image">
-            <Icon v-else class="fallback-img text-muted" icon="music-note-beamed"/>
-          </div>
-        </div>
-        <div class="card-body">
-          <slot :item="item" :index="index"></slot>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 <style lang="scss">
@@ -28,47 +16,23 @@
     }
   }
 
-  .tiles-sq {
+  .tiles-square {
     .tile-img {
       padding-bottom: 100%;
     }
   }
+
   .tiles-rect {
     .tile-img {
       padding-bottom: 70%;
     }
   }
-  .tile-img {
-    position: relative;
-    width: 100%;
-    
-    .tile-img-inner {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .fallback-img {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 4.5rem;
-      }
-    }
-  }
 </style>
 <script lang="ts">
   import Vue from "vue";
 
   export default Vue.extend({
     props: {
-      items: { type: Array, required: true },
       square: { type: Boolean, default: false },
     }
   });

src/shared/components/index.ts

@@ -3,12 +3,14 @@ import Icon from "./Icon.vue";
 import OverflowMenu from "./OverflowMenu.vue";
 import Spinner from "./Spinner.vue";
 import Tiles from "./Tiles.vue";
+import Tile from "./Tile.vue";
 
 const components = {
   Icon,
   OverflowMenu,
   Spinner,
   Tiles,
+  Tile,
 };
 
 type Key = keyof typeof components;