@sveltek/attachments 0.1.0

package/LICENSE.txt

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025, Ivo Dolenc <https://github.com/ivodolenc>
+Copyright (c) 2025, Sveltek <https://github.com/sveltek>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,44 @@
+<h1 align="center">@sveltek/attachments</h1>
+
+<p align="center">A collection of custom attachments for Svelte.</p>
+
+<br>
+
+> [!NOTE]
+>
+> Since [attachments](https://svelte.dev/docs/svelte/svelte-attachments) are a new feature in **Svelte**, this project is in an early testing phase to experiment with their implementation. As a result, breaking changes are very likely before the first stable release.
+>
+> If you find any issues or bugs, please [report](https://github.com/sveltek/markdown/issues/new/choose) them so the project can be improved.
+
+<br>
+
+## Installation
+
+```sh
+# via pnpm
+pnpm add @sveltek/attachments
+```
+
+```sh
+# via npm
+npm install @sveltek/attachments
+```
+
+## Attachments
+
+> **Required**: `svelte`: `>=5.29.0`
+
+- [clickOutside](./src/attachments/click-outside/README.md) → Triggers a callback when clicking outside the target element.
+- [keyboard](./src/attachments/keyboard/README.md) → Triggers a callback when a specified keyboard event occurs.
+
+## Community
+
+Feel free to ask questions or share new ideas.
+
+Use the official [discussions](https://github.com/sveltek/attachments/discussions) to get involved.
+
+## License
+
+Developed in 🇭🇷 Croatia, © Sveltek.
+
+Released under the [MIT](LICENSE.txt) license.

package/dist/index.d.mts

@@ -0,0 +1,38 @@
+import { Attachment } from 'svelte/attachments';
+
+declare function clickOutside(callback: (event: MouseEvent) => void, options?: ClickOutsideOptions): Attachment;
+
+interface ClickOutsideOptions {
+    event?: {
+        /**
+         * @default document
+         */
+        target?: Element | Document | Window;
+    };
+    /**
+     * @default undefined
+     */
+    trigger?: Element | null | (Element | null)[];
+}
+
+declare function keyboard(callback: (event: KeyboardEvent) => void, options?: KeyboardOptions): Attachment;
+
+interface KeyboardOptions {
+    event?: {
+        /**
+         * @default 'keydown'
+         */
+        type?: 'keydown' | 'keyup';
+        /**
+         * @default this
+         */
+        target?: Element | Document | Window;
+    };
+    /**
+     * @default undefined
+     */
+    keys?: string[];
+}
+
+export { clickOutside, keyboard };
+export type { ClickOutsideOptions, KeyboardOptions };

package/dist/index.mjs

@@ -0,0 +1,32 @@
+function clickOutside(callback, options = {}) {
+  return (el) => {
+    const { event: { target = document } = {}, trigger } = options;
+    const triggers = Array.isArray(trigger) ? trigger : [trigger];
+    const handler = (event) => {
+      const target2 = event.target;
+      if (el.contains(target2) || triggers.some((v) => v?.contains(target2))) {
+        return;
+      }
+      callback(event);
+    };
+    target.addEventListener("click", handler, true);
+    return () => {
+      target.removeEventListener("click", handler, true);
+    };
+  };
+}
+
+function keyboard(callback, options = {}) {
+  return (el) => {
+    const { event: { type = "keydown", target = el } = {}, keys } = options;
+    const handler = (event) => {
+      if (!keys || keys.includes(event.key)) callback(event);
+    };
+    target.addEventListener(type, handler);
+    return () => {
+      target.removeEventListener(type, handler);
+    };
+  };
+}
+
+export { clickOutside, keyboard };

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@sveltek/attachments",
+  "version": "0.1.0",
+  "author": "Sveltek",
+  "description": "A collection of custom attachments for Svelte.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sveltek/attachments.git"
+  },
+  "homepage": "https://github.com/sveltek/attachments",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "sveltek",
+    "svelte",
+    "sveltekit",
+    "attachments",
+    "composables",
+    "attachment",
+    "functions",
+    "function",
+    "attach",
+    "utils"
+  ],
+  "peerDependencies": {
+    "@types/node": ">=20.0.0",
+    "svelte": ">=5.29.0",
+    "typescript": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/node": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@hypernym/bundler": "^0.14.4",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.25.1",
+    "@sveltek/eslint-config": "^1.1.1",
+    "@sveltek/prettier-config": "^1.0.4",
+    "@types/node": "^24.0.15",
+    "eslint": "^9.31.0",
+    "prettier": "^3.6.2",
+    "svelte": "^5.36.13",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.5"
+  },
+  "scripts": {
+    "build": "hyperbundler",
+    "dev": "vite",
+    "build:playground": "vite build",
+    "preview": "vite preview",
+    "sync": "svelte-kit sync",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "format": "prettier --write .",
+    "bump": "taze -f --interactive"
+  }
+}