RestDataProvider

REST data provider that maps the kanban's card actions (add-card, update-card, move-card, delete-card, duplicate-card) to HTTP calls under a configurable URL root. Handles Date parsing on load and ISO-string serialization on send.

Usage

import { RestDataProvider } from "@svar-ui/vue-kanban";

const provider = new RestDataProvider(url: string, config?: object);

Parameter	Type	Description
url	string	API root URL. Endpoints are appended as relative paths.
config	object	Optional config forwarded to the underlying Rest base (e.g. headers).

Wire the provider into the kanban via api.setNext(provider) inside the init callback.

REST endpoints

Action	Method	Endpoint	Notes
add-card	POST	/cards	Local id ignored; backend assigns the id
update-card	PUT	/cards/:id	Debounced 500 ms
move-card	PUT	/cards/:id/move	Full payload including before
delete-card	DELETE	/cards/:id
duplicate-card	POST	/cards/:id/duplicate	Local id ignored; backend assigns the id

Methods

getData(): Promise<KanbanCard[]>

Issues GET {url}/cards and runs parseCards() on the result so deadline strings become Date instances. Returns the parsed cards array.

parseCards(data: KanbanCard[]): KanbanCard[]

Converts deadline strings to Date objects in place. Call manually if you bypass getData() but still receive raw payloads.

formatDate(date: Date): string

Serializes Date values in outgoing JSON. Returns date.toISOString() by default. Override in a subclass to emit a different format (e.g. YYYY-MM-DD).

getHandlers(): ActionMap

Returns the internal action-to-REST mapping. Override in a subclass to add extra action handlers or change routing.

Example

<script setup>
    import { Kanban, Editor, RestDataProvider } from "@svar-ui/vue-kanban";
    import { ref } from "vue";

    const url = "https://api.example.com";
    const provider = new RestDataProvider(url);

    const api = ref(null);
    const cards = ref([]);

    provider.getData().then(data => {
        cards.value = data;
    });

    function init(api) {
        api.setNext(provider);
    }
</script>

<template>
    <Kanban ref="api" :init="init" :cards="cards" :columns="columns" />
    <Editor v-if="api" :api="api" />
</template>

Related

• Working with server - loading, saving, and dynamic data
• setNext - wires the provider into the event bus
• init - callback where the provider is typically attached