fix(modal): emit close event fires when modal content is clicked

globalbrain · Sep 26, 2022 · 42cf87f · 42cf87f
1 parent e9bd2bb
commit 42cf87f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/lib/components/SModal.vue b/lib/components/SModal.vue
@@ -1,22 +1,36 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
 export interface Props {
   open: boolean
   closable?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   closable: true
 })
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'close'): void
 }>()
+
+const el = ref<any>(null)
+
+function onClick(e: any) {
+  if (!props.closable) {
+    return
+  }
+
+  if (e.target === el.value) {
+    emit('close')
+  }
+}
 </script>
 
 <template>
   <Teleport to="#sefirot-modals">
     <transition name="fade">
-      <div v-if="open" class="SModal" @click="closable && $emit('close')">
+      <div v-if="open" class="SModal" ref="el" @click="onClick">
         <slot />
       </div>
     </transition>

diff --git a/lib/components/SSheet.vue b/lib/components/SSheet.vue
@@ -13,13 +13,13 @@ withDefaults(defineProps<Props>(), {
   closable: true
 })
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'close'): void
 }>()
 </script>
 
 <template>
-  <SMount class="SSheet" :class="[size]" @click.stop="() => {}">
+  <SMount class="SSheet" :class="[size]">
     <button v-if="closable ?? true" class="close" @click="$emit('close')">
       <SIcon :icon="IconX" class="icon" />
     </button>