Skip to content

Commit d99b484

Browse files
vnphanquangvnphanquang
committed
feat(clickoutside): implement action clickoutside with limit feature
1 parent 32ecf87 commit d99b484

21 files changed

Lines changed: 451 additions & 7 deletions

‎.github/workflows/clickoutside.release.yaml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: clickoutside:release
2+
3+
on:
4+
workflow_dispatch:
5+
6+
jobs:
7+
Release:
8+
runs-on: ubuntu-latest
9+
steps:
10+
- name: Checkout repository
11+
uses: actions/checkout@v3
12+
with:
13+
fetch-depth: 0
14+
- name: Setup pnpm
15+
uses: pnpm/action-setup@v2.2.1
16+
with:
17+
version: 7.0.0
18+
- name: Setup node
19+
uses: actions/setup-node@v3
20+
with:
21+
node-version: 16
22+
cache: pnpm
23+
- name: Install dependencies
24+
run: pnpm install --frozen-lockfile
25+
continue-on-error: false
26+
- name: Build package
27+
run: pnpm build --filter=@svelte-put/clickoutside
28+
continue-on-error: false
29+
- name: Release
30+
run: pnpm semantic-release --filter=@svelte-put/clickoutside
31+
env:
32+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
33+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

‎README.md‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,12 @@ If you want to play around to see what's available before trying anything. Follo
8989

9090
### Svelte Actions
9191

92-
| Package | Short Description | Version | Changelog |
93-
| --- | --- | --- | --- |
94-
| [@svelte-put/movable][github.movable] | move node on mousedown | [![npm.movable.badge]][npm.movable] | [CHANGELOG][github.movable.changelog] |
95-
| [@svelte-put/intersect][github.intersect] | wrapper for IntersectionObserver | [![npm.intersect.badge]][npm.intersect] | [CHANGELOG][github.intersect.changelog] |
92+
| Package | Category | Short Description | Version | Changelog |
93+
| --- | --- | --- | --- | --- |
94+
| [@svelte-put/movable][github.movable] | action | move node on mousedown | [![npm.movable.badge]][npm.movable] | [CHANGELOG][github.movable.changelog] |
95+
| [@svelte-put/intersect][github.intersect] | action |wrapper for IntersectionObserver | [![npm.intersect.badge]][npm.intersect] | [CHANGELOG][github.intersect.changelog] |
96+
| [@svelte-put/clickoutside][github.clickoutside] | action | event for clicking outside node | [![npm.clickoutside.badge]][npm.clickoutside] | [CHANGELOG][github.clickoutside.changelog] |
97+
9698
## Contributing
9799

98100
[Read Contribution Guide][github.contributing]
@@ -127,6 +129,8 @@ If you want to play around to see what's available before trying anything. Follo
127129
[github.movable.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/actions/movable/CHANGELOG.md
128130
[github.intersect]: https://github.com/vnphanquang/svelte-put/tree/main/packages/actions/intersect
129131
[github.intersect.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/actions/intersect/CHANGELOG.md
132+
[github.clickoutside]: https://github.com/vnphanquang/svelte-put/tree/main/packages/actions/clickoutside
133+
[github.clickoutside.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/actions/clickoutside/CHANGELOG.md
130134

131135
<!-- heading badge -->
132136
[semantic-release]: https://github.com/semantic-release/semantic-release
@@ -139,5 +143,7 @@ If you want to play around to see what's available before trying anything. Follo
139143
[npm.movable]: https://www.npmjs.com/package/@svelte-put/movable
140144
[npm.intersect.badge]: https://img.shields.io/npm/v/@svelte-put/intersect
141145
[npm.intersect]: https://www.npmjs.com/package/@svelte-put/intersect
146+
[npm.clickoutside.badge]: https://img.shields.io/npm/v/@svelte-put/clickoutside
147+
[npm.clickoutside]: https://www.npmjs.com/package/@svelte-put/clickoutside
142148

143149
[pnpm]: https://pnpm.io/

‎apps/svelte-kit/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"author": "Quang Phan",
1313
"license": "MIT",
1414
"devDependencies": {
15+
"@svelte-put/clickoutside": "workspace:^",
1516
"@svelte-put/eslint-config": "workspace:^",
1617
"@svelte-put/intersect": "workspace:^",
1718
"@svelte-put/movable": "workspace:^",

‎apps/svelte-kit/src/app.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ declare namespace svelte.JSX {
2929
// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars
3030
interface HTMLAttributes<T> {
3131
// on:clickoutside
32-
onclickoutside?: (event: CustomEvent<HTMLElement>) => void;
32+
onclickoutside?: (event: CustomEvent<MouseEvent>) => void;
3333
// on:movablestart
3434
onmovablestart?: (
3535
event: CustomEvent<import('@svelte-put/movable').MovableEventDetails>,

‎apps/svelte-kit/src/routes/clickoutside.svelte‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script lang="ts">
2+
import { clickoutside } from '@svelte-put/clickoutside';
3+
import { fade } from 'svelte/transition';
4+
5+
let modal = false;
6+
let containerNode: HTMLElement;
7+
8+
function onClickOutside(_event: CustomEvent<MouseEvent>) {
9+
modal = false;
10+
}
11+
</script>
12+
13+
<title>clickoutside | @svelte-put</title>
14+
15+
<main class="grid flex-1 flex-col gap-y-10 p-4 grid-rows-[auto,1fr]">
16+
<h1 class="text-center text-4xl font-bold">@svelte-put/clickoutside</h1>
17+
<fieldset class="border-2 border-blue-500 relative grid place-items-center p-10 grid-rows-[auto,1fr]" bind:this={containerNode}>
18+
<legend>Boundary</legend>
19+
<p>click beyond this will not trigger clickoutside event</p>
20+
<button
21+
type="button"
22+
class="mt-10 bg-primary p-6 drop-shadow-lg hover:bg-orange-700"
23+
on:click={() => (modal = true)}
24+
>
25+
Click to open modal
26+
</button>
27+
{#if modal}
28+
<div
29+
transition:fade={{ duration: 250 }}
30+
class="absolute inset-center overflow-y-auto border-border border-2 bg-bg p-8 drop-shadow-lg max-h-[50vh]"
31+
use:clickoutside={{ limit: { parent: containerNode } }}
32+
on:clickoutside={onClickOutside}
33+
>
34+
<p class="text-xl">Modal content goes here</p>
35+
<p class="mt-10">
36+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quasi
37+
repellendus voluptatem consequatur sed quia blanditiis, iure nam, incidunt quibusdam
38+
velit quo soluta corrupti? Explicabo voluptas voluptate adipisci incidunt
39+
perspiciatis!
40+
</p>
41+
</div>
42+
{/if}
43+
</fieldset>
44+
</main>
45+
46+
<style>
47+
</style>

‎apps/svelte-kit/src/routes/index.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,8 @@
1313
<li>
1414
<a href="/intersect" class="hover:text-primary">@svelte-put/intersect</a>
1515
</li>
16+
<li>
17+
<a href="/clickoutside" class="hover:text-primary">@svelte-put/clickoutside</a>
18+
</li>
1619
</ul>
1720
</main>

‎apps/svelte-kit/src/routes/intersect.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
<title>intersect | @svelte-put</title>
3636

3737
<main class="grid flex-1 flex-col gap-y-10 p-4">
38-
<h1 class="t-10 text-center text-4xl font-bold">@svelte-put/intersect</h1>
39-
<div class="grid flex-1 gap-y-10 text-center">
38+
<h1 class="text-center text-4xl font-bold">@svelte-put/intersect</h1>
39+
<div class="grid gap-y-10 text-center">
4040
<section class="grid h-screen place-items-center bg-bg-accent p-8">
4141
<p>A static section</p>
4242
</section>

‎packages/actions/clickoutside/.eslintrc.cjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@svelte-put/eslint-config',
4+
overrides: [],
5+
};

‎packages/actions/clickoutside/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/lib

‎packages/actions/clickoutside/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Changelog

0 commit comments

Comments
 (0)
⚡