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-uisvelte-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	Svelte 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>
  import { Kanban } from "@svar-uisvelte-kanban";
  import { ExportPopup } from "@svar-uisvelte-export-popup";

  let api = $state();
  let anchor = $state();
  let open = $state(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.exec("export-data", { url, ...request });
    open = false;
  }
</script>

<button bind:this={anchor} onclick={() => (open = true)}>Export</button>

<Kanban bind:this={api} {cards} {columns} />

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

Adding a shallow custom tab:

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

Related

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