ui-svelte 0.2.12 → 0.2.14

package/dist/form/DragDrop.svelte

@@ -15,6 +15,7 @@
 <script lang="ts">
 	import { cn } from '../utils/class-names.js';
 	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
 
 	type Props = {
 		groups?: DragDropGroup[];
@@ -33,6 +34,7 @@
 		itemSnippet?: Snippet<[DragDropItem, number]>;
 		groupHeaderSnippet?: Snippet<[DragDropGroup, number]>;
 		emptySnippet?: Snippet<[DragDropGroup?]>;
+		emptyText?: string;
 	};
 
 	let {
@@ -51,17 +53,31 @@
 		onGroupReorder,
 		itemSnippet,
 		groupHeaderSnippet,
-		emptySnippet
+		emptySnippet,
+		emptyText = 'Drop items here'
 	}: Props = $props();
 
 	let draggedItem = $state<DragDropItem | null>(null);
 	let draggedFromGroup = $state<string | null>(null);
-	let draggedFromIndex = $state<number>(-1);
+	let draggedFromIndex = $state(-1);
 	let dragOverGroup = $state<string | null>(null);
-	let dragOverIndex = $state<number>(-1);
+	let dragOverIndex = $state(-1);
 	let isDragging = $state(false);
 
-	const colors = {
+	let containerEl = $state<HTMLElement>();
+	let isTouchDragging = $state(false);
+	let isTouchPending = $state(false);
+	let touchDraggedElement = $state<HTMLElement | null>(null);
+	let ghostElement = $state<HTMLElement | null>(null);
+	let isTouchDevice = $state(false);
+
+	let touchStart = { x: 0, y: 0 };
+	let touchCurrent = { x: 0, y: 0 };
+	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+	const LONG_PRESS_DURATION = 400;
+	const SCROLL_THRESHOLD = 8;
+
+	const colorClass = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		muted: 'is-muted',
@@ -71,14 +87,14 @@
 		warning: 'is-warning'
 	};
 
-	const variants = {
+	const variantClass = {
 		soft: 'is-soft',
 		solid: 'is-solid',
 		outlined: 'is-outlined',
 		ghost: 'is-ghost'
 	};
 
-	const sizes = {
+	const sizeClass = {
 		sm: 'is-sm',
 		md: 'is-md',
 		lg: 'is-lg'
@@ -86,8 +102,77 @@
 
 	const isSingleMode = $derived(groups.length === 0);
 
+	function performReorder(dropIndex: number, dropGroupId?: string) {
+		if (!draggedItem) return;
+
+		if (isSingleMode) {
+			const newItems = [...items];
+			newItems.splice(draggedFromIndex, 1);
+			const adjustedIndex = dropIndex > draggedFromIndex ? dropIndex - 1 : dropIndex;
+			newItems.splice(adjustedIndex, 0, draggedItem);
+			items = newItems;
+			onReorder?.(newItems);
+		} else {
+			const newGroups = groups.map((g) => ({ ...g, items: [...g.items] }));
+
+			if (draggedFromGroup === dropGroupId) {
+				const group = newGroups.find((g) => g.id === dropGroupId);
+				if (group) {
+					group.items.splice(draggedFromIndex, 1);
+					const adjustedIndex = dropIndex > draggedFromIndex ? dropIndex - 1 : dropIndex;
+					group.items.splice(adjustedIndex, 0, draggedItem);
+				}
+			} else {
+				const fromGroup = newGroups.find((g) => g.id === draggedFromGroup);
+				const toGroup = newGroups.find((g) => g.id === dropGroupId);
+				if (fromGroup && toGroup) {
+					fromGroup.items.splice(draggedFromIndex, 1);
+					toGroup.items.splice(dropIndex, 0, draggedItem);
+				}
+			}
+
+			groups = newGroups;
+			onReorder?.(
+				newGroups.find((g) => g.id === dropGroupId)?.items || [],
+				draggedFromGroup ?? undefined,
+				dropGroupId
+			);
+			onGroupReorder?.(newGroups);
+		}
+	}
+
+	function performDropOnEmpty(groupId: string) {
+		if (!draggedItem || isSingleMode) return;
+
+		const newGroups = groups.map((g) => ({ ...g, items: [...g.items] }));
+		const fromGroup = newGroups.find((g) => g.id === draggedFromGroup);
+		const toGroup = newGroups.find((g) => g.id === groupId);
+
+		if (fromGroup && toGroup) {
+			fromGroup.items.splice(draggedFromIndex, 1);
+			toGroup.items.push(draggedItem);
+		}
+
+		groups = newGroups;
+		onReorder?.(toGroup?.items || [], draggedFromGroup ?? undefined, groupId);
+		onGroupReorder?.(newGroups);
+	}
+
+	function resetDragState() {
+		draggedItem = null;
+		draggedFromGroup = null;
+		draggedFromIndex = -1;
+		dragOverGroup = null;
+		dragOverIndex = -1;
+		isDragging = false;
+		isTouchDragging = false;
+	}
+
 	function handleDragStart(e: DragEvent, item: DragDropItem, index: number, groupId?: string) {
-		if (isDisabled) return;
+		if (isDisabled || isTouchDevice || isTouchDragging) {
+			e.preventDefault();
+			return;
+		}
 
 		draggedItem = item;
 		draggedFromIndex = index;
@@ -100,35 +185,23 @@
 		}
 
 		const target = e.target as HTMLElement;
-		requestAnimationFrame(() => {
-			target.classList.add('is-dragging');
-		});
+		requestAnimationFrame(() => target.classList.add('is-dragging'));
 	}
 
 	function handleDragEnd(e: DragEvent) {
-		const target = e.target as HTMLElement;
-		target.classList.remove('is-dragging');
-
-		draggedItem = null;
-		draggedFromGroup = null;
-		draggedFromIndex = -1;
-		dragOverGroup = null;
-		dragOverIndex = -1;
-		isDragging = false;
+		(e.target as HTMLElement).classList.remove('is-dragging');
+		resetDragState();
 	}
 
 	function handleDragOver(e: DragEvent, index: number, groupId?: string) {
 		e.preventDefault();
 		if (!draggedItem || isDisabled) return;
-
 		if (!allowGroupTransfer && groupId !== draggedFromGroup) return;
 
 		dragOverIndex = index;
 		dragOverGroup = groupId ?? null;
 
-		if (e.dataTransfer) {
-			e.dataTransfer.dropEffect = 'move';
-		}
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
 	}
 
 	function handleDragLeave() {
@@ -144,44 +217,7 @@
 			return;
 		}
 
-		if (isSingleMode) {
-			const newItems = [...items];
-			newItems.splice(draggedFromIndex, 1);
-			newItems.splice(dropIndex > draggedFromIndex ? dropIndex - 1 : dropIndex, 0, draggedItem);
-			items = newItems;
-			onReorder?.(newItems);
-		} else {
-			const newGroups = groups.map((g) => ({ ...g, items: [...g.items] }));
-
-			if (draggedFromGroup === groupId) {
-				const group = newGroups.find((g) => g.id === groupId);
-				if (group) {
-					group.items.splice(draggedFromIndex, 1);
-					group.items.splice(
-						dropIndex > draggedFromIndex ? dropIndex - 1 : dropIndex,
-						0,
-						draggedItem
-					);
-				}
-			} else {
-				const fromGroup = newGroups.find((g) => g.id === draggedFromGroup);
-				const toGroup = newGroups.find((g) => g.id === groupId);
-
-				if (fromGroup && toGroup) {
-					fromGroup.items.splice(draggedFromIndex, 1);
-					toGroup.items.splice(dropIndex, 0, draggedItem);
-				}
-			}
-
-			groups = newGroups;
-			onReorder?.(
-				newGroups.find((g) => g.id === groupId)?.items || [],
-				draggedFromGroup ?? undefined,
-				groupId
-			);
-			onGroupReorder?.(newGroups);
-		}
-
+		performReorder(dropIndex, groupId);
 		handleDragEnd(e);
 	}
 
@@ -194,34 +230,229 @@
 			return;
 		}
 
-		if (!isSingleMode && groupId) {
-			const newGroups = groups.map((g) => ({ ...g, items: [...g.items] }));
-			const fromGroup = newGroups.find((g) => g.id === draggedFromGroup);
-			const toGroup = newGroups.find((g) => g.id === groupId);
+		if (groupId) performDropOnEmpty(groupId);
+		handleDragEnd(e);
+	}
+
+	function createGhostElement(source: HTMLElement): HTMLElement {
+		const ghost = source.cloneNode(true) as HTMLElement;
+		Object.assign(ghost.style, {
+			position: 'fixed',
+			pointerEvents: 'none',
+			zIndex: '9999',
+			opacity: '0.9',
+			width: `${source.offsetWidth}px`,
+			transform: 'scale(1.02)',
+			boxShadow: '0 8px 24px rgba(0, 0, 0, 0.2)'
+		});
+		ghost.classList.add('drag-drop-ghost');
+		document.body.appendChild(ghost);
+		return ghost;
+	}
+
+	function updateGhostPosition(x: number, y: number) {
+		if (ghostElement) {
+			ghostElement.style.left = `${x - ghostElement.offsetWidth / 2}px`;
+			ghostElement.style.top = `${y - ghostElement.offsetHeight / 2}px`;
+		}
+	}
+
+	function removeGhostElement() {
+		ghostElement?.remove();
+		ghostElement = null;
+	}
+
+	function clearTimers() {
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+	}
+
+	function cancelTouchDrag() {
+		clearTimers();
+		removeGhostElement();
+		touchDraggedElement?.classList.remove('is-dragging');
+		isTouchPending = false;
+		resetDragState();
+	}
 
-			if (fromGroup && toGroup) {
-				fromGroup.items.splice(draggedFromIndex, 1);
-				toGroup.items.push(draggedItem);
+	function getItemAtPoint(
+		x: number,
+		y: number
+	): { element: HTMLElement; index: number; groupId?: string } | null {
+		if (!containerEl) return null;
+
+		const allItems = containerEl.querySelectorAll('.drag-drop-item');
+		for (const item of allItems) {
+			const rect = item.getBoundingClientRect();
+			if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+				const groupEl = item.closest('.drag-drop-group');
+				const groupId = groupEl?.getAttribute('data-group-id') || undefined;
+				const listEl = item.closest('.drag-drop-list');
+				const siblings = listEl?.querySelectorAll('.drag-drop-item') || [];
+				const index = Array.from(siblings).indexOf(item);
+				return { element: item as HTMLElement, index, groupId };
 			}
+		}
 
-			groups = newGroups;
-			onReorder?.(toGroup?.items || [], draggedFromGroup ?? undefined, groupId);
-			onGroupReorder?.(newGroups);
+		const emptyZones = containerEl.querySelectorAll('.drag-drop-empty');
+		for (const zone of emptyZones) {
+			const rect = zone.getBoundingClientRect();
+			if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+				const groupEl = zone.closest('.drag-drop-group');
+				const groupId = groupEl?.getAttribute('data-group-id') || undefined;
+				return { element: zone as HTMLElement, index: 0, groupId };
+			}
 		}
 
-		handleDragEnd(e);
+		return null;
+	}
+
+	function handleTouchStart(e: TouchEvent, item: DragDropItem, index: number, groupId?: string) {
+		if (isDisabled) return;
+
+		const touch = e.touches[0];
+		touchStart = { x: touch.clientX, y: touch.clientY };
+		touchCurrent = { ...touchStart };
+
+		touchDraggedElement = e.currentTarget as HTMLElement;
+		isTouchPending = true;
+
+		longPressTimer = setTimeout(() => {
+			if (!isTouchPending) return;
+
+			isTouchDragging = true;
+			isDragging = true;
+			isTouchPending = false;
+			draggedItem = item;
+			draggedFromIndex = index;
+			draggedFromGroup = groupId ?? null;
+
+			touchDraggedElement?.classList.add('is-dragging');
+			ghostElement = createGhostElement(touchDraggedElement!);
+			updateGhostPosition(touchCurrent.x, touchCurrent.y);
+
+			navigator.vibrate?.(50);
+		}, LONG_PRESS_DURATION);
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		const touch = e.touches[0];
+		touchCurrent = { x: touch.clientX, y: touch.clientY };
+
+		const deltaX = Math.abs(touchCurrent.x - touchStart.x);
+		const deltaY = Math.abs(touchCurrent.y - touchStart.y);
+
+		if (!isTouchDragging && (deltaX > SCROLL_THRESHOLD || deltaY > SCROLL_THRESHOLD)) {
+			cancelTouchDrag();
+			return;
+		}
+
+		if (!isTouchDragging || !draggedItem) return;
+
+		e.preventDefault();
+		updateGhostPosition(touchCurrent.x, touchCurrent.y);
+
+		containerEl
+			?.querySelectorAll('.is-touch-drag-over')
+			.forEach((el) => el.classList.remove('is-touch-drag-over'));
+
+		const itemAtPoint = getItemAtPoint(touchCurrent.x, touchCurrent.y);
+		if (itemAtPoint && itemAtPoint.element !== touchDraggedElement) {
+			if (!allowGroupTransfer && itemAtPoint.groupId !== draggedFromGroup) return;
+
+			dragOverIndex = itemAtPoint.index;
+			dragOverGroup = itemAtPoint.groupId ?? null;
+			itemAtPoint.element.classList.add('is-touch-drag-over');
+		} else {
+			dragOverIndex = -1;
+			dragOverGroup = null;
+		}
+	}
+
+	function handleTouchEnd() {
+		clearTimers();
+		isTouchPending = false;
+
+		if (!isTouchDragging || !draggedItem) {
+			isTouchDragging = false;
+			touchDraggedElement = null;
+			return;
+		}
+
+		containerEl
+			?.querySelectorAll('.is-touch-drag-over')
+			.forEach((el) => el.classList.remove('is-touch-drag-over'));
+
+		const itemAtPoint = getItemAtPoint(touchCurrent.x, touchCurrent.y);
+		if (itemAtPoint) {
+			if (allowGroupTransfer || itemAtPoint.groupId === draggedFromGroup) {
+				performReorder(itemAtPoint.index, itemAtPoint.groupId);
+			}
+		}
+
+		touchDraggedElement?.classList.remove('is-dragging');
+		removeGhostElement();
+		touchDraggedElement = null;
+		resetDragState();
+	}
+
+	onMount(() => {
+		isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+		const onGlobalTouchMove = (e: TouchEvent) => {
+			if (isTouchPending || isTouchDragging) {
+				handleTouchMove(e);
+			}
+		};
+
+		const onGlobalTouchEnd = () => {
+			if (isTouchPending || isTouchDragging) {
+				handleTouchEnd();
+			}
+		};
+
+		document.addEventListener('touchmove', onGlobalTouchMove, { passive: false });
+		document.addEventListener('touchend', onGlobalTouchEnd);
+		document.addEventListener('touchcancel', onGlobalTouchEnd);
+
+		return () => {
+			document.removeEventListener('touchmove', onGlobalTouchMove);
+			document.removeEventListener('touchend', onGlobalTouchEnd);
+			document.removeEventListener('touchcancel', onGlobalTouchEnd);
+			clearTimers();
+		};
+	});
+
+	function isItemDragging(item: DragDropItem) {
+		return draggedItem?.id === item.id;
+	}
+
+	function isItemDragOver(index: number, groupId?: string): boolean {
+		if (dragOverIndex !== index) return false;
+		if (dragOverGroup !== (groupId ?? null)) return false;
+		if (!draggedItem) return false;
+
+		const targetId = isSingleMode
+			? items[index]?.id
+			: groups.find((g) => g.id === groupId)?.items[index]?.id;
+
+		return draggedItem.id !== targetId;
 	}
 </script>
 
 <div
+	bind:this={containerEl}
 	class={cn(
 		'drag-drop',
-		colors[color],
-		variants[variant],
-		sizes[size],
+		colorClass[color],
+		variantClass[variant],
+		sizeClass[size],
 		direction === 'horizontal' ? 'is-horizontal' : 'is-vertical',
 		isDisabled && 'is-disabled',
 		isDragging && 'is-dragging',
+		isTouchDragging && 'is-touch-dragging',
 		className
 	)}
 >
@@ -231,16 +462,17 @@
 				<div
 					class={cn(
 						'drag-drop-item',
-						draggedItem?.id === item.id && 'is-dragging',
-						dragOverIndex === index && draggedItem?.id !== item.id && 'is-drag-over',
+						isItemDragging(item) && 'is-dragging',
+						isItemDragOver(index) && 'is-drag-over',
 						itemClass
 					)}
-					draggable={!isDisabled}
+					draggable={!isDisabled && !isTouchDevice}
 					ondragstart={(e) => handleDragStart(e, item, index)}
 					ondragend={handleDragEnd}
 					ondragover={(e) => handleDragOver(e, index)}
 					ondragleave={handleDragLeave}
 					ondrop={(e) => handleDrop(e, index)}
+					ontouchstart={(e) => handleTouchStart(e, item, index)}
 					role="listitem"
 				>
 					{#if itemSnippet}
@@ -271,14 +503,14 @@
 					{#if emptySnippet}
 						{@render emptySnippet()}
 					{:else}
-						<span>Arrastra elementos aquí</span>
+						<span>{emptyText}</span>
 					{/if}
 				</div>
 			{/if}
 		</div>
 	{:else}
 		{#each groups as group, groupIndex (group.id)}
-			<div class={cn('drag-drop-group', groupClass)}>
+			<div class={cn('drag-drop-group', groupClass)} data-group-id={group.id}>
 				{#if groupHeaderSnippet}
 					{@render groupHeaderSnippet(group, groupIndex)}
 				{:else if group.title}
@@ -293,19 +525,17 @@
 						<div
 							class={cn(
 								'drag-drop-item',
-								draggedItem?.id === item.id && 'is-dragging',
-								dragOverIndex === index &&
-									dragOverGroup === group.id &&
-									draggedItem?.id !== item.id &&
-									'is-drag-over',
+								isItemDragging(item) && 'is-dragging',
+								isItemDragOver(index, group.id) && 'is-drag-over',
 								itemClass
 							)}
-							draggable={!isDisabled}
+							draggable={!isDisabled && !isTouchDevice}
 							ondragstart={(e) => handleDragStart(e, item, index, group.id)}
 							ondragend={handleDragEnd}
 							ondragover={(e) => handleDragOver(e, index, group.id)}
 							ondragleave={handleDragLeave}
 							ondrop={(e) => handleDrop(e, index, group.id)}
+							ontouchstart={(e) => handleTouchStart(e, item, index, group.id)}
 							role="listitem"
 						>
 							{#if itemSnippet}
@@ -337,7 +567,7 @@
 							{#if emptySnippet}
 								{@render emptySnippet(group)}
 							{:else}
-								<span>Arrastra elementos aquí</span>
+								<span>{emptyText}</span>
 							{/if}
 						</div>
 					{/if}

package/dist/form/DragDrop.svelte.d.ts

@@ -26,6 +26,7 @@ type Props = {
     itemSnippet?: Snippet<[DragDropItem, number]>;
     groupHeaderSnippet?: Snippet<[DragDropGroup, number]>;
     emptySnippet?: Snippet<[DragDropGroup?]>;
+    emptyText?: string;
 };
 declare const DragDrop: import("svelte").Component<Props, {}, "items" | "groups">;
 type DragDrop = ReturnType<typeof DragDrop>;

package/dist/form/Dropzone.svelte

@@ -29,7 +29,7 @@
 			| 'warning'
 			| 'danger'
 			| 'surface'
-			| 'default';
+			| 'background';
 		variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
 		size?: 'sm' | 'md' | 'lg';
 		name?: string;
@@ -49,7 +49,7 @@
 		class: className,
 		controlClass,
 		icon,
-		color = 'default',
+		color = 'background',
 		variant = 'outlined',
 		size = 'md',
 		name,
@@ -75,7 +75,7 @@
 		danger: 'is-danger',
 		warning: 'is-warning',
 		surface: 'is-surface',
-		default: 'is-default'
+		background: 'is-background'
 	};
 
 	const variantClasses = {

package/dist/form/Dropzone.svelte.d.ts

@@ -14,7 +14,7 @@ type Props = {
     class?: string;
     controlClass?: string;
     icon?: IconData;
-    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'default';
+    color?: 'primary' | 'secondary' | 'muted' | 'success' | 'info' | 'warning' | 'danger' | 'surface' | 'background';
     variant?: 'solid' | 'soft' | 'outlined' | 'ghost';
     size?: 'sm' | 'md' | 'lg';
     name?: string;