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

package/ui.dropdown-badge/tests/UDropdownBadgeTypes.vue

@@ -0,0 +1,107 @@
+<!-- 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>
+  <UDropdownBadge :options="options">
+    <!-- Forwarded through `UDropdown` 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>
+
+    <template #empty>empty</template>
+  </UDropdownBadge>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdownBadge :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdownBadge>
+
+  <UDropdownBadge :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdownBadge>
+
+  <!-- `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. -->
+  <UDropdownBadge :options="options">
+    <template #default="{ label }">
+      <!-- @vue-expect-error the label is `undefined` when it cannot be resolved. -->
+      {{ expectString(label) }}
+    </template>
+  </UDropdownBadge>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdownBadge
+    :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>
+  </UDropdownBadge>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdownBadge from "../UDropdownBadge.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 expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>

package/ui.dropdown-badge/types.ts

@@ -1,11 +1,25 @@
 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 {
+/* Option slots are forwarded through `UDropdown` to `UListbox`, inheriting its group flattening —
+   a flattened member need not carry the parent's members, so `SlotOption` is `Partial`. */
+export interface UDropdownBadgeSlots<TOption extends ListboxOption = ListboxOption> {
+  /* `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups — `undefined`
+     when the label cannot be resolved. */
+  default?: (props: { label: string | undefined; opened: boolean }) => unknown;
+  left?: (props: { opened: boolean }) => unknown;
+  toggle?: (props: { opened: boolean }) => 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 badge.
    */
@@ -24,7 +38,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

package/ui.dropdown-button/UDropdownButton.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, UDropdownButtonSlots } 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<UDropdownButtonSlots<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-button/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
+import UDropdownButtonComponent from "../../ui.dropdown-button/UDropdownButton.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 UDropdownButton = UDropdownButtonComponent as typeof UDropdownButtonComponent & {
+  __name: string;
+};
+
 interface DefaultUDropdownButtonArgs extends Props {
   slotTemplate?: string;
 }

package/ui.dropdown-button/tests/UDropdownButton.test-d.ts

@@ -0,0 +1,57 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownButtonSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownButtonSlots<UserOption>["option"]>>[0];
+
+describe("UDropdownButton 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<UDropdownButtonSlots<UserOption>["before-option"]>
+    >[0];
+    type AfterProps = Parameters<NonNullable<UDropdownButtonSlots<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<UDropdownButtonSlots<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-button/tests/UDropdownButton.test.ts

@@ -4,10 +4,17 @@ import { describe, it, expect } from "vitest";
 import UDropdownButton from "../UDropdownButton.vue";
 import UButton from "../../ui.button/UButton.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("UDropdownButton.vue", () => {
   const defaultOptions = [
     { value: 1, label: "Option 1" },

package/ui.dropdown-button/tests/UDropdownButtonTypes.vue

@@ -0,0 +1,107 @@
+<!-- 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>
+  <UDropdownButton :options="options">
+    <!-- Forwarded through `UDropdown` 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>
+
+    <template #empty>empty</template>
+  </UDropdownButton>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdownButton :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdownButton>
+
+  <UDropdownButton :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdownButton>
+
+  <!-- `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. -->
+  <UDropdownButton :options="options">
+    <template #default="{ label }">
+      <!-- @vue-expect-error the label is `undefined` when it cannot be resolved. -->
+      {{ expectString(label) }}
+    </template>
+  </UDropdownButton>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdownButton
+    :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>
+  </UDropdownButton>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdownButton from "../UDropdownButton.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 expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>

package/ui.dropdown-button/types.ts

@@ -1,11 +1,25 @@
 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 {
+/* Option slots are forwarded through `UDropdown` to `UListbox`, inheriting its group flattening —
+   a flattened member need not carry the parent's members, so `SlotOption` is `Partial`. */
+export interface UDropdownButtonSlots<TOption extends ListboxOption = ListboxOption> {
+  /* `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups — `undefined`
+     when the label cannot be resolved. */
+  default?: (props: { label: string | undefined; opened: boolean }) => unknown;
+  left?: (props: { opened: boolean }) => unknown;
+  toggle?: (props: { opened: boolean }) => 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 button.
    */
@@ -24,7 +38,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

package/ui.dropdown-link/UDropdownLink.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 { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, UDropdownLinkSlots } 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<UDropdownLinkSlots<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-link/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: `
       {UDropdown}
       inline-flex gap-0.5 items-center justify-between rounded-small h-max
-      outline-solid outline-transparent
+      outline-solid outline-0 outline-transparent
       focus-visible:outline-offset-4
     `,
     defaults: {

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

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDropdownLink from "../../ui.dropdown-link/UDropdownLink.vue";
+import UDropdownLinkComponent from "../../ui.dropdown-link/UDropdownLink.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,9 @@ 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 UDropdownLink = UDropdownLinkComponent as typeof UDropdownLinkComponent & { __name: string };
+
 interface DefaultUDropdownLinkArgs extends Props {
   slotTemplate?: string;
 }

package/ui.dropdown-link/tests/UDropdownLink.test-d.ts

@@ -0,0 +1,55 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownLinkSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownLinkSlots<UserOption>["option"]>>[0];
+
+describe("UDropdownLink 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<UDropdownLinkSlots<UserOption>["before-option"]>>[0];
+    type AfterProps = Parameters<NonNullable<UDropdownLinkSlots<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<UDropdownLinkSlots<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-link/tests/UDropdownLink.test.ts

@@ -4,10 +4,17 @@ import { describe, it, expect } from "vitest";
 import UDropdownLink from "../UDropdownLink.vue";
 import ULink from "../../ui.button-link/ULink.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("UDropdownLink.vue", () => {
   const defaultOptions = [
     { value: 1, label: "Option 1" },

package/ui.dropdown-link/tests/UDropdownLinkTypes.vue

@@ -0,0 +1,107 @@
+<!-- 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>
+  <UDropdownLink :options="options">
+    <!-- Forwarded through `UDropdown` 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>
+
+    <template #empty>empty</template>
+  </UDropdownLink>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdownLink :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdownLink>
+
+  <UDropdownLink :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdownLink>
+
+  <!-- `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. -->
+  <UDropdownLink :options="options">
+    <template #default="{ label }">
+      <!-- @vue-expect-error the label is `undefined` when it cannot be resolved. -->
+      {{ expectString(label) }}
+    </template>
+  </UDropdownLink>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdownLink
+    :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>
+  </UDropdownLink>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdownLink from "../UDropdownLink.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 expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>