FaModal 组件 provide/inject 改为组件传参方式

Author: hooray

src/ui/components/FaModal/dialog/DialogContent.vue

@@ -13,6 +13,7 @@ import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DialogContentProps & {
+  modalId: string
   class?: HTMLAttributes['class']
   open?: boolean
   maximize?: boolean
@@ -54,8 +55,6 @@ watch(showOverlay, (val) => {
     isLocked.value = false
   }
 })
-
-const id = inject('ModalId')
 </script>
 
 <template>
@@ -73,7 +72,7 @@ const id = inject('ModalId')
     >
       <div
         v-if="showOverlay"
-        :data-modal-id="id"
+        :data-modal-id="props.modalId"
         :class="cn('fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
           'backdrop-blur-sm': props.overlayBlur,
         })"

src/ui/components/FaModal/index.ts

@@ -30,6 +30,7 @@ export interface ModalProps {
   headerClass?: HTMLAttributes['class']
   contentClass?: HTMLAttributes['class']
   footerClass?: HTMLAttributes['class']
+  modalId?: string
 }
 export interface ModalEmits {
   'update:modelValue': [value: boolean]
@@ -66,6 +67,7 @@ export function useFaModal() {
           closeOnClickOverlay: false,
           contentClass: 'py-0 min-h-auto',
           footerClass: 'p-4',
+          modalId: useId(),
           onClosed: () => {
             app.unmount()
           },
@@ -87,6 +89,7 @@ export function useFaModal() {
           closeOnClickOverlay: false,
           contentClass: 'py-0 min-h-auto',
           footerClass: 'p-4',
+          modalId: useId(),
           onClosed: () => {
             app.unmount()
           },
@@ -108,6 +111,7 @@ export function useFaModal() {
           closeOnClickOverlay: false,
           contentClass: 'py-0 min-h-auto',
           footerClass: 'p-4',
+          modalId: useId(),
           onClosed: () => {
             app.unmount()
           },
@@ -129,6 +133,7 @@ export function useFaModal() {
           closeOnClickOverlay: false,
           contentClass: 'py-0 min-h-auto',
           footerClass: 'p-4',
+          modalId: useId(),
           onClosed: () => {
             app.unmount()
           },
@@ -150,6 +155,7 @@ export function useFaModal() {
           contentClass: 'py-0 min-h-auto',
           footerClass: 'p-4',
           showCancelButton: true,
+          modalId: useId(),
           onClosed: () => {
             app.unmount()
           },

src/ui/components/FaModal/index.vue

@@ -60,9 +60,7 @@ defineExpose({
   areaRef: dialogAreaRef,
 })
 
-const id = useId()
-provide('ModalId', id)
-
+const modalId = useId()
 const isOpen = ref(props.modelValue)
 const isMaximize = ref(props.maximize)
 
@@ -122,7 +120,7 @@ function handleFocusOutside(e: Event) {
 }
 
 function handleClickOutside(e: Event) {
-  if (!props.closeOnClickOverlay || (e.target as HTMLElement).dataset.modalId !== id) {
+  if (!props.closeOnClickOverlay || (e.target as HTMLElement).dataset.modalId !== modalId) {
     e.preventDefault()
     e.stopPropagation()
   }
@@ -154,6 +152,7 @@ function handleAnimationEnd() {
   <Dialog :modal="false" :open="isOpen" @update:open="updateOpen">
     <DialogContent
       ref="dialogContentRef"
+      :modal-id="modalId"
       :open="isOpen"
       :closable="props.closable"
       :overlay="props.overlay"