feat: add support for handle only interaction

[adamtrll]

Closes: #68

Add new DrawerHandle component and handleOnly boolean prop to DrawerHandleRoot to limit drawer interactions to the handle.

<script setup lang="ts">
import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
</script>

<template>
  <DrawerRoot should-scale-background handle-only>
    <DrawerTrigger
      class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
    >
      Open Drawer
    </DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed bg-black/40 inset-0" />
      <DrawerContent
        class="bg-gray-100 flex flex-col rounded-t-[10px] h-full mt-24 max-h-[96%] fixed bottom-0 left-0 right-0"
      >
        <div class="p-4 bg-white rounded-t-[10px] flex-1">
          <DrawerHandle>
            <div class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
          </DrawerHandle>
          <div class="max-w-md mx-auto">
            <!-- Drawer content -->
          </div>
        </div>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>

[changeset-bot]

🦋 Changeset detected

Latest commit: cf2f01e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
vaul-vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[zernonia]

Thanks for the PR @adamtrll ! Seems like there's much more to DrawerHandle, do you mind help adding the similar feature as the one in vaul's DrawerHandle?

[adamtrll]

Thanks for the review! I'll take a closer look and try to add any missing parts.

[adamtrll]

Hi @zernonia.

I implemented all the features the original handle has, including the test view for the playground.

I couldn’t figure out where the handle styles in the original playground were coming from, so I included them in a scoped style tag.

The only functional change I made is how handle clicks behave when the drawer is at the last snap point and not dismissible. The original playground "works" for two full cycles before it stops responding for handle clicks, which didn't seem intentional.

This minor change ensures that clicking the handle at the last snap point returns it to the first snap point, and it can be found at the very end of handleCycleSnapPoints.

function handleCycleSnapPoints() {
  // ...
  const nextSnapPointIndex = isLastSnapPoint ? 0 : currentSnapIndex + 1

  activeSnapPoint.value = snapPoints.value[nextSnapPointIndex]
}