nuxt-ui-tools 1.6.5 → 1.8.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.6.5",
+  "version": "1.8.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -55,6 +55,7 @@ function getPublicComponents(runtimeDir, options) {
       "ViewTabs",
       "Stat",
       "Stats",
+      "Details",
       "Gauge",
       "Tabs",
       "Refresh",
@@ -80,6 +81,17 @@ function getPublicComponents(runtimeDir, options) {
       global: options.global,
       name: `${prefix}Dashboard${part}`
     })),
+    // File preview
+    {
+      filePath: `${runtimeDir}/file-preview/components/provider/file-preview-provider.vue`,
+      global: options.global,
+      name: `${prefix}FilePreviewProvider`
+    },
+    {
+      filePath: `${runtimeDir}/file-preview/components/shell/file-preview-tools.vue`,
+      global: options.global,
+      name: `${prefix}FilePreviewTools`
+    },
     // Form
     {
       filePath: `${runtimeDir}/form/components/root/form.vue`,
@@ -172,6 +184,11 @@ function setupImports(runtimeDir) {
       { from: "dashboard", name: "useDashboardView" },
       { from: "dashboard", name: "resolveDashboardComparisonRange" }
     ]),
+    // File preview
+    ...withRuntime(runtimeDir, [
+      { from: "file-preview", name: "defineFilePreviewRenderer" },
+      { from: "file-preview", name: "useFilePreview" }
+    ]),
     // Form
     ...withRuntime(runtimeDir, [
       { from: "form", name: "defineFormField" },
@@ -354,6 +371,7 @@ const viewportDefaults = {
 };
 const publicRuntimeDomains = [
   "dashboard",
+  "file-preview",
   "form",
   "i18n",
   "query-prefetch",
@@ -423,6 +441,8 @@ const module$1 = defineNuxtModule({
     setupImports(resolve("./runtime"));
     setupComponents(resolve("./runtime"), options);
     addPlugin(resolve("./runtime/query-prefetch/plugins/link-prefetch.client"));
+    addPlugin(resolve("./runtime/form/plugins/form-api"));
+    addPlugin(resolve("./runtime/file-preview/plugins/file-preview-api"));
     addVitePlugin({
       enforce: "pre",
       name: "nuxt-ui-tools:query-prefetch-macro",

package/dist/runtime/dashboard/components/block/dashboard-skeleton.vue

@@ -196,6 +196,18 @@ const funnelWidths = computed(
     </div>
   </div>
 
+  <!-- Details: labels over values in a grid -->
+  <div
+    v-else-if="kind === 'details'"
+    class="grid gap-x-8 gap-y-4"
+    :style="{ gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))` }"
+  >
+    <div v-for="(width, index) in widths" :key="index" class="flex flex-col gap-2">
+      <div class="nut-dash-ghost h-2.5 w-[32%] rounded-sm opacity-70" />
+      <div class="nut-dash-ghost h-3.5 rounded-sm" :style="{ width: `${width + 12}%` }" />
+    </div>
+  </div>
+
   <!-- Gauge: an open arc and its scale -->
   <div v-else-if="kind === 'gauge'" class="flex flex-col items-center gap-3 pt-1">
     <div

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

@@ -0,0 +1,38 @@
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardDetailsItem, DashboardDetailsUi, DashboardSourceLike } from '../types/index.js';
+declare const __VLS_export: <TData>(__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<TData>;
+        /** Fields read from the source data, in display order. */
+        items: readonly DashboardDetailsItem<TData & ({} | null)>[];
+        /** Column count, responsive: `"1 md:2 xl:3"`. Defaults to `"1 sm:2"`. */
+        columns?: string;
+        /** `stacked`: each label over its value. `inline`: the label beside its value, on one row. */
+        layout?: "stacked" | "inline";
+        ui?: DashboardBlockUi & DashboardDetailsUi;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [x: `item-${string}`]: ((props: {
+            data: TData & ({} | null);
+            item: DashboardDetailsItem<TData & ({} | null)>;
+            value: string | undefined;
+        }) => unknown) | undefined;
+    } & {
+        '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-details.vue

@@ -0,0 +1,194 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { useClipboard } from "@vueuse/core";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useResponsiveValue } from "#ui-tools/shared/composables/use-responsive-value";
+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 { toDashboardCell } from "../utils/export";
+import { resolveDashboardClasses } from "../utils/ui";
+import DashboardSkeleton from "./block/dashboard-skeleton.vue";
+import DashboardCard from "./dashboard-card.vue";
+const {
+  source,
+  card = true,
+  menu = void 0,
+  freshness = void 0,
+  items,
+  columns = "1 sm:2",
+  layout = "stacked",
+  ui,
+  ...block
+} = defineProps({
+  title: { type: [String, Number, Function], required: false },
+  subtitle: { type: [String, Number, Function], required: false },
+  size: { 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 },
+  items: { type: Array, required: true },
+  columns: { type: String, required: false },
+  layout: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const { t } = useUiToolsLocale();
+const formats = useDashboardFormat();
+const appUi = useDashboardUi();
+const clipboard = useClipboard({ copiedDuring: 1600, legacy: true });
+const layouts = {
+  inline: {
+    item: "grid grid-cols-[minmax(7rem,38%)_minmax(0,1fr)] items-baseline gap-x-4",
+    label: "text-[12.5px]"
+  },
+  stacked: { item: "flex flex-col gap-1", label: "text-xs" }
+};
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      copy: "ms-0.5 -my-1 opacity-0 transition-opacity group-hover/detail:opacity-100 focus-visible:opacity-100 data-[copied]:opacity-100",
+      grid: layout === "inline" ? "grid gap-x-8 gap-y-2.5" : "grid gap-x-8 gap-y-4",
+      hint: "mt-0.5 text-[11.5px] text-muted",
+      item: `group/detail min-w-0 ${layouts[layout].item}`,
+      label: `min-w-0 truncate text-muted ${layouts[layout].label}`,
+      link: "h-auto min-w-0 p-0 text-[length:inherit] font-normal underline decoration-primary/35 underline-offset-[3px] transition-colors hover:decoration-primary",
+      placeholder: "text-dimmed",
+      value: "flex min-w-0 items-center gap-1 text-[13.5px] leading-snug break-words text-highlighted"
+    },
+    appUi.value.details,
+    ui
+  )
+);
+const gridColumns = useResponsiveValue(() => columns, "grid-cols");
+const entries = computed(() => {
+  const data = source.data;
+  if (data === void 0 || data === null) return [];
+  return items.filter((item) => !item.hidden?.(data)).map((item) => {
+    const raw = item.value(data);
+    const text = raw === null || raw === void 0 ? void 0 : isNumber(raw) ? formats.resolve(item.format)(raw) : resolveTextValue(raw);
+    const value = text === "" ? void 0 : text;
+    const hint = item.hint?.(data);
+    return {
+      data,
+      hint: hint === null || hint === void 0 ? void 0 : resolveTextValue(hint),
+      item,
+      key: item.key,
+      label: resolveTextValue(item.label),
+      placeholder: item.placeholder === void 0 ? "\u2014" : resolveTextValue(item.placeholder),
+      span: item.span === "full" ? "1 / -1" : item.span ? `span ${item.span}` : void 0,
+      target: value === void 0 ? void 0 : item.to?.(data) ?? void 0,
+      value
+    };
+  });
+});
+function copy(value) {
+  void clipboard.copy(value);
+}
+function tabulate() {
+  return {
+    columns: [
+      { key: "label", label: t("dashboard.table.label"), numeric: false },
+      { key: "value", label: t("dashboard.table.value"), numeric: false }
+    ],
+    rows: entries.value.map((entry) => [
+      toDashboardCell(entry.label),
+      toDashboardCell(entry.value ?? "")
+    ])
+  };
+}
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :ui
+    :source
+    :is-empty="entries.length === 0"
+    :tabulate
+  >
+    <template #skeleton>
+      <DashboardSkeleton
+        kind="details"
+        :count="items.length"
+        :columns="layout === 'inline' ? 1 : 2"
+      />
+    </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>
+
+    <dl :class="classes.grid" :style="gridColumns ?? void 0" :data-layout="layout">
+      <div
+        v-for="entry in entries"
+        :key="entry.key"
+        :class="classes.item"
+        :style="entry.span ? { gridColumn: entry.span } : void 0"
+        :data-empty="entry.value === void 0 ? '' : void 0"
+        data-details-item
+      >
+        <dt :class="classes.label">{{ entry.label }}</dt>
+        <dd class="m-0 min-w-0">
+          <div
+            :class="[classes.value, entry.item.mono && 'font-mono text-[12.5px] tracking-tight']"
+          >
+            <slot
+              :name="`item-${entry.key}`"
+              :data="entry.data"
+              :item="entry.item"
+              :value="entry.value"
+            >
+              <span v-if="entry.value === void 0" :class="classes.placeholder">
+                {{ entry.placeholder }}
+              </span>
+              <UButton
+                v-else-if="entry.target !== void 0"
+                :to="entry.target"
+                :label="entry.value"
+                color="primary"
+                variant="link"
+                :class="classes.link"
+                data-details-link
+              />
+              <span v-else class="min-w-0">{{ entry.value }}</span>
+            </slot>
+            <UButton
+              v-if="entry.item.copy && entry.value !== void 0"
+              :icon="
+  clipboard.copied.value && clipboard.text.value === entry.value ? 'i-lucide-check' : 'i-lucide-copy'
+"
+              :aria-label="
+  clipboard.copied.value && clipboard.text.value === entry.value ? t('dashboard.details.copied') : t('dashboard.details.copy')
+"
+              :data-copied="
+  clipboard.copied.value && clipboard.text.value === entry.value || void 0
+"
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              :class="classes.copy"
+              @click="copy(entry.value)"
+            />
+          </div>
+          <p v-if="entry.hint" :class="classes.hint">{{ entry.hint }}</p>
+        </dd>
+      </div>
+    </dl>
+  </DashboardCard>
+</template>

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

@@ -0,0 +1,38 @@
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardDetailsItem, DashboardDetailsUi, DashboardSourceLike } from '../types/index.js';
+declare const __VLS_export: <TData>(__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<TData>;
+        /** Fields read from the source data, in display order. */
+        items: readonly DashboardDetailsItem<TData & ({} | null)>[];
+        /** Column count, responsive: `"1 md:2 xl:3"`. Defaults to `"1 sm:2"`. */
+        columns?: string;
+        /** `stacked`: each label over its value. `inline`: the label beside its value, on one row. */
+        layout?: "stacked" | "inline";
+        ui?: DashboardBlockUi & DashboardDetailsUi;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [x: `item-${string}`]: ((props: {
+            data: TData & ({} | null);
+            item: DashboardDetailsItem<TData & ({} | null)>;
+            value: string | undefined;
+        }) => unknown) | undefined;
+    } & {
+        '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-page.d.vue.ts

@@ -33,6 +33,14 @@ declare const __VLS_export: <TDashboard extends DashboardPageTarget>(__VLS_props
         }) => unknown;
         title?: () => unknown;
         description?: () => unknown;
+        /** Above the title, across the header: breadcrumbs or a back link. */
+        eyebrow?: () => unknown;
+        /** Before the title and its line: an avatar or a logo, for a page about one entity. */
+        leading?: () => unknown;
+        /** A full-width row closing the header: key facts of the entity the page is about. */
+        details?: () => unknown;
+        /** Between the header and the pinned tabs: a note or a notice about the whole page. */
+        banner?: () => unknown;
         /** Replaces the page actions and the refresh control. */
         actions?: () => unknown;
         /** Replaces the view tabs. */

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

@@ -43,9 +43,13 @@ const classes = computed(
     {
       actions: "flex min-h-[34px] items-center gap-2",
       body: "flex flex-col gap-4 px-4 pt-1 pb-12 lg:gap-6 lg:px-7 lg:pb-15",
-      description: "col-span-full mt-1 text-[12.5px] font-light text-muted md:text-[13.5px]",
+      description: "col-span-full mt-1 text-[12.5px] font-light text-muted in-data-[leading]:col-start-2 md:text-[13.5px]",
+      banner: "px-4 pt-4 lg:px-7 lg:pt-6",
+      details: "col-span-full mt-4 lg:mt-5",
+      eyebrow: "col-span-full mb-2 min-w-0",
       filters: "px-4 py-3 lg:px-7 lg:py-4",
-      header: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 bg-default px-4 pt-4 pb-3.5 lg:px-7 lg:pt-[22px] lg:pb-[18px]",
+      header: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 bg-default px-4 pt-4 pb-3.5 data-[leading]:grid-cols-[auto_minmax(0,1fr)_auto] lg:px-7 lg:pt-[22px] lg:pb-[18px]",
+      leading: "row-span-2 flex items-center self-center",
       root: "h-full overflow-auto bg-muted",
       tabs: "bg-default px-2 lg:px-7",
       title: "m-0 min-w-0 truncate text-2xl leading-[1.1] font-light tracking-[-0.04em] text-highlighted md:text-[30px]",
@@ -102,7 +106,13 @@ function actionUi(action) {
 <template>
   <!-- Without a dashboard (its schema threw during setup), render nothing: that error stays the one reported. -->
   <div v-if="dashboard" :class="classes.root" data-dashboard-page>
-    <header :class="classes.header">
+    <header :class="classes.header" :data-leading="$slots.leading ? '' : void 0">
+      <div v-if="$slots.eyebrow" :class="classes.eyebrow">
+        <slot name="eyebrow" />
+      </div>
+      <div v-if="$slots.leading" :class="classes.leading">
+        <slot name="leading" />
+      </div>
       <h1 :class="classes.title">
         <slot name="title">{{ title === void 0 ? "" : resolveTextValue(title) }}</slot>
       </h1>
@@ -133,8 +143,15 @@ function actionUi(action) {
           </template>
         </slot>
       </p>
+      <div v-if="$slots.details" :class="classes.details">
+        <slot name="details" />
+      </div>
     </header>
 
+    <div v-if="$slots.banner" :class="classes.banner">
+      <slot name="banner" />
+    </div>
+
     <div ref="marker" aria-hidden="true" />
     <div :class="classes.toolbar" :data-stuck="stuck || void 0">
       <slot name="tabs">

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

@@ -33,6 +33,14 @@ declare const __VLS_export: <TDashboard extends DashboardPageTarget>(__VLS_props
         }) => unknown;
         title?: () => unknown;
         description?: () => unknown;
+        /** Above the title, across the header: breadcrumbs or a back link. */
+        eyebrow?: () => unknown;
+        /** Before the title and its line: an avatar or a logo, for a page about one entity. */
+        leading?: () => unknown;
+        /** A full-width row closing the header: key facts of the entity the page is about. */
+        details?: () => unknown;
+        /** Between the header and the pinned tabs: a note or a notice about the whole page. */
+        banner?: () => unknown;
         /** Replaces the page actions and the refresh control. */
         actions?: () => unknown;
         /** Replaces the view tabs. */

package/dist/runtime/dashboard/components/dashboard-view-tabs.d.vue.ts

@@ -1,4 +1,4 @@
-import type { DashboardViewController, DashboardViewTabsUi } from '../types/index.js';
+import type { DashboardViewController, DashboardViewItem, DashboardViewTabsUi } from '../types/index.js';
 declare const __VLS_export: <TKey extends string>(__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: {
@@ -13,10 +13,7 @@ declare const __VLS_export: <TKey extends string>(__VLS_props: NonNullable<Await
     slots: {
         /** Content of one tab. */
         tab?: (props: {
-            item: {
-                value: TKey;
-                label: string;
-            };
+            item: DashboardViewItem<TKey>;
             active: boolean;
         }) => unknown;
     };

package/dist/runtime/dashboard/components/dashboard-view-tabs.vue

@@ -15,8 +15,9 @@ const strip = useTemplateRef("strip");
 const classes = computed(
   () => resolveDashboardClasses(
     {
+      badge: "ms-1.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-elevated px-1.5 text-[11px] leading-none font-semibold text-muted tabular-nums group-data-[active]/tab:bg-primary/12 group-data-[active]/tab:text-primary",
       root: "flex min-w-0 gap-0.5 overflow-x-auto border-b border-default [scrollbar-width:none]",
-      tab: "relative inline-flex h-10 flex-none items-center px-3 text-sm font-medium whitespace-nowrap text-muted transition-colors outline-none hover:text-default focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset data-[active]:text-highlighted data-[active]:after:absolute data-[active]:after:inset-x-2 data-[active]:after:-bottom-px data-[active]:after:h-0.5 data-[active]:after:rounded-full data-[active]:after:bg-primary"
+      tab: "group/tab relative inline-flex h-10 flex-none items-center px-3 text-sm font-medium whitespace-nowrap text-muted transition-colors outline-none hover:text-default focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset data-[active]:text-highlighted data-[active]:after:absolute data-[active]:after:inset-x-2 data-[active]:after:-bottom-px data-[active]:after:h-0.5 data-[active]:after:rounded-full data-[active]:after:bg-primary"
     },
     appUi.value.viewTabs,
     ui
@@ -60,6 +61,9 @@ watch(
     >
       <slot name="tab" :item :active="dashboard.view.current === item.value">
         {{ item.label }}
+        <span v-if="item.badge !== void 0" :class="classes.badge" data-dashboard-view-badge>
+          {{ item.badge }}
+        </span>
       </slot>
     </button>
   </nav>

package/dist/runtime/dashboard/components/dashboard-view-tabs.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DashboardViewController, DashboardViewTabsUi } from '../types/index.js';
+import type { DashboardViewController, DashboardViewItem, DashboardViewTabsUi } from '../types/index.js';
 declare const __VLS_export: <TKey extends string>(__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: {
@@ -13,10 +13,7 @@ declare const __VLS_export: <TKey extends string>(__VLS_props: NonNullable<Await
     slots: {
         /** Content of one tab. */
         tab?: (props: {
-            item: {
-                value: TKey;
-                label: string;
-            };
+            item: DashboardViewItem<TKey>;
             active: boolean;
         }) => unknown;
     };

package/dist/runtime/dashboard/composables/use-dashboard-api.js

@@ -25,6 +25,9 @@ export function useDashboardApi(params) {
           get label() {
             return view.label();
           },
+          get badge() {
+            return view.badge();
+          },
           get opened() {
             return view.opened.value;
           }
@@ -91,7 +94,7 @@ export function useDashboardApi(params) {
         },
         get items() {
           return views.views.flatMap(
-            (view) => view.enabled.value ? [{ label: view.label(), value: view.key }] : []
+            (view) => view.enabled.value ? [{ badge: view.badge(), label: view.label(), value: view.key }] : []
           );
         }
       })

package/dist/runtime/dashboard/composables/use-dashboard-views.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef } from 'vue';
-import type { DashboardSourceLike } from '../types/index.js';
+import type { DashboardSourceLike, DashboardViewBadge } from '../types/index.js';
 import type { DashboardRuntimeSchema } from '../types/runtime.js';
 import type { DashboardEnvironment } from '../utils/environment.js';
 import type { DashboardReadTracker } from '../utils/tracker.js';
@@ -23,6 +23,7 @@ export declare function useDashboardViews(params: {
     current: import("vue").WritableComputedRef<string, string>;
     keys: string[];
     views: {
+        badge: () => string | number | undefined;
         enabled: ComputedRef<boolean>;
         input: import("../types/runtime.js").DashboardRuntimeScopeInput;
         key: string;
@@ -54,5 +55,7 @@ export declare function useDashboardViews(params: {
         };
     }[];
 };
+/** A badge worth showing: a non-zero finite number or a non-empty text. */
+export declare function resolveDashboardViewBadge(value: DashboardViewBadge): string | number | undefined;
 /** No filter may take the URL key of the current view. */
 export declare function assertDashboardViewUrlKeys(owner: string, urlKeys: readonly string[]): void;

package/dist/runtime/dashboard/composables/use-dashboard-views.js

@@ -36,6 +36,15 @@ export function useDashboardViews(params) {
     }
   });
   const rootSources = new Map(params.root.members);
+  const rootData = Object.defineProperties(
+    {},
+    Object.fromEntries(
+      [...rootSources].map(([key, source]) => [key, { enumerable: true, get: () => source.data }])
+    )
+  );
+  const badges = computed(
+    () => schema.badges?.({ data: rootData, filters: params.root.filterScope.values }) ?? {}
+  );
   const views = schema.views.map(([key, input]) => {
     const enabled = conditions.get(key) ?? computed(() => true);
     const opened = shallowRef(false);
@@ -60,10 +69,15 @@ export function useDashboardViews(params) {
     });
     assertDashboardViewUrlKeys(key, scope.filterScope.urlKeys);
     const label = () => resolveTextValue(input.label, key);
-    return { enabled, input, key, label, opened, scope };
+    const badge = () => resolveDashboardViewBadge(badges.value[key]);
+    return { badge, enabled, input, key, label, opened, scope };
   });
   return { current, keys, views };
 }
+export function resolveDashboardViewBadge(value) {
+  if (typeof value === "number") return Number.isFinite(value) && value !== 0 ? value : void 0;
+  return value ? value : void 0;
+}
 export function assertDashboardViewUrlKeys(owner, urlKeys) {
   if (urlKeys.includes(DASHBOARD_VIEW_URL_KEY))
     throw new Error(

package/dist/runtime/dashboard/schema/index.d.ts

@@ -1,5 +1,5 @@
 import type { LazyTextValue } from '../../shared/types/utils.js';
-import type { DashboardCondition, DashboardDeriveMap, DashboardEmptyMap, DashboardFilterMap, DashboardKeyError, DashboardReservedKey, DashboardSchema, DashboardScopeGuard, DashboardScopeInput, DashboardSourceMap, DashboardView, DashboardViewMap } from '../types/index.js';
+import type { DashboardCondition, DashboardDeriveMap, DashboardEmptyMap, DashboardFilterMap, DashboardKeyError, DashboardReservedKey, DashboardSchema, DashboardScopeGuard, DashboardScopeInput, DashboardSourceMap, DashboardView, DashboardBadgesContext, DashboardDerivedResources, DashboardViewBadges, DashboardViewMap } from '../types/index.js';
 type DashboardViewsGuard<TQueries, TDerive, TViews> = [
     Extract<keyof TViews, DashboardReservedKey | keyof TQueries | keyof TDerive>
 ] extends [never] ? unknown : {
@@ -47,6 +47,20 @@ export declare function defineDashboardSchema<const TFilters extends DashboardFi
     views?: TViews;
     /** View shown when the URL does not select one. Defaults to the first declared view. */
     defaultView?: NoInfer<keyof TViews & string>;
+    /**
+     * Counts or short texts shown after the view tabs' labels, read from the root queries and
+     * derived values, so a tab can count what waits in it before it is opened. Read lazily: badges
+     * follow the data. `null`, `undefined`, `0`, and `''` show nothing.
+     *
+     * @example
+     * ```ts
+     * badges: ({ data }) => ({
+     *   invoices: data.account?.unpaidInvoices,
+     *   access: data.account?.pendingInvitations,
+     * })
+     * ```
+     */
+    badges?: (context: DashboardBadgesContext<TFilters, TQueries & DashboardDerivedResources<TDerive>>) => DashboardViewBadges<NoInfer<keyof TViews & string>>;
 } & DashboardScopeInput<TFilters, TQueries, TDerive> & DashboardScopeGuard<TQueries, TDerive> & DashboardViewsGuard<TQueries, TDerive, TViews>): DashboardSchema<NoInfer<TFilters>, NoInfer<TQueries>, NoInfer<TDerive>, NoInfer<TViews>>;
 /**
  * Declares one view (tab), self-contained: its label, its filters, its queries and derived values.

package/dist/runtime/dashboard/types/blocks.d.ts

@@ -86,7 +86,7 @@ export interface DashboardReferenceLine {
     position?: 'start' | 'end';
 }
 /** Shape of the loading skeleton, one per block family. */
-export type DashboardSkeletonKind = 'stat' | 'bars' | 'lines' | 'donut' | 'rows' | 'hbars' | 'funnel' | 'stack' | 'paired' | 'feed' | 'table' | 'stats' | 'gauge';
+export type DashboardSkeletonKind = 'stat' | 'bars' | 'lines' | 'donut' | 'rows' | 'hbars' | 'funnel' | 'stack' | 'paired' | 'feed' | 'table' | 'stats' | 'gauge' | 'details';
 /**
  * Built-in card menu actions: `table` switches the content to a data table, `csv` downloads that
  * data, `expand` opens the card in a large dialog.
@@ -259,6 +259,32 @@ export interface DashboardStatsItem<TData> {
     /** Badge next to the value ("Good", "At risk"). `null` hides it. */
     status?: (data: TData) => DashboardStatus | null | undefined;
 }
+/** One field of `UiDashboardDetails`: a label over its value, read from the source data. */
+export interface DashboardDetailsItem<TData> {
+    /** Stable identity, and the name of its slot: `#item-vatNumber`. */
+    key: string;
+    label: LazyTextValue;
+    /**
+     * Numbers go through `format`. `null`, `undefined`, and `''` read as empty: a muted dash, or
+     * `placeholder`.
+     */
+    value: (data: TData) => LazyTextValue | number | null | undefined;
+    format?: DashboardValueFormat;
+    /** Text under the value (a date of change, a unit, a source). */
+    hint?: (data: TData) => LazyTextValue | null | undefined;
+    /** Shown when the value is empty. Defaults to a dash. */
+    placeholder?: LazyTextValue;
+    /** Monospace value, for identifiers and codes. */
+    mono?: boolean;
+    /** A copy button after a non-empty value, for identifiers people paste elsewhere. */
+    copy?: boolean;
+    /** Makes the value a link. */
+    to?: (data: TData) => RouteLocationRaw | null | undefined;
+    /** Columns the field spans: a number, or `'full'` for the whole row. */
+    span?: number | 'full';
+    /** Leaves the field out, e.g. a field that only applies to some records. */
+    hidden?: (data: TData) => boolean;
+}
 /** One tab of `UiDashboardTabs`. */
 export interface DashboardTab<TValue extends string | number = string | number> {
     value: TValue;