@katlux/providers 0.1.0-beta.0

package/services/DataProvider/ADataProvider.ts

@@ -0,0 +1,126 @@
+import { ref, type Ref } from 'vue'
+import type { TDataRow, IDataFilter, IDataSort, IDataResult, IKDatatableAction, IDataProviderOptions } from '../types'
+import { useDebounce } from '@katlux/toolkit/composables/useDebounce'
+
+// Note: In an isomorphic package, we must handle Nuxt auto-imports carefully. 
+// Standard Vue ref and watch are explicitly imported.
+import { watch } from 'vue'
+const APP_MODULE = '#app';
+// DataProvider abstract class
+export abstract class ADataProvider {
+	filter: Ref<IDataFilter | null> = ref(null)
+	sortList: Ref<IDataSort[]> = ref([])
+	currentPage: Ref<number> = ref(1)
+	pageSize: Ref<number> = ref(10)
+	pageData: Ref<TDataRow[]> = ref([])
+	rowCount: Ref<number> = ref(0)
+	loading: Ref<Boolean> = ref(false)
+	SSR: Ref<Boolean> = ref(false)
+	deduplicate: Ref<Boolean> = ref(true)
+	nuxtApp: any = null
+	urlPageParam: Ref<string> = ref('')
+	selectedRows: Ref<any[]> = ref([])
+	selectAll: Ref<boolean> = ref(false)
+
+	constructor(options?: IDataProviderOptions) {
+		if (options?.nuxtApp) {
+			this.nuxtApp = options.nuxtApp
+		} else if (import.meta.server) {
+			try {
+				import(/* @vite-ignore */ APP_MODULE).then(appModule => {
+					this.nuxtApp = appModule.useNuxtApp()
+				}).catch(() => { })
+			} catch (e) {
+				// Outside nuxt context
+			}
+		}
+
+		if (options?.filter) {
+			this.filter.value = options.filter
+		}
+		if (options?.sortList) {
+			this.sortList.value = options.sortList
+		}
+		if (options?.pageSize) {
+			this.pageSize.value = options.pageSize
+		}
+		if (options?.currentPage) {
+			this.currentPage.value = options.currentPage
+		}
+		if (options?.SSR) {
+			this.SSR.value = options.SSR
+		}
+		if (options?.deduplicate !== undefined) {
+			this.deduplicate.value = options.deduplicate
+		}
+
+		// URL-based pagination: read initial page from URL
+		if (options?.urlPageParam) {
+			this.urlPageParam.value = options.urlPageParam
+			try {
+				import(/* @vite-ignore */ APP_MODULE).then(appModule => {
+					const route = appModule.useRoute()
+					const pageFromUrl = route.query[options.urlPageParam!]
+					if (pageFromUrl) {
+						const parsedPage = parseInt(pageFromUrl as string, 10)
+						if (!isNaN(parsedPage) && parsedPage > 0) {
+							this.currentPage.value = parsedPage
+						}
+					}
+				}).catch(() => { })
+			} catch (e) {
+				// useRoute not available (outside Vue context)
+			}
+		}
+
+		// Watch for changes in currentPage and pageSize to automatically reload data
+		watch(this.currentPage, (newPage) => {
+			this.loadPageData()
+
+			// URL-based pagination: update URL when page changes (client-side only)
+			if (import.meta.client && this.urlPageParam.value) {
+				try {
+					import(/* @vite-ignore */ APP_MODULE).then(appModule => {
+						const router = appModule.useRouter()
+						const currentQuery = { ...router.currentRoute.value.query }
+						if (newPage === 1) {
+							delete currentQuery[this.urlPageParam.value]
+						} else {
+							currentQuery[this.urlPageParam.value] = String(newPage)
+						}
+						router.replace({ query: currentQuery })
+					}).catch(() => { })
+				} catch (e) {
+					// useRouter not available
+				}
+			}
+		})
+
+		watch(this.pageSize, () => {
+			this.currentPage.value = 1
+			this.loadPageData()
+		})
+
+		watch(this.filter, useDebounce(() => {
+			this.currentPage.value = 1
+			this.loadPageData()
+		}, 300))
+		watch(this.sortList, () => {
+			this.currentPage.value = 1
+			this.loadPageData()
+		})
+	}
+	setFilter(filter: IDataFilter | null) {
+		this.filter.value = filter
+	}
+	setSortList(sortList: IDataSort[]) {
+		this.sortList.value = sortList
+	}
+	setCurrentPage(currentPage: number) {
+		this.currentPage.value = currentPage
+	}
+	setPageSize(pageSize: number) {
+		this.pageSize.value = pageSize
+	}
+	abstract loadPageData(): void
+}

package/services/DataProvider/CAPIFlatClientDataProvider.ts

@@ -0,0 +1,199 @@
+import { ref, type Ref } from 'vue'
+import type { IDataResult, IDataProviderOptions, ECacheStrategy } from '../types'
+import { CFlatClientDataProvider } from './CFlatClientDataProvider';
+import type { AAPIDataProvider } from './AAPIDataProvider';
+import { RequestProvider } from '../RequestProvider/RequestProvider';
+
+
+export class CAPIFlatClientDataProvider extends CFlatClientDataProvider implements AAPIDataProvider {
+
+	apiUrl: Ref<string> = ref("")
+	contextKey: Ref<string> = ref("")
+	initialLoad: Ref<boolean> = ref(true)
+	requestProvider: RequestProvider = new RequestProvider()
+	cacheStrategy: Ref<ECacheStrategy | null> = ref(null)
+	cacheLifetime: Ref<number> = ref(0)
+	refreshOnMutation: Ref<boolean | undefined> = ref(undefined)
+
+	constructor(options?: IDataProviderOptions) {
+		super(options)
+		if (options?.cacheStrategy) this.cacheStrategy.value = options.cacheStrategy
+		if (options?.cacheLifetime) this.cacheLifetime.value = options.cacheLifetime
+		if (options?.refreshOnMutation !== undefined) this.refreshOnMutation.value = options.refreshOnMutation
+	}
+	setContextKey(key: string) {
+		this.contextKey.value = key
+		this.requestProvider.cacheKey = key
+		if (this.cacheStrategy.value) this.requestProvider.setCacheProvider(this.cacheStrategy.value)
+		if (this.cacheLifetime.value) this.requestProvider.setCacheLifetime(this.cacheLifetime.value)
+	}
+	override async refreshData(options?: { disableCache?: boolean }): Promise<void> {
+		if (!this.SSR.value && import.meta.server) return;
+
+		const fetcher = async (): Promise<IDataResult> => {
+			// Register request - execution happens automatically
+			const promise = this.requestProvider.registerRequest<IDataResult>(this.apiUrl.value, {
+				deduplicate: this.deduplicate.value as boolean,
+				nuxtApp: this.nuxtApp,
+				disableCache: options?.disableCache
+			})
+
+			// If SSR is enabled and we're on server, await to ensure content is ready for rendering
+			if (this.SSR.value && import.meta.server) {
+				return await promise
+			}
+
+			// For non-SSR, return promise - useAsyncData will handle it
+			return promise
+		}
+		const key = `${this.contextKey.value}`
+
+		if (this.contextKey.value && this.initialLoad.value) {
+			const { data } = useNuxtData(key)
+			if (data.value) {
+				const result = data.value as IDataResult
+				this.setData(result.rows)
+				this.initialLoad.value = false
+				this.loading.value = false
+				return
+			}
+		}
+		if (import.meta.server && this.contextKey.value) {
+			const { data } = await useAsyncData(key, fetcher)
+			if (data.value) {
+				const result = data.value as IDataResult
+				this.setData(result.rows)
+				this.initialLoad.value = false
+				this.loading.value = false
+				return
+			}
+		}
+
+		// For non-SSR client-side, register and handle asynchronously
+		if (!this.SSR.value) {
+			const promise = this.requestProvider.registerRequest<IDataResult>(this.apiUrl.value, {
+				deduplicate: this.deduplicate.value as boolean,
+				nuxtApp: this.nuxtApp,
+				disableCache: options?.disableCache
+			})
+			// Don't await - deliver when finished
+			promise.then((returnedData) => {
+				this.initialLoad.value = false
+				this.loading.value = false
+				this.setData(returnedData.rows)
+			}).catch(() => {
+				this.initialLoad.value = false
+				this.loading.value = false
+			})
+			return
+		}
+
+		// SSR client-side or fallback: await the request
+		const returnedData: IDataResult = await fetcher()
+		this.initialLoad.value = false
+		this.loading.value = false
+		this.setData(returnedData.rows)
+	}
+	async setAPIUrl(url: string) {
+		this.loading.value = true
+		this.apiUrl.value = url
+		this.setContextKey(url)
+		if (this.allData.value.length == 0)
+			await this.refreshData()
+	}
+
+	async create(item: any): Promise<void> {
+		if (!this.apiUrl.value) return
+
+		const result = await this.requestProvider.registerRequest(this.apiUrl.value, {
+			method: 'POST',
+			body: item,
+			nuxtApp: this.nuxtApp
+		})
+
+		if (this.refreshOnMutation.value) {
+			await this.refreshData({ disableCache: true })
+		} else {
+			if (result && (result as any).item) {
+				this.allData.value.push((result as any).item)
+				this.loadPageData() // Refresh view
+			} else {
+				await this.refreshData({ disableCache: true })
+			}
+
+			if (this.requestProvider.cacheProvider) {
+				await this.requestProvider.cacheProvider.removeByPrefix(this.apiUrl.value)
+			}
+			if (this.contextKey.value) {
+				clearNuxtData(this.contextKey.value)
+			}
+		}
+	}
+
+	async update(item: any): Promise<void> {
+		if (!this.apiUrl.value) return
+
+		const result = await this.requestProvider.registerRequest(this.apiUrl.value, {
+			method: 'PUT',
+			body: item,
+			nuxtApp: this.nuxtApp
+		})
+
+		if (this.refreshOnMutation.value) {
+			await this.refreshData({ disableCache: true })
+		} else {
+			// Local update
+			// We don't have idKey property on CFlatClientDataProvider explicitly defined like Tree, 
+			// assuming 'id' or we need to look at implementation.
+			// CFlatClientDataProvider doesn't enforce idKey. Assuming 'id' for now as standard.
+			const index = this.allData.value.findIndex(row => row['id'] === item['id'])
+			if (index !== -1) {
+				if (result && (result as any).item) {
+					this.allData.value[index] = (result as any).item
+				} else {
+					this.allData.value[index] = { ...this.allData.value[index], ...item }
+				}
+				this.loadPageData()
+			}
+
+			if (this.requestProvider.cacheProvider) {
+				await this.requestProvider.cacheProvider.removeByPrefix(this.apiUrl.value)
+			}
+			if (this.contextKey.value) {
+				clearNuxtData(this.contextKey.value)
+			}
+		}
+	}
+
+	async delete(items: any[]): Promise<void> {
+		if (!this.apiUrl.value) return
+		if (!items || items.length === 0) return
+
+		const ids = items.map(i => i.id)
+
+		// Use RequestProvider for the delete request
+		await this.requestProvider.registerRequest(this.apiUrl.value, {
+			method: 'DELETE',
+			body: { id: ids },
+			nuxtApp: this.nuxtApp
+		})
+
+		if (this.refreshOnMutation.value) {
+			// Refresh data from server with cache disabled
+			await this.refreshData({ disableCache: true })
+		} else {
+			// Optimization: Remove deleted items locally instead of refetching
+			const idsToDelete = new Set(ids)
+			this.allData.value = this.allData.value.filter(row => !idsToDelete.has(row["id"]))
+
+			// Clear the cache for this provider to prevent stale data on reload
+			if (this.requestProvider.cacheProvider) {
+				await this.requestProvider.cacheProvider.removeByPrefix(this.apiUrl.value)
+			}
+			// Also clear Nuxt's internal cache for this key
+			if (this.contextKey.value) {
+				clearNuxtData(this.contextKey.value)
+			}
+		}
+	}
+}

package/services/DataProvider/CAPIFlatServerDataProvider.ts

@@ -0,0 +1,77 @@
+import { ref, type Ref } from 'vue'
+import type { IDataResult, IDataFilter, IDataSort, IDataProviderOptions, ECacheStrategy } from '../types'
+import { CFlatServerDataProvider } from './CFlatServerDataProvider';
+import type { AAPIDataProvider } from './AAPIDataProvider';
+import { RequestProvider } from '../RequestProvider/RequestProvider';
+
+
+export class CAPIFlatServerDataProvider extends CFlatServerDataProvider implements AAPIDataProvider {
+
+	apiUrl: Ref<string> = ref("")
+	requestProvider: RequestProvider = new RequestProvider()
+	cacheStrategy: Ref<ECacheStrategy | null> = ref(null)
+	cacheLifetime: Ref<number> = ref(0)
+	refreshOnMutation: Ref<boolean | undefined> = ref(true) // Default true for server
+
+	constructor(options?: IDataProviderOptions) {
+		super(options)
+		if (options?.cacheStrategy) this.cacheStrategy.value = options.cacheStrategy
+		if (options?.cacheLifetime) this.cacheLifetime.value = options.cacheLifetime
+		if (options?.refreshOnMutation !== undefined) this.refreshOnMutation.value = options.refreshOnMutation
+
+	}
+	async setAPIUrl(url: string) {
+		this.apiUrl.value = url
+		this.setContextKey(url)
+		if (this.cacheStrategy.value) this.requestProvider.setCacheProvider(this.cacheStrategy.value)
+		if (this.cacheLifetime.value) this.requestProvider.setCacheLifetime(this.cacheLifetime.value)
+
+		await this.setPageDataHandler(
+			async (
+				currentPage: number,
+				pageSize: number,
+				filter: IDataFilter,
+				sortList: IDataSort[],
+				options?: { disableCache?: boolean }
+			): Promise<IDataResult> => {
+				// Register request - execution happens automatically
+				// Always await the promise - loadPageData will decide whether to await the fetcher
+				return await this.requestProvider.registerRequest<IDataResult>(this.apiUrl.value, {
+					query: {
+						pageNumber: currentPage,
+						pageSize: pageSize,
+						filter: filter,
+						sortList: sortList,
+					},
+					deduplicate: this.deduplicate.value as boolean,
+					nuxtApp: this.nuxtApp,
+					disableCache: options?.disableCache
+				})
+			}
+		)
+	}
+
+	async delete(items: any[]): Promise<void> {
+		if (!this.apiUrl.value) return
+		if (!items || items.length === 0) return
+
+		const ids = items.map(i => i.id)
+
+		// Use RequestProvider for the delete request
+		await this.requestProvider.registerRequest(this.apiUrl.value, {
+			method: 'DELETE',
+			body: { id: ids },
+			nuxtApp: this.nuxtApp
+		})
+
+		// Refresh data (refetch from server)
+		if (this.refreshOnMutation.value !== false) {
+			// Clear client-side cache for this resource
+			if (this.requestProvider.cacheProvider) {
+				await this.requestProvider.cacheProvider.removeByPrefix(this.apiUrl.value)
+			}
+
+			this.loadPageData({ disableCache: true })
+		}
+	}
+}

package/services/DataProvider/CAPITreeClientDataProvider.ts

@@ -0,0 +1,205 @@
+import { ref, type Ref } from 'vue'
+import type { IDataResult, ITreeDataProviderOptions, ECacheStrategy } from '../types'
+import { CTreeClientDataProvider } from './CTreeClientDataProvider'
+import type { AAPIDataProvider } from './AAPIDataProvider'
+import { RequestProvider } from '../RequestProvider/RequestProvider'
+
+
+export class CAPITreeClientDataProvider extends CTreeClientDataProvider implements AAPIDataProvider {
+
+	apiUrl: Ref<string> = ref("")
+	contextKey: Ref<string> = ref("")
+	initialLoad: Ref<boolean> = ref(true)
+	requestProvider: RequestProvider = new RequestProvider()
+	cacheStrategy: Ref<ECacheStrategy | null> = ref(null)
+	cacheLifetime: Ref<number> = ref(0)
+	refreshOnMutation: Ref<boolean | undefined> = ref(undefined)
+
+	constructor(options?: ITreeDataProviderOptions) {
+		super(options)
+		if (options?.cacheStrategy) this.cacheStrategy.value = options.cacheStrategy
+		if (options?.cacheLifetime) this.cacheLifetime.value = options.cacheLifetime
+		if (options?.refreshOnMutation !== undefined) this.refreshOnMutation.value = options.refreshOnMutation
+	}
+
+	setContextKey(key: string) {
+		this.contextKey.value = key
+		this.requestProvider.cacheKey = key
+		if (this.cacheStrategy.value) this.requestProvider.setCacheProvider(this.cacheStrategy.value)
+		if (this.cacheLifetime.value) this.requestProvider.setCacheLifetime(this.cacheLifetime.value)
+	}
+
+	override async refreshData(options?: { disableCache?: boolean }): Promise<void> {
+		if (!this.SSR.value && import.meta.server) return;
+
+		const fetcher = async (): Promise<IDataResult> => {
+			// Register request - execution happens automatically
+			const promise = this.requestProvider.registerRequest<IDataResult>(this.apiUrl.value, {
+				deduplicate: this.deduplicate.value as boolean,
+				nuxtApp: this.nuxtApp,
+				disableCache: options?.disableCache
+			})
+
+			// If SSR is enabled and we're on server, await to ensure content is ready for rendering
+			if (this.SSR.value && import.meta.server) {
+				return await promise
+			}
+
+			// For non-SSR, return promise - useAsyncData will handle it
+			return promise
+		}
+		const key = `${this.contextKey.value}`
+
+		if (this.contextKey.value && this.initialLoad.value) {
+			const { data } = useNuxtData(key)
+			if (data.value) {
+				const result = data.value as IDataResult
+				this.setData(result.rows)
+				this.initialLoad.value = false
+				this.loading.value = false
+				return
+			}
+		}
+		if (import.meta.server && this.contextKey.value) {
+			const { data } = await useAsyncData(key, fetcher)
+			if (data.value) {
+				const result = data.value as IDataResult
+				this.setData(result.rows)
+				this.initialLoad.value = false
+				this.loading.value = false
+				return
+			}
+		}
+
+		// For non-SSR client-side, register and handle asynchronously
+		if (!this.SSR.value) {
+			const promise = this.requestProvider.registerRequest<IDataResult>(this.apiUrl.value, {
+				deduplicate: this.deduplicate.value as boolean,
+				nuxtApp: this.nuxtApp,
+				disableCache: options?.disableCache
+			})
+			// Don't await - deliver when finished
+			promise.then((returnedData) => {
+				this.initialLoad.value = false
+				this.loading.value = false
+				this.setData(returnedData.rows)
+			}).catch(() => {
+				this.initialLoad.value = false
+				this.loading.value = false
+			})
+			return
+		}
+
+		// SSR client-side or fallback: await the request
+		const returnedData: IDataResult = await fetcher()
+		this.initialLoad.value = false
+		this.loading.value = false
+		this.setData(returnedData.rows)
+	}
+
+	async setAPIUrl(url: string) {
+		this.loading.value = true
+		this.apiUrl.value = url
+		this.setContextKey(url)
+		if (this.allData.value.length == 0)
+			await this.refreshData()
+	}
+
+	async create(item: any): Promise<void> {
+		if (!this.apiUrl.value) return
+
+		// Use RequestProvider for the create request
+		const result = await this.requestProvider.registerRequest(this.apiUrl.value, {
+			method: 'POST',
+			body: item,
+			nuxtApp: this.nuxtApp
+		})
+
+		if (this.refreshOnMutation.value) {
+			await this.refreshData({ disableCache: true })
+		} else {
+			// Optimistic UI update or fetch fresh data
+			if (result && (result as any).item) {
+				this.allData.value.push((result as any).item)
+			} else {
+				// Fallback if no item returned
+				await this.refreshData({ disableCache: true })
+			}
+
+			// Clear cache
+			if (this.requestProvider.cacheProvider) {
+				await this.requestProvider.cacheProvider.removeByPrefix(this.apiUrl.value)
+			}
+			if (this.contextKey.value) {
+				clearNuxtData(this.contextKey.value)
+			}
+		}
+	}
+
+	async update(item: any): Promise<void> {
+		if (!this.apiUrl.value) return
+
+		// Use RequestProvider for the update request
+		const result = await this.requestProvider.registerRequest(this.apiUrl.value, {
+			method: 'PUT',
+			body: item,
+			nuxtApp: this.nuxtApp
+		})
+
+		if (this.refreshOnMutation.value) {
+			await this.refreshData({ disableCache: true })
+		} else {
+			// Local update
+			const index = this.allData.value.findIndex(row => row[this.idKey] === item[this.idKey])
+			if (index !== -1) {
+				if (result && (result as any).item) {
+					this.allData.value[index] = (result as any).item
+				} else {
+					this.allData.value[index] = { ...this.allData.value[index], ...item }
+				}
+				// Trigger reactivity
+				this.allData.value = [...this.allData.value]
+			}
+
+			// Clear cache
+			if (this.requestProvider.cacheProvider) {
+				await this.requestProvider.cacheProvider.removeByPrefix(this.apiUrl.value)
+			}
+			if (this.contextKey.value) {
+				clearNuxtData(this.contextKey.value)
+			}
+		}
+	}
+
+	async delete(items: any[]): Promise<void> {
+		if (!this.apiUrl.value) return
+		if (!items || items.length === 0) return
+
+		const ids = items.map(i => i.id)
+
+		// Use RequestProvider for the delete request
+		await this.requestProvider.registerRequest(this.apiUrl.value, {
+			method: 'DELETE',
+			body: { id: ids },
+			nuxtApp: this.nuxtApp
+		})
+
+		if (this.refreshOnMutation.value) {
+			// Refresh data from server with cache disabled
+			await this.refreshData({ disableCache: true })
+		} else {
+			// Optimization: Remove deleted items locally instead of refetching
+			const idsToDelete = new Set(ids)
+			this.allData.value = this.allData.value.filter(row => !idsToDelete.has(row[this.idKey])) // Use this.idKey
+
+			// Clear the cache for this provider to prevent stale data on reload
+			if (this.requestProvider.cacheProvider) {
+				await this.requestProvider.cacheProvider.removeByPrefix(this.apiUrl.value)
+			}
+			// Also clear Nuxt's internal cache for this key
+			if (this.contextKey.value) {
+				clearNuxtData(this.contextKey.value)
+			}
+		}
+	}
+}

package/services/DataProvider/CAPITreeServerDataProvider.ts

@@ -0,0 +1,98 @@
+import { ref, type Ref } from 'vue'
+import type { IDataResult, IDataFilter, IDataSort, ITreeDataProviderOptions, ECacheStrategy, TreePaginationMode } from '../types'
+import { CTreeServerDataProvider } from './CTreeServerDataProvider';
+import type { AAPIDataProvider } from './AAPIDataProvider';
+import { RequestProvider } from '../RequestProvider/RequestProvider';
+
+
+/**
+ * API-based Server-side Tree Data Provider
+ * 
+ * Extends CTreeServerDataProvider with:
+ * - API URL configuration
+ * - Request management (caching, deduplication)
+ * - Automatic tree parameter serialization in query
+ */
+export class CAPITreeServerDataProvider extends CTreeServerDataProvider implements AAPIDataProvider {
+
+	apiUrl: Ref<string> = ref("")
+	requestProvider: RequestProvider = new RequestProvider()
+	cacheStrategy: Ref<ECacheStrategy | null> = ref(null)
+	cacheLifetime: Ref<number> = ref(0)
+	refreshOnMutation: Ref<boolean | undefined> = ref(true) // Default true for server
+
+	constructor(options?: ITreeDataProviderOptions) {
+		super(options)
+		if (options?.cacheStrategy) this.cacheStrategy.value = options.cacheStrategy
+		if (options?.cacheLifetime) this.cacheLifetime.value = options.cacheLifetime
+		if (options?.refreshOnMutation !== undefined) this.refreshOnMutation.value = options.refreshOnMutation
+	}
+
+	async setAPIUrl(url: string) {
+		this.apiUrl.value = url
+		this.setContextKey(url)
+		if (this.cacheStrategy.value) this.requestProvider.setCacheProvider(this.cacheStrategy.value)
+		if (this.cacheLifetime.value) this.requestProvider.setCacheLifetime(this.cacheLifetime.value)
+
+		await this.setPageDataHandler(
+			async (
+				currentPage: number,
+				pageSize: number,
+				filter: IDataFilter,
+				sortList: IDataSort[],
+				treeParams: {
+					expandedNodes: (string | number)[],
+					parentKey: string,
+					idKey: string,
+					paginateBy: TreePaginationMode,
+					expandedByDefault: boolean
+				},
+				options?: { disableCache?: boolean }
+			): Promise<IDataResult> => {
+				// Send all parameters to server for server-side tree pagination
+				return await this.requestProvider.registerRequest<IDataResult>(this.apiUrl.value, {
+					query: {
+						pageNumber: currentPage,
+						pageSize: pageSize,
+						filter: filter,
+						sortList: sortList,
+						// Tree-specific params for server-side processing
+						expandedNodes: JSON.stringify(treeParams.expandedNodes),
+						parentKey: treeParams.parentKey,
+						idKey: treeParams.idKey,
+						paginateBy: treeParams.paginateBy,
+						expandedByDefault: treeParams.expandedByDefault
+					},
+					deduplicate: this.deduplicate.value as boolean,
+					nuxtApp: this.nuxtApp,
+					disableCache: options?.disableCache
+				})
+			}
+		)
+	}
+
+	async delete(items: any[]): Promise<void> {
+		if (!this.apiUrl.value) return
+		if (!items || items.length === 0) return
+
+		const ids = items.map(i => i.id)
+
+		// Use RequestProvider for the delete request
+		await this.requestProvider.registerRequest(this.apiUrl.value, {
+			method: 'DELETE',
+			body: { id: ids },
+			nuxtApp: this.nuxtApp
+		})
+
+		if (this.refreshOnMutation.value !== false) {
+			// Clear client-side cache for this resource to ensure consistency (e.g. other pages/filters)
+			if (this.requestProvider.cacheProvider) {
+				await this.requestProvider.cacheProvider.removeByPrefix(this.apiUrl.value)
+			}
+
+			// Trigger reload which calls the setPageDataHandler defined above
+			// Disable cache to ensure fresh data
+			this.loadPageData({ disableCache: true })
+		}
+	}
+}