@heyramzi/ui 3.7.0 → 3.8.0

package/src/work/kanban-board-state.svelte.js

@@ -0,0 +1,205 @@
+import { untrack } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+import { prefersReducedMotion } from "svelte/motion";
+import { cubicOut } from "svelte/easing";
+import { durationMs } from "../lib/motion.js";
+import { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
+import { createKanbanRailState } from "./kanban-rail-state.svelte.js";
+import { createCardKeyDown } from "./kanban-keyboard.js";
+/**
+* A board's state: sort, the per-column fold and cap, and the drag wiring. The hidden rail
+* lives in `rail`, the keyboard move in `onCardKeyDown`.
+* Call it during component init, since it registers an effect. `input` is read on every use.
+*/
+export function createKanbanBoardState(input) {
+	// The drop slot takes the held card's height, so the column doesn't jump when it lands.
+	let slotHeight = $state(0);
+	let slotMotion = $derived({
+		duration: prefersReducedMotion.current ? 0 : durationMs("quick"),
+		easing: cubicOut
+	});
+	let internalExpanded = $state([]);
+	let expandedIds = $derived(input().expanded ?? internalExpanded);
+	function compare(a, b) {
+		const { sortKey, manualTiebreak, boardOrder, sortKeys } = input();
+		if (sortKey === "manual") {
+			const tie = manualTiebreak?.(a, b) ?? 0;
+			if (!boardOrder) return tie;
+			const ao = boardOrder(a);
+			const bo = boardOrder(b);
+			if (ao == null && bo == null) return tie;
+			if (ao == null) return 1;
+			if (bo == null) return -1;
+			return ao < bo ? -1 : ao > bo ? 1 : tie;
+		}
+		const key = sortKeys.find((entry) => entry.id === sortKey);
+		return key ? key.compare(a, b) : 0;
+	}
+	function sortedByColumn(columnId) {
+		const { items, getColumn } = input();
+		return items.filter((item) => getColumn(item) === columnId).slice().sort(compare);
+	}
+	function idAt(list, index) {
+		const item = list[index];
+		return item === undefined ? null : input().getId(item);
+	}
+	function capOf(columnId) {
+		const { limit } = input();
+		return typeof limit === "function" ? limit(columnId) : limit;
+	}
+	/** The column holds more cards than its cap, so it gets a fold. */
+	function isFoldable(columnId, total) {
+		const cap = capOf(columnId);
+		return cap !== undefined && total > cap;
+	}
+	// Open from this board's "Show N more", on top of the header caret's `expanded`.
+	const laneOpen = new SvelteSet();
+	function isOpen(columnId) {
+		return expandedIds.includes(columnId) || laneOpen.has(columnId);
+	}
+	/** The fold is shut, so the tail is out of sight. */
+	function isCapped(columnId, total) {
+		return isFoldable(columnId, total) && !isOpen(columnId);
+	}
+	// A card moved into a folded column stays in view, wherever its sort puts it.
+	const pinned = new SvelteSet();
+	// The caret folding a column shuts this board's own fold of it too, so every lane lands on the cap.
+	let previousExpanded = [];
+	$effect(() => {
+		const now = expandedIds;
+		untrack(() => {
+			for (const id of previousExpanded) if (!now.includes(id)) shut(id);
+		});
+		previousExpanded = [...now];
+	});
+	function moveAndPin(id, move) {
+		pinned.add(id);
+		return input().onMove(id, move);
+	}
+	function canDrop(columnId) {
+		const { isDroppable, columns } = input();
+		return isDroppable?.(columnId) ?? columns.find((c) => c.id === columnId)?.droppable ?? true;
+	}
+	function setExpanded(next) {
+		internalExpanded = next;
+		input().onExpandedChange?.(next);
+	}
+	// Shutting drops the column's pins, so the fold closes to exactly its cap.
+	function shut(columnId) {
+		laneOpen.delete(columnId);
+		for (const item of sortedByColumn(columnId)) pinned.delete(input().getId(item));
+	}
+	/** "Show N more": opens this board's cell only. */
+	function expand(columnId) {
+		laneOpen.add(columnId);
+	}
+	/** "Show less": shuts this board's cell, and lifts the caret's open if it was the caret's. */
+	function collapse(columnId) {
+		shut(columnId);
+		if (expandedIds.includes(columnId)) setExpanded(expandedIds.filter((id) => id !== columnId));
+	}
+	/** The header caret: the whole column, in every board that shares `expanded`. */
+	function toggleColumn(columnId) {
+		if (expandedIds.includes(columnId)) collapse(columnId);
+		else setExpanded([...expandedIds, columnId]);
+	}
+	const dnd = createKanbanDnd({
+		items: () => input().items,
+		getId: (item) => input().getId(item),
+		getColumn: (item) => input().getColumn(item),
+		getColumnItems: sortedByColumn,
+		getSortKey: () => input().sortKey,
+		boardOrder: (item) => input().boardOrder?.(item),
+		onMove: moveAndPin,
+		dropAtTop: (columnId) => input().dropAtTop?.(columnId) ?? isCapped(columnId, sortedByColumn(columnId).length),
+		isDroppable: canDrop
+	});
+	const rail = createKanbanRailState({
+		hidden: () => input().hidden,
+		onHiddenChange: () => input().onHiddenChange,
+		canDrop,
+		dnd
+	});
+	const onCardKeyDown = createCardKeyDown({
+		input,
+		canDrop,
+		isHidden: (columnId) => rail.hiddenSet.has(columnId),
+		sortedByColumn,
+		isCapped,
+		moveAndPin
+	});
+	let view = $derived(input().columns.map((column) => {
+		const all = sortedByColumn(column.id);
+		const cap = capOf(column.id);
+		const foldable = isFoldable(column.id, all.length);
+		const open = foldable && isOpen(column.id);
+		if (!foldable || cap === undefined) {
+			return {
+				column,
+				all,
+				head: all,
+				tail: [],
+				foldable,
+				open,
+				capped: false
+			};
+		}
+		// Head: the first `cap` cards plus any pinned ones, in sort order. The fold holds the rest.
+		const head = [];
+		const tail = [];
+		all.forEach((item, index) => {
+			(index < cap || pinned.has(input().getId(item)) ? head : tail).push(item);
+		});
+		return {
+			column,
+			all,
+			head,
+			tail,
+			foldable,
+			open,
+			capped: !open && tail.length > 0
+		};
+	}));
+	let hiddenColumns = $derived(input().columns.filter((column) => rail.hiddenSet.has(column.id)));
+	function contextOf(entry, active) {
+		const { column, all, head, capped } = entry;
+		return {
+			count: all.length,
+			active,
+			shown: capped ? head.length : all.length,
+			capped,
+			hide: () => rail.hide(column.id),
+			expand: () => expand(column.id),
+			collapse: () => collapse(column.id)
+		};
+	}
+	return {
+		get slotHeight() {
+			return slotHeight;
+		},
+		set slotHeight(value) {
+			slotHeight = value;
+		},
+		get slotMotion() {
+			return slotMotion;
+		},
+		get expandedIds() {
+			return expandedIds;
+		},
+		get view() {
+			return view;
+		},
+		get hiddenColumns() {
+			return hiddenColumns;
+		},
+		dnd,
+		rail,
+		sortedByColumn,
+		idAt,
+		expand,
+		collapse,
+		toggleColumn,
+		onCardKeyDown,
+		contextOf
+	};
+}

package/src/work/kanban-rail-state.svelte.js

@@ -0,0 +1,85 @@
+import { SvelteSet } from "svelte/reactivity";
+/** The rail of hidden columns: which are folded, the fold and unfold timing, and drops onto it. */
+export function createKanbanRailState(config) {
+	const { canDrop, dnd } = config;
+	let internalHidden = $state([]);
+	let hiddenIds = $derived(config.hidden() ?? internalHidden);
+	let hiddenSet = $derived(new Set(hiddenIds));
+	let railOpen = $state(true);
+	let dragOverHidden = $state(null);
+	const collapsing = new SvelteSet();
+	const expanding = new SvelteSet();
+	const leaving = new SvelteSet();
+	function setHidden(next) {
+		internalHidden = next;
+		config.onHiddenChange()?.(next);
+	}
+	// Fold: the column fades out first, then leaves the row and joins the rail.
+	function hide(columnId) {
+		if (hiddenSet.has(columnId) || collapsing.has(columnId)) return;
+		collapsing.add(columnId);
+		setTimeout(() => {
+			setHidden([...hiddenIds, columnId]);
+			collapsing.delete(columnId);
+		}, 300);
+	}
+	// Unfold: the rail entry leaves, then the column grows back in.
+	function show(columnId) {
+		leaving.add(columnId);
+		setTimeout(() => {
+			leaving.delete(columnId);
+			expanding.add(columnId);
+			setHidden(hiddenIds.filter((id) => id !== columnId));
+			setTimeout(() => expanding.delete(columnId), 350);
+		}, 200);
+	}
+	function showAll() {
+		for (const id of hiddenIds) leaving.add(id);
+		setTimeout(() => {
+			leaving.clear();
+			setHidden([]);
+		}, 200);
+	}
+	function onHiddenDragOver(e, columnId) {
+		if (!canDrop(columnId)) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+		if (dragOverHidden !== columnId) dragOverHidden = columnId;
+		dnd.clearDragOver();
+	}
+	function onHiddenDragLeave(e) {
+		if (!e.currentTarget.contains(e.relatedTarget)) dragOverHidden = null;
+	}
+	// A card dropped on a folded column brings the column back and lands in it.
+	function onHiddenDrop(e, columnId) {
+		dragOverHidden = null;
+		dnd.onDrop(e, columnId);
+		show(columnId);
+	}
+	return {
+		get hiddenSet() {
+			return hiddenSet;
+		},
+		get railOpen() {
+			return railOpen;
+		},
+		set railOpen(value) {
+			railOpen = value;
+		},
+		get dragOverHidden() {
+			return dragOverHidden;
+		},
+		set dragOverHidden(value) {
+			dragOverHidden = value;
+		},
+		collapsing,
+		expanding,
+		leaving,
+		hide,
+		show,
+		showAll,
+		onHiddenDragOver,
+		onHiddenDragLeave,
+		onHiddenDrop
+	};
+}

package/src/work/use-kanban-dnd.svelte.js

@@ -0,0 +1,129 @@
+import { boardOrderAt } from "./board-order.js";
+/**
+* A board's drag state and handlers, on native HTML5 drag so a card can leave the board for
+* any drop target a caller wired up.
+*/
+export function createKanbanDnd(config) {
+	let draggedId = $state(null);
+	let dragOver = $state(null);
+	function readDraggedId(e) {
+		const raw = e.dataTransfer?.getData("text/plain");
+		if (!raw) return null;
+		try {
+			const parsed = JSON.parse(raw);
+			return parsed.id ?? null;
+		} catch {
+			return null;
+		}
+	}
+	function onDragStart(e, id) {
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "move";
+			e.dataTransfer.setData("text/plain", JSON.stringify({ id }));
+		}
+		// Defer: marking the source during the dragstart event makes some browsers
+		// snapshot the faded state instead of the card.
+		requestAnimationFrame(() => {
+			draggedId = id;
+		});
+	}
+	function onItemDragOver(e, columnId, overId, nextId) {
+		if (config.isDroppable && !config.isDroppable(columnId)) return;
+		e.preventDefault();
+		e.stopPropagation();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+		const rect = e.currentTarget.getBoundingClientRect();
+		const insertAfter = e.clientY > rect.top + rect.height / 2;
+		const targetOverId = insertAfter ? nextId : overId;
+		if (targetOverId === draggedId) return;
+		if (dragOver?.columnId === columnId && dragOver.overId === targetOverId) return;
+		dragOver = {
+			columnId,
+			overId: targetOverId
+		};
+	}
+	function onColumnDragOver(e, columnId) {
+		if (config.isDroppable && !config.isDroppable(columnId)) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+		if (dragOver?.columnId !== columnId || dragOver.overId !== null) {
+			dragOver = {
+				columnId,
+				overId: null
+			};
+		}
+	}
+	function onDragLeave(e) {
+		if (!e.currentTarget.contains(e.relatedTarget)) {
+			dragOver = null;
+		}
+	}
+	function clearDragOver() {
+		dragOver = null;
+	}
+	function resetDrag() {
+		draggedId = null;
+		dragOver = null;
+	}
+	/** Where a manual drop lands: on the hovered card, else the top or the end. */
+	function manualInsertIndex(column, overId, columnId) {
+		const overIndex = overId ? column.findIndex((item) => config.getId(item) === overId) : -1;
+		if (overIndex !== -1) return overIndex;
+		return config.dropAtTop?.(columnId) ? 0 : column.length;
+	}
+	function onDrop(e, targetColumnId) {
+		e.preventDefault();
+		if (config.isDroppable && !config.isDroppable(targetColumnId)) return;
+		const overId = dragOver?.overId ?? null;
+		dragOver = null;
+		draggedId = null;
+		const id = readDraggedId(e);
+		const item = id ? config.items().find((entry) => config.getId(entry) === id) : undefined;
+		if (!item) return;
+		const movedId = config.getId(item);
+		if (config.getSortKey() !== "manual") {
+			if (config.getColumn(item) !== targetColumnId) {
+				void config.onMove(movedId, { columnId: targetColumnId });
+			}
+			return;
+		}
+		const column = config.getColumnItems(targetColumnId).filter((entry) => config.getId(entry) !== movedId);
+		const index = manualInsertIndex(column, overId, targetColumnId);
+		const before = column[index - 1];
+		const after = column[index];
+		const orderOf = config.boardOrder;
+		void config.onMove(movedId, {
+			columnId: targetColumnId,
+			...orderOf ? { boardOrder: boardOrderAt(column, index, orderOf) } : {},
+			beforeId: before === undefined ? null : config.getId(before),
+			afterId: after === undefined ? null : config.getId(after)
+		});
+	}
+	return {
+		get draggedId() {
+			return draggedId;
+		},
+		get dragOver() {
+			return dragOver;
+		},
+		set dragOver(value) {
+			dragOver = value;
+		},
+		onDragStart,
+		onItemDragOver,
+		onColumnDragOver,
+		onDragLeave,
+		onDrop,
+		clearDragOver,
+		resetDrag,
+		isDragSource(id) {
+			return draggedId === id;
+		},
+		showIndicatorBefore(columnId, itemId) {
+			return dragOver?.columnId === columnId && dragOver.overId === itemId && draggedId !== null;
+		},
+		showIndicatorEnd(columnId) {
+			return dragOver?.columnId === columnId && dragOver.overId === null && draggedId !== null;
+		}
+	};
+}