@svadmin/core 0.23.0 → 0.23.3

package/src/table-hooks.test.svelte.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useTable } from './table-hooks.svelte';
+import { flushSync } from 'svelte';
+import { QueryClient } from '@tanstack/svelte-query';
+
+vi.mock('./context.svelte', () => ({
+  useDataProvider: () => ({
+    getList: vi.fn().mockResolvedValue({ data: [], total: 0 })
+  }),
+  useResource: () => ({ name: 'posts' }),
+  getResource: (name: string) => ({ name, primaryKey: 'id' }),
+  useRouterContext: () => ({ navigate: vi.fn(), url: '/', parsedParams: { current: 1, pageSize: 10 } }),
+  useTranslate: () => (key: string) => key,
+  getSyncWithLocation: () => false,
+  useNotification: () => ({ open: vi.fn(), close: vi.fn() }),
+  getLiveProvider: () => undefined
+}));
+
+vi.mock('@tanstack/svelte-query', async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual as any,
+    useQueryClient: () => new QueryClient(),
+    createQuery: () => ({
+      data: { data: [{ id: 1, title: 'Row' }], total: 1 },
+      isPending: false,
+      isFetching: false,
+      error: null
+    })
+  };
+});
+
+describe('useTable - Headless Svelte 5 Compatibility', () => {
+
+  it('binds useTable logic internally and updates pagination flawlessly via $state', () => {
+    let table: ReturnType<typeof useTable>;
+
+    const cleanup = $effect.root(() => {
+        table = useTable({ resource: 'posts' });
+    });
+
+    flushSync();
+    
+    expect(table!.query).toBeDefined();
+    expect(table!.query?.data?.data[0].title).toBe('Row');
+    expect(table!.current).toBe(1);
+
+    // Trigger mutable state 
+    table!.setPage(2);
+    
+    flushSync();
+
+    expect(table!.current).toBe(2);
+
+    cleanup();
+  });
+});

package/src/table-state.svelte.ts

@@ -182,6 +182,7 @@ export class TableState<TData extends BaseRecord = BaseRecord, TError = HttpErro
 
   setSorters(newSorters: Sort[]) {
     this.currentSorters = newSorters;
+    this.pagination = { ...this.pagination, current: 1 };
   }
 
   toggleSort(field: string) {
@@ -193,6 +194,7 @@ export class TableState<TData extends BaseRecord = BaseRecord, TError = HttpErro
     } else {
       this.currentSorters = [];
     }
+    this.pagination = { ...this.pagination, current: 1 };
   }
 
   setFilters(newFilters: Filter[], mode?: FilterSetMode) {
@@ -221,25 +223,28 @@ export class TableState<TData extends BaseRecord = BaseRecord, TError = HttpErro
     this.pagination = { ...this.pagination, current: 1 };
   }
 
-  /** For client-side pagination mode */
   get clientData(): TData[] {
-    if (this.paginationMode !== 'client') return [];
+    if (this.paginationMode === 'server') return [];
     const allData = this.data;
-    const start = (this.current - 1) * this.pageSize;
-    const end = start + this.pageSize;
     let sorted = [...allData];
-    const activeSorters = this.sortersMode === 'off' ? this.effectiveSorters : this.currentSorters;
+    const activeSorters = this.sortersMode === 'off' ? this.effectiveSorters : [];
     if (activeSorters.length > 0) {
-      const { field, order } = activeSorters[0];
       sorted.sort((a, b) => {
-        const va = (a as Record<string, unknown>)[field];
-        const vb = (b as Record<string, unknown>)[field];
-        if (va == null) return 1;
-        if (vb == null) return -1;
-        const cmp = va < vb ? -1 : va > vb ? 1 : 0;
-        return order === 'desc' ? -cmp : cmp;
+        for (const { field, order } of activeSorters) {
+          const va = (a as Record<string, unknown>)[field];
+          const vb = (b as Record<string, unknown>)[field];
+          if (va == null && vb == null) continue;
+          if (va == null) return 1;
+          if (vb == null) return -1;
+          const cmp = va < vb ? -1 : va > vb ? 1 : 0;
+          if (cmp !== 0) return order === 'desc' ? -cmp : cmp;
+        }
+        return 0;
       });
     }
+    if (this.paginationMode === 'off') return sorted;
+    const start = (this.current - 1) * this.pageSize;
+    const end = start + this.pageSize;
     return sorted.slice(start, end);
   }
 }

package/src/theme.svelte.ts

@@ -248,15 +248,19 @@ let themeConfig: ThemeConfig = {};
  * automatically via AdminApp's themeConfig prop.
  */
 export function configureTheme(config: ThemeConfig): void {
-  themeConfig = { ...config };
-  // Re-apply the current theme with new strategy
+  themeConfig = { ...themeConfig, ...config };
   applyTheme(mode);
-  // Apply color preset first (lower priority)
   if (config.colorPreset) {
     const preset = resolvePreset(config.colorPreset);
-    if (preset) applyColorPreset(preset);
+    if (preset) {
+      colorTheme = preset.name as ColorTheme;
+      if (typeof window !== 'undefined') {
+        try { localStorage.setItem(COLOR_STORAGE_KEY, preset.name); } catch {}
+      }
+      applyColorTheme(preset.name as ColorTheme);
+      applyColorPreset(preset);
+    }
   }
-  // Then apply manual CSS overrides (higher priority)
   if (config.cssOverrides) {
     applyCssOverrides(config.cssOverrides);
   }
@@ -294,12 +298,16 @@ export function clearCssOverrides(keys?: string[]): void {
 }
 
 // ── Color themes (display metadata, derived from presets) ──
-export const colorThemes: { id: ColorTheme | string; label: string; color: string }[] = $derived(Object.values(builtinPresets).map(p => ({
+const _colorThemesCache: { id: ColorTheme | string; label: string; color: string }[] = $derived(Object.values(builtinPresets).map(p => ({
   id: p.name as ColorTheme,
   label: p.label,
   color: p.color,
 })));
 
+export function getColorThemes() {
+  return _colorThemesCache;
+}
+
 // ── Dark/Light mode ──────────────────────────────────────
 
 function getStoredTheme(): ThemeMode {
@@ -411,7 +419,22 @@ export function setColorTheme(ct: ColorTheme): void {
     try { localStorage.setItem(COLOR_STORAGE_KEY, ct); } catch {}
   }
   applyColorTheme(ct);
-  // Apply the preset's CSS variable overrides for the current resolved theme
   const preset = builtinPresets[ct];
   if (preset) applyColorPreset(preset);
 }
+
+export function resetTheme(): void {
+  mode = getStoredTheme();
+  colorTheme = getStoredColorTheme();
+  themeConfig = {};
+  if (typeof document !== 'undefined') {
+    for (const key of activePresetVars) {
+      document.documentElement.style.removeProperty(key);
+    }
+  }
+  activePresetVars = [];
+  applyTheme(mode);
+  applyColorTheme(colorTheme);
+  const preset = builtinPresets[colorTheme];
+  if (preset) applyColorPreset(preset);
+}

package/src/toast.svelte.ts

@@ -56,6 +56,14 @@ export function removeToast(id: number): void {
   toasts = toasts.filter(t => t.id !== id);
 }
 
+export function resetToast(): void {
+  for (const timer of undoableTimers.values()) clearTimeout(timer);
+  undoableTimers.clear();
+  queue = [];
+  promiseQueue = [];
+  toasts = [];
+}
+
 export const toast = {
   success: (msg: string, duration?: number, opts?: { key?: string }) => addToast('success', msg, duration, opts),
   error: (msg: string, duration?: number, opts?: { key?: string }) => addToast('error', msg, duration ?? 5000, opts),

package/src/unsaved-changes.svelte.ts

@@ -2,14 +2,21 @@
 // Supports: browser tab close, hash-based SPA routing, and framework router interception
 
 import { t } from './i18n.svelte';
+import { syncGlobalPath } from './useParsed.svelte';
 
 let dirty = $state(false);
 
-/** Mark whether the current form has unsaved changes */
 export function setUnsavedChanges(value: boolean) {
   dirty = value;
 }
 
+export function resetUnsavedChanges(): void {
+  dirty = false;
+  _unsavedChangesCleanup?.();
+  _unsavedChangesCleanup = null;
+  _navigationGuard = null;
+}
+
 export function getUnsavedChanges(): boolean {
   return dirty;
 }
@@ -68,12 +75,14 @@ export function registerNavigationGuard(guard: NavigationGuard): void {
  * initUnsavedChangesNotifier();
  * ```
  */
+let _unsavedChangesCleanup: (() => void) | null = null;
+
 export function initUnsavedChangesNotifier(options?: {
   beforeNavigate?: (callback: (nav: { cancel: () => void }) => void) => void;
 }) {
   if (typeof window === 'undefined') return;
+  _unsavedChangesCleanup?.();
 
-  // 1. Browser tab close / refresh
   const onBeforeUnload = (e: BeforeUnloadEvent) => {
     if (!dirty) return;
     e.preventDefault();
@@ -81,7 +90,6 @@ export function initUnsavedChangesNotifier(options?: {
   };
   window.addEventListener('beforeunload', onBeforeUnload);
 
-  // 2. Framework router (SvelteKit, etc.)
   if (options?.beforeNavigate) {
     options.beforeNavigate(({ cancel }) => {
       if (dirty) {
@@ -94,12 +102,12 @@ export function initUnsavedChangesNotifier(options?: {
     });
   }
 
-  // 3. Hash-based fallback for SPAs without a framework router
   const onHashChange = (e: HashChangeEvent) => {
     if (!dirty) return;
     if (!confirm(t('common.unsavedChanges'))) {
       if (e.oldURL) {
         history.replaceState(null, '', new URL(e.oldURL).hash || '#');
+        syncGlobalPath();
       }
     } else {
       dirty = false;
@@ -107,9 +115,9 @@ export function initUnsavedChangesNotifier(options?: {
   };
   window.addEventListener('hashchange', onHashChange);
 
-  // Cleanup
-  return () => {
+  _unsavedChangesCleanup = () => {
     window.removeEventListener('beforeunload', onBeforeUnload);
     window.removeEventListener('hashchange', onHashChange);
   };
+  return _unsavedChangesCleanup;
 }

package/src/url-sync.ts

@@ -1,5 +1,6 @@
 import type { Filter } from './types';
 import { getRouterProvider } from './context.svelte';
+import { getAdminOptions } from './options.svelte';
 
 export interface URLState {
   page?: number;
@@ -57,7 +58,7 @@ export function writeURLState(state: URLState): void {
   }
 
   if ('pageSize' in state) {
-    if (state.pageSize && state.pageSize !== 10) params['pageSize'] = String(state.pageSize);
+    if (state.pageSize && state.pageSize !== (getAdminOptions().defaultPageSize ?? 10)) params['pageSize'] = String(state.pageSize);
     else delete params['pageSize'];
   }
 

package/src/useCan.ts

@@ -1,8 +1,8 @@
 // useCan — reactive permission check hook with TanStack Query integration
 
 import { createQuery } from '@tanstack/svelte-query';
-import { canAccessAsync, getAccessControlProvider } from './permissions';
-import type { Action, CanResult } from './permissions';
+import { canAccessAsync, getAccessControlProvider } from './permissions.svelte';
+import type { Action, CanResult } from './permissions.svelte';
 
 export interface UseCanOptions {
   resource: string;

package/src/useParsed.svelte.ts

@@ -12,12 +12,20 @@ interface ParsedRoute {
 }
 
 let globalPath = $state('/');
+
+export function resetGlobalPath(): void {
+  globalPath = typeof window !== 'undefined' ? currentPath() : '/';
+}
+export function syncGlobalPath(): void {
+  if (typeof window !== 'undefined') globalPath = currentPath();
+}
 if (typeof window !== 'undefined') {
-  // Initialize
   globalPath = currentPath();
-  // Listen to navigation events
-  window.addEventListener('hashchange', () => { globalPath = currentPath(); });
-  window.addEventListener('popstate', () => { globalPath = currentPath(); });
+  if (!(window as any).__svadminParsedInit) {
+    (window as any).__svadminParsedInit = true;
+    window.addEventListener('hashchange', () => { globalPath = currentPath(); });
+    window.addEventListener('popstate', () => { globalPath = currentPath(); });
+  }
 }
 
 /**

package/src/utility-hooks.svelte.ts

@@ -56,8 +56,11 @@ export function useModalForm<
     visible = false;
     formState.reset();
     if (options.autoSave?.invalidateOnClose) {
-      queryClient.invalidateQueries({ predicate: (q) => q.queryKey[1] === formState.resource && (q.queryKey[2] === 'list' || q.queryKey[2] === 'infiniteList' || q.queryKey[2] === 'select') });
-      queryClient.invalidateQueries({ predicate: (q) => q.queryKey[1] === formState.resource && q.queryKey[2] === 'many' });
+      const dpN = options.dataProviderName;
+      const dp = (q: { queryKey: readonly unknown[] }) => q.queryKey[0] === dpN;
+      queryClient.invalidateQueries({ predicate: (q) => dp(q) && q.queryKey[1] === formState.resource && (q.queryKey[2] === 'list' || q.queryKey[2] === 'infiniteList' || q.queryKey[2] === 'select') });
+      queryClient.invalidateQueries({ predicate: (q) => dp(q) && q.queryKey[1] === formState.resource && q.queryKey[2] === 'many' });
+      queryClient.invalidateQueries({ predicate: (q) => dp(q) && q.queryKey[1] === formState.resource && q.queryKey[2] === 'one' });
     }
   }