Format and auto lint fix

.github/workflows/npm-publish.yml

@@ -27,7 +27,7 @@ jobs:
         with:
           node-version: '20'
       - name: Setup pnpm
-        uses: pnpm/[email protected]      
+        uses: pnpm/[email protected]
       - run: pnpm install --frozen-lockfile
       - run: pnpm test
       - run: pnpm package

README.md

@@ -67,8 +67,9 @@ bun wasm-pack publish --access public
 ```
 
 ## TODO
+
 - Document everything
 - Create action to use text content as title | and which adds truncate by default (with css)
 - Try removing newline at end of xml format
 - Add Portal Component
-- Make custom tailwind plugin regrouping all the tailwind plugins used and the configuration
+- Make custom tailwind plugin regrouping all the tailwind plugins used and the configuration

package.json

@@ -105,4 +105,4 @@
 		"svelte-portal": "^2.2.1",
 		"uuid": "11.0.3"
 	}
-}
+}

src/lib/actions/box-selection.ts

@@ -15,7 +15,7 @@ export interface BoxSelectionParams {
 
 	/** Treshold for elements to be considered inside the box selection. Defaults to 0.9. */
 	threshold?: number;
-};
+}
 
 /**
  * Action to enable box selection on an element.
@@ -27,11 +27,11 @@ export const boxSelection: Action<HTMLElement, BoxSelectionParams | undefined> =
 	node,
 	params: BoxSelectionParams = {}
 ) => {
-	function pOver(e: PointerEvent) {
+	function pOver() {
 		node.style.cursor = 'crosshair';
 	}
 
-	function pLeave(e: PointerEvent) {
+	function pLeave() {
 		node.style.cursor = '';
 	}
 
@@ -53,7 +53,7 @@ export const boxSelection: Action<HTMLElement, BoxSelectionParams | undefined> =
 		}
 		createBox(posFromClient(e));
 
-		document.addEventListener('pointermove', pMove, {passive: true});
+		document.addEventListener('pointermove', pMove, { passive: true });
 		document.addEventListener('pointerup', pUp, { once: true, capture: true });
 	}
 	function pUp(e: PointerEvent) {

src/lib/actions/click.ts

@@ -44,7 +44,7 @@ export function clickIfNoDrag<E extends HTMLElement>(
 	function onpointerdown(e: PointerEvent) {
 		pointerdownPos = posFromClient(e);
 		node.addEventListener('pointerup', onpointerup);
-		node.addEventListener('pointermove', onpointermove, {passive: true});
+		node.addEventListener('pointermove', onpointermove, { passive: true });
 	}
 
 	node.addEventListener('pointerdown', onpointerdown);
@@ -91,7 +91,7 @@ export function clickIfDrag<E extends HTMLElement>(
 		drag = false;
 		pointerdownPos = posFromClient(e);
 		node.addEventListener('pointerup', onpointerup);
-		node.addEventListener('pointermove', onpointermove, {passive: true});
+		node.addEventListener('pointermove', onpointermove, { passive: true });
 	}
 
 	node.addEventListener('pointerdown', onpointerdown);

src/lib/actions/document.ts

@@ -13,8 +13,8 @@ export type DocumentParams = {
 export const documentListener: Action<Element, DocumentParams> = (node, params: DocumentParams) => {
 	function setup() {
 		Object.keys(params).forEach((key) => {
-            const p = params as Record<string, EventListener | boolean>;
-            if (typeof p[key] !== "function") return;
+			const p = params as Record<string, EventListener | boolean>;
+			if (typeof p[key] !== 'function') return;
 			document.addEventListener(key, p[key], params);
 		});
 	}
@@ -23,8 +23,8 @@ export const documentListener: Action<Element, DocumentParams> = (node, params:
 	return {
 		destroy() {
 			Object.keys(params).forEach((key) => {
-                const p = params as Record<string, EventListener | boolean>;
-                if (typeof p[key] !== 'function') return;
+				const p = params as Record<string, EventListener | boolean>;
+				if (typeof p[key] !== 'function') return;
 				document.removeEventListener(key, p[key], params);
 			});
 		},

src/lib/actions/drag.ts

@@ -79,7 +79,7 @@ export const draggableItem: Action<HTMLElement, DragItemOptions> = (node, params
 			drag: true
 		},
 		// Apply transform to clone
-		transform({ offsetX, offsetY, rootNode }) {
+		transform({ offsetX, offsetY }) {
 			if (!clone) return;
 			clone.style.left = `${base.x + offsetX - baseOffset.x}px`;
 			clone.style.top = `${base.y + offsetY - baseOffset.y}px`;

src/lib/actions/focus.ts

@@ -1,12 +1,12 @@
-import type { Action } from "svelte/action";
+import type { Action } from 'svelte/action';
 
 export const autofocus: Action<HTMLElement, boolean | undefined> = (node, active = true) => {
-    if (!active) return;
-    setTimeout(() => node.focus());
+	if (!active) return;
+	setTimeout(() => node.focus());
 
-    return {
-        update(a) {
-            if (a) node.focus();
-        },
-    }
-}
+	return {
+		update(a) {
+			if (a) node.focus();
+		}
+	};
+};

src/lib/actions/index.ts

@@ -16,12 +16,12 @@ export * from './click';
 export * as Keyboard from './keyboard';
 export * from './keyboard';
 export * from './resizable';
-export * from './box-selection'
+export * from './box-selection';
 export * from '@neodrag/svelte';
 export * from './document';
 export * from './focus';
 let handleFocusLeaveRefCount = 0;
-let handleFocusLeaveCallbacks: ((isKeyboard: boolean) => void)[] = [];
+const handleFocusLeaveCallbacks: ((isKeyboard: boolean) => void)[] = [];
 function handleKeydown(e: KeyboardEvent) {
 	if (e.key === 'Escape') {
 		if (handleFocusLeaveCallbacks.length === 0) return;
@@ -45,7 +45,7 @@ export const handleFocusLeave: Action<HTMLElement, (isKeyboard: boolean) => void
 		requestAnimationFrame(() => {
 			if (!node.contains(document.activeElement)) {
 				const closestPopup = document.activeElement?.closest('.popup');
-				let isDescendantOfPopup = closestPopup !== null && closestPopup !== undefined;
+				const isDescendantOfPopup = closestPopup !== null && closestPopup !== undefined;
 				if (isDescendantOfPopup) return;
 				callback(false);
 				handleFocusLeaveCallbacks.pop();

src/lib/actions/inputs.ts

@@ -27,17 +27,16 @@ export const autosize: Action<HTMLTextAreaElement, unknown | undefined> = (
 		enabled = enabled_;
 	}
 	tick().then(() => {
-
 		updateBaseAutosize();
-	})
+	});
 
 	return {
 		destroy() {
 			baseAutosize.destroy(textarea);
 		},
 		update(params_) {
 			params = params_;
-			console.log("update autosize");
+			console.log('update autosize');
 			updateBaseAutosize();
 		}
 	};

src/lib/actions/keyboard.ts

@@ -45,7 +45,9 @@ export const keyboardNavigation: Action<HTMLElement> = (node) => {
 
 type KeysHandler<E extends Element> = (e: KeyboardEvent & { target: E }) => void;
 type SupportedKeys = 'escape' | 'enter' | 'up' | 'left' | 'down' | 'right' | 'backspace';
-type KeysParams<E extends Element> = { [key in SupportedKeys]?: KeysHandler<E> } & {preventDefault?: boolean};
+type KeysParams<E extends Element> = { [key in SupportedKeys]?: KeysHandler<E> } & {
+	preventDefault?: boolean;
+};
 export function keys<E extends HTMLElement>(
 	node: E,
 	params: KeysParams<E>
@@ -54,15 +56,15 @@ export function keys<E extends HTMLElement>(
 		const e = e_ as KeyboardEvent & { target: E };
 
 		const keyToHandler: Record<string, KeysHandler<E> | undefined> = {
-			'ArrowUp': params.up,
-			'ArrowLeft': params.left,
-			'ArrowDown': params.down,
-			'ArrowRight': params.right,
-			'Enter': params.enter,
-			'Escape': params.escape,
-			'Backspace': params.backspace
-		}
-		
+			ArrowUp: params.up,
+			ArrowLeft: params.left,
+			ArrowDown: params.down,
+			ArrowRight: params.right,
+			Enter: params.enter,
+			Escape: params.escape,
+			Backspace: params.backspace
+		};
+
 		const handler = keyToHandler[e.key];
 
 		if (handler) {

src/lib/actions/resizable.ts

@@ -15,7 +15,7 @@ const enteredNodes = new Set<HTMLElement>();
 let active: HTMLElement | undefined;
 function globalOnpointermove(e: PointerEvent) {
 	const pos = posFromClient(e);
-	
+
 	for (const [node, { onpointerenter, onpointerleave, threshold: m }] of resizeHandleMap) {
 		const rect = node.getBoundingClientRect();
 		if (
@@ -71,7 +71,7 @@ export function resizable<N extends HTMLElement = HTMLElement>(
 	params: ResizeHandleParams<N> = {}
 ): ActionReturn<ResizeHandleParams<N>> {
 	function onpointerenter(e: PointerEvent) {
-		document.addEventListener('pointermove', onpointermove, {passive: true});
+		document.addEventListener('pointermove', onpointermove, { passive: true });
 		removePointermoveCleanup?.();
 	}
 	let removePointermoveCleanup: (() => void) | undefined;
@@ -131,7 +131,7 @@ export function resizable<N extends HTMLElement = HTMLElement>(
 			lastPos = pos;
 			document.body.style.userSelect = 'none';
 			document.body.style.pointerEvents = 'none';
-			
+
 			let width = rect.width;
 			let height = rect.height;
 			if (currentSide.includes('e')) {
@@ -159,7 +159,7 @@ export function resizable<N extends HTMLElement = HTMLElement>(
 				params.sides?.left === undefined &&
 				params.sides?.bottom === undefined &&
 				params.sides?.right === undefined);
-		
+
 		const top = params.sides?.top ?? all;
 		const left = params.sides?.left ?? all;
 		const bottom = params.sides?.bottom ?? all;
@@ -176,8 +176,8 @@ export function resizable<N extends HTMLElement = HTMLElement>(
 		const m = threshold;
 
 		const previousSide = currentSide;
-				
-		let verticalLetter: 's' | 'n' | '' =  '';
+
+		let verticalLetter: 's' | 'n' | '' = '';
 		let horizontalLetter: 'e' | 'w' | '' = '';
 		if (left && dx < m) {
 			horizontalLetter = 'w';
@@ -190,14 +190,14 @@ export function resizable<N extends HTMLElement = HTMLElement>(
 			verticalLetter = 's';
 		}
 		const candidate = verticalLetter + horizontalLetter;
-		currentSide = candidate.length > 0 ? candidate as ResizeSide : null;
+		currentSide = candidate.length > 0 ? (candidate as ResizeSide) : null;
 		if (currentSide !== previousSide) {
 			document.documentElement.style.cursor = currentSide !== null ? `${currentSide}-resize` : '';
 		}
 	}
 
 	if (resizeHandleMap.size === 0) {
-		document.addEventListener('pointermove', globalOnpointermove, {passive: true});
+		document.addEventListener('pointermove', globalOnpointermove, { passive: true });
 	}
 	resizeHandleMap.set(node, {
 		onpointerenter,

src/lib/actions/scroll.ts

@@ -24,7 +24,7 @@ export const horizontalScroll: Action<HTMLElement, { duration?: number } | undef
 	{ duration = 150 } = {}
 ) => {
 	let isActionScroll = false;
-	let scroll = tweened(node.scrollLeft, {
+	const scroll = tweened(node.scrollLeft, {
 		duration,
 		interpolate: (a, b) => (t) => a + (b - a) * t
 	});
@@ -81,12 +81,14 @@ export const horizontalScroll: Action<HTMLElement, { duration?: number } | undef
 /**
  * Scrolls into view an element.
  */
-export const scrollIntoView: Action<HTMLElement, boolean | undefined> = (node, enabled: boolean | undefined) => {
-
+export const scrollIntoView: Action<HTMLElement, boolean | undefined> = (
+	node,
+	enabled: boolean | undefined
+) => {
 	function update(enabled_ = true) {
 		const parent = node.parentElement;
 		if (!parent) return;
-	
+
 		if (!enabled_) return;
 
 		const parentRect = parent.getBoundingClientRect();
@@ -96,12 +98,11 @@ export const scrollIntoView: Action<HTMLElement, boolean | undefined> = (node, e
 			top: nodeRect.top - parentRect.top,
 			behavior: 'smooth'
 		});
-
 	}
 
 	update(enabled);
 
 	return {
-		update,
-	}
+		update
+	};
 };

src/lib/actions/shortcut.ts

@@ -176,16 +176,16 @@ export function shortcut<E extends Element>(
 ): ActionReturn<ShortcutSettings<E>> {
 	let listener = makeShortcutListener(node, params);
 
-	document.addEventListener('keydown', listener, {capture: true});
+	document.addEventListener('keydown', listener, { capture: true });
 
 	return {
 		destroy() {
-			document.removeEventListener('keydown', listener, {capture: true});
+			document.removeEventListener('keydown', listener, { capture: true });
 		},
 		update(params) {
-			document.removeEventListener('keydown', listener, {capture: true});
+			document.removeEventListener('keydown', listener, { capture: true });
 			listener = makeShortcutListener(node, params);
-			document.addEventListener('keydown', listener, {capture: true});
+			document.addEventListener('keydown', listener, { capture: true });
 		}
 	};
 }