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

@@ -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;
+  const dismissableDrawer = target?.dataset.dismissableDrawer;
-  if (!closeOnClickModal.value || !dismissableDrawer) {
+  if (!closeOnClickModal.value || dismissableDrawer !== id) {
     e.preventDefault();
   }
 }

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;
+  const isDismissableModal = target?.dataset.dismissableModal;
-  if (!closeOnClickModal.value || !isDismissableModal) {
+  if (!closeOnClickModal.value || isDismissableModal !== id) {
     e.preventDefault();
     e.stopPropagation();
   }

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>

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>