<template>
  <sl-dialog ref="dialogRef" :open="open" @sl-hide="handleHide" :label="label">
    <slot />
    <div slot="footer">
      <slot name="footer" />
    </div>
  </sl-dialog>
</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 dialogRef = ref<HTMLSlDrawerElement>()

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