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

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

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

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

@@ -7,6 +7,7 @@ import UTableRow from "../UTableRow.vue";
 import UEmpty from "../../ui.container-empty/UEmpty.vue";
 import ULoaderProgress from "../../ui.loader-progress/ULoaderProgress.vue";
 import UDivider from "../../ui.container-divider/UDivider.vue";
+import USkeleton from "../../ui.skeleton/USkeleton.vue";
 import {
   LoaderProgressSymbol,
   createLoaderProgress,
@@ -77,7 +78,7 @@ describe("UTable.vue", () => {
 
   function mountUTable(props: Props, options = {}) {
     return mount(UTable, {
-      props,
+      props: { ...props },
       global: getGlobalOptions(),
       ...options,
     });
@@ -149,6 +150,29 @@ describe("UTable.vue", () => {
       expect(emptyComponent.exists()).toBe(true);
     });
 
+    it("Skeleton loading – renders skeleton body instead of empty state", () => {
+      const component = mountUTable(getDefaultProps({ rows: [], skeletonLoading: true }));
+
+      expect(component.findComponent(UEmpty).exists()).toBe(false);
+      expect(component.findAllComponents(USkeleton).length).toBeGreaterThan(0);
+      expect(component.find("table").exists()).toBe(true);
+    });
+
+    it("Skeleton loading – applies skeleton rows and widths from props", () => {
+      const component = mountUTable(
+        getDefaultProps({
+          rows: [],
+          skeletonLoading: true,
+          skeletonRows: 2,
+          skeletonWidths: ["w-1/3"],
+        }),
+      );
+
+      expect(component.findAll("tbody tr")).toHaveLength(2);
+      expect(component.findAllComponents(USkeleton)).toHaveLength(defaultColumns.length * 2);
+      expect(component.findComponent(USkeleton).classes()).toContain("w-1/3");
+    });
+
     it("Selectable – renders select all checkbox when selectable is true", () => {
       const component = mountUTable(getDefaultProps({ selectable: true }));
 
@@ -221,6 +245,20 @@ describe("UTable.vue", () => {
       expect(loader.props("loading")).toBe(false);
     });
 
+    it("Skeleton loading – hides progress loader while skeleton is shown", () => {
+      const component = mountUTable(
+        getDefaultProps({
+          rows: [],
+          loading: true,
+          skeletonLoading: true,
+        }),
+      );
+
+      const loader = component.findComponent(ULoaderProgress);
+
+      expect(loader.props("loading")).toBe(false);
+    });
+
     it("Data Test – applies correct data-test attributes", () => {
       const dataTest = "test-table";
 
@@ -644,7 +682,14 @@ describe("UTable.vue", () => {
           name: "Parent Row",
           email: "parent@example.com",
           role: "Admin",
-          row: [{ id: "1-1", name: "Child", email: "child@example.com", role: "User" }],
+          row: [
+            {
+              id: "1-1",
+              name: "Child",
+              email: "child@example.com",
+              role: "User",
+            },
+          ],
         },
       ];
 
@@ -710,7 +755,14 @@ describe("UTable.vue", () => {
           name: "Parent Row",
           email: "parent@example.com",
           role: "Admin",
-          row: [{ id: "1-1", name: "Child", email: "child@example.com", role: "User" }],
+          row: [
+            {
+              id: "1-1",
+              name: "Child",
+              email: "child@example.com",
+              role: "User",
+            },
+          ],
         },
       ];
 
@@ -792,7 +844,14 @@ describe("UTable.vue", () => {
         name: "Parent Row",
         email: "parent@example.com",
         role: "Admin",
-        row: [{ id: "1-1", name: "Child", email: "child@example.com", role: "User" }],
+        row: [
+          {
+            id: "1-1",
+            name: "Child",
+            email: "child@example.com",
+            role: "User",
+          },
+        ],
       };
 
       const component = mountUTable(getDefaultProps({ rows: [expandableRow] }));
@@ -813,7 +872,14 @@ describe("UTable.vue", () => {
         name: "Parent Row",
         email: "parent@example.com",
         role: "Admin",
-        row: [{ id: "1-1", name: "Child", email: "child@example.com", role: "User" }],
+        row: [
+          {
+            id: "1-1",
+            name: "Child",
+            email: "child@example.com",
+            role: "User",
+          },
+        ],
       };
 
       const component = mountUTable(
@@ -879,7 +945,12 @@ describe("UTable.vue", () => {
               email: "child1@example.com",
               role: "User",
               row: [
-                { id: "1-1-1", name: "Grandchild", email: "grandchild@example.com", role: "Guest" },
+                {
+                  id: "1-1-1",
+                  name: "Grandchild",
+                  email: "grandchild@example.com",
+                  role: "Guest",
+                },
               ],
             },
           ],
@@ -902,7 +973,14 @@ describe("UTable.vue", () => {
         name: "Parent Row",
         email: "parent@example.com",
         role: "Admin",
-        row: [{ id: "1-1", name: "Child", email: "child@example.com", role: "User" }],
+        row: [
+          {
+            id: "1-1",
+            name: "Child",
+            email: "child@example.com",
+            role: "User",
+          },
+        ],
       };
 
       const component = mountUTable(getDefaultProps({ rows: [expandableRow] }));

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

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

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

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