cardPopup

Custom popup component rendered on card click instead of the sidebar editor. Clicking or pressing Enter/Space on a card opens this component in an anchored popup.

Usage

cardPopup?: Component;

The component receives two props:

Prop	Type	Description
card	KanbanCard	The card object that was clicked
close	() => void	Callback that dismisses the popup

When set, all card clicks and keyboard activations open the popup. The sidebar Editor only opens through programmatic api.exec("select-card", { id }) calls or other UI paths (e.g., the card context menu).

Positioned at "right-start" relative to the clicked card. Dismissed by outside click or Escape. Only one popup is open at a time.

Example

<script setup>
  import { Kanban } from "@svar-ui/vue-kanban";
  import CardPreview from "./CardPreview.vue";

  const columns = [
    { id: "new", label: "New" },
    { id: "in-progress", label: "In Progress" },
  ];
  const cards = [
    { id: 1, label: "Task A", column: "new" },
    { id: 2, label: "Task B", column: "in-progress" },
  ];
</script>

<template>
  <Kanban :cards="cards" :columns="columns" :cardPopup="CardPreview" />
</template>

The CardPreview component:

<script setup>
  const props = defineProps({ card: {}, close: { type: Function } });
</script>

<template>
  <div class="preview">
    <h4>{{ card.label }}</h4>
    <button :onclick="close">Close</button>
  </div>
</template>

Combining the popup with the sidebar editor - dispatch select-card and call close from inside the popup:

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

  const api = ref();
</script>

<template>
  <Kanban
    :cards="cards"
    :columns="columns"
    :cardPopup="CardPreview"
    :init="a => (api = a)"
  />
  <Editor v-if="api" :api="api" />
</template>

Related

• Card popup guide - setup, component contract, and editor coexistence
• tooltip - passive hover tooltip (non-interactive)
• select-card - programmatic editor opening from within the popup
• Editor - the sidebar/modal editor the popup can coexist with