chore(clickoutside): change event listener typing

vnphanquang · May 17, 2024 · b8429c5 · b8429c5
1 parent 42a0b64
commit b8429c5
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/.changeset/beige-hornets-think.md b/.changeset/beige-hornets-think.md
@@ -0,0 +1,5 @@
+---
+"@svelte-put/clickoutside": major
+---
+
+`onclickoutside` is now `onclickoutside` (see Svelte 5 docs)
diff --git a/packages/clickoutside/README.md b/packages/clickoutside/README.md
@@ -29,7 +29,7 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 	}
 </script>
 
-<div use:clickoutside on:clickoutside="{doSomething}" />
+<div use:clickoutside onclickoutside="{doSomething}" />
 ```
 
 ## [Changelog][github.changelog]

diff --git a/packages/clickoutside/src/clickoutside.js b/packages/clickoutside/src/clickoutside.js
@@ -28,7 +28,7 @@
  *    <aside
  *      class="absolute top-0 left-0 right-0 bottom-0"
  *      use:clickoutside={{ limit: { parent: containerNode }}}
- *      on:clickoutside={onClickOutside}
+ *      onclickoutside={onClickOutside}
  *    >
  *      ...some modal content...
  *    </aside>

diff --git a/packages/clickoutside/src/public.d.ts b/packages/clickoutside/src/public.d.ts
@@ -12,15 +12,15 @@ import { ActionReturn, Action } from 'svelte/action';
  *   import { clickoutside } from '@svelte-put/clickoutside';
  * </script>
  *
- * <!-- on:clickoutside should be typed -->
+ * <!-- onclickoutside should be typed -->
  * <div
  *   use:clickoutside
- *   on:clickoutside
+ *   onclickoutside
  * />
  * ```
  */
 export interface ClickOutsideAttributes {
-	'on:clickoutside'?: (event: CustomEvent<MouseEvent>) => void;
+	'onclickoutside'?: (event: CustomEvent<MouseEvent>) => void;
 }
 
 /**