feat(drawer): replace vaul-vue with reka-ui's native Drawer#6691
Draft
gabrielstuff wants to merge 1 commit into
Draft
feat(drawer): replace vaul-vue with reka-ui's native Drawer#6691gabrielstuff wants to merge 1 commit into
gabrielstuff wants to merge 1 commit into
Conversation
commit: |
Migrates UDrawer off vaul-vue onto reka-ui's Drawer primitives, closing the SSR crash (`document is not defined`) that vaul-vue throws when the drawer is force-mounted for SSR. reka-ui's Drawer is unstyled/headless, so the open/close slide, live drag-follow transform, and overlay fade are now authored as Tailwind utilities driven by reka's `--drawer-*` CSS vars, matching the pattern already used for Slideover's enter/exit animations. Behavioral notes: - `dismissible: false` is now enforced centrally on the open-change reason (blocks escape/outside-press/swipe/programmatic-close-without-reason) since reka's swipe-to-dismiss bypasses the outside/escape DOM events Modal-style interception relies on. - Nested drawers no longer need the `nested` prop — reka-ui detects nesting automatically via context. - Dropped props with no reka-ui equivalent: `shouldScaleBackground`, `setBackgroundColorOnScale`, `scrollLockTimeout`, `fixed`, `noBodyStyles`, `handleOnly`, `preventScrollRestoration`, `closeThreshold`. `activeSnapPoint` is renamed to `snapPoint`/`defaultSnapPoint` to match reka's naming. Updated the Drawer docs page and playground demo accordingly, and regenerated snapshots for Drawer and the components that embed it (DashboardSidebar, Header).
a12ad9c to
496bf5e
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces
vaul-vueinUDrawerwith reka-ui's own (newer) nativeDrawerprimitives, fixing the SSR crash currently thrown by vaul-vue.vaul-vue@0.4.1'sDrawerContentcallsuseScaleBackground()synchronously duringsetup(), which readsdocument.body.style.backgroundColorunguarded — throwsdocument is not definedwhen the drawer's portal is force-mounted for SSR. Repro: https://stackblitz.com/fork/github/gabrielstuff/vaul-vue-ssr-crash-repro (contrast: reka-ui's Drawer SSRs cleanly under the identical setup — https://stackblitz.com/fork/github/gabrielstuff/reka-ui-drawer-ssr-ok).reka-uiwas already a dependency (used elsewhere in the library);vaul-vueis now removed entirely.--drawer-*CSS custom properties, following the same pattern already used forSlideover's enter/exit animations (data-[state=open]:animate-[...]).Behavioral changes
dismissible: falseis now enforced centrally on the open-changereason(blocksescape-key,outside-press,swipe, and reason-less closes), rather than by intercepting individual outside-click/escape DOM events the wayModaldoes — reka's swipe-to-dismiss gesture closes the drawer directly throughonOpenChange, bypassing those DOM events entirely, so the old interception pattern would have left swipe-to-dismiss un-blockable.nestedprop — reka-ui'sDrawerdetects nesting automatically via context. The prop is removed;DrawerNestedExampleand the playground demo are updated.shouldScaleBackground,setBackgroundColorOnScale,scrollLockTimeout,fixed,noBodyStyles,handleOnly,preventScrollRestoration,closeThreshold. reka-ui's Drawer doesn't implement a background-scale effect, manual scroll-lock timing, or a handle-only drag restriction today. Thedata-vaul-drawer-wrapperroot attribute (only needed for the scale-background feature) is removed from the docs app.activeSnapPointis renamed tosnapPoint/defaultSnapPointto match reka-ui's naming (v-model:snap-point).Test plan
pnpm vitest run— full suite passes (256 files / 6365 tests), including regenerated snapshots forDrawer,DashboardSidebar, andHeader(the two consumers embedding a mobile drawer).pnpm typecheck— clean.pnpm lint— clean.playgrounds/nuxtdrawer demo page in a browser: all 4 directions, inset toggle, nested drawers (auto-scale of the parent, nonestedprop), and thedismissible: falsedemo — confirmed outside-click and Escape are both blocked while the explicit close button still works. No console errors/warnings from the Drawer itself.🤖 Generated with Claude Code