From 3572ce1538a20e7176d2cb2f75f8962fd08ef0ab Mon Sep 17 00:00:00 2001
From: Vben <ann.vben@gmail.com>
Date: Sun, 29 Sep 2024 22:15:43 +0800
Subject: [PATCH] fix: when multiple pop-ups exist at the same time, clicking
 will close all (#4548)

---
 packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue   | 10 +++++++---
 packages/@core/ui-kit/popup-ui/src/modal/modal.vue     | 10 +++++++---
 .../src/components/ui/dialog/DialogOverlay.vue         |  5 ++++-
 .../shadcn-ui/src/components/ui/sheet/SheetOverlay.vue |  5 ++++-
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
index c15cdb9d..4f80f9e5 100644
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { DrawerProps, ExtendedDrawerApi } from './drawer';
 
-import { ref, watch } from 'vue';
+import { provide, ref, useId, watch } from 'vue';
 
 import {
   useIsMobile,
@@ -33,9 +33,13 @@ const props = withDefaults(defineProps<Props>(), {
   drawerApi: undefined,
 });
 
+const id = useId();
+provide('DISMISSABLE_DRAWER_ID', id);
+
 const wrapperRef = ref<HTMLElement>();
 const { $t } = useSimpleLocale();
 const { isMobile } = useIsMobile();
+
 const state = props.drawerApi?.useStore?.();
 
 const {
@@ -83,8 +87,8 @@ function escapeKeyDown(e: KeyboardEvent) {
 // pointer-down-outside
 function pointerDownOutside(e: Event) {
   const target = e.target as HTMLElement;
-  const dismissableDrawer = !!target?.dataset.dismissableDrawer;
-  if (!closeOnClickModal.value || !dismissableDrawer) {
+  const dismissableDrawer = target?.dataset.dismissableDrawer;
+  if (!closeOnClickModal.value || dismissableDrawer !== id) {
     e.preventDefault();
   }
 }
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
index fe80c555..0413ef6d 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ExtendedModalApi, ModalProps } from './modal';
 
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, provide, ref, useId, watch } from 'vue';
 
 import {
   useIsMobile,
@@ -40,6 +40,10 @@ const dialogRef = ref();
 const headerRef = ref();
 const footerRef = ref();
 
+const id = useId();
+
+provide('DISMISSABLE_MODAL_ID', id);
+
 const { $t } = useSimpleLocale();
 const { isMobile } = useIsMobile();
 const state = props.modalApi?.useStore?.();
@@ -141,8 +145,8 @@ function handerOpenAutoFocus(e: Event) {
 // pointer-down-outside
 function pointerDownOutside(e: Event) {
   const target = e.target as HTMLElement;
-  const isDismissableModal = !!target?.dataset.dismissableModal;
-  if (!closeOnClickModal.value || !isDismissableModal) {
+  const isDismissableModal = target?.dataset.dismissableModal;
+  if (!closeOnClickModal.value || isDismissableModal !== id) {
     e.preventDefault();
     e.stopPropagation();
   }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogOverlay.vue
index 64113eee..1052a134 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogOverlay.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import { inject } from 'vue';
+
 import { useScrollLock } from '@vben-core/composables';
 
 useScrollLock();
+const id = inject('DISMISSABLE_MODAL_ID');
 </script>
 <template>
   <div
+    :data-dismissable-modal="id"
     class="bg-overlay fixed inset-0 z-[1000]"
-    data-dismissable-modal="true"
   ></div>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetOverlay.vue
index 1be8b011..0a153c7a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/sheet/SheetOverlay.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import { inject } from 'vue';
+
 import { useScrollLock } from '@vben-core/composables';
 
 useScrollLock();
+const id = inject('DISMISSABLE_DRAWER_ID');
 </script>
 <template>
   <div
+    :data-dismissable-drawer="id"
     class="bg-overlay fixed inset-0 z-[1000]"
-    data-dismissable-drawer="true"
   ></div>
 </template>