Skip to main content

Editor

Sidebar or modal form editor for a single kanban card. Mounts when the store's editorData is populated (typically via select-card) and dispatches update-card, delete-card, and select-card back to the store. Pre-registers richselect, multicombo, datepicker, and slider field components.

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

Usage​

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

Props​

PropTypeDefaultDescription
apiKanbanInstanceApi- (required)Kanban instance from ref or init. Drives editorData subscription and action dispatch.
itemsany[]getEditorItems()Editor field descriptors. Each item has comp, key, label, and optional config fields.
placement"inline" | "sidebar" | "modal""sidebar"Where the editor renders.
layout"default" | "columns""default"Single-column or two-column form layout. Use column: "left" | "right" on items to split fields.
topBarboolean | { items: IToolbarItem[] }trueTop bar with close and delete buttons. Pass false to hide or { items } to replace.
bottomBarboolean | { items: IToolbarItem[] }falseBottom action bar. Typically used with autoSave={false} for explicit Save/Cancel buttons.
autoSavebooleantrueWhen true, field changes flush immediately as update-card. When false, changes wait for a Save click.
focusbooleantrueAuto-focus the first input when the editor opens.
cssstringundefinedExtra CSS class merged onto the editor root (always has wx-editor-kanban).
readonlybooleanfalseRender all fields in read-only mode.
activeBatchstring | numberundefinedShow only items whose batch matches. Enables wizard-style forms.
hotkeysfalse | { [key]: handler | boolean }undefinedOpt out of or override default keyboard shortcuts (ctrl+s, escape, delete).
onchange(ev) => voidundefinedFires on every field change before the value is committed. ev: { key, value, update, input? }.
onsave(ev) => voidundefinedFires when the editor commits a save. ev: { changes, values }.
onaction(ev) => voidundefinedFires when a top/bottom bar button is clicked. ev: { item, values, changes }.
onvalidation(ev) => voidundefinedFires when validation rules reject a save. ev: { errors, values }.

Example​

Default sidebar editor with auto-save:

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

Modal editor with a custom field set and explicit save:

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

  const api = ref(null);

  const items = [
    { comp: "text", key: "label", label: "Title", column: "left", required: true },
    { comp: "textarea", key: "description", label: "Description", column: "left" },
    { ...getEditorItems().find(i => i.key === "priority"), column: "right" },
  ];

  const bottomBar = {
    items: [
      { comp: "spacer" },
      { comp: "button", id: "close", text: "Cancel", type: "default" },
      { comp: "button", id: "save", text: "Done", type: "primary" },
    ],
  };

  function handleAction({ item }) {
    if (item.id === "close") api.value.exec("select-card", { id: null });
  }
</script>

<template>
  <Kanban ref="api" :cards="cards" :columns="columns" />
  <Editor
    v-if="api"
    :api="api"
    :items="items"
    :bottomBar="bottomBar"
    :topBar="false"
    :autoSave="false"
    placement="modal"
    layout="columns"
    :onaction="handleAction"
  />
</template>