@cfasim-ui/docs 0.4.15 → 0.4.16

package/charts/BarChart/BarChart.md

@@ -593,6 +593,7 @@ anchor. `lineColor`, `lineWidth`, and `lineDash` style the line.
 | `csv` | `string \| (() => string)` | No | — |
 | `filename` | `string` | No | — |
 | `downloadLink` | `boolean \| string` | No | — |
+| `downloadButton` | `boolean \| string` | No | — |
 | `annotations` | `readonly ChartAnnotation[]` | No | — |
 | `chartPadding` | `ChartPadding` | No | — |
 | `data` | `BarChartData` | No | — |

package/charts/BarChart/BarChart.vue

@@ -879,6 +879,8 @@ const {
   menuItems,
   downloadLinkText,
   csvHref,
+  downloadButtonText,
+  triggerCsvDownload,
   menuFilename,
   isFullscreen,
 } = useChartFoundation({
@@ -894,6 +896,7 @@ const {
   tooltipClamp: () => props.tooltipClamp,
   filename: () => props.filename,
   downloadLink: () => props.downloadLink,
+  downloadButton: () => props.downloadButton,
   chartPadding: () => props.chartPadding,
   inlineLegendLabels: () => inlineLegendLabels.value,
   hasTooltipSlot: () => hasTooltipSlot.value,
@@ -1320,6 +1323,14 @@ const positionedLegendItems = computed(() => {
     >
       {{ downloadLinkText }}
     </a>
+    <button
+      v-if="downloadButtonText"
+      type="button"
+      class="bar-chart-download-button"
+      @click="triggerCsvDownload"
+    >
+      {{ downloadButtonText }}
+    </button>
   </div>
 </template>
 
@@ -1355,3 +1366,27 @@ const positionedLegendItems = computed(() => {
   flex-shrink: 0;
 }
 </style>
+
+<style>
+.bar-chart-download-button {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 0.5em;
+  padding: 0.5em 1em;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  background: var(--color-bg-0, #fff);
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.bar-chart-download-button:hover {
+  background: var(--color-bg-1, rgba(0, 0, 0, 0.05));
+}
+
+.bar-chart-download-button:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+</style>

package/charts/DataTable/DataTable.md

@@ -157,9 +157,8 @@ the available space equally.
 
 A `⋯` menu appears in the top-right corner of every table with a
 **Download** item that exports the data as CSV. Use `download-menu-link`
-to customize the menu item label, `filename` to control the downloaded
-filename, and `csv` to supply custom CSV content. Pass `:menu="false"`
-to hide the menu entirely.
+to customize the menu item label and `filename` to control the
+downloaded filename. Pass `:menu="false"` to hide the menu entirely.
 
 <ComponentDemo>
   <DataTable
@@ -184,6 +183,115 @@ to hide the menu entirely.
   </template>
 </ComponentDemo>
 
+### Custom CSV download
+
+By default, the Download menu item exports the displayed table as CSV.
+Use the `csv` prop to supply your own content — for example, to include
+ISO dates, extra columns that aren't in the table, or values formatted
+differently from the on-screen rendering. Accepts a raw string or a
+function returning one (called lazily on click).
+
+<ComponentDemo>
+  <DataTable
+    :data="{ day: [0, 1, 2, 3, 4], cases: [1, 21, 56, 101, 141] }"
+    filename="sir-cases"
+    :csv="'date,day,cases\n2024-01-01,0,1\n2024-01-02,1,21\n2024-01-03,2,56\n2024-01-04,3,101\n2024-01-05,4,141'"
+  />
+
+<template #code>
+
+```vue
+<DataTable
+  :data="{
+    day: [0, 1, 2, 3, 4],
+    cases: [1, 21, 56, 101, 141],
+  }"
+  filename="sir-cases"
+  :csv="`date,day,cases
+2024-01-01,0,1
+2024-01-02,1,21
+2024-01-03,2,56
+2024-01-04,3,101
+2024-01-05,4,141`"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Download button
+
+Pass `download-button` to render a visible, labeled button beneath the
+table instead of exposing the download only via the top-right menu. The
+button uses `download-menu-link` as its label, and the menu's Download
+item is suppressed so the action isn't duplicated. The button has the
+class `data-table-download-button` and its styles are unscoped, so it
+can be targeted directly from custom CSS without specificity battles.
+
+<ComponentDemo>
+  <DataTable
+    :data="{ day: [0, 1, 2, 3, 4], cases: [1, 21, 56, 101, 141] }"
+    filename="sir-cases"
+    download-menu-link="Download CSV"
+    download-button
+    :csv="'date,day,cases\n2024-01-01,0,1\n2024-01-02,1,21\n2024-01-03,2,56\n2024-01-04,3,101\n2024-01-05,4,141'"
+  />
+
+<template #code>
+
+```vue
+<DataTable
+  :data="{
+    day: [0, 1, 2, 3, 4],
+    cases: [1, 21, 56, 101, 141],
+  }"
+  filename="sir-cases"
+  download-menu-link="Download CSV"
+  download-button
+  :csv="`date,day,cases
+2024-01-01,0,1
+2024-01-02,1,21
+2024-01-03,2,56
+2024-01-04,3,101
+2024-01-05,4,141`"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Download link
+
+Pass `download-link` to render a plain text link beneath the table
+instead of (or alongside) the menu. It's a real `<a href download>` —
+right-click → Save As works. Pass `true` for the default "Download data
+(CSV)" label, or a string to customize. The menu's Download item is
+suppressed when this is set. If both `download-link` and
+`download-button` are set, the button wins.
+
+<ComponentDemo>
+  <DataTable
+    :data="{ day: [0, 1, 2, 3, 4], cases: [1, 21, 56, 101, 141] }"
+    filename="sir-cases"
+    download-link
+  />
+
+<template #code>
+
+```vue
+<DataTable
+  :data="{
+    day: [0, 1, 2, 3, 4],
+    cases: [1, 21, 56, 101, 141],
+  }"
+  filename="sir-cases"
+  download-link
+/>
+```
+
+  </template>
+</ComponentDemo>
+
 ## Props
 
 | Prop | Type | Required | Default |
@@ -195,6 +303,8 @@ to hide the menu entirely.
 | `csv` | `string \| (() =&gt; string)` | No | — |
 | `filename` | `string` | No | — |
 | `downloadMenuLink` | `string` | No | `"Download"` |
+| `downloadButton` | `boolean` | No | `false` |
+| `downloadLink` | `boolean \| string` | No | — |
 | `fullWidth` | `boolean` | No | `false` |
 
 

package/charts/DataTable/DataTable.vue

@@ -54,14 +54,34 @@ const props = withDefaults(
     /** Filename (without extension) for downloaded CSV files. */
     filename?: string;
     /**
-     * Label for the Download item in the table's top-right menu.
-     * Defaults to "Download".
+     * Label for the Download item in the table's top-right menu, and for
+     * the button rendered when `downloadButton` is true. Defaults to
+     * "Download".
      */
     downloadMenuLink?: string;
+    /**
+     * Render a visible "Download" button beneath the table instead of
+     * exposing the action only via the top-right menu. When enabled, the
+     * menu's Download item is suppressed to avoid duplicate controls.
+     */
+    downloadButton?: boolean;
+    /**
+     * Render a plain text link beneath the table for downloading CSV.
+     * Pass `true` for the default "Download data (CSV)" label, or a
+     * string to customize. When set, the menu's Download item is
+     * suppressed. Mutually exclusive with `downloadButton`; if both are
+     * set, `downloadButton` wins.
+     */
+    downloadLink?: boolean | string;
     /** Stretch the table to fill its container's width. */
     fullWidth?: boolean;
   }>(),
-  { menu: true, fullWidth: false, downloadMenuLink: "Download" },
+  {
+    menu: true,
+    fullWidth: false,
+    downloadMenuLink: "Download",
+    downloadButton: false,
+  },
 );
 
 function columnLabel(name: string): string {
@@ -165,14 +185,30 @@ function toCsv(): string {
   return lines.join("\n");
 }
 
-const menuItems = computed<ChartMenuItem[]>(() => [
-  {
-    label: props.downloadMenuLink,
-    action: () => downloadCsv(toCsv(), menuFilename()),
-  },
-]);
+function triggerDownload() {
+  downloadCsv(toCsv(), menuFilename());
+}
+
+const menuItems = computed<ChartMenuItem[]>(() => {
+  if (props.downloadButton || props.downloadLink) return [];
+  return [{ label: props.downloadMenuLink, action: triggerDownload }];
+});
+
+const downloadLinkText = computed<string | null>(() => {
+  if (props.downloadButton) return null;
+  const v = props.downloadLink;
+  if (!v) return null;
+  return typeof v === "string" ? v : "Download data (CSV)";
+});
+
+const csvHref = computed<string | null>(() => {
+  if (!downloadLinkText.value) return null;
+  return `data:text/csv;charset=utf-8,${encodeURIComponent(toCsv())}`;
+});
 
-const showMenu = computed(() => Boolean(props.menu));
+const showMenu = computed(
+  () => Boolean(props.menu) && menuItems.value.length > 0,
+);
 </script>
 
 <template>
@@ -215,6 +251,22 @@ const showMenu = computed(() => Boolean(props.menu));
         </tbody>
       </table>
     </div>
+    <button
+      v-if="downloadButton"
+      type="button"
+      class="data-table-download-button"
+      @click="triggerDownload"
+    >
+      {{ downloadMenuLink }}
+    </button>
+    <a
+      v-else-if="downloadLinkText"
+      class="data-table-download-link"
+      :href="csvHref!"
+      :download="`${menuFilename()}.csv`"
+    >
+      {{ downloadLinkText }}
+    </a>
   </div>
 </template>
 
@@ -288,3 +340,34 @@ const showMenu = computed(() => Boolean(props.menu));
   padding-right: 2.5em;
 }
 </style>
+
+<style>
+.data-table-download-button {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 0.75em;
+  padding: 0.5em 1em;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  background: var(--color-bg-0, #fff);
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.data-table-download-button:hover {
+  background: var(--color-bg-1, rgba(0, 0, 0, 0.05));
+}
+
+.data-table-download-button:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.data-table-download-link {
+  display: block;
+  text-align: right;
+  font-size: var(--font-size-sm);
+  margin-top: 0.25em;
+}
+</style>

package/charts/LineChart/LineChart.md

@@ -941,7 +941,10 @@ dates, categorical labels, or extra columns that aren't plotted). Use
 `filename` to control the download filename (shared by SVG, PNG and CSV).
 
 Pass `download-link` to also render a plain text link below the chart — set
-it to `true` for the default label, or pass a string to customize it.
+it to `true` for the default label, or pass a string to customize it. Use
+`download-button` instead to render a styled `<button>` (with the class
+`line-chart-download-button`, available for custom CSS) in place of the
+link.
 
 <ComponentDemo>
   <LineChart
@@ -1004,6 +1007,7 @@ until the user clicks Download:
 | `csv` | `string \| (() =&gt; string)` | No | — |
 | `filename` | `string` | No | — |
 | `downloadLink` | `boolean \| string` | No | — |
+| `downloadButton` | `boolean \| string` | No | — |
 | `annotations` | `readonly ChartAnnotation[]` | No | — |
 | `chartPadding` | `ChartPadding` | No | — |
 | `y` | `LineChartData` | No | — |

package/charts/LineChart/LineChart.vue

@@ -929,6 +929,8 @@ const {
   menuItems,
   downloadLinkText,
   csvHref,
+  downloadButtonText,
+  triggerCsvDownload,
   menuFilename,
   isFullscreen,
 } = useChartFoundation({
@@ -944,6 +946,7 @@ const {
   tooltipClamp: () => props.tooltipClamp,
   filename: () => props.filename,
   downloadLink: () => props.downloadLink,
+  downloadButton: () => props.downloadButton,
   chartPadding: () => props.chartPadding,
   inlineLegendLabels: () => inlineLegendLabels.value,
   hasTooltipSlot: () => hasTooltipSlot.value,
@@ -1403,6 +1406,14 @@ const positionedLegendItems = computed(() => {
     >
       {{ downloadLinkText }}
     </a>
+    <button
+      v-if="downloadButtonText"
+      type="button"
+      class="line-chart-download-button"
+      @click="triggerCsvDownload"
+    >
+      {{ downloadButtonText }}
+    </button>
   </div>
 </template>
 
@@ -1438,3 +1449,27 @@ const positionedLegendItems = computed(() => {
   flex-shrink: 0;
 }
 </style>
+
+<style>
+.line-chart-download-button {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 0.5em;
+  padding: 0.5em 1em;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  background: var(--color-bg-0, #fff);
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.line-chart-download-button:hover {
+  background: var(--color-bg-1, rgba(0, 0, 0, 0.05));
+}
+
+.line-chart-download-button:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+</style>

package/charts/_shared/chartProps.ts

@@ -141,6 +141,13 @@ export interface ChartCommonProps {
    * for the default label or a string to customize.
    */
   downloadLink?: boolean | string;
+  /**
+   * Show a `<button>` below the chart to download CSV. Pass `true` for
+   * the default label or a string to customize. When set, the CSV menu
+   * item is suppressed. Mutually exclusive with `downloadLink`; if both
+   * are set, `downloadButton` wins.
+   */
+  downloadButton?: boolean | string;
   /** Annotations rendered as the top layer of the chart. */
   annotations?: readonly ChartAnnotation[];
   /**

package/charts/_shared/useChartFoundation.ts

@@ -25,6 +25,7 @@ export interface ChartFoundationOptions {
   tooltipClamp: () => TooltipClamp | undefined;
   filename: () => string | undefined;
   downloadLink: () => boolean | string | undefined;
+  downloadButton: () => boolean | string | undefined;
   chartPadding: () => ChartPadding | undefined;
   // Chart-specific hooks that the composable can't infer.
   /**
@@ -61,6 +62,8 @@ export function useChartFoundation(opts: ChartFoundationOptions) {
     items: menuItems,
     downloadLinkText,
     csvHref,
+    downloadButtonText,
+    triggerCsvDownload,
     resolvedFilename: menuFilename,
     isFullscreen,
   } = useChartMenu({
@@ -68,6 +71,7 @@ export function useChartFoundation(opts: ChartFoundationOptions) {
     legacyMenuLabel: opts.menu,
     getCsv: opts.getCsv,
     downloadLink: opts.downloadLink,
+    downloadButton: opts.downloadButton,
     fullscreen: true,
   });
 
@@ -130,6 +134,8 @@ export function useChartFoundation(opts: ChartFoundationOptions) {
     menuItems,
     downloadLinkText,
     csvHref,
+    downloadButtonText,
+    triggerCsvDownload,
     menuFilename,
     isFullscreen,
     measuredHeight,

package/charts/_shared/useChartMenu.ts

@@ -11,6 +11,8 @@ export interface ChartMenuOptions {
   getCsv: () => string;
   /** Whether a separate download link is rendered (and the CSV menu item should be hidden). */
   downloadLink: () => boolean | string | undefined;
+  /** Whether a separate download button is rendered (and the CSV menu item should be hidden). */
+  downloadButton?: () => boolean | string | undefined;
   /**
    * When true, prepends an Expand/Collapse menu item that toggles the
    * chart into a full-window view. The consumer is responsible for
@@ -56,7 +58,8 @@ export function useChartMenu(opts: ChartMenuOptions) {
         },
       },
     );
-    if (!opts.downloadLink()) {
+    const buttonOn = opts.downloadButton?.();
+    if (!opts.downloadLink() && !buttonOn) {
       out.push({
         label: "Download CSV",
         action: () => downloadCsv(opts.getCsv(), fname),
@@ -66,21 +69,35 @@ export function useChartMenu(opts: ChartMenuOptions) {
   });
 
   const downloadLinkText = computed<string | null>(() => {
+    if (opts.downloadButton?.()) return null;
     const v = opts.downloadLink();
     if (!v) return null;
     return typeof v === "string" ? v : "Download data (CSV)";
   });
 
   const csvHref = computed<string | null>(() => {
+    if (opts.downloadButton?.()) return null;
     if (!opts.downloadLink()) return null;
     return `data:text/csv;charset=utf-8,${encodeURIComponent(opts.getCsv())}`;
   });
 
+  const downloadButtonText = computed<string | null>(() => {
+    const v = opts.downloadButton?.();
+    if (!v) return null;
+    return typeof v === "string" ? v : "Download data (CSV)";
+  });
+
+  function triggerCsvDownload() {
+    downloadCsv(opts.getCsv(), resolvedFilename());
+  }
+
   return {
     svgRef: svgRef as Ref<SVGSVGElement | null>,
     items,
     downloadLinkText,
     csvHref,
+    downloadButtonText,
+    triggerCsvDownload,
     resolvedFilename,
     isFullscreen: fullscreen?.isFullscreen ?? ref(false),
   };

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.15",
+  "version": "0.4.16",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/docs",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "description": "LLM-friendly component and chart documentation for cfasim-ui",
   "license": "Apache-2.0",
   "repository": {