vitest/packages/ui/client/components/DetailsPanel.vue
2024-06-17 11:58:55 +02:00

44 lines
678 B
Vue

<script setup lang="ts">
defineProps<{
color?: string
}>()
const open = ref(true)
</script>
<template>
<div
:open="open"
class="details-panel"
data-testid="details-panel"
@toggle="open = $event.target.open"
>
<div
p="y1"
text-sm
bg-base
items-center
z-5
gap-2
:class="color"
w-full
flex
select-none
sticky
top="-1"
>
<div flex-1 h-1px border="base b" op80 />
<slot name="summary" :open="open" />
<div flex-1 h-1px border="base b" op80 />
</div>
<slot />
</div>
</template>
<style>
.details-panel {
user-select: none;
width: 100%;
}
</style>