nuxt-ui-tools 1.0.0 → 1.1.0

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

@@ -0,0 +1,52 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardHighlight, 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<{
+    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;
+        /**
+         * Mixed series: each one declares `type` (`'bar'` by default, `'line'`, `'area'`) and `axis`
+         * (`'left'` by default, `'right'` for the secondary value axis).
+         */
+        series: readonly DashboardSeries<TRow>[];
+        yAxis?: DashboardAxisOptions;
+        /** Secondary (right) value axis. */
+        y2Axis?: DashboardAxisOptions;
+        format?: DashboardValueFormat;
+        reference?: DashboardReferenceLine | readonly DashboardReferenceLine[];
+        height?: number;
+        legend?: boolean;
+        /** Expected number of x positions, drawn by the loading skeleton before data arrives. */
+        points?: number;
+        /** Bars drawn at full strength (`max`, `min`, `last`, or an accessor); the others fade. */
+        highlight?: DashboardHighlight<TRow>;
+        /** Rows shown as selected: their bars stay, the others fade (wins over `highlight`). */
+        selected?: DashboardSelected<TRow>;
+        /** Prints each group's value above its bars (the stack total when `stacked`). */
+        labels?: boolean;
+        /** A click on the chart selects the x position under the pointer. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'header-right'?: () => unknown;
+        toolbar?: () => unknown;
+        footer?: () => 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-combo-chart.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { useMounted } from "@vueuse/core";
+import { computed } from "vue";
+import {
+  resolveDashboardExpandedHeight,
+  useDashboardChart
+} from "../composables/use-dashboard-chart";
+import DashboardSkeleton from "./block/dashboard-skeleton.vue";
+import { dashboardChartRenderer } from "./charts/renderer";
+import DashboardCard from "./dashboard-card.vue";
+const {
+  source,
+  card = true,
+  menu = void 0,
+  freshness = void 0,
+  x,
+  xFormat,
+  xLabel,
+  series,
+  yAxis,
+  y2Axis,
+  format,
+  reference,
+  height = 250,
+  legend = true,
+  points = 12,
+  highlight,
+  selected,
+  labels = false,
+  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 },
+  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 },
+  yAxis: { type: Object, required: false },
+  y2Axis: { type: Object, required: false },
+  format: { type: Function, required: false },
+  reference: { type: [Object, Array], required: false },
+  height: { type: Number, required: false },
+  legend: { type: Boolean, required: false },
+  points: { type: Number, required: false },
+  highlight: { type: [String, Function], required: false },
+  selected: { type: Function, required: false },
+  labels: { type: Boolean, required: false },
+  onSelect: { type: Function, required: false }
+});
+defineSlots();
+const mounted = useMounted();
+const seed = computed(() => series.map((entry) => entry.key).join("|"));
+const skeletonSeries = computed(
+  () => series.filter((entry) => (entry.type ?? "bar") === "bar").length
+);
+const skeletonPoints = computed(() => source.data?.length || points);
+const chart = useDashboardChart({
+  defaultType: "bar",
+  format: () => format,
+  highlight: () => highlight,
+  labels: () => labels,
+  onSelect: () => onSelect,
+  references: () => reference,
+  rows: () => source.data ?? [],
+  selected: () => selected,
+  series: () => series,
+  x: () => x,
+  xFormat: () => xFormat,
+  xLabel: () => xLabel,
+  y2Axis: () => y2Axis,
+  yAxis: () => yAxis
+});
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :source
+    :legend="legend ? chart.legend.value : void 0"
+    :is-empty="chart.frame.value.data.length === 0 || chart.frame.value.series.length === 0"
+    :tabulate="chart.tabulate"
+  >
+    <template #skeleton>
+      <DashboardSkeleton
+        kind="bars"
+        :height
+        :series="skeletonSeries"
+        :count="skeletonPoints"
+        :seed
+      />
+    </template>
+    <template v-if="$slots['header-right']" #header-right>
+      <slot name="header-right" />
+    </template>
+    <template v-if="$slots.toolbar" #toolbar>
+      <slot name="toolbar" />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+
+    <template #default="{ expanded }">
+      <component
+        :is="dashboardChartRenderer.xy"
+        v-if="mounted"
+        :frame="chart.frame.value"
+        :height="expanded ? resolveDashboardExpandedHeight(height) : height"
+        :selectable="chart.selectable.value"
+        @select="chart.select"
+      />
+      <div v-else aria-hidden="true" :style="{ height: `${height}px` }" />
+    </template>
+  </DashboardCard>
+</template>

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

@@ -0,0 +1,52 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardAxisOptions, DashboardBlockBaseProps, DashboardHighlight, 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<{
+    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;
+        /**
+         * Mixed series: each one declares `type` (`'bar'` by default, `'line'`, `'area'`) and `axis`
+         * (`'left'` by default, `'right'` for the secondary value axis).
+         */
+        series: readonly DashboardSeries<TRow>[];
+        yAxis?: DashboardAxisOptions;
+        /** Secondary (right) value axis. */
+        y2Axis?: DashboardAxisOptions;
+        format?: DashboardValueFormat;
+        reference?: DashboardReferenceLine | readonly DashboardReferenceLine[];
+        height?: number;
+        legend?: boolean;
+        /** Expected number of x positions, drawn by the loading skeleton before data arrives. */
+        points?: number;
+        /** Bars drawn at full strength (`max`, `min`, `last`, or an accessor); the others fade. */
+        highlight?: DashboardHighlight<TRow>;
+        /** Rows shown as selected: their bars stay, the others fade (wins over `highlight`). */
+        selected?: DashboardSelected<TRow>;
+        /** Prints each group's value above its bars (the stack total when `stacked`). */
+        labels?: boolean;
+        /** A click on the chart selects the x position under the pointer. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'header-right'?: () => unknown;
+        toolbar?: () => unknown;
+        footer?: () => 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-donut-chart.d.vue.ts

@@ -0,0 +1,48 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardDonutUi, DashboardSelected, DashboardSelectEvent, DashboardSeriesColor, DashboardSourceLike } 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<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "ui"> & {
+        source: DashboardSourceLike<readonly TRow[] | undefined>;
+        label: (row: TRow) => LazyTextValue;
+        value: (row: TRow) => number;
+        color?: (row: TRow, index: number) => DashboardSeriesColor | undefined;
+        /** Legend value text. Defaults to the share in percent. */
+        text?: (row: TRow, share: number) => LazyTextValue;
+        /** Big value in the middle of the ring. Numbers go through the locale number format. */
+        center?: (rows: readonly TRow[]) => LazyTextValue;
+        centerLabel?: LazyTextValue;
+        /** `side`: legend next to the ring. `stacked`: ring centered above the legend. */
+        layout?: "side" | "stacked";
+        /** Legend columns of the `stacked` layout. */
+        legendColumns?: 1 | 2;
+        /** Ring diameter in pixels. */
+        diameter?: number;
+        thickness?: number;
+        /** Space between segments, in pixels along the ring. */
+        gap?: number;
+        /** Segments shown as selected: the others fade. */
+        selected?: DashboardSelected<TRow>;
+        /** Makes each segment and legend entry selectable. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardDonutUi;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'header-right'?: () => unknown;
+        toolbar?: () => unknown;
+        footer?: () => 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-donut-chart.vue

@@ -0,0 +1,216 @@
+<script setup>
+import { useMounted } from "@vueuse/core";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNumber } from "#ui-tools/shared/utils/predicate";
+import { resolveTextValue } from "#ui-tools/shared/utils/render";
+import { useDashboardFormat } from "../composables/use-dashboard-format";
+import { useDashboardUi } from "../composables/use-dashboard-ui";
+import { fadeDashboardColor, resolveDashboardColor } from "../utils/charts";
+import { toDashboardCell } from "../utils/export";
+import {
+  DASHBOARD_ROW_BUTTON,
+  DASHBOARD_SELECTABLE_ROW,
+  resolveDashboardClasses
+} from "../utils/ui";
+import DashboardSkeleton from "./block/dashboard-skeleton.vue";
+import { dashboardChartRenderer } from "./charts/renderer";
+import DashboardCard from "./dashboard-card.vue";
+const {
+  source,
+  card = true,
+  menu = void 0,
+  freshness = void 0,
+  label,
+  value,
+  color,
+  text,
+  center,
+  centerLabel,
+  layout = "side",
+  legendColumns = 1,
+  diameter = 150,
+  thickness = 14,
+  gap = 3,
+  selected,
+  onSelect,
+  ui,
+  ...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 },
+  freshness: { type: Boolean, required: false },
+  source: { type: Object, required: true },
+  label: { type: Function, required: true },
+  value: { type: Function, required: true },
+  color: { type: Function, required: false },
+  text: { type: Function, required: false },
+  center: { type: Function, required: false },
+  centerLabel: { type: [String, Number, Function], required: false },
+  layout: { type: String, required: false },
+  legendColumns: { type: Number, required: false },
+  diameter: { type: Number, required: false },
+  thickness: { type: Number, required: false },
+  gap: { type: Number, required: false },
+  selected: { type: Function, required: false },
+  onSelect: { type: Function, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const { t } = useUiToolsLocale();
+const mounted = useMounted();
+const formats = useDashboardFormat();
+const appUi = useDashboardUi();
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      center: "block text-[22px] leading-tight font-semibold tracking-[-0.02em] text-highlighted tabular-nums",
+      centerLabel: "text-[11.5px] text-muted",
+      item: "flex min-w-0 items-center gap-2",
+      legend: layout === "stacked" ? `grid w-full gap-x-4 gap-y-2 text-[13px] ${legendColumns === 2 ? "grid-cols-2" : "grid-cols-1"}` : "flex min-w-40 flex-1 flex-col gap-2 text-[13px]"
+    },
+    appUi.value.donut,
+    ui
+  )
+);
+const rows = computed(() => source.data ?? []);
+const segments = computed(() => {
+  const values = rows.value.map((row) => value(row));
+  const total = values.reduce((sum, amount) => sum + amount, 0);
+  const picked = rows.value.map((row, index) => selected?.(row, index) ?? false);
+  const anyPicked = picked.includes(true);
+  return rows.value.map((row, index) => {
+    const amount = values[index] ?? 0;
+    const share = total > 0 ? amount / total * 100 : 0;
+    const base = resolveDashboardColor(color?.(row, index), index);
+    const faded = anyPicked && !picked[index];
+    return {
+      color: faded ? fadeDashboardColor(base) : base,
+      faded,
+      index,
+      label: resolveTextValue(label(row)),
+      row,
+      selected: picked[index] ?? false,
+      share,
+      swatch: base,
+      text: text ? resolveTextValue(text(row, share)) : formats.percent.value(share),
+      value: amount
+    };
+  });
+});
+const padAngle = computed(() => gap / Math.max(1, (diameter - thickness) / 2));
+const centerText = computed(() => {
+  if (!center) return "";
+  const resolved = center(rows.value);
+  return isNumber(resolved) ? formats.number.value(resolved) : resolveTextValue(resolved);
+});
+function select(index) {
+  const segment = segments.value[index];
+  if (segment) onSelect?.({ index, row: segment.row });
+}
+function tabulate() {
+  return {
+    columns: [
+      { key: "label", label: t("dashboard.table.label"), numeric: false },
+      { key: "value", label: t("dashboard.table.value"), numeric: true },
+      { key: "share", label: t("dashboard.table.share"), numeric: true }
+    ],
+    rows: segments.value.map((segment) => [
+      toDashboardCell(segment.label),
+      toDashboardCell(segment.value, formats.number.value(segment.value)),
+      toDashboardCell(Math.round(segment.share * 10) / 10, formats.percent.value(segment.share))
+    ])
+  };
+}
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :ui
+    :source
+    :is-empty="segments.length === 0"
+    :tabulate
+  >
+    <template #skeleton>
+      <DashboardSkeleton kind="donut" :layout :diameter />
+    </template>
+    <template v-if="$slots['header-right']" #header-right>
+      <slot name="header-right" />
+    </template>
+    <template v-if="$slots.toolbar" #toolbar>
+      <slot name="toolbar" />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+
+    <div
+      :class="
+  layout === 'stacked' ? 'flex flex-col items-center gap-[18px]' : 'flex flex-wrap items-center gap-[18px]'
+"
+    >
+      <div class="relative shrink-0" :style="{ height: `${diameter}px`, width: `${diameter}px` }">
+        <component
+          :is="dashboardChartRenderer.donut"
+          v-if="mounted"
+          :segments
+          :size="diameter"
+          :thickness
+          :pad-angle="padAngle"
+          :selectable="Boolean(onSelect)"
+          @select="select"
+        />
+        <div
+          v-if="centerText || centerLabel"
+          class="pointer-events-none absolute inset-0 grid place-items-center text-center"
+        >
+          <div>
+            <b :class="classes.center">{{ centerText }}</b>
+            <small v-if="centerLabel" :class="classes.centerLabel">
+              {{ resolveTextValue(centerLabel) }}
+            </small>
+          </div>
+        </div>
+      </div>
+      <ul :class="classes.legend">
+        <li
+          v-for="segment in segments"
+          :key="segment.index"
+          :data-selected="segment.selected || void 0"
+          :class="[
+  classes.item,
+  onSelect && DASHBOARD_SELECTABLE_ROW,
+  segment.faded && 'opacity-55'
+]"
+        >
+          <span
+            aria-hidden="true"
+            class="size-[9px] shrink-0 rounded-[3px]"
+            :style="{ background: segment.swatch }"
+          />
+          <span class="min-w-0 flex-1 truncate text-muted">{{ segment.label }}</span>
+          <b class="shrink-0 font-semibold text-highlighted tabular-nums">{{ segment.text }}</b>
+          <button
+            v-if="onSelect"
+            type="button"
+            :class="DASHBOARD_ROW_BUTTON"
+            :aria-label="segment.label"
+            :aria-pressed="selected ? segment.selected : void 0"
+            @click="select(segment.index)"
+          />
+        </li>
+      </ul>
+    </div>
+  </DashboardCard>
+</template>

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

@@ -0,0 +1,48 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardDonutUi, DashboardSelected, DashboardSelectEvent, DashboardSeriesColor, DashboardSourceLike } 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<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "ui"> & {
+        source: DashboardSourceLike<readonly TRow[] | undefined>;
+        label: (row: TRow) => LazyTextValue;
+        value: (row: TRow) => number;
+        color?: (row: TRow, index: number) => DashboardSeriesColor | undefined;
+        /** Legend value text. Defaults to the share in percent. */
+        text?: (row: TRow, share: number) => LazyTextValue;
+        /** Big value in the middle of the ring. Numbers go through the locale number format. */
+        center?: (rows: readonly TRow[]) => LazyTextValue;
+        centerLabel?: LazyTextValue;
+        /** `side`: legend next to the ring. `stacked`: ring centered above the legend. */
+        layout?: "side" | "stacked";
+        /** Legend columns of the `stacked` layout. */
+        legendColumns?: 1 | 2;
+        /** Ring diameter in pixels. */
+        diameter?: number;
+        thickness?: number;
+        /** Space between segments, in pixels along the ring. */
+        gap?: number;
+        /** Segments shown as selected: the others fade. */
+        selected?: DashboardSelected<TRow>;
+        /** Makes each segment and legend entry selectable. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardDonutUi;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'header-right'?: () => unknown;
+        toolbar?: () => unknown;
+        footer?: () => 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-feed.d.vue.ts

@@ -0,0 +1,49 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardFeedUi, DashboardRowActions, DashboardSelected, DashboardSelectEvent, DashboardSeriesColor, DashboardSourceLike, DashboardTimeValue } 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<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "ui"> & {
+        source: DashboardSourceLike<readonly TRow[] | undefined>;
+        /** What happened. */
+        label: (row: TRow) => LazyTextValue;
+        description?: (row: TRow) => LazyTextValue | undefined;
+        /** When it happened: a `Date`, epoch milliseconds, or an ISO string. Shown relative to now. */
+        time: (row: TRow) => DashboardTimeValue;
+        /** Icon on the timeline rail. Without `icon` or `avatar`, the rail shows a dot. */
+        icon?: (row: TRow) => string | undefined;
+        /** Tint of the icon or dot: a palette slot, a Nuxt UI color, or any CSS color. */
+        color?: (row: TRow) => DashboardSeriesColor | undefined;
+        /** Image URL shown on the rail instead of the icon (who did it). */
+        avatar?: (row: TRow) => string | undefined;
+        /** `day`: a heading per day (`Today`, `Yesterday`, then the date). Rows keep source order. */
+        groupBy?: "day";
+        /** Events shown in the card. The expand dialog, table view, and CSV export show them all. */
+        limit?: number;
+        rowKey?: (row: TRow, index: number) => PropertyKey;
+        /** Events shown as selected (the value a `select` handler stored). */
+        selected?: DashboardSelected<TRow>;
+        /** Actions of each event: inline icon buttons and a `⋮` menu after its time. */
+        rowActions?: DashboardRowActions<TRow>;
+        /** Makes each event a button. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardFeedUi;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'header-right'?: () => unknown;
+        toolbar?: () => unknown;
+        footer?: () => 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];
+}) & {};