diff --git a/docs/app/components/content/examples/drawer/DrawerNestedExample.vue b/docs/app/components/content/examples/drawer/DrawerNestedExample.vue new file mode 100644 index 00000000..e1bf4124 --- /dev/null +++ b/docs/app/components/content/examples/drawer/DrawerNestedExample.vue @@ -0,0 +1,15 @@ + diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md index d99c4d5c..618c5d30 100644 --- a/docs/content/3.components/drawer.md +++ b/docs/content/3.components/drawer.md @@ -328,6 +328,17 @@ name: 'drawer-responsive-example' --- :: +### Nested drawers :badge{label="Soon" class="align-text-top"} + +You can nest drawers within each other by using the `nested` prop. + +::component-example +--- +prettier: true +name: 'drawer-nested-example' +--- +:: + ### With footer slot Use the `#footer` slot to add content after the Drawer's body. diff --git a/playground/app/pages/components/drawer.vue b/playground/app/pages/components/drawer.vue index 280fc5a7..1172e116 100644 --- a/playground/app/pages/components/drawer.vue +++ b/playground/app/pages/components/drawer.vue @@ -28,6 +28,20 @@ const inset = ref(false) + + + + + + diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue index 8ff30f6b..83b3c806 100644 --- a/src/runtime/components/Drawer.vue +++ b/src/runtime/components/Drawer.vue @@ -37,6 +37,11 @@ export interface DrawerProps extends Pick import { computed, toRef } from 'vue' import { VisuallyHidden, useForwardPropsEmits } from 'reka-ui' -import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue' +import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue' import { reactivePick } from '@vueuse/core' import { useAppConfig } from '#imports' import { usePortal } from '../composables/usePortal' @@ -90,7 +95,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}