arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 16:00:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(useOverlay)!: handle programmatic modals and slideovers (#3279)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Eugen Istoc
2025-02-27 11:32:48 -05:00
committed by GitHub
parent 607d9a7b4e
commit 108d36fd8a
27 changed files with 422 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/content/3.components/modal.md
View File

@@ -305,21 +305,26 @@ slots:
### Programmatic usage
You can use the [`useModal`](/composables/use-modal) composable to open a Modal programatically.
You can use the [`useOverlay`](/composables/use-overlay) composable to open a Modal programatically.
::warning
Make sure to wrap your app with the [`App`](/components/app) component which uses the [`ModalProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/ModalProvider.vue) component.
Make sure to wrap your app with the [`App`](/components/app) component which uses the [`OverlayProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/OverlayProvider.vue) component.
::
First, create a modal component that will be opened programatically:
::component-example
---
prettier: true
name: 'modal-example'
preview: false
---
::
::note
We are emitting a `close` event when the modal is closed or dismissed here. You can emit any data through the `close` event, however, the event must be emitted in order to capture the return value.
::
Then, use it in your app:
::component-example

9
docs/content/3.components/slideover.md
View File

@@ -304,21 +304,26 @@ slots:
### Programmatic usage
You can use the [`useSlideover`](/composables/use-slideover) composable to open a Slideover programatically.
You can use the [`useOverlay`](/composables/use-overlay) composable to open a Slideover programatically.
::warning
Make sure to wrap your app with the [`App`](/components/app) component which uses the [`SlideoverProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/SlideoverProvider.vue) component.
Make sure to wrap your app with the [`App`](/components/app) component which uses the [`OverlayProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/OverlayProvider.vue) component.
::
First, create a slideover component that will be opened programatically:
::component-example
---
prettier: true
name: 'slideover-example'
preview: false
---
::
::note
We are emitting a `close` event when the slideover is closed or dismissed here. You can emit any data through the `close` event, however, the event must be emitted in order to capture the return value.
::
Then, use it in your app:
::component-example