vueless 1.4.12-beta.18 → 1.4.12-beta.19

package/index.d.ts

@@ -199,14 +199,40 @@ export type {
   TableColumn,
   DateDivider,
   BaseDateDivider,
+  SlotRow,
+  SelectedSlotRow,
+  UTableSlots,
+  UTableStaticSlots,
+  UTableDynamicSlots,
 } from "./ui.data-table/types";
-export type { Option, BaseOption, ListboxOption, SelectedValue } from "./ui.form-listbox/types";
-export type { SelectOption } from "./ui.form-select/types";
-export type { UTabsOption, BaseTabOption } from "./ui.navigation-tabs/types";
+export type {
+  Option,
+  BaseOption,
+  ListboxOption,
+  SelectedValue,
+  SlotOption,
+  UListboxSlots,
+} from "./ui.form-listbox/types";
+export type {
+  SelectOption,
+  SelectedSlotOption,
+  SelectedOptionsBinding,
+  USelectSlots,
+} from "./ui.form-select/types";
+export type { UDropdownSlots } from "./ui.dropdown/types";
+export type { UDropdownBadgeSlots } from "./ui.dropdown-badge/types";
+export type { UDropdownButtonSlots } from "./ui.dropdown-button/types";
+export type { UDropdownLinkSlots } from "./ui.dropdown-link/types";
+export type { UTabsOption, BaseTabOption, UTabsSlots } from "./ui.navigation-tabs/types";
 export type { UBreadcrumb, BaseBreadcrumb } from "./ui.navigation-breadcrumbs/types";
-export type { UToggleOption, BaseToggleOption } from "./ui.button-toggle/types";
+export type { UToggleOption, BaseToggleOption, UToggleSlots } from "./ui.button-toggle/types";
 export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
-export type { DataListItem, BaseDataListItem } from "./ui.data-list/types";
+export type {
+  DataListItem,
+  BaseDataListItem,
+  SlotItem,
+  UDataListSlots,
+} from "./ui.data-list/types";
 export type { UCheckboxOption, BaseCheckboxOption } from "./ui.form-checkbox/types";
 export type { ChipItem, BaseChipItem } from "./ui.image-avatar/types";
 export type { AvatarItem, BaseAvatarItem } from "./ui.image-avatar-group/types";

package/index.ts

@@ -205,14 +205,40 @@ export type {
   TableColumn,
   DateDivider,
   BaseDateDivider,
+  SlotRow,
+  SelectedSlotRow,
+  UTableSlots,
+  UTableStaticSlots,
+  UTableDynamicSlots,
 } from "./ui.data-table/types";
-export type { Option, BaseOption, ListboxOption, SelectedValue } from "./ui.form-listbox/types";
-export type { SelectOption } from "./ui.form-select/types";
-export type { UTabsOption, BaseTabOption } from "./ui.navigation-tabs/types";
+export type {
+  Option,
+  BaseOption,
+  ListboxOption,
+  SelectedValue,
+  SlotOption,
+  UListboxSlots,
+} from "./ui.form-listbox/types";
+export type {
+  SelectOption,
+  SelectedSlotOption,
+  SelectedOptionsBinding,
+  USelectSlots,
+} from "./ui.form-select/types";
+export type { UDropdownSlots } from "./ui.dropdown/types";
+export type { UDropdownBadgeSlots } from "./ui.dropdown-badge/types";
+export type { UDropdownButtonSlots } from "./ui.dropdown-button/types";
+export type { UDropdownLinkSlots } from "./ui.dropdown-link/types";
+export type { UTabsOption, BaseTabOption, UTabsSlots } from "./ui.navigation-tabs/types";
 export type { UBreadcrumb, BaseBreadcrumb } from "./ui.navigation-breadcrumbs/types";
-export type { UToggleOption, BaseToggleOption } from "./ui.button-toggle/types";
+export type { UToggleOption, BaseToggleOption, UToggleSlots } from "./ui.button-toggle/types";
 export type { UAccordionOption, BaseAccordionOption } from "./ui.container-accordion/types";
-export type { DataListItem, BaseDataListItem } from "./ui.data-list/types";
+export type {
+  DataListItem,
+  BaseDataListItem,
+  SlotItem,
+  UDataListSlots,
+} from "./ui.data-list/types";
 export type { UCheckboxOption, BaseCheckboxOption } from "./ui.form-checkbox/types";
 export type { ChipItem, BaseChipItem } from "./ui.image-avatar/types";
 export type { AvatarItem, BaseAvatarItem } from "./ui.image-avatar-group/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.18",
+  "version": "1.4.12-beta.19",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.button-toggle/UToggle.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TItem extends UToggleOption">
 import { computed, ref, useId, useTemplateRef } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
@@ -9,16 +9,18 @@ import { getDefaults } from "../utils/ui";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config, UToggleOption } from "./types";
+import type { Props, Config, UToggleOption, UToggleSlots } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TItem>>(), {
+  ...getDefaults<Props<TItem>, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: () => [],
 });
 
+defineSlots<UToggleSlots<TItem>>();
+
 const emit = defineEmits([
   /**
    * Triggers when toggle option is selected.

package/ui.button-toggle/storybook/stories.ts

@@ -7,7 +7,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UToggle from "../../ui.button-toggle/UToggle.vue";
+import UToggleComponent from "../../ui.button-toggle/UToggle.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
@@ -17,6 +17,9 @@ import ULabel from "../../ui.form-label/ULabel.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 UToggle = UToggleComponent as typeof UToggleComponent & { __name: string };
+
 interface UToggleArgs extends Props {
   slotTemplate?: string;
   enum: "size";

package/ui.button-toggle/tests/UToggle.test-d.ts

@@ -0,0 +1,48 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UToggleOption, UToggleSlots } from "../types";
+
+interface CountedOption {
+  value: string;
+  label: string;
+  count: number;
+}
+
+type OptionProps = Parameters<NonNullable<UToggleSlots<CountedOption>["option"]>>[0];
+
+describe("UToggle types", () => {
+  it("infers the caller's option shape in a slot", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<CountedOption>();
+    expectTypeOf<OptionProps["option"]["count"]>().toEqualTypeOf<number>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+    expectTypeOf<OptionProps["label"]>().toEqualTypeOf<string>();
+  });
+
+  it("promises the caller's members — options reach slots untransformed", () => {
+    /* Unlike UTable, `UToggle` iterates `props.options` directly: no flattening, filtering
+     * or synthetic entries, so the members are guaranteed rather than optional. */
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string>();
+    expectTypeOf<undefined>().not.toExtend<OptionProps["option"]["count"]>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof OptionProps["option"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("types the remaining slots", () => {
+    type Left = Parameters<NonNullable<UToggleSlots<CountedOption>["left"]>>[0];
+    type Right = Parameters<NonNullable<UToggleSlots<CountedOption>["right"]>>[0];
+
+    expectTypeOf<Left["option"]>().toEqualTypeOf<CountedOption>();
+    expectTypeOf<Right["option"]>().toEqualTypeOf<CountedOption>();
+    expectTypeOf<Left["iconName"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<UToggleOption>>();
+    expectTypeOf<Props<CountedOption>["options"]>().toEqualTypeOf<CountedOption[] | undefined>();
+  });
+});

package/ui.button-toggle/tests/UToggleTypes.vue

@@ -0,0 +1,55 @@
+<!-- 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>
+  <!-- `UToggle` iterates `options` verbatim, so the caller's shape is guaranteed, not optional. -->
+  <UToggle name="fixture" :options="options">
+    <template #left="{ option, index, iconName }">
+      {{ expectString(option.color) }}
+      {{ expectNumber(index) }}
+      {{ expectOptionalString(iconName) }}
+    </template>
+
+    <template #option="{ option, label, index }">
+      {{ expectString(option.color) }}
+      {{ expectString(label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #right="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UToggle>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UToggle name="typed" :options="typedOptions">
+    <template #option="{ option }">{{ expectNumber(option.count) }}</template>
+  </UToggle>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UToggle from "../UToggle.vue";
+
+interface CountedOption {
+  value: string;
+  label: string;
+  count: number;
+}
+
+const options = [{ value: "1", label: "Success", color: "success" }];
+const typedOptions = ref<CountedOption[]>([]);
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+</script>

package/ui.button-toggle/types.ts

@@ -17,7 +17,17 @@ export interface BaseToggleOption {
 /* Any object shape is a valid option, only reserved option keys are type checked. */
 export type UToggleOption = BaseToggleOption & (object | UnknownObject);
 
-export interface Props {
+/**
+ * Slots receive each option verbatim — `UToggle` iterates `props.options` without
+ * filtering, flattening or synthesising entries, so the caller's shape is guaranteed.
+ */
+export interface UToggleSlots<TItem extends UToggleOption = UToggleOption> {
+  left?: (props: { option: TItem; index: number; iconName?: string }) => unknown;
+  option?: (props: { option: TItem; index: number; label: string; iconName?: string }) => unknown;
+  right?: (props: { option: TItem; index: number; iconName?: string }) => unknown;
+}
+
+export interface Props<TItem extends UToggleOption = UToggleOption> {
   /**
    * Selected value.
    */
@@ -26,7 +36,7 @@ export interface Props {
   /**
    * Toggle item options.
    */
-  options?: UToggleOption[];
+  options?: TItem[];
 
   /**
    * Toggle size.

package/ui.data-list/UDataList.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TItem extends DataListItem">
 import { useTemplateRef } from "vue";
 import draggable from "vuedraggable/src/vuedraggable";
 
@@ -14,15 +14,17 @@ import defaultConfig from "./config";
 import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
 import type { UnknownObject } from "../types";
-import type { Props, DataListItem, Config } from "./types";
+import type { Props, DataListItem, SlotItem, UDataListSlots, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TItem>>(), {
+  ...getDefaults<Props<TItem>, Config>(defaultConfig, COMPONENT_NAME),
   list: () => [],
 });
 
+defineSlots<UDataListSlots<TItem>>();
+
 const emit = defineEmits([
   /**
    * Triggers when item is sorted (after drag).
@@ -205,33 +207,41 @@ const {
             :data-test="getDataTest('table')"
             @drag-sort="onDragEnd"
           >
-            <!-- @vue-ignore -->
-            <template #drag="slotProps: { item: DataListItem; iconName: string }">
+            <!-- The nested list is built from `element.children` (`DataListItem[]`, not `TItem[]`),
+                 so it yields `SlotItem<DataListItem>`. `SlotItem` is all-optional, so forwarding it
+                 as `SlotItem<TItem>` promises nothing a deep child may lack. -->
+            <template #drag="slotProps">
               <!--
                 @slot Use it to add something instead of the drag icon.
                 @binding {object} item
                 @binding {string} icon-name
               -->
-              <slot name="drag" :item="slotProps.item" :icon-name="slotProps.iconName" />
+              <slot
+                name="drag"
+                :item="slotProps.item as SlotItem<TItem>"
+                :icon-name="slotProps.iconName"
+              />
             </template>
 
-            <!-- @vue-ignore -->
-            <template #label="slotProps: { item: DataListItem; crossed: boolean }">
+            <template #label="slotProps">
               <!--
                 @slot Use it to modify label.
                 @binding {object} item
                 @binding {boolean} crossed
               -->
-              <slot name="label" :item="slotProps.item" :crossed="slotProps.crossed" />
+              <slot
+                name="label"
+                :item="slotProps.item as SlotItem<TItem>"
+                :crossed="slotProps.crossed"
+              />
             </template>
 
-            <!-- @vue-ignore -->
-            <template #actions="slotProps: { item: DataListItem }">
+            <template #actions="slotProps">
               <!--
                 @slot Use it to add custom actions.
                 @binding {object} item
               -->
-              <slot name="actions" :item="slotProps.item" />
+              <slot name="actions" :item="slotProps.item as SlotItem<TItem>" />
             </template>
           </UDataList>
         </div>

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

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDataList from "../../ui.data-list/UDataList.vue";
+import UDataListComponent from "../../ui.data-list/UDataList.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
@@ -19,6 +19,9 @@ import tooltip from "../../v.tooltip/vTooltip";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props, DataListItem } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDataList = UDataListComponent as typeof UDataListComponent & { __name: string };
+
 interface UDataListArgs extends Props {
   slotTemplate?: string;
   enum: "size";

package/ui.data-list/tests/UDataList.test-d.ts

@@ -0,0 +1,76 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, DataListItem, SlotItem, UDataListSlots } from "../types";
+
+interface UserItem {
+  value: number;
+  label: string;
+  owner: string;
+}
+
+type LabelSlot = NonNullable<UDataListSlots<UserItem>["label"]>;
+type LabelProps = Parameters<LabelSlot>[0];
+
+describe("UDataList types", () => {
+  it("infers the caller's item shape in the label slot", () => {
+    expectTypeOf<LabelProps["item"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<LabelProps["item"]["owner"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<LabelProps["crossed"]>().toEqualTypeOf<boolean>();
+  });
+
+  it("does not expose undeclared item properties to a slot", () => {
+    /* An index signature would make any key legal, so `item.nonExistent` must not resolve. */
+    type HasIndexSignature = string extends keyof LabelProps["item"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof LabelProps["item"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("keeps the reserved item keys available", () => {
+    expectTypeOf<SlotItem<UserItem>["crossed"]>().toEqualTypeOf<boolean | undefined>();
+    expectTypeOf<SlotItem<UserItem>["actions"]>().toEqualTypeOf<boolean | undefined>();
+    expectTypeOf<SlotItem<UserItem>["children"]>().toEqualTypeOf<DataListItem[] | undefined>();
+  });
+
+  it("types the drag and actions slots", () => {
+    type DragProps = Parameters<NonNullable<UDataListSlots<UserItem>["drag"]>>[0];
+    type ActionsProps = Parameters<NonNullable<UDataListSlots<UserItem>["actions"]>>[0];
+
+    expectTypeOf<DragProps["iconName"]>().toEqualTypeOf<string>();
+    expectTypeOf<DragProps["item"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<ActionsProps["item"]["owner"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("types the empty slot", () => {
+    type EmptyProps = Parameters<NonNullable<UDataListSlots<UserItem>["empty"]>>[0];
+
+    expectTypeOf<EmptyProps["emptyTitle"]>().toEqualTypeOf<string>();
+    expectTypeOf<EmptyProps["emptyDescription"]>().toEqualTypeOf<string>();
+  });
+
+  it("does not promise the caller's members at depth >= 1", () => {
+    /* The component renders itself with `:list="element.children"`, and `children` is
+     * `DataListItem[]`, not `TItem[]` — so a nested child need not carry the parent's members.
+     * A runtime probe over 3 levels confirmed the grandchild arrives without `owner`. */
+    expectTypeOf<SlotItem<UserItem>["owner"]>().toEqualTypeOf<string | undefined>();
+
+    /* The grandchild shape the probe actually observed must be assignable to every item slot. */
+    type Grandchild = { value: number; label: string; extraOnly: boolean };
+
+    type DragProps = Parameters<NonNullable<UDataListSlots<UserItem>["drag"]>>[0];
+    type ActionsProps = Parameters<NonNullable<UDataListSlots<UserItem>["actions"]>>[0];
+
+    expectTypeOf<Grandchild>().toExtend<LabelProps["item"]>();
+    expectTypeOf<Grandchild>().toExtend<DragProps["item"]>();
+    expectTypeOf<Grandchild>().toExtend<ActionsProps["item"]>();
+
+    /* `nestedKey` can open a nested list from a source `children` does not constrain, so even
+     * an item carrying none of the caller's members must be admitted. */
+    expectTypeOf<{ value: number }>().toExtend<LabelProps["item"]>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<DataListItem>>();
+    expectTypeOf<Props<UserItem>["list"]>().toEqualTypeOf<UserItem[] | undefined>();
+  });
+});

package/ui.data-list/tests/UDataListTypes.vue

@@ -0,0 +1,110 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `list` prop at a real call site. -->
+<template>
+  <UDataList :list="list">
+    <!-- A nested child may lack the parent's members, so they are optional;
+         the reserved keys (`crossed`, `actions`, `children`) are optional already. -->
+    <template #label="{ item, crossed }">
+      {{ expectOptionalString(item.label) }}
+      {{ expectOptionalString(item.owner) }}
+      {{ expectOptionalNumber(item.value) }}
+      {{ expectBoolean(crossed) }}
+    </template>
+
+    <template #drag="{ item, iconName }">
+      {{ expectOptionalString(item.label) }}
+      {{ expectString(iconName) }}
+    </template>
+
+    <template #actions="{ item }">
+      {{ expectOptionalString(item.owner) }}
+    </template>
+
+    <template #empty="{ emptyTitle, emptyDescription }">
+      {{ expectString(emptyTitle) }}
+      {{ expectString(emptyDescription) }}
+    </template>
+  </UDataList>
+
+  <!-- A list from a non-literal source still exposes the declared item shape. -->
+  <UDataList :list="typedList">
+    <template #label="{ item }">{{ expectOptionalString(item.label) }}</template>
+  </UDataList>
+
+  <UDataList :list="list">
+    <template #label="{ item }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred item. -->
+      {{ item.nonExistent }}
+    </template>
+  </UDataList>
+
+  <!-- Regression guard: an item slot must never promise the caller's members as present.
+       The component renders ITSELF with `:list="element.children"`, and `children` is
+       `DataListItem[]`, not `TItem[]` — a runtime probe over 3 levels observed the
+       grandchild arriving with `{ value, label, extraOnly }` and NO `owner`. -->
+  <UDataList :list="deepList">
+    <template #label="{ item }">
+      <!-- @vue-expect-error a grandchild at depth 2 need not carry `owner`. -->
+      {{ expectString(item.owner) }}
+    </template>
+    <template #drag="{ item }">
+      <!-- @vue-expect-error a nested child need not carry `label`. -->
+      {{ expectString(item.label) }}
+    </template>
+    <template #actions="{ item }">
+      <!-- @vue-expect-error a nested child need not carry `value`. -->
+      {{ expectNumber(item.value) }}
+    </template>
+  </UDataList>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDataList from "../UDataList.vue";
+
+interface UserItem {
+  value: number;
+  label: string;
+  owner: string;
+}
+
+const list = [{ value: 1, label: "a", owner: "alice" }];
+const typedList = ref<UserItem[]>([]);
+
+/* A parent whose grandchild lacks the parent's members — exactly what the probe observed. */
+const deepList = [
+  {
+    value: 1,
+    label: "Parent",
+    owner: "alice",
+    children: [
+      {
+        value: 11,
+        label: "Child",
+        children: [{ value: 111, label: "Grandchild", extraOnly: true }],
+      },
+    ],
+  },
+];
+
+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-list/types.ts

@@ -20,11 +20,35 @@ export interface BaseDataListItem {
 /* Any object shape is a valid item, only reserved item keys are type checked. */
 export type DataListItem = BaseDataListItem & (object | UnknownObject);
 
-export interface Props {
+/* Drops `DataListItem`'s index signature so slot items only expose statically known keys. */
+type KnownKeys<T> = {
+  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
+};
+
+/**
+ * Item shape exposed to slots: the caller's item plus the reserved item keys.
+ *
+ * `TItem`'s own keys are optional. The component renders itself for nested children
+ * (`:list="element.children"`), and `BaseDataListItem.children` is `DataListItem[]`, not `TItem[]`
+ * — so a child need not carry the parent's members. `nestedKey` can open a nested list from a
+ * different source entirely. `BaseDataListItem`'s keys are optional already, so nothing is
+ * promised that can be absent.
+ */
+export type SlotItem<TItem extends DataListItem = DataListItem> = Partial<KnownKeys<TItem>> &
+  BaseDataListItem;
+
+export interface UDataListSlots<TItem extends DataListItem = DataListItem> {
+  empty?: (props: { emptyTitle: string; emptyDescription: string }) => unknown;
+  drag?: (props: { item: SlotItem<TItem>; iconName: string }) => unknown;
+  label?: (props: { item: SlotItem<TItem>; crossed: boolean }) => unknown;
+  actions?: (props: { item: SlotItem<TItem> }) => unknown;
+}
+
+export interface Props<TItem extends DataListItem = DataListItem> {
   /**
    * Data item options.
    */
-  list?: DataListItem[];
+  list?: TItem[];
 
   /**
    * Group name.