svelte-actions - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

CHANGELOG.md

@@ -10,4 +10,14 @@ # Changelog
 
-## 0.0.1
+## [v0.0.2](https://github.com/sw-yx/svelte-actions/compare/v0.0.1...v0.0.2)
 
-hello world
+### Commits
+
+- add onclickoutside [`1600d59`](https://github.com/sw-yx/svelte-actions/commit/1600d59327258fd011fcd1a7c50cd4b6f7be129f)
+- tweak readme [`3cf6822`](https://github.com/sw-yx/svelte-actions/commit/3cf6822f754492ef5da3d5a8ebda98b9bde8222e)
+
+## v0.0.1 - 2020-11-01
+
+### Commits
+
+- automate [`38dfe12`](https://github.com/sw-yx/svelte-actions/commit/38dfe12039ecc27e495e4eb1adb0e69de7cc98f0)
+- readme [`7ee67bb`](https://github.com/sw-yx/svelte-actions/commit/7ee67bbcd7f484cf2610cbff5406fd711bf00779)

dist/index.d.ts

@@ -6,2 +6,16 @@ declare type Action = (node: HTMLElement, parameters: any) => {
 /**
+ *
+ * Call callback when user clicks outside a given element
+ *
+ * Usage:
+ * <div use:clickOutside={{ enabled: open, cb: () => open = false }}>
+ *
+ * Demo: https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2
+ *
+ */
+export declare function clickOutside(node: HTMLElement, params: {
+    enabled: boolean;
+    cb: Function;
+}): ReturnType<Action>;
+/**
  * Creates `longpress` event when mousedown above `duration` milliseconds.
@@ -34,3 +48,3 @@ *
  */
-export declare function lazyLoad(node: HTMLElement, attributes: Object): ReturnType<Action>;
+export declare function lazyload(node: HTMLElement, attributes: Object): ReturnType<Action>;
 export {};

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.lazyLoad = exports.pannable = exports.longpress = void 0;
-// export function clickOutside(): ReturnType<Action> {
-// }
+exports.lazyload = exports.pannable = exports.longpress = exports.clickOutside = void 0;
 /**
+ *
+ * Call callback when user clicks outside a given element
+ *
+ * Usage:
+ * <div use:clickOutside={{ enabled: open, cb: () => open = false }}>
+ *
+ * Demo: https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2
+ *
+ */
+function clickOutside(node, params) {
+    var initialEnabled = params.enabled, cb = params.cb;
+    var handleOutsideClick = function (_a) {
+        var target = _a.target;
+        if (!node.contains(target))
+            cb(); // typescript hack, not sure how to solve without asserting as Node
+    };
+    function update(_a) {
+        var enabled = _a.enabled;
+        if (enabled) {
+            window.addEventListener('click', handleOutsideClick);
+        }
+        else {
+            window.removeEventListener('click', handleOutsideClick);
+        }
+    }
+    update({ enabled: initialEnabled });
+    return {
+        update: update,
+        destroy: function () {
+            window.removeEventListener('click', handleOutsideClick);
+        }
+    };
+}
+exports.clickOutside = clickOutside;
+/**
  * Creates `longpress` event when mousedown above `duration` milliseconds.
@@ -93,3 +126,3 @@ *
  */
-function lazyLoad(node, attributes) {
+function lazyload(node, attributes) {
     var intersecting = false;
@@ -113,2 +146,2 @@ var handleIntersection = function (entries) {
 }
-exports.lazyLoad = lazyLoad;
+exports.lazyload = lazyload;

package.json

 {
   "name": "svelte-actions",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "module": "dist/index.mjs",
@@ -9,4 +9,5 @@ "main": "dist/index.js",
     "build": "tsc",
+    "preversion": "npm run build",
     "version": "auto-changelog -p --template keepachangelog && git add CHANGELOG.md",
-    "xprepublishOnly": "git push && git push --tags && gh-release"
+    "prepublishOnly": "git push && git push --tags && gh-release"
   },
@@ -13,0 +14,0 @@ "keywords": [

README.md

@@ -13,4 +13,28 @@ # svelte-actions
 
-to be completed
+`export function clickOutside(node: HTMLElement, params: {enabled: boolean, cb: Function }): ReturnType<Action>`
 
+Call callback when user clicks outside a given element.
+
+Demo: https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2
+
+
+```svelte
+<script>
+  import {clickOutside} from 'svelte-actions'
+  let open = true;
+</script>
+
+
+<div use:clickOutside={{ enabled: open, cb: () => open = false }}>
+   <button on:click={() => open = true}>Open</button>
+   {#if open}
+    <span>
+      Opened
+    </span>
+  {/if}
+</div>
+```
+
+Discuss this action: https://github.com/sw-yx/svelte-actions/issues/4
+
 ### `longpress`
@@ -26,8 +50,13 @@
 <script>
-  import {lazyLoad} from 'svelte-actions'
+  import {longpress} from 'svelte-actions'
 </script>
 
-<img use:lazyLoad={{src:"/myimage"}} alt="">
+<button use:longpress={duration}
+    on:longpress="{() => pressed = true}"
+    on:mouseenter="{() => pressed = false}"
+  >press and hold</button>
 ```
 
+Discuss this action: https://github.com/sw-yx/svelte-actions/issues/3
+
 ### `pannable`
@@ -39,3 +68,3 @@
 
-### `lazyLoad`
+### `lazyload`
 
@@ -50,3 +79,3 @@ `export function lazyLoad(node: HTMLElement, attributes: Object): ReturnType<Action>`
 <script>
-  import {lazyLoad} from 'svelte-actions'
+  import {lazyload} from 'svelte-actions'
 </script>
@@ -57,7 +86,10 @@
 
+Discuss this action: https://github.com/sw-yx/svelte-actions/issues/2
 
-## Actions for Consideration
 
+## Future actions considering adding
+
 - `closeOnEscape`/`closeOnScroll`/`closeOnFocusOutside`: https://github.com/sveltejs/rfcs/pull/24#issuecomment-645094235
 - `selectTextOnFocus`/`clearTextOnEscape`/`blurOnEscape`/`blurOnEnter`:  
-- `viewport`: creates `enterViewport`/`leaveViewport` events https://github.com/sveltejs/rfcs/pull/24#issuecomment-645392769
+- `viewport`: creates `enterViewport`/`leaveViewport` events https://github.com/sveltejs/rfcs/pull/24#issuecomment-645392769
+- [Propose a new action here!](https://github.com/sw-yx/svelte-actions/issues/new)

src/index.ts

@@ -6,8 +6,37 @@ type Action = (node: HTMLElement, parameters: any) => {
 
+/**
+ * 
+ * Call callback when user clicks outside a given element
+ * 
+ * Usage:
+ * <div use:clickOutside={{ enabled: open, cb: () => open = false }}>
+ * 
+ * Demo: https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2
+ * 
+ */
+export function clickOutside(node: HTMLElement, params: {enabled: boolean, cb: Function }): ReturnType<Action> {
+  const { enabled: initialEnabled, cb } = params
 
-// export function clickOutside(): ReturnType<Action> {
+    const handleOutsideClick = ({ target }: MouseEvent) => {
+      if (!node.contains(target as Node)) cb(); // typescript hack, not sure how to solve without asserting as Node
+    };
 
-// }
+    function update({enabled}: {enabled: boolean}) {
+      if (enabled) {
+        window.addEventListener('click', handleOutsideClick);
+      } else {
+        window.removeEventListener('click', handleOutsideClick);
+      }
+    }
+    update({ enabled: initialEnabled });
+    return {
+      update,
+      destroy() {
+        window.removeEventListener( 'click', handleOutsideClick );
+      }
+    };
 
+}
 
+
 /**
@@ -117,3 +146,3 @@ * Creates `longpress` event when mousedown above `duration` milliseconds.
  */
-export function lazyLoad(node: HTMLElement, attributes: Object): ReturnType<Action> { 
+export function lazyload(node: HTMLElement, attributes: Object): ReturnType<Action> { 
 	let intersecting = false;
@@ -120,0 +149,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15124

increased by33.82%

Lines of code

332

increased by29.18%

Number of lines in readme file

90

increased by55.17%

No dependency changes