@svar-ui/svelte-kanban 2.6.0

package/dist/defaults.js

@@ -0,0 +1,85 @@
+export function getCardShape() {
+    return {
+        priority: true,
+        progress: true,
+        description: true,
+        deadline: true,
+        tags: true,
+    };
+}
+export function getPriorityOptions() {
+    return [
+        { id: 1, label: "Low", css: "wx-card-priority-low" },
+        { id: 2, label: "Medium", css: "wx-card-priority-medium" },
+        { id: 3, label: "High", css: "wx-card-priority-high" },
+    ];
+}
+function configOf(shape) {
+    return typeof shape === "object" && shape !== null ? shape : undefined;
+}
+export function getEditorItems(shape) {
+    const s = shape ?? {
+        description: true,
+        priority: true,
+        progress: true,
+        deadline: true,
+        tags: false,
+        users: false,
+    };
+    const items = [
+        { comp: "text", key: "label", label: "Title", required: true },
+    ];
+    if (s.description) {
+        items.push({
+            comp: "textarea",
+            key: "description",
+            label: "Description",
+        });
+    }
+    if (s.priority) {
+        const priorityData = configOf(s.priority)?.data;
+        items.push({
+            comp: "richselect",
+            key: "priority",
+            label: "Priority",
+            options: priorityData ?? getPriorityOptions(),
+        });
+    }
+    if (s.progress) {
+        items.push({
+            comp: "slider",
+            key: "progress",
+            label: "Progress",
+            min: 0,
+            max: 1,
+            step: 0.1,
+        });
+    }
+    if (s.deadline) {
+        items.push({
+            comp: "datepicker",
+            key: "deadline",
+            label: "Deadline",
+            clear: true,
+        });
+    }
+    const tagsData = configOf(s.tags)?.data;
+    if (tagsData) {
+        items.push({
+            comp: "multicombo",
+            key: "tags",
+            label: "Tags",
+            options: tagsData,
+        });
+    }
+    const usersData = configOf(s.users)?.data;
+    if (usersData) {
+        items.push({
+            comp: "multicombo",
+            key: "users",
+            label: "Users",
+            options: usersData,
+        });
+    }
+    return items;
+}

package/dist/directives/dblclick.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnAccessor, ColumnID, KanbanCard } from "@svar-ui/kanban-store";
+import type { KanbanContextApi } from "../types.js";
+export type DblClickAddCardParams = {
+    store: KanbanContextApi;
+    column: ColumnID;
+    columnAccessor: ColumnAccessor;
+    readonly?: boolean;
+};
+export declare function dblclick(node: HTMLElement, initial: DblClickAddCardParams): {
+    update(next: DblClickAddCardParams): void;
+    destroy(): void;
+};
+export declare function createColumnCard(card: KanbanCard, accessor: ColumnAccessor, column: ColumnID): KanbanCard;

package/dist/directives/dblclick.js

@@ -0,0 +1,26 @@
+export function dblclick(node, initial) {
+    let params = initial;
+    function onDblClick(e) {
+        if (params.readonly)
+            return;
+        if (e.target !== node)
+            return;
+        const base = { label: "New card" };
+        const card = createColumnCard(base, params.columnAccessor, params.column);
+        void params.store.exec("add-card", { card });
+    }
+    node.addEventListener("dblclick", onDblClick);
+    return {
+        update(next) {
+            params = next;
+        },
+        destroy() {
+            node.removeEventListener("dblclick", onDblClick);
+        },
+    };
+}
+export function createColumnCard(card, accessor, column) {
+    return typeof accessor === "string"
+        ? { ...card, [accessor]: column }
+        : accessor.set(card, column);
+}

package/dist/directives/drag.d.ts

@@ -0,0 +1,11 @@
+import type { KanbanContextApi } from "../types.js";
+import type { DndState } from "../components/useDrag.svelte.js";
+export type CardDragParams = {
+    dnd: DndState | undefined;
+    store: KanbanContextApi;
+    readonly?: boolean;
+};
+export declare function cardDrag(node: HTMLElement, initial: CardDragParams): {
+    update(next: CardDragParams): void;
+    destroy(): void;
+};

package/dist/directives/drag.js

@@ -0,0 +1,183 @@
+import { getID } from "@svar-ui/lib-dom";
+const DRAG_THRESHOLD_PX = 4;
+export function cardDrag(node, initial) {
+    let params = initial;
+    let startX = 0;
+    let startY = 0;
+    let pending = false;
+    let started = false;
+    let active = null;
+    function onPointerDown(e) {
+        if (e.button !== 0 || params.readonly || !params.dnd || !params.store)
+            return;
+        const target = e.target;
+        const cardEl = target
+            ? target.closest("[data-kanban-card-id]")
+            : null;
+        if (!cardEl || !node.contains(cardEl))
+            return;
+        const columnEl = cardEl.closest("[data-kanban-column-cards]");
+        if (!columnEl)
+            return;
+        const id = getID(cardEl, "data-kanban-card-id");
+        const columnId = getID(columnEl, "data-kanban-column-cards");
+        if (id == null || columnId == null)
+            return;
+        const { viewData } = params.store.getState();
+        const column = viewData.columns.find((c) => c.id === columnId);
+        const cardRec = column?.cards.find((c) => c.id === id);
+        if (!column || !cardRec || cardRec.id == null)
+            return;
+        active = {
+            dnd: params.dnd,
+            store: params.store,
+            id: cardRec.id,
+            column: column.id,
+            cardEl,
+        };
+        pending = true;
+        started = false;
+        startX = e.clientX;
+        startY = e.clientY;
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", onPointerUp);
+        window.addEventListener("keydown", onKeyDown);
+    }
+    function onPointerMove(e) {
+        if (!pending || !active)
+            return;
+        if (params.readonly) {
+            cancelActiveDrag();
+            return;
+        }
+        if (!started) {
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+            if (dx * dx + dy * dy < DRAG_THRESHOLD_PX * DRAG_THRESHOLD_PX)
+                return;
+            beginDrag(e, active);
+        }
+        active.dnd.pointer = { x: e.clientX, y: e.clientY };
+        updateTarget(e.clientX, e.clientY, active);
+    }
+    function onPointerUp() {
+        teardownListeners();
+        if (started && active) {
+            commitDrop(active);
+            active.dnd.reset();
+            document.body.style.userSelect = "";
+            suppressNextClick();
+        }
+        pending = false;
+        started = false;
+        active = null;
+    }
+    function onKeyDown(e) {
+        if (e.key !== "Escape" || !started || !active)
+            return;
+        cancelActiveDrag();
+    }
+    function beginDrag(e, a) {
+        const rect = a.cardEl.getBoundingClientRect();
+        a.dnd.width = rect.width;
+        a.dnd.height = rect.height;
+        a.dnd.offset = { x: startX - rect.left, y: startY - rect.top };
+        a.dnd.pointer = { x: e.clientX, y: e.clientY };
+        a.dnd.cardId = a.id;
+        a.dnd.sourceColumn = a.column;
+        a.dnd.target = { column: a.column, beforeId: null };
+        a.dnd.active = true;
+        document.body.style.userSelect = "none";
+        started = true;
+    }
+    function teardownListeners() {
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("pointerup", onPointerUp);
+        window.removeEventListener("keydown", onKeyDown);
+    }
+    function cancelActiveDrag() {
+        teardownListeners();
+        if (started && active) {
+            active.dnd.reset();
+            document.body.style.userSelect = "";
+        }
+        pending = false;
+        started = false;
+        active = null;
+    }
+    node.addEventListener("pointerdown", onPointerDown);
+    return {
+        update(next) {
+            params = next;
+            if (params.readonly && (pending || started))
+                cancelActiveDrag();
+        },
+        destroy() {
+            node.removeEventListener("pointerdown", onPointerDown);
+            cancelActiveDrag();
+        },
+    };
+}
+function updateTarget(x, y, a) {
+    const el = document.elementFromPoint(x, y);
+    const columnEl = el
+        ? el.closest("[data-kanban-column-cards]")
+        : null;
+    if (!columnEl) {
+        // keep the last known target so the placeholder stays visible when the
+        // pointer briefly leaves a column
+        return;
+    }
+    const columnId = getID(columnEl, "data-kanban-column-cards");
+    if (columnId == null)
+        return;
+    const viewData = a.store.getState().viewData;
+    const column = viewData.columns.find((c) => c.id === columnId);
+    if (!column)
+        return;
+    const cardEls = Array.from(columnEl.querySelectorAll("[data-kanban-card-id]")).filter(n => getID(n, "data-kanban-card-id") !== a.id);
+    let beforeId = null;
+    for (const cardEl of cardEls) {
+        const rect = cardEl.getBoundingClientRect();
+        if (y < rect.top + rect.height / 2) {
+            beforeId = resolveRenderedCardId(column, getID(cardEl, "data-kanban-card-id"));
+            break;
+        }
+    }
+    if (beforeId == null) {
+        beforeId = resolveRenderedCardId(column, getID(columnEl, "data-kanban-after-rendered-before-id"));
+    }
+    const next = { column: column.id, beforeId };
+    const prev = a.dnd.target;
+    if (!prev || prev.column !== next.column || prev.beforeId !== next.beforeId) {
+        a.dnd.target = next;
+    }
+}
+function resolveRenderedCardId(column, id) {
+    if (id == null)
+        return null;
+    return column.cards.find(card => card.id === id)?.id ?? null;
+}
+function commitDrop(a) {
+    const target = a.dnd.target;
+    if (!target)
+        return;
+    const payload = {
+        id: a.id,
+        column: target.column,
+    };
+    if (target.beforeId != null)
+        payload.before = target.beforeId;
+    void a.store.exec("move-card", payload);
+}
+function suppressNextClick() {
+    const handler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        window.removeEventListener("click", handler, true);
+    };
+    window.addEventListener("click", handler, true);
+    // if no click follows (pointerup without a click event), drop the listener
+    // on the next tick so it doesn't swallow a later unrelated click.
+    setTimeout(() => window.removeEventListener("click", handler, true), 0);
+}

package/dist/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="svelte" />
+declare module "@svar-ui/kanban-locales";
+declare module "@svar-ui/core-locales";
+
+declare module "*.svelte" {
+	import type { Component } from "svelte";
+	const component: Component<any>;
+	export default component;
+}

package/dist/export/Card.svelte

@@ -0,0 +1,5 @@
+<script>
+	const { card } = $props();
+</script>
+
+{@html card.$html}

package/dist/export/Card.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Card;
+type Card = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Card: import("svelte").Component<{
+    card: any;
+}, {}, "">;
+type $$ComponentProps = {
+    card: any;
+};

package/dist/export/Kanban.svelte

@@ -0,0 +1,30 @@
+<script>
+	import Willow from "../themes/Willow.svelte";
+	import WillowDark from "../themes/WillowDark.svelte";
+	import Print from "../themes/Print.svelte";
+	import PrintBW from "../themes/PrintBW.svelte";
+	import Kanban from "../components/Kanban.svelte";
+	import Card from "./Card.svelte";
+
+	const { skin, config = {}, htmlMode } = $props();
+	const cardContent = $derived(htmlMode ? Card : undefined);
+
+</script>
+
+{#if skin === "willow-dark" || skin === "dark"}
+	<WillowDark>
+		<Kanban {...config} {cardContent} />
+	</WillowDark>
+{:else if skin === "print"}
+	<Print>
+		<Kanban {...config} {cardContent} />
+	</Print>
+{:else if skin === "bw"}
+	<PrintBW>
+		<Kanban {...config} {cardContent} />
+	</PrintBW>
+{:else}
+	<Willow>
+		<Kanban {...config} {cardContent} />
+	</Willow>
+{/if}

package/dist/export/Kanban.svelte.d.ts

@@ -0,0 +1,16 @@
+export default Kanban;
+type Kanban = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Kanban: import("svelte").Component<{
+    skin: any;
+    config?: Record<string, any>;
+    htmlMode: any;
+}, {}, "">;
+import Kanban from "../components/Kanban.svelte";
+type $$ComponentProps = {
+    skin: any;
+    config?: Record<string, any>;
+    htmlMode: any;
+};

package/dist/export.d.ts

@@ -0,0 +1,3 @@
+import type { ExportConfig } from "@svar-ui/kanban-store";
+declare function init(target: string, config: ExportConfig, skin: string, htmlMode: boolean): void;
+export { init };

package/dist/export.js

@@ -0,0 +1,15 @@
+import { mount } from "svelte";
+import Export from "./export/Kanban.svelte";
+function init(target, config, skin, htmlMode) {
+    mount(Export, {
+        target: target
+            ? document.querySelector(target)
+            : document.body,
+        props: {
+            config,
+            skin,
+            htmlMode,
+        },
+    });
+}
+export { init };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+declare const version: string;
+import Kanban from "./components/Kanban.svelte";
+import Editor from "./components/Editor.svelte";
+import ContextMenu from "./components/ContextMenu.svelte";
+import Toolbar from "./components/Toolbar.svelte";
+import Willow from "./themes/Willow.svelte";
+import WillowDark from "./themes/WillowDark.svelte";
+import Print from "./themes/Print.svelte";
+import PrintBW from "./themes/PrintBW.svelte";
+export { Kanban, Editor, ContextMenu, Toolbar, Willow, WillowDark, Print, PrintBW, version, };
+export { RestDataProvider } from "@svar-ui/kanban-provider";
+export type { KanbanInstanceApi, KanbanCard, RenderConfig, CardID, ColumnID, CardShape, CardShapeItem, CardShapeUserItem, CardPriorityShape, CardTagsShape, CardUsersShape, CardMenuShape, CardCssFn, ColumnCssFn, } from "./types.js";
+export { getCardShape, getEditorItems, getPriorityOptions, } from "./defaults.js";
+export { getMenuOptions, getToolbarItems, type ToolbarButtonConfig, type StoreActions, type ColumnConfig, } from "@svar-ui/kanban-store";
+export { registerEditorItem } from "@svar-ui/svelte-editor";

package/dist/index.js

@@ -0,0 +1,15 @@
+import pkg from "../package.json" with { type: "json" };
+const version = pkg.version;
+import Kanban from "./components/Kanban.svelte";
+import Editor from "./components/Editor.svelte";
+import ContextMenu from "./components/ContextMenu.svelte";
+import Toolbar from "./components/Toolbar.svelte";
+import Willow from "./themes/Willow.svelte";
+import WillowDark from "./themes/WillowDark.svelte";
+import Print from "./themes/Print.svelte";
+import PrintBW from "./themes/PrintBW.svelte";
+export { Kanban, Editor, ContextMenu, Toolbar, Willow, WillowDark, Print, PrintBW, version, };
+export { RestDataProvider } from "@svar-ui/kanban-provider";
+export { getCardShape, getEditorItems, getPriorityOptions, } from "./defaults.js";
+export { getMenuOptions, getToolbarItems, } from "@svar-ui/kanban-store";
+export { registerEditorItem } from "@svar-ui/svelte-editor";

package/dist/themes/Print.svelte

@@ -0,0 +1,126 @@
+<script>
+	import Willow from "./Willow.svelte";
+	let { fonts = true, children } = $props();
+</script>
+
+{#if children}
+	<Willow {fonts}>
+		<div class="wx-print-theme">
+			{@render children()}
+		</div>
+	</Willow>
+{:else}
+	<Willow {fonts} />
+{/if}
+
+<style>
+	.wx-print-theme {
+		height: 100%;
+		width: 100%;
+		box-sizing: border-box;
+
+		/* surfaces - strip filled backgrounds, keep neutral page */
+		--wx-background: #ffffff;
+		--wx-background-alt: #ffffff;
+		--wx-background-hover: transparent;
+		--wx-color-primary: #1f6bd9;
+		--wx-color-primary-selected: transparent;
+		--wx-color-font-alt: #555d68;
+		--wx-icon-color: #555d68;
+
+		/* kanban surfaces */
+		--wx-kanban-bg: #ffffff;
+		--wx-kanban-column-bg: #ffffff;
+		--wx-kanban-column-over-limit-bg: #ffffff;
+		--wx-kanban-card-bg: #ffffff;
+		--wx-kanban-tag-bg: #ffffff;
+		--wx-kanban-avatar-bg: #ffffff;
+
+		/* kanban progress */
+		--wx-kanban-progress-bg: #ffffff;
+		--wx-kanban-progress-fill: #1f6bd9;
+
+		/* kanban borders and shadows */
+		--wx-kanban-border-color: #b8bec8;
+		--wx-kanban-card-shadow: none;
+		--wx-kanban-card-shadow-hover: none;
+		--wx-kanban-card-shadow-drag: none;
+		--wx-kanban-drop-placeholder-bg: transparent;
+
+		/* priority badges - keep color as text/border only */
+		--wx-kanban-priority-low-bg: #ffffff;
+		--wx-kanban-priority-low-color: #166534;
+		--wx-kanban-priority-medium-bg: #ffffff;
+		--wx-kanban-priority-medium-color: #92400e;
+		--wx-kanban-priority-high-bg: #ffffff;
+		--wx-kanban-priority-high-color: #991b1b;
+	}
+
+	.wx-print-theme :global(.wx-kanban),
+	.wx-print-theme :global(.wx-board),
+	.wx-print-theme :global(.wx-scroll),
+	.wx-print-theme :global(.wx-content) {
+		background: #ffffff;
+	}
+
+	.wx-print-theme :global(.wx-column) {
+		background: #ffffff;
+		border-right: 1px solid #fff;
+		border-bottom: 1px solid #fff;
+	}
+
+	.wx-print-theme :global(.wx-column-header),
+	.wx-print-theme :global(.wx-scroll-board .wx-column-header),
+	.wx-print-theme :global(.wx-over-limit .wx-column-header),
+	.wx-print-theme :global(.wx-over-limit .wx-body) {
+		background: #ffffff;
+	}
+
+	.wx-print-theme :global(.wx-over-limit.wx-column) {
+		border-color: var(--wx-color-danger);
+	}
+
+	.wx-print-theme :global(.wx-card) {
+		background: #ffffff;
+		border: 1px solid var(--wx-kanban-border-color);
+		box-shadow: none;
+		break-inside: avoid;
+	}
+
+	.wx-print-theme :global(.wx-card:hover) {
+		box-shadow: none;
+	}
+
+	.wx-print-theme :global(.wx-cover) {
+		box-shadow: inset 0 0 0 1px var(--wx-kanban-border-color);
+		filter: saturate(0.75) contrast(1.05);
+	}
+
+	.wx-print-theme :global(.wx-priority),
+	.wx-print-theme :global(.wx-tag) {
+		background: #ffffff;
+		border: 1px solid currentColor;
+	}
+
+	.wx-print-theme :global(.wx-progress) {
+		height: 6px;
+		background: #ffffff;
+		border: 1px solid #6e777d;
+	}
+
+	.wx-print-theme :global(.wx-avatar) {
+		background: #ffffff;
+		border: 1px solid var(--wx-kanban-border-color);
+	}
+
+	.wx-print-theme :global(.wx-drop-placeholder) {
+		background: transparent;
+	}
+
+	.wx-print-theme :global(.wx-add:hover),
+	.wx-print-theme :global(.wx-toggle:hover),
+	.wx-print-theme :global(.wx-expand:hover),
+	.wx-print-theme :global(.wx-menu:hover) {
+		background: transparent;
+	}
+</style>

package/dist/themes/Print.svelte.d.ts

@@ -0,0 +1,13 @@
+export default Print;
+type Print = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Print: import("svelte").Component<{
+    fonts?: boolean;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    fonts?: boolean;
+    children: any;
+};