svelte-keydown - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

CHANGELOG.md

@@ -8,2 +8,8 @@ # Changelog
 
+## [0.5.0](https://github.com/metonym/svelte-keydown/releases/tag/v0.5.0) - 2022-01-22
+
+**Features**
+
+- forward `keydown`, `keyup` events to `svelte:body`
+
 ## [0.4.1](https://github.com/metonym/svelte-keydown/releases/tag/v0.4.1) - 2022-01-21
@@ -10,0 +16,0 @@

lib/index.js

@@ -65,2 +65,12 @@ (function (global, factory) {
     }
+    // TODO figure out if we still want to support
+    // shorthand events, or if we want to implement
+    // a real bubbling mechanism
+    function bubble(component, event) {
+        const callbacks = component.$$.callbacks[event.type];
+        if (callbacks) {
+            // @ts-ignore
+            callbacks.slice().forEach(fn => fn.call(this, event));
+        }
+    }
 
@@ -293,3 +303,5 @@ const dirty_components = [];
     					listen(document.body, "keyup", /*keyup_handler*/ ctx[7]),
-    					listen(document.body, "keydown", /*keydown_handler*/ ctx[8])
+    					listen(document.body, "keyup", /*keyup_handler_1*/ ctx[9]),
+    					listen(document.body, "keydown", /*keydown_handler*/ ctx[8]),
+    					listen(document.body, "keydown", /*keydown_handler_1*/ ctx[10])
     				];
@@ -319,3 +331,11 @@
 
-    	const keyup_handler = ({ key }) => {
+    	function keyup_handler(event) {
+    		bubble.call(this, $$self, event);
+    	}
+
+    	function keydown_handler(event) {
+    		bubble.call(this, $$self, event);
+    	}
+
+    	const keyup_handler_1 = ({ key }) => {
     		$$invalidate(4, down = down.filter(_key => _key !== key));
@@ -326,3 +346,3 @@ if (down.length > 0) return;
 
-    	const keydown_handler = ({ key, target }) => {
+    	const keydown_handler_1 = ({ key, target }) => {
     		if (pauseOnInput && target.tagName !== "BODY") {
@@ -374,3 +394,5 @@ return;
     		keyup_handler,
-    		keydown_handler
+    		keydown_handler,
+    		keyup_handler_1,
+    		keydown_handler_1
     	];
@@ -377,0 +399,0 @@ }

package.json

 {
   "name": "svelte-keydown",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "Utility to listen for keyboard events",

README.md

@@ -11,2 +11,4 @@ # svelte-keydown
 
+[Try it in the Svelte REPL](https://svelte.dev/repl/f22827a1e3c94a018a685fec6346db6c).
+
 **Use Cases**
@@ -84,2 +86,21 @@
 
+### Preventing the default behavior
+
+This component forward the `on:keyup` and `on:keydown` events.
+
+You can use `on:keydown` to prevent the default behavior for certain keys.
+
+In the following example, pressing "Space" should not cause the browser page to scroll.
+
+```svelte
+<Keydown
+  on:keydown={(e) => {
+    if (e.key === " ") e.preventDefault();
+  }}
+  on:Space={(e) => {
+    console.log("key", "Space");
+  }}
+/>
+```
+
 ## Examples
@@ -130,2 +151,7 @@
 
+### Forwarded events
+
+- `on:keyup`
+- `on:keydown`
+
 ### Dispatched events
@@ -132,0 +158,0 @@

types/Keydown.svelte.d.ts

@@ -23,2 +23,6 @@ /// <reference types="svelte" />
     key: CustomEvent<string>;
+    // @ts-expect-error
+    keyup: WindowEventMap["keyup"];
+    // @ts-expect-error
+    keydown: WindowEventMap["keydown"];
     [key: string]: CustomEvent<any>;
@@ -25,0 +29,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

35645

increased by6.57%

Lines of code

790

increased by5.9%

Number of lines in readme file

226

increased by13%

No dependency changes