Skip to main content

getMenuOptions

Returns the default card context menu items: Edit card, Duplicate card, and Delete card. Each item carries a built-in id that the ContextMenu wrapper automatically routes to the matching kanban action.

Use this as a starting point when you want to extend the menu with custom items without losing the defaults.

Usage​

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

getMenuOptions(): { id: string; text: string; icon: string }[];

Returns:

[
	{ id: "edit-card", text: "Edit card", icon: "wxi-edit" },
	{ id: "duplicate-card", text: "Duplicate card", icon: "wxi-content-copy" },
	{ id: "delete-card", text: "Delete card", icon: "wxi-delete" },
];

Built-in ids dispatch their store actions automatically even when passed through a custom options array. Custom ids are surfaced only through the onclick callback.

Example​

Use the defaults as-is:

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

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

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

Extend with a custom item:

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

  const api = ref(null);

  const options = [
    ...getMenuOptions(),
    { id: "archive-card", text: "Archive", icon: "wxi-empty" },
  ];

  function onclick({ action }) {
    if (action.id === "archive-card") {
      api.value.exec("update-card", {
        id: action.context.id,
        card: { archived: true },
      });
    }
  }
</script>

<template>
  <ContextMenu :api="api" :options="options" :onclick="onclick">
    <Kanban ref="api" :cards="cards" :columns="columns" />
  </ContextMenu>
</template>