Skip to main content

getEditorItems

Builds the default editor field array from a CardShape (or EditorShape). The result matches the sections visible on the card, so the editor form stays in sync with what users see on the board.

Usage​

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

getEditorItems(shape?: EditorShape | CardShape): EditorItem[];

The returned array always starts with label (text input, required). The remaining fields are appended based on the shape:

  • description - textarea
  • priority - richselect; options come from shape.priority.data or fall back to getPriorityOptions()
  • progress - slider, 0 to 1, step 0.1
  • deadline - datepicker, clearable
  • tags - multicombo; included only when shape.tags.data is provided
  • users - multicombo; included only when shape.users.data is provided

When called without arguments, the default shape is used (getCardShape()), which enables priority, progress, description, deadline, and tags.

Example​

Mirror the card shape in the editor:

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

  const card = {
    ...getCardShape(),
    users: { data: [{ id: 1, label: "Alex" }, { id: 2, label: "Sam" }] },
    menu: true,
  };

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

<template>
  <Kanban :cards="cards" :columns="columns" :card="card" ref="api" />
  <Editor :api="api" :items="getEditorItems(card)" />
</template>

Pluck a single default field and customize it:

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

const priorityItem = getEditorItems().find(it => it.key === "priority");

const items = [
	{ comp: "text", key: "label", label: "Title", required: true },
	{ ...priorityItem, column: "right", required: true },
];