56 lines
827 B
Vue
56 lines
827 B
Vue
<template>
|
|
<slot />
|
|
<Bucket />
|
|
<Platine v-if="playerStore.currentTrack" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Track } from '~~/types'
|
|
import { usePlayerStore } from '~/store/player'
|
|
|
|
const playerStore = usePlayerStore()
|
|
const onCardDropped = (card: Track) => {
|
|
console.log('Carte déposée dans le bucket:', card)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bucket,
|
|
.platine {
|
|
position: fixed;
|
|
bottom: -100%;
|
|
right: 0;
|
|
height: auto;
|
|
}
|
|
|
|
.bucket {
|
|
z-index: 70;
|
|
bottom: -260px;
|
|
width: 100%;
|
|
overflow-x: scroll;
|
|
transition: bottom .3s ease;
|
|
|
|
&:hover,
|
|
.card-dragging & {
|
|
bottom: 0;
|
|
}
|
|
|
|
.bucket-card-wrapper {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.platine {
|
|
bottom: -100%;
|
|
transition: bottom 2s ease;
|
|
|
|
&.mounted {
|
|
z-index: 80;
|
|
bottom: 0;
|
|
|
|
width: 100%;
|
|
max-width: 450px;
|
|
}
|
|
}
|
|
</style>
|