Skip to content

Commit d15e705

Browse files
mrholekmrholek
committed
feat(CModal): the container and teleport properties to enable appending the modal to a specific element
1 parent 7626e30 commit d15e705

File tree

2 files changed

+64
-32
lines changed

2 files changed

+64
-32
lines changed

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

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
defineComponent,
33
h,
4+
PropType,
45
provide,
56
ref,
67
RendererElement,
@@ -11,6 +12,7 @@ import {
1112
} from 'vue'
1213

1314
import { CBackdrop } from '../backdrop/CBackdrop'
15+
import { CConditionalTeleport } from '../conditional-teleport'
1416

1517
import { executeAfterTransition } from '../../utils/transition'
1618

@@ -47,14 +49,23 @@ const CModal = defineComponent({
4749
return false
4850
},
4951
},
52+
/**
53+
* Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
54+
*
55+
* @since 5.3.0
56+
*/
57+
container: {
58+
type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
59+
default: 'body',
60+
},
5061
/**
5162
* A string of all className you want applied to the modal content component.
5263
*/
5364
contentClassName: String,
5465
/**
5566
* Puts the focus on the modal when shown.
5667
*
57-
* @since v5.0.0
68+
* @since 5.0.0
5869
*/
5970
focus: {
6071
type: Boolean,
@@ -99,6 +110,15 @@ const CModal = defineComponent({
99110
return ['sm', 'lg', 'xl'].includes(value)
100111
},
101112
},
113+
/**
114+
* Generates modal using Teleport.
115+
*
116+
* @since 5.3.0
117+
*/
118+
teleport: {
119+
type: Boolean,
120+
default: false,
121+
},
102122
/**
103123
* Remove animation to create modal that simply appear rather than fade in to view.
104124
*/
@@ -264,27 +284,37 @@ const CModal = defineComponent({
264284
),
265285
)
266286

267-
return () => [
287+
return () =>
268288
h(
269-
Transition,
289+
CConditionalTeleport,
270290
{
271-
css: false,
272-
onEnter: (el, done) => handleEnter(el, done),
273-
onAfterEnter: () => handleAfterEnter(),
274-
onLeave: (el, done) => handleLeave(el, done),
275-
onAfterLeave: (el) => handleAfterLeave(el),
291+
container: props.container,
292+
teleport: props.teleport,
276293
},
277-
() =>
278-
props.unmountOnClose
279-
? visible.value && modal()
280-
: withDirectives(modal(), [[vShow, visible.value]]),
281-
),
282-
props.backdrop &&
283-
h(CBackdrop, {
284-
class: 'modal-backdrop',
285-
visible: visible.value,
286-
}),
287-
]
294+
{
295+
default: () => [
296+
h(
297+
Transition,
298+
{
299+
css: false,
300+
onEnter: (el, done) => handleEnter(el, done),
301+
onAfterEnter: () => handleAfterEnter(),
302+
onLeave: (el, done) => handleLeave(el, done),
303+
onAfterLeave: (el) => handleAfterLeave(el),
304+
},
305+
() =>
306+
props.unmountOnClose
307+
? visible.value && modal()
308+
: withDirectives(modal(), [[vShow, visible.value]]),
309+
),
310+
props.backdrop &&
311+
h(CBackdrop, {
312+
class: 'modal-backdrop',
313+
visible: visible.value,
314+
}),
315+
],
316+
},
317+
)
288318
},
289319
})
290320

‎packages/docs/api/modal/CModal.api.md

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,21 @@ import CModal from '@coreui/vue/src/components/modal/CModal'
88

99
#### Props
1010

11-
| Prop name | Description | Type | Values | Default |
12-
| --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------- | ------- |
13-
| **alignment** | Align the modal in the center or top of the screen. | string | `'top'`, `'center'` | 'top' |
14-
| **backdrop** | Apply a backdrop on body while offcanvas is open. | boolean\|string | `boolean \| 'static'` | true |
15-
| **content-class-name** | A string of all className you want applied to the modal content component. | string | - | - |
16-
| **focus** <br><div class="badge bg-primary">v5.0.0+</div> | Puts the focus on the modal when shown. | boolean | - | true |
17-
| **fullscreen** | Set modal to covers the entire user viewport | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | - |
18-
| **keyboard** | Closes the modal when escape key is pressed. | boolean | - | true |
19-
| **scrollable** | Create a scrollable modal that allows scrolling the modal body. | boolean | - | - |
20-
| **size** | Size the component small, large, or extra large. | string | `'sm'`, `'lg'`, `'xl'` | - |
21-
| **transition** | Remove animation to create modal that simply appear rather than fade in to view. | boolean | - | true |
22-
| **unmount-on-close** | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | boolean | - | true |
23-
| **visible** | Toggle the visibility of alert component. | boolean | - | - |
11+
| Prop name | Description | Type | Values | Default |
12+
| ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- | ------- |
13+
| **alignment** | Align the modal in the center or top of the screen. | string | `'top'`, `'center'` | 'top' |
14+
| **backdrop** | Apply a backdrop on body while offcanvas is open. | boolean\|string | `boolean \| 'static'` | true |
15+
| **container** <br><div class="badge bg-primary">5.3.0+</div> | Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | HTMLElement \| (() => HTMLElement) \| string | - | 'body' |
16+
| **content-class-name** | A string of all className you want applied to the modal content component. | string | - | - |
17+
| **focus** <br><div class="badge bg-primary">5.0.0+</div> | Puts the focus on the modal when shown. | boolean | - | true |
18+
| **fullscreen** | Set modal to covers the entire user viewport | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | - |
19+
| **keyboard** | Closes the modal when escape key is pressed. | boolean | - | true |
20+
| **scrollable** | Create a scrollable modal that allows scrolling the modal body. | boolean | - | - |
21+
| **size** | Size the component small, large, or extra large. | string | `'sm'`, `'lg'`, `'xl'` | - |
22+
| **teleport** <br><div class="badge bg-primary">5.3.0+</div> | Generates modal using Teleport. | boolean | - | false |
23+
| **transition** | Remove animation to create modal that simply appear rather than fade in to view. | boolean | - | true |
24+
| **unmount-on-close** | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | boolean | - | true |
25+
| **visible** | Toggle the visibility of alert component. | boolean | - | - |
2426

2527
#### Events
2628

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy