nuxt-ui-tools 1.6.4 → 1.7.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.4",
+  "version": "1.7.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",
@@ -423,6 +424,7 @@ 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"));
     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;

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

@@ -4,6 +4,7 @@ import type { LazyTextValue } from '../../shared/types/utils.js';
 import type { DashboardOptionsMenuBindings } from './controls.js';
 import type { DashboardFilterBuilder, DashboardFilterLike, DashboardOption } from './filters.js';
 import type { DashboardCondition, DashboardSourceLike, DashboardStage } from './resource.js';
+import type { DashboardViewBadge } from './schema.js';
 /**
  * Runtime (type-erased) view of the schema. The public schema types carry precise generics; the
  * runtime reads the same objects through these shapes after one normalization step.
@@ -48,6 +49,8 @@ export interface DashboardRuntimeSchema extends DashboardRuntimeScopeInput {
     defaultView?: string;
     /** Views in declaration order. Each input is the object the schema declared. */
     views: [key: string, view: DashboardRuntimeScopeInput][];
+    /** Badges of the view tabs, read from the root data. */
+    badges?: (context: DashboardRuntimeDeriveContext) => Record<string, DashboardViewBadge>;
 }
 /**
  * Option list behind one filter control, static or remote. Both option composables return this

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

@@ -78,6 +78,7 @@ export interface DashboardSchema<TFilters extends DashboardFilterMap = Dashboard
     readonly derive?: (context: never) => TDerive;
     readonly views?: TViews;
     readonly defaultView?: keyof TViews & string;
+    readonly badges?: (context: never) => DashboardViewBadges<keyof TViews & string>;
 }
 /** Structural constraint every schema returned by `defineDashboardSchema` satisfies. */
 export interface DashboardSchemaLike {
@@ -89,6 +90,7 @@ export interface DashboardSchemaLike {
     readonly derive?: (context: never) => DashboardDeriveMap;
     readonly views?: DashboardViewMap;
     readonly defaultView?: string;
+    readonly badges?: (context: never) => DashboardViewBadges<string>;
 }
 /** Structural constraint every view returned by `defineDashboardView` satisfies. */
 export interface DashboardViewLike {
@@ -152,9 +154,29 @@ export interface DashboardScopeMembers<TFilters> {
     /** Refetches every active query of this scope. */
     refresh(): Promise<void>;
 }
+/** What a view's `badge` returns: a count or a short text; empty values show nothing. */
+export type DashboardViewBadge = number | string | null | undefined;
+/** Badges of a dashboard's views, by view key; a view left out shows none. */
+export type DashboardViewBadges<TKey extends string> = {
+    readonly [K in TKey]?: DashboardViewBadge;
+};
+/** Context received by a schema's `badges`: the data of its root queries and derived values. */
+export interface DashboardBadgesContext<TFilters, TSources> {
+    data: DashboardSourceData<TSources>;
+    filters: Readonly<DashboardFilterValues<TFilters>>;
+}
+/** One tab of a dashboard's views. */
+export interface DashboardViewItem<TKey extends string> {
+    value: TKey;
+    label: string;
+    /** The view's badge (see the schema's `badges`), when it shows something. */
+    badge?: number | string;
+}
 export interface DashboardViewMeta<TKey extends string> {
     readonly key: TKey;
     readonly label: string;
+    /** The view's badge (see the schema's `badges`), when it shows something. */
+    readonly badge: number | string | undefined;
     /** The view is the current one. */
     readonly active: boolean;
     /** The view's `enabled` condition holds. A disabled view has no tab and cannot be current. */
@@ -170,10 +192,7 @@ export interface DashboardViewController<TKey extends string> {
      */
     current: TKey;
     /** Enabled views in declaration order, ready for `UTabs` items. */
-    readonly items: readonly {
-        value: TKey;
-        label: string;
-    }[];
+    readonly items: readonly DashboardViewItem<TKey>[];
 }
 /** Handle of one view: its queries, derived values and filters (`consumption.filters.year`). */
 export type DashboardViewHandle<TView, TKey extends string> = Prettify<InferQueries<TView> & DashboardDerivedResources<InferDerive<TView>> & DashboardScopeMembers<InferFilters<TView>> & {

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

@@ -46,6 +46,21 @@ export interface DashboardStatUi {
     /** Line under the progress bar: goal and completion. */
     goal?: string;
 }
+export interface DashboardDetailsUi {
+    /** The description list: a grid of fields. */
+    grid?: string;
+    /** One field; carries `data-empty` while its value is empty. */
+    item?: string;
+    label?: string;
+    value?: string;
+    /** Dash or `placeholder` of an empty value. */
+    placeholder?: string;
+    hint?: string;
+    /** Link of an item with `to`. */
+    link?: string;
+    /** Copy button of an item with `copy`. */
+    copy?: string;
+}
 export interface DashboardStatsUi {
     /** Grid of the figures. */
     grid?: string;
@@ -219,12 +234,21 @@ export interface DashboardChipsUi {
 export interface DashboardPageUi {
     /** The page, and its scroll container: the tabs and filters stick to its top. */
     root?: string;
+    /** Carries `data-leading` while the `#leading` slot is filled. */
     header?: string;
+    /** Around the `#eyebrow` slot, above the title. */
+    eyebrow?: string;
+    /** Around the `#leading` slot (an avatar or a logo), beside the title and its line. */
+    leading?: string;
     title?: string;
     /** Today's date and when the data was fetched, under the title. */
     description?: string;
     /** Page actions and the refresh control. */
     actions?: string;
+    /** Around the `#banner` slot, between the header and the pinned band. */
+    banner?: string;
+    /** Around the `#details` slot: a full-width row closing the header (key facts of an entity). */
+    details?: string;
     /** Pinned band of the tabs and the filter bar. Carries `data-stuck` once content scrolls under it. */
     toolbar?: string;
     tabs?: string;
@@ -237,6 +261,8 @@ export interface DashboardViewTabsUi {
     /** The strip: it scrolls sideways when the tabs overflow. */
     root?: string;
     tab?: string;
+    /** Count or text of a view's `badge`, after the tab label. */
+    badge?: string;
 }
 /**
  * App-wide dashboard theming, read from `appConfig.nuxtUiTools.dashboard`.
@@ -258,6 +284,7 @@ export interface DashboardUiConfig {
     grid?: DashboardGridUi;
     stat?: DashboardStatUi;
     stats?: DashboardStatsUi;
+    details?: DashboardDetailsUi;
     gauge?: DashboardGaugeUi;
     legend?: DashboardLegendUi;
     total?: DashboardTotalUi;

package/dist/runtime/dashboard/utils/schema.js

@@ -16,6 +16,7 @@ export function resolveDashboardRuntimeSchema(schema) {
   const views = Object.entries(input.views ?? {});
   return {
     autoRefresh: input.autoRefresh,
+    badges: input.badges,
     defaultView: input.defaultView ?? views[0]?.[0],
     derive: input.derive,
     filters: input.filters,

package/dist/runtime/form/composables/use-form-api.d.ts

@@ -1,3 +1,11 @@
+import type { InjectionKey } from 'vue';
 import type { FormApiController } from '../types/index.js';
+export declare const formApiKey: InjectionKey<FormApiController>;
+/**
+ * Provides the form API to a subtree. Inside a Nuxt app it reuses the app-wide instance the module
+ * plugin exposes as `useNuxtApp().$formApi`, so forms opened from actions outside setup render in
+ * this `<NutFormProvider>`.
+ */
 export declare function provideFormApi(): FormApiController;
 export declare function useFormApi(): FormApiController;
+export declare function createFormApi(): FormApiController;

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

@@ -1,20 +1,20 @@
 import { computed, inject, provide, ref } from "vue";
 import { isRecord } from "../utils/path.js";
 import { isFunction, isString } from "../utils/predicate.js";
-const formApiKey = Symbol("nuxt-ui-tools-form-api");
+export const formApiKey = Symbol("nuxt-ui-tools-form-api");
 export function provideFormApi() {
-  const api = createFormApi();
+  const api = inject(formApiKey, null) ?? createFormApi();
   provide(formApiKey, api);
   return api;
 }
 export function useFormApi() {
-  const api = inject(formApiKey);
+  const api = inject(formApiKey, null);
   if (!api) {
     throw new Error("Form API is not provided. Wrap your app with <NutFormProvider>.");
   }
   return api;
 }
-function createFormApi() {
+export function createFormApi() {
   const formInstances = ref([]);
   const controllers = /* @__PURE__ */ new Map();
   const runtimeControls = /* @__PURE__ */ new Map();

package/dist/runtime/form/fields/choice-card/use-choice-card.js

@@ -32,6 +32,9 @@ export function useChoiceCard(params) {
         corner.value ? "relative" : void 0,
         current?.item
       ),
+      // The card label renders the option icon itself (inline or as a tile): Nuxt UI's own copy
+      // would show it twice.
+      icon: mergeFormUiClass("hidden", current?.icon),
       // A tile stacks above the title, and the description below it, with gaps.
       label: mergeFormUiClass(
         tile.value ? "flex flex-col items-start gap-2.5 font-semibold" : void 0,
@@ -39,7 +42,7 @@ export function useChoiceCard(params) {
       ),
       // A hidden indicator centers the text: keep it aligned, and clear of an inline corner check.
       wrapper: mergeFormUiClass(
-        tile.value ? "flex flex-col gap-1.5" : void 0,
+        tile.value ? "flex flex-col items-start gap-1.5" : void 0,
         [
           indicator.value === "hidden" ? "ms-0 text-start" : "",
           corner.value && !tile.value ? "pe-7" : ""

package/dist/runtime/form/plugins/form-api.d.ts

@@ -0,0 +1,10 @@
+/**
+ * One form API for the whole app: components reach it with `useFormApi()`, and code running outside
+ * setup (actions, stores) with `useNuxtApp().$formApi`. `<NutFormProvider>` renders its overlays.
+ */
+declare const _default: import("#app/nuxt").Plugin<{
+    formApi: import("..").FormApiController;
+}> & import("#app/nuxt").ObjectPlugin<{
+    formApi: import("..").FormApiController;
+}>;
+export default _default;

package/dist/runtime/form/plugins/form-api.js

@@ -0,0 +1,10 @@
+import { defineNuxtPlugin } from "#app";
+import { createFormApi, formApiKey } from "../composables/use-form-api.js";
+export default defineNuxtPlugin({
+  name: "nuxt-ui-tools:form-api",
+  setup(nuxtApp) {
+    const formApi = createFormApi();
+    nuxtApp.vueApp.provide(formApiKey, formApi);
+    return { provide: { formApi } };
+  }
+});

package/dist/runtime/i18n/locales/en.js

@@ -3,6 +3,10 @@ export default defineUiToolsLocale({
   code: "en",
   messages: {
     dashboard: {
+      details: {
+        copied: "Copied",
+        copy: "Copy"
+      },
       alerts: {
         empty: "Nothing needs attention",
         severity: {

package/dist/runtime/i18n/locales/fr.js

@@ -3,6 +3,10 @@ export default defineUiToolsLocale({
   code: "fr",
   messages: {
     dashboard: {
+      details: {
+        copied: "Copi\xE9",
+        copy: "Copier"
+      },
       alerts: {
         empty: "Rien \xE0 signaler",
         severity: {

package/dist/runtime/i18n/types.d.ts

@@ -512,6 +512,12 @@ export interface UiToolsDashboardMessages {
     };
     /** Accessible name of a row's `⋮` menu. */
     rowActions: string;
+    details: {
+        /** Accessible name of an item's copy button. */
+        copy: string;
+        /** Announced once the value is on the clipboard. */
+        copied: string;
+    };
     alerts: {
         empty: string;
         severity: {

package/dist/runtime/table/components/table/table-renderer.vue

@@ -730,9 +730,7 @@ defineExpose({ resetColumnSizing });
         </tbody>
 
         <tfoot
-          v-if="
-  footerRows.length > 0 && !isFirstLoad && !error && (hasDeclarativeSummaries || !empty)
-"
+          v-if="footerRows.length > 0 && rows.length > 0 && !isFirstLoad && !error"
           :class="mergeDataListUiClass('nut-dl-table__foot', void 0, ui?.tfoot)"
         >
           <tr v-for="summaryRow in footerRows" :key="summaryRow" class="nut-dl-table__foot-row">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",