Skip to content

Commit 52fd205

Browse files
huntabytehuntabyte
committed
portal is the problem
1 parent 420e678 commit 52fd205

File tree

4 files changed

+70
-108
lines changed

4 files changed

+70
-108
lines changed

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

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export function setStyles(
1212
styles: Style,
1313
ignoreCache = false
1414
) {
15+
console.log(el, styles);
1516
if (!el || !(el instanceof HTMLElement)) return;
1617
const originalStyles: Style = {};
1718

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

+4
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,10 @@ export class PositionFixed {
7575
this.restorePositionSetting();
7676
}
7777
});
78+
79+
return () => {
80+
this.restorePositionSetting();
81+
};
7882
});
7983
}
8084

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

+1-40
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,6 @@ class DrawerRootState {
9595
drawerNode = $state<HTMLElement | null>(null);
9696
drawerHeight = $state(0);
9797
initialDrawerHeight = $state(0);
98-
drawerId = $state<string | null>(null);
9998

10099
positionFixedState: PositionFixed;
101100
snapPointState: SnapPoints;
@@ -573,6 +572,7 @@ class DrawerRootState {
573572
window.setTimeout(() => {
574573
this.visible = false;
575574
this.open.current = false;
575+
this.hasBeenOpened = false;
576576
}, 300);
577577

578578
window.setTimeout(() => {
@@ -821,7 +821,6 @@ class DrawerRootState {
821821

822822
onOpenChange = (o: boolean) => {
823823
if (!o) {
824-
this.hasBeenOpened = false;
825824
this.closeDrawer();
826825
} else {
827826
this.hasBeenOpened = true;
@@ -1041,9 +1040,6 @@ class DrawerHandleState {
10411040
id: this.#id,
10421041
ref: this.#ref,
10431042
condition: () => this.root.open.current,
1044-
onRefChange: (node) => {
1045-
this.root.triggerNode = node;
1046-
},
10471043
});
10481044
}
10491045

@@ -1185,41 +1181,6 @@ function getScale() {
11851181
return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
11861182
}
11871183

1188-
function getDistanceMoved(
1189-
pointerStart: number,
1190-
direction: DrawerDirection,
1191-
event: PointerEvent | MouseEvent | TouchEvent
1192-
) {
1193-
if (event.type.startsWith("touch")) {
1194-
return getDistanceMovedForTouch(pointerStart, direction, event as TouchEvent);
1195-
} else {
1196-
return getDistanceMovedForPointer(pointerStart, direction, event as PointerEvent);
1197-
}
1198-
}
1199-
1200-
function getDistanceMovedForPointer(
1201-
pointerStart: number,
1202-
direction: DrawerDirection,
1203-
event: PointerEvent | MouseEvent
1204-
) {
1205-
return pointerStart - (isVertical(direction) ? event.screenY : event.screenX);
1206-
}
1207-
1208-
function getDistanceMovedForTouch(
1209-
pointerStart: number,
1210-
direction: DrawerDirection,
1211-
event: TouchEvent
1212-
) {
1213-
return (
1214-
pointerStart -
1215-
(isVertical(direction) ? event.changedTouches[0].screenY : event.changedTouches[0].screenX)
1216-
);
1217-
}
1218-
1219-
function getDirectionMultiplier(direction: DrawerDirection) {
1220-
return direction === "bottom" || direction === "right" ? 1 : -1;
1221-
}
1222-
12231184
export function dampenValue(v: number) {
12241185
return 8 * (Math.log(v + 1) - 2);
12251186
}

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

+64-68
Original file line numberDiff line numberDiff line change
@@ -50,77 +50,73 @@
5050
>
5151
Open Drawer
5252
</Drawer.Trigger>
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"
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"
7486
>
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"
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"
99110
>
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>
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>
121117
</div>
122-
</Drawer.Content>
123-
</Drawer.Portal>
118+
</div>
119+
</Drawer.Content>
124120
</Drawer.Root>
125121
<a
126122
href="https://github.com/huntabyte/vaul-svelte"

0 commit comments

Comments
 (0)