web_lib

commit 3c1fda0f105e060a53bb9c4d8badcedae4fc950e
parent e057c75ee3af52d1bebb9d833667562b43027742
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Sun, 27 Apr 2025 00:21:12 +0000

apps-lib: add swipe component

Diffstat:
A
apps-lib/src/lib/components/lib/swipe.svelte
 | 
45
+++++++++++++++++++++++++++++++++++++++++++++
M
apps-lib/src/lib/index.ts
 | 
1
+

2 files changed, 46 insertions(+), 0 deletions(-)
diff --git a/apps-lib/src/lib/components/lib/swipe.svelte b/apps-lib/src/lib/components/lib/swipe.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { fade } from "svelte/transition";
+
+    const DELTA_X_THRESHOLD = 120;
+
+    let {
+        visible = $bindable(false),
+        children,
+    }: {
+        visible: boolean;
+        children: Snippet;
+    } = $props();
+
+    let swipe_start_x = $state<number | null>(null);
+    let swipe_delta_x = $state<number>(0);
+
+    const on_pointer_down = (event: PointerEvent): void => {
+        swipe_start_x = event.clientX;
+    };
+
+    const on_pointer_move = (event: PointerEvent): void => {
+        if (swipe_start_x !== null)
+            swipe_delta_x = event.clientX - swipe_start_x;
+    };
+
+    const on_pointer_up = (): void => {
+        if (Math.abs(swipe_delta_x) > DELTA_X_THRESHOLD) visible = false;
+        swipe_start_x = null;
+        swipe_delta_x = 0;
+    };
+</script>
+
+{#if visible}
+    <div
+        out:fade={{ duration: 100 }}
+        class={`flex flex-row w-full`}
+        onpointerdown={on_pointer_down}
+        onpointermove={on_pointer_move}
+        onpointerup={on_pointer_up}
+        style="transform: translateX({swipe_delta_x}px); transition: transform 0.2s ease;"
+    >
+        {@render children()}
+    </div>
+{/if}
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -59,6 +59,7 @@ export { default as LogoCircle } from "./components/lib/logo_circle.svelte"
 export { default as SelectMenu } from "./components/lib/select-menu.svelte"
 export { default as Select } from "./components/lib/select.svelte"
 export { default as SplashScreen } from "./components/lib/splash_screen.svelte"
+export { default as Swipe } from "./components/lib/swipe.svelte"
 export { default as TextArea } from "./components/lib/text-area.svelte"
 export { default as Theme } from "./components/lib/theme.svelte"
 export { default as Toast } from "./components/lib/toast.svelte"