[web-src] Make ListItemXXX functional components

web-src/src/components/ListItemArtist.vue

@@ -1,7 +1,7 @@
-<template>
-  <div class="media" :id="'index_' + anchor">
-    <div class="media-content fd-has-action is-clipped" v-on:click="open_artist">
-      <h1 class="title is-6">{{ artist.name }}</h1>
+<template functional>
+  <div class="media" :id="'index_' + props.anchor">
+    <div class="media-content fd-has-action is-clipped" @click="listeners.click">
+      <h1 class="title is-6">{{ props.artist.name }}</h1>
     </div>
     <div class="media-right">
       <slot name="actions"></slot>
@@ -12,15 +12,7 @@
 <script>
 export default {
   name: 'ListItemArtist',
-  components: {},
-
-  props: ['artist', 'anchor'],
-
-  methods: {
-    open_artist: function () {
-      this.$router.push({ path: '/music/artists/' + this.artist.id })
-    }
-  }
+  props: ['artist', 'anchor']
 }
 </script>
 

web-src/src/components/ListItemGenre.vue

@@ -1,7 +1,7 @@
-<template>
-  <div class="media" :id="'index_' + anchor">
-    <div class="media-content fd-has-action is-clipped" v-on:click="open_genre">
-      <h1 class="title is-6">{{ genre.name }}</h1>
+<template functional>
+  <div class="media" :id="'index_' + props.anchor">
+    <div class="media-content fd-has-action is-clipped" @click="listeners.click">
+      <h1 class="title is-6">{{ props.genre.name }}</h1>
     </div>
     <div class="media-right">
       <slot name="actions"></slot>
@@ -12,16 +12,7 @@
 <script>
 export default {
   name: 'ListItemGenre',
-  components: {},
-
-  props: [ 'genre', 'anchor' ],
-
-  methods: {
-    open_genre: function () {
-      this.show_details_modal = false
-      this.$router.push({ name: 'Genre', params: { genre: this.genre.name } })
-    }
-  }
+  props: [ 'genre', 'anchor' ]
 }
 </script>
 

web-src/src/components/ListItemPlaylist.vue

@@ -1,7 +1,7 @@
-<template>
+<template functional>
   <div class="media">
-    <div class="media-content fd-has-action is-clipped" v-on:click="open_playlist">
-      <h1 class="title is-6">{{ playlist.name }}</h1>
+    <div class="media-content fd-has-action is-clipped" @click="listeners.click">
+      <h1 class="title is-6">{{ props.playlist.name }}</h1>
     </div>
     <div class="media-right">
       <slot name="actions"></slot>
@@ -12,16 +12,7 @@
 <script>
 export default {
   name: 'ListItemPlaylist',
-  components: {},
-
-  props: ['playlist'],
-
-  methods: {
-    open_playlist: function () {
-      this.show_details_modal = false
-      this.$router.push({ path: '/playlists/' + this.playlist.id })
-    }
-  }
+  props: ['playlist']
 }
 </script>
 

web-src/src/components/ListItemTrack.vue

@@ -1,9 +1,9 @@
-<template>
+<template functional>
   <div class="media">
-    <div class="media-content fd-has-action is-clipped" v-on:click="play">
-      <h1 class="title is-6">{{ track.title }}</h1>
-      <h2 class="subtitle is-7 has-text-grey"><b>{{ track.artist }}</b></h2>
-      <h2 class="subtitle is-7 has-text-grey">{{ track.album }}</h2>
+    <div class="media-content fd-has-action is-clipped" @click="listeners.click">
+      <h1 class="title is-6">{{ props.track.title }}</h1>
+      <h2 class="subtitle is-7 has-text-grey"><b>{{ props.track.artist }}</b></h2>
+      <h2 class="subtitle is-7 has-text-grey">{{ props.track.album }}</h2>
     </div>
     <div class="media-right">
       <slot name="actions"></slot>
@@ -12,24 +12,9 @@
 </template>
 
 <script>
-import webapi from '@/webapi'
-
 export default {
   name: 'ListItemTrack',
-  components: {},
-
-  props: ['track', 'position', 'context_uri'],
-
-  data () {
-    return {
-    }
-  },
-
-  methods: {
-    play: function () {
-      webapi.player_play_uri(this.context_uri, false, this.position)
-    }
-  }
+  props: ['track']
 }
 </script>