MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore(front): Replace `defineProp` macro with `defineProps` builtin available in Vue 3.5

This commit is contained in:
upsiflu 2024-12-03 11:38:07 +01:00
parent 215857233a
commit 8d54d7b87a
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
front/src/components/playlist/Card.vue
View File

@ -1,23 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
import { FwCard, FwPlayButton, FwOptionsButton } from '~/components' import Card from '~/components/ui/Card.vue'
import PlayButton from '~/components/ui/button/Play.vue'
import OptionsButton from '~/components/ui/button/Options.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { computed } from 'vue' import { computed } from 'vue'
import type { Playlist } from '~/types/models' import type { Playlist } from '~/types'
const { t } = useI18n() const { t } = useI18n()
const play = defineEmit<[playlist: Playlist]>() const play = defineEmit<[playlist: Playlist]>()
const playlist = defineProp<Playlist>('playlist', { required: true }) const {playlist} = defineProps<{playlist: Playlist}>()
const covers = computed(() => playlist.value.album_covers const covers = computed(() => playlist.album_covers
.filter((src, index, array) => array.indexOf(src) === index) .filter((src, index, array) => array.indexOf(src) === index)
.slice(0, 4) .slice(0, 4)
) )
const profileParams = computed(() => { const profileParams = computed(() => {
const [username, domain] = playlist.value.user.full_username.split('@') const [username, domain] = playlist.user.full_username.split('@')
return { username, domain } return { username, domain }
}) })
@ -26,13 +28,13 @@ let navigate = (to: 'playlist' | 'user') => {}
if (import.meta.env.PROD) { if (import.meta.env.PROD) {
const router = useRouter() const router = useRouter()
navigate = (to: 'playlist' | 'user') => to === 'playlist' navigate = (to: 'playlist' | 'user') => to === 'playlist'
? router.push({ name: 'library.playlists.detail', params: { id: playlist.value.id } }) ? router.push({ name: 'library.playlists.detail', params: { id: playlist.id } })
: router.push({ name: 'profile.full', params: profileParams.value }) : router.push({ name: 'profile.full', params: profileParams.value })
} }
</script> </script>
<template> <template>
<fw-card <Card
:title="playlist.name" :title="playlist.name"
@click="navigate('playlist')" @click="navigate('playlist')"
class="playlist-card" class="playlist-card"
@ -49,20 +51,20 @@ if (import.meta.env.PROD) {
/> />
</template> </template>
<fw-play-button @play="play(playlist)" /> <PlayButton @play="play(playlist)" />
<a <a
@click.stop="navigate('user')" @click.stop="navigate('user')"
class="funkwhale link" class="funkwhale link"
> >
{{ t('vui.by-user', playlist.user) }} {{ t('vui.by-user', playlist.user.full_username) }}
</a> </a>
<template #footer> <template #footer>
{{ t('vui.tracks', playlist.tracks_count) }} {{ t('vui.tracks', playlist.tracks_count) }}
<fw-options-button /> <OptionsButton />
</template> </template>
</fw-card> </Card>
</template> </template>
<style lang="scss"> <style lang="scss">