@svar-ui/svelte-kanban 2.6.0

package/dist/components/Layout.svelte

@@ -0,0 +1,362 @@
+<script lang="ts">import { getContext, onDestroy, setContext } from "svelte";
+import { delegateClick, hotkeys, locate, locateID } from "@svar-ui/lib-dom";
+import { Popup } from "@svar-ui/svelte-core";
+import Column from "./Column.svelte";
+import ContextMenu from "./ContextMenu.svelte";
+import DragGhost from "./DragGhost.svelte";
+import { cardDrag } from "../directives/drag.js";
+import { KANBAN_API_CONTEXT, SCROLL_CONTAINER_CONTEXT, DND_CONTEXT } from "../context.js";
+import { useCardOverlay } from "./useCardOverlay.svelte.js";
+let { readonly = false, render, cardContent, cardShape, tooltip, cardPopup, cardCss, columnCss } = $props();
+const columnScroll = $derived(render?.columnScroll ?? true);
+const fixedColumnWidth = $derived(render?.fixedColumnWidth ?? true);
+const virtualizeCards = $derived(render?.virtualizeCards ?? false);
+const virtualizeColumns = $derived(render?.virtualizeColumns ?? false);
+const estimatedCardHeight = $derived(render?.estimatedCardHeight ?? 80);
+const cardOverscan = $derived(render?.cardOverscan ?? 5);
+const columnOverscan = $derived(render?.columnOverscan ?? 1);
+const store = getContext(KANBAN_API_CONTEXT);
+const { viewData } = store.getReactiveState();
+const brandmark = store.getBrandmark();
+const _ = getContext("wx-i18n").getGroup("kanban");
+const dnd = getContext(DND_CONTEXT);
+let root = $state();
+let scroll = $state();
+let visibleColumnIds = $state(new Set());
+let visibilityFrame = 0;
+const columnElements = new Map();
+setContext(SCROLL_CONTAINER_CONTEXT, () => columnScroll ? null : scroll ?? null);
+function sameSet(a, b) {
+	if (a.size !== b.size) return false;
+	for (const value of a) {
+		if (!b.has(value)) return false;
+	}
+	return true;
+}
+function setVisibleColumns(next) {
+	if (!sameSet(visibleColumnIds, next)) {
+		visibleColumnIds = next;
+	}
+}
+function updateColumnVisibility() {
+	if (!virtualizeColumns || !scroll) {
+		setVisibleColumns(new Set());
+		return;
+	}
+	const columns = $viewData.columns;
+	if (!columns.length) {
+		setVisibleColumns(new Set());
+		return;
+	}
+	const scrollRect = scroll.getBoundingClientRect();
+	let first = -1;
+	let last = -1;
+	for (let i = 0; i < columns.length; i++) {
+		const element = columnElements.get(columns[i].id);
+		if (!element) continue;
+		const rect = element.getBoundingClientRect();
+		if (rect.right >= scrollRect.left && rect.left <= scrollRect.right) {
+			if (first === -1) first = i;
+			last = i;
+		}
+	}
+	if (first === -1 || last === -1) {
+		setVisibleColumns(new Set());
+		return;
+	}
+	const overscan = Math.max(0, Math.floor(columnOverscan || 0));
+	first = Math.max(0, first - overscan);
+	last = Math.min(columns.length - 1, last + overscan);
+	const next = new Set();
+	for (let i = first; i <= last; i++) {
+		next.add(columns[i].id);
+	}
+	setVisibleColumns(next);
+}
+function scheduleColumnVisibility(..._tracked) {
+	if (visibilityFrame) return;
+	visibilityFrame = requestAnimationFrame(() => {
+		visibilityFrame = 0;
+		updateColumnVisibility();
+	});
+}
+function registerColumn(id, element) {
+	if (element) columnElements.set(id, element);
+	else columnElements.delete(id);
+	scheduleColumnVisibility();
+}
+function updateScrollHeightVar() {
+	if (!scroll) return;
+	scroll.style.setProperty("--wx-kanban-scroll-height", `${scroll.clientHeight}px`);
+}
+function isColumnContentVisible(id) {
+	return !virtualizeColumns || visibleColumnIds.size === 0 || visibleColumnIds.has(id);
+}
+function isColumnRequestVisible(id) {
+	return !virtualizeColumns || visibleColumnIds.has(id);
+}
+function getCard(id) {
+	return store.getState().cards.getById(id);
+}
+const overlay = useCardOverlay(getCard, "right-start");
+const popupExtra = { trackScroll: true };
+function selectCard(id) {
+	if (!readonly && id != null) {
+		store.exec("select-card", { id });
+	}
+}
+function handleCardClick(id, ev) {
+	// suppress the click that fires right after a pointerup ends a drag
+	if (readonly || dnd?.active) return;
+	if (cardPopup && id != null) {
+		const target = ev?.target;
+		const el = target ? locate(target) : null;
+		if (el) {
+			overlay.handleCardPopup({
+				cardId: id,
+				element: el
+			});
+			return;
+		}
+	}
+	selectCard(id);
+}
+function handleCardKey(e) {
+	if (readonly) return;
+	e?.preventDefault();
+	const active = document.activeElement;
+	const id = active ? locateID(active) : null;
+	if (cardPopup && id != null && active) {
+		overlay.handleCardPopup({
+			cardId: id,
+			element: active
+		});
+		return;
+	}
+	selectCard(id);
+}
+const cardMenuConfig = $derived(cardShape?.menu ? typeof cardShape.menu === "object" ? cardShape.menu : {} : null);
+let cardMenu = $state();
+function handleCardMenu(id, ev) {
+	if (readonly || id == null || !cardMenu) return;
+	ev.stopPropagation();
+	cardMenu.show(ev, id);
+}
+function delegateCardClick(node) {
+	delegateClick(node, {
+		click: handleCardClick,
+		menu: handleCardMenu
+	});
+}
+function cardHotkeys(node) {
+	const destroy = hotkeys.subscribe((keys) => {
+		keys.configure({
+			enter: handleCardKey,
+			space: handleCardKey
+		}, node);
+	});
+	return { destroy };
+}
+$effect(() => {
+	scheduleColumnVisibility(virtualizeColumns, columnOverscan, fixedColumnWidth, $viewData.columns);
+});
+$effect(() => {
+	if (!scroll || !virtualizeColumns || typeof ResizeObserver === "undefined") return;
+	const observer = new ResizeObserver(() => scheduleColumnVisibility());
+	observer.observe(scroll);
+	return () => observer.disconnect();
+});
+$effect(() => {
+	if (!scroll) return;
+	updateScrollHeightVar();
+	window.addEventListener("resize", updateScrollHeightVar);
+	if (typeof ResizeObserver === "undefined") {
+		return () => window.removeEventListener("resize", updateScrollHeightVar);
+	}
+	const observer = new ResizeObserver(updateScrollHeightVar);
+	observer.observe(scroll);
+	return () => {
+		observer.disconnect();
+		window.removeEventListener("resize", updateScrollHeightVar);
+	};
+});
+onDestroy(() => {
+	if (visibilityFrame) cancelAnimationFrame(visibilityFrame);
+});
+</script>
+
+<div
+	class="wx-kanban"
+	role="region"
+	aria-label={_("Kanban board")}
+	bind:this={root}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="wx-board"
+		class:wx-scroll-board={!columnScroll}
+		class:wx-layout-flex={!fixedColumnWidth}
+		use:cardDrag={{ dnd, store, readonly }}
+		use:delegateCardClick
+		use:cardHotkeys
+		onmousemove={tooltip ? overlay.handleTooltipMove : undefined}
+		onmouseleave={tooltip ? overlay.handleTooltipLeave : undefined}
+	>
+		<div
+			class="wx-scroll"
+			bind:this={scroll}
+			onscroll={scheduleColumnVisibility}
+		>
+			<div class="wx-content">
+				{#each $viewData.columns as column (column.id)}
+					<Column
+						{column}
+						{readonly}
+						{cardContent}
+						{cardShape}
+						contentVisible={isColumnContentVisible(column.id)}
+						requestVisible={isColumnRequestVisible(column.id)}
+						{virtualizeCards}
+						{estimatedCardHeight}
+						{cardOverscan}
+						{fixedColumnWidth}
+						{registerColumn}
+						{cardCss}
+						{columnCss}
+					/>
+				{/each}
+			</div>
+		</div>
+	</div>
+	{#if brandmark}
+		<a style={brandmark.style} href={brandmark.link} target="_blank">
+			{brandmark.text}
+		</a>
+	{/if}
+	<DragGhost {root} {cardContent} {cardShape} />
+
+	{#if cardMenuConfig}
+		<ContextMenu
+			options={cardMenuConfig.options}
+			filter={cardMenuConfig.filter}
+			onclick={cardMenuConfig.onclick}
+			bind:this={cardMenu}
+		/>
+	{/if}
+
+	{#if overlay.tooltipState && tooltip}
+		{@const TooltipCmp = tooltip}
+		<div
+			class="wx-tooltip"
+			style="position:fixed;left:{overlay.mousePos.x +
+				12}px;top:{overlay.mousePos.y +
+				16}px;z-index:10000;pointer-events:none"
+			aria-hidden="true"
+		>
+			<TooltipCmp card={overlay.tooltipState.card} />
+		</div>
+	{/if}
+
+	{#if overlay.cardPopupState && cardPopup}
+		{@const CardPopupCmp = cardPopup}
+		<Popup
+			at={overlay.cardPopupState.at}
+			parent={overlay.cardPopupState.element}
+			oncancel={overlay.hideCardPopup}
+			{...popupExtra}
+		>
+			<CardPopupCmp
+				card={overlay.cardPopupState.card}
+				close={overlay.hideCardPopup}
+			/>
+		</Popup>
+	{/if}
+</div>
+
+<style>
+	.wx-kanban {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		width: 100%;
+		position: relative;
+		background: var(--wx-kanban-bg);
+		overflow: hidden;
+	}
+
+	.wx-board {
+		flex: 1;
+		padding: 12px;
+		box-sizing: border-box;
+		min-height: 0;
+	}
+
+	/* the scroll wrapper sits inside the padded board, so the
+	   padding stays at the edges and never scrolls away */
+	.wx-scroll {
+		height: 100%;
+		overflow-x: auto;
+		overflow-y: hidden;
+	}
+
+	.wx-content {
+		display: flex;
+		gap: 12px;
+		align-items: stretch;
+		min-height: 100%;
+		box-sizing: border-box;
+	}
+
+	.wx-board:not(.wx-scroll-board) .wx-content {
+		height: 100%;
+		min-height: 0;
+	}
+
+	.wx-board:not(.wx-scroll-board) :global(.wx-column:not(.wx-collapsed)) {
+		height: 100%;
+		min-height: 0;
+	}
+
+	.wx-board:not(.wx-scroll-board) :global(.wx-column.wx-collapsed) {
+		height: 100%;
+		min-height: 0;
+	}
+
+	/* board-wide vertical scroll (columnScroll: false) */
+	.wx-scroll-board .wx-scroll {
+		overflow-y: auto;
+	}
+
+	.wx-scroll-board :global(.wx-column) {
+		max-height: none;
+		overflow: visible;
+	}
+
+	.wx-scroll-board :global(.wx-column.wx-collapsed) {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		align-self: flex-start;
+		height: var(--wx-kanban-scroll-height, 100%);
+		max-height: var(--wx-kanban-scroll-height, 100%);
+		overflow: hidden;
+	}
+
+	.wx-scroll-board :global(.wx-column-cards) {
+		overflow: visible;
+		flex: none;
+	}
+
+	.wx-scroll-board :global(.wx-column-header) {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		background: var(--wx-kanban-column-bg);
+	}
+
+	/* flexible columns sharing viewport width (fixedColumnWidth: false) */
+	.wx-layout-flex :global(.wx-column:not(.wx-collapsed)) {
+		flex: 1 1 0;
+		min-width: 240px;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { Component } from "svelte";
+import type { KanbanCard } from "@svar-ui/kanban-store";
+import type { CardShape, RenderConfig, CardCssFn, ColumnCssFn } from "../types.js";
+type Props = {
+    cardShape: CardShape;
+    readonly?: boolean;
+    render?: RenderConfig;
+    cardContent?: Component<{
+        card: KanbanCard;
+        cardShape: CardShape;
+    }>;
+    tooltip?: any;
+    cardPopup?: any;
+    cardCss?: CardCssFn;
+    columnCss?: ColumnCssFn;
+};
+declare const Layout: Component<Props, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

package/dist/components/Toolbar.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">import { getContext, setContext } from "svelte";
+import { readable } from "svelte/store";
+import { Toolbar } from "@svar-ui/svelte-toolbar";
+import { locale } from "@svar-ui/lib-dom";
+import { en } from "@svar-ui/kanban-locales";
+import { en as coreEn } from "@svar-ui/core-locales";
+import { getToolbarItems } from "@svar-ui/kanban-store";
+const sortOptions = {
+	"sort-label-asc": {
+		field: "label",
+		dir: "asc"
+	},
+	"sort-label-desc": {
+		field: "label",
+		dir: "desc"
+	},
+	"sort-priority-asc": {
+		field: "priority",
+		dir: "asc"
+	},
+	"sort-priority-desc": {
+		field: "priority",
+		dir: "desc"
+	}
+};
+let { api = null, items = [], undo = false, sort = false, add = true } = $props();
+let l = getContext("wx-i18n");
+if (!l) {
+	l = locale({
+		...en,
+		...coreEn
+	});
+	setContext("wx-i18n", l);
+}
+const _ = l.getGroup("kanban");
+const emptyHistory = readable({
+	undo: 0,
+	redo: 0
+});
+let history = $derived(api ? api.getReactiveState().history : emptyHistory);
+const historyActions = ["undo", "redo"];
+function defaultHandler(id) {
+	if (!api) return;
+	if (id === "add-card") {
+		api.exec("add-card", {
+			card: {},
+			edit: true
+		});
+	} else if (id === "undo" || id === "redo") {
+		api.exec(id, {});
+	} else if (id === "sort-clear") {
+		api.exec("sort-cards", { sort: null });
+	} else if (id in sortOptions) {
+		api.exec("sort-cards", { sort: sortOptions[id] });
+	}
+}
+function prepareItem(item) {
+	const next = { ...item };
+	const id = typeof next.id === "string" ? next.id : "";
+	if (next.items) {
+		next.items = next.items.map(prepareItem);
+	}
+	if (next.text) next.text = _(next.text);
+	if (next.menuText) next.menuText = _(next.menuText);
+	if (next.title) next.title = _(next.title);
+	if (historyActions.includes(id)) {
+		next.disabled = id === "undo" ? !$history?.undo : !$history?.redo;
+	}
+	if (!next.handler && id) {
+		next.handler = () => defaultHandler(id);
+	}
+	return next;
+}
+const finalItems = $derived.by(() => {
+	const buttons = items.length ? items : getToolbarItems({
+		undo,
+		sort,
+		add
+	});
+	return buttons.map(prepareItem);
+});
+</script>
+
+<div class="wx-root">
+	<Toolbar items={finalItems} />
+</div>
+
+<style>
+	.wx-root {
+		display: contents;
+	}
+
+	/* FIXME: separator styles are broken somehow */
+	.wx-root :global(.wx-toolbar > div.wx-separator) {
+		min-height: auto;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import { Toolbar } from "@svar-ui/svelte-toolbar";
+import type { KanbanInstanceApi } from "../types.js";
+type Props = {
+    api?: KanbanInstanceApi | null;
+    items?: any[];
+    add?: boolean;
+    undo?: boolean;
+    sort?: boolean;
+};
+declare const Toolbar: import("svelte").Component<Props, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

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

@@ -0,0 +1,24 @@
+import type { TPosition } from "@svar-ui/lib-dom";
+import type { CardID, KanbanCard } from "@svar-ui/kanban-store";
+export type CardPopupInfo = {
+    cardId: CardID;
+    element: HTMLElement;
+};
+export declare function useCardOverlay(getCard: (id: CardID) => KanbanCard | undefined, popupAt?: TPosition): {
+    readonly tooltipState: {
+        card: KanbanCard;
+    } | null;
+    readonly mousePos: {
+        x: number;
+        y: number;
+    };
+    readonly cardPopupState: {
+        card: KanbanCard;
+        element: HTMLElement;
+        at: TPosition;
+    } | null;
+    handleTooltipMove: (e: MouseEvent) => void;
+    handleTooltipLeave: () => void;
+    handleCardPopup: (info: CardPopupInfo | null) => void;
+    hideCardPopup: () => void;
+};

package/dist/components/useCardOverlay.svelte.js

@@ -0,0 +1,60 @@
+import { getID, locate } from "@svar-ui/lib-dom";
+export function useCardOverlay(getCard, popupAt = "right-start") {
+    let _tooltipTarget = null;
+    let tooltipState = $state(null);
+    let mousePos = $state({ x: 0, y: 0 });
+    let cardPopupState = $state(null);
+    function handleTooltipMove(e) {
+        mousePos = { x: e.clientX, y: e.clientY };
+        if (cardPopupState || !e.target)
+            return;
+        const el = locate(e.target) ?? null;
+        if (el === _tooltipTarget)
+            return;
+        _tooltipTarget = el;
+        if (!el) {
+            tooltipState = null;
+            return;
+        }
+        const card = getCard(getID(el));
+        tooltipState = card ? { card } : null;
+    }
+    function handleTooltipLeave() {
+        _tooltipTarget = null;
+        tooltipState = null;
+    }
+    function handleCardPopup(info) {
+        tooltipState = null;
+        _tooltipTarget = null;
+        if (!info) {
+            cardPopupState = null;
+            return;
+        }
+        const card = getCard(info.cardId);
+        if (card) {
+            cardPopupState = {
+                card,
+                element: info.element,
+                at: popupAt,
+            };
+        }
+    }
+    function hideCardPopup() {
+        cardPopupState = null;
+    }
+    return {
+        get tooltipState() {
+            return tooltipState;
+        },
+        get mousePos() {
+            return mousePos;
+        },
+        get cardPopupState() {
+            return cardPopupState;
+        },
+        handleTooltipMove,
+        handleTooltipLeave,
+        handleCardPopup,
+        hideCardPopup,
+    };
+}

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

@@ -0,0 +1,22 @@
+import type { CardID, ColumnID } from "@svar-ui/kanban-store";
+export type DndTarget = {
+    column: ColumnID;
+    beforeId: CardID | null;
+};
+export declare class DndState {
+    active: boolean;
+    cardId: CardID | null;
+    sourceColumn: ColumnID | null;
+    width: number;
+    height: number;
+    pointer: {
+        x: number;
+        y: number;
+    };
+    offset: {
+        x: number;
+        y: number;
+    };
+    target: DndTarget | null;
+    reset(): void;
+}

package/dist/components/useDrag.svelte.js

@@ -0,0 +1,16 @@
+export class DndState {
+    active = $state(false);
+    cardId = $state(null);
+    sourceColumn = $state(null);
+    width = $state(0);
+    height = $state(0);
+    pointer = $state({ x: 0, y: 0 });
+    offset = $state({ x: 0, y: 0 });
+    target = $state(null);
+    reset() {
+        this.active = false;
+        this.cardId = null;
+        this.sourceColumn = null;
+        this.target = null;
+    }
+}

package/dist/context.d.ts

@@ -0,0 +1,3 @@
+export declare const SCROLL_CONTAINER_CONTEXT: unique symbol;
+export declare const KANBAN_API_CONTEXT: unique symbol;
+export declare const DND_CONTEXT: unique symbol;

package/dist/context.js

@@ -0,0 +1,3 @@
+export const SCROLL_CONTAINER_CONTEXT = Symbol("wx/kanban-scroll-container");
+export const KANBAN_API_CONTEXT = Symbol("kanban-api");
+export const DND_CONTEXT = Symbol("wx/kanban-dnd");

package/dist/defaults.d.ts

@@ -0,0 +1,8 @@
+import type { CardShape, EditorShape } from "./types.js";
+export declare function getCardShape(): CardShape;
+export declare function getPriorityOptions(): {
+    id: number;
+    label: string;
+    css: string;
+}[];
+export declare function getEditorItems(shape?: EditorShape | CardShape): any[];