koel/resources/assets/js/components/ui/album-artist/AlbumOrArtistGrid.vue

27 lines
543 B
Vue
Raw Normal View History

2024-04-04 22:20:42 +00:00
<template>
<div :class="`as-${viewMode}`" class="grid gap-5 p-6">
<slot />
</div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue'
const props = withDefaults(defineProps<{ viewMode?: ArtistAlbumViewMode }>(), {
viewMode: 'thumbnails'
})
const { viewMode } = toRefs(props)
</script>
<style scoped lang="postcss">
div {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
div.as-list {
@apply gap-x-4 gap-y-3 content-start;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
</style>