1- import type { ComputedRef , Ref } from 'vue' ;
2- import { isRef , unref , computed , defineComponent , ref , watch } from 'vue' ;
3- import type { VueNode } from '../../_util/type' ;
1+ import type { Ref } from 'vue' ;
2+ import { isRef , unref , computed , defineComponent , shallowRef , watch } from 'vue' ;
3+ import type { MaybeRef , VueNode } from '../../_util/type' ;
44import type { ModalFuncProps } from '../Modal' ;
55import type { HookModalRef } from './HookModal' ;
66import type { ModalStaticFunctions } from '../confirm' ;
@@ -12,28 +12,29 @@ import destroyFns from '../destroyFns';
1212let uuid = 0 ;
1313
1414interface ElementsHolderRef {
15- addModal : ( modal : ComputedRef < JSX . Element > ) => ( ) => void ;
15+ addModal : ( modal : ( ) => JSX . Element ) => ( ) => void ;
1616}
1717
1818const ElementsHolder = defineComponent ( {
1919 name : 'ElementsHolder' ,
2020 inheritAttrs : false ,
2121 setup ( _ , { expose } ) {
22- const modals = ref < ComputedRef < JSX . Element > [ ] > ( [ ] ) ;
23- const addModal = ( modal : ComputedRef < JSX . Element > ) => {
22+ const modals = shallowRef < ( ( ) => JSX . Element ) [ ] > ( [ ] ) ;
23+ const addModal = ( modal : ( ) => JSX . Element ) => {
2424 modals . value . push ( modal ) ;
25+ modals . value = modals . value . slice ( ) ;
2526 return ( ) => {
2627 modals . value = modals . value . filter ( currentModal => currentModal !== modal ) ;
2728 } ;
2829 } ;
2930
3031 expose ( { addModal } ) ;
3132 return ( ) => {
32- return < > { modals . value . map ( modal => modal . value ) } </ > ;
33+ return modals . value . map ( modal => modal ( ) ) ;
3334 } ;
3435 } ,
3536} ) ;
36- export type ModalFuncWithRef = ( props : Ref < ModalFuncProps > | ModalFuncProps ) => {
37+ export type ModalFuncWithRef = ( props : MaybeRef < ModalFuncProps > ) => {
3738 destroy : ( ) => void ;
3839 update : ( configUpdate : ModalFuncProps ) => void ;
3940} ;
@@ -42,9 +43,9 @@ function useModal(): readonly [
4243 Omit < ModalStaticFunctions < ModalFuncWithRef > , 'warn' > ,
4344 ( ) => VueNode ,
4445] {
45- const holderRef = ref < ElementsHolderRef > ( null ) ;
46+ const holderRef = shallowRef < ElementsHolderRef > ( null ) ;
4647 // ========================== Effect ==========================
47- const actionQueue = ref ( [ ] ) ;
48+ const actionQueue = shallowRef ( [ ] ) ;
4849 watch (
4950 actionQueue ,
5051 ( ) => {
@@ -65,10 +66,10 @@ function useModal(): readonly [
6566 const getConfirmFunc = ( withFunc : ( config : ModalFuncProps ) => ModalFuncProps ) =>
6667 function hookConfirm ( config : Ref < ModalFuncProps > | ModalFuncProps ) {
6768 uuid += 1 ;
68- const open = ref ( true ) ;
69- const modalRef = ref < HookModalRef > ( null ) ;
70- const configRef = ref ( unref ( config ) ) ;
71- const updateConfig = ref ( { } ) ;
69+ const open = shallowRef ( true ) ;
70+ const modalRef = shallowRef < HookModalRef > ( null ) ;
71+ const configRef = shallowRef ( unref ( config ) ) ;
72+ const updateConfig = shallowRef ( { } ) ;
7273 watch (
7374 ( ) => config ,
7475 val => {
@@ -78,9 +79,17 @@ function useModal(): readonly [
7879 } ) ;
7980 } ,
8081 ) ;
82+
83+ const destroyAction = ( ...args : any [ ] ) => {
84+ open . value = false ;
85+ const triggerCancel = args . some ( param => param && param . triggerCancel ) ;
86+ if ( configRef . value . onCancel && triggerCancel ) {
87+ configRef . value . onCancel ( ( ) => { } , ...args . slice ( 1 ) ) ;
88+ }
89+ } ;
8190 // eslint-disable-next-line prefer-const
8291 let closeFunc : Function | undefined ;
83- const modal = computed ( ( ) => (
92+ const modal = ( ) => (
8493 < HookModal
8594 key = { `modal-${ uuid } }
8695 config = { withFunc ( configRef . value ) }
@@ -91,22 +100,14 @@ function useModal(): readonly [
91100 closeFunc ?.( ) ;
92101 } }
93102 />
94- ) ) ;
103+ ) ;
95104
96105 closeFunc = holderRef . value ?. addModal ( modal ) ;
97106
98107 if ( closeFunc ) {
99108 destroyFns . push ( closeFunc ) ;
100109 }
101110
102- const destroyAction = ( ...args : any [ ] ) => {
103- open . value = false ;
104- const triggerCancel = args . some ( param => param && param . triggerCancel ) ;
105- if ( configRef . value . onCancel && triggerCancel ) {
106- configRef . value . onCancel ( ( ) => { } , ...args . slice ( 1 ) ) ;
107- }
108- } ;
109-
110111 const updateAction = ( newConfig : ModalFuncProps ) => {
111112 configRef . value = {
112113 ...configRef . value ,
0 commit comments