nuxt-ui-tools 1.0.1 → 1.1.0

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

@@ -0,0 +1,279 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { twMerge } from "tailwind-merge";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNumber, isString } 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 { resolveDashboardSparkBars, resolveDashboardSparkline } from "../utils/sparkline";
+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,
+  value,
+  format,
+  delta,
+  deltaFormat,
+  invertDelta = false,
+  caption,
+  label,
+  icon,
+  trend,
+  trendType = "area",
+  trendColor = "series-1",
+  compare,
+  compareLabel,
+  goal,
+  status,
+  ui,
+  ...block
+} = defineProps({
+  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: [String, Number, Function], required: true },
+  value: { type: Function, required: true },
+  format: { type: Function, required: false },
+  delta: { type: Function, required: false },
+  deltaFormat: { type: Function, required: false },
+  invertDelta: { type: Boolean, required: false },
+  caption: { type: [String, Function], required: false },
+  icon: { type: String, required: false },
+  trend: { type: Function, required: false },
+  trendType: { type: String, required: false },
+  trendColor: { type: String, required: false },
+  compare: { type: Function, required: false },
+  compareLabel: { type: [String, Number, Function], required: false },
+  goal: { type: Function, required: false },
+  status: { type: Function, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const { t } = useUiToolsLocale();
+const formats = useDashboardFormat();
+const appUi = useDashboardUi();
+const ready = computed(() => {
+  const data = source.data;
+  return data === void 0 ? null : { data };
+});
+const resolved = computed(() => ready.value ? value(ready.value.data) : void 0);
+const formatValue = computed(() => format ?? formats.number.value);
+const display = computed(() => {
+  if (resolved.value === void 0) return "";
+  return isNumber(resolved.value) ? formatValue.value(resolved.value) : resolveTextValue(resolved.value);
+});
+const previous = computed(() => {
+  if (!ready.value || !compare) return null;
+  const amount = compare(ready.value.data);
+  return isNumber(amount) && Number.isFinite(amount) ? amount : null;
+});
+const change = computed(() => {
+  if (!ready.value) return null;
+  const amount = delta ? delta(ready.value.data) : previous.value !== null && previous.value !== 0 && isNumber(resolved.value) ? (resolved.value - previous.value) / Math.abs(previous.value) * 100 : null;
+  if (amount === null || amount === void 0 || !Number.isFinite(amount)) return null;
+  const good = invertDelta ? amount <= 0 : amount >= 0;
+  return { good, label: (deltaFormat ?? formats.delta.value)(amount), up: amount >= 0 };
+});
+const captionText = computed(() => {
+  if (!ready.value) return "";
+  if (caption !== void 0)
+    return isString(caption) ? caption : resolveTextValue(caption(ready.value.data));
+  if (previous.value === null) return "";
+  const before = formatValue.value(previous.value);
+  if (compareLabel === void 0) return t("dashboard.compare.caption", { value: before });
+  return resolveTextValue(
+    isString(compareLabel) || isNumber(compareLabel) ? compareLabel : compareLabel(before)
+  );
+});
+const sparkline = computed(() => {
+  if (!ready.value || !trend || trendType === "bars") return null;
+  return resolveDashboardSparkline(trend(ready.value.data) ?? []);
+});
+const sparkBars = computed(() => {
+  if (!ready.value || !trend || trendType !== "bars") return null;
+  return resolveDashboardSparkBars(trend(ready.value.data) ?? []);
+});
+const progress = computed(() => {
+  if (!ready.value || !goal || !isNumber(resolved.value)) return null;
+  const target = goal(ready.value.data);
+  if (!isNumber(target) || target <= 0) return null;
+  const completion = resolved.value / target * 100;
+  const filled = Math.round(Math.max(0, Math.min(100, completion)));
+  return {
+    completion: formats.percent.value(completion),
+    filled,
+    goal: t("dashboard.stat.goal", { value: formatValue.value(target) }),
+    reached: completion >= 100
+  };
+});
+const statusInfo = computed(() => {
+  const current = ready.value && status ? status(ready.value.data) : null;
+  if (!current) return null;
+  return {
+    color: resolveDashboardColor(current.color, 0),
+    label: resolveTextValue(current.label),
+    tone: current.color
+  };
+});
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      caption: "min-w-0",
+      delta: "shrink-0 font-semibold tabular-nums",
+      goal: "mt-1.5 flex items-baseline justify-between gap-2 text-[11.5px] text-muted tabular-nums",
+      label: "text-[12.5px] font-normal tracking-normal text-muted",
+      mark: "me-0.5 text-[9px]",
+      meta: "mt-2.5 flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs leading-[1.35] text-muted",
+      progress: "mt-3.5 h-1.5 overflow-hidden rounded-full bg-[var(--nut-dash-track)]",
+      status: "inline-flex items-center gap-1.5 text-[11.5px] font-medium",
+      trend: "mt-3 h-8 w-full overflow-visible",
+      value: "mt-1.5 text-[26px] leading-none font-semibold tracking-tight text-highlighted tabular-nums"
+    },
+    appUi.value.stat,
+    ui
+  )
+);
+const cardUi = computed(() => ({
+  ...ui,
+  header: twMerge("mb-2.5", ui?.header),
+  title: classes.value.label
+}));
+const trendStroke = computed(() => resolveDashboardColor(trendColor, 0));
+const extra = computed(() => trend ? "trend" : goal ? "goal" : void 0);
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :source
+    :title="label"
+    :ui="cardUi"
+    :expandable="false"
+  >
+    <template #skeleton>
+      <DashboardSkeleton kind="stat" :extra />
+    </template>
+    <template v-if="icon || statusInfo" #header-right>
+      <span
+        v-if="statusInfo"
+        :data-status="statusInfo.tone"
+        :class="classes.status"
+        :style="{ color: statusInfo.color }"
+      >
+        <span aria-hidden="true" class="size-1.5 rounded-full bg-current" />
+        {{ statusInfo.label }}
+      </span>
+      <UIcon v-if="icon" :name="icon" class="size-4 text-dimmed" />
+    </template>
+
+    <template v-if="ready">
+      <div :class="classes.value">
+        <slot name="value" :data="ready.data" :value="display">{{ display }}</slot>
+      </div>
+      <div v-if="change || captionText || $slots.caption" :class="classes.meta">
+        <span
+          v-if="change"
+          :data-trend="change.good ? 'up' : 'down'"
+          :class="[
+  classes.delta,
+  change.good ? 'text-[var(--nut-dash-up)]' : 'text-[var(--nut-dash-down)]'
+]"
+        >
+          <span
+            aria-hidden="true"
+            :class="[
+  classes.mark,
+  change.good ? 'text-[var(--nut-dash-up-mark)]' : 'text-[var(--nut-dash-down)]'
+]"
+            >{{ change.up ? "\u25B2" : "\u25BC" }}</span
+          >{{ change.label }}
+        </span>
+        <span :class="classes.caption">
+          <slot name="caption" :data="ready.data">{{ captionText }}</slot>
+        </span>
+      </div>
+      <svg
+        v-if="sparkline"
+        :class="classes.trend"
+        viewBox="0 0 100 32"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+        data-sparkline
+      >
+        <path
+          v-if="trendType === 'area'"
+          :d="sparkline.area"
+          :fill="trendStroke"
+          fill-opacity="0.12"
+        />
+        <path
+          :d="sparkline.line"
+          fill="none"
+          :stroke="trendStroke"
+          stroke-width="1.75"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+      <svg
+        v-if="sparkBars"
+        :class="classes.trend"
+        viewBox="0 0 100 32"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+        data-sparkline="bars"
+      >
+        <rect
+          v-for="(bar, index) in sparkBars"
+          :key="index"
+          :x="bar.x"
+          :y="bar.y"
+          :width="bar.width"
+          :height="bar.height"
+          rx="1"
+          :fill="trendStroke"
+          :fill-opacity="bar.last ? 1 : 0.35"
+        />
+      </svg>
+      <template v-if="progress">
+        <div
+          role="progressbar"
+          :aria-valuenow="progress.filled"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :aria-label="progress.goal"
+          :class="classes.progress"
+        >
+          <i
+            class="block h-full rounded-full transition-[width] duration-500 ease-out"
+            :style="{
+  background: progress.reached ? 'var(--nut-dash-up-mark)' : trendStroke,
+  width: `${progress.filled}%`
+}"
+          />
+        </div>
+        <div :class="classes.goal">
+          <span>{{ progress.goal }}</span>
+          <b class="font-semibold text-highlighted">{{ progress.completion }}</b>
+        </div>
+      </template>
+    </template>
+  </DashboardCard>
+</template>

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

@@ -0,0 +1,69 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardSeriesColor, DashboardSourceLike, DashboardStatUi, DashboardStatus, DashboardValueFormat } 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" | "title" | "subtitle"> & {
+        source: DashboardSourceLike<TData>;
+        /** KPI label, shown above the value. */
+        label: LazyTextValue;
+        /** Main value. Numbers go through `format` (locale number format by default). */
+        value: (data: TData & ({} | null)) => LazyTextValue;
+        format?: DashboardValueFormat;
+        /**
+         * Change indicator, in percent by default. `null` hides it. Defaults to the change from
+         * `compare` when that is set.
+         */
+        delta?: (data: TData & ({} | null)) => number | null | undefined;
+        deltaFormat?: DashboardValueFormat;
+        /** A decrease is good news (e.g. a failure rate): colors the delta accordingly. */
+        invertDelta?: boolean;
+        /** Secondary text after the delta. Wraps under it when space runs out. */
+        caption?: string | ((data: TData & ({} | null)) => LazyTextValue | undefined);
+        icon?: string;
+        /** Recent values, oldest first, drawn as a sparkline under the value. `null` leaves a gap. */
+        trend?: (data: TData & ({} | null)) => readonly (number | null | undefined)[] | undefined;
+        /** How `trend` is drawn: a filled line (default), a bare line, or mini bars. */
+        trendType?: "area" | "line" | "bars";
+        trendColor?: DashboardSeriesColor;
+        /**
+         * The same measure over the comparison period (previous period, previous year). Gives the
+         * default `delta`, and the default caption ("vs 1,204 previous period").
+         */
+        compare?: (data: TData & ({} | null)) => number | null | undefined;
+        /**
+         * Caption shown with `compare`, as text or built from the formatted previous value. Defaults to
+         * "vs <value> previous period".
+         */
+        compareLabel?: LazyTextValue | ((previous: string) => LazyTextValue);
+        /**
+         * Target of a numeric `value`: draws a progress bar with the goal and the completion. `null`
+         * hides it.
+         */
+        goal?: (data: TData & ({} | null)) => number | null | undefined;
+        /** Status on the title row (a colored dot and label). `null` hides it. */
+        status?: (data: TData & ({} | null)) => DashboardStatus | null | undefined;
+        ui?: DashboardBlockUi & DashboardStatUi;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        value?: (props: {
+            data: TData & ({} | null);
+            value: string;
+        }) => unknown;
+        caption?: (props: {
+            data: TData & ({} | null);
+        }) => 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-stats.d.vue.ts

@@ -0,0 +1,38 @@
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardSourceLike, DashboardStatsItem, DashboardStatsUi } 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>;
+        /** Figures read from the source data, in display order. */
+        items: readonly DashboardStatsItem<TData & ({} | null)>[];
+        /**
+         * Column count, responsive: `"2 md:4"`. Defaults to one column per figure (up to 4), two on
+         * small screens.
+         */
+        columns?: string;
+        /**
+         * `plain`: figures side by side. `divided`: 1px rules between them. `tiles`: each figure in its
+         * own bordered box.
+         */
+        variant?: "plain" | "divided" | "tiles";
+        ui?: DashboardBlockUi & DashboardStatsUi;
+    }> & (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-stats.vue

@@ -0,0 +1,202 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useResponsiveValue } from "#ui-tools/shared/composables/use-responsive-value";
+import { isNumber, isString } 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 { 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,
+  variant = "plain",
+  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 },
+  items: { type: Array, required: true },
+  columns: { type: String, required: false },
+  variant: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const { t } = useUiToolsLocale();
+const formats = useDashboardFormat();
+const appUi = useDashboardUi();
+const variants = {
+  divided: {
+    item: "bg-default px-4 py-1",
+    root: "-mx-4 gap-px bg-[var(--nut-dash-grid)]"
+  },
+  plain: { item: "", root: "gap-x-6 gap-y-5" },
+  tiles: { item: "rounded-lg border border-default p-3.5", root: "gap-3" }
+};
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      caption: "min-w-0",
+      delta: "shrink-0 font-semibold tabular-nums",
+      icon: "grid size-7 shrink-0 place-items-center rounded-md",
+      item: `flex min-w-0 flex-col ${variants[variant].item}`,
+      label: "min-w-0 truncate text-xs text-muted",
+      meta: "mt-1 flex min-w-0 flex-wrap items-baseline gap-x-1.5 text-[11.5px] text-muted",
+      progress: "mt-2.5 h-1.5 overflow-hidden rounded-full bg-[var(--nut-dash-track)]",
+      grid: `grid ${variants[variant].root}`,
+      status: "inline-flex shrink-0 items-center rounded-full px-1.5 py-px text-[10.5px] font-semibold",
+      value: "mt-1.5 flex min-w-0 items-center gap-2 text-xl leading-tight font-semibold tracking-tight text-highlighted tabular-nums"
+    },
+    appUi.value.stats,
+    ui
+  )
+);
+const columnCount = computed(() => {
+  if (columns) return columns;
+  const count = Math.max(1, Math.min(items.length, 4));
+  return count > 2 ? `2 md:${count}` : String(count);
+});
+const gridColumns = useResponsiveValue(() => columnCount.value, "grid-cols");
+const entries = computed(() => {
+  const data = source.data;
+  if (data === void 0) return [];
+  return items.map((item, index) => {
+    const raw = item.value(data);
+    const amount = item.delta?.(data);
+    const done = item.progress?.(data);
+    const status = item.status?.(data);
+    const caption = item.caption === void 0 || isString(item.caption) || isNumber(item.caption) ? item.caption : item.caption(data);
+    const good = isNumber(amount) ? item.invertDelta ? amount <= 0 : amount >= 0 : false;
+    return {
+      caption: resolveTextValue(caption),
+      change: isNumber(amount) && Number.isFinite(amount) ? amount : null,
+      color: resolveDashboardColor(item.color, index),
+      delta: isNumber(amount) && Number.isFinite(amount) ? { good, label: formats.delta.value(amount), up: amount >= 0 } : null,
+      icon: item.icon,
+      key: item.key,
+      label: resolveTextValue(item.label),
+      progress: isNumber(done) ? Math.round(Math.max(0, Math.min(100, done))) : null,
+      raw,
+      status: status ? { color: resolveDashboardColor(status.color, 0), label: resolveTextValue(status.label) } : null,
+      value: raw === null || raw === void 0 ? "\u2013" : isNumber(raw) ? (item.format ?? formats.number.value)(raw) : resolveTextValue(raw)
+    };
+  });
+});
+function tabulate() {
+  const hasDelta = items.some((item) => item.delta);
+  return {
+    columns: [
+      { key: "label", label: t("dashboard.table.label"), numeric: false },
+      { key: "value", label: t("dashboard.table.value"), numeric: true },
+      ...hasDelta ? [{ key: "change", label: t("dashboard.table.change"), numeric: true }] : []
+    ],
+    rows: entries.value.map((entry) => [
+      toDashboardCell(entry.label),
+      toDashboardCell(isNumber(entry.raw) ? entry.raw : entry.value, entry.value),
+      ...hasDelta ? [toDashboardCell(entry.change, entry.delta?.label ?? "")] : []
+    ])
+  };
+}
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :ui
+    :source
+    :is-empty="entries.length === 0"
+    :tabulate
+  >
+    <template #skeleton>
+      <DashboardSkeleton kind="stats" :count="items.length" />
+    </template>
+    <template v-if="$slots['header-right']" #header-right>
+      <slot name="header-right" />
+    </template>
+    <template v-if="$slots.toolbar" #toolbar>
+      <slot name="toolbar" />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+
+    <div :class="classes.grid" :style="gridColumns ?? void 0" :data-variant="variant">
+      <div v-for="entry in entries" :key="entry.key" :class="classes.item" data-stats-item>
+        <div class="flex min-w-0 items-center gap-2">
+          <span
+            v-if="entry.icon"
+            :class="classes.icon"
+            :style="{
+  background: `color-mix(in oklab, ${entry.color} 12%, transparent)`,
+  color: entry.color
+}"
+          >
+            <UIcon :name="entry.icon" class="size-3.5" />
+          </span>
+          <span :class="classes.label">{{ entry.label }}</span>
+        </div>
+        <div :class="classes.value">
+          <span class="truncate">{{ entry.value }}</span>
+          <span
+            v-if="entry.status"
+            :class="classes.status"
+            :style="{
+  background: `color-mix(in oklab, ${entry.status.color} 14%, transparent)`,
+  color: entry.status.color
+}"
+          >
+            {{ entry.status.label }}
+          </span>
+        </div>
+        <div v-if="entry.delta || entry.caption" :class="classes.meta">
+          <span
+            v-if="entry.delta"
+            :data-trend="entry.delta.good ? 'up' : 'down'"
+            :class="[
+  classes.delta,
+  entry.delta.good ? 'text-[var(--nut-dash-up)]' : 'text-[var(--nut-dash-down)]'
+]"
+          >
+            {{ entry.delta.up ? "\u25B2" : "\u25BC" }} {{ entry.delta.label }}
+          </span>
+          <span v-if="entry.caption" :class="classes.caption">{{ entry.caption }}</span>
+        </div>
+        <div
+          v-if="entry.progress !== null"
+          role="progressbar"
+          :aria-valuenow="entry.progress"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :aria-label="entry.label"
+          :class="classes.progress"
+        >
+          <i
+            class="block h-full rounded-full transition-[width] duration-500 ease-out"
+            :style="{ background: entry.color, width: `${entry.progress}%` }"
+          />
+        </div>
+      </div>
+    </div>
+  </DashboardCard>
+</template>

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

@@ -0,0 +1,38 @@
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardSourceLike, DashboardStatsItem, DashboardStatsUi } 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>;
+        /** Figures read from the source data, in display order. */
+        items: readonly DashboardStatsItem<TData & ({} | null)>[];
+        /**
+         * Column count, responsive: `"2 md:4"`. Defaults to one column per figure (up to 4), two on
+         * small screens.
+         */
+        columns?: string;
+        /**
+         * `plain`: figures side by side. `divided`: 1px rules between them. `tiles`: each figure in its
+         * own bordered box.
+         */
+        variant?: "plain" | "divided" | "tiles";
+        ui?: DashboardBlockUi & DashboardStatsUi;
+    }> & (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-table.d.vue.ts

@@ -0,0 +1,52 @@
+import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardRowActions, DashboardSelected, DashboardSelectEvent, DashboardSourceLike, DashboardTableColumn, DashboardTableSort, DashboardTableUi } 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>;
+        columns: readonly DashboardTableColumn<TRow>[];
+        /** Rows shown in the card, after sorting. The expand dialog and CSV export show them all. */
+        limit?: number;
+        /** Caps the table height in pixels; the header stays visible while the rows scroll. */
+        maxHeight?: number;
+        rowKey?: (row: TRow, index: number) => PropertyKey;
+        /** Rows shown as selected (the value a `select` handler stored). */
+        selected?: DashboardSelected<TRow>;
+        /** Actions of each row, in a last column: inline icon buttons and a `⋮` menu. */
+        rowActions?: DashboardRowActions<TRow>;
+        /** Makes each row a button. */
+        onSelect?: (event: DashboardSelectEvent<TRow>) => void;
+        ui?: DashboardBlockUi & DashboardTableUi;
+    } & {
+        /**
+         * Sort state. Header clicks cycle a column through its natural direction (numbers descending, text
+         * ascending), the opposite one, then source order. Bind it to keep the sort in a param.
+         */
+        sort?: DashboardTableSort | null | undefined;
+    }) & {
+        "onUpdate:sort"?: ((value: DashboardTableSort | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'header-right'?: () => unknown;
+        toolbar?: () => unknown;
+        footer?: () => unknown;
+    } & {
+        [slot: `cell-${string}`]: ((props: {
+            row: TRow;
+            index: number;
+            value: string;
+        }) => unknown) | undefined;
+    };
+    emit: (event: "update:sort", value: DashboardTableSort | null | undefined) => void;
+}>) => 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];
+}) & {};