@svelte-put/swipeable

<script lang="ts">
	import { swipeable, type SwipeEndEventDetail } from '@svelte-put/swipeable';

	function swipeend(e: CustomEvent<SwipeEndEventDetail>) {
		const { passThreshold, direction } = e.detail;
		if (passThreshold) {
      // do something based on the swipe direction
    }
	}
</script>

<!-- listen for swipe left and swipe right -->
<div use:swipeable style:left="var(--swipe-distance-x)">...</div>

<script lang="ts">
	import {
		swipeable,
		type SwipeEndEventDetail,
		type SwipeSingleDirection,
		type SwipeStartEventDetail,
	} from '@svelte-put/swipeable';
	import { slide } from 'svelte/transition';

	const ITEMS = new Array(4).fill(undefined).map(() => ({
		id: crypto.randomUUID(),
		title: 'Message from Universe',
		excerpt:
			'Lorem ipsum dolor sit amet consectetur adipisicing elit. \
			Repudiandae blanditiis nulla perspiciatis quas necessitatibus deleniti! Sapiente fuge...',
	}));

	let items = $state(structuredClone(ITEMS));
	let direction: SwipeSingleDirection | null = $state(null);

	function swipestart(e: CustomEvent<SwipeStartEventDetail>) {
		direction = e.detail.direction;
	}

	function swipeend(e: CustomEvent<SwipeEndEventDetail>) {
		const { passThreshold } = e.detail;
		if (passThreshold) {
			const id = (e.target as HTMLElement).dataset.id;
			items = items.filter((i) => i.id !== id);
		}
	}

	function reset() {
		items = structuredClone(ITEMS);
		direction = null;
	}
</script>

<div class="flex items-baseline justify-between gap-4">
	<p class="mt-0">Swipe left to archive, swipe right to delete</p>
	<button class="c-btn c-btn--outlined" onclick={reset}>Reset</button>
</div>
<ul class="relative mt-8 overflow-hidden border border-current">
	{#each items as { id, title, excerpt } (id)}
		<li
			class="relative"
			class:bg-error-bg={direction === 'right'}
			class:bg-info-bg={direction === 'left'}
			out:slide={{ axis: 'y', duration: 200 }}
		>
			{#if direction === 'right'}
				<div
					class="i i-[trash] absolute left-4 top-1/2 z-0 h-6 w-6 -translate-y-1/2 text-white"
				></div>
			{/if}

			<article
				class="z-px border-outline bg-bg-100 relative touch-pan-x space-y-1 border p-4"
				use:swipeable
				onswipestart={swipestart}
				onswipeend={swipeend}
				style:left="var(--swipe-distance-x)"
				data-id={id}
			>
				<p class="flex items-center gap-2 leading-normal">
					<i class="i i-[envelope-simple] h-6 w-6"></i>
					<span>>></span>
					<span class="font-medium">{title}</span>
				</p>
				<hr />
				<p class="text-sm leading-relaxed">{excerpt}</p>
			</article>

			{#if direction === 'left'}
				<div
					class="i i-[archive] absolute right-4 top-1/2 z-0 h-6 w-6 -translate-y-1/2 text-white"
				></div>
			{/if}
		</li>
	{/each}
</ul>

interface SwipeStartEventDetail {
	/** direction of this swipe action */
	direction: SwipeSingleDirection;
	/** travel distance of this swipe action in px */
	distance: number;
}
interface SwipeEndEventDetail extends SwipeStartEventDetail {
	/** whether the swipe action passes the threshold, or is a flick */
	passThreshold: boolean;
}

interface SwipeableAttributes {
	onswipestart?: (event: CustomEvent<SwipeStartEventDetail>) => void;
	onswipeend?: (event: CustomEvent<SwipeEndEventDetail>) => void;
}

type SwipeableParameter = SwipeableConfig['direction'] | SwipeableConfig | undefined;

interface SwipeableConfig {
	direction?: SwipeDirection | SwipeDirection[];
	threshold?: SwipeThreshold;
	customPropertyPrefix?: string | null;
	followThrough?: SwipeFollowThrough | boolean;
	allowFlick?: boolean | ((ms: number, px: number) => boolean);
	enabled?: boolean;
}

type SwipeSingleDirection = 'up' | 'down' | 'left' | 'right';
type SwipeMultiDirection = 'x' | 'y' | 'all';
type SwipeDirection = SwipeSingleDirection | SwipeMultiDirection;

type SwipeThresholdUnit = 'px' | 'rem' | '%';
type SwipeThreshold = `${number}${SwipeThresholdUnit}`;

type SwipeFollowThrough = boolean | {
	/** duration for the follow through animation */
	duration?: number;
	/** easing function for the follow through animation */
	easing?: (t: number) => number;
}

interface SwipeableConfig {
  // ... truncated ...
  allowFlick?: boolean | ((ms: number, px: number) => boolean);
}

// is flick if the duration is less than 170ms and the velocity is greater than 1px/ms
const DEFAULT_FLICK_CHECK = (ms, px) => ms < 170 && Math.abs(px / ms) > 1;