8000 fix(CModal): allow keeping modal in DOM after closing · segfaulted/coreui-vue@ba03576 · GitHub
[go: up one dir, main page]
Skip to content

Commit ba03576

Browse files
mrholekmrholek
committed
fix(CModal): allow keeping modal in DOM after closing
1 parent fc4fc28 commit ba03576

File tree

1 file changed

+60
-37
lines changed
  • packages/coreui-vue/src/components/modal

1 file changed

+60
-37
lines changed

‎packages/coreui-vue/src/components/modal/CModal.ts

Lines changed: 60 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
1-
import { defineComponent, h, provide, ref, RendererElement, Transition, watch } from 'vue'
1+
import {
2+
defineComponent,
3+
h,
4+
provide,
5+
ref,
6+
RendererElement,
7+
Transition,
8+
vShow,
9+
watch,
10+
withDirectives,
11+
} from 'vue'
212

313
import { CBackdrop } from './../backdrop/CBackdrop'
414

@@ -90,6 +100,14 @@ const CModal = defineComponent({
90100
default: true,
91101
required: false,
92102
},
103+
/*
104+
* By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
105+
*/
106+
unmountOnClose: {
107+
type: Boolean,
108+
default: true,
109+
required: false,
110+
},
93111
/**
94112
* Toggle the visibility of alert component.
95113
*/
@@ -189,52 +207,57 @@ const CModal = defineComponent({
189207

190208
provide('handleDismiss', handleDismiss)
191209

210+
const modal = () =>
211+
h(
212+
'div',
213+
{
214+
class: [
215+
'modal',
216+
{
217+
['fade']: props.transition,
218+
},
219+
attrs.class,
220+
],
221+
ref: modalRef,
222+
},
223+
h(
224+
'div',
225+
{
226+
class: [
227+
'modal-dialog',
228+
{
229+
'modal-dialog-centered': props.alignment === 'center',
230+
[`modal-fullscreen-${props.fullscreen}-down`]:
231+
props.fullscreen && typeof props.fullscreen === 'string',
232+
'modal-fullscreen': props.fullscreen && typeof props.fullscreen === 'boolean',
233+
['modal-dialog-scrollable']: props.scrollable,
234+
[`modal-${props.size}`]: props.size,
235+
},
236+
],
237+
role: 'dialog',
238+
},
239+
h(
240+
'div',
241+
{ class: ['modal-content', props.contentClassName], ref: modalContentRef },
242+
slots.default && slots.default(),
243+
),
244+
),
245+
)
246+
192247
return () => [
193248
h(
194249
Transition,
195250
{
251+
css: false,
196252
onEnter: (el, done) => handleEnter(el, done),
197253
onAfterEnter: () => handleAfterEnter(),
198254
onLeave: (el, done) => handleLeave(el, done),
199255
onAfterLeave: (el) => handleAfterLeave(el),
200256
},
201257
() =>
202-
visible.value &&
203-
h(
204-
'div',
205-
{
206-
class: [
207-
'modal',
208-
{
209-
['fade']: props.transition,
210-
},
211-
attrs.class,
212-
],
213-
ref: modalRef,
214-
},
215-
h(
216-
'div',
217-
{
218-
class: [
219-
'modal-dialog',
220-
{
221-
'modal-dialog-centered': props.alignment === 'center',
222-
[`modal-fullscreen-${props.fullscreen}-down`]:
223-
props.fullscreen && typeof props.fullscreen === 'string',
224-
'modal-fullscreen': props.fullscreen && typeof props.fullscreen === 'boolean',
225-
['modal-dialog-scrollable']: props.scrollable,
226-
[`modal-${props.size}`]: props.size,
227-
},
228-
],
229-
role: 'dialog',
230-
},
231-
h(
232-
'div',
233-
{ class: ['modal-content', props.contentClassName], ref: modalContentRef },
234-
slots.default && slots.default(),
235-
),
236-
),
237-
),
258+
props.unmountOnClose
259+
? visible.value && modal()
260+
: withDirectives(modal(), [[vShow, visible.value]]),
238261
),
239262
props.backdrop &&
240263
h(CBackdrop, {

0 commit comments

Comments
 (0)
0