<template>
  <sl-drawer ref="drawerRef" :open="open" @sl-hide="handleHide" :label="label">
    <slot />
  </sl-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useBubbleSafeHandler } from '@/composables/useBubbleSafeHandler'

const props = defineProps<{ label: string; open: boolean }>()

const emit = defineEmits<{ (e: 'hide'): void }>()
const drawerRef = ref<HTMLSlDrawerElement>()

const handleHide = useBubbleSafeHandler(drawerRef, () => {
  emit('hide')
})
</script>
