refactor: expose drag action instead of event handler

src/lib/plugins/addResizedColumns.ts

@@ -18,7 +18,7 @@ export type ResizedColumnsColumnOptions = {
 export type ResizedColumnsPropSet = NewTablePropSet<{
 	'thead.tr.th': {
 		(node: Element): void;
-		drag: (event: Event) => void;
+		drag: (node: Element) => void;
 		disabled: boolean;
 	};
 }>;
@@ -194,7 +194,16 @@ export const addResizedColumns =
 							},
 						};
 					};
-					action.drag = dragStart;
+					action.drag = (node: Element) => {
+						node.addEventListener('mousedown', dragStart);
+						node.addEventListener('touchstart', dragStart);
+						return {
+							destroy() {
+								node.removeEventListener('mousedown', dragStart);
+								node.removeEventListener('touchstart', dragStart);
+							},
+						};
+					};
 					action.disabled = isCellDisabled(cell, disabledResizeIds);
 					const props = derived([], () => {
 						return action;

src/routes/index.svelte

@@ -285,12 +285,7 @@
 									<Render of={props.filter.render} />
 								{/if}
 								{#if !props.resize.disabled}
-									<div
-										class="resizer"
-										on:click|stopPropagation
-										on:mousedown={props.resize.drag}
-										on:touchstart={props.resize.drag}
-									/>
+									<div class="resizer" on:click|stopPropagation use:props.resize.drag />
 								{/if}
 							</th>
 						</Subscribe>