@svar-ui/svelte-kanban 2.6.0

package/dist/components/ContextMenu.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">import { getContext, setContext } from "svelte";
+import { ContextMenu } from "@svar-ui/svelte-menu";
+import { getID, locale } from "@svar-ui/lib-dom";
+import { en } from "@svar-ui/kanban-locales";
+import { en as coreEn } from "@svar-ui/core-locales";
+import { getMenuOptions } from "@svar-ui/kanban-store";
+import { KANBAN_API_CONTEXT } from "../context.js";
+let { options = [], api = null, resolver = null, filter = null, at = "point", children, onclick, css } = $props();
+// when mounted inside <Kanban> the api context is available;
+// when wrapping <Kanban> from the outside, caller must pass `api`
+const ctxApi = getContext(KANBAN_API_CONTEXT);
+function parseId(id) {
+	if (typeof id === "string" && id.startsWith(":")) {
+		const element = document.createElement("div");
+		element.setAttribute("data-id", id);
+		return getID(element);
+	}
+	return typeof id === "string" || typeof id === "number" ? id : null;
+}
+function getCardById(id) {
+	const cardId = parseId(id);
+	if (cardId == null) return undefined;
+	if (api) return api.getCards().find((c) => c.id === cardId);
+	return ctxApi?.getState().cards.getById(cardId);
+}
+function exec(action, payload) {
+	(api ?? ctxApi)?.exec(action, payload);
+}
+let activeId = null;
+let l = getContext("wx-i18n");
+if (!l) {
+	l = locale({
+		...en,
+		...coreEn
+	});
+	setContext("wx-i18n", l);
+}
+const _ = l.getGroup("kanban");
+function applyLocale(opts) {
+	return opts.map((op) => {
+		op = { ...op };
+		if (op.text) op.text = _(op.text);
+		if (op.subtext) op.subtext = _(op.subtext);
+		if (op.data) op.data = applyLocale(op.data);
+		return op;
+	});
+}
+function getOptions() {
+	const base = options.length ? options : getMenuOptions();
+	return applyLocale(base);
+}
+function itemResolver(rawId, ev) {
+	if (rawId == null) return null;
+	const card = getCardById(rawId);
+	if (!card) return null;
+	if (resolver) {
+		const result = resolver(card, ev);
+		if (!result) return null;
+	}
+	activeId = card.id;
+	return card;
+}
+function menuAction(ev) {
+	const action = ev?.action;
+	if (!action) return;
+	const id = typeof activeId === "object" ? activeId.id : activeId;
+	if (action.id === "edit-card") {
+		exec("select-card", { id });
+	} else if (action.id === "duplicate-card") {
+		exec("duplicate-card", { id });
+	} else if (action.id === "delete-card") {
+		exec("delete-card", { id });
+	}
+	onclick?.(ev);
+}
+function filterMenu(item, card) {
+	return filter ? filter(item, card) : true;
+}
+const cOptions = $derived(getOptions());
+let menu = $state();
+export function show(ev, obj) {
+	menu.show(ev, obj);
+}
+</script>
+
+<ContextMenu
+	filter={filterMenu}
+	options={cOptions}
+	dataKey="id"
+	resolver={itemResolver}
+	onclick={menuAction}
+	{css}
+	{at}
+	bind:this={menu}
+/>
+{#if children}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<span oncontextmenu={menu?.show} data-menu-ignore="true">
+		{@render children?.()}
+	</span>
+{/if}
+
+<style>
+	:global(.wx-menu .wx-option.wx-disabled) {
+		pointer-events: none;
+	}
+	:global(.wx-menu .wx-option.wx-disabled .wx-value),
+	:global(.wx-menu .wx-option.wx-disabled .wx-icon) {
+		color: var(--wx-color-font-disabled);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+import { ContextMenu } from "@svar-ui/svelte-menu";
+import type { KanbanCard, KanbanInstanceApi } from "../types.js";
+type Props = {
+    options?: any[];
+    api?: KanbanInstanceApi | null;
+    resolver?: ((card: KanbanCard, ev: MouseEvent) => any) | null;
+    filter?: ((item: any, card: KanbanCard) => boolean) | null;
+    at?: string;
+    children?: Snippet;
+    onclick?: (e: any) => void;
+    css?: string;
+};
+declare const ContextMenu: import("svelte").Component<Props, {
+    show: (ev: any, obj?: any) => void;
+}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/DragGhost.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">import { getContext } from "svelte";
+import CardWrapper from "./CardWrapper.svelte";
+import { KANBAN_API_CONTEXT, DND_CONTEXT } from "../context.js";
+let { root, cardContent, cardShape } = $props();
+const dnd = getContext(DND_CONTEXT);
+const store = getContext(KANBAN_API_CONTEXT);
+const draggedCard = $derived.by(() => {
+	if (!dnd?.active || dnd.cardId == null) return null;
+	return store.getState().cards.getById(dnd.cardId) ?? null;
+});
+const position = $derived.by(() => {
+	if (!dnd) return {
+		x: 0,
+		y: 0
+	};
+	let x = dnd.pointer.x - dnd.offset.x;
+	let y = dnd.pointer.y - dnd.offset.y;
+	if (root && dnd.active) {
+		const rect = root.getBoundingClientRect();
+		x = Math.max(rect.left, Math.min(x, rect.right - dnd.width));
+		y = Math.max(rect.top, Math.min(y, rect.bottom - dnd.height));
+	}
+	return {
+		x,
+		y
+	};
+});
+</script>
+
+{#if dnd?.active && draggedCard}
+	<div
+		class="wx-ghost"
+		style:width="{dnd.width}px"
+		style:height="{dnd.height}px"
+		style:transform="translate({position.x}px, {position.y}px)"
+	>
+		<CardWrapper card={draggedCard} {cardContent} {cardShape} />
+	</div>
+{/if}
+
+<style>
+	.wx-ghost {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 10000;
+		pointer-events: none;
+		box-shadow: var(--wx-kanban-card-shadow-drag);
+		border-radius: var(--wx-border-radius);
+		transform-origin: top left;
+		will-change: transform;
+	}
+
+	.wx-ghost :global(.wx-card) {
+		cursor: grabbing;
+	}
+</style>

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

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

package/dist/components/Editor.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">import { getContext, setContext } from "svelte";
+import { Editor as EditorBase, registerEditorItem } from "@svar-ui/svelte-editor";
+import { DatePicker, MultiCombo, RichSelect, Slider } from "@svar-ui/svelte-core";
+import { locale } from "@svar-ui/lib-dom";
+import { en } from "@svar-ui/kanban-locales";
+import { en as coreEn } from "@svar-ui/core-locales";
+import { getEditorItems } from "../defaults.js";
+registerEditorItem("richselect", RichSelect);
+registerEditorItem("multicombo", MultiCombo);
+registerEditorItem("datepicker", DatePicker);
+registerEditorItem("slider", Slider);
+let { api, values, items = getEditorItems(), placement = "sidebar", layout = "default", focus = true, css = "", topBar, autoSave = true, onchange, onsave, onaction, ...editorProps } = $props();
+// svelte-ignore state_referenced_locally
+void values;
+// svelte-ignore state_referenced_locally
+const { editorData } = api.getReactiveState();
+let l = getContext("wx-i18n");
+if (!l) {
+	l = locale({
+		...en,
+		...coreEn
+	});
+	setContext("wx-i18n", l);
+}
+const _ = l.getGroup("kanban");
+function translate(value) {
+	return typeof value === "string" ? _(value) : value;
+}
+function applyLocale(list) {
+	return list.map((item) => {
+		const next = { ...item };
+		next.label = translate(next.label);
+		if (Array.isArray(next.options)) {
+			next.options = next.options.map((opt) => ({
+				...opt,
+				label: translate(opt.label)
+			}));
+		}
+		return next;
+	});
+}
+const cItems = $derived(applyLocale(items));
+const defaultTopBar = { items: [
+	{
+		comp: "icon",
+		icon: "wxi-close",
+		id: "close"
+	},
+	{ comp: "spacer" },
+	{
+		comp: "button",
+		id: "delete",
+		text: _("Delete"),
+		type: "primary danger",
+		onclick: handleDelete
+	}
+] };
+const editorTopBar = $derived(topBar === undefined ? defaultTopBar : topBar);
+const editorCss = $derived(["wx-editor-kanban", css].filter(Boolean).join(" "));
+function handleSave(ev) {
+	onsave?.(ev);
+	const data = $editorData;
+	if (!data) return;
+	api.exec("update-card", {
+		id: data.id,
+		card: { ...ev.values }
+	});
+}
+function handleChange(ev) {
+	onchange?.(ev);
+}
+function handleDelete() {
+	const data = $editorData;
+	if (!data) return;
+	api.exec("delete-card", { id: data.id });
+	api.exec("select-card", { id: null });
+}
+function handleAction(ev) {
+	onaction?.(ev);
+	const { item } = ev;
+	if (item.id === "close" && !!item.comp) {
+		api.exec("select-card", { id: null });
+	}
+}
+</script>
+
+{#if $editorData}
+	<EditorBase
+		{...editorProps}
+		{focus}
+		items={cItems}
+		topBar={editorTopBar}
+		{autoSave}
+		onchange={handleChange}
+		onaction={handleAction}
+		onsave={handleSave}
+		{placement}
+		{layout}
+		values={$editorData}
+		css={editorCss}
+	/>
+{/if}
+
+<style>
+	:global(.wx-sidearea .wx-editor-kanban) {
+		width: 450px;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import { type ComponentProps } from "svelte";
+import { Editor as EditorBase } from "@svar-ui/svelte-editor";
+type BaseEditorProps = ComponentProps<typeof EditorBase>;
+type EditorProps = Omit<BaseEditorProps, "values"> & {
+    api: any;
+    values?: never;
+};
+declare const Editor: import("svelte").Component<EditorProps, {}, "">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;

package/dist/components/ExportLayout.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">import { getContext } from "svelte";
+import { KANBAN_API_CONTEXT } from "../context.js";
+let { cardCss, columnCss, cardContent: CardContent, cardShape } = $props();
+const store = getContext(KANBAN_API_CONTEXT);
+const viewData = store.getReactiveState().viewData;
+let root = $state();
+$effect(() => {
+	const out = {};
+	if (CardContent) {
+		const c = {};
+		root.querySelectorAll(".wx-ex-cell").forEach((element) => {
+			c[element.dataset.id] = element.innerHTML;
+		});
+		out.cardContent = c;
+	}
+	const cs = {};
+	if (cardCss) {
+		$viewData.columns.forEach((column) => {
+			column.cards.forEach((card) => {
+				cs[card.id.toString()] = cardCss(card, column);
+			});
+		});
+		out.cardCss = cs;
+	}
+	const cls = {};
+	if (columnCss) {
+		$viewData.columns.forEach((column) => {
+			cls[column.id.toString()] = columnCss(column.cards, column);
+		});
+		out.columnCss = cls;
+	}
+	store.exec("export-data", {
+		format: "inner",
+		data: out
+	});
+});
+</script>
+
+<div style="visibility: hidden;position:absolute;" bind:this={root}>
+    {#if CardContent}
+        {#each $viewData.columns as column}
+            {#each column.cards as card}
+                <div class="wx-ex-cell" data-id={card.id} >
+                    <CardContent
+                        {card}
+                        {cardShape}
+                    ></CardContent>
+                </div>
+            {/each}
+        {/each}
+    {/if}
+</div>

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

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

package/dist/components/Kanban.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">import { setContext } from "svelte";
+import { writable } from "svelte/store";
+import { EventBusRouter } from "@svar-ui/lib-state";
+import { KanbanStore } from "@svar-ui/kanban-store";
+import Layout from "./Layout.svelte";
+import ExportLayout from "./ExportLayout.svelte";
+import { KANBAN_API_CONTEXT, DND_CONTEXT } from "../context.js";
+import { DndState } from "./useDrag.svelte.js";
+import { getCardShape } from "../defaults.js";
+// locales
+import { en } from "@svar-ui/kanban-locales";
+import { en as coreEn } from "@svar-ui/core-locales";
+import { Locale } from "@svar-ui/svelte-core";
+let { cards, columns, columnAccessor = "column", filters = new Map(), sort = null, card = getCardShape(), readonly = false, render, dynamicData = false, history = false, cardContent, init, tooltip, cardPopup, cardCss, columnCss, ...restProps } = $props();
+// svelte-ignore state_referenced_locally
+const store = new KanbanStore(writable, { undo: history });
+// define event route
+let firstInRoute = store.in;
+const dash = /-/g;
+let lastInRoute = new EventBusRouter((a, b) => {
+	const name = "on" + a.replace(dash, "");
+	const handler = restProps[name];
+	if (handler) {
+		handler(b);
+	}
+});
+firstInRoute.setNext(lastInRoute);
+export const getState = store.getState.bind(store), getReactiveState = store.getReactive.bind(store), getStores = () => ({ data: store }), getCards = store.getCards.bind(store), exec = store.in.exec.bind(store.in), on = store.in.on.bind(store.in), detach = store.in.detach.bind(store.in), setNext = store.in.setNext.bind(store.in), intercept = store.in.intercept.bind(store.in);
+const api = {
+	getState,
+	getReactiveState,
+	getStores,
+	getCards,
+	setNext,
+	exec,
+	on,
+	detach,
+	intercept
+};
+setContext(KANBAN_API_CONTEXT, {
+	getReactiveState,
+	getState,
+	exec,
+	getBrandmark: store.getBrandmark.bind(store)
+});
+setContext(DND_CONTEXT, new DndState());
+const input = () => ({
+	cards,
+	columns,
+	columnAccessor,
+	filters,
+	sort,
+	dynamicData
+});
+store.init({
+	...input(),
+	renderMode: ""
+});
+// svelte-ignore state_referenced_locally
+init?.(api);
+let firstEffect = true;
+$effect(() => {
+	const data = input();
+	if (firstEffect) {
+		firstEffect = false;
+		return;
+	}
+	store.init(data);
+});
+$effect(() => {
+	store.meta["export-data"] = {
+		card,
+		cardContent,
+		cardCss,
+		columnCss
+	};
+});
+const renderMode = store.getReactive().renderMode;
+</script>
+
+<Locale words={{...coreEn, ...en}} optional={true}>
+	<Layout
+		cardShape={card}
+		{readonly}
+		{render}
+		{cardContent}
+		{tooltip}
+		{cardPopup}
+		{cardCss}
+		{columnCss}
+	/>
+	{#if $renderMode === "export"}
+		<ExportLayout
+			cardShape={card}
+			{cardContent}
+			{cardCss}
+			{columnCss}
+		/>
+	{/if}
+</Locale>

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

@@ -0,0 +1,186 @@
+import type { Component } from "svelte";
+import { KanbanStore } from "@svar-ui/kanban-store";
+import type { KanbanCard, ColumnConfig, ColumnAccessor, SortCriterion, FilterPredicate } from "@svar-ui/kanban-store";
+import type { CardShape, KanbanInstanceApi, RenderConfig, CardCssFn, ColumnCssFn } from "../types.js";
+type Props = {
+    cards: KanbanCard[];
+    columns: ColumnConfig[];
+    columnAccessor?: ColumnAccessor;
+    filters?: Map<string, FilterPredicate>;
+    sort?: SortCriterion;
+    card?: CardShape;
+    readonly?: boolean;
+    render?: RenderConfig;
+    dynamicData?: boolean;
+    history?: boolean;
+    cardContent?: Component<{
+        card: KanbanCard;
+        cardShape: CardShape;
+    }>;
+    init?: (api: KanbanInstanceApi) => void;
+    tooltip?: any;
+    cardPopup?: any;
+    cardCss?: CardCssFn;
+    columnCss?: ColumnCssFn;
+};
+declare const Kanban: Component<Props, {
+    getState: () => import("@svar-ui/kanban-store").State;
+    getReactiveState: () => {
+        renderMode: import("@svar-ui/lib-state").IPublicWritable<string>;
+        cards: import("@svar-ui/lib-state").IPublicWritable<import("@svar-ui/kanban-store").CardsStore>;
+        columns: import("@svar-ui/lib-state").IPublicWritable<ColumnConfig[]>;
+        columnAccessor: import("@svar-ui/lib-state").IPublicWritable<ColumnAccessor>;
+        filters: import("@svar-ui/lib-state").IPublicWritable<Map<string, FilterPredicate>>;
+        sort: import("@svar-ui/lib-state").IPublicWritable<SortCriterion>;
+        editorData: import("@svar-ui/lib-state").IPublicWritable<KanbanCard | null>;
+        dynamicData: import("@svar-ui/lib-state").IPublicWritable<boolean>;
+        columnData: import("@svar-ui/lib-state").IPublicWritable<Map<import("@svar-ui/kanban-store").ColumnID, import("@svar-ui/kanban-store").ColumnDataState>>;
+        history: import("@svar-ui/lib-state").IPublicWritable<import("@svar-ui/kanban-store").HistoryState>;
+        viewData: import("@svar-ui/lib-state").IPublicWritable<{
+            columns: import("@svar-ui/kanban-store").ColumnView[];
+        }>;
+    };
+    getStores: () => {
+        data: KanbanStore;
+    };
+    getCards: () => KanbanCard[];
+    exec: (name: keyof import("@svar-ui/kanban-store").StoreActions, ev: import("@svar-ui/kanban-store").ExportConfig | {
+        card: Partial<KanbanCard>;
+        edit?: boolean;
+        id?: import("@svar-ui/kanban-store").CardID;
+        after?: import("@svar-ui/kanban-store").CardID;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        card: Partial<KanbanCard>;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        column?: import("@svar-ui/kanban-store").ColumnID;
+        before?: import("@svar-ui/kanban-store").CardID | null;
+    } | {
+        id: import("@svar-ui/kanban-store").ColumnID;
+        column: Partial<ColumnConfig>;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        card?: Partial<KanbanCard>;
+        edit?: boolean;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID | null;
+    } | {
+        filter?: FilterPredicate | null;
+        tag?: string;
+    } | {
+        sort?: SortCriterion;
+    } | {
+        id: import("@svar-ui/kanban-store").ColumnID;
+    } | {
+        id?: import("@svar-ui/kanban-store").ColumnID;
+        cards: KanbanCard[];
+    } | Record<string, never>) => Promise<import("@svar-ui/kanban-store").ExportConfig | {
+        card: Partial<KanbanCard>;
+        edit?: boolean;
+        id?: import("@svar-ui/kanban-store").CardID;
+        after?: import("@svar-ui/kanban-store").CardID;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        card: Partial<KanbanCard>;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        column?: import("@svar-ui/kanban-store").ColumnID;
+        before?: import("@svar-ui/kanban-store").CardID | null;
+    } | {
+        id: import("@svar-ui/kanban-store").ColumnID;
+        column: Partial<ColumnConfig>;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        card?: Partial<KanbanCard>;
+        edit?: boolean;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID | null;
+    } | {
+        filter?: FilterPredicate | null;
+        tag?: string;
+    } | {
+        sort?: SortCriterion;
+    } | {
+        id: import("@svar-ui/kanban-store").ColumnID;
+    } | {
+        id?: import("@svar-ui/kanban-store").ColumnID;
+        cards: KanbanCard[];
+    } | Record<string, never>>;
+    on: (name: keyof import("@svar-ui/kanban-store").StoreActions, handler: (v: import("@svar-ui/kanban-store").ExportConfig | {
+        card: Partial<KanbanCard>;
+        edit?: boolean;
+        id?: import("@svar-ui/kanban-store").CardID;
+        after?: import("@svar-ui/kanban-store").CardID;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        card: Partial<KanbanCard>;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        column?: import("@svar-ui/kanban-store").ColumnID;
+        before?: import("@svar-ui/kanban-store").CardID | null;
+    } | {
+        id: import("@svar-ui/kanban-store").ColumnID;
+        column: Partial<ColumnConfig>;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        card?: Partial<KanbanCard>;
+        edit?: boolean;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID | null;
+    } | {
+        filter?: FilterPredicate | null;
+        tag?: string;
+    } | {
+        sort?: SortCriterion;
+    } | {
+        id: import("@svar-ui/kanban-store").ColumnID;
+    } | {
+        id?: import("@svar-ui/kanban-store").ColumnID;
+        cards: KanbanCard[];
+    } | Record<string, never>) => void | boolean | Promise<boolean>, config?: import("@svar-ui/lib-state").IEventConfig) => void;
+    detach: (tag: number | string | symbol) => void;
+    setNext: (next: import("@svar-ui/lib-state").IEventBus<import("@svar-ui/kanban-store").StoreActions>) => import("@svar-ui/lib-state").IEventBus<import("@svar-ui/kanban-store").StoreActions>;
+    intercept: (name: keyof import("@svar-ui/kanban-store").StoreActions, handler: (v: import("@svar-ui/kanban-store").ExportConfig | {
+        card: Partial<KanbanCard>;
+        edit?: boolean;
+        id?: import("@svar-ui/kanban-store").CardID;
+        after?: import("@svar-ui/kanban-store").CardID;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        card: Partial<KanbanCard>;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        column?: import("@svar-ui/kanban-store").ColumnID;
+        before?: import("@svar-ui/kanban-store").CardID | null;
+    } | {
+        id: import("@svar-ui/kanban-store").ColumnID;
+        column: Partial<ColumnConfig>;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+        card?: Partial<KanbanCard>;
+        edit?: boolean;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID;
+    } | {
+        id: import("@svar-ui/kanban-store").CardID | null;
+    } | {
+        filter?: FilterPredicate | null;
+        tag?: string;
+    } | {
+        sort?: SortCriterion;
+    } | {
+        id: import("@svar-ui/kanban-store").ColumnID;
+    } | {
+        id?: import("@svar-ui/kanban-store").ColumnID;
+        cards: KanbanCard[];
+    } | Record<string, never>) => void | boolean | Promise<boolean>, config?: import("@svar-ui/lib-state").IEventConfig) => void;
+}, "">;
+type Kanban = ReturnType<typeof Kanban>;
+export default Kanban;