@svar-ui/svelte-kanban 2.6.0

package/dist/components/CardList.svelte

@@ -0,0 +1,343 @@
+<script lang="ts">import { getContext, onDestroy } from "svelte";
+import { setID } from "@svar-ui/lib-dom";
+import CardWrapper from "./CardWrapper.svelte";
+import { KANBAN_API_CONTEXT, DND_CONTEXT, SCROLL_CONTAINER_CONTEXT } from "../context.js";
+import { DndState } from "./useDrag.svelte.js";
+import { dblclick } from "../directives/dblclick.js";
+let { column, readonly = false, cardContent, cardShape, contentVisible, virtualizeCards, estimatedCardHeight, cardOverscan, fixedColumnWidth, cardCss } = $props();
+function getCardExtraCss(card) {
+	return cardCss ? cardCss(card, column) ?? "" : "";
+}
+const store = getContext(KANBAN_API_CONTEXT);
+const dnd = getContext(DND_CONTEXT);
+const getScrollContainer = getContext(SCROLL_CONTAINER_CONTEXT);
+const columnAccessor = $derived(store.getState().columnAccessor);
+let container = $state();
+let range = $state({
+	start: 0,
+	end: -1,
+	top: 0,
+	bottom: 0,
+	total: 0
+});
+let cardGap = $state(8);
+let frame = 0;
+let previousVirtualizeCards = false;
+const heightCache = new Map();
+const measuredNodes = new Map();
+let cardObserver;
+const isDropColumn = $derived(dnd?.active && dnd.target?.column === column.id);
+const renderStart = $derived(virtualizeCards ? range.start : 0);
+const renderEnd = $derived(virtualizeCards ? range.end : column.cards.length - 1);
+const renderedCards = $derived(contentVisible ? column.cards.slice(renderStart, Math.max(renderStart, renderEnd + 1)) : []);
+const hiddenHeight = $derived(range.total || estimateTotalHeight(column.cards.length));
+const topSpacerHeight = $derived(range.start > 0 ? Math.max(0, range.top - cardGap) : 0);
+const bottomSpacerHeight = $derived(range.bottom > 0 ? Math.max(0, range.bottom - cardGap) : 0);
+const afterRenderedBeforeId = $derived(contentVisible && virtualizeCards && renderEnd >= 0 && renderEnd < column.cards.length - 1 ? column.cards[renderEnd + 1]?.id : undefined);
+const trailingPlaceholder = $derived(isDropColumn && (dnd.target.beforeId == null || dnd.target.beforeId === afterRenderedBeforeId));
+function estimateTotalHeight(count) {
+	if (!count) return 0;
+	const height = Math.max(1, estimatedCardHeight || 1);
+	return count * height + Math.max(0, count - 1) * cardGap;
+}
+function readGap() {
+	if (!container) return;
+	const styles = getComputedStyle(container);
+	const configuredGap = styles.getPropertyValue("--wx-card-gap").trim();
+	const raw = configuredGap || styles.rowGap || styles.gap;
+	const next = Number.parseFloat(raw);
+	cardGap = Number.isFinite(next) ? next : 8;
+}
+function getCardHeight(card) {
+	return card.id != null ? heightCache.get(card.id) ?? Math.max(1, estimatedCardHeight || 1) : Math.max(1, estimatedCardHeight || 1);
+}
+function buildOffsets() {
+	const offsets = [0];
+	let total = 0;
+	for (let i = 0; i < column.cards.length; i++) {
+		total += getCardHeight(column.cards[i]);
+		if (i < column.cards.length - 1) total += cardGap;
+		offsets.push(total);
+	}
+	return {
+		offsets,
+		total
+	};
+}
+function upperBound(values, value) {
+	let low = 0;
+	let high = values.length;
+	while (low < high) {
+		const mid = Math.floor((low + high) / 2);
+		if (values[mid] <= value) low = mid + 1;
+		else high = mid;
+	}
+	return low;
+}
+function recalculate() {
+	if (!container) return;
+	readGap();
+	if (!contentVisible || !virtualizeCards) {
+		range = {
+			start: 0,
+			end: contentVisible ? column.cards.length - 1 : -1,
+			top: 0,
+			bottom: 0,
+			total: estimateTotalHeight(column.cards.length)
+		};
+		return;
+	}
+	const count = column.cards.length;
+	if (!count) {
+		range = {
+			start: 0,
+			end: -1,
+			top: 0,
+			bottom: 0,
+			total: 0
+		};
+		return;
+	}
+	const { offsets, total } = buildOffsets();
+	const boardScroll = getScrollContainer?.() ?? null;
+	let viewportTop = 0;
+	let viewportBottom = 0;
+	if (boardScroll) {
+		const boardRect = boardScroll.getBoundingClientRect();
+		const containerRect = container.getBoundingClientRect();
+		viewportTop = Math.max(0, boardRect.top - containerRect.top);
+		viewportBottom = Math.min(total, boardRect.bottom - containerRect.top);
+	} else {
+		viewportTop = container.scrollTop;
+		viewportBottom = viewportTop + container.clientHeight;
+	}
+	const safeOverscan = Math.max(0, Math.floor(cardOverscan || 0));
+	let start = Math.max(0, upperBound(offsets, viewportTop) - 1);
+	let end = Math.max(start, upperBound(offsets, viewportBottom) - 1);
+	start = Math.max(0, start - safeOverscan);
+	end = Math.min(count - 1, end + safeOverscan);
+	range = {
+		start,
+		end,
+		top: offsets[start],
+		bottom: Math.max(0, total - offsets[end + 1]),
+		total
+	};
+}
+function scheduleRecalculate(..._tracked) {
+	if (frame) return;
+	frame = requestAnimationFrame(() => {
+		frame = 0;
+		recalculate();
+	});
+}
+function pruneHeightCache() {
+	const ids = new Set(column.cards.map((card) => card.id));
+	for (const id of heightCache.keys()) {
+		if (!ids.has(id)) heightCache.delete(id);
+	}
+	while (heightCache.size > 1e4) {
+		const first = heightCache.keys().next().value;
+		if (first === undefined) break;
+		heightCache.delete(first);
+	}
+}
+function ensureCardObserver() {
+	if (cardObserver || typeof ResizeObserver === "undefined") return;
+	cardObserver = new ResizeObserver((entries) => {
+		let changed = false;
+		for (const entry of entries) {
+			const id = measuredNodes.get(entry.target);
+			if (id == null) continue;
+			const height = Math.ceil(entry.target.offsetHeight);
+			if (height > 0 && heightCache.get(id) !== height) {
+				heightCache.delete(id);
+				heightCache.set(id, height);
+				changed = true;
+			}
+		}
+		if (changed) scheduleRecalculate();
+	});
+}
+function measureCard(node, card) {
+	if (card.id != null) {
+		ensureCardObserver();
+		measuredNodes.set(node, card.id);
+		cardObserver?.observe(node);
+	}
+	return {
+		update(next) {
+			cardObserver?.unobserve(node);
+			if (next.id != null) {
+				measuredNodes.set(node, next.id);
+				cardObserver?.observe(node);
+			} else {
+				measuredNodes.delete(node);
+			}
+		},
+		destroy() {
+			cardObserver?.unobserve(node);
+			measuredNodes.delete(node);
+		}
+	};
+}
+$effect(() => {
+	if (virtualizeCards && !previousVirtualizeCards) {
+		heightCache.clear();
+	}
+	previousVirtualizeCards = virtualizeCards;
+	pruneHeightCache();
+	scheduleRecalculate(column.cards, contentVisible, estimatedCardHeight, cardOverscan);
+});
+$effect(() => {
+	if (!container || !contentVisible || !virtualizeCards) return;
+	const scrollElement = getScrollContainer?.() ?? container;
+	const onScroll = () => scheduleRecalculate();
+	scrollElement.addEventListener("scroll", onScroll, { passive: true });
+	window.addEventListener("resize", onScroll);
+	scheduleRecalculate();
+	return () => {
+		scrollElement.removeEventListener("scroll", onScroll);
+		window.removeEventListener("resize", onScroll);
+	};
+});
+$effect(() => {
+	if (!container || !contentVisible || !virtualizeCards || fixedColumnWidth || typeof ResizeObserver === "undefined") {
+		return;
+	}
+	let width = container.clientWidth;
+	const observer = new ResizeObserver(() => {
+		const next = container?.clientWidth ?? 0;
+		if (next && next !== width) {
+			width = next;
+			heightCache.clear();
+			scheduleRecalculate();
+		}
+	});
+	observer.observe(container);
+	return () => observer.disconnect();
+});
+onDestroy(() => {
+	if (frame) cancelAnimationFrame(frame);
+	cardObserver?.disconnect();
+});
+</script>
+
+<div
+	class="wx-column-cards"
+	data-kanban-column-cards={setID(column.id)}
+	data-kanban-render-start={renderStart}
+	data-kanban-render-end={renderEnd}
+	data-kanban-card-count={column.cards.length}
+	data-kanban-after-rendered-before-id={afterRenderedBeforeId == null
+		? undefined
+		: setID(afterRenderedBeforeId)}
+	bind:this={container}
+	use:dblclick={{
+		store,
+		column: column.id,
+		columnAccessor,
+		readonly,
+	}}
+>
+	{#if contentVisible}
+		{#if virtualizeCards}
+			{#if topSpacerHeight > 0}
+				<div
+					class="wx-virtual-spacer"
+					style:height="{topSpacerHeight}px"
+				></div>
+			{/if}
+			{#each renderedCards as cardItem (cardItem.id)}
+				{#if isDropColumn && dnd.target!.beforeId === cardItem.id}
+					<div
+						class="wx-drop-placeholder"
+						style:height="{dnd.height}px"
+					></div>
+				{/if}
+				{@const extraCss = getCardExtraCss(cardItem)}
+				<div
+					class="wx-card-row {cardItem.css ?? ''} {extraCss}"
+					data-kanban-card-id={cardItem.id == null
+						? undefined
+						: setID(cardItem.id)}
+					use:measureCard={cardItem}
+					class:wx-dragging={dnd?.active &&
+						dnd.cardId === cardItem.id}
+				>
+					<CardWrapper card={cardItem} {cardContent} {cardShape} {extraCss} />
+				</div>
+			{/each}
+			{#if trailingPlaceholder}
+				<div
+					class="wx-drop-placeholder"
+					style:height="{dnd.height}px"
+				></div>
+			{/if}
+			{#if bottomSpacerHeight > 0}
+				<div
+					class="wx-virtual-spacer"
+					style:height="{bottomSpacerHeight}px"
+				></div>
+			{/if}
+		{:else}
+			{#each column.cards as cardItem (cardItem.id)}
+				{#if isDropColumn && dnd.target!.beforeId === cardItem.id}
+					<div
+						class="wx-drop-placeholder"
+						style:height="{dnd.height}px"
+					></div>
+				{/if}
+				{@const extraCss = getCardExtraCss(cardItem)}
+				<div
+					class="wx-card-row {cardItem.css ?? ''} {extraCss}"
+					data-kanban-card-id={cardItem.id == null
+						? undefined
+						: setID(cardItem.id)}
+					class:wx-dragging={dnd?.active &&
+						dnd.cardId === cardItem.id}
+				>
+					<CardWrapper card={cardItem} {cardContent} {cardShape} {extraCss} />
+				</div>
+			{/each}
+			{#if trailingPlaceholder}
+				<div
+					class="wx-drop-placeholder"
+					style:height="{dnd.height}px"
+				></div>
+			{/if}
+		{/if}
+	{:else if hiddenHeight > 0}
+		<div
+			class="wx-virtual-spacer"
+			style:height="{hiddenHeight}px"
+		></div>
+	{/if}
+</div>
+
+<style>
+	.wx-column-cards {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px;
+		overflow-y: auto;
+		flex: 1;
+		min-height: 0;
+	}
+
+	.wx-column-cards > :global(div) {
+		flex-shrink: 0;
+	}
+
+	.wx-drop-placeholder {
+		border: 1px dashed var(--wx-kanban-border-color);
+		border-radius: var(--wx-border-radius);
+		background: var(--wx-kanban-drop-placeholder-bg);
+		box-sizing: border-box;
+	}
+
+	.wx-dragging {
+		display: none;
+	}
+</style>

package/dist/components/CardList.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Component } from "svelte";
+import type { ColumnView, KanbanCard } from "@svar-ui/kanban-store";
+import type { CardShape, CardCssFn } from "../types.js";
+type Props = {
+    column: ColumnView;
+    readonly?: boolean;
+    cardContent?: Component<{
+        card: KanbanCard;
+        cardShape: CardShape;
+    }>;
+    cardShape: CardShape;
+    contentVisible: boolean;
+    virtualizeCards: boolean;
+    estimatedCardHeight: number;
+    cardOverscan: number;
+    fixedColumnWidth: boolean;
+    cardCss?: CardCssFn;
+};
+declare const CardList: Component<Props, {}, "">;
+type CardList = ReturnType<typeof CardList>;
+export default CardList;

package/dist/components/CardWrapper.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">import { getContext } from "svelte";
+import { setID } from "@svar-ui/lib-dom";
+import Card from "./Card.svelte";
+const { cardContent: CardContent, card, cardShape, extraCss = "" } = $props();
+const _ = getContext("wx-i18n").getGroup("kanban");
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+<article
+	class="wx-card {card.css ?? ''} {extraCss}"
+	data-id={card.id == null ? undefined : setID(card.id)}
+	role="button"
+	tabindex="0"
+	aria-label={card.label ?? `${_("Card")} ${card.id}`}
+>
+	{#if CardContent}
+		<CardContent
+			{card}
+			{cardShape}
+		></CardContent>
+	{:else}
+		<Card card={card} {cardShape} />
+	{/if}
+</article>
+
+<style>
+	.wx-card {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		padding: 10px;
+		background: var(--wx-kanban-card-bg);
+		border-radius: var(--wx-border-radius);
+		box-shadow: var(--wx-kanban-card-shadow);
+		cursor: pointer;
+		border-top: 3px solid transparent;
+		touch-action: none;
+		user-select: none;
+	}
+
+	.wx-card:hover {
+		box-shadow: var(--wx-kanban-card-shadow-hover);
+	}
+
+	.wx-card:focus-visible {
+		outline: 2px solid var(--wx-color-primary);
+		outline-offset: 1px;
+	}
+</style>

package/dist/components/CardWrapper.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from "svelte";
+import type { KanbanCard } from "@svar-ui/kanban-store";
+import type { CardShape } from "../types.js";
+type Props = {
+    cardContent?: Component<{
+        card: KanbanCard;
+        cardShape: CardShape;
+    }>;
+    card: KanbanCard;
+    cardShape: CardShape;
+    extraCss?: string;
+};
+declare const CardWrapper: Component<Props, {}, "">;
+type CardWrapper = ReturnType<typeof CardWrapper>;
+export default CardWrapper;

package/dist/components/Column.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">import { getContext } from "svelte";
+import CardList from "./CardList.svelte";
+import { createColumnCard } from "../directives/dblclick.js";
+import { KANBAN_API_CONTEXT } from "../context.js";
+let { column, readonly = false, cardContent, cardShape, contentVisible, requestVisible, virtualizeCards, estimatedCardHeight, cardOverscan, fixedColumnWidth, registerColumn, cardCss, columnCss } = $props();
+const dynamicColumnCss = $derived(columnCss ? columnCss(column.cards, column) ?? "" : "");
+const store = getContext(KANBAN_API_CONTEXT);
+const columnAccessor = $derived(store.getState().columnAccessor);
+const _ = getContext("wx-i18n").getGroup("kanban");
+let root = $state();
+const cardLimitVisible = $derived(typeof column.cardLimit === "number" || column.cardLimit === true);
+const cardLimitNumber = $derived(typeof column.cardLimit === "number" ? column.cardLimit : null);
+const addCardVisible = $derived(column.addCard !== false && !readonly);
+function toggleCollapsed() {
+	store.exec("update-column", {
+		id: column.id,
+		column: { collapsed: !column.collapsed }
+	});
+}
+function addCard() {
+	if (!addCardVisible) return;
+	const card = createColumnCard({}, columnAccessor, column.id);
+	store.exec("add-card", {
+		card,
+		edit: true
+	});
+}
+$effect(() => {
+	if (!registerColumn || !root) return;
+	const id = column.id;
+	registerColumn(id, root);
+	return () => registerColumn(id, null);
+});
+</script>
+
+<section
+	class="wx-column {column.css ?? ''} {dynamicColumnCss}"
+	class:wx-collapsed={column.collapsed}
+	class:wx-over-limit={column.overLimit}
+	bind:this={root}
+>
+	{#if column.collapsed}
+		<button
+			type="button"
+			class="wx-expand"
+			onclick={toggleCollapsed}
+			aria-label={_("Expand column")}
+		>
+			<i class="wx-icon wxi-angle-right"></i>
+		</button>
+		<div class="wx-body">
+			<h3 class="wx-title">
+				<span>{column.label}</span>
+				{#if cardLimitVisible}
+					<span class="wx-count" class:wx-over={column.overLimit}>
+						{column.cards.length}{#if cardLimitNumber != null}/{cardLimitNumber}{/if}
+					</span>
+				{/if}
+			</h3>
+		</div>
+	{:else}
+		<header class="wx-column-header">
+			<button
+				type="button"
+				class="wx-toggle"
+				onclick={toggleCollapsed}
+				aria-label={_("Collapse column")}
+			>
+				<i class="wx-icon wxi-angle-left"></i>
+			</button>
+			<h3 class="wx-title">{column.label}</h3>
+			{#if cardLimitVisible}
+				<span class="wx-count" class:wx-over={column.overLimit}>
+					{column.cards.length}{#if cardLimitNumber != null}/{cardLimitNumber}{/if}
+				</span>
+			{/if}
+			{#if addCardVisible}
+				<button
+					type="button"
+					class="wx-add"
+					onclick={addCard}
+					aria-label="{_('Add card to')} {column.label}"
+				>
+					<i class="wx-icon wxi-plus"></i>
+				</button>
+			{/if}
+		</header>
+		<CardList
+			{column}
+			{readonly}
+			{cardContent}
+			{cardShape}
+			{contentVisible}
+			{virtualizeCards}
+			{estimatedCardHeight}
+			{cardOverscan}
+			{fixedColumnWidth}
+			{cardCss}
+		/>
+	{/if}
+</section>
+
+<style>
+	.wx-icon {
+		font-size: 24px;
+		margin-top: 5px;
+	}
+
+	.wx-column {
+		display: flex;
+		flex-direction: column;
+		flex: 0 0 280px;
+		min-width: 280px;
+		max-height: 100%;
+		background: var(--wx-kanban-column-bg);
+		border-radius: var(--wx-radius-major);
+		overflow: hidden;
+	}
+
+	.wx-collapsed {
+		flex: 0 0 40px;
+		min-width: 40px;
+		max-width: 40px;
+		align-items: center;
+	}
+
+	.wx-over-limit .wx-column-header,
+	.wx-over-limit .wx-body {
+		background: var(--wx-kanban-column-over-limit-bg);
+	}
+
+	.wx-column-header {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 10px 12px;
+		border-bottom: 1px solid var(--wx-kanban-border-color);
+	}
+
+	.wx-title {
+		flex: 1;
+		margin: 0;
+		font-weight: var(--wx-font-weight-md);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.wx-count {
+		font-size: var(--wx-font-size-sm);
+		color: var(--wx-color-font-alt);
+	}
+
+	.wx-over {
+		color: var(--wx-color-danger);
+		font-weight: var(--wx-font-weight-md);
+	}
+
+	.wx-add,
+	.wx-toggle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		background: none;
+		border: none;
+		border-radius: var(--wx-icon-border-radius);
+		padding: 0;
+		width: 18px;
+		height: 18px;
+		cursor: pointer;
+		font-size: var(--wx-font-size-sm);
+		color: var(--wx-color-font-alt);
+	}
+
+	.wx-add:hover,
+	.wx-toggle:hover {
+		background: var(--wx-background-hover);
+	}
+
+	.wx-add:focus,
+	.wx-toggle:focus {
+		outline: none;
+		border: 1px solid var(--wx-color-primary);
+	}
+
+	.wx-expand {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		background: none;
+		border: none;
+		padding: 0;
+		width: 100%;
+		height: 36px;
+		flex: 0 0 36px;
+		cursor: pointer;
+		font-size: var(--wx-font-size-sm);
+		color: var(--wx-color-font-alt);
+	}
+
+	.wx-body {
+		position: relative;
+		flex: 1;
+		width: 100%;
+		min-height: 0;
+	}
+
+	.wx-collapsed .wx-title {
+		position: absolute;
+		left: 50%;
+		bottom: 0px;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		max-width: calc(var(--wx-kanban-scroll-height, 100vh) - 96px);
+		transform: rotate(-90deg);
+		transform-origin: left center;
+	}
+
+	.wx-collapsed .wx-title > span:first-child {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.wx-collapsed .wx-count {
+		flex: 0 0 auto;
+		font-weight: var(--wx-font-weight);
+	}
+</style>

package/dist/components/Column.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Component } from "svelte";
+import type { ColumnID, ColumnView, KanbanCard } from "@svar-ui/kanban-store";
+import type { CardShape, CardCssFn, ColumnCssFn } from "../types.js";
+type Props = {
+    column: ColumnView;
+    readonly?: boolean;
+    cardContent?: Component<{
+        card: KanbanCard;
+        cardShape: CardShape;
+    }>;
+    cardShape: CardShape;
+    contentVisible: boolean;
+    requestVisible: boolean;
+    virtualizeCards: boolean;
+    estimatedCardHeight: number;
+    cardOverscan: number;
+    fixedColumnWidth: boolean;
+    registerColumn?: (id: ColumnID, element: HTMLElement | null) => void;
+    cardCss?: CardCssFn;
+    columnCss?: ColumnCssFn;
+};
+declare const Column: Component<Props, {}, "">;
+type Column = ReturnType<typeof Column>;
+export default Column;