nuxt-ui-tools 1.0.1 → 1.1.0

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

@@ -0,0 +1,63 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardListUi, DashboardRowActions, DashboardSelected, DashboardSelectEvent, DashboardSeriesColor, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
+declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "ui"> & {
+        source: DashboardSourceLike<readonly TRow[] | undefined>;
+        label: (row: TRow) => LazyTextValue;
+        description?: (row: TRow) => LazyTextValue | undefined;
+        /** Trailing value. Numbers go through `format`. */
+        value?: (row: TRow) => LazyTextValue;
+        format?: DashboardValueFormat;
+        /** Share in percent, shown before the value (inside the ring with `leading: 'ring'`). */
+        percent?: (row: TRow) => number | null | undefined;
+        /** Change in percent, colored by sign. */
+        delta?: (row: TRow) => number | null | undefined;
+        /**
+         * Leading visual: initials avatar, a short monospace code chip (country, currency…), or a
+         * progress ring filled to `percent`.
+         */
+        leading?: "avatar" | "code" | "ring";
+        /** Avatar initials or code text. Defaults to the label initials. */
+        leadingText?: (row: TRow) => string;
+        icon?: (row: TRow) => string | undefined;
+        /** Ring color of `leading: 'ring'`. Defaults to the palette order. */
+        color?: (row: TRow, index: number) => DashboardSeriesColor | undefined;
+        /** 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 (the value a `select` handler stored). */
+        selected?: DashboardSelected<TRow>;
+        /** Actions of each row: inline icon buttons and a `⋮` menu at the end of the row. */
+        rowActions?: DashboardRowActions<TRow>;
+        /** Makes each row a button. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardListUi;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        item?: (props: {
+            row: TRow;
+            index: number;
+        }) => unknown;
+        trailing?: (props: {
+            row: TRow;
+            index: number;
+        }) => unknown;
+        '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-list.vue

@@ -0,0 +1,239 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNumber } from "#ui-tools/shared/utils/predicate";
+import { resolveTextValue } from "#ui-tools/shared/utils/render";
+import { useDashboardFormat } from "../composables/use-dashboard-format";
+import { useDashboardUi } from "../composables/use-dashboard-ui";
+import { resolveDashboardColor } from "../utils/charts";
+import { toDashboardCell } from "../utils/export";
+import {
+  DASHBOARD_ROW_BUTTON,
+  DASHBOARD_SELECTABLE_ROW,
+  DASHBOARD_SELECTED_ROW,
+  resolveDashboardClasses
+} from "../utils/ui";
+import DashboardRing from "./block/dashboard-ring.vue";
+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,
+  description,
+  value,
+  format,
+  percent,
+  delta,
+  leading,
+  leadingText,
+  icon,
+  color,
+  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 },
+  description: { type: Function, required: false },
+  value: { type: Function, required: false },
+  format: { type: Function, required: false },
+  percent: { type: Function, required: false },
+  delta: { type: Function, required: false },
+  leading: { type: String, required: false },
+  leadingText: { type: Function, required: false },
+  icon: { type: Function, required: false },
+  color: { type: Function, 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(
+    {
+      avatar: "grid size-[30px] shrink-0 place-items-center rounded-[7px] bg-elevated text-[11px] font-semibold text-muted",
+      code: "grid h-[22px] min-w-8 shrink-0 place-items-center rounded-[5px] bg-elevated px-1.5 font-mono text-[11px] font-semibold text-muted",
+      delta: "shrink-0 text-xs font-semibold tabular-nums",
+      description: "block truncate text-xs text-muted",
+      label: "block truncate font-medium text-default",
+      ring: "text-[9.5px] font-semibold tracking-tight whitespace-nowrap text-default tabular-nums",
+      row: "flex min-w-0 items-center gap-3 py-[9px] text-[13px]",
+      share: "shrink-0 text-xs text-muted tabular-nums",
+      value: "shrink-0 font-semibold text-highlighted tabular-nums"
+    },
+    appUi.value.list,
+    ui
+  )
+);
+const entries = computed(
+  () => (source.data ?? []).map((row, index) => {
+    const text = resolveTextValue(label(row));
+    const raw = value?.(row);
+    const change = delta?.(row);
+    const share = percent?.(row);
+    return {
+      actions: rowActions?.(row, index) ?? [],
+      change: isNumber(change) ? { good: change >= 0, label: formats.delta.value(change) } : null,
+      color: resolveDashboardColor(color?.(row, index), index),
+      delta: change,
+      description: description ? resolveTextValue(description(row)) : "",
+      icon: icon?.(row),
+      index,
+      key: rowKey?.(row, index) ?? index,
+      label: text,
+      leading: leading === "avatar" || leading === "code" ? leadingText?.(row) ?? initials(text) : "",
+      percent: share,
+      raw,
+      row,
+      selected: selected?.(row, index) ?? false,
+      share: isNumber(share) ? formats.percent.value(share) : "",
+      value: isNumber(raw) ? (format ?? formats.number.value)(raw) : resolveTextValue(raw)
+    };
+  })
+);
+const visible = (expanded) => limit && !expanded ? entries.value.slice(0, limit) : entries.value;
+function tabulate() {
+  const columns = [
+    { key: "label", label: t("dashboard.table.label"), numeric: false },
+    description && { key: "description", label: t("dashboard.table.description"), numeric: false },
+    percent && { key: "share", label: t("dashboard.table.share"), numeric: true },
+    delta && { key: "change", label: t("dashboard.table.change"), numeric: true },
+    value && { key: "value", label: t("dashboard.table.value"), numeric: true }
+  ];
+  return {
+    columns: columns.filter((column) => column !== void 0),
+    rows: entries.value.map(
+      (entry) => [
+        toDashboardCell(entry.label),
+        description && toDashboardCell(entry.description),
+        percent && toDashboardCell(entry.percent, entry.share),
+        delta && toDashboardCell(entry.delta, entry.change?.label ?? ""),
+        value && toDashboardCell(isNumber(entry.raw) ? entry.raw : entry.value, entry.value)
+      ].filter((cell) => cell !== void 0)
+    )
+  };
+}
+function initials(text) {
+  return text.split(/\s+/u).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
+}
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :ui
+    :source
+    :is-empty="entries.length === 0"
+    :tabulate
+  >
+    <template #skeleton>
+      <DashboardSkeleton
+        kind="rows"
+        :count="limit ?? 6"
+        :leading="leading === 'ring' ? 'icon' : leading"
+      />
+    </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 divide-y divide-[var(--nut-dash-grid)]">
+        <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
+]"
+        >
+          <slot name="item" :row="entry.row" :index="entry.index">
+            <span v-if="leading === 'avatar'" :class="classes.avatar">{{ entry.leading }}</span>
+            <span v-else-if="leading === 'code'" :class="classes.code">{{ entry.leading }}</span>
+            <DashboardRing
+              v-else-if="leading === 'ring'"
+              :ratio="(entry.percent ?? 0) / 100"
+              :color="entry.color"
+              :size="40"
+              :thickness="3"
+            >
+              <span :class="classes.ring">{{ entry.share }}</span>
+            </DashboardRing>
+            <UIcon v-else-if="entry.icon" :name="entry.icon" class="size-4 shrink-0 text-dimmed" />
+            <div class="min-w-0 flex-1">
+              <b :class="classes.label">{{ entry.label }}</b>
+              <small v-if="entry.description" :class="classes.description">
+                {{ entry.description }}
+              </small>
+            </div>
+            <span v-if="entry.share && leading !== 'ring'" :class="classes.share">
+              {{ entry.share }}
+            </span>
+            <span
+              v-if="entry.change"
+              :data-trend="entry.change.good ? 'up' : 'down'"
+              :class="[
+  classes.delta,
+  entry.change.good ? 'text-[var(--nut-dash-up)]' : 'text-[var(--nut-dash-down)]'
+]"
+            >
+              {{ entry.change.label }}
+            </span>
+            <span :class="classes.value">
+              <slot name="trailing" :row="entry.row" :index="entry.index">{{ entry.value }}</slot>
+            </span>
+          </slot>
+          <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 })"
+          />
+          <DashboardRowActionsMenu
+            v-if="entry.actions.length"
+            :actions="entry.actions"
+            :label="entry.label"
+          />
+        </li>
+      </ul>
+    </template>
+  </DashboardCard>
+</template>

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

@@ -0,0 +1,63 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardListUi, DashboardRowActions, DashboardSelected, DashboardSelectEvent, DashboardSeriesColor, DashboardSourceLike, DashboardValueFormat } from '../types/index.js';
+declare const __VLS_export: <TRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "ui"> & {
+        source: DashboardSourceLike<readonly TRow[] | undefined>;
+        label: (row: TRow) => LazyTextValue;
+        description?: (row: TRow) => LazyTextValue | undefined;
+        /** Trailing value. Numbers go through `format`. */
+        value?: (row: TRow) => LazyTextValue;
+        format?: DashboardValueFormat;
+        /** Share in percent, shown before the value (inside the ring with `leading: 'ring'`). */
+        percent?: (row: TRow) => number | null | undefined;
+        /** Change in percent, colored by sign. */
+        delta?: (row: TRow) => number | null | undefined;
+        /**
+         * Leading visual: initials avatar, a short monospace code chip (country, currency…), or a
+         * progress ring filled to `percent`.
+         */
+        leading?: "avatar" | "code" | "ring";
+        /** Avatar initials or code text. Defaults to the label initials. */
+        leadingText?: (row: TRow) => string;
+        icon?: (row: TRow) => string | undefined;
+        /** Ring color of `leading: 'ring'`. Defaults to the palette order. */
+        color?: (row: TRow, index: number) => DashboardSeriesColor | undefined;
+        /** 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 (the value a `select` handler stored). */
+        selected?: DashboardSelected<TRow>;
+        /** Actions of each row: inline icon buttons and a `⋮` menu at the end of the row. */
+        rowActions?: DashboardRowActions<TRow>;
+        /** Makes each row a button. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardListUi;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        item?: (props: {
+            row: TRow;
+            index: number;
+        }) => unknown;
+        trailing?: (props: {
+            row: TRow;
+            index: number;
+        }) => unknown;
+        '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-paired-bars.d.vue.ts

@@ -0,0 +1,43 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardPairedBarsUi, 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;
+        /** Outer bar (e.g. registered). Scaled against the largest total. */
+        total: (row: TRow) => number;
+        /** Inner bar, drawn inside the total (e.g. delivered). */
+        value: (row: TRow) => number;
+        /** Legend labels. When both are set, a legend renders in the header. */
+        totalLabel?: LazyTextValue;
+        valueLabel?: LazyTextValue;
+        format?: DashboardValueFormat;
+        /** `[total, value]` colors. */
+        colors?: readonly [DashboardSeriesColor, DashboardSeriesColor];
+        /** Rows shown in the card. The expand dialog, table view, and CSV export show them all. */
+        limit?: number;
+        rowKey?: (row: TRow, index: number) => PropertyKey;
+        /** Makes each row a button. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardPairedBarsUi;
+    }> & (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-paired-bars.vue

@@ -0,0 +1,194 @@
+<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 { resolveDashboardColor } from "../utils/charts";
+import { toDashboardCell } from "../utils/export";
+import {
+  DASHBOARD_ROW_BUTTON,
+  DASHBOARD_SELECTABLE_ROW,
+  resolveDashboardClasses
+} from "../utils/ui";
+import DashboardSkeleton from "./block/dashboard-skeleton.vue";
+import DashboardCard from "./dashboard-card.vue";
+const {
+  source,
+  card = true,
+  menu = void 0,
+  freshness = void 0,
+  label,
+  total,
+  value,
+  totalLabel,
+  valueLabel,
+  format,
+  colors,
+  limit,
+  rowKey,
+  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 },
+  total: { type: Function, required: true },
+  value: { type: Function, required: true },
+  totalLabel: { type: [String, Number, Function], required: false },
+  valueLabel: { type: [String, Number, Function], required: false },
+  format: { type: Function, required: false },
+  colors: { type: Array, required: false },
+  limit: { type: Number, required: false },
+  rowKey: { 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(
+    {
+      label: "truncate text-[13px] text-default",
+      row: "grid grid-cols-[minmax(0,150px)_1fr_auto] items-center gap-3 py-1.5 max-sm:grid-cols-[minmax(0,110px)_1fr_auto]",
+      track: "h-3 overflow-hidden rounded-full bg-[var(--nut-dash-track)]",
+      value: "flex min-w-[130px] items-baseline justify-end gap-[5px] tabular-nums max-sm:min-w-0"
+    },
+    appUi.value.pairedBars,
+    ui
+  )
+);
+const totalColor = computed(() => resolveDashboardColor(colors?.[0] ?? "series-4", 3));
+const valueColor = computed(() => resolveDashboardColor(colors?.[1] ?? "series-1", 0));
+const legend = computed(
+  () => totalLabel && valueLabel ? [
+    { color: totalColor.value, key: "total", label: resolveTextValue(totalLabel) },
+    { color: valueColor.value, key: "value", label: resolveTextValue(valueLabel) }
+  ] : void 0
+);
+const formatValue = computed(() => format ?? formats.number.value);
+const entries = computed(
+  () => (source.data ?? []).map((row, index) => {
+    const outer = total(row);
+    const inner = value(row);
+    return {
+      index,
+      inner,
+      innerWidth: outer > 0 ? `${Math.min(100, inner / outer * 100)}%` : "0%",
+      key: rowKey?.(row, index) ?? index,
+      label: resolveTextValue(label(row)),
+      outer,
+      ratio: outer > 0 ? formats.percent.value(Math.round(inner / outer * 100)) : "",
+      row
+    };
+  })
+);
+function visible(expanded) {
+  const shown = limit && !expanded ? entries.value.slice(0, limit) : entries.value;
+  const largest = Math.max(0, ...shown.map((entry) => entry.outer));
+  return shown.map((entry) => ({
+    ...entry,
+    outerWidth: largest > 0 ? `${entry.outer / largest * 100}%` : "0%"
+  }));
+}
+function tabulate() {
+  return {
+    columns: [
+      { key: "label", label: t("dashboard.table.label"), numeric: false },
+      {
+        key: "value",
+        label: resolveTextValue(valueLabel, t("dashboard.table.value")),
+        numeric: true
+      },
+      {
+        key: "total",
+        label: resolveTextValue(totalLabel, t("dashboard.table.total")),
+        numeric: true
+      }
+    ],
+    rows: entries.value.map((entry) => [
+      toDashboardCell(entry.label),
+      toDashboardCell(entry.inner, formatValue.value(entry.inner)),
+      toDashboardCell(entry.outer, formatValue.value(entry.outer))
+    ])
+  };
+}
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :ui
+    :source
+    :legend
+    :is-empty="entries.length === 0"
+    :tabulate
+  >
+    <template #skeleton>
+      <DashboardSkeleton kind="paired" :count="limit ?? 8" />
+    </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"
+          :class="[classes.row, onSelect && DASHBOARD_SELECTABLE_ROW]"
+        >
+          <span :class="classes.label" :title="entry.label">{{ entry.label }}</span>
+          <div :class="classes.track">
+            <div
+              class="relative h-full rounded-full transition-[width] duration-500 ease-out"
+              :style="{ background: totalColor, width: entry.outerWidth }"
+            >
+              <div
+                class="absolute inset-y-0 start-0 rounded-full transition-[width] duration-500 ease-out"
+                :style="{ background: valueColor, width: entry.innerWidth }"
+              />
+            </div>
+          </div>
+          <span :class="classes.value">
+            <b class="text-[13.5px] font-semibold text-highlighted">
+              {{ formatValue(entry.inner) }}
+            </b>
+            <span class="text-xs text-muted">/ {{ formatValue(entry.outer) }}</span>
+            <small class="min-w-[34px] text-end text-[11.5px] text-dimmed max-sm:hidden">
+              {{ entry.ratio }}
+            </small>
+          </span>
+          <button
+            v-if="onSelect"
+            type="button"
+            :class="DASHBOARD_ROW_BUTTON"
+            :aria-label="entry.label"
+            @click="onSelect({ index: entry.index, row: entry.row })"
+          />
+        </li>
+      </ul>
+    </template>
+  </DashboardCard>
+</template>

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

@@ -0,0 +1,43 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardPairedBarsUi, 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;
+        /** Outer bar (e.g. registered). Scaled against the largest total. */
+        total: (row: TRow) => number;
+        /** Inner bar, drawn inside the total (e.g. delivered). */
+        value: (row: TRow) => number;
+        /** Legend labels. When both are set, a legend renders in the header. */
+        totalLabel?: LazyTextValue;
+        valueLabel?: LazyTextValue;
+        format?: DashboardValueFormat;
+        /** `[total, value]` colors. */
+        colors?: readonly [DashboardSeriesColor, DashboardSeriesColor];
+        /** Rows shown in the card. The expand dialog, table view, and CSV export show them all. */
+        limit?: number;
+        rowKey?: (row: TRow, index: number) => PropertyKey;
+        /** Makes each row a button. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardPairedBarsUi;
+    }> & (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-refresh.d.vue.ts

@@ -0,0 +1,29 @@
+/** What the control drives: the dashboard object returned by `useDashboard`. */
+interface DashboardRefreshTarget {
+    refresh: () => Promise<void>;
+    readonly refreshing: boolean;
+    readonly updatedAt: number | undefined;
+    autoRefresh: number;
+}
+/**
+ * Refresh control for a dashboard header: a refresh button, an auto-refresh interval menu (kept in
+ * the URL by the dashboard), and "Updated 3 min ago".
+ *
+ * @example
+ * ```vue
+ * <UiDashboardRefresh :dashboard />
+ * ```
+ */
+type __VLS_Props = {
+    dashboard: DashboardRefreshTarget;
+    /** Auto-refresh choices in seconds; `0` turns it off. */
+    intervals?: readonly number[];
+    /** Shows when the data on screen was last fetched. */
+    updated?: boolean;
+    /** Shows the "Refresh" label next to the icon. */
+    label?: boolean;
+    size?: 'xs' | 'sm' | 'md';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;