Add item delete

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@selenite/commons",
-	"version": "0.30.4",
+	"version": "0.30.5",
 	"repository": "github:ShaitanLyss/selenite-commons",
 	"license": "MIT",
 	"keywords": [

src/lib/components/Browser.svelte

@@ -31,6 +31,8 @@
 		itemProps?: HTMLAttributes<HTMLElement>;
 		itemDblClick?: (item: T) => void;
 		itemDragStart?: (item: T) => void;
+		itemAfterUpdate?: (item: T) => void;
+		itemDelete?: (item: T) => void;
 		query?: string;
 		queriedKeys?: Iterable<StringKeys<T> | StringArrayKeys<T>>;
 		searchBar?: boolean;
@@ -59,6 +61,8 @@
 		itemProps = {},
 		itemDblClick,
 		itemDragStart,
+		itemAfterUpdate,
+		itemDelete,
 		header = 'Browser',
 		filters = $bindable([]),
 		filterDefs = [],
@@ -165,6 +169,7 @@
 				if (!r || typeof r !== 'string') return;
 				const newPath = [...item.path ?? [], r];
 				item.path = newPath;
+				itemAfterUpdate?.(item as T);
 			}
 		});
 	}
@@ -211,6 +216,7 @@
 									const item = getDraggedItem(e);
 									if (!item) return;
 									(item[pathKey] as string[]) = current.slice(0, i + 1);
+									itemAfterUpdate?.(item);
 								}}
 								type="button"
 								class="link-hover cursor-pointer p-1 px-2"
@@ -247,6 +253,7 @@
 				const item = getDraggedItem(e);
 				if (!item) return;
 				(item[pathKey] as string[]) = current.slice(0, -1);
+				itemAfterUpdate?.(item);
 			}}
 			 folder={'..'} {solid} onclick={goBack} />
 		{/if}
@@ -257,6 +264,7 @@
 					const item = getDraggedItem(e);
 					if (!item) return;
 					(item[pathKey] as string[]) = [...current, folder];
+					itemAfterUpdate?.(item);
 				}}
 				{query} {folder} {solid} onclick={() => current.push(folder)}
 
@@ -284,7 +292,7 @@
 				{#each pathsData.get(currentStr)?.items ?? [] as item (item)}
 					<li animate:flip={{ duration: flipDuration }}>
 						{#if !Item}
-							<DefaultItem {item} {filters} {query} {itemToId} {...itemProps} {itemDragStart} {itemDblClick} />
+							<DefaultItem {item} {filters} {query} {itemToId} {...itemProps} {itemDragStart} {itemDblClick} {itemDelete} />
 						{:else}
 							{@render Item(item)}
 						{/if}

src/lib/components/browser/DefaultItem.svelte

@@ -4,36 +4,51 @@
 	import { getActiveFilters, type Filter } from '$lib/utils/filter';
 	import { horizontalScroll, scrollIntoView } from '$lib/actions';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../Button.svelte';
+	import { faTimes } from '@fortawesome/free-solid-svg-icons';
+	import Fa from 'svelte-fa';
 
 	interface Props extends HTMLAttributes<HTMLElement> {
 		item?: unknown;
 		query?: string;
 		filters?: Iterable<Filter<T>>;
-        itemToId?: Map<T, string>;
+		itemToId?: Map<T, string>;
 		itemDblClick?: (item: T) => void;
 		itemDragStart?: (item: T) => void;
+		itemDelete?: (item: T) => void;
 	}
 
-	let { item = {}, query = '', filters, itemToId, itemDblClick, itemDragStart, ...props }: Props = $props();
+	let {
+		item = {},
+		query = '',
+		filters,
+		itemToId,
+		itemDblClick,
+		itemDragStart,
+		itemDelete,
+		...props
+	}: Props = $props();
 	interface DefaultItem {
 		label?: string;
 		name?: string;
 		title?: string;
 		tags?: string[];
-        descr?: string;
-        description?: string;
+		descr?: string;
+		description?: string;
 	}
 	const o: DefaultItem = $derived(typeof item === 'object' && item ? item : {});
-	const label = $derived(o.title ?? o.name ?? o.label ?? (typeof item === 'string' ? item : 'Item'));
+	const label = $derived(
+		o.title ?? o.name ?? o.label ?? (typeof item === 'string' ? item : 'Item')
+	);
 
 	const activeFilters = $derived(getActiveFilters(filters));
 	const activeTags = $derived(activeFilters.get('tags' as keyof T) ?? new Set());
 
-    function ondragstart(e: DragEvent) {
-        const preppedItem = $state.snapshot(o);
-        (preppedItem as {__draggedId__?: string}).__draggedId__ = itemToId?.get(o as T);
-        e.dataTransfer?.setData('text/plain', JSON.stringify(preppedItem, null, 2));
-    }
+	function ondragstart(e: DragEvent) {
+		const preppedItem = $state.snapshot(o);
+		(preppedItem as { __draggedId__?: string }).__draggedId__ = itemToId?.get(o as T);
+		e.dataTransfer?.setData('text/plain', JSON.stringify(preppedItem, null, 2));
+	}
 </script>
 
 <article
@@ -44,16 +59,24 @@
 		props.ondblclick?.(e);
 		itemDblClick?.(o as T);
 	}}
-    ondragstart={(e) => {
+	ondragstart={(e) => {
+		ondragstart(e);
 		props.ondragstart?.(e);
 		itemDragStart?.(o as T);
-		ondragstart(e);
 	}}
-	class="transition-all flex flex-col items-center cursor-pointer bg-base-300 rounded-box p-4 border border-base-content border-opacity-15 overflow-clip {props.class}"
+	class="group relative transition-all flex flex-col items-center cursor-pointer bg-base-300 rounded-box p-4 border border-base-content border-opacity-15 overflow-clip {props.class}"
 	in:fade
-	out:fade={{ duration: 50 }}
-
-	>
+	out:fade={{ duration: 50 }}>
+	{#if itemDelete}
+	<Button 
+	 	class="absolute opacity-0 group-hover:opacity-100 top-2 right-2 btn-xs btn-circle btn-ghost"
+		onclick={() => {
+			itemDelete?.(o as T);
+		}}
+		>
+		<Fa icon={faTimes} />
+	</Button>
+	{/if}
 	<div class="text-nowrap truncate h-24 w-32 flex flex-col">
 		<span class="text-nowrap font-semibold mx-auto"
 			><MatchHighlighter content={label} ref={query} /></span>
@@ -63,7 +86,9 @@
 			use:horizontalScroll
 			style="scrollbar-width: thin;">
 			{#each o.tags ?? [] as tag (tag)}
-				<li use:scrollIntoView={activeTags.has(tag)}  class="badge {activeTags.has(tag) ? 'badge-accent' : 'badge-neutral'}">
+				<li
+					use:scrollIntoView={activeTags.has(tag)}
+					class="badge {activeTags.has(tag) ? 'badge-accent' : 'badge-neutral'}">
 					<MatchHighlighter content={tag} ref={query} />
 				</li>
 			{/each}