Continue frontend building

packages/sshecret-frontend/src/components/common/Drawer.vue

@@ -0,0 +1,19 @@
+<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>