43 lines
1.5 KiB
Vue
43 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { Category } from "~/models/Category";
|
|
import { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb } from "radix-vue"
|
|
|
|
defineProps<{
|
|
categories: Category[]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col h-full">
|
|
<header class="grid grid-cols-12 gap-4 px-2 py-4 border-b-[1px] border-b-foreground/10 font-bold">
|
|
<div class="col-span-6">
|
|
Nom
|
|
</div>
|
|
<div class="col-span-4">
|
|
Couleur
|
|
</div>
|
|
<div class="col-span-2" />
|
|
</header>
|
|
|
|
<ScrollAreaRoot class="h-36 grow overflow-hidden ">
|
|
<ScrollAreaViewport class="w-full h-full pr-4" as-child>
|
|
<div class="[&:last-child]:border-0">
|
|
<CalendarCategoryTableRow
|
|
v-for="item in categories"
|
|
:key="item.id"
|
|
:category="item"
|
|
/>
|
|
</div>
|
|
</ScrollAreaViewport>
|
|
<ScrollAreaScrollbar
|
|
class="flex select-none touch-none p-0.5 bg-background transition-colors duration-100 ease-out hover:bg-foreground/5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
|
|
orientation="vertical"
|
|
>
|
|
<ScrollAreaThumb
|
|
class="flex-1 bg-foreground/20 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full"
|
|
/>
|
|
</ScrollAreaScrollbar>
|
|
</ScrollAreaRoot>
|
|
</div>
|
|
</template>
|