1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41 import type { Artist } from '../types'
import { useFavouriteStore } from '../store/favourite'
export const ArtistList = ({
items,
allowHScroll = false,
tileSize = 200,
}: {
items: Artist[],
allowHScroll?: boolean,
tileSize?: number,
}) => {
const
favouriteStore = useFavouriteStore(),
isFavourite = (id: string) => favouriteStore.get('artist', id),
toggleFavourite = async (id: string) => favouriteStore.toggle('artist', id)
return vine`
<Tiles :tile-size="tileSize" :allow-h-scroll="allowHScroll">
<Tile
v-for="item in items"
:key="item.id"
:to="{name: 'artist', params: { id: item.id } }"
:title="item.name"
:image="item.image"
>
<template #text>
<strong>{{ item.albumCount }}</strong> albums
</template>
<template #context-menu>
<DropdownItem
:icon="isFavourite(item.id) ? 'heart-fill' : 'heart'"
@click.stop="toggleFavourite(item.id)"
>
Favorite
</DropdownItem>
</template>
</Tile>
</Tiles>
`
}