feat: passing Dataset<T> to FSortFilterDataset or FPaginateDataset returns Dataset<T> (refs SFKUI-7348)

Author: ext

etc/vue.api.md

@@ -50,7 +50,6 @@ import { Slots } from 'vue';
 import { StackHandle } from '@fkui/logic';
 import { TranslateFunction } from '@fkui/logic';
 import { UnwrapRef } from 'vue';
-import { UnwrapRefSimple } from '@vue/reactivity';
 import { ValidatableHTMLElement } from '@fkui/logic';
 import { ValidationConfigUpdateDetail } from '@fkui/logic';
 import { ValidatorConfigs } from '@fkui/logic';

packages/vue/src/components/FPaginateDataset/FPaginateDataset.vue

@@ -1,19 +1,20 @@
-<script setup lang="ts" generic="T">
-import { computed, onMounted, provide, ref, watch } from "vue";
+<script setup lang="ts" generic="T, TArray extends Dataset<T> | T[] = Dataset<T> | T[]">
+import { type Ref, computed, onMounted, provide, ref, watch } from "vue";
+import { type Dataset } from "../../utils";
 import { type FPaginateDatasetPageEventDetail } from "../FPaginator";
 import { paginateDatasetKey } from "./provide";
 
 // Defines component props
 const {
-    items = [],
+    items = [] as unknown as TInfered,
     itemsPerPage = 10,
     itemsLength = 0,
     fetchData = () => null,
 } = defineProps<{
     /**
      * The items to be used. The items will be used in the given array order.
      */
-    items?: T[];
+    items?: TInfered;
 
     /**
      * The number of items per page (at most).
@@ -33,11 +34,13 @@ const {
      * @param firstItemIndex - The index of the first item on the page.
      * @param lastItemIndex - The index of the last item on the page.
      */
-    fetchData?(firstItemIndex: number, lastItemIndex: number): T[] | Promise<T[]>;
+    fetchData?(firstItemIndex: number, lastItemIndex: number): TInfered | Promise<TInfered>;
 }>();
 
+type TInfered = TArray extends Dataset<infer U> ? Dataset<U> : TArray;
+
 // References fetched data
-const fetchedData = ref(null as T[] | null);
+const fetchedData = ref(null as TInfered | null) as Ref<TInfered | null>;
 
 // References status of ongoing data fetching
 const dataFetchingInProgress = ref(false);
@@ -50,7 +53,12 @@ const firstItemIndex = computed(() => Math.max(0, itemsPerPage * (currentPage.va
 const lastItemIndex = computed(() => Math.min(itemsPerPage * currentPage.value, numberOfItems.value));
 
 // Computes array of items on current page
-const currentPageItems = computed(() => fetchedData.value ?? items.slice(firstItemIndex.value, lastItemIndex.value));
+const currentPageItems = computed<TInfered>((): TInfered => {
+    if (fetchedData.value) {
+        return fetchedData.value;
+    }
+    return items.slice(firstItemIndex.value, lastItemIndex.value) as TInfered;
+});
 
 // Computes number of items on current page
 const currentPageItemLength = computed(() => currentPageItems.value.length);

packages/vue/src/components/FSortFilterDataset/FSortFilterDataset.vue

@@ -1,9 +1,9 @@
-<script setup lang="ts" generic="T">
+<script setup lang="ts" generic="T, TArray extends Dataset<T> | T[] = Dataset<T> | T[]">
 import { type Ref, nextTick, onMounted, provide, useTemplateRef, watch } from "vue";
 import { TranslationService, alertScreenReader, debounce } from "@fkui/logic";
 import { IFlex, IFlexItem } from "../../internal-components/IFlex";
 import { useTranslate } from "../../plugins";
-import { getHTMLElementFromVueRef } from "../../utils";
+import { type Dataset, getHTMLElementFromVueRef } from "../../utils";
 import { FIcon } from "../FIcon";
 import { FSelectField } from "../FSelectField";
 import { FTextField } from "../FTextField";
@@ -14,11 +14,11 @@ import {
 import { type SortOrder } from "./sort-order";
 import { useSortFilterDataset } from "./use-sort-filter-dataset";
 
-export interface FSortFilterDatasetProps<T> {
+export interface FSortFilterDatasetProps<TArray> {
     /**
      * The data that you wish to sort or filter.
      */
-    data: T[];
+    data: TArray;
     /**
      * All the attributes you want to enable sorting for and the corresponding name to display in the dropdown.
      * Structured as `{attributeName: "Name for dropdown", secondAttributeName: "Name for dropdown"}`
@@ -52,6 +52,8 @@ export interface FSortFilterDatasetProps<T> {
     filterAttributes?: PropertyKey[];
 }
 
+type TInfered = TArray extends Dataset<infer U> ? Dataset<U> : TArray;
+
 const {
     data,
     sortableAttributes,
@@ -64,15 +66,15 @@ const {
     /* eslint-disable-next-line vue/no-boolean-default -- technical debt, boolean attributes should be opt-in not opt-out */
     defaultSortAscending = true,
     filterAttributes = undefined,
-} = defineProps<FSortFilterDatasetProps<T>>();
+} = defineProps<FSortFilterDatasetProps<TInfered>>();
 
 const emit = defineEmits<{
     /**
      * Emitted when the data is sorted.
      *
      * @arg items - The sorted data.
      */
-    datasetSorted: [items: T[]];
+    datasetSorted: [items: TInfered];
 
     /**
      * Emits the used sorting attributes.
@@ -94,7 +96,7 @@ const {
     sortOrders,
     onUserChangeSortAttribute,
     onApiChangeSortAttribute,
-} = useSortFilterDataset(
+} = useSortFilterDataset<T, TInfered>(
     () => data,
     () => sortableAttributes,
     () => filterAttributes,

packages/vue/src/components/FSortFilterDataset/FSortFilterFilter.ts

@@ -1,4 +1,5 @@
 import { isSet } from "@fkui/logic";
+import { type Dataset } from "../../utils";
 
 function includesAllSearchTerms(
     item: Record<PropertyKey, string | number | undefined>,
@@ -23,11 +24,11 @@ function includesAllSearchTerms(
     return true;
 }
 
-export function filter<T>(
-    list: T[],
+export function filter<T, TArray extends Dataset<T> | T[]>(
+    list: TArray,
     filterAttributes: PropertyKey[],
     searchString: string,
-): T[] {
+): TArray {
     searchString = searchString.trim();
     if (searchString.trim() === "") {
         return list;
@@ -43,5 +44,5 @@ export function filter<T>(
             filterAttributes,
             searchTerms,
         ),
-    );
+    ) as TArray;
 }

packages/vue/src/components/FSortFilterDataset/use-sort-filter-dataset.ts

@@ -7,6 +7,7 @@ import {
     watch,
 } from "vue";
 import { useTranslate } from "../../plugins";
+import { type Dataset } from "../../utils";
 import { filter } from "./FSortFilterFilter";
 import { sort } from "./FSortFilterSorter";
 import { type SortOrder } from "./sort-order";
@@ -84,24 +85,24 @@ function normalizeFilterAttributes(
     return filterAttributes;
 }
 
-function sortFilterData<T>(
-    data: T[],
+function sortFilterData<T, TArray extends Dataset<T> | T[]>(
+    data: TArray,
     filterAttributes: PropertyKey[],
     searchString: string,
     sortAttribute: SortableAttribute,
-): T[] {
+): TArray {
     const filteredData = filter(data, filterAttributes, searchString);
 
     return sort(filteredData, {
         attribute: sortAttribute.attribute as keyof T | "",
         ascending: sortAttribute.ascending,
-    });
+    }) as TArray;
 }
 
-export interface SortFilterDatasetState<T> {
+export interface SortFilterDatasetState<T, TArray extends Dataset<T> | T[]> {
     searchString: Ref<string>;
     sortAttribute: Ref<SortOrder>;
-    sortFilterResult: Ref<T[]>;
+    sortFilterResult: Ref<TArray>;
     showClearButton: Ref<boolean>;
     defaultSortValue: SortOrder;
     sortableKeys: Ref<Array<string | symbol>>;
@@ -114,18 +115,20 @@ export interface SortFilterDatasetState<T> {
     ): void;
 }
 
-export function useSortFilterDataset<T>(
-    data: MaybeRefOrGetter<T[]>,
+export function useSortFilterDataset<T, TArray extends Dataset<T> | T[]>(
+    data: MaybeRefOrGetter<TArray>,
     sortableAttributes: MaybeRefOrGetter<
         Record<PropertyKey, string | Readonly<Ref<string>>>
     >,
     filterAttributes: MaybeRefOrGetter<PropertyKey[] | undefined>,
     defaultSortAttribute: PropertyKey,
     defaultSortAscending: boolean,
-): SortFilterDatasetState<T> {
+): SortFilterDatasetState<T, TArray> {
     const searchString = ref("");
     const sortAttribute = ref<SortOrder>({ ...defaultSortValue });
-    const sortFilterResult: Ref<T[]> = ref([]);
+    const sortFilterResult = ref<TArray>(
+        [] as unknown as TArray,
+    ) as Ref<TArray>;
     const useDefaultSortOrder = ref(true);
 
     /* all enumerable keys from sortableAttributes */