svelte-gestures - npm Package Compare versions

Comparing version 1.5.2 to 4.0.0

dist/index.esm.js

@@ -8,2 +8,6 @@ const DEFAULT_DELAY = 300; // ms
 
+function ensureArray(o) {
+  if (Array.isArray(o)) return o;
+  return [o];
+}
 function addEventListener(node, event, handler) {
@@ -43,3 +47,3 @@ node.addEventListener(event, handler);
 function setPointerControls(gestureName, node, onMoveCallback, onDownCallback, onUpCallback, touchAction = DEFAULT_TOUCH_ACTION) {
-  node.style.touchAction = touchAction;
+  node.style.touchAction = ensureArray(touchAction).join(' ');
   let activeEvents = [];
@@ -46,0 +50,0 @@ function handlePointerdown(event) {

dist/index.js

@@ -10,2 +10,6 @@ 'use strict';
 
+function ensureArray(o) {
+  if (Array.isArray(o)) return o;
+  return [o];
+}
 function addEventListener(node, event, handler) {
@@ -45,3 +49,3 @@ node.addEventListener(event, handler);
 function setPointerControls(gestureName, node, onMoveCallback, onDownCallback, onUpCallback, touchAction = DEFAULT_TOUCH_ACTION) {
-  node.style.touchAction = touchAction;
+  node.style.touchAction = ensureArray(touchAction).join(' ');
   let activeEvents = [];
@@ -48,0 +52,0 @@ function handlePointerdown(event) {

dist/types/shared.d.ts

@@ -10,3 +10,3 @@ export declare const DEFAULT_DELAY = 300;
 export type BaseParams = Composed & {
-    touchAction: TouchAction;
+    touchAction: TouchAction | TouchAction[];
 };
@@ -31,3 +31,3 @@ type PartialParameters<GestureParams> = Partial<GestureParams>;
 };
-export declare function setPointerControls(gestureName: string, node: HTMLElement, onMoveCallback: PointerEventCallback<boolean>, onDownCallback: PointerEventCallback<void>, onUpCallback: PointerEventCallback<void>, touchAction?: TouchAction): {
+export declare function setPointerControls(gestureName: string, node: HTMLElement, onMoveCallback: PointerEventCallback<boolean>, onDownCallback: PointerEventCallback<void>, onUpCallback: PointerEventCallback<void>, touchAction?: TouchAction | TouchAction[]): {
     destroy: () => void;
@@ -34,0 +34,0 @@ };

global.d.ts

@@ -1,40 +0,40 @@
-declare namespace svelte.JSX {
+declare namespace svelteHTML {
   interface HTMLAttributes<T> {
-    onpan?: (
+    'on:pan'?: (
       event: CustomEvent<{ x: number; y: number; target: EventTarget & T }>
     ) => void;
-    onpanup?: (
+    'on:panup'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onpandown?: (
+    'on:pandown'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onpanmove?: (
+    'on:panmove'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onpinch?: (
+    'on:pinch'?: (
       event: CustomEvent<{ scale: number; center: { x: number; y: number } }>
     ) => void;
-    onpinchup?: (
+    'on:pinchup'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onpinchdown?: (
+    'on:pinchdown'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onpinchmove?: (
+    'on:pinchmove'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onrotate?: (
+    'on:rotate'?: (
       event: CustomEvent<{ rotation: number; center: { x: number; y: number } }>
     ) => void;
-    onrotateup?: (
+    'on:rotateup'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onrotatedown?: (
+    'on:rotatedown'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onrotatemove?: (
+    'on:rotatemove'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onswipe?: (
+    'on:swipe'?: (
       event: CustomEvent<{
@@ -45,33 +45,33 @@ direction: 'top' | 'right' | 'bottom' | 'left';
     ) => void;
-    onswipeup?: (
+    'on:swipeup'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onswipedown?: (
+    'on:swipedown'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onswipemove?: (
+    'on:swipemove'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    ontap?: (
+    'on:tap'?: (
       event: CustomEvent<{ x: number; y: number; target: EventTarget }>
     ) => void;
-    ontapup?: (
+    'on:tapup'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    ontapdown?: (
+    'on:tapdown'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    ontapmove?: (
+    'on:tapmove'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onpress?: (
+    'on:press'?: (
       event: CustomEvent<{ x: number; y: number; target: EventTarget }>
     ) => void;
-    onpressup?: (
+    'on:pressup'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onpressdown?: (
+    'on:pressdown'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
     ) => void;
-    onpressmove?: (
+    'on:pressmove'?: (
       event: CustomEvent<{ event: PointerEvent; pointersCount: number }>
@@ -78,0 +78,0 @@ ) => void;

package.json

@@ -6,3 +6,3 @@ {
   "license": "MIT",
-  "version": "1.5.2",
+  "version": "4.0.0",
   "main": "dist/index.js",
@@ -9,0 +9,0 @@ "module": "dist/index.esm.js",

README.md

@@ -15,2 +15,4 @@ # svelte-gestures
 
+Svelte 4 projects should use svelte-gestures version 4, while older Svelte projects should use version 1.5.2 and lower.
+
 ### Language tools types installation (optional)
@@ -59,3 +61,3 @@
 - `delay` (default value is 300ms)
-- `touchAction` (defaults value is `none`) Apply css _touch-action_ style, letting the browser know which type of gesture is controlled by the browser and your program respectively.
+- `touchAction` (defaults value is `none`) Apply css _touch-action_ style, to leave handling of some touch actions to the browser; see [`touch-action` on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action). You can pass an array, the values will be joined with spaces.
 - `composed` is only applicable when used inside `composedGesture`.
@@ -62,0 +64,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

91530

increased by0.61%

Lines of code

1887

increased by0.43%

Number of lines in readme file

540

increased by0.37%

No dependency changes