vueless 1.4.12-beta.2 → 1.4.12-beta.21

package/ui.data-table/types.ts

@@ -1,5 +1,4 @@
 import defaultConfig from "./config";
-
 import type { Ref } from "vue";
 import type { ComponentConfig, UnknownObject } from "../types";
 import type { Config as UDividerConfig } from "../ui.container-divider/types";
@@ -26,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;
@@ -59,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 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 {
+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.
@@ -117,6 +133,21 @@ export interface Props {
    */
   loading?: boolean;
 
+  /**
+   * Show skeleton body for the first table load instead of the regular loader.
+   */
+  skeletonLoading?: boolean;
+
+  /**
+   * Number of skeleton rows shown during initial loading.
+   */
+  skeletonRows?: number;
+
+  /**
+   * Skeleton cell width classes used to vary the loading placeholder layout.
+   */
+  skeletonWidths?: string[];
+
   /**
    * Enable virtual scrolling for large datasets.
    */
@@ -163,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;
 }

package/ui.dropdown/tests/UDropdown.test-d.ts

@@ -0,0 +1,61 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownSlots<UserOption>["option"]>>[0];
+type DefaultProps = Parameters<NonNullable<UDropdownSlots<UserOption>["default"]>>[0];
+
+describe("UDropdown types", () => {
+  it("infers the caller's option shape in a forwarded option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* The option slots are forwarded to `UListbox`, whose `filterGroups` concats nested group
+     * members into the flat list — a member need not carry the parent's members. */
+    type BeforeProps = Parameters<NonNullable<UDropdownSlots<UserOption>["before-option"]>>[0];
+    type AfterProps = Parameters<NonNullable<UDropdownSlots<UserOption>["after-option"]>>[0];
+
+    type GroupMember = { value: string; title: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterProps["option"]>();
+  });
+
+  it("keeps the full guarantee on selectedOptions, which is a plain subset", () => {
+    /* `selectedOptions` filters `props.options` and injects nothing (`UDropdown.vue:93`), so
+     * unlike the option slots it is NOT Partial. */
+    expectTypeOf<DefaultProps["selectedOptions"]>().toEqualTypeOf<UserOption[]>();
+    expectTypeOf<DefaultProps["selectedOptions"][number]["label"]>().toEqualTypeOf<string>();
+  });
+
+  it("types displayLabel as possibly undefined", () => {
+    /* It joins `option[labelKey]` lookups, which are `undefined` for an option without that key. */
+    expectTypeOf<DefaultProps["displayLabel"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});

package/ui.dropdown/tests/UDropdown.test.ts

@@ -3,7 +3,14 @@ import { describe, it, expect } from "vitest";
 import { nextTick } from "vue";
 
 import UDropdown from "../UDropdown.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
+
+import type { ComponentProps } from "../../types";
+
+/* Generic SFCs are typed as a function, which `findComponent` does not accept. */
+const UListbox = UListboxComponent as unknown as new () => {
+  $props: ComponentProps<typeof UListboxComponent>;
+};
 
 describe("UDropdown.vue", () => {
   const defaultOptions = [

package/ui.dropdown/tests/UDropdownTypes.vue

@@ -0,0 +1,111 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <UDropdown :options="options">
+    <!-- Forwarded verbatim to `UListbox`, so they inherit its group flattening — a flattened
+         member need not carry the parent's members, hence the optional types. -->
+    <template #before-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectOptionalNumber(option.qty) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #after-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <!-- `selectedOptions` is a `filter`ed subset of `props.options` with nothing injected, so it
+         keeps the full (non-Partial) guarantee — unlike the option slots above. -->
+    <template #default="{ selectedOptions, opened }">
+      {{ expectString(selectedOptions[0].label) }}
+      {{ expectNumber(selectedOptions[0].qty) }}
+      {{ expectBoolean(opened) }}
+    </template>
+
+    <template #empty>empty</template>
+  </UDropdown>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdown :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdown>
+
+  <UDropdown :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdown>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdown
+    :options="groupedOptions"
+    group-label-key="groupName"
+    group-value-key="children"
+    label-key="label"
+  >
+    <template #option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+    <template #before-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `qty`. -->
+      {{ expectNumber(option.qty) }}
+    </template>
+    <template #after-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `groupName`. -->
+      {{ expectString(option.groupName) }}
+    </template>
+  </UDropdown>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdown from "../UDropdown.vue";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+/* A group whose members lack the parent's members — exactly what `filterGroups` flattens. */
+const groupedOptions = [
+  {
+    groupName: "Group A",
+    label: "Group A",
+    qty: 1,
+    children: [{ value: "c1", title: "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.dropdown/types.ts

@@ -1,11 +1,35 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption, SlotOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface Props {
+/**
+ * The option slots are forwarded verbatim to `UListbox`, so they inherit its flattening: with
+ * `groupValueKey` set, `filterGroups` concats nested group members into the list the slots iterate
+ * and those members need not carry the parent's members. Hence `SlotOption`, which is `Partial`.
+ *
+ * `selectedOptions` is different — it is a `filter`ed subset of `props.options` (`UDropdown.vue:91`)
+ * with no synthetic entry, so it keeps the full `TOption` guarantee.
+ */
+export interface UDropdownSlots<TOption extends ListboxOption = ListboxOption> {
+  default?: (props: {
+    /* `displayLabel` joins `option[labelKey]` lookups, which yield `undefined` for an option
+       without that key — so it is only `string` when the label is resolvable. */
+    opened: boolean;
+    displayLabel: string | undefined;
+    fullLabel: string;
+    selectedOptions: TOption[];
+  }) => unknown;
+  dropdown?: (props: { opened: boolean; contentClasses: string | undefined }) => unknown;
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends ListboxOption = ListboxOption> {
   /**
    * Selected dropdown value.
    */
@@ -24,7 +48,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends ListboxOption">
 import { computed, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
@@ -11,11 +11,13 @@ import UDropdown from "../ui.dropdown/UDropdown.vue";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, UDropdownBadgeSlots } from "./types";
+import type { ListboxOption } from "../ui.form-listbox/types";
+import type { ComponentExposed } from "../types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<TOption>>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
@@ -59,7 +61,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-type UDropdownRef = InstanceType<typeof UDropdown>;
+defineSlots<UDropdownBadgeSlots<TOption>>();
+
+/* `UDropdown` is generic, so its type is a function — `InstanceType` does not apply. */
+type UDropdownRef = ComponentExposed<typeof UDropdown>;
 
 const dropdownRef = useTemplateRef<UDropdownRef>("dropdown");
 

package/ui.dropdown-badge/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDropdownBadge from "../../ui.dropdown-badge/UDropdownBadge.vue";
+import UDropdownBadgeComponent from "../../ui.dropdown-badge/UDropdownBadge.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -24,6 +24,11 @@ import emilyDavis from "../../ui.form-select/storybook/assets/images/emily-davis
 import alexJohnson from "../../ui.form-select/storybook/assets/images/alex-johnson.png";
 import patMorgan from "../../ui.form-select/storybook/assets/images/pat-morgan.png";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDropdownBadge = UDropdownBadgeComponent as typeof UDropdownBadgeComponent & {
+  __name: string;
+};
+
 interface DefaultUDropdownBadgeArgs extends Props {
   slotTemplate?: string;
 }

package/ui.dropdown-badge/tests/UDropdownBadge.test-d.ts

@@ -0,0 +1,55 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownBadgeSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["option"]>>[0];
+
+describe("UDropdownBadge types", () => {
+  it("infers the caller's option shape in a forwarded option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* Forwarded through `UDropdown` to `UListbox`, whose `filterGroups` concats nested group
+     * members into the flat list — a member need not carry the parent's members. */
+    type BeforeProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["before-option"]>>[0];
+    type AfterProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["after-option"]>>[0];
+
+    type GroupMember = { value: string; title: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterProps["option"]>();
+  });
+
+  it("types the default slot label as possibly undefined", () => {
+    /* It is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. */
+    type DefaultProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["default"]>>[0];
+
+    expectTypeOf<DefaultProps["label"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});

package/ui.dropdown-badge/tests/UDropdownBadge.test.ts

@@ -4,10 +4,17 @@ import { describe, it, expect } from "vitest";
 import UDropdownBadge from "../UDropdownBadge.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
 
 import type { Props } from "../types";
 
+import type { ComponentProps } from "../../types";
+
+/* Generic SFCs are typed as a function, which `findComponent` does not accept. */
+const UListbox = UListboxComponent as unknown as new () => {
+  $props: ComponentProps<typeof UListboxComponent>;
+};
+
 describe("UDropdownBadge.vue", () => {
   const defaultOptions = [
     { value: 1, label: "Option 1" },