Skip to main content

registerEditorItem

Registers a custom Svelte component under a string name so it can be referenced via comp in the editor's items array. Call once at module scope.

The kanban editor pre-registers richselect, multicombo, datepicker, and slider.

Usage​

import { registerEditorItem } from "@svar-uisvelte-kanban";
import type { Component } from "svelte";

registerEditorItem(name: string, component: Component): void;
ParameterTypeDescription
namestringIdentifier used as comp in editor item descriptors
componentComponentSvelte component receiving value, onchange, and promoted config fields

The component must call onchange({ value }) on change. Fields in the item's config object are promoted to top-level props.

Example​

Registering a custom comments component:

<script>
    import { Kanban, Editor, registerEditorItem } from "@svar-uisvelte-kanban";
    import Comments from "./Comments.svelte";

    registerEditorItem("comments", Comments);

    const items = [
        { comp: "text", key: "label", label: "Label" },
        { comp: "textarea", key: "description", label: "Description" },
        { comp: "comments", key: "comments", label: "Comments" },
    ];

    let api;
</script>

<Kanban bind:this={api} {cards} {columns} />
<Editor {api} {items} />

Registering multiple components:

<script>
    import { registerEditorItem } from "@svar-uisvelte-kanban";
    import Comments from "./Comments.svelte";
    import Tasklist from "./Tasklist.svelte";

    registerEditorItem("comments", Comments);
    registerEditorItem("tasks", Tasklist);

    const items = [
        { comp: "text", key: "label", label: "Label" },
        { comp: "comments", key: "comments", label: "Comments" },
        { comp: "tasks", key: "tasks", label: "Checklist" },
    ];
</script>
  • Editing guide — comments, checklists, and custom field components
  • Editor — the component that renders registered items
  • getEditorItems — default editor field set