Skip to main content

registerEditorItem

Registers a custom Vue 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-ui/vue-kanban";
import type { Component } from "vue";

registerEditorItem(name: string, component: Component): void;
ParameterTypeDescription
namestringIdentifier used as comp in editor item descriptors
componentComponentVue 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 setup>
    import { Kanban, Editor, registerEditorItem } from "@svar-ui/vue-kanban";
    import Comments from "./Comments.vue";
    import { ref } from "vue";

    registerEditorItem("comments", Comments);

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

    const api = ref(null);
</script>

<template>
    <Kanban ref="api" :cards="cards" :columns="columns" />
    <Editor :api="api" :items="items" />
</template>

Registering multiple components:

<script setup>
    import { registerEditorItem } from "@svar-ui/vue-kanban";
    import Comments from "./Comments.vue";
    import Tasklist from "./Tasklist.vue";

    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>