feat(swipeable): first implementation

.changeset/yellow-donkeys-own.md

@@ -0,0 +1,5 @@
+---
+'@svelte-put/swipeable': major
+---
+
+First implementation with dedicated docs page

packages/clickoutside/src/index.js

@@ -1,5 +1,5 @@
 // Copyright (c) Quang Phan. All rights reserved. Licensed under the MIT license.
 
 export * from './clickoutside.js';
-export * from './types.public';
+export * from './types.public.js';
 

packages/swipeable/CHANGELOG.md

@@ -0,0 +1,2 @@
+# Changelog
+

packages/swipeable/README.md

@@ -0,0 +1,68 @@
+<div align="center">
+
+# `@svelte-put/swipeable`
+
+[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs]
+
+Svelte action `use:swipeable` - event for setting up quick gestures on an element (swipe right to delete, for example).
+
+</div>
+
+## `svelte-put`
+
+This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo].
+
+## Usage & Documentation
+
+[See the dedicated documentation page here][docs].
+
+## Quick Start
+
+```html
+<script lang="ts">
+  import { swipe } from '@svelte-put/swipeable';
+
+	const items = $state([1, 2, 3, 4, 5]);
+
+  function delete(e: CustomEvent) {
+		const id = e.target.dataset.id;
+		items = items.filter(i => i !== id);
+  }
+
+	function archive(e: CustomEvent) {
+		const id = e.target.dataset.id;
+		// call backend API to archive...
+
+		items = items.filter(i => i !== );
+	}
+</script>
+
+<ul>
+	{#each items as i}
+		<li
+			use:swipe={{ direction: 'horizontal', threshold: '50%' }}
+			data-id={i}
+			onswipeleft={archive}
+			onswiperight={delete}
+		>{i}</li>
+	{/each}
+</ul>
+```
+
+## [Changelog][github.changelog]
+
+<!-- github specifics -->
+
+[github.monorepo]: https://github.com/vnphanquang/svelte-put
+[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/next/packages/swipeable/CHANGELOG.md
+[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q=
+
+<!-- heading badge -->
+
+[npm.badge]: https://img.shields.io/npm/v/@svelte-put/swipeable
+[npm]: https://www.npmjs.com/package/@svelte-put/swipeable
+[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/swipeable?label=minzipped
+[bundlephobia]: https://bundlephobia.com/package/@svelte-put/swipeable
+[docs]: https://svelte-put.vnphanquang.com/docs/swipeable
+[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue
+

packages/swipeable/package.json

@@ -0,0 +1,61 @@
+{
+	"name": "@svelte-put/swipeable",
+	"version": "1.0.0-next.0",
+	"description": "set up quick swipe gesture action on element",
+	"main": "src/index.js",
+	"module": "src/index.js",
+	"types": "types/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./types/index.d.ts",
+			"import": "./src/index.js"
+		}
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"src",
+		"types"
+	],
+	"scripts": {
+		"lint": "eslint . --ignore-path=\"../../.eslintignore\"",
+		"format": "prettier --ignore-path ../../.prettierignore --write .",
+		"dts": "dts-buddy --write && publint",
+		"prepublishOnly": "turbo run dts --filter=@svelte-put/swipeable"
+	},
+	"keywords": [
+		"svelte",
+		"action",
+		"event",
+		"swipe",
+		"touch",
+		"gesture"
+	],
+	"author": {
+		"email": "[email protected]",
+		"name": "Quang Phan",
+		"url": "https://github.com/vnphanquang"
+	},
+	"license": "MIT",
+	"homepage": "https://svelte-put.vnphanquang.com/docs/swipeable",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/vnphanquang/svelte-put.git",
+		"directory": "packages/swipeable"
+	},
+	"bugs": {
+		"url": "https://github.com/vnphanquang/svelte-put/issues"
+	},
+	"devDependencies": {
+		"@internals/tsconfig": "workspace:*"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0-next.181"
+	},
+	"volta": {
+		"extends": "../../package.json"
+	}
+}
+

packages/swipeable/src/index.js

@@ -0,0 +1,5 @@
+// Copyright (c) Quang Phan. All rights reserved. Licensed under the MIT license.
+
+export * from './swipeable.svelte.js';
+export * from './types.public.js';
+

packages/swipeable/src/internals.js

@@ -0,0 +1,66 @@
+/**
+ * @param {Element} node
+ * @param {import('./types.public').SwipeThreshold} [param]
+ * @returns {{ x: number; y: number }}
+ */
+export function resolveThreshold(node, param = '20%') {
+	const value = parseFloat(param);
+
+	if (param.endsWith('%')) {
+		return {
+			x: node.clientWidth * value / 100,
+			y: node.clientHeight * value / 100,
+		};
+	}
+
+	if (param.endsWith('rem')) {
+		const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+		return {
+			x: fontSize * value,
+			y: fontSize * value,
+		};
+	}
+
+	return { x: value, y: value, };
+}
+
+/**
+ * @param {import('./types.public').SwipeableConfig['direction']} param
+ * @returns {import('./types.public').SwipeSingleDirection[]}
+ */
+export function resolveDirection(param) {
+	if (!param) return ['up', 'down', 'left', 'right'];
+
+	if (typeof param === 'string') {
+		if (param === 'x') {
+			return ['left', 'right'];
+		} else if (param === 'y') {
+			return ['up', 'down'];
+		} else if (param === 'all') {
+			return ['up', 'down', 'left', 'right'];
+		} else {
+			return [param];
+		}
+	}
+
+	/** @type {Set<import('./types.public').SwipeSingleDirection>} */
+	const set = new Set();
+	for (const d of param) {
+		if (d === 'x') {
+			set.add('left');
+			set.add('right');
+		} else if (d === 'y') {
+			set.add('up');
+			set.add('down');
+		} else if (d === 'all') {
+			set.add('up');
+			set.add('down');
+			set.add('left');
+			set.add('right');
+		} else {
+			set.add(d);
+		}
+	}
+	return Array.from(set);
+}
+