feat(NeSideDrawer): add prop closeOnClickOutside (#27)

nethesis · Feb 26, 2024 · 3dd9ad7 · 3dd9ad7
1 parent 3e5ef6e
commit 3dd9ad7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/NeSideDrawer.vue b/src/components/NeSideDrawer.vue
@@ -11,6 +11,7 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons'
 const props = defineProps({
   isShown: { type: Boolean, default: false },
   title: { type: String, default: '' },
+  closeOnClickOutside: { type: Boolean, default: false },
   closeAriaLabel: { type: String, default: 'Close side drawer' }
 })
 
@@ -19,11 +20,17 @@ const emit = defineEmits(['close'])
 function closeDrawer() {
   emit('close')
 }
+
+function maybeCloseDrawer() {
+  if (props.closeOnClickOutside) {
+    closeDrawer()
+  }
+}
 </script>
 
 <template>
   <TransitionRoot :show="isShown" as="template">
-    <Dialog as="div" class="relative z-[100]" @close="closeDrawer">
+    <Dialog as="div" class="relative z-[100]" @close="maybeCloseDrawer">
       <TransitionChild
         as="template"
         enter="transition-opacity ease-linear duration-300"

diff --git a/stories/NeSideDrawer.stories.ts b/stories/NeSideDrawer.stories.ts
@@ -9,6 +9,7 @@ const meta = {
   args: {
     isShown: true,
     title: 'Drawer title',
+    closeOnClickOutside: false,
     closeAriaLabel: 'Close side drawer'
   }
 } satisfies Meta<typeof NeSideDrawer>