@@ -8,40 +8,76 @@ import { usePositionFixed } from './usePositionFixed'
8
8
import type { DrawerRootContext } from './context'
9
9
import type { DrawerDirection } from './types'
10
10
11
- export interface WithFadeFromProps {
12
- snapPoints : ( number | string ) [ ]
13
- fadeFromIndex : number
14
- }
15
-
16
11
export interface WithoutFadeFromProps {
12
+ /**
13
+ * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
14
+ * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
15
+ * You can also use px values, which doesn't take screen height into account.
16
+ */
17
17
snapPoints ?: ( number | string ) [ ]
18
+ /**
19
+ * Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
20
+ */
18
21
fadeFromIndex ?: never
19
22
}
20
23
21
24
export type DrawerRootProps = {
22
25
activeSnapPoint ?: number | string | null
26
+ /**
27
+ * Number between 0 and 1 that determines when the drawer should be closed.
28
+ * Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
29
+ * @default 0.25
30
+ */
23
31
closeThreshold ?: number
24
32
shouldScaleBackground ?: boolean
25
33
/**
26
34
* When `false` we don't change body's background color when the drawer is open.
27
35
* @default true
28
36
*/
29
37
setBackgroundColorOnScale ?: boolean
38
+ /**
39
+ * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
40
+ * @default 500ms
41
+ */
30
42
scrollLockTimeout ?: number
43
+ /**
44
+ * When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
45
+ */
31
46
fixed ?: boolean
47
+ /**
48
+ * When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
49
+ * Use this in combination with the `open` prop, otherwise you won't be able to open/close the drawer.
50
+ * @default true
51
+ */
32
52
dismissible ?: boolean
53
+ /**
54
+ * When `false` it allows to interact with elements outside of the drawer without closing it.
55
+ * @default true
56
+ */
33
57
modal ?: boolean
34
58
open ?: boolean
59
+ /**
60
+ * Opened by default, skips initial enter animation. Still reacts to `open` state changes
61
+ * @default false
62
+ */
35
63
defaultOpen ?: boolean
36
64
nested ?: boolean
65
+ /**
66
+ * Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
67
+ * @default 'bottom'
68
+ */
37
69
direction ?: DrawerDirection
38
70
/**
39
71
* When `true` the `body` doesn't get any styles assigned from Vaul
40
72
*/
41
73
noBodyStyles ?: boolean
74
+ /**
75
+ * When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component.
76
+ * @default false
77
+ */
42
78
handleOnly ?: boolean
43
79
preventScrollRestoration ?: boolean
44
- } & WithFadeFromProps
80
+ } & WithoutFadeFromProps
45
81
46
82
export interface UseDrawerProps {
47
83
open : Ref < boolean >
@@ -68,6 +104,10 @@ export interface DrawerRootEmits {
68
104
( e : 'close' ) : void
69
105
( e : 'update:open' , open : boolean ) : void
70
106
( e : 'update:activeSnapPoint' , val : string | number ) : void
107
+ /**
108
+ * 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.
109
+ * Useful to revert any state changes for example.
110
+ */
71
111
( e : 'animationEnd' , open : boolean ) : void
72
112
}
73
113
0 commit comments