mirror of
https://github.com/koel/koel
synced 2024-12-04 09:49:23 +00:00
39 lines
766 B
Vue
39 lines
766 B
Vue
<template>
|
|
<section class="track-listing">
|
|
<h1>Track Listing</h1>
|
|
|
|
<ul class="tracks">
|
|
<li
|
|
is="vue:TrackListItem"
|
|
v-for="(track, index) in album.info?.tracks"
|
|
:key="index"
|
|
:album="album"
|
|
:track="track"
|
|
data-testid="album-track-item"
|
|
/>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { defineAsyncComponent, toRefs } from 'vue'
|
|
|
|
const TrackListItem = defineAsyncComponent(() => import('./AlbumTrackListItem.vue'))
|
|
|
|
const props = defineProps<{ album: Album }>()
|
|
const { album } = toRefs(props)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
ul {
|
|
counter-reset: trackCounter;
|
|
}
|
|
|
|
li {
|
|
counter-increment: trackCounter;
|
|
|
|
&::before {
|
|
content: counter(trackCounter);
|
|
}
|
|
}
|
|
</style>
|