nuxt-ui-tools 1.0.0 → 1.1.0

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

@@ -0,0 +1,305 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+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 { toDashboardCell } from "../utils/export";
+import {
+  DASHBOARD_TABLE_CLASSES,
+  DASHBOARD_TABLE_ROW_BUTTON,
+  resolveDashboardClasses
+} from "../utils/ui";
+import DashboardRowActionsMenu from "./block/dashboard-row-actions.vue";
+import DashboardSkeleton from "./block/dashboard-skeleton.vue";
+import DashboardCard from "./dashboard-card.vue";
+const {
+  source,
+  card = true,
+  menu = void 0,
+  freshness = void 0,
+  columns,
+  limit,
+  maxHeight,
+  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 },
+  columns: { type: Array, required: true },
+  limit: { type: Number, required: false },
+  maxHeight: { 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 }
+});
+const sort = defineModel("sort", { type: null });
+defineSlots();
+const { t, code } = useUiToolsLocale();
+const formats = useDashboardFormat();
+const appUi = useDashboardUi();
+const classes = computed(
+  () => resolveDashboardClasses(DASHBOARD_TABLE_CLASSES, appUi.value.table, ui)
+);
+const alignClasses = { center: "text-center", end: "text-end", start: "text-start" };
+const resolvedColumns = computed(
+  () => columns.map((column) => {
+    const type = column.type ?? "text";
+    const numeric = type !== "text";
+    return {
+      align: alignClasses[column.align ?? (numeric ? "end" : "start")],
+      color: resolveDashboardColor(column.color, 0),
+      column,
+      key: column.key,
+      label: resolveTextValue(column.label),
+      numeric,
+      sortable: column.sortable ?? true,
+      type
+    };
+  })
+);
+const entries = computed(() => {
+  const rows = source.data ?? [];
+  const values = rows.map(
+    (row, index) => resolvedColumns.value.map(({ column }) => resolveCellValue(column.value(row, index)))
+  );
+  const maxima = resolvedColumns.value.map(
+    ({ column, type }, position) => type === "bar" ? column.max ?? Math.max(0, ...values.map((cells) => cellNumber(cells[position]))) : 0
+  );
+  return rows.map((row, index) => ({
+    cells: resolvedColumns.value.map((resolved, position) => {
+      const value = values[index]?.[position] ?? null;
+      if (value === null || !isNumber(value)) {
+        return { text: resolveTextValue(value), value };
+      }
+      const { column, type } = resolved;
+      if (type === "delta") {
+        const good = column.invert ? value <= 0 : value >= 0;
+        return { good, text: (column.format ?? formats.delta.value)(value), value };
+      }
+      const format = column.format ?? (type === "percent" ? formats.percent.value : formats.number.value);
+      const max = maxima[position] ?? 0;
+      const width = type === "bar" && max > 0 ? `${Math.max(0, Math.min(100, value / max * 100))}%` : void 0;
+      return { text: format(value), value, width };
+    }),
+    actions: rowActions?.(row, index) ?? [],
+    index,
+    key: rowKey?.(row, index) ?? index,
+    row,
+    selected: selected?.(row, index) ?? false
+  }));
+});
+const sorted = computed(() => {
+  const current = sort.value;
+  const position = current ? resolvedColumns.value.findIndex((c) => c.key === current.key) : -1;
+  if (!current || position < 0) return entries.value;
+  const direction = current.direction === "asc" ? 1 : -1;
+  return [...entries.value].sort(
+    (a, b) => compareCells(a.cells[position]?.value ?? null, b.cells[position]?.value ?? null, direction)
+  );
+});
+const visible = (expanded) => limit && !expanded ? sorted.value.slice(0, limit) : sorted.value;
+function compareCells(a, b, direction) {
+  if (a === null || b === null) return a === b ? 0 : a === null ? 1 : -1;
+  if (isNumber(a) && isNumber(b)) return (a - b) * direction;
+  return String(a).localeCompare(String(b), code.value, { numeric: true }) * direction;
+}
+function resolveCellValue(raw) {
+  if (raw === null || raw === void 0) return null;
+  if (isString(raw) || isNumber(raw)) return raw;
+  return raw();
+}
+function cellNumber(value) {
+  return isNumber(value) && Number.isFinite(value) ? value : 0;
+}
+function toggleSort(key, numeric) {
+  const first = numeric ? "desc" : "asc";
+  const current = sort.value;
+  if (current?.key !== key) sort.value = { direction: first, key };
+  else if (current.direction === first)
+    sort.value = { direction: first === "asc" ? "desc" : "asc", key };
+  else sort.value = null;
+}
+function ariaSort(key) {
+  if (sort.value?.key !== key) return "none";
+  return sort.value.direction === "asc" ? "ascending" : "descending";
+}
+function tabulate() {
+  return {
+    columns: resolvedColumns.value.map((column) => ({
+      key: column.key,
+      label: column.label,
+      numeric: column.numeric
+    })),
+    rows: sorted.value.map(
+      (entry) => entry.cells.map((cell) => toDashboardCell(cell.value, cell.text))
+    )
+  };
+}
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :ui
+    :source
+    :is-empty="entries.length === 0"
+    :tabulate
+    :view-as-table="false"
+  >
+    <template #skeleton>
+      <DashboardSkeleton kind="table" :columns="Math.min(columns.length, 6)" :count="limit ?? 6" />
+    </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 }">
+      <div
+        :class="classes.wrapper"
+        :style="maxHeight && !expanded ? { maxHeight: `${maxHeight}px` } : void 0"
+      >
+        <table :class="classes.table">
+          <colgroup>
+            <col
+              v-for="column in resolvedColumns"
+              :key="column.key"
+              :style="column.column.width ? { width: column.column.width } : void 0"
+            />
+            <col v-if="rowActions" class="w-0" />
+          </colgroup>
+          <thead :class="classes.head">
+            <tr>
+              <th
+                v-for="column in resolvedColumns"
+                :key="column.key"
+                scope="col"
+                :aria-sort="column.sortable ? ariaSort(column.key) : void 0"
+                :class="[classes.th, column.align]"
+              >
+                <button
+                  v-if="column.sortable"
+                  type="button"
+                  class="inline-flex cursor-pointer items-center gap-1 hover:text-default"
+                  :class="sort?.key === column.key && 'text-default'"
+                  @click="toggleSort(column.key, column.numeric)"
+                >
+                  {{ column.label }}
+                  <UIcon
+                    :name="
+  sort?.key !== column.key ? 'i-lucide-chevrons-up-down' : sort.direction === 'asc' ? 'i-lucide-arrow-up' : 'i-lucide-arrow-down'
+"
+                    class="size-3 shrink-0"
+                    :class="sort?.key !== column.key && 'opacity-50'"
+                  />
+                </button>
+                <template v-else>{{ column.label }}</template>
+              </th>
+              <th v-if="rowActions" scope="col" :class="classes.th">
+                <span class="sr-only">{{ t("dashboard.table.actions") }}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="entry in visible(expanded)"
+              :key="entry.key"
+              :data-selected="entry.selected || void 0"
+              :class="[
+  classes.row,
+  onSelect && 'relative transition-colors has-[>td>button:hover]:bg-elevated/60 has-[>td>button:focus-visible]:bg-elevated/60',
+  entry.selected && 'bg-elevated [&>td:first-child]:text-highlighted'
+]"
+            >
+              <td
+                v-for="(column, position) in resolvedColumns"
+                :key="column.key"
+                :class="[
+  classes.td,
+  column.align,
+  column.numeric && 'tabular-nums',
+  position === 0 && 'font-medium text-default',
+  column.column.class
+]"
+              >
+                <slot
+                  :name="`cell-${column.key}`"
+                  :row="entry.row"
+                  :index="entry.index"
+                  :value="entry.cells[position]?.text ?? ''"
+                >
+                  <span
+                    v-if="column.type === 'delta' && entry.cells[position]?.good !== void 0"
+                    :data-trend="entry.cells[position]?.good ? 'up' : 'down'"
+                    class="font-semibold"
+                    :class="
+  entry.cells[position]?.good ? 'text-[var(--nut-dash-up)]' : 'text-[var(--nut-dash-down)]'
+"
+                  >
+                    {{ entry.cells[position]?.text }}
+                  </span>
+                  <span
+                    v-else-if="column.type === 'bar' && entry.cells[position]?.width"
+                    class="flex items-center justify-end gap-2"
+                  >
+                    <span :class="classes.bar" class="w-16 shrink-0 max-sm:w-10">
+                      <i
+                        class="block h-full rounded-full transition-[width] duration-500 ease-out"
+                        :style="{ background: column.color, width: entry.cells[position]?.width }"
+                      />
+                    </span>
+                    <span class="min-w-10">{{ entry.cells[position]?.text }}</span>
+                  </span>
+                  <template v-else>{{ entry.cells[position]?.text }}</template>
+                </slot>
+                <button
+                  v-if="onSelect && position === 0"
+                  type="button"
+                  :class="DASHBOARD_TABLE_ROW_BUTTON"
+                  :aria-label="entry.cells[0]?.text"
+                  :aria-pressed="selected ? entry.selected : void 0"
+                  @click="onSelect({ index: entry.index, row: entry.row })"
+                />
+              </td>
+              <td v-if="rowActions" :class="[classes.td, 'py-0']">
+                <DashboardRowActionsMenu
+                  v-if="entry.actions.length"
+                  :actions="entry.actions"
+                  :label="entry.cells[0]?.text ?? ''"
+                  class="justify-end"
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+  </DashboardCard>
+</template>

package/dist/runtime/dashboard/components/dashboard-table.vue.d.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];
+}) & {};

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

@@ -0,0 +1,35 @@
+import type { DashboardTab } from '../types/index.js';
+declare const __VLS_export: <TValue extends string | number>(__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<({
+        items: readonly DashboardTab<TValue>[];
+        /** `pill`: a segmented control. `link`: underlined tabs. */
+        variant?: "pill" | "link";
+        size?: "xs" | "sm" | "md";
+        /** Stretches the tabs over the full width. */
+        full?: boolean;
+    } & {
+        /**
+         * Tab strip for dashboard cards, bound with `v-model`. Bind it to a widget param to switch what a
+         * block fetches (the tab lands in the URL, and the block refreshes in place), or to a local ref to
+         * switch between blocks: render only the active one, so the others' deferred queries stay idle.
+         */
+        modelValue: TValue;
+    }) & {
+        "onUpdate:modelValue"?: ((value: TValue) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: TValue) => 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];
+}) & {};

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

@@ -0,0 +1,55 @@
+<script setup>
+import UTabs from "@nuxt/ui/components/Tabs.vue";
+import { computed } from "vue";
+import { resolveTextValue } from "#ui-tools/shared/utils/render";
+const model = defineModel({ type: null, ...{ required: true } });
+const {
+  items,
+  variant = "pill",
+  size = "xs",
+  full = false
+} = defineProps({
+  items: { type: Array, required: true },
+  variant: { type: String, required: false },
+  size: { type: String, required: false },
+  full: { type: Boolean, required: false }
+});
+const tabs = computed(
+  () => items.map((item) => ({
+    badge: item.count === null || item.count === void 0 ? void 0 : { color: "neutral", label: item.count, size: "sm", variant: "soft" },
+    disabled: item.disabled,
+    icon: item.icon,
+    label: resolveTextValue(item.label),
+    value: item.value
+  }))
+);
+const ui = computed(() => ({
+  indicator: variant === "pill" ? "rounded-[5px] bg-default shadow-xs ring ring-default" : "",
+  list: [full ? "w-full" : "w-auto", variant === "pill" && "rounded-md p-0.5"],
+  trigger: [
+    full ? "flex-1" : "grow-0",
+    variant === "pill" && "text-muted data-[state=active]:text-highlighted"
+  ]
+}));
+const selected = computed({
+  get: () => model.value,
+  set(next) {
+    const item = items.find((entry) => entry.value === next);
+    if (item) model.value = item.value;
+  }
+});
+</script>
+
+<template>
+  <UTabs
+    v-model="selected"
+    :items="tabs"
+    :content="false"
+    :variant
+    :size
+    color="neutral"
+    :class="full ? 'w-full' : 'w-auto'"
+    :ui
+    data-dashboard-tabs
+  />
+</template>

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

@@ -0,0 +1,35 @@
+import type { DashboardTab } from '../types/index.js';
+declare const __VLS_export: <TValue extends string | number>(__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<({
+        items: readonly DashboardTab<TValue>[];
+        /** `pill`: a segmented control. `link`: underlined tabs. */
+        variant?: "pill" | "link";
+        size?: "xs" | "sm" | "md";
+        /** Stretches the tabs over the full width. */
+        full?: boolean;
+    } & {
+        /**
+         * Tab strip for dashboard cards, bound with `v-model`. Bind it to a widget param to switch what a
+         * block fetches (the tab lands in the URL, and the block refreshes in place), or to a local ref to
+         * switch between blocks: render only the active one, so the others' deferred queries stay idle.
+         */
+        modelValue: TValue;
+    }) & {
+        "onUpdate:modelValue"?: ((value: TValue) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: TValue) => 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];
+}) & {};

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

@@ -0,0 +1,10 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardTotalUi } from '../types/index.js';
+type __VLS_Props = {
+    label: LazyTextValue;
+    value: LazyTextValue;
+    ui?: DashboardTotalUi;
+};
+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;

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

@@ -0,0 +1,32 @@
+<script setup>
+import { computed } from "vue";
+import { resolveTextValue } from "#ui-tools/shared/utils/render";
+import { useDashboardUi } from "../composables/use-dashboard-ui";
+import { resolveDashboardClasses } from "../utils/ui";
+const props = defineProps({
+  label: { type: [String, Number, Function], required: true },
+  value: { type: [String, Number, Function], required: true },
+  ui: { type: Object, required: false }
+});
+const appUi = useDashboardUi();
+const label = computed(() => resolveTextValue(props.label));
+const value = computed(() => resolveTextValue(props.value));
+const classes = computed(
+  () => resolveDashboardClasses(
+    {
+      label: "truncate text-[12.5px] text-muted",
+      root: "flex items-baseline justify-between gap-3 border-t border-[var(--nut-dash-grid)] pt-3 [&+&]:border-t-0 [&+&]:pt-1.5",
+      value: "shrink-0 text-sm font-semibold text-highlighted tabular-nums"
+    },
+    appUi.value.total,
+    props.ui
+  )
+);
+</script>
+
+<template>
+  <div :class="classes.root">
+    <span :class="classes.label">{{ label }}</span>
+    <b :class="classes.value">{{ value }}</b>
+  </div>
+</template>

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

@@ -0,0 +1,10 @@
+import type { LazyTextValue } from '#ui-tools/shared/types/utils';
+import type { DashboardTotalUi } from '../types/index.js';
+type __VLS_Props = {
+    label: LazyTextValue;
+    value: LazyTextValue;
+    ui?: DashboardTotalUi;
+};
+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;

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

@@ -0,0 +1,46 @@
+import type { DashboardBlockBaseProps, DashboardDataTable, DashboardLegendItem, DashboardSkeletonKind, 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<DashboardBlockBaseProps & {
+        source: DashboardSourceLike<TData>;
+        /** Whether ready data has nothing to show. Defaults to `null` or an empty array. */
+        isEmpty?: (data: TData & ({} | null)) => boolean;
+        legend?: readonly DashboardLegendItem[];
+        /** Built-in skeleton drawn while the source loads, unless a `#skeleton` slot is given. */
+        skeleton?: DashboardSkeletonKind;
+        /** Tabular data behind the `table` and `csv` menu actions. */
+        tabulate?: (data: TData & ({} | null)) => DashboardDataTable;
+        /** Offers the `expand` menu action; the default slot receives `expanded`. */
+        expandable?: boolean;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default: (props: {
+            data: TData & ({} | null);
+            refreshing: boolean;
+            refresh: () => Promise<void>;
+            /** Rendered in the expand dialog. */
+            expanded: boolean;
+        }) => unknown;
+        skeleton?: () => unknown;
+        'header-right'?: (props: {
+            data: (TData & ({} | null)) | undefined;
+        }) => unknown;
+        toolbar?: () => unknown;
+        footer?: (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-widget.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { computed } from "vue";
+import DashboardCard from "./dashboard-card.vue";
+const {
+  source,
+  card = true,
+  menu = void 0,
+  freshness = void 0,
+  isEmpty,
+  skeleton = "rows",
+  tabulate,
+  expandable = true,
+  ...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 },
+  ui: { type: Object, required: false },
+  source: { type: Object, required: true },
+  isEmpty: { type: Function, required: false },
+  legend: { type: Array, required: false },
+  skeleton: { type: String, required: false },
+  tabulate: { type: Function, required: false },
+  expandable: { type: Boolean, required: false }
+});
+defineSlots();
+const ready = computed(() => {
+  const data = source.data;
+  return data === void 0 ? null : { data };
+});
+const blank = computed(() => {
+  if (!ready.value) return false;
+  const { data } = ready.value;
+  if (isEmpty) return isEmpty(data);
+  return data === null || Array.isArray(data) && data.length === 0;
+});
+const tabulateReady = computed(() => {
+  const current = ready.value;
+  return tabulate && current ? () => tabulate(current.data) : void 0;
+});
+</script>
+
+<template>
+  <DashboardCard
+    v-bind="block"
+    :card
+    :menu
+    :freshness
+    :source
+    :is-empty="blank"
+    :skeleton
+    :tabulate="tabulateReady"
+    :expandable
+  >
+    <template v-if="$slots.skeleton" #skeleton>
+      <slot name="skeleton" />
+    </template>
+    <template v-if="$slots['header-right']" #header-right>
+      <slot name="header-right" :data="ready?.data" />
+    </template>
+    <template v-if="$slots.toolbar" #toolbar>
+      <slot name="toolbar" />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot v-if="ready" name="footer" :data="ready.data" />
+    </template>
+    <template #default="{ expanded }">
+      <slot
+        v-if="ready"
+        :data="ready.data"
+        :refreshing="source.refreshing"
+        :refresh="source.refresh"
+        :expanded
+      />
+    </template>
+  </DashboardCard>
+</template>