Skip to content

Commit a70097c

Browse files
huntabytehuntabyte
committed
it works
1 parent 52fd205 commit a70097c

File tree

10 files changed

+120
-91
lines changed

10 files changed

+120
-91
lines changed

‎packages/vaul-svelte/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
"types": "./dist/index.d.ts",
5454
"type": "module",
5555
"dependencies": {
56-
"bits-ui": "https://pkg.pr.new/huntabyte/bits-ui/bits-ui@8cd05f0",
56+
"bits-ui": "https://pkg.pr.new/huntabyte/bits-ui/bits-ui@3632b7e",
5757
"svelte-toolbelt": "^0.3.0"
5858
},
5959
"engines": {

‎packages/vaul-svelte/src/lib/components/drawer/drawer-content.svelte

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
</script>
3030

3131
<DialogPrimitive.Content
32-
bind:ref
3332
{...mergedProps}
3433
preventScroll={false}
3534
onMountAutoFocus={(e) => {
@@ -55,14 +54,10 @@
5554
contentState.onInteractOutside(e);
5655
}}
5756
>
57+
{@render children?.()}
5858
<Mounted
5959
onMounted={(mounted) => {
60-
if (mounted) {
61-
contentState.root.visible = true;
62-
} else {
63-
contentState.root.drawerNode = null;
64-
}
60+
contentState.mounted = mounted;
6561
}}
6662
/>
67-
{@render children?.()}
6863
</DialogPrimitive.Content>

‎packages/vaul-svelte/src/lib/components/drawer/drawer-overlay.svelte

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,7 @@
2626
<DialogPrimitive.Overlay bind:ref {...mergedProps}>
2727
<Mounted
2828
onMounted={(mounted) => {
29-
if (!mounted) {
30-
overlayState.root.overlayNode = null;
31-
}
29+
overlayState.mounted = mounted;
3230
}}
3331
/>
3432
{@render children?.()}

‎packages/vaul-svelte/src/lib/internal/helpers/style.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export function setStyles(
1212
styles: Style,
1313
ignoreCache = false
1414
) {
15-
console.log(el, styles);
1615
if (!el || !(el instanceof HTMLElement)) return;
1716
const originalStyles: Style = {};
1817

‎packages/vaul-svelte/src/lib/position-fixed.svelte.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,9 @@ export class PositionFixed {
4949

5050
const unsubListener = addEventListener(window, "scroll", onScroll);
5151

52-
return unsubListener;
52+
return () => {
53+
unsubListener();
54+
};
5355
});
5456

5557
$effect(() => {

‎packages/vaul-svelte/src/lib/vaul.svelte.ts

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,27 @@ class DrawerRootState {
9999
positionFixedState: PositionFixed;
100100
snapPointState: SnapPoints;
101101

102+
resetDrawerRootState = () => {
103+
this.hasBeenOpened = false;
104+
this.visible = false;
105+
this.justReleased = false;
106+
this.isDragging = false;
107+
this.triggerNode = null;
108+
this.overlayNode = null;
109+
this.openTime = null;
110+
this.dragStartTime = null;
111+
this.dragEndTime = null;
112+
this.lastTimeDragPrevented = null;
113+
this.isAllowedToDrag = false;
114+
this.nestedOpenChangeTimer = null;
115+
this.pointerStart = 0;
116+
this.keyboardIsOpen = false;
117+
this.previousDiffFromInitial = 0;
118+
this.drawerNode = null;
119+
this.drawerHeight = 0;
120+
this.initialDrawerHeight = 0;
121+
};
122+
102123
constructor(props: DrawerRootStateProps) {
103124
this.open = props.open;
104125
this.closeThreshold = props.closeThreshold;
@@ -252,7 +273,6 @@ class DrawerRootState {
252273
});
253274

254275
// Find all scrollable elements inside our drawer and assign a class to it so that we can disable overflow when dragging to prevent pointermove not being captured
255-
256276
$effect(() => {
257277
const visible = this.visible;
258278
const drawerNode = untrack(() => this.drawerNode);
@@ -285,11 +305,6 @@ class DrawerRootState {
285305
});
286306
}
287307

288-
cleanupBodyStyles = () => {
289-
this.scaleBackground(false);
290-
this.positionFixedState.restorePositionSetting();
291-
};
292-
293308
setActiveSnapPoint = (newValue: number | string | null | undefined) => {
294309
this.activeSnapPoint.current = newValue;
295310
};
@@ -849,6 +864,7 @@ class DrawerContentState {
849864
root: DrawerRootState;
850865
#pointerStart = $state<{ x: number; y: number } | null>(null);
851866
#wasBeyondThePoint = $state(false);
867+
mounted = $state(false);
852868

853869
constructor(props: DrawerContentStateProps, root: DrawerRootState) {
854870
this.#id = props.id;
@@ -858,11 +874,21 @@ class DrawerContentState {
858874
useRefById({
859875
id: this.#id,
860876
ref: this.#ref,
861-
condition: () => this.root.open.current,
877+
condition: () => this.mounted,
862878
onRefChange: (node) => {
879+
if (!this.mounted) {
880+
this.root.drawerNode = null;
881+
return;
882+
}
863883
this.root.drawerNode = node;
864884
},
865885
});
886+
887+
$effect(() => {
888+
const mounted = this.mounted;
889+
if (!mounted) return;
890+
this.root.visible = true;
891+
});
866892
}
867893

868894
#isDeltaInDirection = (
@@ -977,6 +1003,7 @@ class DrawerOverlayState {
9771003
#hasSnapPoints = $derived.by(
9781004
() => this.root.snapPoints.current && this.root.snapPoints.current.length > 0
9791005
);
1006+
mounted = $state(false);
9801007

9811008
constructor(props: DrawerOverlayStateProps, root: DrawerRootState) {
9821009
this.#id = props.id;
@@ -986,8 +1013,12 @@ class DrawerOverlayState {
9861013
useRefById({
9871014
id: this.#id,
9881015
ref: this.#ref,
989-
condition: () => this.root.open.current,
1016+
condition: () => this.mounted,
9901017
onRefChange: (node) => {
1018+
if (!this.mounted) {
1019+
this.root.overlayNode = null;
1020+
return;
1021+
}
9911022
this.root.overlayNode = node;
9921023
},
9931024
});

‎pnpm-lock.yaml

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sites/docs/src/lib/components/direction-drawer.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { Drawer, type DrawerDirection } from "vaul-svelte";
3-
import DrawerContent from "./drawer-content.svelte";
3+
import DrawerContent from "./drawer-content-wrapper.svelte";
44
55
let { direction }: { direction: DrawerDirection } = $props();
66
</script>

‎sites/docs/src/lib/components/drawer-content.svelte renamed to ‎sites/docs/src/lib/components/drawer-content-wrapper.svelte

File renamed without changes.

‎sites/docs/src/lib/components/hero.svelte

Lines changed: 68 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -50,73 +50,77 @@
5050
>
5151
Open Drawer
5252
</Drawer.Trigger>
53-
<Drawer.Overlay class="fixed inset-0 bg-black/40" />
54-
<Drawer.Content
55-
class="fixed bottom-0 left-0 right-0 mt-24 flex h-full max-h-[96%] flex-col rounded-t-[10px] bg-gray-100"
56-
>
57-
<div class="flex-1 rounded-t-[10px] bg-white p-4">
58-
<Drawer.Handle class="mb-8 bg-gray-300" />
59-
<CenteredContent>
60-
<p class="mb-8 text-gray-600">
61-
Here are
62-
<a href="/examples" class="underline">some more examples</a>
63-
of the component in action.
64-
</p>
65-
</CenteredContent>
66-
</div>
67-
<div class="mt-auto border-t border-gray-200 bg-gray-100 p-4">
68-
<div class="mx-auto flex max-w-md justify-end gap-6">
69-
<a
70-
class="gap-0.25 flex items-center text-xs text-gray-600"
71-
href="https://github.com/huntabyte/vaul-svelte"
72-
target="_blank"
73-
>
74-
GitHub
75-
<svg
76-
fill="none"
77-
height="16"
78-
stroke="currentColor"
79-
stroke-linecap="round"
80-
stroke-linejoin="round"
81-
stroke-width="2"
82-
viewBox="0 0 24 24"
83-
width="16"
84-
aria-hidden="true"
85-
class="ml-1 h-3 w-3"
53+
<Drawer.Portal>
54+
<Drawer.Overlay class="fixed inset-0 bg-black/40" />
55+
<Drawer.Content
56+
class="fixed bottom-0 left-0 right-0 mt-24 flex h-full max-h-[96%] flex-col rounded-t-[10px] bg-gray-100"
57+
>
58+
<div class="flex-1 rounded-t-[10px] bg-white p-4">
59+
<Drawer.Handle class="mb-8 bg-gray-300" />
60+
<CenteredContent>
61+
<p class="mb-8 text-gray-600">
62+
Here are
63+
<a href="/examples" class="underline">some more examples</a>
64+
of the component in action.
65+
</p>
66+
</CenteredContent>
67+
</div>
68+
<div class="mt-auto border-t border-gray-200 bg-gray-100 p-4">
69+
<div class="mx-auto flex max-w-md justify-end gap-6">
70+
<a
71+
class="gap-0.25 flex items-center text-xs text-gray-600"
72+
href="https://github.com/huntabyte/vaul-svelte"
73+
target="_blank"
8674
>
87-
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
88-
></path>
89-
<path d="M15 3h6v6"></path>
90-
<path d="M10 14L21 3"></path>
91-
</svg>
92-
</a>
93-
<a
94-
class="gap-0.25 flex items-center text-xs text-gray-600"
95-
href="https://twitter.com/huntabyte"
96-
target="_blank"
97-
>
98-
Twitter
99-
<svg
100-
fill="none"
101-
height="16"
102-
stroke="currentColor"
103-
stroke-linecap="round"
104-
stroke-linejoin="round"
105-
stroke-width="2"
106-
viewBox="0 0 24 24"
107-
width="16"
108-
aria-hidden="true"
109-
class="ml-1 h-3 w-3"
75+
GitHub
76+
<svg
77+
fill="none"
78+
height="16"
79+
stroke="currentColor"
80+
stroke-linecap="round"
81+
stroke-linejoin="round"
82+
stroke-width="2"
83+
viewBox="0 0 24 24"
84+
width="16"
85+
aria-hidden="true"
86+
class="ml-1 h-3 w-3"
87+
>
88+
<path
89+
d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
90+
></path>
91+
<path d="M15 3h6v6"></path>
92+
<path d="M10 14L21 3"></path>
93+
</svg>
94+
</a>
95+
<a
96+
class="gap-0.25 flex items-center text-xs text-gray-600"
97+
href="https://twitter.com/huntabyte"
98+
target="_blank"
11099
>
111-
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
112-
></path>
113-
<path d="M15 3h6v6"></path>
114-
<path d="M10 14L21 3"></path>
115-
</svg>
116-
</a>
100+
Twitter
101+
<svg
102+
fill="none"
103+
height="16"
104+
stroke="currentColor"
105+
stroke-linecap="round"
106+
stroke-linejoin="round"
107+
stroke-width="2"
108+
viewBox="0 0 24 24"
109+
width="16"
110+
aria-hidden="true"
111+
class="ml-1 h-3 w-3"
112+
>
113+
<path
114+
d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"
115+
></path>
116+
<path d="M15 3h6v6"></path>
117+
<path d="M10 14L21 3"></path>
118+
</svg>
119+
</a>
120+
</div>
117121
</div>
118-
</div>
119-
</Drawer.Content>
122+
</Drawer.Content>
123+
</Drawer.Portal>
120124
</Drawer.Root>
121125
<a
122126
href="https://github.com/huntabyte/vaul-svelte"

0 commit comments

Comments
 (0)