nuxt-ui-tools 1.2.0 → 1.3.0

package/dist/runtime/dashboard/components/dashboard-filters.vue

@@ -0,0 +1,96 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isObject } from "#ui-tools/shared/utils/predicate";
+import { useDashboardUi } from "../composables/use-dashboard-ui";
+import { hasDashboardFilterMenu } from "../utils/filters";
+import { resolveDashboardClasses } from "../utils/ui";
+import DashboardFilter from "./dashboard-filter.vue";
+const {
+  dashboard,
+  only,
+  exclude,
+  reset = true,
+  ui
+} = defineProps({
+  dashboard: { type: null, required: true },
+  only: { type: Array, required: false },
+  exclude: { type: Array, required: false },
+  reset: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const { t } = useUiToolsLocale();
+const appUi = useDashboardUi();
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      reset: "inline-flex h-8 flex-none items-center gap-1.5 rounded-[7px] px-2 text-[13px] font-medium whitespace-nowrap text-muted transition-colors outline-none hover:text-default focus-visible:ring-2 focus-visible:ring-primary",
+      root: "flex min-w-0 items-center gap-2 overflow-x-auto [scrollbar-width:none] lg:flex-wrap lg:overflow-visible"
+    },
+    appUi.value.filters,
+    ui
+  )
+);
+const controls = computed(() => {
+  const all = new Map(Object.entries(dashboard.controls));
+  const current = dashboard.view?.current;
+  const view = current ? Reflect.get(dashboard, current) : void 0;
+  if (isFiltersTarget(view)) {
+    for (const [key, control] of Object.entries(view.controls))
+      if (!all.has(key)) all.set(key, control);
+  }
+  return all;
+});
+const filters = computed(() => {
+  const all = controls.value;
+  const keys = only ?? [...all.keys()];
+  return keys.flatMap((key) => {
+    const filter = all.get(key);
+    if (!filter || filter.headless || !filter.enabled || exclude?.includes(key)) return [];
+    return hasDashboardFilterMenu(filter) || filter.changed ? [filter] : [];
+  });
+});
+function resetFilters() {
+  dashboard.resetFilters();
+}
+function isFiltersTarget(value) {
+  return isObject(value) && "controls" in value && "resetFilters" in value;
+}
+</script>
+
+<template>
+  <div
+    :class="classes.root"
+    role="toolbar"
+    :aria-label="t('dashboard.filters.label')"
+    data-dashboard-filters
+  >
+    <slot name="leading" />
+    <template v-for="filter in filters" :key="filter.key">
+      <slot :name="filter.key" :filter>
+        <slot name="filter" :filter>
+          <DashboardFilter :filter>
+            <template v-if="$slots.item" #item="slotProps">
+              <slot name="item" v-bind="slotProps" />
+            </template>
+          </DashboardFilter>
+        </slot>
+      </slot>
+    </template>
+    <slot name="reset" :filtered="dashboard.filtered" :reset="resetFilters">
+      <button
+        v-if="reset && dashboard.filtered"
+        type="button"
+        :class="classes.reset"
+        data-dashboard-filters-reset
+        @click="resetFilters"
+      >
+        <UIcon name="i-lucide-rotate-ccw" class="size-3.5" />
+        {{ t("dashboard.filters.reset") }}
+      </button>
+    </slot>
+    <slot name="trailing" />
+  </div>
+</template>

package/dist/runtime/dashboard/components/dashboard-filters.vue.d.ts

@@ -0,0 +1,49 @@
+import type { DashboardFilterControl, DashboardFilterKeysOf, DashboardFiltersTarget, DashboardFiltersUi, DashboardOption, DashboardOptionValue } from '../types/index.js';
+declare const __VLS_export: <TTarget extends DashboardFiltersTarget>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        dashboard: TTarget;
+        /** Shows these filters only, in this order. */
+        only?: readonly (DashboardFilterKeysOf<TTarget> & string)[];
+        /** Hides these filters. */
+        exclude?: readonly (DashboardFilterKeysOf<TTarget> & string)[];
+        /** Shows "Reset" once a filter differs from its default. Defaults to `true`. */
+        reset?: boolean;
+        ui?: DashboardFiltersUi;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: { [TKey in DashboardFilterKeysOf<TTarget> & string]?: ((props: {
+        filter: DashboardFilterControl;
+    }) => unknown) | undefined; } & {
+        /** Renders every filter that has no slot of its own. */
+        filter?: (props: {
+            filter: DashboardFilterControl;
+        }) => unknown;
+        /** Content of the menu rows of every pill. */
+        item?: (props: {
+            item: DashboardOption<DashboardOptionValue>;
+            selected: boolean;
+            disabled: boolean;
+            filter: DashboardFilterControl;
+        }) => unknown;
+        /** Replaces the "Reset" button. */
+        reset?: (props: {
+            filtered: boolean;
+            reset: () => void;
+        }) => unknown;
+        leading?: () => unknown;
+        trailing?: () => unknown;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/dashboard/components/dashboard-funnel.vue

@@ -29,17 +29,17 @@ const {
   title: { type: [String, Number, Function], required: false },
   subtitle: { type: [String, Number, Function], required: false },
   size: { type: String, required: false },
-  rows: { type: String, required: false },
   card: { type: Boolean, required: false },
   activation: { type: String, required: false },
   empty: { type: Object, required: false },
   menu: { type: [Boolean, Array, Function], required: false },
   actions: { type: Array, required: false },
+  filters: { type: Array, required: false },
   freshness: { type: Boolean, required: false },
   source: { type: Object, required: true },
   label: { type: Function, required: true },
   value: { type: Function, required: true },
-  format: { type: Function, required: false },
+  format: { type: [String, Function], required: false, skipCheck: true },
   colors: { type: Array, required: false },
   onSelect: { type: Function, required: false },
   ui: { type: Object, required: false }
@@ -75,11 +75,11 @@ const steps = computed(() => {
       index,
       label: resolveTextValue(label(row)),
       note: previous === void 0 ? t("dashboard.funnel.base") : t("dashboard.funnel.fromPrevious", {
-        value: ratio === null ? "\u2014" : formats.percent.value(ratio)
+        value: ratio === null ? "\u2014" : formats.percent(ratio)
       }),
       ratio,
       row,
-      value: (format ?? formats.number.value)(amount),
+      value: formats.resolve(format)(amount),
       width: first > 0 ? `${amount / first * 100}%` : "0%"
     };
   });
@@ -96,7 +96,7 @@ function tabulate() {
       toDashboardCell(step.amount, step.value),
       toDashboardCell(
         step.ratio === null ? null : Math.round(step.ratio * 10) / 10,
-        step.ratio === null ? "" : formats.percent.value(step.ratio)
+        step.ratio === null ? "" : formats.percent(step.ratio)
       )
     ])
   };

package/dist/runtime/dashboard/components/dashboard-gauge.vue

@@ -32,19 +32,19 @@ const {
   title: { type: [String, Number, Function], required: false },
   subtitle: { type: [String, Number, Function], required: false },
   size: { type: String, required: false },
-  rows: { type: String, required: false },
   card: { type: Boolean, required: false },
   activation: { type: String, required: false },
   empty: { type: Object, required: false },
   menu: { type: [Boolean, Array, Function], required: false },
   actions: { type: Array, required: false },
+  filters: { type: Array, required: false },
   freshness: { type: Boolean, required: false },
   source: { type: Object, required: true },
   value: { type: Function, required: true },
   min: { type: [Number, Function], required: false },
   max: { type: [Number, Function], required: false },
   target: { type: Function, required: false },
-  format: { type: Function, required: false },
+  format: { type: [String, Function], required: false, skipCheck: true },
   caption: { type: [String, Number, Function], required: false },
   color: { type: [String, Function], required: false },
   variant: { type: String, required: false },
@@ -78,7 +78,7 @@ const gauge = computed(() => {
   const span = high - low;
   const share = span > 0 ? (amount - low) / span : 0;
   const goal = target?.(data);
-  const formatValue = format ?? formats.number.value;
+  const formatValue = formats.resolve(format);
   const text = caption === void 0 || isString(caption) || isNumber(caption) ? caption : caption(data);
   return {
     caption: resolveTextValue(text),

package/dist/runtime/dashboard/components/dashboard-grid.d.vue.ts

@@ -4,13 +4,19 @@ type __VLS_Props = {
     columns?: string;
     /**
      * `cards`: separate cards with a gap. `panels`: one bordered surface whose cells are separated by
-     * 1px rules (rows should be full for the rules to read as a grid).
+     * 1px rules.
      */
     variant?: 'cards' | 'panels';
     /** Gap between cards, any CSS length. Defaults to `1rem`; ignored by `panels`. */
     gap?: string;
     /** Grid span when this grid is nested in another grid, responsive. */
     size?: string;
+    /**
+     * A row that is not full (a block hidden because its source is disabled, or a short last row)
+     * shares its free width between its cells, in proportion to their span. Defaults to `true`;
+     * `false` keeps every cell at its span.
+     */
+    fill?: boolean;
     /** Card menu of every block inside that does not set its own `menu`. */
     menu?: DashboardMenu;
     /** `freshness` of every block inside that does not set its own. */
@@ -22,11 +28,12 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    fill: boolean;
+    columns: string;
     variant: "cards" | "panels";
     menu: DashboardMenu;
-    columns: string;
-    freshness: boolean;
     gap: string;
+    freshness: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/dashboard/components/dashboard-grid.vue

@@ -2,37 +2,52 @@
 import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
 import { useResponsiveValue } from "#ui-tools/shared/composables/use-responsive-value";
-import { provideDashboardGrid, useDashboardUi } from "../composables/use-dashboard-ui";
+import {
+  provideDashboardGrid,
+  useDashboardGridContext,
+  useDashboardUi
+} from "../composables/use-dashboard-ui";
+import { parseDashboardSpan, resolveDashboardCellStyle } from "../utils/grid";
 const props = defineProps({
   columns: { type: String, required: false, default: "12" },
   variant: { type: String, required: false, default: "cards" },
   gap: { type: String, required: false, default: "1rem" },
   size: { type: String, required: false },
+  fill: { type: Boolean, required: false, default: true },
   menu: { type: [Boolean, Array, Function], required: false, default: void 0 },
   freshness: { type: Boolean, required: false, default: void 0 },
   ui: { type: Object, required: false }
 });
+const parent = useDashboardGridContext();
+const resolvedColumns = useResponsiveValue(() => props.columns, "integer");
+const trackCount = computed(() => parseDashboardSpan(resolvedColumns.value) ?? 12);
+const gap = computed(() => props.variant === "panels" ? "1px" : props.gap);
 provideDashboardGrid({
+  columns: () => trackCount.value,
+  fill: () => props.fill,
   freshness: () => props.freshness,
+  gap: () => gap.value,
   menu: () => props.menu,
   panels: () => props.variant === "panels"
 });
 const appUi = useDashboardUi();
-const columns = useResponsiveValue(() => props.columns, "grid-cols");
-const span = useResponsiveValue(() => props.size ?? "", "col");
+const span = useResponsiveValue(() => props.size ?? "", "integer");
 const style = computed(
   () => [
-    "display: grid",
-    columns.value,
-    props.variant === "cards" && `gap: ${props.gap}`,
-    span.value ?? "grid-column: 1 / -1"
+    `gap: ${gap.value}`,
+    parent && resolveDashboardCellStyle({
+      columns: parent.columns.value,
+      fill: parent.fill.value,
+      gap: parent.gap.value,
+      span: parseDashboardSpan(span.value)
+    })
   ].filter(Boolean).join("; ")
 );
 const classes = computed(
   () => twMerge(
-    "min-w-0",
+    "flex min-w-0 flex-wrap empty:hidden",
     props.variant === "panels" && [
-      "gap-px overflow-hidden rounded-lg border border-default bg-(--ui-border)",
+      "overflow-hidden rounded-lg border border-default bg-(--ui-border)",
       appUi.value.grid?.panels,
       props.ui?.panels
     ],

package/dist/runtime/dashboard/components/dashboard-grid.vue.d.ts

@@ -4,13 +4,19 @@ type __VLS_Props = {
     columns?: string;
     /**
      * `cards`: separate cards with a gap. `panels`: one bordered surface whose cells are separated by
-     * 1px rules (rows should be full for the rules to read as a grid).
+     * 1px rules.
      */
     variant?: 'cards' | 'panels';
     /** Gap between cards, any CSS length. Defaults to `1rem`; ignored by `panels`. */
     gap?: string;
     /** Grid span when this grid is nested in another grid, responsive. */
     size?: string;
+    /**
+     * A row that is not full (a block hidden because its source is disabled, or a short last row)
+     * shares its free width between its cells, in proportion to their span. Defaults to `true`;
+     * `false` keeps every cell at its span.
+     */
+    fill?: boolean;
     /** Card menu of every block inside that does not set its own `menu`. */
     menu?: DashboardMenu;
     /** `freshness` of every block inside that does not set its own. */
@@ -22,11 +28,12 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    fill: boolean;
+    columns: string;
     variant: "cards" | "panels";
     menu: DashboardMenu;
-    columns: string;
-    freshness: boolean;
     gap: string;
+    freshness: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/dashboard/components/dashboard-line-chart.d.vue.ts

@@ -1,13 +1,19 @@
 import type { LazyTextValue } from '#ui-tools/shared/types/utils';
-import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardReferenceLine, DashboardSelected, DashboardSelectEvent, DashboardSeries, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
-declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardChartTotals, DashboardFilterControl, DashboardOptionValue, DashboardReferenceLine, DashboardSelected, DashboardSelectEvent, DashboardSeries, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
+declare const __VLS_export: <TRow, TItem extends DashboardOptionValue = DashboardOptionValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<DashboardBlockBaseProps & {
         source: DashboardSourceLike<readonly TRow[] | undefined>;
         x: (row: TRow, index: number) => string | number | Date;
         xFormat?: (value: string | number | Date) => string;
         /** Header of the category column in the table view and CSV export. */
         xLabel?: LazyTextValue;
-        series: readonly DashboardSeries<TRow>[];
+        /**
+         * The series, or a multiple filter whose picks become the series (one per option, in pick
+         * order): the chart then draws the picker and one removable chip per series.
+         */
+        series: readonly DashboardSeries<TRow>[] | DashboardFilterControl<unknown, TItem>;
+        /** With `series` bound to a filter: the value of one picked option's series in a row. */
+        seriesValue?: (row: TRow, item: TItem) => number | null | undefined;
         /** Dashed line, e.g. the previous period. */
         comparison?: DashboardSeries<TRow>;
         /** Fills the area under every solid series. */
@@ -21,6 +27,11 @@ declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS
         points?: number;
         /** Rows shown as selected: a band marks their x position. */
         selected?: DashboardSelected<TRow>;
+        /**
+         * Footer totals of the solid series, formatted like their axis: `true` / `'sum'` adds each
+         * series up, `'average'` averages it. Footer slot content follows them.
+         */
+        totals?: DashboardChartTotals;
         /** A click on the chart selects the x position under the pointer. */
         onSelect?: (event: DashboardSelectEvent<TRow>) => void;
     }> & (typeof globalThis extends {

package/dist/runtime/dashboard/components/dashboard-line-chart.vue

@@ -5,9 +5,13 @@ import {
   resolveDashboardExpandedHeight,
   useDashboardChart
 } from "../composables/use-dashboard-chart";
+import { useDashboardSeriesPicker } from "../composables/use-dashboard-series-picker";
+import DashboardChips from "./block/dashboard-chips.vue";
+import DashboardSeriesPicker from "./block/dashboard-series-picker.vue";
 import DashboardSkeleton from "./block/dashboard-skeleton.vue";
 import { dashboardChartRenderer } from "./charts/renderer";
 import DashboardCard from "./dashboard-card.vue";
+import DashboardTotal from "./dashboard-total.vue";
 const {
   source,
   card = true,
@@ -17,6 +21,7 @@ const {
   xFormat,
   xLabel,
   series,
+  seriesValue,
   comparison,
   area = false,
   yAxis,
@@ -26,40 +31,47 @@ const {
   legend = true,
   points = 12,
   selected,
+  totals,
   onSelect,
   ...block
 } = defineProps({
   title: { type: [String, Number, Function], required: false },
   subtitle: { type: [String, Number, Function], required: false },
   size: { type: String, required: false },
-  rows: { type: String, required: false },
   card: { type: Boolean, required: false },
   activation: { type: String, required: false },
   empty: { type: Object, required: false },
   menu: { type: [Boolean, Array, Function], required: false },
   actions: { type: Array, required: false },
+  filters: { type: Array, required: false },
   freshness: { type: Boolean, required: false },
   ui: { type: Object, required: false },
   source: { type: Object, required: true },
   x: { type: Function, required: true },
   xFormat: { type: Function, required: false },
   xLabel: { type: [String, Number, Function], required: false },
-  series: { type: Array, required: true },
+  series: { type: [Array, Object], required: true },
+  seriesValue: { type: Function, required: false },
   comparison: { type: Object, required: false },
   area: { type: Boolean, required: false },
   yAxis: { type: Object, required: false },
-  format: { type: Function, required: false },
+  format: { type: [String, Function], required: false, skipCheck: true },
   reference: { type: [Object, Array], required: false },
   height: { type: Number, required: false },
   legend: { type: Boolean, required: false },
   points: { type: Number, required: false },
   selected: { type: Function, required: false },
+  totals: { type: [Boolean, String], required: false },
   onSelect: { type: Function, required: false }
 });
 defineSlots();
 const mounted = useMounted();
+const picked = useDashboardSeriesPicker({
+  series: () => series,
+  value: () => seriesValue
+});
 const allSeries = computed(() => {
-  const solid = series.map((entry, index) => ({
+  const solid = picked.series.value.map((entry, index) => ({
     ...entry,
     color: entry.color ?? `series-${index % 6 + 1}`,
     type: entry.type ?? (area && !entry.dashed ? "area" : "line")
@@ -67,9 +79,10 @@ const allSeries = computed(() => {
   return comparison ? [{ color: "series-2", ...comparison, dashed: true, type: "line" }, ...solid] : solid;
 });
 const seed = computed(() => allSeries.value.map((entry) => entry.key).join("|"));
-const skeletonSeries = computed(() => series.length);
+const skeletonSeries = computed(() => picked.series.value.length || 1);
 const skeletonPoints = computed(() => source.data?.length || points);
 const chart = useDashboardChart({
+  totals: () => totals,
   defaultType: "line",
   format: () => format,
   onSelect: () => onSelect,
@@ -91,7 +104,7 @@ const chart = useDashboardChart({
     :menu
     :freshness
     :source
-    :legend="legend ? chart.legend.value : void 0"
+    :legend="legend && !picked.picker.value ? chart.legend.value : void 0"
     :is-empty="chart.frame.value.data.length === 0 || chart.frame.value.series.length === 0"
     :tabulate="chart.tabulate"
   >
@@ -104,13 +117,21 @@ const chart = useDashboardChart({
         :seed
       />
     </template>
-    <template v-if="$slots['header-right']" #header-right>
+    <template v-if="$slots['header-right'] || picked.picker.value" #header-right>
+      <DashboardSeriesPicker v-if="picked.picker.value" :filter="picked.picker.value" />
       <slot name="header-right" />
     </template>
-    <template v-if="$slots.toolbar" #toolbar>
+    <template v-if="$slots.toolbar || picked.chips.value.length" #toolbar>
+      <DashboardChips v-if="picked.chips.value.length" :chips="picked.chips.value" />
       <slot name="toolbar" />
     </template>
-    <template v-if="$slots.footer" #footer>
+    <template v-if="$slots.footer || chart.totals.value.length" #footer>
+      <DashboardTotal
+        v-for="total in chart.totals.value"
+        :key="total.key"
+        :label="total.label"
+        :value="total.text"
+      />
       <slot name="footer" />
     </template>
 

package/dist/runtime/dashboard/components/dashboard-line-chart.vue.d.ts

@@ -1,13 +1,19 @@
 import type { LazyTextValue } from '#ui-tools/shared/types/utils';
-import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardReferenceLine, DashboardSelected, DashboardSelectEvent, DashboardSeries, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
-declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardChartTotals, DashboardFilterControl, DashboardOptionValue, DashboardReferenceLine, DashboardSelected, DashboardSelectEvent, DashboardSeries, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
+declare const __VLS_export: <TRow, TItem extends DashboardOptionValue = DashboardOptionValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<DashboardBlockBaseProps & {
         source: DashboardSourceLike<readonly TRow[] | undefined>;
         x: (row: TRow, index: number) => string | number | Date;
         xFormat?: (value: string | number | Date) => string;
         /** Header of the category column in the table view and CSV export. */
         xLabel?: LazyTextValue;
-        series: readonly DashboardSeries<TRow>[];
+        /**
+         * The series, or a multiple filter whose picks become the series (one per option, in pick
+         * order): the chart then draws the picker and one removable chip per series.
+         */
+        series: readonly DashboardSeries<TRow>[] | DashboardFilterControl<unknown, TItem>;
+        /** With `series` bound to a filter: the value of one picked option's series in a row. */
+        seriesValue?: (row: TRow, item: TItem) => number | null | undefined;
         /** Dashed line, e.g. the previous period. */
         comparison?: DashboardSeries<TRow>;
         /** Fills the area under every solid series. */
@@ -21,6 +27,11 @@ declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS
         points?: number;
         /** Rows shown as selected: a band marks their x position. */
         selected?: DashboardSelected<TRow>;
+        /**
+         * Footer totals of the solid series, formatted like their axis: `true` / `'sum'` adds each
+         * series up, `'average'` averages it. Footer slot content follows them.
+         */
+        totals?: DashboardChartTotals;
         /** A click on the chart selects the x position under the pointer. */
         onSelect?: (event: DashboardSelectEvent<TRow>) => void;
     }> & (typeof globalThis extends {

package/dist/runtime/dashboard/components/dashboard-list.d.vue.ts

@@ -1,3 +1,4 @@
+import type { RouteLocationRaw } from 'vue-router';
 import type { LazyTextValue } from '#ui-tools/shared/types/utils';
 import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardListUi, DashboardRowActions, DashboardSelected, DashboardSelectEvent, DashboardSeriesColor, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
 declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
@@ -27,6 +28,8 @@ declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS
         rowKey?: (row: TRow, index: number) => PropertyKey;
         /** Rows shown as selected (the value a `select` handler stored). */
         selected?: DashboardSelected<TRow>;
+        /** Makes each row a link to what this returns (rows returning `undefined` stay plain). */
+        to?: (row: TRow, index: number) => RouteLocationRaw | undefined;
         /** Actions of each row: inline icon buttons and a `⋮` menu at the end of the row. */
         rowActions?: DashboardRowActions<TRow>;
         /** Makes each row a button. */

package/dist/runtime/dashboard/components/dashboard-list.vue

@@ -1,4 +1,5 @@
 <script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
@@ -36,6 +37,7 @@ const {
   limit,
   rowKey,
   selected,
+  to,
   rowActions,
   onSelect,
   ui,
@@ -44,18 +46,18 @@ const {
   title: { type: [String, Number, Function], required: false },
   subtitle: { type: [String, Number, Function], required: false },
   size: { type: String, required: false },
-  rows: { type: String, required: false },
   card: { type: Boolean, required: false },
   activation: { type: String, required: false },
   empty: { type: Object, required: false },
   menu: { type: [Boolean, Array, Function], required: false },
   actions: { type: Array, required: false },
+  filters: { type: Array, required: false },
   freshness: { type: Boolean, required: false },
   source: { type: Object, required: true },
   label: { type: Function, required: true },
   description: { type: Function, required: false },
   value: { type: Function, required: false },
-  format: { type: Function, required: false },
+  format: { type: [String, Function], required: false, skipCheck: true },
   percent: { type: Function, required: false },
   delta: { type: Function, required: false },
   leading: { type: String, required: false },
@@ -65,6 +67,7 @@ const {
   limit: { type: Number, required: false },
   rowKey: { type: Function, required: false },
   selected: { type: Function, required: false },
+  to: { type: Function, required: false },
   rowActions: { type: Function, required: false },
   onSelect: { type: Function, required: false },
   ui: { type: Object, required: false }
@@ -98,7 +101,7 @@ const entries = computed(
     const share = percent?.(row);
     return {
       actions: rowActions?.(row, index) ?? [],
-      change: isNumber(change) ? { good: change >= 0, label: formats.delta.value(change) } : null,
+      change: isNumber(change) ? { good: change >= 0, label: formats.delta(change) } : null,
       color: resolveDashboardColor(color?.(row, index), index),
       delta: change,
       description: description ? resolveTextValue(description(row)) : "",
@@ -111,8 +114,9 @@ const entries = computed(
       raw,
       row,
       selected: selected?.(row, index) ?? false,
-      share: isNumber(share) ? formats.percent.value(share) : "",
-      value: isNumber(raw) ? (format ?? formats.number.value)(raw) : resolveTextValue(raw)
+      target: to?.(row, index),
+      share: isNumber(share) ? formats.percent(share) : "",
+      value: isNumber(raw) ? formats.resolve(format)(raw) : resolveTextValue(raw)
     };
   })
 );
@@ -179,7 +183,7 @@ function initials(text) {
           :data-selected="entry.selected || void 0"
           :class="[
   classes.row,
-  onSelect && DASHBOARD_SELECTABLE_ROW,
+  (onSelect || entry.target !== void 0) && DASHBOARD_SELECTABLE_ROW,
   entry.selected && DASHBOARD_SELECTED_ROW
 ]"
         >
@@ -227,6 +231,14 @@ function initials(text) {
             :aria-pressed="selected ? entry.selected : void 0"
             @click="onSelect({ index: entry.index, row: entry.row })"
           />
+          <UButton
+            v-else-if="entry.target !== void 0"
+            :to="entry.target"
+            variant="link"
+            :aria-label="entry.label"
+            :class="DASHBOARD_ROW_BUTTON"
+            data-row-link
+          />
           <DashboardRowActionsMenu
             v-if="entry.actions.length"
             :actions="entry.actions"