nuxt-ui-tools 1.0.1 → 1.2.0

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

@@ -0,0 +1,187 @@
+<script setup>
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+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,
+  DASHBOARD_SELECTED_ROW,
+  resolveDashboardClasses
+} from "../utils/ui";
+import DashboardRowActionsMenu from "./block/dashboard-row-actions.vue";
+import DashboardSkeleton from "./block/dashboard-skeleton.vue";
+import DashboardCard from "./dashboard-card.vue";
+const {
+  source,
+  card = true,
+  menu = void 0,
+  freshness = void 0,
+  label,
+  tag,
+  value,
+  meta,
+  format,
+  max,
+  color,
+  emphasis = "all",
+  limit,
+  rowKey,
+  selected,
+  rowActions,
+  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 },
+  tag: { type: Function, required: false },
+  value: { type: Function, required: true },
+  meta: { type: Function, required: false },
+  format: { type: Function, required: false },
+  max: { type: Number, required: false },
+  color: { type: String, required: false },
+  emphasis: { type: String, required: false },
+  limit: { type: Number, required: false },
+  rowKey: { type: Function, required: false },
+  selected: { type: Function, required: false },
+  rowActions: { type: Function, required: false },
+  onSelect: { type: Function, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const { t } = useUiToolsLocale();
+const formats = useDashboardFormat();
+const appUi = useDashboardUi();
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      fill: "block h-full rounded-full transition-[width] duration-500 ease-out",
+      label: "min-w-0 truncate font-medium text-default",
+      meta: "shrink-0 text-xs text-muted tabular-nums",
+      row: "flex flex-col gap-[5px] py-1.5 text-[13px]",
+      tag: "ms-1.5 font-mono text-[11px] font-normal text-dimmed",
+      track: "h-1.5 overflow-hidden rounded-full bg-[var(--nut-dash-track)]"
+    },
+    appUi.value.bars,
+    ui
+  )
+);
+const fill = computed(() => resolveDashboardColor(color, 0));
+const entries = computed(
+  () => (source.data ?? []).map((row, index) => {
+    const amount = value(row);
+    return {
+      actions: rowActions?.(row, index) ?? [],
+      amount,
+      index,
+      key: rowKey?.(row, index) ?? index,
+      label: resolveTextValue(label(row)),
+      meta: meta ? resolveTextValue(meta(row)) : (format ?? formats.number.value)(amount),
+      row,
+      selected: selected?.(row, index) ?? false,
+      tag: tag ? resolveTextValue(tag(row)) : ""
+    };
+  })
+);
+const anySelected = computed(() => entries.value.some((entry) => entry.selected));
+function visible(expanded) {
+  const shown = limit && !expanded ? entries.value.slice(0, limit) : entries.value;
+  const full = max ?? Math.max(0, ...shown.map((entry) => entry.amount));
+  return shown.map((entry) => ({
+    ...entry,
+    color: anySelected.value ? entry.selected ? fill.value : fadeDashboardColor(fill.value) : emphasis === "first" && entry.index > 0 ? "var(--nut-dash-muted)" : fill.value,
+    width: full > 0 ? `${Math.max(0, Math.min(100, entry.amount / full * 100))}%` : "0%"
+  }));
+}
+function tabulate() {
+  return {
+    columns: [
+      { key: "label", label: t("dashboard.table.label"), numeric: false },
+      { key: "value", label: t("dashboard.table.value"), numeric: true }
+    ],
+    rows: entries.value.map((entry) => [
+      toDashboardCell(entry.tag ? `${entry.label} ${entry.tag}` : entry.label),
+      toDashboardCell(entry.amount, (format ?? formats.number.value)(entry.amount))
+    ])
+  };
+}
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :ui
+    :source
+    :is-empty="entries.length === 0"
+    :tabulate
+  >
+    <template #skeleton>
+      <DashboardSkeleton kind="hbars" :count="limit ?? 5" />
+    </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 }">
+      <ul class="flex flex-col">
+        <li
+          v-for="entry in visible(expanded)"
+          :key="entry.key"
+          :data-selected="entry.selected || void 0"
+          :class="[
+  classes.row,
+  onSelect && DASHBOARD_SELECTABLE_ROW,
+  entry.selected && DASHBOARD_SELECTED_ROW
+]"
+        >
+          <div class="flex items-baseline justify-between gap-2.5">
+            <span :class="classes.label">
+              {{ entry.label }}<small v-if="entry.tag" :class="classes.tag">{{ entry.tag }}</small>
+            </span>
+            <span :class="classes.meta">{{ entry.meta }}</span>
+            <DashboardRowActionsMenu
+              v-if="entry.actions.length"
+              :actions="entry.actions"
+              :label="entry.label"
+              class="-my-1.5 self-center"
+            />
+          </div>
+          <div :class="classes.track">
+            <i :class="classes.fill" :style="{ background: entry.color, width: entry.width }" />
+          </div>
+          <button
+            v-if="onSelect"
+            type="button"
+            :class="DASHBOARD_ROW_BUTTON"
+            :aria-label="entry.label"
+            :aria-pressed="selected ? entry.selected : void 0"
+            @click="onSelect({ index: entry.index, row: entry.row })"
+          />
+        </li>
+      </ul>
+    </template>
+  </DashboardCard>
+</template>

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

@@ -0,0 +1,49 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBarsUi, DashboardBlockBaseProps, DashboardBlockUi, 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<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "ui"> & {
+        source: DashboardSourceLike<readonly TRow[] | undefined>;
+        label: (row: TRow) => LazyTextValue;
+        /** Small monospace tag after the label (version, code…). */
+        tag?: (row: TRow) => LazyTextValue | undefined;
+        /** Bar length. */
+        value: (row: TRow) => number;
+        /** Right-aligned text. Defaults to the formatted value. */
+        meta?: (row: TRow) => LazyTextValue;
+        format?: DashboardValueFormat;
+        /** Value of a full bar. Defaults to the largest value. */
+        max?: number;
+        color?: DashboardSeriesColor;
+        /** `first`: only the leading row takes `color`, the others use the muted tone. */
+        emphasis?: "all" | "first";
+        /** Rows shown in the card. The expand dialog, table view, and CSV export show them all. */
+        limit?: number;
+        rowKey?: (row: TRow, index: number) => PropertyKey;
+        /** Rows shown as selected: their bars keep `color`, the others fade. */
+        selected?: DashboardSelected<TRow>;
+        /** Actions of each row: inline icon buttons and a `⋮` menu after the value. */
+        rowActions?: DashboardRowActions<TRow>;
+        /** Makes each row a button. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardBarsUi;
+    }> & (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-card.d.vue.ts

@@ -0,0 +1,47 @@
+import type { DashboardBlockBaseProps, DashboardDataTable, DashboardLegendItem, DashboardMenu, DashboardSkeletonKind, DashboardSourceLike } from '../types/index.js';
+type __VLS_Props = DashboardBlockBaseProps & {
+    /** Source whose state drives the card: skeleton, error with retry, empty, refresh bar. */
+    source?: DashboardSourceLike;
+    /** Whether the ready source has nothing to show. Blocks compute it from their typed data. */
+    isEmpty?: boolean;
+    legend?: readonly DashboardLegendItem[];
+    /** Skeleton drawn while the source loads when no `#skeleton` slot is given. */
+    skeleton?: DashboardSkeletonKind;
+    /**
+     * Tabular data behind the `table` and `csv` menu actions. Called only when one of them runs,
+     * so it can read the source freely.
+     */
+    tabulate?: () => DashboardDataTable;
+    /** Offers the `table` menu action when `tabulate` is set. Off for blocks that are tables. */
+    viewAsTable?: boolean;
+    /** Offers the `expand` menu action. The default slot renders again, with `expanded`. */
+    expandable?: boolean;
+};
+type __VLS_Slots = {
+    /** Content. Rendered a second time inside the expand dialog, with `expanded: true`. */
+    default?: (props: {
+        expanded: boolean;
+    }) => unknown;
+    skeleton?: () => unknown;
+    'header-right'?: () => unknown;
+    /** Row under the header (active filters, chips…), kept visible in every phase. */
+    toolbar?: () => unknown;
+    footer?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    menu: DashboardMenu;
+    card: boolean;
+    freshness: boolean;
+    isEmpty: boolean;
+    skeleton: DashboardSkeletonKind;
+    viewAsTable: boolean;
+    expandable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,316 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import UModal from "@nuxt/ui/components/Modal.vue";
+import { twMerge } from "tailwind-merge";
+import { computed, shallowRef, useTemplateRef } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { resolveTextValue } from "#ui-tools/shared/utils/render";
+import { useDashboardBlock } from "../composables/use-dashboard-block";
+import { useDashboardTime } from "../composables/use-dashboard-time";
+import { useDashboardGridContext, useDashboardUi } from "../composables/use-dashboard-ui";
+import { downloadDashboardFile, resolveDashboardFileName, toDashboardCsv } from "../utils/export";
+import { resolveDashboardClasses } from "../utils/ui";
+import DashboardBlockState from "./block/dashboard-block-state.vue";
+import DashboardDataTableView from "./block/dashboard-data-table.vue";
+import DashboardSkeleton from "./block/dashboard-skeleton.vue";
+import DashboardLegend from "./dashboard-legend.vue";
+const props = 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, default: true },
+  activation: { type: String, required: false },
+  empty: { type: Object, required: false },
+  menu: { type: [Boolean, Array, Function], required: false, default: void 0 },
+  actions: { type: Array, required: false },
+  freshness: { type: Boolean, required: false, default: void 0 },
+  ui: { type: Object, required: false },
+  source: { type: Object, required: false },
+  isEmpty: { type: Boolean, required: false, default: false },
+  legend: { type: Array, required: false },
+  skeleton: { type: String, required: false, default: "rows" },
+  tabulate: { type: Function, required: false },
+  viewAsTable: { type: Boolean, required: false, default: true },
+  expandable: { type: Boolean, required: false, default: true }
+});
+const slots = defineSlots();
+const { t, code } = useUiToolsLocale();
+const time = useDashboardTime();
+const root = useTemplateRef("root");
+const block = useDashboardBlock({
+  activation: () => props.activation,
+  empty: () => props.isEmpty,
+  root,
+  rows: () => props.rows,
+  size: () => props.size,
+  source: () => props.source
+});
+const appUi = useDashboardUi();
+const grid = useDashboardGridContext();
+const panel = computed(() => grid?.panels.value ?? false);
+const classes = computed(() => {
+  const app = appUi.value;
+  const parts = resolveDashboardClasses(
+    {
+      actions: "ms-auto flex max-w-full shrink-0 flex-wrap items-center justify-end gap-x-3.5 gap-y-1.5",
+      // A column, so content that wants the card's full height (a centered gauge) can take it.
+      body: "flex min-w-0 flex-1 flex-col",
+      footer: "mt-3 flex flex-col",
+      footerActions: "mt-4 flex flex-wrap gap-2 *:flex-1 *:justify-center",
+      freshness: "mt-3 text-[11px] text-dimmed",
+      header: "mb-3.5 flex min-w-0 items-start gap-x-3",
+      // Centered on the 20px first line: the 24px button overhangs 2px above and below.
+      menu: "-my-0.5 -me-1.5 shrink-0 text-dimmed",
+      root: "",
+      subtitle: "max-w-full truncate text-xs font-normal tracking-normal text-muted",
+      // A subtitle that does not fit goes under the title rather than cutting it.
+      title: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5 text-sm font-semibold tracking-[-0.01em] text-highlighted",
+      toolbar: "-mt-1 mb-3.5 flex min-w-0 flex-wrap items-center gap-1.5"
+    },
+    app.card,
+    props.ui
+  );
+  parts.root = twMerge(
+    "relative flex min-w-0 flex-col",
+    props.card && ["rounded-lg border border-default bg-default px-6 py-5.5", app.card?.root],
+    props.card && panel.value && ["rounded-none border-0 shadow-none", app.grid?.panel],
+    props.ui?.root
+  );
+  return parts;
+});
+const title = computed(() => resolveTextValue(props.title));
+const subtitle = computed(() => resolveTextValue(props.subtitle));
+const phase = computed(() => block.phase.value);
+const pending = computed(() => phase.value === "loading" || phase.value === "idle");
+const busy = computed(() => phase.value === "loading" || block.refreshing.value);
+const builtInActions = ["table", "csv", "expand"];
+const tableView = shallowRef(false);
+const expanded = shallowRef(false);
+const expandedOnce = shallowRef(false);
+function expand() {
+  expandedOnce.value = true;
+  expanded.value = true;
+}
+const menuContext = {
+  download,
+  expand,
+  table: () => phase.value === "content" ? props.tabulate?.() : void 0,
+  get title() {
+    return title.value;
+  }
+};
+const menuItems = computed(() => {
+  const menu = props.menu ?? grid?.menu.value ?? false;
+  if (menu === false) return [];
+  const entries = menu === true ? builtInActions : isMenuEntries(menu) ? menu : menu(menuContext);
+  return entries.flatMap((entry) => isMenuAction(entry) ? builtInItem(entry) : [entry]);
+});
+const actionButtons = computed(() => {
+  const header = [];
+  const footer = [];
+  for (const { placement, ...button } of props.actions ?? []) {
+    if (placement === "footer") footer.push(button);
+    else header.push(button);
+  }
+  return { footer, header };
+});
+const showTable = computed(
+  () => tableView.value && props.viewAsTable && phase.value === "content" && props.tabulate !== void 0
+);
+function isMenuEntries(menu) {
+  return Array.isArray(menu);
+}
+function isMenuAction(entry) {
+  return entry === "table" || entry === "csv" || entry === "expand";
+}
+function builtInItem(action) {
+  const disabled = phase.value !== "content";
+  if (action === "expand") {
+    if (!props.expandable) return [];
+    return [
+      {
+        disabled,
+        icon: "i-lucide-maximize-2",
+        label: t("dashboard.menu.expand"),
+        onSelect: expand
+      }
+    ];
+  }
+  if (!props.tabulate) return [];
+  if (action === "csv") {
+    return [
+      {
+        disabled,
+        icon: "i-lucide-download",
+        label: t("dashboard.menu.download"),
+        onSelect: download
+      }
+    ];
+  }
+  if (!props.viewAsTable) return [];
+  return [
+    {
+      disabled,
+      icon: tableView.value ? "i-lucide-chart-no-axes-column" : "i-lucide-table-2",
+      label: t(tableView.value ? "dashboard.menu.hideTable" : "dashboard.menu.showTable"),
+      onSelect: () => {
+        tableView.value = !tableView.value;
+      }
+    }
+  ];
+}
+function download() {
+  if (!props.tabulate) return;
+  downloadDashboardFile(
+    resolveDashboardFileName(title.value, "csv"),
+    toDashboardCsv(props.tabulate(), code.value)
+  );
+}
+const updatedAt = computed(() => {
+  const freshness = props.freshness ?? grid?.freshness.value ?? false;
+  return freshness && phase.value === "content" ? props.source?.updatedAt : void 0;
+});
+const hasHeader = computed(
+  () => Boolean(
+    title.value || subtitle.value || props.legend?.length || slots["header-right"] || actionButtons.value.header.length || menuItems.value.length
+  )
+);
+</script>
+
+<template>
+  <section
+    ref="root"
+    :style="block.style.value"
+    :data-phase="phase"
+    :data-panel="panel || void 0"
+    :aria-busy="busy"
+    :class="classes.root"
+  >
+    <div
+      v-if="block.refreshing.value"
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-x-0 top-0 h-0.5 overflow-hidden"
+    >
+      <div class="nut-dash-progress h-full w-1/3 rounded-full bg-primary" />
+    </div>
+
+    <!-- Title and actions share the first line and wrap as a group; the menu keeps the corner. -->
+    <header v-if="hasHeader" :class="classes.header">
+      <div class="flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-2">
+        <h2 :class="classes.title">
+          <span class="max-w-full truncate">{{ title }}</span>
+          <small v-if="subtitle" :class="classes.subtitle">{{ subtitle }}</small>
+        </h2>
+        <div
+          v-if="
+  legend?.length && !showTable || $slots['header-right'] || actionButtons.header.length
+"
+          :class="classes.actions"
+        >
+          <DashboardLegend v-if="legend?.length && !showTable" :items="legend" />
+          <slot name="header-right" />
+          <UButton
+            v-for="(button, index) in actionButtons.header"
+            :key="index"
+            color="neutral"
+            variant="outline"
+            size="xs"
+            v-bind="button"
+            data-dashboard-action
+          />
+        </div>
+      </div>
+      <UDropdownMenu
+        v-if="menuItems.length"
+        :items="menuItems"
+        :content="{ align: 'end', side: 'bottom', sideOffset: 6 }"
+      >
+        <UButton
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          square
+          icon="i-lucide-ellipsis"
+          :aria-label="t('dashboard.menu.label')"
+          :class="classes.menu"
+          data-dashboard-menu
+        />
+      </UDropdownMenu>
+    </header>
+
+    <div v-if="$slots.toolbar" :class="classes.toolbar">
+      <slot name="toolbar" />
+    </div>
+
+    <div :class="classes.body">
+      <div v-if="showTable && tabulate" class="nut-dash-enter">
+        <DashboardDataTableView :table="tabulate()" scroll />
+      </div>
+      <div v-else-if="phase === 'content'" class="nut-dash-enter flex-1">
+        <slot :expanded="false" />
+      </div>
+      <DashboardBlockState
+        v-else-if="phase === 'error' || phase === 'empty'"
+        :kind="phase"
+        :empty
+        @retry="block.retry"
+      />
+      <div v-else aria-hidden="true" :class="phase === 'loading' && 'nut-dash-shimmer'">
+        <slot name="skeleton">
+          <DashboardSkeleton :kind="skeleton" />
+        </slot>
+      </div>
+    </div>
+
+    <footer v-if="$slots.footer && phase === 'content'" :class="classes.footer">
+      <slot name="footer" />
+    </footer>
+    <footer
+      v-else-if="$slots.footer && pending"
+      aria-hidden="true"
+      :class="[classes.footer, phase === 'loading' && 'nut-dash-shimmer']"
+    >
+      <div class="flex items-center justify-between border-t border-[var(--nut-dash-grid)] pt-3">
+        <div class="nut-dash-ghost h-2.5 w-24 rounded-sm opacity-70" />
+        <div class="nut-dash-ghost h-3 w-14 rounded-sm" />
+      </div>
+    </footer>
+
+    <p v-if="updatedAt !== void 0" :class="classes.freshness">
+      <time
+        :datetime="new Date(updatedAt).toISOString()"
+        :title="time.absolute(updatedAt)"
+        data-allow-mismatch="text"
+      >
+        {{ t("dashboard.freshness.updated", { time: time.relative(updatedAt) }) }}
+      </time>
+    </p>
+
+    <div v-if="actionButtons.footer.length" :class="classes.footerActions">
+      <UButton
+        v-for="(button, index) in actionButtons.footer"
+        :key="index"
+        color="neutral"
+        variant="outline"
+        v-bind="button"
+        data-dashboard-action
+      />
+    </div>
+
+    <UModal
+      v-if="expandedOnce"
+      v-model:open="expanded"
+      :title="title || t('dashboard.menu.expand')"
+      :description="subtitle || void 0"
+      :ui="{ content: 'sm:max-w-5xl' }"
+    >
+      <template #body>
+        <DashboardLegend v-if="legend?.length && !showTable" :items="legend" class="mb-4" />
+        <DashboardDataTableView v-if="showTable && tabulate" :table="tabulate()" />
+        <slot v-else-if="phase === 'content'" :expanded="true" />
+      </template>
+    </UModal>
+  </section>
+</template>

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

@@ -0,0 +1,47 @@
+import type { DashboardBlockBaseProps, DashboardDataTable, DashboardLegendItem, DashboardMenu, DashboardSkeletonKind, DashboardSourceLike } from '../types/index.js';
+type __VLS_Props = DashboardBlockBaseProps & {
+    /** Source whose state drives the card: skeleton, error with retry, empty, refresh bar. */
+    source?: DashboardSourceLike;
+    /** Whether the ready source has nothing to show. Blocks compute it from their typed data. */
+    isEmpty?: boolean;
+    legend?: readonly DashboardLegendItem[];
+    /** Skeleton drawn while the source loads when no `#skeleton` slot is given. */
+    skeleton?: DashboardSkeletonKind;
+    /**
+     * Tabular data behind the `table` and `csv` menu actions. Called only when one of them runs,
+     * so it can read the source freely.
+     */
+    tabulate?: () => DashboardDataTable;
+    /** Offers the `table` menu action when `tabulate` is set. Off for blocks that are tables. */
+    viewAsTable?: boolean;
+    /** Offers the `expand` menu action. The default slot renders again, with `expanded`. */
+    expandable?: boolean;
+};
+type __VLS_Slots = {
+    /** Content. Rendered a second time inside the expand dialog, with `expanded: true`. */
+    default?: (props: {
+        expanded: boolean;
+    }) => unknown;
+    skeleton?: () => unknown;
+    'header-right'?: () => unknown;
+    /** Row under the header (active filters, chips…), kept visible in every phase. */
+    toolbar?: () => unknown;
+    footer?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    menu: DashboardMenu;
+    card: boolean;
+    freshness: boolean;
+    isEmpty: boolean;
+    skeleton: DashboardSkeletonKind;
+    viewAsTable: boolean;
+    expandable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};