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

package/ui.container-drawer/tests/UDrawer.test.ts

@@ -9,11 +9,6 @@ import type { Props } from "../types";
 describe("UDrawer", () => {
   const modelValue = true;
 
-  // Wait for an async component to load
-  function sleep(ms: number = 0) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
   // Props tests
   describe("Props", () => {
     it("ModelValue – renders when true", () => {
@@ -150,10 +145,10 @@ describe("UDrawer", () => {
       expect(innerWrapper.attributes("class")).toContain(expectedClass);
     });
 
-    it("CloseOnOverlay – closes drawer when overlay is clicked", () => {
+    it("CloseOnOverlay – closes drawer when overlay is clicked", async () => {
       const closeOnOverlay = [true, false];
 
-      closeOnOverlay.forEach(async (value) => {
+      for (const value of closeOnOverlay) {
         const component = mount(UDrawer, {
           props: {
             modelValue,
@@ -167,18 +162,17 @@ describe("UDrawer", () => {
 
         await innerWrapper.trigger("mousedown");
         await innerWrapper.trigger("click");
-        await sleep(1000);
 
-        const drawer = component.find('[vl-key="drawer"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(drawer.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
-    it("CloseOnEsc – closes drawer when escape key is pressed", () => {
+    it("CloseOnEsc – closes drawer when escape key is pressed", async () => {
       const closeOnEsc = [true, false];
 
-      closeOnEsc.forEach(async (value) => {
+      for (const value of closeOnEsc) {
         const component = mount(UDrawer, {
           props: {
             modelValue,
@@ -189,12 +183,11 @@ describe("UDrawer", () => {
         const wrapper = component.find("[vl-key='wrapper']");
 
         await wrapper.trigger("keydown", { key: "Escape" });
-        await sleep(1000);
 
-        const drawer = component.find('[vl-key="drawer"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(drawer.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
     it("DataTest – applies the correct data-test attribute", () => {

package/ui.container-modal/tests/UModal.test.ts

@@ -34,11 +34,6 @@ const mountWithRouter = (component: unknown, options: UnknownObject) => {
 describe("UModal", () => {
   const modelValue = true;
 
-  // Wait for an async component to load
-  function sleep(ms: number = 0) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
   // Props tests
   describe("Props", () => {
     // ModelValue prop
@@ -189,10 +184,10 @@ describe("UModal", () => {
     });
 
     // CloseOnOverlay prop
-    it("renders with closeOnOverlay prop", () => {
+    it("renders with closeOnOverlay prop", async () => {
       const closeOnOverlay = [true, false];
 
-      closeOnOverlay.forEach(async (value) => {
+      for (const value of closeOnOverlay) {
         const component = mount(UModal, {
           props: {
             modelValue,
@@ -206,19 +201,18 @@ describe("UModal", () => {
 
         await innerWrapper.trigger("mousedown");
         await innerWrapper.trigger("click");
-        await sleep(1000);
 
-        const modal = component.find('[vl-key="modal"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(modal.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
     // CloseOnEsc prop
-    it("renders with closeOnEsc prop", () => {
+    it("renders with closeOnEsc prop", async () => {
       const closeOnEsc = [true, false];
 
-      closeOnEsc.forEach(async (value) => {
+      for (const value of closeOnEsc) {
         const component = mount(UModal, {
           props: {
             modelValue,
@@ -229,12 +223,11 @@ describe("UModal", () => {
         const wrapper = component.find("[vl-key='wrapper']");
 
         await wrapper.trigger("keydown", { key: "Escape" });
-        await sleep(1000);
 
-        const modal = component.find('[vl-key="modal"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(modal.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
     // Inner prop

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";
 
@@ -13,15 +13,18 @@ import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
-import type { Props, DataListItem, Config } from "./types";
+import type { UnknownObject } 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).
@@ -42,6 +45,12 @@ function isCrossed(element: DataListItem) {
   return Boolean(element.crossed);
 }
 
+function hasNestedList(element: DataListItem) {
+  return Boolean(
+    element.children?.length || (props.nestedKey && (element as UnknownObject)[props.nestedKey]),
+  );
+}
+
 function onDragEnd() {
   const sortData = prepareSortData(props.list);
 
@@ -57,7 +66,7 @@ function prepareSortData(list: DataListItem[] = [], parentValue: string | number
     if (hasItemChildren) {
       const childrenItem = prepareSortData(
         item.children,
-        item[props.valueKey] as string | number | null,
+        (item as UnknownObject)[props.valueKey] as string | number | null,
       );
 
       childrenItem.forEach((item) => sortData.push(item));
@@ -181,36 +190,58 @@ const {
           </div>
 
           <UDataList
-            v-if="element.children?.length"
+            v-if="hasNestedList(element)"
             hide-empty-state-for-nesting
             :list="element.children"
             :group="group"
+            :size="size"
+            :label-key="labelKey"
+            :value-key="valueKey"
+            :nested-key="nestedKey"
+            :animation-duration="animationDuration"
+            :force-fallback="forceFallback"
+            :fallback-on-body="fallbackOnBody"
+            :fallback-class="fallbackClass"
             v-bind="nestedAttrs"
+            :class="!element.children?.length && 'min-h-4'"
             :data-test="getDataTest('table')"
             @drag-sort="onDragEnd"
           >
-            <!-- @vue-ignore -->
-            <template #label="slotProps: { item: DataListItem; crossed: boolean }">
+            <!-- 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 as SlotItem<TItem>"
+                :icon-name="slotProps.iconName"
+              />
+            </template>
+
+            <template #label="slotProps">
               <!--
                 @slot Use it to modify label.
                 @binding {object} item
                 @binding {boolean} crossed
               -->
-              <slot name="label" :item="slotProps.item" :crossed="slotProps.crossed">
-                <div
-                  v-bind="slotProps.crossed ? labelCrossedAttrs : labelAttrs"
-                  v-text="slotProps.item[labelKey]"
-                />
-              </slot>
+              <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/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "",
   draggable: "",
   draggableDrag: "bg-lifted",
-  draggableGhost: "bg-lifted/50",
+  draggableGhost: "data-list-ghost",
   itemWrapper: "group/item-wrapper",
   item: {
     base: `
@@ -57,7 +57,7 @@ export default /*tw*/ {
     animationDuration: 200,
     forceFallback: false,
     fallbackOnBody: false,
-    fallbackClass: "sortable-fallback",
+    fallbackClass: "shadow-sm",
     /* icons */
     dragIcon: "drag_indicator",
   },

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";
@@ -122,7 +125,7 @@ export const ForceFallback = DefaultTemplate.bind({});
 ForceFallback.args = {
   forceFallback: true,
   fallbackOnBody: true,
-  fallbackClass: "sortable-fallback",
+  fallbackClass: "opacity-100!",
 };
 ForceFallback.parameters = {
   docs: {

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/UDataList.test.ts

@@ -9,7 +9,7 @@ import draggable from "vuedraggable";
 import type { Props, DataListItem } from "../types";
 
 describe("UDataList.vue", () => {
-  const defaultList: DataListItem[] = [
+  const defaultList = [
     { value: 1, label: "Item 1" },
     { value: 2, label: "Item 2", crossed: true },
     { value: 3, label: "Item 3", actions: false },
@@ -227,7 +227,7 @@ describe("UDataList.vue", () => {
       expect(draggableComponent.vm.$attrs["fallback-class"]).toBe(fallbackClass);
     });
 
-    it("Fallback Class – defaults to sortable-fallback", () => {
+    it("Fallback Class – defaults to shadow-sm", () => {
       const component = mount(UDataList, {
         props: {
           list: defaultList,
@@ -236,7 +236,7 @@ describe("UDataList.vue", () => {
 
       const draggableComponent = component.findComponent(draggable);
 
-      expect(draggableComponent.vm.$attrs["fallback-class"]).toBe("sortable-fallback");
+      expect(draggableComponent.vm.$attrs["fallback-class"]).toBe("shadow-sm");
     });
 
     it("Nesting – renders nested items when children array is present", async () => {
@@ -253,6 +253,55 @@ describe("UDataList.vue", () => {
       expect(nestedComponent.props("list")).toEqual(nestedList[0].children);
     });
 
+    it("Nesting – renders empty nested drop-zone for childless items when nestedKey is truthy", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: [{ value: 1, label: "Leaf", canNest: true }],
+          nestedKey: "canNest",
+        },
+      });
+
+      const nestedComponent = component.findComponent("[vl-key='nested']");
+
+      expect(nestedComponent.exists()).toBe(true);
+    });
+
+    it("Nesting – does not render drop-zone for childless items when nestedKey value is falsy", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: [{ value: 1, label: "Leaf", canNest: false }],
+          nestedKey: "canNest",
+        },
+      });
+
+      const nestedComponent = component.findComponent("[vl-key='nested']");
+
+      expect(nestedComponent.exists()).toBe(false);
+    });
+
+    it("Nesting – emits dragged item with parentValue of the leaf after drop into empty drop-zone", async () => {
+      const leaf = { value: 1, label: "Leaf", canNest: true, children: [] as DataListItem[] };
+      const list: DataListItem[] = [leaf, { value: 2, label: "Dragged", canNest: true }];
+
+      const component = mount(UDataList, {
+        props: { list, nestedKey: "canNest" },
+      });
+
+      // Simulate vuedraggable moving item 2 into the leaf's (previously empty) nested list.
+      list.splice(1, 1);
+      leaf.children!.push({ value: 2, label: "Dragged", canNest: true });
+
+      await component.findComponent(draggable).vm.$emit("end");
+
+      const sortData = component.emitted("dragSort")?.[0]?.[0] as {
+        value: number;
+        parentValue: unknown;
+      }[];
+      const dragged = sortData.find((item) => item.value === 2);
+
+      expect(dragged?.parentValue).toBe(leaf.value);
+    });
+
     it("Data Test – applies correct data-test attribute", () => {
       const dataTest = "test-data-list";
 

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

@@ -2,7 +2,7 @@ import defaultConfig from "./config";
 
 import DraggableContext from "vuedraggable";
 
-import type { ComponentConfig, UnknownType } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
@@ -11,18 +11,44 @@ export interface DragMoveEvent extends DragEvent {
   relatedContext: typeof DraggableContext | null;
 }
 
-export interface DataListItem {
+export interface BaseDataListItem {
   crossed?: boolean;
   actions?: boolean;
   children?: DataListItem[];
-  [key: string]: UnknownType | DataListItem[];
 }
 
-export interface Props {
+/* Any object shape is a valid item, only reserved item keys are type checked. */
+export type DataListItem = BaseDataListItem & (object | UnknownObject);
+
+/* 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.
@@ -70,6 +96,12 @@ export interface Props {
    */
   hideEmptyStateForNesting?: boolean;
 
+  /**
+   * Item key whose truthy value renders an empty nested drop-zone,
+   * so a deeper level can be created by drag even without children.
+   */
+  nestedKey?: string;
+
   /**
    * Component config object.
    */