mp3-composer/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace vue-dnd-code with vue-draggable-next

Browse Source
This commit is contained in:
bivashy
2026-01-05 22:22:42 +05:00
parent 627c9fda99
commit ff2b41c2e7
7 changed files with 109 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/internal/musiccard/MusicCard.vue
View File

@ -1,10 +1,10 @@
<template>
<Frame margin="none" class="px-2 py-3 flex h-fit gap-2 hover:bg-muted" :class="selected && 'bg-muted'">
<Frame margin="none" class="px-2 py-3 flex h-fit gap-2 hover:bg-muted">
<div class="text-[2rem] h-full">
<Draggable />
</div>
<Separator orientation="vertical" />
<div class="w-fit flex-1 flex flex-col justify-between">
<div class="w-fit flex-1 flex flex-col justify-between cursor-pointer" data-no-drag @click="onPlayClick">
<div class="w-full">
<div class="flex items-start justify-between w-full">
<h4 class="scroll-m-20 text-xl font-semibold tracking-tight truncate max-w-[32ch]">
@ -26,8 +26,8 @@
</Badge>
</div>
</div>
<Separator orientation="vertical" />
<div class="max-w-20 max-h-20 w-20 h-20" v-if="imageUrl">
<Separator orientation="vertical" class="cursor-pointer" data-no-drag @click="onPlayClick" />
<div class="max-w-20 max-h-20 w-20 h-20 cursor-pointer" data-no-drag v-if="imageUrl" @click="onPlayClick">
<NuxtImg class="object-cover w-full h-full rounded-md" :src="imageUrl" :alt="title" />
</div>
</Frame>
@ -42,14 +42,22 @@ import Frame from '@/components/ui/frame/Frame.vue'
interface Props {
title: string
author: string
selected?: boolean
badges?: string[]
imageUrl?: string
date?: string
}
const emit = defineEmits<{
onPlay: []
}>();
withDefaults(defineProps<Props>(), {
authorLabel: 'Author',
badges: () => []
})
function onPlayClick(e: MouseEvent) {
emit("onPlay")
e.stopPropagation();
}
</script>