├── .gitignore
├── .npmrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── prettier.config.js
├── src
    ├── app.css
    ├── app.html
    ├── lib
    │   ├── Counter.svelte
    │   ├── IconMenu.svelte
    │   ├── Menu.svelte
    │   └── count.svelte.ts
    ├── package
    │   ├── OutClick.svelte
    │   ├── OutClickEvent.ts
    │   ├── castArray.ts
    │   ├── index.ts
    │   └── types.ts
    └── routes
    │   ├── +layout.svelte
    │   ├── +page.svelte
    │   ├── exclude
    │       └── +page.svelte
    │   └── half-click
    │       └── +page.svelte
├── static
    ├── Exo2-VariableFont_wght.woff2
    └── favicon.png
├── svelte.config.js
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | /node_modules/
3 | /.svelte-kit/
4 | /.vercel/
5 | /dist/
6 | vite.config.ts.timestamp-*
7 | pnpm-lock.yaml
8 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: CHANGELOG
  3 | ---
  4 | 
  5 | > [!IMPORTANT]
  6 | > Restart your app after updating the package.
  7 | 
  8 | ## 4.1.0
  9 | 
 10 | - [feature] Added `tag` prop and rest props type suggestion support with generic type support based on the `tag` prop.
 11 | 
 12 | ## 4.0.1
 13 | 
 14 | - Fixed `"svelte"` `"peerDependencies"` version by changing it to `">= 5"`.
 15 | 
 16 | ## 4.0.0
 17 | 
 18 | > [!IMPORTANT]
 19 | > There are breaking changes in this version.
 20 | 
 21 | - [breaking] Use `e.target` instead of `e.detail.target`.
 22 | - [breaking] `OutClickEvent` now returns `pointerdown` or `pointerup` or `keydown`, depending on how the outclick event is fired.
 23 | - [breaking] Also, take a look at the migration guide below.
 24 | - Exports `OutClickEvent` type.
 25 | 
 26 | ### Migration guide
 27 | 
 28 | Before:
 29 | 
 30 | ```svelte
 31 | <script>
 32 |     import OutClick from "svelte-outclick"
 33 | </script>
 34 | ```
 35 | 
 36 | After:
 37 | 
 38 | ```svelte
 39 | <script>
 40 |     import { OutClick } from "svelte-outclick"
 41 | </script>
 42 | ```
 43 | 
 44 | ---
 45 | 
 46 | Before:
 47 | 
 48 | ```svelte
 49 | <OutClick on:outclick={() => {}}></OutClick>
 50 | ```
 51 | 
 52 | After:
 53 | 
 54 | ```svelte
 55 | <OutClick onOutClick={() => {}}></OutClick>
 56 | ```
 57 | 
 58 | ## 3.7.1
 59 | 
 60 | - [feature] Added `e.detail.target` property.
 61 | - [breaking] Requires version `4.2.12` or higher.
 62 | 
 63 | ## 3.7.0
 64 | 
 65 | - Compatible with SvelteKit version `2.0.0`.
 66 | 
 67 | ## 3.6.2
 68 | 
 69 | - Now it's compatible with Svelte 5.
 70 | 
 71 | ## 3.6.1
 72 | 
 73 | - Fixed some issues related to props types.
 74 | 
 75 | ## 3.6.0
 76 | 
 77 | - Removed `e.detail` because it wasn't needed.
 78 | 
 79 | ## 3.5.0
 80 | 
 81 | - Please update to version `3.5.0` if you were using the `3.4.0` version.
 82 | 
 83 | ## 3.4.0
 84 | 
 85 | - Added TypeScript support.
 86 | 
 87 | ## 3.3.1
 88 | 
 89 | - Fixed some JSDocs data types.
 90 | 
 91 | ## 3.3.0
 92 | 
 93 | - [breaking] Renamed `fullClick` to `halfClick` (default: `false`).
 94 | - [breaking] Renamed `excludeByDomNode` to `excludeElements`.
 95 | - [breaking] Renamed `excludeByQuerySelector` to `excludeQuerySelectorAll`.
 96 | - Now you can set the `excludeElements` prop to the element itself instead of wrapping it with an array.
 97 | - Now the `excludeQuerySelectorAll` prop works the same as the JavaScript [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) method. It can contain values like `"#element1, .element2"` and `['#element1', '.element2']`.
 98 | - Added custom tag support. Now you can add a prop called `tag` to your `OutClick` component and change the wrapper tag. Added with the help of `svelte:element`.
 99 | - Now you can add custom attributes to render on the wrapper. Added with the help of `$$restProps`.
100 | 
101 | ## 3.2.0
102 | 
103 | - [breaking] Removed `useWrapper` prop, because it was unnecessary.
104 | - [breaking] Removed the default class `outclick` from the wrapper.
105 | - [breaking] Renamed `excludeByDOMNode` to `excludeByDomNode`
106 | - [breaking] Added new `fullClick` prop. Now clicking outside requires `pointerdown` and `pointerup` to fire at outside of your element. Set it to `false` so `pointerdown` can fire the `outclick` event on its own.
107 | - Fix empty `class` attribute showing up when not using a class.
108 | - Fix empty `style` attribute showing up when using the `class` prop.
109 | 
110 | ## 3.1.0
111 | 
112 | - Changed `on:mousedown` to `on:pointerdown` and fixed [this issue](https://github.com/babakfp/svelte-outclick/issues/6).
113 | 
114 | ## 3.0.1
115 | 
116 | - Removed `ROADMAP.todo`.
117 | - Fixed typo in `README.md`.
118 | - Rewrite the description in `README.md`.
119 | 
120 | ## 3.0.0
121 | 
122 | - Remplaced `exclude` prop with `excludeByDOMNode` and `excludeByQuerySelector`.
123 | - Renamed `.outclick-wrapper` component wrapper class to `.outclick`.
124 | - Using `on:mousedown` and `on:keydown` instead of `on:click`.
125 | - Removed `useMousedown` and `useKeydown` props.
126 | - If you use `class` prop, `display: contents` will be removed by default.
127 | 
128 | ## 2.6.5
129 | 
130 | - Added `useMousedown` and `useKeydown` props.
131 | - Fixed [this issue](https://github.com/babakfp/svelte-outclick/issues/4).
132 | 
133 | ## 2.5.4
134 | 
135 | - Replaced `on:click` with `on:mousedown` and fixed [this issue](https://github.com/babakfp/svelte-outclick/issues/4).
136 | 
137 | ## 2.4.3
138 | 
139 | - The `exclude` prop now accepts HTML `class` and `id` instead of DOM nodes.
140 | 
141 | ## 2.3.1
142 | 
143 | - Renamed dispatch `detail.self` to `detail.wrapper`.
144 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 babakfp
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Svelte OutClick
  2 | 
  3 | [![NPM](https://img.shields.io/npm/v/svelte-outclick?style=for-the-badge&label=NPM&color=%23cb0000)](https://www.npmjs.com/package/svelte-outclick)
  4 | 
  5 | A Svelte component that allows you to listen to the clicks that happen outside of an element.
  6 | 
  7 | - 📺 [Demo](https://svelte-outclick.vercel.app)
  8 | - 🪵 [CHANGELOG](https://github.com/babakfp/svelte-outclick/blob/main/README.md)
  9 | 
 10 | > [!IMPORTANT]
 11 | > The latest version of this package is not compatible with Svelte 4. Please use the version `3.7.1` for Svelte 4 compatibility.
 12 | 
 13 | ---
 14 | 
 15 | `onOutClick`
 16 | 
 17 | A Svelte component that allows you to listen to the clicks that happen outside of an element.
 18 | 
 19 | Why choose this over the other packages?
 20 | 
 21 | - [No extra wrapper](#no-extra-wrapper)
 22 | - Supports [`class`](#class-prop) prop
 23 | - [Exclude elements](#excluding-elements) from triggering the event
 24 | - [Half click](#halfclick) support
 25 | - TypeScript support
 26 | 
 27 | ## Install
 28 | 
 29 | Please check out the [**CHANGELOG**](svelte-outclick/changelog) before updating to the newest version. Restart your app after the update.
 30 | 
 31 | ```bash
 32 | pnpm add -D svelte-outclick
 33 | ```
 34 | 
 35 | ## How it works
 36 | 
 37 | It works the same as the Javascript click event. A few events are attached to the window and it checks whether the event target is contained within the element. If the element didn't contain the event target, it means the click happened outside of the element.
 38 | 
 39 | <!-- prettier-ignore -->
 40 | ```svelte
 41 | <script>
 42 | 	import { OutClick } from "svelte-outclick"
 43 | 	let count = 0
 44 | </script>
 45 | 
 46 | <OutClick
 47 | 	onOutClick={() => count += 1}
 48 | >
 49 | 	{count} times clicked outside
 50 | </OutClick>
 51 | ```
 52 | 
 53 | ## Props
 54 | 
 55 | ### Excluding elements
 56 | 
 57 | You may want to exclude some elements from triggering the event. For example, a button that opens a popup must be excluded, so the popup doesn't get closed immediately after you open it. Since the button that triggers the popup is located outside of the popup itself, in any time clicking on it will trigger the event.
 58 | 
 59 | #### `excludeElements`
 60 | 
 61 | - Type: `HTMLElement | HTMLElement[]`
 62 | 
 63 | This prop expects HTML elements. Clicks on those elements (and their children) will be ignored. Learn about [`bind:this`](https://svelte.dev/tutorial/bind-this).
 64 | 
 65 | <!-- prettier-ignore -->
 66 | ```svelte
 67 | <script lang="ts">
 68 | 	import { OutClick } from "svelte-outclick"
 69 | 	let excludedElement: HTMLDivElement
 70 | 	let count = 0
 71 | </script>
 72 | 
 73 | <OutClick
 74 | 	onOutClick={() => count += 1}
 75 | 	excludeElements={excludedElement}
 76 | >
 77 | 	{count} times clicked outside
 78 | </OutClick>
 79 | 
 80 | <div bind:this={excludedElement}>
 81 | 	This doesn't trigger outclick
 82 | </div>
 83 | ```
 84 | 
 85 | This prop can receive a single element or an array of elements.
 86 | 
 87 | #### `excludeQuerySelectorAll`
 88 | 
 89 | - Type: `string`
 90 | 
 91 | This prop expects a string of css selectors. Clicks on those elements (and their children) will be ignored.
 92 | 
 93 | <!-- prettier-ignore -->
 94 | ```svelte
 95 | <script>
 96 | 	import { OutClick } from "svelte-outclick"
 97 | 	let count = 0
 98 | </script>
 99 | 
100 | <OutClick
101 | 	onOutClick={() => count += 1}
102 | 	excludeQuerySelectorAll=".excluded-element"
103 | >
104 | 	{count} times clicked outside
105 | </OutClick>
106 | 
107 | <div class="excluded-element">
108 | 	This doesn't trigger outclick
109 | </div>
110 | ```
111 | 
112 | This prop works the same as the `querySelectorAll` method. It can contain any valid CSS selectors, for example: `"#element1, .element2"`.
113 | 
114 | ### `class` prop
115 | 
116 | - Type: `string`
117 | 
118 | This is equivalent to the CSS class attribute. You can seamlessly utilize tools such as Tailwind CSS by adding your classes in the usual manner, without encountering any issues.
119 | 
120 | <!-- prettier-ignore -->
121 | ```svelte
122 | <script>
123 | 	import { OutClick } from "svelte-outclick"
124 | 	let count = 0
125 | </script>
126 | 
127 | <div>
128 | 	<OutClick
129 | 		class="my-custom-class another-class"
130 | 		onOutClick={() => count += 1}
131 | 	>
132 | 		{count} times clicked outside
133 | 	</OutClick>
134 | </div>
135 | 
136 | <style>
137 | 	/* You need to use :global() here because of some stupid issue with Svelte. You also need to use an extra element (div) to wrap the component inside it, to scope the styles. */
138 | 	div :global(.my-custom-class) {
139 | 		color: red;
140 | 	}
141 | </style>
142 | ```
143 | 
144 | ### `includeSelf`
145 | 
146 | - Type: `boolean`
147 | - Default: `false`
148 | 
149 | For example, if you want to close the dropdown when you click on any of its items, set the value of this option to `true`, so a self-click can trigger the event.
150 | 
151 | ### `halfClick`
152 | 
153 | - Type: `boolean`
154 | - Default: `true`
155 | 
156 | If `true`, `pointerdown` can solely determine the click outside. If `false`, outclick will happen when `pointerdown` and `pointerup` events happen after each other, outside of the element.
157 | 
158 | ### `tag`
159 | 
160 | - Type: `string`
161 | - Default: `"div"`
162 | 
163 | You can change the tag name of the wrapper element.
164 | 
165 | ### Custom attributes
166 | 
167 | You can add any custom attributes to the wrapper element.
168 | 
169 | ```svelte
170 | <OutClick aria-label="Hello, World!" />
171 | ```
172 | 
173 | ## No extra wrapper
174 | 
175 | Actually, there is an HTML `<div>` wrapper, but it doesn't affect the layout because of [`display: contents`](https://caniuse.com/css-display-contents). If you use the `class` prop, the default display will be automatically removed.
176 | 
177 | ## FAQ
178 | 
179 | ### Why are we not using the `click` event to capture the `outclick` event?
180 | 
181 | At first, we were using the `click` event to capture the `outclick` event, but later because of [this issue](https://github.com/babakfp/svelte-outclick/issues/4) we started using the `mousedown` event instead; and later because of [this issue](https://github.com/babakfp/svelte-outclick/issues/6) we started using the `pointerdown` even. Later I added the ability to use `pointerup` event with the `pointerdown` event to fully simulate the click event.
182 | 
183 | ### Learn more
184 | 
185 | - `keydown` event on `document.body` is ignored because this is how it works when you use `click` event instead.
186 | - `keydown` event only triggers with `Enter`, `NumpadEnter`, and `Space` keys (because this is how it works when you use the `click` event instead).
187 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "svelte-outclick",
 3 |     "version": "4.1.2",
 4 |     "description": "A Svelte component that allows you to listen to the clicks that happen outside of an element.",
 5 |     "license": "MIT",
 6 |     "repository": "github:babakfp/svelte-outclick",
 7 |     "scripts": {
 8 |         "dev": "vite dev",
 9 |         "build": "vite build && pnpm package",
10 |         "preview": "vite preview",
11 |         "prepare": "svelte-kit sync",
12 |         "package": "svelte-kit sync && svelte-package -i src/package && publint",
13 |         "prepublishOnly": "pnpm package",
14 |         "format": "prettier -w .",
15 |         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
16 |         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
17 |     },
18 |     "peerDependencies": {
19 |         "svelte": ">= 5"
20 |     },
21 |     "devDependencies": {
22 |         "@ianvs/prettier-plugin-sort-imports": "4.4.1",
23 |         "@sveltejs/adapter-vercel": "5.7.2",
24 |         "@sveltejs/kit": "2.21.1",
25 |         "@sveltejs/package": "2.3.11",
26 |         "@sveltejs/vite-plugin-svelte": "5.0.3",
27 |         "@tailwindcss/vite": "4.1.7",
28 |         "prettier": "3.5.3",
29 |         "prettier-plugin-svelte": "3.4.0",
30 |         "prettier-plugin-tailwindcss": "0.6.11",
31 |         "publint": "0.3.12",
32 |         "svelte": "5.32.1",
33 |         "svelte-check": "4.2.1",
34 |         "svelte-loading-bar": "2.0.4",
35 |         "tailwindcss": "4.1.7",
36 |         "tslib": "2.8.1",
37 |         "typescript": "5.8.3",
38 |         "vite": "6.3.5"
39 |     },
40 |     "files": [
41 |         "dist"
42 |     ],
43 |     "exports": {
44 |         ".": {
45 |             "types": "./dist/index.d.ts",
46 |             "svelte": "./dist/index.js"
47 |         }
48 |     },
49 |     "types": "./dist/index.d.ts",
50 |     "svelte": "./dist/index.js",
51 |     "keywords": [
52 |         "svelte",
53 |         "outclick",
54 |         "outside",
55 |         "click"
56 |     ],
57 |     "type": "module"
58 | }
59 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import("prettier").Config & import("prettier-plugin-svelte").PluginConfig & import("@ianvs/prettier-plugin-sort-imports").PluginConfig} */
 2 | export default {
 3 |     semi: false,
 4 |     tabWidth: 4,
 5 |     plugins: [
 6 |         "prettier-plugin-svelte",
 7 |         "prettier-plugin-tailwindcss",
 8 |         "@ianvs/prettier-plugin-sort-imports",
 9 |     ],
10 |     importOrder: [
11 |         "^@",
12 |         "<THIRD_PARTY_MODULES>",
13 |         "^\\$(?!lib/)",
14 |         "^\\$lib/",
15 |         "^[.]",
16 |     ],
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | @config "../tailwind.config.ts";
 3 | 
 4 | @layer base {
 5 |     * {
 6 |         @apply select-none;
 7 |     }
 8 |     svg.icon {
 9 |         @apply pointer-events-none inline-block h-[1em] w-[1em] fill-current;
10 |     }
11 | }
12 | 
13 | @layer components {
14 |     .box {
15 |         @apply relative z-10 flex h-20 items-center justify-center rounded border-2 border-dashed border-gray-700 bg-gray-900 text-center text-xs;
16 |     }
17 |     .box--blue {
18 |         @apply bg-stripes-blue-400/20 border-blue-400/60;
19 |     }
20 |     .box--green {
21 |         @apply bg-stripes-green-400/20 border-green-400/60;
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="utf-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 
 7 |         <link rel="icon" href="/favicon.png" />
 8 | 
 9 |         <title>Svelte OutClick</title>
10 |         <meta
11 |             name="description"
12 |             content="A Svelte component that allows you to listen to the clicks that happen outside of an element."
13 |         />
14 | 
15 |         <link
16 |             rel="preload"
17 |             as="font"
18 |             type="font/woff2"
19 |             href="/Exo2-VariableFont_wght.woff2"
20 |             crossorigin="anonymous"
21 |         />
22 | 
23 |         <style>
24 |             @font-face {
25 |                 font-family: "Exo2";
26 |                 font-style: normal;
27 |                 font-display: swap;
28 |                 font-weight: 300 1000;
29 |                 src: url("/Exo2-VariableFont_wght.woff2")
30 |                     format("woff2-variations");
31 |             }
32 |         </style>
33 | 
34 |         %sveltekit.head%
35 |     </head>
36 |     <body class="bg-gray-900 text-gray-300 bg-stripes-gray-400/[0.02]">
37 |         <div class="contents">%sveltekit.body%</div>
38 |     </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/src/lib/Counter.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { fly } from "svelte/transition"
 3 |     import { count } from "./count.svelte.js"
 4 | </script>
 5 | 
 6 | <div
 7 |     class="flex h-8 w-8 items-center justify-center rounded bg-gray-800 text-xs font-medium"
 8 | >
 9 |     {#key count.value}
10 |         <div
11 |             class="absolute"
12 |             in:fly={{ y: -32, duration: 500 }}
13 |             out:fly={{ y: 32, duration: 500 }}
14 |         >
15 |             {count.value}
16 |         </div>
17 |     {/key}
18 | </div>
19 | 


--------------------------------------------------------------------------------
/src/lib/IconMenu.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     let {
 3 |         class: class_,
 4 |     }: {
 5 |         class?: string
 6 |     } = $props()
 7 | </script>
 8 | 
 9 | <!-- prettier-ignore -->
10 | <svg class="icon {class_}" xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#7ea602" viewBox="0 0 256 256"><path d="M216,64V192H40V64Z" opacity="0.2"></path><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg>
11 | 


--------------------------------------------------------------------------------
/src/lib/Menu.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { page } from "$app/stores"
 3 | 
 4 |     const items = [
 5 |         { title: "HOME", href: "/" },
 6 |         { title: "EXCLUDE", href: "/exclude" },
 7 |         { title: "HALF CLICK", href: "/half-click" },
 8 |     ]
 9 | </script>
10 | 
11 | <header>
12 |     <nav>
13 |         <ul class="flex justify-center">
14 |             {#each items as item}
15 |                 <li>
16 |                     <a
17 |                         class="flex h-14 items-center px-4 text-xs text-gray-400 duration-150 hover:text-gray-50"
18 |                         class:text-gray-50={item.href === $page.url.pathname}
19 |                         href={item.href}
20 |                     >
21 |                         {item.title}
22 |                     </a>
23 |                 </li>
24 |             {/each}
25 |         </ul>
26 |     </nav>
27 | </header>
28 | 


--------------------------------------------------------------------------------
/src/lib/count.svelte.ts:
--------------------------------------------------------------------------------
1 | export const count = $state({ value: 0 })
2 | 


--------------------------------------------------------------------------------
/src/package/OutClick.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts" generics="Tag extends OptionalHtmlTags">
  2 |     import type { Snippet } from "svelte"
  3 |     import { castArray } from "./castArray.js"
  4 |     import type { OutClickEvent } from "./OutClickEvent.js"
  5 |     import type { OptionalHtmlTags, RestProps } from "./types.js"
  6 | 
  7 |     let {
  8 |         tag = "div",
  9 |         class: class_,
 10 |         excludeElements,
 11 |         excludeQuerySelectorAll,
 12 |         includeSelf,
 13 |         halfClick,
 14 |         children,
 15 |         onOutClick,
 16 |         ...restProps
 17 |     }: {
 18 |         /** Wrapper tag. */
 19 |         tag?: Tag
 20 |         /** To use it as HTML `class` attr. */
 21 |         class?: string
 22 |         /** DOM elements to exclude from triggering the `outclick` event. */
 23 |         excludeElements?: HTMLElement | HTMLElement[]
 24 |         /** DOM elements to exclude from triggering the `outclick` event. */
 25 |         excludeQuerySelectorAll?: string
 26 |         /** If the wrapper did contain the event target, allow the `outclick` event to dispatch. */
 27 |         includeSelf?: boolean
 28 |         /** Should the outclick event happen on (`pointerdown`) or (`pointerdown` + `pointerup`). */
 29 |         halfClick?: boolean
 30 |         /** The component children. */
 31 |         children: Snippet
 32 |         /** The main `onOutClick` event handler. */
 33 |         onOutClick: (event: OutClickEvent) => void
 34 |         /** Any other props (`restProps`). */
 35 |     } & RestProps<Tag, "div"> = $props()
 36 | 
 37 |     /** The developer can enter a single element or an array of elements. `excludeElements={element}` or `excludeElements={[element1, element2]}`. */
 38 |     const excludeElementsArray = $derived<HTMLElement[]>(
 39 |         excludeElements ? castArray(excludeElements) : [],
 40 |     )
 41 | 
 42 |     /** Using to handle full-click functionality. Simulating the core click event without having this issue: https://github.com/babakfp/svelte-outclick/issues/4. */
 43 |     let isPointerDownTriggered = false
 44 | 
 45 |     /** DOM element that wraps everything that goes inside the component slot. */
 46 |     let wrapper = $state<HTMLElement>()
 47 | 
 48 |     const didClickOnExcludedElement = (
 49 |         target: OutClickEvent["target"],
 50 |     ): boolean => {
 51 |         if (!(target instanceof Node)) return false
 52 | 
 53 |         let status = false
 54 | 
 55 |         if (excludeElementsArray && excludeElementsArray.length > 0) {
 56 |             for (const element of excludeElementsArray) {
 57 |                 if (element && element.contains(target)) {
 58 |                     status = true
 59 |                     break
 60 |                 }
 61 |             }
 62 |         }
 63 | 
 64 |         if (excludeQuerySelectorAll) {
 65 |             const elements = document.querySelectorAll(excludeQuerySelectorAll)
 66 |             for (const element of elements) {
 67 |                 if (element && element.contains(target)) {
 68 |                     status = true
 69 |                     break
 70 |                 }
 71 |             }
 72 |         }
 73 | 
 74 |         return status
 75 |     }
 76 | 
 77 |     const isOutsideEventHappen = (target: OutClickEvent["target"]): boolean => {
 78 |         if (!wrapper) return false
 79 |         if (!(target instanceof Node)) return false
 80 | 
 81 |         if (
 82 |             (includeSelf && wrapper.contains(target)) ||
 83 |             (!wrapper.contains(target) && !didClickOnExcludedElement(target))
 84 |         ) {
 85 |             return true
 86 |         }
 87 | 
 88 |         return false
 89 |     }
 90 | 
 91 |     const handlePointerdown = (e: PointerEvent): void => {
 92 |         if (isOutsideEventHappen(e.target)) {
 93 |             if (halfClick) {
 94 |                 onOutClick(e)
 95 |             } else {
 96 |                 isPointerDownTriggered = true
 97 |             }
 98 |         }
 99 |     }
100 | 
101 |     const handlePointerup = (e: PointerEvent): void => {
102 |         if (halfClick) return
103 | 
104 |         if (isOutsideEventHappen(e.target) && isPointerDownTriggered) {
105 |             onOutClick(e)
106 |         }
107 | 
108 |         isPointerDownTriggered = false
109 |     }
110 | 
111 |     const handleKeydown = (e: KeyboardEvent): void => {
112 |         if (
113 |             // With `on:click`, the A11Y `keydown` event doesn't trigger on `document.body`, so we are just duplicating the same behavior here.
114 |             e.target !== document.body &&
115 |             // With `on:click`, the A11Y `keydown`, only these keys trigger the event
116 |             ["Enter", "NumpadEnter", "Space"].includes(e.code)
117 |         ) {
118 |             if (isOutsideEventHappen(e.target)) {
119 |                 onOutClick(e)
120 |             }
121 |         }
122 |     }
123 | </script>
124 | 
125 | <!-- Have this to capture the events -->
126 | <svelte:window
127 |     onpointerdown={handlePointerdown}
128 |     onpointerup={handlePointerup}
129 |     onkeydown={handleKeydown}
130 | />
131 | 
132 | <svelte:element
133 |     this={tag}
134 |     bind:this={wrapper}
135 |     class={class_ || undefined}
136 |     style={class_ ? undefined : "display: contents"}
137 |     {...restProps}
138 | >
139 |     {@render children()}
140 | </svelte:element>
141 | 


--------------------------------------------------------------------------------
/src/package/OutClickEvent.ts:
--------------------------------------------------------------------------------
1 | export type OutClickEvent = PointerEvent | KeyboardEvent
2 | 


--------------------------------------------------------------------------------
/src/package/castArray.ts:
--------------------------------------------------------------------------------
1 | export const castArray = (value: any) => {
2 |     return Array.isArray(value) ? value : [value]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/package/index.ts:
--------------------------------------------------------------------------------
1 | export { default as OutClick } from "./OutClick.svelte"
2 | export type { OutClickEvent } from "./OutClickEvent"
3 | 


--------------------------------------------------------------------------------
/src/package/types.ts:
--------------------------------------------------------------------------------
  1 | import type {
  2 |     HTMLAnchorAttributes,
  3 |     HTMLAreaAttributes,
  4 |     HTMLAttributes,
  5 |     HTMLAudioAttributes,
  6 |     HTMLBaseAttributes,
  7 |     HTMLBlockquoteAttributes,
  8 |     HTMLButtonAttributes,
  9 |     HTMLCanvasAttributes,
 10 |     HTMLColAttributes,
 11 |     HTMLColgroupAttributes,
 12 |     HTMLDataAttributes,
 13 |     HTMLDelAttributes,
 14 |     HTMLDetailsAttributes,
 15 |     HTMLDialogAttributes,
 16 |     HTMLEmbedAttributes,
 17 |     HTMLFieldsetAttributes,
 18 |     HTMLFormAttributes,
 19 |     HTMLHtmlAttributes,
 20 |     HTMLIframeAttributes,
 21 |     HTMLImgAttributes,
 22 |     HTMLInputAttributes,
 23 |     HTMLInsAttributes,
 24 |     HTMLKeygenAttributes,
 25 |     HTMLLabelAttributes,
 26 |     HTMLLiAttributes,
 27 |     HTMLLinkAttributes,
 28 |     HTMLMapAttributes,
 29 |     HTMLMenuAttributes,
 30 |     HTMLMetaAttributes,
 31 |     HTMLMeterAttributes,
 32 |     HTMLObjectAttributes,
 33 |     HTMLOlAttributes,
 34 |     HTMLOptgroupAttributes,
 35 |     HTMLOptionAttributes,
 36 |     HTMLOutputAttributes,
 37 |     HTMLParamAttributes,
 38 |     HTMLProgressAttributes,
 39 |     HTMLQuoteAttributes,
 40 |     HTMLScriptAttributes,
 41 |     HTMLSelectAttributes,
 42 |     HTMLSlotAttributes,
 43 |     HTMLSourceAttributes,
 44 |     HTMLStyleAttributes,
 45 |     HTMLTableAttributes,
 46 |     HTMLTdAttributes,
 47 |     HTMLTemplateAttributes,
 48 |     HTMLTextareaAttributes,
 49 |     HTMLThAttributes,
 50 |     HTMLTimeAttributes,
 51 |     HTMLTrackAttributes,
 52 |     HTMLVideoAttributes,
 53 |     HTMLWebViewAttributes,
 54 |     SVGAttributes,
 55 | } from "svelte/elements"
 56 | 
 57 | /**
 58 |  * A clean version of the `SvelteHTMLElements` type, from the `svelte/elements` module.
 59 |  * It doesn't include the Svelte special elements (`svelte:window` etc.), and only includes known valid HTML elements.
 60 |  */
 61 | export type HtmlElements = {
 62 |     a: HTMLAnchorAttributes
 63 |     abbr: HTMLAttributes<HTMLElement>
 64 |     address: HTMLAttributes<HTMLElement>
 65 |     area: HTMLAreaAttributes
 66 |     article: HTMLAttributes<HTMLElement>
 67 |     aside: HTMLAttributes<HTMLElement>
 68 |     audio: HTMLAudioAttributes
 69 |     b: HTMLAttributes<HTMLElement>
 70 |     base: HTMLBaseAttributes
 71 |     bdi: HTMLAttributes<HTMLElement>
 72 |     bdo: HTMLAttributes<HTMLElement>
 73 |     big: HTMLAttributes<HTMLElement>
 74 |     blockquote: HTMLBlockquoteAttributes
 75 |     body: HTMLAttributes<HTMLBodyElement>
 76 |     br: HTMLAttributes<HTMLBRElement>
 77 |     button: HTMLButtonAttributes
 78 |     canvas: HTMLCanvasAttributes
 79 |     caption: HTMLAttributes<HTMLElement>
 80 |     cite: HTMLAttributes<HTMLElement>
 81 |     code: HTMLAttributes<HTMLElement>
 82 |     col: HTMLColAttributes
 83 |     colgroup: HTMLColgroupAttributes
 84 |     data: HTMLDataAttributes
 85 |     datalist: HTMLAttributes<HTMLDataListElement>
 86 |     dd: HTMLAttributes<HTMLElement>
 87 |     del: HTMLDelAttributes
 88 |     details: HTMLDetailsAttributes
 89 |     dfn: HTMLAttributes<HTMLElement>
 90 |     dialog: HTMLDialogAttributes
 91 |     div: HTMLAttributes<HTMLDivElement>
 92 |     dl: HTMLAttributes<HTMLDListElement>
 93 |     dt: HTMLAttributes<HTMLElement>
 94 |     em: HTMLAttributes<HTMLElement>
 95 |     embed: HTMLEmbedAttributes
 96 |     fieldset: HTMLFieldsetAttributes
 97 |     figcaption: HTMLAttributes<HTMLElement>
 98 |     figure: HTMLAttributes<HTMLElement>
 99 |     footer: HTMLAttributes<HTMLElement>
100 |     form: HTMLFormAttributes
101 |     h1: HTMLAttributes<HTMLHeadingElement>
102 |     h2: HTMLAttributes<HTMLHeadingElement>
103 |     h3: HTMLAttributes<HTMLHeadingElement>
104 |     h4: HTMLAttributes<HTMLHeadingElement>
105 |     h5: HTMLAttributes<HTMLHeadingElement>
106 |     h6: HTMLAttributes<HTMLHeadingElement>
107 |     head: HTMLAttributes<HTMLElement>
108 |     header: HTMLAttributes<HTMLElement>
109 |     hgroup: HTMLAttributes<HTMLElement>
110 |     hr: HTMLAttributes<HTMLHRElement>
111 |     html: HTMLHtmlAttributes
112 |     i: HTMLAttributes<HTMLElement>
113 |     iframe: HTMLIframeAttributes
114 |     img: HTMLImgAttributes
115 |     input: HTMLInputAttributes
116 |     ins: HTMLInsAttributes
117 |     kbd: HTMLAttributes<HTMLElement>
118 |     keygen: HTMLKeygenAttributes
119 |     label: HTMLLabelAttributes
120 |     legend: HTMLAttributes<HTMLLegendElement>
121 |     li: HTMLLiAttributes
122 |     link: HTMLLinkAttributes
123 |     main: HTMLAttributes<HTMLElement>
124 |     map: HTMLMapAttributes
125 |     mark: HTMLAttributes<HTMLElement>
126 |     menu: HTMLMenuAttributes
127 |     menuitem: HTMLAttributes<HTMLElement>
128 |     meta: HTMLMetaAttributes
129 |     meter: HTMLMeterAttributes
130 |     nav: HTMLAttributes<HTMLElement>
131 |     noscript: HTMLAttributes<HTMLElement>
132 |     object: HTMLObjectAttributes
133 |     ol: HTMLOlAttributes
134 |     optgroup: HTMLOptgroupAttributes
135 |     option: HTMLOptionAttributes
136 |     output: HTMLOutputAttributes
137 |     p: HTMLAttributes<HTMLParagraphElement>
138 |     param: HTMLParamAttributes
139 |     picture: HTMLAttributes<HTMLElement>
140 |     pre: HTMLAttributes<HTMLPreElement>
141 |     progress: HTMLProgressAttributes
142 |     q: HTMLQuoteAttributes
143 |     rp: HTMLAttributes<HTMLElement>
144 |     rt: HTMLAttributes<HTMLElement>
145 |     ruby: HTMLAttributes<HTMLElement>
146 |     s: HTMLAttributes<HTMLElement>
147 |     samp: HTMLAttributes<HTMLElement>
148 |     slot: HTMLSlotAttributes
149 |     script: HTMLScriptAttributes
150 |     search: HTMLAttributes<HTMLElement>
151 |     section: HTMLAttributes<HTMLElement>
152 |     select: HTMLSelectAttributes
153 |     small: HTMLAttributes<HTMLElement>
154 |     source: HTMLSourceAttributes
155 |     span: HTMLAttributes<HTMLSpanElement>
156 |     strong: HTMLAttributes<HTMLElement>
157 |     style: HTMLStyleAttributes
158 |     sub: HTMLAttributes<HTMLElement>
159 |     summary: HTMLAttributes<HTMLElement>
160 |     sup: HTMLAttributes<HTMLElement>
161 |     table: HTMLTableAttributes
162 |     template: HTMLTemplateAttributes
163 |     tbody: HTMLAttributes<HTMLTableSectionElement>
164 |     td: HTMLTdAttributes
165 |     textarea: HTMLTextareaAttributes
166 |     tfoot: HTMLAttributes<HTMLTableSectionElement>
167 |     th: HTMLThAttributes
168 |     thead: HTMLAttributes<HTMLTableSectionElement>
169 |     time: HTMLTimeAttributes
170 |     title: HTMLAttributes<HTMLTitleElement>
171 |     tr: HTMLAttributes<HTMLTableRowElement>
172 |     track: HTMLTrackAttributes
173 |     u: HTMLAttributes<HTMLElement>
174 |     ul: HTMLAttributes<HTMLUListElement>
175 |     var: HTMLAttributes<HTMLElement>
176 |     video: HTMLVideoAttributes
177 |     wbr: HTMLAttributes<HTMLElement>
178 |     webview: HTMLWebViewAttributes
179 |     svg: SVGAttributes<SVGSVGElement>
180 | 
181 |     animate: SVGAttributes<SVGAnimateElement>
182 |     animateMotion: SVGAttributes<SVGElement>
183 |     animateTransform: SVGAttributes<SVGAnimateTransformElement>
184 |     circle: SVGAttributes<SVGCircleElement>
185 |     clipPath: SVGAttributes<SVGClipPathElement>
186 |     defs: SVGAttributes<SVGDefsElement>
187 |     desc: SVGAttributes<SVGDescElement>
188 |     ellipse: SVGAttributes<SVGEllipseElement>
189 |     feBlend: SVGAttributes<SVGFEBlendElement>
190 |     feColorMatrix: SVGAttributes<SVGFEColorMatrixElement>
191 |     feComponentTransfer: SVGAttributes<SVGFEComponentTransferElement>
192 |     feComposite: SVGAttributes<SVGFECompositeElement>
193 |     feConvolveMatrix: SVGAttributes<SVGFEConvolveMatrixElement>
194 |     feDiffuseLighting: SVGAttributes<SVGFEDiffuseLightingElement>
195 |     feDisplacementMap: SVGAttributes<SVGFEDisplacementMapElement>
196 |     feDistantLight: SVGAttributes<SVGFEDistantLightElement>
197 |     feDropShadow: SVGAttributes<SVGFEDropShadowElement>
198 |     feFlood: SVGAttributes<SVGFEFloodElement>
199 |     feFuncA: SVGAttributes<SVGFEFuncAElement>
200 |     feFuncB: SVGAttributes<SVGFEFuncBElement>
201 |     feFuncG: SVGAttributes<SVGFEFuncGElement>
202 |     feFuncR: SVGAttributes<SVGFEFuncRElement>
203 |     feGaussianBlur: SVGAttributes<SVGFEGaussianBlurElement>
204 |     feImage: SVGAttributes<SVGFEImageElement>
205 |     feMerge: SVGAttributes<SVGFEMergeElement>
206 |     feMergeNode: SVGAttributes<SVGFEMergeNodeElement>
207 |     feMorphology: SVGAttributes<SVGFEMorphologyElement>
208 |     feOffset: SVGAttributes<SVGFEOffsetElement>
209 |     fePointLight: SVGAttributes<SVGFEPointLightElement>
210 |     feSpecularLighting: SVGAttributes<SVGFESpecularLightingElement>
211 |     feSpotLight: SVGAttributes<SVGFESpotLightElement>
212 |     feTile: SVGAttributes<SVGFETileElement>
213 |     feTurbulence: SVGAttributes<SVGFETurbulenceElement>
214 |     filter: SVGAttributes<SVGFilterElement>
215 |     foreignObject: SVGAttributes<SVGForeignObjectElement>
216 |     g: SVGAttributes<SVGGElement>
217 |     image: SVGAttributes<SVGImageElement>
218 |     line: SVGAttributes<SVGLineElement>
219 |     linearGradient: SVGAttributes<SVGLinearGradientElement>
220 |     marker: SVGAttributes<SVGMarkerElement>
221 |     mask: SVGAttributes<SVGMaskElement>
222 |     metadata: SVGAttributes<SVGMetadataElement>
223 |     mpath: SVGAttributes<SVGElement>
224 |     path: SVGAttributes<SVGPathElement>
225 |     pattern: SVGAttributes<SVGPatternElement>
226 |     polygon: SVGAttributes<SVGPolygonElement>
227 |     polyline: SVGAttributes<SVGPolylineElement>
228 |     radialGradient: SVGAttributes<SVGRadialGradientElement>
229 |     rect: SVGAttributes<SVGRectElement>
230 |     stop: SVGAttributes<SVGStopElement>
231 |     switch: SVGAttributes<SVGSwitchElement>
232 |     symbol: SVGAttributes<SVGSymbolElement>
233 |     text: SVGAttributes<SVGTextElement>
234 |     textPath: SVGAttributes<SVGTextPathElement>
235 |     tspan: SVGAttributes<SVGTSpanElement>
236 |     use: SVGAttributes<SVGUseElement>
237 |     view: SVGAttributes<SVGViewElement>
238 | }
239 | 
240 | /**
241 |  * Every known valid HTML tags.
242 |  */
243 | export type HtmlTags = keyof HtmlElements
244 | 
245 | /**
246 |  * Same as `HtmlTags`, but with `undefined`, for optional props.
247 |  */
248 | export type OptionalHtmlTags = HtmlTags | undefined
249 | 
250 | /**
251 |  * Filters out the `on` event attributes from element attributes.
252 |  */
253 | export type FilterNonEventAttributes<T> = {
254 |     [K in keyof T as K extends `on${string}` ? never : K]: T[K]
255 | }
256 | 
257 | /**
258 |  * Returns known valid attributes of a given HTML tag.
259 |  * TTag is the HTML tag name, or `undefined` for the default tag.
260 |  * TDefault is the default HTML tag name, if TTag is `undefined`.
261 |  */
262 | export type RestProps<
263 |     TTag extends OptionalHtmlTags,
264 |     TDefault extends HtmlTags,
265 | > = FilterNonEventAttributes<
266 |     HtmlElements[TTag extends undefined ? TDefault : TTag]
267 | >
268 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import "../app.css"
 3 |     import type { Snippet } from "svelte"
 4 |     import { LoadingBar } from "svelte-loading-bar"
 5 |     import { fly } from "svelte/transition"
 6 |     import { navigating, page } from "$app/stores"
 7 |     import Counter from "$lib/Counter.svelte"
 8 |     import Menu from "$lib/Menu.svelte"
 9 | 
10 |     let {
11 |         children,
12 |     }: {
13 |         children: Snippet
14 |     } = $props()
15 | 
16 |     let description = $state("Listen to clicks that happen outside.")
17 |     $effect(() => {
18 |         if (!navigating) return
19 |         if ($page.url.pathname === "/exclude") {
20 |             description = "Exclude elements from triggering the event."
21 |         }
22 |         if ($page.url.pathname === "/half-click") {
23 |             description = "Trigger on pointer-down instead of full click."
24 |         }
25 |     })
26 | </script>
27 | 
28 | <LoadingBar />
29 | 
30 | <div>
31 |     <Menu />
32 | 
33 |     <div
34 |         class="mx-auto grid min-h-[calc(100vh-3.5rem)] max-w-80 content-center gap-4 py-12 pb-24"
35 |     >
36 |         <div class="flex items-center gap-2">
37 |             <Counter />
38 |             <span class="text-xs text-gray-400">TIMES CLICKED OUTSIDE</span>
39 |         </div>
40 | 
41 |         {#key $page.url.pathname}
42 |             <div class="grid gap-2" in:fly={{ y: 64, duration: 300 }}>
43 |                 {@render children()}
44 |             </div>
45 | 
46 |             {#if description}
47 |                 <p
48 |                     class="text-xs leading-5 text-gray-400"
49 |                     in:fly={{ y: 32, duration: 300, delay: 100 }}
50 |                 >
51 |                     {@html description}
52 |                 </p>
53 |             {/if}
54 |         {/key}
55 |     </div>
56 | </div>
57 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 |     import { OutClick } from "svelte-outclick"
3 |     import { count } from "$lib/count.svelte.js"
4 | </script>
5 | 
6 | <OutClick class="box box--blue" onOutClick={() => (count.value += 1)}>
7 |     COMPONENT
8 | </OutClick>
9 | 


--------------------------------------------------------------------------------
/src/routes/exclude/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { OutClick } from "svelte-outclick"
 3 |     import { count } from "$lib/count.svelte.js"
 4 | </script>
 5 | 
 6 | <OutClick
 7 |     class="box box--blue"
 8 |     onOutClick={() => (count.value += 1)}
 9 |     excludeQuerySelectorAll="#nothing-happens"
10 | >
11 |     COMPONENT
12 | </OutClick>
13 | 
14 | <div id="nothing-happens" class="box box--green">
15 |     EXCLUDED (NOTHING HAPPENS)
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/routes/half-click/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { OutClick } from "svelte-outclick"
 3 |     import { count } from "$lib/count.svelte.js"
 4 | </script>
 5 | 
 6 | <OutClick
 7 |     class="box box--blue"
 8 |     onOutClick={() => (count.value += 1)}
 9 |     halfClick={true}
10 | >
11 |     COMPONENT
12 | </OutClick>
13 | 


--------------------------------------------------------------------------------
/static/Exo2-VariableFont_wght.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/babakfp/svelte-outclick/b407b2bc13198b9ace29ddb4ac3dbb85367f6d8a/static/Exo2-VariableFont_wght.woff2


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/babakfp/svelte-outclick/b407b2bc13198b9ace29ddb4ac3dbb85367f6d8a/static/favicon.png


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from "@sveltejs/adapter-vercel"
 2 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
 3 | 
 4 | /** @type {import("@sveltejs/kit").Config} */
 5 | export default {
 6 |     preprocess: vitePreprocess(),
 7 |     kit: {
 8 |         adapter: adapter(),
 9 |         alias: {
10 |             "svelte-outclick": "src/package/index.ts",
11 |         },
12 |     },
13 | }
14 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss"
 2 | import colors from "tailwindcss/colors"
 3 | import { default as flattenColorPalette } from "tailwindcss/lib/util/flattenColorPalette"
 4 | 
 5 | export default {
 6 |     content: ["./src/**/*.{html,svelte}"],
 7 |     theme: {
 8 |         extend: {
 9 |             colors: {
10 |                 gray: colors.neutral,
11 |             },
12 |             fontFamily: {
13 |                 sans: "Exo2",
14 |             },
15 |         },
16 |     },
17 |     plugins: [
18 |         ({ theme, matchUtilities }) => {
19 |             const backgroundSize = "4px 4px"
20 |             const backgroundImage = (color: string) =>
21 |                 `linear-gradient(135deg, ${color} 10%, transparent 10%, transparent 50%, ${color} 50%, ${color} 60%, transparent 60%, transparent 100%)`
22 | 
23 |             matchUtilities(
24 |                 {
25 |                     "bg-stripes": (value: string) => ({
26 |                         "background-image": backgroundImage(value),
27 |                         "background-size": backgroundSize,
28 |                     }),
29 |                 },
30 |                 {
31 |                     values: flattenColorPalette(theme("colors")),
32 |                     type: "color",
33 |                 },
34 |             )
35 |         },
36 |     ],
37 | } satisfies Config
38 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "./.svelte-kit/tsconfig.json",
 3 |     "compilerOptions": {
 4 |         "allowJs": true,
 5 |         "checkJs": true,
 6 |         "esModuleInterop": true,
 7 |         "forceConsistentCasingInFileNames": true,
 8 |         "resolveJsonModule": true,
 9 |         "skipLibCheck": true,
10 |         "sourceMap": true,
11 |         "strict": true,
12 |         "moduleResolution": "bundler"
13 |     }
14 | }
15 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from "@sveltejs/kit/vite"
2 | import tailwindcss from "@tailwindcss/vite"
3 | import { defineConfig } from "vite"
4 | 
5 | export default defineConfig({
6 |     plugins: [tailwindcss(), sveltekit()],
7 | })
8 | 


--------------------------------------------------------------------------------