-
This drawer is nested.
+
This drawer is nested.
Place a
- `Drawer.NestedRoot`
- inside another drawer and it will be nested automatically for you.
+
+ `Drawer.NestedRoot`
+
+ inside another drawer and it will be nested automatically
+ for you.
You can view more examples
@@ -92,7 +102,9 @@
aria-hidden="true"
class="ml-1 h-3 w-3"
>
-
@@ -15,7 +15,7 @@
class="fixed bottom-0 left-0 right-0 mt-24 flex h-full max-h-[96%] flex-col rounded-t-[10px] bg-gray-100"
>
-
+
Here are
diff --git a/sites/docs/src/routes/examples/scrollable-drawer.svelte b/sites/docs/src/routes/examples/scrollable-drawer.svelte
new file mode 100644
index 0000000..8fab31d
--- /dev/null
+++ b/sites/docs/src/routes/examples/scrollable-drawer.svelte
@@ -0,0 +1,53 @@
+
+
+
+
+ Open Scrollable Drawer
+
+
+
+
+
+
+ But I must explain to you how all this mistaken idea of denouncing pleasure and
+ praising pain was born and I will give you a complete account of the system, and
+ expound the actual teachings of the great explorer of the truth, the
+ master-builder of human happiness. No one rejects, dislikes, or avoids pleasure
+ itself, because it is pleasure, but because those who do not know how to pursue
+ pleasure rationally encounter consequences that are extremely painful. Nor again
+ is there anyone who loves or pursues or desires to obtain pain of itself,
+ because it is pain, but because occasionally circumstances occur in which toil
+ and pain can procure him some great pleasure. To take a trivial example, which
+ of us ever undertakes laborious physical exercise, except to obtain some
+ advantage from it? But who has any right to find fault with a man who chooses to
+ enjoy a pleasure that has no annoying consequences, or one who avoids a pain
+ that produces no resultant pleasure?
+
+
+
+ On the other hand, we denounce with righteous indignation and dislike men who
+ are so beguiled and demoralized by the charms of pleasure of the moment, so
+ blinded by desire, that they cannot foresee the pain and trouble that are bound
+ to ensue; and equal blame belongs to those who fail in their duty through
+ weakness of will, which is the same as saying through shrinking from toil and
+ pain. These cases are perfectly simple and easy to distinguish. In a free hour,
+ when our power of choice is untrammelled and when nothing prevents our being
+ able to do what we like best, every pleasure is to be welcomed and every pain
+ avoided. But in certain circumstances and owing to the claims of duty or the
+ obligations of business it will frequently occur that pleasures have to be
+ repudiated and annoyances accepted. The wise man therefore always holds in these
+ matters to this principle of selection: he rejects pleasures to secure other
+ greater pleasures, or else he endures pains to avoid worse pains.
+
+
+
+
+
diff --git a/src/routes/examples/snap-point-drawer.svelte b/sites/docs/src/routes/examples/snap-point-drawer.svelte
similarity index 85%
rename from src/routes/examples/snap-point-drawer.svelte
rename to sites/docs/src/routes/examples/snap-point-drawer.svelte
index ae8a469..0e55ec8 100644
--- a/src/routes/examples/snap-point-drawer.svelte
+++ b/sites/docs/src/routes/examples/snap-point-drawer.svelte
@@ -1,9 +1,9 @@
@@ -89,11 +89,13 @@
The Hidden Details
2 modules, 27 hours of video
- The world of user interface design is an intricate landscape filled with hidden details
- and nuance. In this course, you will learn something cool. To the untrained eye, a
- beautifully designed UI.
+ The world of user interface design is an intricate landscape filled with hidden
+ details and nuance. In this course, you will learn something cool. To the
+ untrained eye, a beautifully designed UI.
-
+
Buy for $199
@@ -101,7 +103,9 @@
Layers of UI
- A basic introduction to Layers of Design.
+ A basic introduction to Layers of Design.
Typography
@@ -109,18 +113,23 @@
UI Animations
- Going through the right easings and durations.
+ Going through the right easings and durations.
- “I especially loved the hidden details video. That was so useful, learned a lot by
- just reading it. Can’t wait for more course content!”
+ “I especially loved the hidden details video. That was so useful,
+ learned a lot by just reading it. Can’t wait for more course
+ content!”
- Yvonne Ray, Frontend Developer
+ Yvonne Ray, Frontend Developer
@@ -133,7 +142,9 @@
User Insight
- Find out what users think and fine-tune.
+ Find out what users think and fine-tune.
Putting it all together
diff --git a/sites/docs/static/favicon.png b/sites/docs/static/favicon.png
new file mode 100644
index 0000000..825b9e6
Binary files /dev/null and b/sites/docs/static/favicon.png differ
diff --git a/sites/docs/svelte.config.js b/sites/docs/svelte.config.js
new file mode 100644
index 0000000..d1e90b0
--- /dev/null
+++ b/sites/docs/svelte.config.js
@@ -0,0 +1,23 @@
+import path from "node:path";
+import url from "node:url";
+import adapter from "@sveltejs/adapter-cloudflare";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+ preprocess: vitePreprocess({
+ style: {
+ css: {
+ postcss: path.join(__dirname, "postcss.config.cjs"),
+ },
+ },
+ }),
+
+ kit: {
+ adapter: adapter(),
+ },
+};
+
+export default config;
diff --git a/tailwind.config.cjs b/sites/docs/tailwind.config.js
similarity index 51%
rename from tailwind.config.cjs
rename to sites/docs/tailwind.config.js
index 5373ea1..b4829f3 100644
--- a/tailwind.config.cjs
+++ b/sites/docs/tailwind.config.js
@@ -1,5 +1,5 @@
-/** @type {import('tailwindcss').Config}*/
-const config = {
+/** @type {import('tailwindcss').Config} */
+export default {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
@@ -8,5 +8,3 @@ const config = {
plugins: [],
};
-
-module.exports = config;
diff --git a/sites/docs/tsconfig.json b/sites/docs/tsconfig.json
new file mode 100644
index 0000000..fc93cbd
--- /dev/null
+++ b/sites/docs/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "extends": "./.svelte-kit/tsconfig.json",
+ "compilerOptions": {
+ "allowJs": true,
+ "checkJs": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+ "sourceMap": true,
+ "strict": true,
+ "moduleResolution": "bundler"
+ }
+ // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+ // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+ //
+ // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+ // from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/sites/docs/vite.config.ts b/sites/docs/vite.config.ts
new file mode 100644
index 0000000..6b9eb5d
--- /dev/null
+++ b/sites/docs/vite.config.ts
@@ -0,0 +1,6 @@
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+ plugins: [sveltekit()],
+});
diff --git a/src/lib/index.ts b/src/lib/index.ts
deleted file mode 100644
index 3015bcf..0000000
--- a/src/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./vaul/index.js";
diff --git a/src/lib/internal/constants.ts b/src/lib/internal/constants.ts
deleted file mode 100644
index 0ef43e5..0000000
--- a/src/lib/internal/constants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const TRANSITIONS = {
- DURATION: 0.5,
- EASE: [0.32, 0.72, 0, 1],
-};
-
-export const VELOCITY_THRESHOLD = 0.4;
diff --git a/src/lib/internal/escape-keydown.ts b/src/lib/internal/escape-keydown.ts
deleted file mode 100644
index 85d897a..0000000
--- a/src/lib/internal/escape-keydown.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { readable } from "svelte/store";
-import { addEventListener } from "./helpers/event-listener.js";
-import { chain } from "$lib/internal/helpers/index.js";
-import { noop } from "$lib/internal/helpers/index.js";
-
-/**
- * Creates a readable store that tracks the latest Escape Keydown that occurred on the document.
- *
- * @returns A function to unsubscribe from the event listener and stop tracking keydown events.
- */
-const documentEscapeKeyStore = readable
(
- undefined,
- (set): (() => void) => {
- /**
- * Event handler for keydown events on the document.
- * Updates the store's value with the latest Escape Keydown event and then resets it to undefined.
- */
- function keydown(event: KeyboardEvent | undefined) {
- if (event && event.key === "Escape") {
- set(event);
- }
-
- // New subscriptions will not trigger immediately
- set(undefined);
- }
-
- // Adds a keydown event listener to the document, calling the keydown function when triggered.
- const unsubscribe = addEventListener(document, "keydown", keydown, {
- passive: false,
- });
-
- // Returns a function to unsubscribe from the event listener and stop tracking keydown events.
- return unsubscribe;
- }
-);
-
-export function handleEscapeKeydown(node: HTMLElement, handler: (e: KeyboardEvent) => void) {
- let unsub = noop;
- function update(handler: (e: KeyboardEvent) => void) {
- // unsubscribe from the previous config/listeners if they exist
- unsub();
-
- unsub = chain(
- // Handle escape keydowns
- documentEscapeKeyStore.subscribe((e) => {
- if (!e) return;
- const target = e.target;
-
- if (!isHTMLElement(target) || target.closest("[data-escapee]") !== node) {
- return;
- }
-
- // preventDefault here to prevent exiting fullscreen for mac
- e.preventDefault();
-
- handler(e);
- })
- );
-
- // to remain compatible with nested Bits/Melt components, we set a data
- // attribute to indicate that this element is handling escape keydowns
- // so we only handle the highest level escapee
- node.setAttribute("data-escapee", "");
- }
-
- update(handler);
-
- return () => {
- unsub();
- node.removeAttribute("data-escapee");
- };
-}
-
-function isHTMLElement(el: unknown): el is HTMLElement {
- return el instanceof HTMLElement;
-}
diff --git a/src/lib/internal/helpers/chain.ts b/src/lib/internal/helpers/chain.ts
deleted file mode 100644
index 71dfa2f..0000000
--- a/src/lib/internal/helpers/chain.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function chain(...callbacks: any[]): (...args: any[]) => void {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- return (...args: any[]) => {
- for (const callback of callbacks) {
- if (typeof callback === "function") {
- callback(...args);
- }
- }
- };
-}
diff --git a/src/lib/internal/helpers/event-listener.ts b/src/lib/internal/helpers/event-listener.ts
deleted file mode 100644
index 67e354c..0000000
--- a/src/lib/internal/helpers/event-listener.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Arrayable } from "$lib/internal/types.js";
-/**
- * A type alias for a general event listener function.
- *
- * @template E - The type of event to listen for
- * @param evt - The event object
- * @returns The return value of the event listener function
- */
-export type GeneralEventListener = (evt: E) => unknown;
-
-/**
- * Overloaded function signatures for addEventListener
- */
-export function addEventListener(
- target: Window,
- event: E,
- handler: (this: Window, ev: HTMLElementEventMap[E]) => unknown,
- options?: boolean | AddEventListenerOptions
-): VoidFunction;
-
-export function addEventListener(
- target: Document,
- event: E,
- handler: (this: Document, ev: HTMLElementEventMap[E]) => unknown,
- options?: boolean | AddEventListenerOptions
-): VoidFunction;
-
-export function addEventListener(
- target: EventTarget,
- event: E,
- handler: GeneralEventListener,
- options?: boolean | AddEventListenerOptions
-): VoidFunction;
-/**
- * Adds an event listener to the specified target element(s) for the given event(s), and returns a function to remove it.
- * @param target The target element(s) to add the event listener to.
- * @param event The event(s) to listen for.
- * @param handler The function to be called when the event is triggered.
- * @param options An optional object that specifies characteristics about the event listener.
- * @returns A function that removes the event listener from the target element(s).
- */
-export function addEventListener(
- target: Window | Document | EventTarget,
- event: Arrayable,
- handler: EventListenerOrEventListenerObject,
- options?: boolean | AddEventListenerOptions
-) {
- const events = Array.isArray(event) ? event : [event];
-
- // Add the event listener to each specified event for the target element(s).
- events.forEach((_event) => target.addEventListener(_event, handler, options));
-
- // Return a function that removes the event listener from the target element(s).
- return () => {
- events.forEach((_event) => target.removeEventListener(_event, handler, options));
- };
-}
diff --git a/src/lib/internal/helpers/index.ts b/src/lib/internal/helpers/index.ts
deleted file mode 100644
index d0aeacc..0000000
--- a/src/lib/internal/helpers/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from "./store.js";
-export * from "./object.js";
-export * from "./style.js";
-export * from "./noop.js";
-export * from "./event-listener.js";
-export * from "./is.js";
-export * from "./chain.js";
-export * from "./sleep.js";
diff --git a/src/lib/internal/helpers/object.ts b/src/lib/internal/helpers/object.ts
deleted file mode 100644
index ad06848..0000000
--- a/src/lib/internal/helpers/object.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export type ValueOf = T[keyof T];
-
-export function omit, K extends keyof T>(
- obj: T,
- ...keys: K[]
-): Omit {
- const result = {} as Omit;
- for (const key of Object.keys(obj)) {
- if (!keys.includes(key as unknown as K)) {
- result[key as keyof Omit] = obj[key] as ValueOf>;
- }
- }
- return result;
-}
-
-export function removeUndefined(obj: T): T {
- const result = {} as T;
- for (const key in obj) {
- const value = obj[key];
- if (value !== undefined) {
- result[key] = value;
- }
- }
- return result;
-}
diff --git a/src/lib/internal/helpers/options.ts b/src/lib/internal/helpers/options.ts
deleted file mode 100644
index 33dee27..0000000
--- a/src/lib/internal/helpers/options.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { StoresValues, Writable } from "svelte/store";
-
-type Options = Record>;
-
-export function getOptionUpdater(options: Options) {
- return function <
- K extends keyof typeof options,
- V extends StoresValues<(typeof options)[keyof typeof options]>,
- >(key: K, value: V | undefined) {
- if (value === undefined) return;
- const store = options[key];
- if (store) {
- store.set(value as never);
- }
- };
-}
diff --git a/src/lib/internal/helpers/sleep.ts b/src/lib/internal/helpers/sleep.ts
deleted file mode 100644
index 2df63d3..0000000
--- a/src/lib/internal/helpers/sleep.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function sleep(ms: number) {
- return new Promise((resolve) => setTimeout(resolve, ms));
-}
diff --git a/src/lib/internal/helpers/store.ts b/src/lib/internal/helpers/store.ts
deleted file mode 100644
index 8c85e02..0000000
--- a/src/lib/internal/helpers/store.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import type { Readable, Stores, StoresValues, Updater, Writable } from "svelte/store";
-import { derived, writable } from "svelte/store";
-import { onDestroy, onMount } from "svelte";
-
-/**
- * A utility function that creates an effect from a set of stores and a function.
- * The effect is automatically cleaned up when the component is destroyed.
- *
- * @template S - The type of the stores object
- * @param stores - The stores object to derive from
- * @param fn - The function to run when the stores change
- * @returns A function that can be used to unsubscribe the effect
- */
-export function effect(
- stores: S,
- fn: (values: StoresValues) => (() => void) | void
-): () => void {
- if (typeof document === "undefined") {
- return () => {};
- }
- // Create a derived store that contains the stores object and an onUnsubscribe function
- const unsub = derivedWithUnsubscribe(stores, (stores, onUnsubscribe) => {
- return {
- stores,
- onUnsubscribe,
- };
- }).subscribe(({ stores, onUnsubscribe }) => {
- const returned = fn(stores);
- // If the function returns a cleanup function, call it when the effect is unsubscribed
- if (returned) {
- onUnsubscribe(returned);
- }
- });
-
- // Automatically unsubscribe the effect when the component is destroyed
- safeOnDestroy(unsub);
- return unsub;
-}
-
-/**
- * A utility function that creates a derived store that automatically
- * unsubscribes from its dependencies.
- *
- * @template S - The type of the stores object
- * @template T - The type of the derived store
- * @param stores - The stores object to derive from
- * @param fn - The function to derive the store from
- * @returns A derived store that automatically unsubscribes from its dependencies
- */
-export function derivedWithUnsubscribe(
- stores: S,
- fn: (values: StoresValues, onUnsubscribe: (cb: () => void) => void) => T
-): Readable {
- let unsubscribers: (() => void)[] = [];
- const onUnsubscribe = (cb: () => void) => {
- unsubscribers.push(cb);
- };
-
- const unsubscribe = () => {
- // Call all of the unsubscribe functions from the previous run of the function
- unsubscribers.forEach((fn) => fn());
- // Clear the list of unsubscribe functions
- unsubscribers = [];
- };
-
- const derivedStore = derived(stores, ($storeValues) => {
- unsubscribe();
- return fn($storeValues, onUnsubscribe);
- });
-
- safeOnDestroy(unsubscribe);
-
- const subscribe: typeof derivedStore.subscribe = (...args) => {
- const unsub = derivedStore.subscribe(...args);
- return () => {
- unsub();
- unsubscribe();
- };
- };
-
- return {
- ...derivedStore,
- subscribe,
- };
-}
-
-export const safeOnMount = (fn: (...args: unknown[]) => unknown) => {
- try {
- onMount(fn);
- } catch {
- return fn();
- }
-};
-
-export const safeOnDestroy = (fn: (...args: unknown[]) => unknown) => {
- try {
- onDestroy(fn);
- } catch {
- return fn();
- }
-};
-
-export type ChangeFn = (args: { curr: T; next: T }) => T;
-
-export const overridable = (store: Writable, onChange?: ChangeFn) => {
- const update = (updater: Updater, sideEffect?: (newValue: T) => void) => {
- store.update((curr) => {
- const next = updater(curr);
- let res: T = next;
- if (onChange) {
- res = onChange({ curr, next });
- }
-
- sideEffect?.(res);
- return res;
- });
- };
-
- const set: typeof store.set = (curr) => {
- update(() => curr);
- };
-
- return {
- ...store,
- update,
- set,
- };
-};
-
-export type ToWritableStores> = {
- [K in keyof T]: Writable;
-};
-
-/**
- * Given an object of properties, returns an object of writable stores
- * with the same properties and values.
- */
-export function toWritableStores>(
- properties: T
-): ToWritableStores {
- const result = {} as { [K in keyof T]: Writable };
-
- Object.keys(properties).forEach((key) => {
- const propertyKey = key as keyof T;
- const value = properties[propertyKey];
- result[propertyKey] = writable(value);
- });
-
- return result;
-}
diff --git a/src/lib/internal/helpers/style.ts b/src/lib/internal/helpers/style.ts
deleted file mode 100644
index 08b4f91..0000000
--- a/src/lib/internal/helpers/style.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { DrawerDirection } from "../types.js";
-import { isVertical } from "./index.js";
-
-interface Style {
- [key: string]: string;
-}
-
-const cache = new WeakMap();
-
-export function set(el?: Element | HTMLElement | null, styles?: Style, ignoreCache = false) {
- if (!el || !(el instanceof HTMLElement) || !styles) return;
-
- const originalStyles: Style = {};
-
- Object.entries(styles).forEach(([key, value]: [string, string]) => {
- if (key.startsWith("--")) {
- el.style.setProperty(key, value);
- return;
- }
-
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- originalStyles[key] = (el.style as any)[key];
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (el.style as any)[key] = value;
- });
-
- if (ignoreCache) return;
-
- cache.set(el, originalStyles);
-}
-
-export function reset(el: Element | HTMLElement | null, prop?: string) {
- if (!el || !(el instanceof HTMLElement)) return;
- const originalStyles = cache.get(el);
-
- if (!originalStyles) {
- return;
- }
-
- if (prop) {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (el.style as any)[prop] = originalStyles[prop];
- } else {
- Object.entries(originalStyles).forEach(([key, value]) => {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (el.style as any)[key] = value;
- });
- }
-}
-
-export function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null {
- const style = window.getComputedStyle(element);
- const transform =
- // @ts-expect-error - vendor prefix
- style.transform || style.webkitTransform || style.mozTransform;
- let mat = transform.match(/^matrix3d\((.+)\)$/);
- if (mat) {
- // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
- return parseFloat(mat[1].split(", ")[isVertical(direction) ? 13 : 12]);
- }
- // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
- mat = transform.match(/^matrix\((.+)\)$/);
- return mat ? parseFloat(mat[1].split(", ")[isVertical(direction) ? 5 : 4]) : null;
-}
-
-export function styleToString(style: Record): string {
- return Object.keys(style).reduce((str, key) => {
- if (style[key] === undefined) return str;
- return str + `${key}:${style[key]};`;
- }, "");
-}
diff --git a/src/lib/internal/index.ts b/src/lib/internal/index.ts
deleted file mode 100644
index 994626d..0000000
--- a/src/lib/internal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./types.js";
-export * from "./vaul.js";
diff --git a/src/lib/internal/position-fixed.ts b/src/lib/internal/position-fixed.ts
deleted file mode 100644
index 108f9f0..0000000
--- a/src/lib/internal/position-fixed.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { onMount } from "svelte";
-import { writable, get, type Writable } from "svelte/store";
-import { effect, addEventListener } from "./helpers/index.js";
-
-let previousBodyPosition: Record | null = null;
-
-export function handlePositionFixed({
- isOpen,
- modal,
- nested,
- hasBeenOpened,
-}: {
- isOpen: Writable;
- modal: Writable;
- nested: Writable;
- hasBeenOpened: Writable;
-}) {
- const activeUrl = writable(typeof window !== "undefined" ? window.location.href : "");
- let scrollPos = 0;
-
- function setPositionFixed(open: boolean) {
- // If previousBodyPosition is already set, don't set it again.
- if (!(previousBodyPosition === null && open)) return;
-
- previousBodyPosition = {
- position: document.body.style.position,
- top: document.body.style.top,
- left: document.body.style.left,
- height: document.body.style.height,
- };
-
- // Update the dom inside an animation frame
- const { scrollX, innerHeight } = window;
-
- document.body.style.setProperty("position", "fixed", "important");
- document.body.style.top = `${-scrollPos}px`;
- document.body.style.left = `${-scrollX}px`;
- document.body.style.right = "0px";
- document.body.style.height = "auto";
-
- setTimeout(
- () =>
- requestAnimationFrame(() => {
- // Attempt to check if the bottom bar appeared due to the position change
- const bottomBarHeight = innerHeight - window.innerHeight;
- if (bottomBarHeight && scrollPos >= innerHeight) {
- // Move the content further up so that the bottom bar doesn't hide it
- document.body.style.top = `${-(scrollPos + bottomBarHeight)}px`;
- }
- }),
- 300
- );
- }
-
- function restorePositionSetting() {
- if (previousBodyPosition === null) return;
- const $activeUrl = get(activeUrl);
- // Convert the position from "px" to Int
- const y = -parseInt(document.body.style.top, 10);
- const x = -parseInt(document.body.style.left, 10);
-
- // Restore styles
- document.body.style.position = previousBodyPosition.position;
- document.body.style.top = previousBodyPosition.top;
- document.body.style.left = previousBodyPosition.left;
- document.body.style.height = previousBodyPosition.height;
- document.body.style.right = "unset";
-
- requestAnimationFrame(() => {
- if ($activeUrl !== window.location.href) {
- activeUrl.set(window.location.href);
- return;
- }
-
- window.scrollTo(x, y);
- });
-
- previousBodyPosition = null;
- }
-
- onMount(() => {
- function onScroll() {
- scrollPos = window.scrollY;
- }
-
- onScroll();
-
- const removeListener = addEventListener(window, "scroll", onScroll);
-
- return () => {
- removeListener;
- };
- });
-
- effect([isOpen, activeUrl], ([$isOpen, _]) => {
- if (typeof document === "undefined") return;
- if (get(nested) || !get(hasBeenOpened)) return;
- // This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening
- if ($isOpen) {
- setPositionFixed($isOpen);
-
- if (!get(modal)) {
- setTimeout(() => {
- restorePositionSetting();
- }, 500);
- }
- } else {
- restorePositionSetting();
- }
- });
-
- return { restorePositionSetting };
-}
diff --git a/src/lib/internal/prevent-scroll.ts b/src/lib/internal/prevent-scroll.ts
deleted file mode 100644
index 23de5dd..0000000
--- a/src/lib/internal/prevent-scroll.ts
+++ /dev/null
@@ -1,305 +0,0 @@
-// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
-
-import { addEventListener, chain, isInput } from "$lib/internal/helpers/index.js";
-
-function isMac(): boolean | undefined {
- return testPlatform(/^Mac/);
-}
-
-function isIPhone(): boolean | undefined {
- return testPlatform(/^iPhone/);
-}
-
-export function isSafari(): boolean | undefined {
- return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-}
-
-function isIPad(): boolean | undefined {
- return (
- testPlatform(/^iPad/) ||
- // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
- (isMac() && navigator.maxTouchPoints > 1)
- );
-}
-
-export function isIOS(): boolean | undefined {
- return isIPhone() || isIPad();
-}
-
-function testPlatform(re: RegExp): boolean | undefined {
- return typeof window !== "undefined" && window.navigator != null
- ? re.test(window.navigator.platform)
- : undefined;
-}
-
-const visualViewport = typeof document !== "undefined" && window.visualViewport;
-
-export function isScrollable(node: Element): boolean {
- const style = window.getComputedStyle(node);
- return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
-}
-
-export function getScrollParent(node: Element): Element {
- if (isScrollable(node)) {
- node = node.parentElement as HTMLElement;
- }
-
- while (node && !isScrollable(node)) {
- node = node.parentElement as HTMLElement;
- }
-
- return node || document.scrollingElement || document.documentElement;
-}
-
-// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
-let preventScrollCount = 0;
-let restore: () => void;
-
-/**
- * Prevents scrolling on the document body on mount, and
- * restores it on unmount. Also ensures that content does not
- * shift due to the scrollbars disappearing.
- */
-export function preventScroll() {
- if (typeof document === "undefined") return () => {};
-
- preventScrollCount++;
- if (preventScrollCount === 1) {
- if (isIOS()) {
- restore = preventScrollMobileSafari();
- } else {
- restore = preventScrollStandard();
- }
- }
-
- return () => {
- preventScrollCount--;
- if (preventScrollCount === 0) {
- restore();
- }
- };
-}
-
-function getPaddingProperty(documentElement: HTMLElement) {
- // RTL scrollbar
- const documentLeft = documentElement.getBoundingClientRect().left;
- const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft;
- return scrollbarX ? "paddingLeft" : "paddingRight";
-}
-
-function setCSSProperty(el: HTMLElement | null | undefined, property: string, value: string) {
- if (!el) return;
- const previousValue = el.style.getPropertyValue(property);
- el.style.setProperty(property, value);
- return () => {
- if (previousValue) {
- el.style.setProperty(property, previousValue);
- } else {
- el.style.removeProperty(property);
- }
- };
-}
-
-// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
-// add some padding to prevent the page from shifting when the scrollbar is hidden.
-function preventScrollStandard() {
- if (typeof document === "undefined") return () => {};
- const win = document.defaultView ?? window;
-
- const { documentElement, body } = document;
- const scrollbarWidth = win.innerWidth - documentElement.clientWidth;
- const setScrollbarWidthProperty = () =>
- setCSSProperty(documentElement, "--scrollbar-width", `${scrollbarWidth}px`);
- const paddingProperty = getPaddingProperty(documentElement);
- const scrollbarSidePadding = win.getComputedStyle(body)[paddingProperty];
-
- return chain(
- setScrollbarWidthProperty(),
- setStyle(body, paddingProperty, `calc(${scrollbarSidePadding} + ${scrollbarWidth}px)`),
- setStyle(body, "overflow", "hidden")
- );
-}
-
-// Mobile Safari is a whole different beast. Even with overflow: hidden,
-// it still scrolls the page in many situations:
-//
-// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
-// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
-// it, so it becomes scrollable.
-// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
-// This may cause even fixed position elements to scroll off the screen.
-// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
-// scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
-//
-// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
-//
-// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
-// on the window.
-// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
-// top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
-// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
-// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
-// of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
-// into view ourselves, without scrolling the whole page.
-// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
-// same visually, but makes the actual scroll position always zero. This is required to make all of the
-// above work or Safari will still try to scroll the page when focusing an input.
-// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
-// to navigate to an input with the next/previous buttons that's outside a modal.
-function preventScrollMobileSafari() {
- let scrollable: Element;
- let lastY = 0;
- const { documentElement, body, activeElement } = document;
-
- function onTouchStart(e: TouchEvent) {
- // Store the nearest scrollable parent element from the element that the user touched.
- scrollable = getScrollParent(e.target as Element);
- if (scrollable === documentElement && scrollable === body) return;
-
- lastY = e.changedTouches[0].pageY;
- }
-
- function onTouchMove(e: TouchEvent) {
- // Prevent scrolling the window.
- if (!scrollable || scrollable === documentElement || scrollable === body) {
- e.preventDefault();
- return;
- }
-
- // Prevent scrolling up when at the top and scrolling down when at the bottom
- // of a nested scrollable area, otherwise mobile Safari will start scrolling
- // the window instead. Unfortunately, this disables bounce scrolling when at
- // the top but it's the best we can do.
- const y = e.changedTouches[0].pageY;
- const scrollTop = scrollable.scrollTop;
- const bottom = scrollable.scrollHeight - scrollable.clientHeight;
-
- if (bottom === 0) return;
-
- if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {
- e.preventDefault();
- }
-
- lastY = y;
- }
-
- function onTouchEnd(e: TouchEvent) {
- const target = e.target as HTMLElement;
- if (!(isInput(target) && target !== activeElement)) return;
- // Apply this change if we're not already focused on the target element
- e.preventDefault();
-
- // Apply a transform to trick Safari into thinking the input is at the top of the page
- // so it doesn't try to scroll it into view. When tapping on an input, this needs to
- // be done before the "focus" event, so we have to focus the element ourselves.
- target.style.transform = "translateY(-2000px)";
- target.focus();
- requestAnimationFrame(() => {
- target.style.transform = "";
- });
- }
-
- function onFocus(e: FocusEvent) {
- const target = e.target as HTMLElement;
- if (!isInput(target)) return;
-
- // Transform also needs to be applied in the focus event in cases where focus moves
- // other than tapping on an input directly, e.g. the next/previous buttons in the
- // software keyboard. In these cases, it seems applying the transform in the focus event
- // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷♂️
- target.style.transform = "translateY(-2000px)";
- requestAnimationFrame(() => {
- target.style.transform = "";
-
- // This will have prevented the browser from scrolling the focused element into view,
- // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
- if (visualViewport) {
- if (visualViewport.height < window.innerHeight) {
- // If the keyboard is already visible, do this after one additional frame
- // to wait for the transform to be removed.
- requestAnimationFrame(() => {
- scrollIntoView(target);
- });
- } else {
- // Otherwise, wait for the visual viewport to resize before scrolling so we can
- // measure the correct position to scroll to.
- visualViewport.addEventListener("resize", () => scrollIntoView(target), { once: true });
- }
- }
- });
- }
-
- function onWindowScroll() {
- // Last resort. If the window scrolled, scroll it back to the top.
- // It should always be at the top because the body will have a negative margin (see below).
- window.scrollTo(0, 0);
- }
-
- // Record the original scroll position so we can restore it.
- // Then apply a negative margin to the body to offset it by the scroll position. This will
- // enable us to scroll the window to the top, which is required for the rest of this to work.
- const scrollX = window.pageXOffset;
- const scrollY = window.pageYOffset;
-
- const restoreStyles = chain(
- setStyle(
- documentElement,
- "paddingRight",
- `${window.innerWidth - documentElement.clientWidth}px`
- ),
- setStyle(documentElement, "overflow", "hidden")
- // setStyle(document.body, 'marginTop', `-${scrollY}px`),
- );
-
- // Scroll to the top. The negative margin on the body will make this appear the same.
- window.scrollTo(0, 0);
-
- const removeEvents = chain(
- addEventListener(document, "touchstart", onTouchStart, { passive: false, capture: true }),
- addEventListener(document, "touchmove", onTouchMove, { passive: false, capture: true }),
- addEventListener(document, "touchend", onTouchEnd, { passive: false, capture: true }),
- addEventListener(document, "focus", onFocus, true),
- addEventListener(window, "scroll", onWindowScroll)
- );
-
- return () => {
- // Restore styles and scroll the page back to where it was.
- restoreStyles();
- removeEvents();
- window.scrollTo(scrollX, scrollY);
- };
-}
-
-// Sets a CSS property on an element, and returns a function to revert it to the previous value.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function setStyle(element: HTMLElement, style: any, value: string) {
- const cur = element.style[style];
- element.style[style] = value;
-
- return () => {
- element.style[style] = cur;
- };
-}
-
-function scrollIntoView(target: Element) {
- const { documentElement, body, scrollingElement } = document;
-
- const root = scrollingElement || documentElement;
- while (target && target !== root) {
- // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
- const scrollable = getScrollParent(target);
- if (scrollable !== documentElement && scrollable !== body && scrollable !== target) {
- const scrollableTop = scrollable.getBoundingClientRect().top;
- const targetTop = target.getBoundingClientRect().top;
- const targetBottom = target.getBoundingClientRect().bottom;
- const keyboardHeight = scrollable.getBoundingClientRect().bottom;
-
- if (targetBottom > keyboardHeight) {
- scrollable.scrollTop += targetTop - scrollableTop;
- }
- }
-
- //@ts-expect-error - target is not root so it must have a parentElement
- target = scrollable.parentElement;
- }
-}
diff --git a/src/lib/internal/snap-points.ts b/src/lib/internal/snap-points.ts
deleted file mode 100644
index 4fdbd11..0000000
--- a/src/lib/internal/snap-points.ts
+++ /dev/null
@@ -1,323 +0,0 @@
-import { tick } from "svelte";
-import { derived, get, type Writable } from "svelte/store";
-import { TRANSITIONS, VELOCITY_THRESHOLD } from "./constants.js";
-import { effect, set, isVertical, isBottomOrRight } from "./helpers/index.js";
-import type { DrawerDirection } from "./types.js";
-
-export function handleSnapPoints({
- activeSnapPoint,
- snapPoints,
- drawerRef,
- overlayRef,
- fadeFromIndex,
- openTime,
- direction,
-}: {
- activeSnapPoint: Writable;
- snapPoints: Writable<(number | string)[] | undefined>;
- fadeFromIndex: Writable;
- drawerRef: Writable;
- overlayRef: Writable;
- openTime: Writable;
- direction: Writable;
-}) {
- const isLastSnapPoint = derived(
- [snapPoints, activeSnapPoint],
- ([$snapPoints, $activeSnapPoint]) => {
- return $activeSnapPoint === $snapPoints?.[$snapPoints.length - 1];
- }
- );
-
- const shouldFade = derived(
- [snapPoints, fadeFromIndex, activeSnapPoint],
- ([$snapPoints, $fadeFromIndex, $activeSnapPoint]) => {
- return (
- ($snapPoints &&
- $snapPoints.length > 0 &&
- ($fadeFromIndex || $fadeFromIndex === 0) &&
- !Number.isNaN($fadeFromIndex) &&
- $snapPoints[$fadeFromIndex] === $activeSnapPoint) ||
- !$snapPoints
- );
- }
- );
-
- const activeSnapPointIndex = derived(
- [snapPoints, activeSnapPoint],
- ([$snapPoints, $activeSnapPoint]) =>
- $snapPoints?.findIndex((snapPoint) => snapPoint === $activeSnapPoint) ?? null
- );
-
- const snapPointsOffset = derived(snapPoints, ($snapPoints) => {
- if ($snapPoints) {
- return $snapPoints.map((snapPoint) => {
- const hasWindow = typeof window !== "undefined";
- const isPx = typeof snapPoint === "string";
- let snapPointAsNumber = 0;
-
- if (isPx) {
- snapPointAsNumber = parseInt(snapPoint, 10);
- }
- const $direction = get(direction);
-
- if (isVertical($direction)) {
- const height = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerHeight : 0;
-
- if (hasWindow) {
- return $direction === "bottom"
- ? window.innerHeight - height
- : window.innerHeight + height;
- }
-
- return height;
- }
-
- const width = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerWidth : 0;
-
- if (hasWindow) {
- return $direction === "right" ? window.innerWidth - width : window.innerWidth + width;
- }
-
- return width;
- });
- }
- return [];
- });
-
- const activeSnapPointOffset = derived(
- [snapPointsOffset, activeSnapPointIndex],
- ([$snapPointsOffset, $activeSnapPointIndex]) =>
- $activeSnapPointIndex !== null ? $snapPointsOffset?.[$activeSnapPointIndex] : null
- );
-
- effect([activeSnapPoint, drawerRef], ([$activeSnapPoint, $drawerRef]) => {
- if ($activeSnapPoint && $drawerRef) {
- const $snapPoints = get(snapPoints);
- const $snapPointsOffset = get(snapPointsOffset);
- const newIndex = $snapPoints?.findIndex((snapPoint) => snapPoint === $activeSnapPoint) ?? -1;
- if ($snapPointsOffset && newIndex !== -1 && typeof $snapPointsOffset[newIndex] === "number") {
- snapToPoint($snapPointsOffset[newIndex] as number);
- }
- }
- });
-
- function snapToPoint(dimension: number) {
- tick().then(() => {
- const $snapPointsOffset = get(snapPointsOffset);
- const newSnapPointIndex =
- $snapPointsOffset?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
-
- const $drawerRef = get(drawerRef);
- const $direction = get(direction);
-
- onSnapPointChange(newSnapPointIndex);
-
- set($drawerRef, {
- transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(
- ","
- )})`,
- transform: isVertical($direction)
- ? `translate3d(0, ${dimension}px, 0)`
- : `translate3d(${dimension}px, 0, 0)`,
- });
-
- const $fadeFromIndex = get(fadeFromIndex);
- const $overlayRef = get(overlayRef);
-
- if (
- snapPointsOffset &&
- newSnapPointIndex !== $snapPointsOffset.length - 1 &&
- newSnapPointIndex !== $fadeFromIndex
- ) {
- set($overlayRef, {
- transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(
- ","
- )})`,
- opacity: "0",
- });
- } else {
- set($overlayRef, {
- transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(
- ","
- )})`,
- opacity: "1",
- });
- }
- activeSnapPoint.update(() => {
- const $snapPoints = get(snapPoints);
- if (newSnapPointIndex === null || !$snapPoints) return null;
- return $snapPoints[newSnapPointIndex];
- });
- });
- }
-
- function onRelease({
- draggedDistance,
- closeDrawer,
- velocity,
- dismissible,
- }: {
- draggedDistance: number;
- closeDrawer: () => void;
- velocity: number;
- dismissible: boolean;
- }) {
- const $fadeFromIndex = get(fadeFromIndex);
- if ($fadeFromIndex === undefined) return;
- const $activeSnapPointOffset = get(activeSnapPointOffset);
- const $activeSnapPointIndex = get(activeSnapPointIndex);
- const $overlayRef = get(overlayRef);
- const $snapPointsOffset = get(snapPointsOffset);
- const $snapPoints = get(snapPoints);
- const $direction = get(direction);
-
- const currentPosition =
- $direction === "bottom" || $direction === "right"
- ? ($activeSnapPointOffset ?? 0) - draggedDistance
- : ($activeSnapPointOffset ?? 0) + draggedDistance;
-
- const isOverlaySnapPoint = $activeSnapPointIndex === $fadeFromIndex - 1;
- const isFirst = $activeSnapPointIndex === 0;
- const hasDraggedUp = draggedDistance > 0;
-
- if (isOverlaySnapPoint) {
- set($overlayRef, {
- transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
- });
- }
-
- if (velocity > 2 && !hasDraggedUp) {
- if (dismissible) closeDrawer();
- else snapToPoint($snapPointsOffset[0]); // snap to initial point
- return;
- }
-
- if (velocity > 2 && hasDraggedUp && $snapPointsOffset && $snapPoints) {
- snapToPoint($snapPointsOffset[$snapPoints.length - 1] as number);
- return;
- }
-
- // Find the closest snap point to the current position
- const closestSnapPoint = $snapPointsOffset?.reduce((prev, curr) => {
- if (typeof prev !== "number" || typeof curr !== "number") return prev;
-
- return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
- });
-
- const dim = isVertical($direction) ? window.innerHeight : window.innerWidth;
-
- if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * 0.4) {
- const dragDirection = hasDraggedUp ? 1 : -1; // 1 = up, -1 = down
-
- // Don't do anything if we swipe upwards while being on the last snap point
- if (dragDirection > 0 && get(isLastSnapPoint) && $snapPoints) {
- snapToPoint($snapPointsOffset[$snapPoints.length - 1]);
- return;
- }
-
- if (isFirst && dragDirection < 0 && dismissible) {
- closeDrawer();
- }
-
- if ($activeSnapPointIndex === null) return;
-
- snapToPoint($snapPointsOffset[$activeSnapPointIndex + dragDirection]);
- return;
- }
-
- snapToPoint(closestSnapPoint);
- }
-
- function onDrag({ draggedDistance }: { draggedDistance: number }) {
- const $drawerRef = get(drawerRef);
- const $activeSnapPointOffset = get(activeSnapPointOffset);
- if ($activeSnapPointOffset === null) return;
- const $snapPointsOffset = get(snapPointsOffset);
- const $direction = get(direction);
-
- const newValue =
- $direction === "bottom" || $direction === "right"
- ? $activeSnapPointOffset - draggedDistance
- : $activeSnapPointOffset + draggedDistance;
-
- const lastSnapPoint = $snapPointsOffset[$snapPointsOffset.length - 1];
-
- // Don't do anything if we exceed the last(biggest) snap point
- if (isBottomOrRight($direction) && newValue < lastSnapPoint) {
- return;
- }
-
- if (!isBottomOrRight($direction) && newValue > lastSnapPoint) {
- return;
- }
-
- set($drawerRef, {
- transform: isVertical($direction)
- ? `translate3d(0, ${newValue}px, 0)`
- : `translate3d(${newValue}px, 0, 0)`,
- });
- }
-
- function getPercentageDragged(absDraggedDistance: number, isDraggingDown: boolean) {
- const $activeSnapPointIndex = get(activeSnapPointIndex);
- const $snapPointsOffset = get(snapPointsOffset);
- const $snapPoints = get(snapPoints);
- const $fadeFromIndex = get(fadeFromIndex);
- if (
- !$snapPoints ||
- typeof $activeSnapPointIndex !== "number" ||
- !$snapPointsOffset ||
- $fadeFromIndex === undefined
- )
- return null;
-
- // If this is true we are dragging to a snap point that is supposed to have an overlay
- const isOverlaySnapPoint = $activeSnapPointIndex === $fadeFromIndex - 1;
- const isOverlaySnapPointOrHigher = $activeSnapPointIndex >= $fadeFromIndex;
-
- if (isOverlaySnapPointOrHigher && isDraggingDown) {
- return 0;
- }
-
- // Don't animate, but still use this one if we are dragging away from the overlaySnapPoint
- if (isOverlaySnapPoint && !isDraggingDown) return 1;
- if (!get(shouldFade) && !isOverlaySnapPoint) return null;
-
- // Either fadeFrom index or the one before
- const targetSnapPointIndex = isOverlaySnapPoint
- ? $activeSnapPointIndex + 1
- : $activeSnapPointIndex - 1;
-
- // Get the distance from overlaySnapPoint to the one before or vice-versa to calculate the opacity percentage accordingly
- const snapPointDistance = isOverlaySnapPoint
- ? $snapPointsOffset[targetSnapPointIndex] - $snapPointsOffset[targetSnapPointIndex - 1]
- : $snapPointsOffset[targetSnapPointIndex + 1] - $snapPointsOffset[targetSnapPointIndex];
-
- const percentageDragged = absDraggedDistance / Math.abs(snapPointDistance);
-
- if (isOverlaySnapPoint) {
- return 1 - percentageDragged;
- } else {
- return percentageDragged;
- }
- }
-
- function onSnapPointChange(activeSnapPointIndex: number) {
- // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
- const $snapPoints = get(snapPoints);
- const $snapPointsOffset = get(snapPointsOffset);
- if ($snapPoints && activeSnapPointIndex === $snapPointsOffset.length - 1) {
- openTime.set(new Date());
- }
- }
-
- return {
- isLastSnapPoint,
- shouldFade,
- getPercentageDragged,
- activeSnapPointIndex,
- onRelease,
- onDrag,
- snapPointsOffset,
- };
-}
diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts
deleted file mode 100644
index c8b8661..0000000
--- a/src/lib/internal/types.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { Action } from "svelte/action";
-
-export type SvelteEvent = T & {
- currentTarget: EventTarget & U;
-};
-
-export type OnChangeFn = (value: T) => void;
-
-export type Arrayable = T | T[];
-
-export type Expand = T extends object
- ? T extends infer O
- ? { [K in keyof O]: O[K] }
- : never
- : T;
-
-export type Builder<
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- Element = any,
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- Param = any,
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- Attributes extends Record = Record,
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
-> = Record & {
- action: Action;
-};
-
-export type DrawerDirection = "left" | "right" | "top" | "bottom";
diff --git a/src/lib/internal/vaul.ts b/src/lib/internal/vaul.ts
deleted file mode 100644
index d0b538b..0000000
--- a/src/lib/internal/vaul.ts
+++ /dev/null
@@ -1,958 +0,0 @@
-import { derived, get, writable, type Readable } from "svelte/store";
-import type { DrawerDirection, SvelteEvent } from "./types.js";
-import { handleSnapPoints } from "./snap-points.js";
-import {
- overridable,
- toWritableStores,
- omit,
- type ChangeFn,
- getTranslate,
- isVertical,
- set,
- reset,
- effect,
- removeUndefined,
- styleToString,
- isInput,
- sleep,
- noop,
- addEventListener,
- isBrowser,
-} from "$lib/internal/helpers/index.js";
-import { isIOS, preventScroll } from "./prevent-scroll.js";
-import { TRANSITIONS, VELOCITY_THRESHOLD } from "./constants.js";
-import { handleEscapeKeydown } from "./escape-keydown.js";
-import { handlePositionFixed } from "./position-fixed.js";
-
-const CLOSE_THRESHOLD = 0.25;
-
-const SCROLL_LOCK_TIMEOUT = 100;
-
-const BORDER_RADIUS = 8;
-
-const NESTED_DISPLACEMENT = 16;
-
-const WINDOW_TOP_OFFSET = 26;
-
-const DRAG_CLASS = "vaul-dragging";
-
-const openDrawerIds = writable([]);
-
-type WithFadeFromProps = {
- snapPoints: (number | string)[];
- fadeFromIndex: number;
-};
-
-type WithoutFadeFromProps = {
- snapPoints?: (number | string)[];
- fadeFromIndex?: never;
-};
-
-export type CreateVaulProps = {
- defaultActiveSnapPoint?: number | string | null;
- onActiveSnapPointChange?: ChangeFn;
- defaultOpen?: boolean;
- onOpenChange?: ChangeFn;
- closeThreshold?: number;
- shouldScaleBackground?: boolean;
- backgroundColor?: string;
- scrollLockTimeout?: number;
- fixed?: boolean;
- dismissible?: boolean;
- direction?: DrawerDirection;
- onDrag?: (
- event: SvelteEvent,
- percentageDragged: number
- ) => void;
- onRelease?: (
- event: SvelteEvent,
- open: boolean
- ) => void;
- modal?: boolean;
- nested?: boolean;
- onClose?: () => void;
-} & (WithFadeFromProps | WithoutFadeFromProps);
-
-const defaultProps = {
- closeThreshold: CLOSE_THRESHOLD,
- shouldScaleBackground: true,
- scrollLockTimeout: SCROLL_LOCK_TIMEOUT,
- onDrag: undefined,
- onRelease: undefined,
- snapPoints: undefined,
- fadeFromIndex: undefined,
- defaultActiveSnapPoint: undefined,
- onActiveSnapPointChange: undefined,
- defaultOpen: false,
- onOpenChange: undefined,
- fixed: undefined,
- dismissible: true,
- modal: true,
- nested: false,
- onClose: undefined,
- direction: "bottom" as const,
-};
-
-const omittedOptions = [
- "defaultOpen",
- "onOpenChange",
- "defaultActiveSnapPoint",
- "onActiveSnapPointChange",
- "onDrag",
- "onRelease",
- "onClose",
-] as const;
-
-export function createVaul(props: CreateVaulProps) {
- const {
- snapPoints: snapPointsProp,
- fadeFromIndex: fadeFromIndexProp = snapPointsProp && snapPointsProp.length - 1,
- ...withDefaults
- } = { ...defaultProps, ...removeUndefined(props) } satisfies CreateVaulProps;
-
- const options = toWritableStores(
- omit(
- {
- ...withDefaults,
- snapPoints: snapPointsProp,
- fadeFromIndex: fadeFromIndexProp,
- },
- ...omittedOptions
- )
- );
-
- // keep a reference to the trigger element so we can refocus when it closes via the keyboard
- const triggerRef = writable(undefined);
-
- const { onDrag: onDragProp, onRelease: onReleaseProp, onClose, onOpenChange } = withDefaults;
-
- const {
- snapPoints,
- fadeFromIndex,
- fixed,
- dismissible,
- modal,
- nested,
- shouldScaleBackground,
- scrollLockTimeout,
- closeThreshold,
- direction,
- } = options;
-
- const openStore = writable(withDefaults.defaultOpen);
- const isOpen = overridable(openStore, withDefaults.onOpenChange);
- const hasBeenOpened = writable(false);
- const visible = writable(false);
- const justReleased = writable(false);
- const overlayRef = writable(undefined);
- const openTime = writable(null);
- const keyboardIsOpen = writable(false);
- const drawerRef = writable(undefined);
- const drawerId = writable(undefined);
-
- let isDragging = false;
- let dragStartTime: Date | null = null;
- let isClosing = false;
- let pointerStart = 0;
- let dragEndTime: Date | null = null;
- let lastTimeDragPrevented: Date | null = null;
- let isAllowedToDrag = false;
- let drawerHeightRef = get(drawerRef)?.getBoundingClientRect().height || 0;
- let previousDiffFromInitial = 0;
- let initialDrawerHeight = 0;
- let nestedOpenChangeTimer: NodeJS.Timeout | null = null;
-
- const activeSnapPoint = overridable(
- writable(withDefaults.defaultActiveSnapPoint),
- withDefaults.onActiveSnapPointChange
- );
-
- const {
- activeSnapPointIndex,
- getPercentageDragged: getSnapPointsPercentageDragged,
- onDrag: onDragSnapPoints,
- onRelease: onReleaseSnapPoints,
- shouldFade,
- snapPointsOffset,
- } = handleSnapPoints({
- snapPoints,
- activeSnapPoint,
- drawerRef,
- fadeFromIndex,
- overlayRef,
- openTime,
- direction,
- });
-
- const getContentStyle: Readable<(style?: string | null) => string> = derived(
- [snapPointsOffset],
- ([$snapPointsOffset]) => {
- return (style: string | null = "") => {
- if ($snapPointsOffset && $snapPointsOffset.length > 0) {
- const styleProp = styleToString({
- "--snap-point-height": `${$snapPointsOffset[0]}px`,
- });
- return style + styleProp;
- }
-
- return style;
- };
- }
- );
-
- effect([drawerRef], ([$drawerRef]) => {
- if ($drawerRef) {
- drawerId.set($drawerRef.id);
- }
- });
-
- effect([isOpen], ([$open]) => {
- // Prevent double clicks from closing multiple dialogs
- sleep(100).then(() => {
- const id = get(drawerId);
- if ($open && id) {
- openDrawerIds.update((prev) => {
- if (prev.includes(id)) {
- return prev;
- }
- prev.push(id);
- return prev;
- });
- } else {
- openDrawerIds.update((prev) => prev.filter((id) => id !== id));
- }
- });
- });
-
- effect([isOpen], ([$isOpen]) => {
- if (!$isOpen && get(shouldScaleBackground)) {
- const id = setTimeout(() => {
- reset(document.body, "background");
- }, 200);
-
- return () => clearTimeout(id);
- }
- });
-
- // prevent scroll when the drawer is open
- effect([isOpen], ([$isOpen]) => {
- let unsub = () => {};
-
- if ($isOpen) {
- unsub = preventScroll();
- }
-
- return unsub;
- });
-
- const { restorePositionSetting } = handlePositionFixed({ isOpen, modal, nested, hasBeenOpened });
-
- // Close the drawer on escape keydown
- effect([drawerRef], ([$drawerRef]) => {
- let unsub = noop;
-
- if ($drawerRef) {
- unsub = handleEscapeKeydown($drawerRef, () => {
- closeDrawer(true);
- });
- }
-
- return () => {
- unsub();
- };
- });
-
- function openDrawer() {
- if (isClosing) return;
- hasBeenOpened.set(true);
- isOpen.set(true);
- }
-
- function onPress(event: SvelteEvent) {
- const $drawerRef = get(drawerRef);
-
- if (!get(dismissible) && !get(snapPoints)) return;
- if ($drawerRef && !$drawerRef.contains(event.target as Node)) return;
- drawerHeightRef = $drawerRef?.getBoundingClientRect().height || 0;
-
- isDragging = true;
-
- dragStartTime = new Date();
-
- // iOS doesn't trigger mouseUp after scrolling so we need to listen to touched in order to disallow dragging
- if (isIOS()) {
- window.addEventListener("touchend", () => (isAllowedToDrag = false), { once: true });
- }
- // Ensure we maintain correct pointer capture even when going outside of the drawer
- (event.target as HTMLElement).setPointerCapture(event.pointerId);
-
- pointerStart = isVertical(get(direction)) ? event.screenY : event.screenX;
- }
-
- function shouldDrag(el: EventTarget, isDraggingInDirection: boolean) {
- const $drawerRef = get(drawerRef);
- let element = el as HTMLElement;
- const highlightedText = window.getSelection()?.toString();
- const $direction = get(direction);
- const swipeAmount = $drawerRef ? getTranslate($drawerRef, $direction) : null;
- const date = new Date();
-
- // Don't drag if the element has the `data-vaul-no-drag` attribute
- if (element.hasAttribute("data-vaul-no-drag") || element.closest("[data-vaul-no-drag]")) {
- return false;
- }
-
- // Allow scrolling when animating
- const $openTime = get(openTime);
-
- if ($openTime && date.getTime() - $openTime.getTime() < 500) {
- return false;
- }
-
- if (swipeAmount !== null) {
- if ($direction === "bottom" || $direction === "right" ? swipeAmount > 0 : swipeAmount < 0) {
- return true;
- }
- }
-
- if (swipeAmount !== null && swipeAmount > 0) {
- return true;
- }
-
- // Don't drag if there's highlighted text
- if (highlightedText && highlightedText.length > 0) {
- return false;
- }
-
- const $scrollLockTimeout = get(scrollLockTimeout);
- // Disallow dragging if drawer was scrolled within `scrollLockTimeout`
- if (
- lastTimeDragPrevented &&
- date.getTime() - lastTimeDragPrevented.getTime() < $scrollLockTimeout &&
- swipeAmount === 0
- ) {
- lastTimeDragPrevented = date;
- return false;
- }
-
- if (isDraggingInDirection) {
- lastTimeDragPrevented = date;
-
- // We are dragging down so we should allow scrolling
- return false;
- }
-
- // Keep climbing up the DOM tree as long as there's a parent
- while (element) {
- // Check if the element is scrollable
- if (element.scrollHeight > element.clientHeight) {
- if (element.scrollTop !== 0) {
- lastTimeDragPrevented = new Date();
-
- // The element is scrollable and not scrolled to the top, so don't drag
- return false;
- }
-
- if (element.getAttribute("role") === "dialog") {
- return true;
- }
- }
-
- // Move up to the parent element
- element = element.parentNode as HTMLElement;
- }
-
- // No scrollable parents not scrolled to the top found, so drag
- return true;
- }
-
- function onDrag(event: SvelteEvent) {
- const $drawerRef = get(drawerRef);
- if (!$drawerRef || !isDragging) return;
- // We need to know how much of the drawer has been dragged in percentages so that we can transform background accordingly
- const $direction = get(direction);
-
- const directionMultiplier = getDirectionMultiplier($direction);
-
- const draggedDistance = getDistanceMoved(pointerStart, $direction, event) * directionMultiplier;
- const isDraggingInDirection = draggedDistance > 0;
-
- const $activeSnapPointIndex = get(activeSnapPointIndex);
- const $snapPoints = get(snapPoints);
-
- // Disallow dragging down to close when first snap point is the active one and dismissible prop is set to false.
- if ($snapPoints && $activeSnapPointIndex === 0 && !get(dismissible)) return;
- if (!isAllowedToDrag && !shouldDrag(event.target as HTMLElement, isDraggingInDirection)) {
- return;
- }
-
- $drawerRef.classList.add(DRAG_CLASS);
- // If shouldDrag gave true once after pressing down on the drawer, we set isAllowedToDrag to true and it will remain true until we let go, there's no reason to disable dragging mid way, ever, and that's the solution to it
- isAllowedToDrag = true;
-
- set($drawerRef, {
- transition: "none",
- });
-
- const $overlayRef = get(overlayRef);
-
- set($overlayRef, {
- transition: "none",
- });
-
- if ($snapPoints) {
- onDragSnapPoints({ draggedDistance });
- }
-
- // Run this only if snapPoints are not defined or if we are at the last snap point (highest one)
- if (isDraggingInDirection && !$snapPoints) {
- const dampenedDraggedDistance = dampenValue(draggedDistance);
-
- const translateValue = Math.min(dampenedDraggedDistance * -1, 0) * directionMultiplier;
-
- set($drawerRef, {
- transform: isVertical($direction)
- ? `translate3d(0, ${translateValue}px, 0)`
- : `translate3d(${translateValue}px, 0, 0)`,
- });
- return;
- }
-
- // We need to capture last time when drag with scroll was triggered and have a timeout between
- const absDraggedDistance = Math.abs(draggedDistance);
-
- let percentageDragged = absDraggedDistance / drawerHeightRef;
- const snapPointPercentageDragged = getSnapPointsPercentageDragged(
- absDraggedDistance,
- isDraggingInDirection
- );
-
- if (snapPointPercentageDragged !== null) {
- percentageDragged = snapPointPercentageDragged;
- }
-
- const opacityValue = 1 - percentageDragged;
-
- const $fadeFromIndex = get(fadeFromIndex);
- const $shouldFade = get(shouldFade);
-
- if ($shouldFade || ($fadeFromIndex && $activeSnapPointIndex === $fadeFromIndex - 1)) {
- onDragProp?.(event, percentageDragged);
-
- set(
- $overlayRef,
- {
- opacity: `${opacityValue}`,
- transition: "none",
- },
- true
- );
- }
- const wrapper = document.querySelector("[data-vaul-drawer-wrapper]");
-
- if (wrapper && $overlayRef && get(shouldScaleBackground)) {
- // Calculate percentageDragged as a fraction (0 to 1)
- const scaleValue = Math.min(getScale() + percentageDragged * (1 - getScale()), 1);
- const borderRadiusValue = 8 - percentageDragged * 8;
-
- const translateValue = Math.max(0, 14 - percentageDragged * 14);
-
- set(
- wrapper,
- {
- borderRadius: `${borderRadiusValue}px`,
- transform: isVertical($direction)
- ? `scale(${scaleValue}) translate3d(0, ${translateValue}px, 0)`
- : `scale(${scaleValue}) translate3d(${translateValue}px, 0, 0)`,
- transition: "none",
- },
- true
- );
- }
-
- if (!$snapPoints) {
- const translateValue = absDraggedDistance * directionMultiplier;
- set($drawerRef, {
- transform: isVertical($direction)
- ? `translate3d(0, ${translateValue}px, 0)`
- : `translate3d(${translateValue}px, 0, 0)`,
- });
- }
- }
-
- function scaleBackground(open: boolean, backgroundColor: string | undefined = "black") {
- const wrapper = document.querySelector("[data-vaul-drawer-wrapper]");
-
- if (!wrapper || !get(shouldScaleBackground)) return;
- const $direction = get(direction);
-
- if (open) {
- // setting original styles initially
- set(document.body, {
- background: document.body.style.backgroundColor || document.body.style.background,
- });
-
- // setting body styles, with cache ignored, so that we can get correct original styles in reset
- set(
- document.body,
- {
- background: backgroundColor,
- },
- true
- );
-
- set(wrapper, {
- borderRadius: `${BORDER_RADIUS}px`,
- overflow: "hidden",
- ...(isVertical($direction)
- ? {
- transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
- transformOrigin: "top",
- }
- : {
- transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
- transformOrigin: "left",
- }),
- transitionProperty: "transform, border-radius",
- transitionDuration: `${TRANSITIONS.DURATION}s`,
- transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
- });
- } else {
- // Exit
- reset(wrapper, "overflow");
- reset(wrapper, "transform");
- reset(wrapper, "borderRadius");
- set(wrapper, {
- transitionProperty: "transform, border-radius",
- transitionDuration: `${TRANSITIONS.DURATION}s`,
- transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
- });
- }
- }
-
- effect(
- [activeSnapPointIndex, snapPoints, snapPointsOffset],
- ([$activeSnapPointIndex, $snapPoints, $snapPointsOffset]) => {
- function onVisualViewportChange() {
- const $drawerRef = get(drawerRef);
- if (!$drawerRef) return;
- const $keyboardIsOpen = get(keyboardIsOpen);
-
- const focusedElement = document.activeElement as HTMLElement;
- if (isInput(focusedElement) || $keyboardIsOpen) {
- const visualViewportHeight = window.visualViewport?.height || 0;
- // This is the height of the keyboard
- let diffFromInitial = window.innerHeight - visualViewportHeight;
- const drawerHeight = $drawerRef.getBoundingClientRect().height || 0;
- if (!initialDrawerHeight) {
- initialDrawerHeight = drawerHeight;
- }
- const offsetFromTop = $drawerRef.getBoundingClientRect().top;
-
- // visualViewport height may change due to some subtle changes to the keyboard. Checking if the height changed by 60 or more will make sure that they keyboard really changed its open state.
- if (Math.abs(previousDiffFromInitial - diffFromInitial) > 60) {
- keyboardIsOpen.set(!$keyboardIsOpen);
- }
-
- if ($snapPoints && $snapPoints.length > 0 && $snapPointsOffset && $activeSnapPointIndex) {
- const activeSnapPointHeight = $snapPointsOffset[$activeSnapPointIndex] || 0;
- diffFromInitial += activeSnapPointHeight;
- }
-
- previousDiffFromInitial = diffFromInitial;
-
- // We don't have to change the height if the input is in view, when we are here we are in the opened keyboard state so we can correctly check if the input is in view
- if (drawerHeight > visualViewportHeight || $keyboardIsOpen) {
- const height = $drawerRef.getBoundingClientRect().height;
- let newDrawerHeight = height;
-
- if (height > visualViewportHeight) {
- newDrawerHeight = visualViewportHeight - WINDOW_TOP_OFFSET;
- }
- // When fixed, 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
- if (get(fixed)) {
- $drawerRef.style.height = `${height - Math.max(diffFromInitial, 0)}px`;
- } else {
- $drawerRef.style.height = `${Math.max(
- newDrawerHeight,
- visualViewportHeight - offsetFromTop
- )}px`;
- }
- } else {
- $drawerRef.style.height = `${initialDrawerHeight}px`;
- }
-
- if ($snapPoints && $snapPoints.length > 0 && !$keyboardIsOpen) {
- $drawerRef.style.bottom = `0px`;
- } else {
- // Negative bottom value would never make sense
- $drawerRef.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
- }
- }
- }
-
- let removeListener = noop;
-
- if (window.visualViewport) {
- removeListener = addEventListener(window.visualViewport, "resize", onVisualViewportChange);
- }
-
- return () => {
- removeListener();
- };
- }
- );
-
- function closeDrawer(withKeyboard: boolean = false) {
- if (isClosing) return;
-
- const $drawerRef = get(drawerRef);
- if (!$drawerRef) return;
- const $direction = get(direction);
-
- onClose?.();
- set($drawerRef, {
- transform: isVertical($direction)
- ? `translate3d(0, ${$direction === "bottom" ? "100%" : "-100%"}, 0)`
- : `translate3d(${$direction === "right" ? "100%" : "-100%"}, 0, 0)`,
- transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
- });
-
- set(get(overlayRef), {
- opacity: "0",
- transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
- });
-
- scaleBackground(false);
-
- isClosing = true;
- setTimeout(() => {
- visible.set(false);
- isOpen.set(false);
- isClosing = false;
- if (withKeyboard) {
- get(triggerRef)?.focus();
- }
- }, 300);
-
- const $snapPoints = get(snapPoints);
-
- setTimeout(() => {
- reset(document.documentElement, "scrollBehavior");
- if ($snapPoints) {
- activeSnapPoint.set($snapPoints[0]);
- }
- }, TRANSITIONS.DURATION * 1000); // seconds to ms
- }
-
- // This can be done much better
-
- effect([isOpen], ([$isOpen]) => {
- if ($isOpen) {
- hasBeenOpened.set(true);
- } else {
- closeDrawer();
- }
- });
-
- function resetDrawer() {
- const $drawerRef = get(drawerRef);
- if (!$drawerRef) return;
- const $overlayRef = get(overlayRef);
- const wrapper = document.querySelector("[data-vaul-drawer-wrapper]");
- const $direction = get(direction);
- const currentSwipeAmount = getTranslate($drawerRef, $direction);
-
- set($drawerRef, {
- transform: "translate3d(0, 0, 0)",
- transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
- });
-
- set($overlayRef, {
- transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
- opacity: "1",
- });
-
- const $shouldScaleBackground = get(shouldScaleBackground);
- const $isOpen = get(isOpen);
-
- // Don't reset background if swiped upwards
- if ($shouldScaleBackground && currentSwipeAmount && currentSwipeAmount > 0 && $isOpen) {
- set(
- wrapper,
- {
- borderRadius: `${BORDER_RADIUS}px`,
- overflow: "hidden",
- ...(isVertical($direction)
- ? {
- transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
- transformOrigin: "top",
- }
- : {
- transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
- transformOrigin: "left",
- }),
- transitionProperty: "transform, border-radius",
- transitionDuration: `${TRANSITIONS.DURATION}s`,
- transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
- },
- true
- );
- }
- }
-
- function onRelease(event: SvelteEvent) {
- const $drawerRef = get(drawerRef);
- if (!isDragging || !$drawerRef) return;
-
- if (isAllowedToDrag && isInput(event.target as HTMLElement)) {
- // If we were just dragging, prevent focusing on inputs etc. on release
- (event.target as HTMLInputElement).blur();
- }
- $drawerRef.classList.remove(DRAG_CLASS);
- isAllowedToDrag = false;
- isDragging = false;
-
- dragEndTime = new Date();
- const $direction = get(direction);
- const swipeAmount = getTranslate($drawerRef, $direction);
-
- if (
- (event.target && !shouldDrag(event.target, false)) ||
- !swipeAmount ||
- Number.isNaN(swipeAmount)
- )
- return;
-
- if (dragStartTime === null) return;
-
- const timeTaken = dragEndTime.getTime() - dragStartTime.getTime();
- const distMoved = getDistanceMoved(pointerStart, $direction, event);
- const velocity = Math.abs(distMoved) / timeTaken;
-
- if (velocity > 0.05) {
- // `justReleased` is needed to prevent the drawer from focusing on an input when the drag ends, as it's not the intent most of the time.
- justReleased.set(true);
-
- setTimeout(() => {
- justReleased.set(false);
- }, 200);
- }
-
- if (get(snapPoints)) {
- onReleaseSnapPoints({
- draggedDistance: distMoved * getDirectionMultiplier($direction),
- closeDrawer,
- velocity,
- dismissible: get(dismissible),
- });
- onReleaseProp?.(event, true);
- return;
- }
-
- // Moved upwards, don't do anything
- if ($direction === "bottom" || $direction === "right" ? distMoved > 0 : distMoved < 0) {
- resetDrawer();
- onReleaseProp?.(event, true);
- return;
- }
-
- if (velocity > VELOCITY_THRESHOLD) {
- closeDrawer();
- onReleaseProp?.(event, false);
- return;
- }
-
- const visibleDrawerHeight = Math.min(
- get(drawerRef)?.getBoundingClientRect().height ?? 0,
- window.innerHeight
- );
-
- if (swipeAmount >= visibleDrawerHeight * get(closeThreshold)) {
- closeDrawer();
- onReleaseProp?.(event, false);
- return;
- }
-
- onReleaseProp?.(event, true);
- resetDrawer();
- }
-
- effect([isOpen], ([$isOpen]) => {
- // Trigger enter animation without using CSS animation
- if (!$isOpen) return;
- if (isBrowser) {
- set(document.documentElement, {
- scrollBehavior: "auto",
- });
- }
- openTime.set(new Date());
- scaleBackground(true, props.backgroundColor);
- });
-
- effect([visible], ([$visible]) => {
- if (!$visible) return;
-
- // 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
- const $drawerRef = get(drawerRef);
- if (!$drawerRef) return;
-
- const children = $drawerRef.querySelectorAll("*");
- children.forEach((child: Element) => {
- const htmlChild = child as HTMLElement;
- if (
- htmlChild.scrollHeight > htmlChild.clientHeight ||
- htmlChild.scrollWidth > htmlChild.clientWidth
- ) {
- htmlChild.classList.add("vaul-scrollable");
- }
- });
- });
-
- function onNestedOpenChange(o: boolean) {
- const $drawerRef = get(drawerRef);
- const scale = o ? (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth : 1;
- const y = o ? -NESTED_DISPLACEMENT : 0;
-
- if (nestedOpenChangeTimer) {
- window.clearTimeout(nestedOpenChangeTimer);
- }
-
- set($drawerRef, {
- transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
- transform: `scale(${scale}) translate3d(0, ${y}px, 0)`,
- });
-
- if (!o && $drawerRef) {
- nestedOpenChangeTimer = setTimeout(() => {
- const $direction = get(direction);
- const translateValue = getTranslate($drawerRef, $direction);
- set($drawerRef, {
- transition: "none",
- transform: isVertical($direction)
- ? `translate3d(0, ${translateValue}px, 0)`
- : `translate3d(${translateValue}px, 0, 0)`,
- });
- }, 500);
- }
- }
-
- function onNestedDrag(
- _: SvelteEvent,
- percentageDragged: number
- ) {
- if (percentageDragged < 0) return;
- const initialScale = (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth;
- const newScale = initialScale + percentageDragged * (1 - initialScale);
- const newTranslate = -NESTED_DISPLACEMENT + percentageDragged * NESTED_DISPLACEMENT;
- const $direction = get(direction);
-
- set(get(drawerRef), {
- transform: isVertical($direction)
- ? `scale(${newScale}) translate3d(0, ${newTranslate}px, 0)`
- : `scale(${newScale}) translate3d(${newTranslate}px, 0, 0)`,
- transition: "none",
- });
- }
-
- function onNestedRelease(
- _: SvelteEvent,
- o: boolean
- ) {
- const $direction = get(direction);
- const dim = isVertical($direction) ? window.innerHeight : window.innerWidth;
- const scale = o ? (dim - NESTED_DISPLACEMENT) / dim : 1;
- const translate = o ? -NESTED_DISPLACEMENT : 0;
-
- if (o) {
- set(get(drawerRef), {
- transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(
- ","
- )})`,
- transform: isVertical($direction)
- ? `scale(${scale}) translate3d(0, ${translate}px, 0)`
- : `scale(${scale}) translate3d(${translate}px, 0, 0)`,
- });
- }
- }
-
- return {
- states: {
- isOpen,
- hasBeenOpened,
- snapPoints,
- activeSnapPoint,
- snapPointsOffset,
- keyboardIsOpen,
- shouldFade,
- visible,
- drawerId,
- openDrawerIds,
- },
- helpers: {
- getContentStyle,
- },
- methods: {
- closeDrawer,
- onOpenChange,
- onPress,
- onRelease,
- onDrag,
- scaleBackground,
- onNestedDrag,
- onNestedOpenChange,
- onNestedRelease,
- restorePositionSetting,
- openDrawer,
- },
- refs: {
- drawerRef,
- overlayRef,
- triggerRef,
- },
- options,
- };
-}
-
-export function dampenValue(v: number) {
- return 8 * (Math.log(v + 1) - 2);
-}
-
-function getScale() {
- return (window.innerWidth - WINDOW_TOP_OFFSET) / window.innerWidth;
-}
-
-function getDistanceMoved(
- pointerStart: number,
- direction: DrawerDirection,
- event: SvelteEvent
-) {
- if (event.type.startsWith("touch")) {
- return getDistanceMovedForTouch(pointerStart, direction, event as TouchEvent);
- } else {
- return getDistanceMovedForPointer(pointerStart, direction, event as PointerEvent);
- }
-}
-
-function getDistanceMovedForPointer(
- pointerStart: number,
- direction: DrawerDirection,
- event: PointerEvent | MouseEvent
-) {
- return pointerStart - (isVertical(direction) ? event.screenY : event.screenX);
-}
-
-function getDistanceMovedForTouch(
- pointerStart: number,
- direction: DrawerDirection,
- event: TouchEvent
-) {
- return (
- pointerStart -
- (isVertical(direction) ? event.changedTouches[0].screenY : event.changedTouches[0].screenX)
- );
-}
-
-function getDirectionMultiplier(direction: DrawerDirection) {
- return direction === "bottom" || direction === "right" ? 1 : -1;
-}
diff --git a/src/lib/vaul/components/close-wrapper.svelte b/src/lib/vaul/components/close-wrapper.svelte
deleted file mode 100644
index e28a560..0000000
--- a/src/lib/vaul/components/close-wrapper.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
- {
- e.preventDefault();
- closeDrawer();
- }}
- on:keydown={(e) => {
- if (e.detail.originalEvent.key === "Enter" || e.detail.originalEvent.key === " ") {
- e.preventDefault();
- closeDrawer(true);
- }
- }}
- {...$$restProps}
- {asChild}
- let:builder
- >
-
-
-
-{:else}
- {
- e.preventDefault();
- closeDrawer();
- }}
- on:keydown={(e) => {
- if (e.detail.originalEvent.key === "Enter" || e.detail.originalEvent.key === " ") {
- e.preventDefault();
- closeDrawer(true);
- }
- }}
- {...$$restProps}
- {asChild}
- let:builder
- >
-
-{/if}
diff --git a/src/lib/vaul/components/content.svelte b/src/lib/vaul/components/content.svelte
deleted file mode 100644
index 1c6c8ec..0000000
--- a/src/lib/vaul/components/content.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-
-
- {
- onPress(e);
- }}
- on:pointerup={(e) => {
- onRelease(e);
- }}
- on:pointermove={(e) => {
- onDrag(e);
- }}
- on:touchend={(e) => {
- onRelease(e);
- }}
- on:touchmove={(e) => {
- onDrag(e);
- }}
- data-vaul-drawer=""
- data-vaul-drawer-direction={$direction}
- data-vaul-drawer-visible={$visible ? "true" : "false"}
- {...$$restProps}
->
-
diff --git a/src/lib/vaul/components/index.ts b/src/lib/vaul/components/index.ts
deleted file mode 100644
index fbbd63e..0000000
--- a/src/lib/vaul/components/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
-export { default as Root } from "./root.svelte";
-export { default as Content } from "./content.svelte";
-export { default as Overlay } from "./overlay.svelte";
-export { default as NestedRoot } from "./nested-root.svelte";
-export { default as Close } from "./close.svelte";
-export { default as Trigger } from "./trigger.svelte";
-
-const Portal = DialogPrimitive.Portal;
-const Title = DialogPrimitive.Title;
-const Description = DialogPrimitive.Description;
-
-export { Portal, Title, Description };
-
-export * from "./types.js";
diff --git a/src/lib/vaul/components/nested-root.svelte b/src/lib/vaul/components/nested-root.svelte
deleted file mode 100644
index e191510..0000000
--- a/src/lib/vaul/components/nested-root.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
- {
- onNestedOpenChange(false);
- }}
- onDrag={(e, p) => {
- onNestedDrag(e, p);
- onDrag?.(e, p);
- }}
- onOpenChange={(o) => {
- if (o) {
- onNestedOpenChange(o);
- }
- onOpenChange?.(o);
- }}
- onRelease={onNestedRelease}
- {...$$restProps}
->
-
diff --git a/src/lib/vaul/components/overlay.svelte b/src/lib/vaul/components/overlay.svelte
deleted file mode 100644
index 1e5658e..0000000
--- a/src/lib/vaul/components/overlay.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
- {
- onOpenChange?.(o);
- if (!o) {
- closeDrawer();
- } else if (o) {
- openDrawer();
- }
- }}
- onOutsideClick={(e) => {
- if (!closeOnOutsideClick) return;
-
- onOutsideClick?.(e);
-
- if (e?.defaultPrevented) return;
-
- if ($keyboardIsOpen) {
- keyboardIsOpen.set(false);
- }
- e.preventDefault();
- if (!$localDismissible) {
- return;
- }
- const $openDialogIds = get(openDrawerIds);
- const isLast = $openDialogIds[$openDialogIds.length - 1] === get(drawerId);
- if (isLast) {
- onOpenChange?.(false);
- closeDrawer();
- }
- }}
- {...$$restProps}
->
-
-
-
diff --git a/src/lib/vaul/components/trigger-wrapper.svelte b/src/lib/vaul/components/trigger-wrapper.svelte
deleted file mode 100644
index 9812eb2..0000000
--- a/src/lib/vaul/components/trigger-wrapper.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
-
-
-
-{:else}
-
-
-{/if}
diff --git a/src/lib/vaul/components/types.ts b/src/lib/vaul/components/types.ts
deleted file mode 100644
index 30b17cd..0000000
--- a/src/lib/vaul/components/types.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { Dialog as DialogPrimitive } from "bits-ui";
-import type { CreateVaulProps } from "$lib/internal/vaul.js";
-import type { DrawerDirection, OnChangeFn } from "$lib/internal/types.js";
-
-export type Props = {
- /**
- * The open state of the Drawer. You can bind to this value
- * to programatically open/close the Drawer.
- *
- * @default false
- */
- open?: CreateVaulProps["defaultOpen"] & {};
-
- /**
- * A function called when the open state of the Drawer changes.
- */
- onOpenChange?: OnChangeFn;
-
- /**
- * 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.
- */
- closeThreshold?: CreateVaulProps["closeThreshold"] & {};
-
- /**
- * Duration in ms for which the drawer is not draggable after
- * scrolling content inside of the drawer.
- *
- * @default 500
- */
- scrollLockTimeout?: CreateVaulProps["scrollLockTimeout"] & {};
-
- /**
- * Array of numbers from 0 to 100 that corresponds to % of the screen a given
- * snap point should take up. Should go from least visible.
- *
- * Example [0.2, 0.5, 0.8]. You can also use px values, which doesn't take
- * screen height into account.
- */
- snapPoints?: CreateVaulProps["snapPoints"] & {};
-
- /**
- * Index of a `snapPoint` from which the overlay fade should be applied.
- *
- * @default snapPoints[snapPoints.length - 1] (last snap point)
- */
- fadeFromIndex?: CreateVaulProps["fadeFromIndex"] & {};
-
- /**
- * A callback function that is called when the drawer is dragged
- */
- onDrag?: CreateVaulProps["onDrag"] & {};
-
- /**
- * A callback function that is called when the drawer is released
- */
- onRelease?: CreateVaulProps["onRelease"] & {};
-
- /**
- * Whether this drawer is nested inside another drawer.
- *
- * @default false
- */
- nested?: CreateVaulProps["nested"] & {};
-
- /**
- * A callback function that is called when the drawer is
- * about to close.
- */
- onClose?: CreateVaulProps["onClose"] & {};
-
- /**
- * Whether the background should scale down when the drawer is open.
- *
- * @default false
- */
- shouldScaleBackground?: CreateVaulProps["shouldScaleBackground"] & {};
-
- /**
- * The background color of the body when the drawer is open and `shouldScaleBackground` is true.
- *
- * @default "black"
- */
- backgroundColor?: CreateVaulProps["backgroundColor"] & {};
-
- /**
- * The active snap point of the drawer. You can bind to this value to
- * programatically change the active snap point.
- */
- activeSnapPoint?: CreateVaulProps["defaultActiveSnapPoint"];
-
- /**
- * A function called when the active snap point of the Drawer changes.
- */
- onActiveSnapPointChange?: OnChangeFn;
-
- /**
- * Whether the drawer is able to be dismissed naturally.
- * If `true` the user can swipe or press outside the drawer to close it,
- * if `false` you must provide another way to close the drawer, via
- * programmatic control.
- *
- * @default true
- */
- dismissible?: boolean;
-
- /**
- * The direction from which the drawer should open.
- *
- * @default 'bottom'
- *
- */
- direction?: DrawerDirection;
-} & DialogPrimitive.Props;
-
-export type OverlayProps = DialogPrimitive.OverlayProps;
-export type ContentProps = DialogPrimitive.ContentProps;
-export type TitleProps = DialogPrimitive.TitleProps;
-export type DescriptionProps = DialogPrimitive.DescriptionProps;
-export type CloseProps = DialogPrimitive.CloseProps;
diff --git a/src/lib/vaul/components/visible.svelte b/src/lib/vaul/components/visible.svelte
deleted file mode 100644
index 8249067..0000000
--- a/src/lib/vaul/components/visible.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-
diff --git a/src/lib/vaul/ctx.ts b/src/lib/vaul/ctx.ts
deleted file mode 100644
index 0ec9437..0000000
--- a/src/lib/vaul/ctx.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { getOptionUpdater } from "$lib/internal/helpers/options.js";
-import { createVaul, type CreateVaulProps } from "$lib/internal/vaul.js";
-import { getContext, setContext } from "svelte";
-
-const VAUL_ROOT = Symbol("VAUL_ROOT");
-
-export function setCtx(props: CreateVaulProps = {}) {
- const vaul = createVaul(props);
- const updateOption = getOptionUpdater(vaul.options);
-
- setContext(VAUL_ROOT, { ...vaul, updateOption });
-
- return {
- ...vaul,
- updateOption,
- };
-}
-
-export function getCtx() {
- return getContext>(VAUL_ROOT);
-}
diff --git a/src/lib/vaul/index.ts b/src/lib/vaul/index.ts
deleted file mode 100644
index d9b2266..0000000
--- a/src/lib/vaul/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { DrawerDirection } from "../internal/types.js";
-export * as Drawer from "./components/index.js";
-export type { DrawerDirection };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
deleted file mode 100644
index d7ce593..0000000
--- a/src/routes/+page.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-
-
- Open Scrollable Drawer
-
-
-
-
-
-
- But I must explain to you how all this mistaken idea of denouncing pleasure and praising
- pain was born and I will give you a complete account of the system, and expound the actual
- teachings of the great explorer of the truth, the master-builder of human happiness. No
- one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because
- those who do not know how to pursue pleasure rationally encounter consequences that are
- extremely painful. Nor again is there anyone who loves or pursues or desires to obtain
- pain of itself, because it is pain, but because occasionally circumstances occur in which
- toil and pain can procure him some great pleasure. To take a trivial example, which of us
- ever undertakes laborious physical exercise, except to obtain some advantage from it? But
- who has any right to find fault with a man who chooses to enjoy a pleasure that has no
- annoying consequences, or one who avoids a pain that produces no resultant pleasure?
-
-
-
- On the other hand, we denounce with righteous indignation and dislike men who are so
- beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire,
- that they cannot foresee the pain and trouble that are bound to ensue; and equal blame
- belongs to those who fail in their duty through weakness of will, which is the same as
- saying through shrinking from toil and pain. These cases are perfectly simple and easy to
- distinguish. In a free hour, when our power of choice is untrammelled and when nothing
- prevents our being able to do what we like best, every pleasure is to be welcomed and
- every pain avoided. But in certain circumstances and owing to the claims of duty or the
- obligations of business it will frequently occur that pleasures have to be repudiated and
- annoyances accepted. The wise man therefore always holds in these matters to this
- principle of selection: he rejects pleasures to secure other greater pleasures, or else he
- endures pains to avoid worse pains.
-
-
-
-
-
diff --git a/static/favicon.svg b/static/favicon.svg
deleted file mode 100644
index 00f22b5..0000000
--- a/static/favicon.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/static/og.jpg b/static/og.jpg
deleted file mode 100644
index cc6f740..0000000
Binary files a/static/og.jpg and /dev/null differ