refactor: remove vue from package dependencies

Author: s-barati

package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "version": "0.0.0",
   "private": true,
-  "packageManager": "pnpm@10.7.0",
+  "packageManager": "pnpm@10.10.0",
   "scripts": {
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

packages/vaul-vue/package.json

@@ -41,8 +41,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^13.0.0",
-    "reka-ui": "^2.1.1",
-    "vue": "^3.5.13"
+    "reka-ui": "^2.1.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.11.0",

packages/vaul-vue/src/DrawerRoot.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { DrawerRootEmits, DrawerRootProps } from './controls'
+import { useVModel } from '@vueuse/core'
 import { DialogRoot } from 'reka-ui'
 import { computed, ref, toRefs } from 'vue'
 import { CLOSE_THRESHOLD, SCROLL_LOCK_TIMEOUT, TRANSITIONS } from './constants'
@@ -9,6 +10,8 @@ import { transitionDurationToMs } from './helpers'
 import './style.css'
 
 const props = withDefaults(defineProps<DrawerRootProps>(), {
+  open: undefined,
+  defaultOpen: undefined,
   fixed: false,
   dismissible: true,
   snapPoints: undefined,
@@ -23,35 +26,32 @@ const props = withDefaults(defineProps<DrawerRootProps>(), {
   handleOnly: false,
 })
 
-const emit = defineEmits<DrawerRootEmits>()
+const emits = defineEmits<DrawerRootEmits>()
 
 const slots = defineSlots<{
   default: (props: {
     open: typeof open.value
   }) => any
 }>()
 
-const open = defineModel<boolean>('open', {
-  required: false,
-  default: false,
+const open = useVModel(props, 'open', emits, {
+  defaultValue: props.defaultOpen,
+  passive: (props.open === undefined) as false,
 })
 
-const activeSnapPoint = defineModel<number | string | null>('activeSnapPoint', {
-  required: false,
-  default: null,
+const activeSnapPoint = useVModel(props, 'activeSnapPoint', emits, {
+  passive: (props.activeSnapPoint === undefined) as false,
 })
 
-const defaultOpen = ref(open.value)
-
 const fadeFromIndex = computed(() => props.fadeFromIndex ?? (props.snapPoints && props.snapPoints.length - 1))
 
 const emitHandlers = {
-  emitDrag: (percentageClosed: number) => emit('drag', percentageClosed),
-  emitRelease: (open: boolean) => emit('release', open),
-  emitClose: () => emit('close'),
+  emitDrag: (percentageClosed: number) => emits('drag', percentageClosed),
+  emitRelease: (open: boolean) => emits('release', open),
+  emitClose: () => emits('close'),
   emitOpenChange: (o: boolean) => {
     window.setTimeout(() => {
-      emit('animationEnd', o)
+      emits('animationEnd', o)
     }, transitionDurationToMs(TRANSITIONS.DURATION))
   },
 }
@@ -61,7 +61,7 @@ const context = useDrawer({
   ...toRefs(props),
   activeSnapPoint,
   fadeFromIndex,
-  open,
+  open: open as any,
 })
 
 const { hasBeenOpened, modal } = context
@@ -71,11 +71,17 @@ provideDrawerRootContext(context)
 const openProxy = computed({
   get: () => open.value,
   set: (o: boolean) => {
-    open.value = o
+    if (!props.dismissible && !open.value)
+      return
 
     if (o) {
       hasBeenOpened.value = true
     }
+    else {
+      context.closeDrawer(true)
+    }
+
+    open.value = o
   },
 })
 

packages/vaul-vue/src/DrawerRootNested.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { DrawerRootEmits, DrawerRootProps } from './controls'
+import { useVModel } from '@vueuse/core'
 import { useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
 import { injectDrawerRootContext } from './context'
 import DrawerRoot from './DrawerRoot.vue'
-import { watchEffect } from 'vue';
 
 const props = defineProps<DrawerRootProps>()
 
@@ -15,30 +16,24 @@ const {
   onNestedRelease,
 } = injectDrawerRootContext()
 
-const open = defineModel<boolean>('open', {
-  required: false,
-  default: false,
-})
+const delegatedProps = computed(() => {
+  const { nested: _, ...delegated } = props
 
-const activeSnapPoint = defineModel<number | string | null>('activeSnapPoint', {
-  required: false,
-  default: null,
+  return delegated
 })
 
-const forwarded: ReturnType<typeof useForwardPropsEmits> = useForwardPropsEmits(props, emits)
-
-watchEffect(() => {
-  onNestedOpenChange(open.value)
-})
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <DrawerRoot
-    v-bind="forwarded"
-    v-model:open="open"
-    :should-scale-background="false"
-    :active-snap-point="activeSnapPoint"
     nested
+    v-bind="forwarded"
+    @update:open="(o) => {
+      if (o) {
+        onNestedOpenChange(o);
+      }
+    }"
     @close="onNestedOpenChange(false)"
     @drag="onNestedDrag"
     @release="onNestedRelease"

packages/vaul-vue/src/controls.ts

@@ -21,6 +21,13 @@ export interface WithoutFadeFromProps {
 }
 
 export type DrawerRootProps = {
+  activeSnapPoint?: number | string | null
+  open?: boolean
+  /**
+   * Opened by default, skips initial enter animation. Still reacts to `open` state changes
+   * @default false
+   */
+  defaultOpen?: boolean
   /**
    * Number between 0 and 1 that determines when the drawer should be closed.
    * Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
@@ -101,6 +108,8 @@ export interface DrawerRootEmits {
   (e: 'drag', percentageClosed: number): void
   (e: 'release', open: boolean): void
   (e: 'close'): void
+  (e: 'update:open', open: boolean): void
+  (e: 'update:activeSnapPoint', val: string | number): void
   /**
    * Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered.
    * Useful to revert any state changes for example.