1
1
<script lang =" ts" >
2
- import { clickOutside , cn } from " $lib/utils" ;
3
- import { CupertinoPane } from " cupertino-pane" ;
4
- import type { Snippet } from " svelte" ;
5
- import { swipe } from " svelte-gestures" ;
6
- import type { HTMLAttributes } from " svelte/elements" ;
2
+ import { cn } from " $lib/utils" ;
3
+ import { CupertinoPane } from " cupertino-pane" ;
4
+ import type { Snippet } from " svelte" ;
5
+ import { swipe } from " svelte-gestures" ;
6
+ import type { HTMLAttributes } from " svelte/elements" ;
7
7
8
- interface IDrawerProps extends HTMLAttributes <HTMLDivElement > {
9
- isPaneOpen? : boolean ;
10
- children? : Snippet ;
11
- handleSwipe? : (isOpen : boolean | undefined ) => void ;
12
- }
8
+ interface IDrawerProps extends HTMLAttributes <HTMLDivElement > {
9
+ isPaneOpen? : boolean ;
10
+ children? : Snippet ;
11
+ handleSwipe? : (isOpen : boolean | undefined ) => void ;
12
+ }
13
13
14
- let drawerElem: HTMLDivElement ;
15
- let pane: CupertinoPane ;
14
+ let drawerElem: HTMLDivElement ;
15
+ let pane: CupertinoPane ;
16
16
17
- let {
18
- isPaneOpen = $bindable (),
19
- children = undefined ,
20
- handleSwipe,
21
- ... restProps
22
- }: IDrawerProps = $props ();
17
+ let {
18
+ isPaneOpen = $bindable (),
19
+ children = undefined ,
20
+ handleSwipe,
21
+ ... restProps
22
+ }: IDrawerProps = $props ();
23
23
24
- const handleClickOutside = () => {
25
- pane ?.destroy ({ animate: true });
26
- isPaneOpen = false ;
27
- };
24
+ // Disabled click outside behavior to prevent white screen issues
25
+ // const handleClickOutside = () => {
26
+ // pane?.destroy({ animate: true });
27
+ // isPaneOpen = false;
28
+ // };
28
29
29
- $effect (() => {
30
- if (! drawerElem ) return ;
31
- pane = new CupertinoPane (drawerElem , {
32
- fitHeight: true ,
33
- backdrop: true ,
34
- backdropOpacity: 0.5 ,
35
- backdropBlur: true ,
36
- bottomClose: true ,
37
- buttonDestroy: false ,
38
- showDraggable: true ,
39
- upperThanTop: true ,
40
- breaks: {
41
- bottom: { enabled: true , height: 250 },
42
- },
43
- initialBreak: " bottom" ,
44
- });
30
+ $effect (() => {
31
+ if (! drawerElem ) return ;
32
+ pane = new CupertinoPane (drawerElem , {
33
+ fitHeight: true ,
34
+ backdrop: true ,
35
+ backdropOpacity: 0.5 ,
36
+ backdropBlur: true ,
37
+ bottomClose: true ,
38
+ buttonDestroy: false ,
39
+ showDraggable: true ,
40
+ upperThanTop: true ,
41
+ breaks: {
42
+ bottom: { enabled: true , height: 250 },
43
+ },
44
+ initialBreak: " bottom" ,
45
+ });
45
46
46
- if (isPaneOpen ) {
47
- pane .present ({ animate: true });
48
- } else {
49
- pane .destroy ({ animate: true });
50
- }
47
+ if (isPaneOpen ) {
48
+ pane .present ({ animate: true });
49
+ } else {
50
+ pane .destroy ({ animate: true });
51
+ }
51
52
52
- return () => pane .destroy ();
53
- });
53
+ return () => pane .destroy ();
54
+ });
54
55
</script >
55
56
56
57
<div
@@ -61,7 +62,6 @@ $effect(() => {
61
62
})}
62
63
onswipe ={() => handleSwipe ?.(isPaneOpen )}
63
64
bind:this ={drawerElem }
64
- use:clickOutside ={handleClickOutside }
65
65
class ={cn (restProps .class )}
66
66
>
67
67
<div class =" px-6" >
0 commit comments