ExportPopup

Portal-mounted popup that collects export options and emits an ExportRequest on submit. Ships built-in tabs for PDF, PNG, and XLSX; supports custom shallow or rich tabs for additional formats.

Imported from a separate package:

import { ExportPopup } from "@svar-ui/vue-export-popup";

Usage

// Props
title?: string;              // header text (not localized). Default: ""
tabs?: TabSpec[];             // ordered tabs. Default: ["pdf", "png"]
initial?: Partial<ExportRequest>; // one-shot UI seed, read once at mount
excelTimeline?: boolean;      // show Simple/Timeline toggle on xlsx tab. Default: false
sizeOptions?: SizeOption[];   // size dropdown entries
htmlSize?: HtmlSize;          // content measurements for page-count hint
statusText?: string;          // footer info text

// Positioning (forwarded to inner Popup)
parent?: HTMLElement;
at?: TPosition;               // Default: "bottom"
left?: number;                // Default: 0
top?: number;                 // Default: 0

// Events
onexport?: (request: ExportRequest) => void;
onclose?: () => void;

Neither onexport nor onclose closes the popup - the caller unmounts it.

ExportRequest

The object emitted by onexport:

Field	Type	Description
format	string	Tab id: "pdf", "png", "xlsx", or custom
fileName	string	Suggested file name
data	unknown	Arbitrary data from rich tabs
skin	ExportAppearance	"light", "dark", "print", or "bw"
paper	PaperConfig	Page settings (PDF/PNG only)
excel	ExcelConfig	Spreadsheet settings (XLSX only)

PaperConfig

Field	Type	Description
size	SizeSpec	Paper size id or { width, height } in mm
landscape	boolean	Landscape orientation
pageMode	PageMode	"single", "poster", or "booklet"
fitSize	boolean	Fit content to page
scale	number	Scale factor
margins	RequestMargins	{ top, bottom, left, right } in mm
header	string	Page header text (empty string when off)
footer	string	Page footer text (empty string when off)
styles	string[]	Extra CSS URLs passed through

ExcelConfig

Field	Type	Description
visual	boolean	Timeline vs simple mode
columns	ExcelColumn[]	Column definitions with id, label, optional hidden
dateFormat	string	Date serialization format
sheetNames	string[]	Sheet name(s)
indent	"native" | "spaces"	Indent style

TabSpec

Each entry in tabs is either a built-in format string or an extra tab object:

• Built-in - "pdf", "png", or "xlsx"

• Shallow tab (ShallowTab) - settingless placeholder; exports { format, skin } only

  Field	Type	Description
  id	string	Unique tab id
  label	string	Tab label
  title	string	Display-only
  fileName	string	Display-only

• Rich tab (RichTab) - renders a custom component with its own settings

  Field	Type	Description
  id	string	Unique tab id
  label	string	Tab label
  component	Component	Vue component receiving { value, onchange, _ }
  accessor	TabAccessor	Seeds and writes custom data into the request

Example

Open from a button and forward the request to export-data:

<script setup>
  import { Kanban } from "@svar-ui/vue-kanban";
  import { ExportPopup } from "@svar-ui/vue-export-popup";
  import { ref } from "vue";

  const api = ref();
  const anchor = ref();
  const open = ref(false);

  const columns = [
    { id: "new", label: "New" },
    { id: "done", label: "Done" },
  ];
  const cards = [
    { id: 1, label: "Task A", column: "new" },
    { id: 2, label: "Task B", column: "done" },
  ];

  const url = "https://export.example.com";

  function doExport(request) {
    api.value.exec("export-data", { url, ...request });
    open.value = false;
  }
</script>

<template>
  <button ref="anchor" :onclick="() => (open = true)">Export</button>

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

  <ExportPopup
    v-if="open"
    :tabs="['pdf', 'png', 'xlsx']"
    :parent="anchor"
    :initial="{ format: 'pdf', paper: { landscape: true } }"
    :onexport="doExport"
    :onclose="() => (open = false)"
  />
</template>

Adding a shallow custom tab:

<template>
  <ExportPopup
    :tabs="[
      'pdf',
      'png',
      { id: 'mspx', label: 'MS Project XML', fileName: 'project.xml' },
    ]"
    :initial="{ format: 'mspx' }"
    :onexport="doExport"
    :onclose="() => (open = false)"
  />
</template>

Related

• Export and import guide - PDF, PNG, xlsx export workflows
• export-data - the action that receives the popup's export request