vueless 1.4.12-beta.8 → 1.5.0

package/ui.data-table/storybook/stories.ts

@@ -12,7 +12,7 @@ import { getRandomId } from "../../utils/helper";
 
 import defaultConfig from "../config";
 
-import UTable from "../UTable.vue";
+import UTableComponent from "../UTable.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 import UNumber from "../../ui.text-number/UNumber.vue";
@@ -27,6 +27,9 @@ import tooltip from "../../v.tooltip/vTooltip";
 import type { Row, Props, ColumnObject } from "../types";
 import { StickySide } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UTable = UTableComponent as typeof UTableComponent & { __name: string };
+
 interface UTableArgs extends Props {
   slotTemplate?: string;
   enum: "size";

package/ui.data-table/tests/UTable.test-d.ts

@@ -0,0 +1,179 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type {
+  Props,
+  RowId,
+  SelectedSlotRow,
+  SlotRow,
+  TableRow,
+  UTableDynamicSlots,
+  UTableSlots,
+} from "../types";
+
+interface UserRow {
+  id: number;
+  name: string;
+  qty: number;
+}
+
+type CellSlot = NonNullable<UTableSlots<UserRow>["cell-name"]>;
+type CellProps = Parameters<CellSlot>[0];
+
+/* The caller's own row members must all stay optional — see `SlotRow`. */
+type RequiredKeys<T> = {
+  [K in keyof T]-?: object extends Pick<T, K> ? never : K;
+}[keyof T];
+
+describe("UTable types", () => {
+  it("infers the caller's row shape in a cell slot", () => {
+    expectTypeOf<CellProps["row"]["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<CellProps["row"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<CellProps["index"]>().toEqualTypeOf<number>();
+    expectTypeOf<CellProps["cellIndex"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared row properties to a cell slot", () => {
+    /* An index signature would make any key legal, so `row.nonExistent` must not resolve. */
+    type HasIndexSignature = string extends keyof CellProps["row"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof CellProps["row"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("keeps the row flattening metadata available", () => {
+    expectTypeOf<CellProps["row"]>().toHaveProperty("nestedLevel");
+    expectTypeOf<SlotRow<UserRow>["nestedLevel"]>().toEqualTypeOf<number>();
+  });
+
+  it("types the static slots", () => {
+    type SelectedRows = Parameters<NonNullable<UTableSlots<UserRow>["header-actions"]>>[0];
+
+    expectTypeOf<SelectedRows["selectedRows"]>().toEqualTypeOf<SelectedSlotRow<UserRow>[]>();
+
+    type Expand = NonNullable<UTableSlots<UserRow>["expand"]>;
+
+    expectTypeOf<Parameters<Expand>[0]["expanded"]>().toEqualTypeOf<boolean>();
+  });
+
+  it("does not promise the caller's members on selected rows", () => {
+    /* Select-all flattens nested children into the selection, and those need not carry
+     * `TRow`'s members — so the slot must not type them as guaranteed. */
+    expectTypeOf<SelectedSlotRow<UserRow>["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<SelectedSlotRow<UserRow>["qty"]>().toEqualTypeOf<number | undefined>();
+
+    /* A nested child, as `getFlatRows` actually produces it, must be assignable. */
+    expectTypeOf<{
+      id: number;
+      nestedLevel: number;
+      parentRowId: number;
+    }>().toExtend<SelectedSlotRow<UserRow>>();
+
+    /* Flattening metadata stays guaranteed. */
+    expectTypeOf<SelectedSlotRow<UserRow>["nestedLevel"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not promise the caller's members on any row slot", () => {
+    /* `getFlatRows` recurses into `row.row`, and a nested child is typed `TableRow`, not `TRow`.
+     * Every row slot receives those children verbatim; `nested-row` receives nothing else. */
+    type Expand = Parameters<NonNullable<UTableSlots<UserRow>["expand"]>>[0];
+    type NestedRow = Parameters<NonNullable<UTableSlots<UserRow>["nested-row"]>>[0];
+
+    expectTypeOf<CellProps["row"]["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<Expand["row"]["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<NestedRow["row"]["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<NestedRow["row"]["qty"]>().toEqualTypeOf<number | undefined>();
+
+    /* The real nested-child shape recorded at these slots must be assignable to all of them. */
+    type NestedChild = {
+      id: number;
+      label: string;
+      nestedLevel: number;
+      parentRowId: number;
+    };
+
+    expectTypeOf<NestedChild>().toExtend<CellProps["row"]>();
+    expectTypeOf<NestedChild>().toExtend<Expand["row"]>();
+    expectTypeOf<NestedChild>().toExtend<NestedRow["row"]>();
+
+    /* Flattening metadata is always set by `getFlatRows`, so it stays guaranteed. */
+    expectTypeOf<Expand["row"]["nestedLevel"]>().toEqualTypeOf<number>();
+    expectTypeOf<NestedRow["row"]["nestedLevel"]>().toEqualTypeOf<number>();
+    expectTypeOf<NestedRow["row"]["id"]>().toExtend<RowId>();
+    expectTypeOf<undefined>().not.toExtend<NestedRow["row"]["id"]>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<TableRow>>();
+    expectTypeOf<Props<UserRow>["rows"]>().toEqualTypeOf<UserRow[]>();
+  });
+
+  it("narrows the dynamic slot keys to the known column keys", () => {
+    type Narrowed = keyof UTableDynamicSlots<UserRow, "name" | "qty">;
+
+    expectTypeOf<"cell-name">().toExtend<Narrowed>();
+    expectTypeOf<"header-qty">().toExtend<Narrowed>();
+    expectTypeOf<"cell-typo">().not.toExtend<Narrowed>();
+    expectTypeOf<"header-typo">().not.toExtend<Narrowed>();
+  });
+
+  it("accepts every dynamic slot key when the columns are not statically known", () => {
+    /* Columns from a `ref`, an API, or a plain `string[]` widen `TCol` to `string`. Erroring on
+     * a valid slot there would break existing callers, so the keys must stay open. */
+    type Loose = keyof UTableDynamicSlots<UserRow>;
+
+    expectTypeOf<"cell-name">().toExtend<Loose>();
+    expectTypeOf<"cell-anything-at-all">().toExtend<Loose>();
+    expectTypeOf<"header-whatever">().toExtend<Loose>();
+
+    expectTypeOf<UTableDynamicSlots<UserRow>>().toEqualTypeOf<
+      UTableDynamicSlots<UserRow, string>
+    >();
+  });
+
+  it("accepts every dynamic slot key when the columns are empty", () => {
+    /* An empty `columns` array infers `TCol` as `never`, which means "not statically known",
+     * not "no keys allowed". Without the `[TCol]` tuple guard the mapped type collapses to `{}`
+     * and every slot is rejected — the "columns load async, start empty" pattern breaks. */
+    type Empty = keyof UTableDynamicSlots<UserRow, never>;
+
+    /* `toEqualTypeOf`, not `toExtend`: the bug made `Empty` collapse to `never`, and `never`
+     * satisfies every `toExtend` assertion vacuously. */
+    expectTypeOf<Empty>().toEqualTypeOf<`cell-${string}` | `header-${string}`>();
+    expectTypeOf<Empty>().not.toEqualTypeOf<never>();
+
+    expectTypeOf<UTableDynamicSlots<UserRow, never>>().toEqualTypeOf<
+      UTableDynamicSlots<UserRow, string>
+    >();
+  });
+
+  it("keeps the row shape intact when the keys are narrowed", () => {
+    type NarrowCell = Parameters<NonNullable<UTableSlots<UserRow, "name" | "qty">["cell-name"]>>[0];
+
+    expectTypeOf<NarrowCell["row"]["name"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<NarrowCell["row"]["nestedLevel"]>().toEqualTypeOf<number>();
+  });
+
+  it("keeps the slot payloads identical however the keys resolve", () => {
+    /* Narrowing must only change which keys exist, never what a slot receives. */
+    type WideCell = Parameters<NonNullable<UTableSlots<UserRow>["cell-name"]>>[0];
+    type NarrowCell = Parameters<NonNullable<UTableSlots<UserRow, "name" | "qty">["cell-name"]>>[0];
+    type EmptyCell = Parameters<NonNullable<UTableSlots<UserRow, never>["cell-name"]>>[0];
+
+    expectTypeOf<NarrowCell>().toEqualTypeOf<WideCell>();
+    expectTypeOf<EmptyCell>().toEqualTypeOf<WideCell>();
+
+    type WideHeader = Parameters<NonNullable<UTableSlots<UserRow>["header-name"]>>[0];
+    type EmptyHeader = Parameters<NonNullable<UTableSlots<UserRow, never>["header-name"]>>[0];
+
+    expectTypeOf<EmptyHeader>().toEqualTypeOf<WideHeader>();
+
+    /* No row slot may promise the caller's members, whatever `TCol` is. Only the flattening
+     * metadata stays required; `name`/`qty` must never appear among the required keys. */
+    expectTypeOf<RequiredKeys<EmptyCell["row"]>>().toEqualTypeOf<RequiredKeys<WideCell["row"]>>();
+    expectTypeOf<RequiredKeys<NarrowCell["row"]>>().toEqualTypeOf<RequiredKeys<WideCell["row"]>>();
+
+    type CallerKeys = Extract<RequiredKeys<SlotRow<UserRow>>, "name" | "qty">;
+
+    expectTypeOf<CallerKeys>().toEqualTypeOf<never>();
+  });
+});

package/ui.data-table/tests/UTable.test.ts

@@ -78,7 +78,7 @@ describe("UTable.vue", () => {
 
   function mountUTable(props: Props, options = {}) {
     return mount(UTable, {
-      props,
+      props: { ...props },
       global: getGlobalOptions(),
       ...options,
     });

package/ui.data-table/tests/UTableEmptyColumnsTypes.vue

@@ -0,0 +1,27 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Regression guard for an inline empty `columns` array, which infers `TCol` as `never`.
+     `never` means "not statically known", not "no keys allowed", so every `cell-*` / `header-*`
+     slot must still compile. This shipped broken once and rejected every slot.
+
+     It needs its own file: next to other `#cell-*` call sites (as in `UTableTypes.vue`) Vue
+     reuses a widened instantiation, and the guard stops proving anything. -->
+<template>
+  <UTable :columns="[]" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+  </UTable>
+</template>
+
+<script setup lang="ts">
+import UTable from "../UTable.vue";
+
+const rows = [{ id: 1, name: "a", qty: 2 }];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+</script>

package/ui.data-table/tests/UTableTypes.vue

@@ -0,0 +1,193 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `rows` prop at a real call site. -->
+<template>
+  <UTable :columns="columns" :rows="rows">
+    <!-- A flattened nested child may lack the parent's members, so they are optional;
+         the flattening metadata (`id`, `nestedLevel`) is always set and stays guaranteed. -->
+    <template #cell-name="{ row, value, index, cellIndex }">
+      {{ expectOptionalString(row.name) }}
+      {{ expectOptionalNumber(row.qty) }}
+      {{ expectNumber(row.id) }}
+      {{ expectNumber(row.nestedLevel) }}
+      {{ expectNumber(index) }}
+      {{ expectNumber(cellIndex) }}
+      {{ value }}
+    </template>
+
+    <template #expand="{ row, expanded, index }">
+      {{ expectOptionalString(row.name) }}
+      {{ expectNumber(row.nestedLevel) }}
+      {{ expectBoolean(expanded) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #nested-row="{ row, nestedLevel }">
+      {{ expectOptionalString(row.name) }}
+      {{ expectNumber(row.nestedLevel) }}
+      {{ expectNumber(nestedLevel) }}
+    </template>
+
+    <template #header-actions="{ selectedRows }">
+      {{ expectNumber(selectedRows.length) }}
+    </template>
+
+    <template #header-name="{ column, index }">
+      {{ expectString(column.key) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #header-counter="{ total }">{{ expectNumber(total) }}</template>
+    <template #footer="{ colsCount }">{{ expectNumber(colsCount) }}</template>
+
+    <template #cell-qty="{ row }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred row. -->
+      {{ row.nonExistent }}
+    </template>
+
+    <!-- @vue-expect-error `typo` is not one of the literal column keys. -->
+    <template #cell-typo>{{ "" }}</template>
+
+    <!-- @vue-expect-error `typo` is not one of the literal column keys. -->
+    <template #header-typo>{{ "" }}</template>
+  </UTable>
+
+  <!-- Literal object columns narrow the slot keys the same way as literal strings. -->
+  <UTable :columns="objectColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-qty="{ column }">{{ expectString(column.key) }}</template>
+
+    <!-- @vue-expect-error `typo` is not one of the literal column keys. -->
+    <template #cell-typo>{{ "" }}</template>
+  </UTable>
+
+  <!-- Rows from a non-literal source still expose the declared row shape. -->
+  <UTable :columns="columns" :rows="typedRows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+  </UTable>
+
+  <!-- Graceful degradation: columns from a `ref<Column[]>` cannot be narrowed, so EVERY
+       `cell-*` / `header-*` slot must still compile. A false error here would break
+       existing users, so it matters more than catching a typo. -->
+  <UTable :columns="dynamicColumns" :rows="rows">
+    <template #cell-name="{ row, index }">
+      {{ expectOptionalString(row.name) }}{{ expectNumber(index) }}
+    </template>
+    <template #cell-anything-at-all="{ row }">{{ expectOptionalNumber(row.qty) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+    <template #header-whatever="{ index }">{{ expectNumber(index) }}</template>
+  </UTable>
+
+  <!-- Same degradation for a plain `string[]` with no literal types. -->
+  <UTable :columns="looseColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #cell-unknown-key="{ row }">{{ expectOptionalNumber(row.qty) }}</template>
+  </UTable>
+
+  <!-- A `const` array without `as const` widens to `string[]`, so it degrades too. Narrowing
+       is opt-in via `as const`; it must never cost a false error on the plain form. -->
+  <UTable :columns="widenedColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #cell-not-a-column="{ row }">{{ expectOptionalNumber(row.qty) }}</template>
+  </UTable>
+
+  <!-- Regression guard: an EMPTY `columns` array infers `TCol` as `never`. That is "not statically
+       known", not "no keys allowed" — every `cell-*` / `header-*` slot must still compile.
+       "columns load async, start empty" is the common real-world pattern; this shipped broken once. -->
+  <UTable :columns="emptyRefColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+  </UTable>
+
+  <UTable :columns="emptyInferredRefColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+  </UTable>
+
+  <UTable :columns="emptyComputedColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+  </UTable>
+
+  <UTable :columns="emptyConstColumns" :rows="rows">
+    <template #cell-name="{ row }">{{ expectOptionalString(row.name) }}</template>
+    <template #header-name="{ column }">{{ expectString(column.key) }}</template>
+  </UTable>
+
+  <!-- Regression guard: a row slot must never promise the caller's members as present.
+       `getFlatRows` recurses into `row.row`, and a nested child is typed `TableRow`, not `TRow` —
+       `#nested-row` in particular fires ONLY for such children. -->
+  <UTable :columns="columns" :rows="nestedRows">
+    <template #nested-row="{ row }">
+      <!-- @vue-expect-error a flattened nested child need not carry `name`. -->
+      {{ expectString(row.name) }}
+    </template>
+    <template #expand="{ row }">
+      <!-- @vue-expect-error a flattened nested child need not carry `qty`. -->
+      {{ expectNumber(row.qty) }}
+    </template>
+    <template #cell-name="{ row }">
+      <!-- @vue-expect-error a flattened nested child need not carry `name`. -->
+      {{ expectString(row.name) }}
+    </template>
+    <template #header-actions="{ selectedRows }">
+      <!-- @vue-expect-error select-all flattens nested children into the selection. -->
+      {{ expectString(selectedRows[0].name) }}
+    </template>
+  </UTable>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import UTable from "../UTable.vue";
+
+import type { Column } from "../types";
+
+interface UserRow {
+  id: number;
+  name: string;
+  qty: number;
+}
+
+const columns = ["name", "qty"] as const;
+const objectColumns = [{ key: "name" }, { key: "qty" }] as const;
+
+/* Non-literal column sources — slot keys must degrade to `cell-${string}`. */
+const dynamicColumns = ref<Column[]>([]);
+const looseColumns: string[] = ["name", "qty"];
+const widenedColumns = ["name", "qty"];
+
+/* Empty column sources — `TCol` infers as `never` and must degrade, not collapse.
+   The inline `:columns="[]"` form lives in `UTableEmptyColumnsTypes.vue`: alongside other
+   `#cell-*` call sites here, Vue reuses a widened instantiation and the guard goes vacuous. */
+const emptyRefColumns = ref<Column[]>([]);
+const emptyInferredRefColumns = ref([]);
+const emptyComputedColumns = computed(() => []);
+const emptyConstColumns = [] as const;
+
+const rows = [{ id: 1, name: "a", qty: 2 }];
+const typedRows = ref<UserRow[]>([]);
+
+/* A parent whose child lacks the parent's members — exactly what `getFlatRows` emits. */
+const nestedRows = [{ id: 1, name: "parent", qty: 2, row: [{ id: 2, label: "child" }] }];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectBoolean(value: boolean) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>

package/ui.data-table/types.ts

@@ -25,20 +25,30 @@ export interface RowData {
   [key: string]: Cell;
 }
 
-export interface DateDivider {
+export interface BaseDateDivider {
   date: Date | string;
   label?: string;
   config?: ComponentConfig<UDividerConfig>;
 }
 
-export interface Row {
+/* Any object shape is a valid divider, only reserved divider keys are type checked. */
+export type DateDivider = BaseDateDivider & (object | UnknownObject);
+
+export interface BaseRow {
   id: RowId;
   rowDate?: string | Date;
-  row?: Row | Row[];
+  row?: TableRow | TableRow[];
   class?: string | ((row: Row) => string);
+}
+
+export interface Row extends BaseRow {
+  row?: Row | Row[];
   [key: string]: unknown;
 }
 
+/* Any object shape is a valid row, only reserved row keys are type checked. */
+export type TableRow = BaseRow & (object | UnknownObject);
+
 export interface FlatRow extends Row {
   parentRowId?: RowId;
   nestedLevel: number;
@@ -58,23 +68,30 @@ export interface ColumnObject {
   thClass?: string;
 }
 
-export type Column = ColumnObject | string;
+/* Any object shape is a valid column, only reserved column keys are type checked. */
+export type TableColumn = ColumnObject & (object | UnknownObject);
 
-export interface Props {
+export type Column = TableColumn | string;
+
+/* A column entry that keeps its key literal, so slot keys can be narrowed at the call site. */
+export type KeyedColumn<TCol extends string> = TCol | (TableColumn & { key: TCol });
+
+export interface Props<TRow extends TableRow = TableRow, TCol extends string = string> {
   /**
    * Table columns (headers).
+   * `readonly` so `as const` column lists keep their literal keys and narrow the cell slot names.
    */
-  columns: Column[];
+  columns: readonly KeyedColumn<TCol>[];
 
   /**
    * Table rows data.
    */
-  rows: Row[];
+  rows: TRow[];
 
   /**
    * Selected rows.
    */
-  selectedRows?: Row[];
+  selectedRows?: TRow[];
 
   /**
    * Selected rows id.
@@ -177,6 +194,72 @@ export interface Props {
   dataTest?: string | null;
 }
 
+/* Drops `Row`'s `[key: string]: unknown` so slot rows only expose statically known keys. */
+type KnownKeys<T> = {
+  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
+};
+
+/**
+ * Row shape exposed to slots: the caller's row plus the flattening metadata.
+ *
+ * `TRow`'s own keys are optional. Rows are flattened through `getFlatRows`, which recurses into
+ * `row.row` — and `BaseRow.row` is `TableRow | TableRow[]`, not `TRow`, so a nested child need not
+ * carry the parent's members. Every row slot (`cell-*`, `expand`, `nested-row`) receives those
+ * children verbatim; `nested-row` receives nothing else. `BaseRow`/`FlatRow` metadata
+ * (`id`, `nestedLevel`, …) is always set by the flattener, so it stays guaranteed.
+ */
+export type SlotRow<TRow extends TableRow = TableRow> = Partial<KnownKeys<TRow>> &
+  KnownKeys<FlatRow>;
+
+/* Selected rows carry the same guarantee: select-all flattens nested children into the selection. */
+export type SelectedSlotRow<TRow extends TableRow = TableRow> = SlotRow<TRow>;
+
+export interface UTableStaticSlots<TRow extends TableRow = TableRow> {
+  "header-counter"?: (props: { total: number }) => unknown;
+  "header-actions"?: (props: { selectedRows: SelectedSlotRow<TRow>[] }) => unknown;
+  "before-header"?: (props: { colsCount: number; classes?: string }) => unknown;
+  "after-last-row"?: (props: { colsCount: number; classes?: string }) => unknown;
+  "before-first-row"?: () => unknown;
+  "empty-state"?: () => unknown;
+  footer?: (props: { colsCount: number }) => unknown;
+  expand?: (props: { index: number; row: SlotRow<TRow>; expanded: boolean }) => unknown;
+  "nested-row"?: (props: { index: number; row: SlotRow<TRow>; nestedLevel: number }) => unknown;
+}
+
+/**
+ * Slot key suffix. Narrows to the literal column keys only when they are statically known —
+ * `columns` from a `ref`, an API, or a plain `string[]` widens `TCol` back to `string`, and an
+ * empty `columns` array infers `TCol` as `never`. Both mean "not statically known", so every
+ * `cell-*` / `header-*` slot must keep compiling.
+ *
+ * The `[TCol]` tuple wrapper is required: a naked `never` distributes to `never`, which would
+ * silently collapse the whole mapped type and reject every slot.
+ */
+type SlotKeySuffix<TCol extends string> = [TCol] extends [never]
+  ? string
+  : string extends TCol
+    ? string
+    : TCol;
+
+export type UTableDynamicSlots<TRow extends TableRow = TableRow, TCol extends string = string> = {
+  [K in `cell-${SlotKeySuffix<TCol>}`]?: (props: {
+    value: Cell;
+    row: SlotRow<TRow>;
+    index: number;
+    cellIndex: number;
+  }) => unknown;
+} & {
+  [K in `header-${SlotKeySuffix<TCol>}`]?: (props: {
+    column: ColumnObject;
+    index: number;
+  }) => unknown;
+};
+
+export type UTableSlots<
+  TRow extends TableRow = TableRow,
+  TCol extends string = string,
+> = UTableStaticSlots<TRow> & UTableDynamicSlots<TRow, TCol>;
+
 export interface UTableRowAttrs {
   bodyCellContentAttrs: Ref<UnknownObject>;
   bodyCellCheckboxAttrs: Ref<UnknownObject>;

package/ui.data-table/utilTable.ts

@@ -1,6 +1,6 @@
 import type { Column, ColumnObject, FlatRow, Row, RowData, RowId } from "./types";
 
-export function normalizeColumns(columns: Column[]): ColumnObject[] {
+export function normalizeColumns(columns: readonly Column[]): ColumnObject[] {
   return columns.map((column) =>
     typeof column === "string" ? { label: column, key: column } : column,
   );

package/ui.dropdown/UDropdown.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends ListboxOption">
 import { nextTick, computed, ref, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
@@ -11,12 +11,13 @@ import UCollapsible from "../ui.container-collapsible/UCollapsible.vue";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config } from "./types";
-import type { Option, SelectedValue } from "../ui.form-listbox/types";
+import type { Props, Config, UDropdownSlots } from "./types";
+import type { ComponentExposed } from "../types";
+import type { Option, SelectedValue, ListboxOption } from "../ui.form-listbox/types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<TOption>>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
@@ -60,7 +61,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-type UListboxRef = InstanceType<typeof UListbox>;
+defineSlots<UDropdownSlots<TOption>>();
+
+/* `UListbox` is generic, so its type is a function — `InstanceType` does not apply. */
+type UListboxRef = ComponentExposed<typeof UListbox>;
 type UCollapsibleRef = InstanceType<typeof UCollapsible>;
 
 const isClickingOption = ref(false);
@@ -83,9 +87,12 @@ const dropdownSearch = computed({
   set: (value: string) => emit("update:search", value),
 });
 
+/* Indexable view of the options, `labelKey` / `valueKey` lookups need an index signature. */
+const localOptions = computed(() => props.options as Option[]);
+
 const selectedOptions = computed(() => {
   if (props.multiple) {
-    return props.options.filter((option) => {
+    return localOptions.value.filter((option) => {
       return (
         option[props.valueKey] &&
         (dropdownValue.value as SelectedValue[]).find((selected) =>
@@ -96,12 +103,16 @@ const selectedOptions = computed(() => {
   }
 
   return [
-    props.options.find(
+    localOptions.value.find(
       (option) => option[props.valueKey] && isEqual(option[props.valueKey], dropdownValue.value),
     ),
   ].filter((option) => !!option);
 });
 
+/* `selectedOptions` filters `localOptions` (the indexable view of `props.options`) and injects
+   nothing, so every element is a `props.options` element — `TOption`, with its full guarantee. */
+const slotSelectedOptions = computed(() => selectedOptions.value as TOption[]);
+
 const displayLabel = computed(() => {
   if (!props.labelDisplayCount || !selectedOptions.value.length) {
     return props.label;
@@ -253,7 +264,7 @@ const { getDataTest, dropdownAttrs, listboxAttrs } = useUI<Config>(
         :opened="opened"
         :display-label="displayLabel"
         :full-label="fullLabel"
-        :selected-options="selectedOptions"
+        :selected-options="slotSelectedOptions"
       />
     </template>
 

package/ui.dropdown/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDropdown from "../../ui.dropdown/UDropdown.vue";
+import UDropdownComponent from "../../ui.dropdown/UDropdown.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
@@ -20,6 +20,9 @@ import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDropdown = UDropdownComponent as typeof UDropdownComponent & { __name: string };
+
 interface DefaultUDropdownArgs extends Props {
   slotTemplate?: string;
 }