@svadmin/core 0.0.2 → 0.0.6

package/src/hooks.svelte.ts

@@ -13,6 +13,7 @@ import { toast } from './toast.svelte';
 import { audit } from './audit';
 import { navigate } from './router';
 import { t } from './i18n.svelte';
+import { readURLState, writeURLState } from './url-sync';
 
 // ─── useList ────────────────────────────────────────────────────
 
@@ -189,6 +190,7 @@ export function useNavigation() {
     create: (resource: string) => navigate(`/${resource}/create`),
     edit: (resource: string, id: string | number) => navigate(`/${resource}/edit/${id}`),
     show: (resource: string, id: string | number) => navigate(`/${resource}/show/${id}`),
+    clone: (resource: string, id: string | number) => navigate(`/${resource}/create?clone_id=${id}`),
     goBack: () => history.back(),
     push: (path: string) => navigate(path),
   };
@@ -391,12 +393,47 @@ interface UseFormOptions {
   onMutationSuccess?: (data: unknown) => void;
   onMutationError?: (error: Error) => void;
   meta?: Record<string, unknown>;
+  validate?: (values: Record<string, unknown>) => Record<string, string> | null;
+  autoSave?: {
+    enabled: boolean;
+    debounce?: number; // ms, default 1000
+    onFinish?: (values: Record<string, unknown>) => Record<string, unknown>; // transform before save
+  };
 }
 
 export function useForm<T = Record<string, unknown>>(options: UseFormOptions) {
   const provider = getDataProvider();
   const queryClient = useQueryClient();
-  const { resource, action, id, redirect = 'list', onMutationSuccess, onMutationError, meta } = options;
+  const { resource, action, id, redirect = 'list', onMutationSuccess, onMutationError, meta, validate, autoSave } = options;
+
+  // Validation state
+  let errors = $state<Record<string, string>>({});
+
+  function setFieldError(field: string, message: string) {
+    errors = { ...errors, [field]: message };
+  }
+
+  function clearErrors() {
+    errors = {};
+  }
+
+  function clearFieldError(field: string) {
+    const next = { ...errors };
+    delete next[field];
+    errors = next;
+  }
+
+  function runValidation(values: Record<string, unknown>): boolean {
+    clearErrors();
+    if (validate) {
+      const result = validate(values);
+      if (result && Object.keys(result).length > 0) {
+        errors = result;
+        return false;
+      }
+    }
+    return true;
+  }
 
   // Fetch existing data for edit/clone
   const query = (action === 'edit' || action === 'clone') && id != null
@@ -450,6 +487,12 @@ export function useForm<T = Record<string, unknown>>(options: UseFormOptions) {
   }
 
   async function onFinish(values: Record<string, unknown>) {
+    // Run validation before submitting
+    if (!runValidation(values)) {
+      toast.warning(t('validation.required'));
+      return;
+    }
+
     if (action === 'create' || action === 'clone') {
       // @ts-expect-error $ rune prefix — Svelte compiler transforms this
       await $createMut.mutateAsync(values);
@@ -459,7 +502,7 @@ export function useForm<T = Record<string, unknown>>(options: UseFormOptions) {
     }
   }
 
-  return {
+  const base = {
     query,
     get formLoading() {
       // @ts-expect-error $ rune prefix — Svelte compiler transforms this
@@ -467,6 +510,39 @@ export function useForm<T = Record<string, unknown>>(options: UseFormOptions) {
     },
     mutation: action === 'edit' ? updateMut : createMut,
     onFinish,
+    get errors() { return errors; },
+    setFieldError,
+    clearErrors,
+    clearFieldError,
+  };
+
+  // ─── autoSave ─────────────────────────────────────────────
+  let autoSaveStatus = $state<'idle' | 'saving' | 'saved' | 'error'>('idle');
+  let autoSaveTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function triggerAutoSave(values: Record<string, unknown>) {
+    if (!autoSave?.enabled || action === 'create') return;
+    if (autoSaveTimer) clearTimeout(autoSaveTimer);
+
+    autoSaveTimer = setTimeout(async () => {
+      const finalValues = autoSave.onFinish ? autoSave.onFinish(values) : values;
+      autoSaveStatus = 'saving';
+      try {
+        await provider.update<T>({ resource, id: id!, variables: finalValues });
+        queryClient.invalidateQueries({ queryKey: [resource] });
+        autoSaveStatus = 'saved';
+        // Reset to idle after 2s
+        setTimeout(() => { autoSaveStatus = 'idle'; }, 2000);
+      } catch {
+        autoSaveStatus = 'error';
+      }
+    }, autoSave.debounce ?? 1000);
+  }
+
+  return {
+    ...base,
+    triggerAutoSave,
+    get autoSaveStatus() { return autoSaveStatus; },
   };
 }
 
@@ -483,10 +559,27 @@ interface UseTableOptions {
 }
 
 export function useTable<T = Record<string, unknown>>(options: UseTableOptions) {
-  const { resource, meta } = options;
+  const { resource, meta, syncWithLocation = false } = options;
+
+  // Read initial state from URL if syncWithLocation
+  let initialPagination = options.pagination ?? { current: 1, pageSize: 10 };
+  let initialSorters = options.sorters ?? [];
+
+  if (syncWithLocation) {
+    const urlState = readURLState();
+    if (urlState.page || urlState.pageSize) {
+      initialPagination = {
+        current: urlState.page ?? initialPagination.current,
+        pageSize: urlState.pageSize ?? initialPagination.pageSize,
+      };
+    }
+    if (urlState.sortField) {
+      initialSorters = [{ field: urlState.sortField, order: urlState.sortOrder ?? 'asc' }];
+    }
+  }
 
-  let pagination = $state<Pagination>(options.pagination ?? { current: 1, pageSize: 10 });
-  let sorters = $state<Sort[]>(options.sorters ?? []);
+  let pagination = $state<Pagination>(initialPagination);
+  let sorters = $state<Sort[]>(initialSorters);
   let filters = $state<Filter[]>(options.filters ?? []);
 
   const query = useList<T>({ resource, pagination, sorters, filters, meta });
@@ -496,6 +589,18 @@ export function useTable<T = Record<string, unknown>>(options: UseTableOptions)
   function setPage(page: number) { pagination = { ...pagination, current: page }; }
   function setPageSize(size: number) { pagination = { ...pagination, pageSize: size, current: 1 }; }
 
+  // Sync state to URL when syncWithLocation is enabled
+  if (syncWithLocation) {
+    $effect(() => {
+      writeURLState({
+        page: pagination.current,
+        pageSize: pagination.pageSize,
+        sortField: sorters[0]?.field,
+        sortOrder: sorters[0]?.order,
+      });
+    });
+  }
+
   return {
     query,
     pagination,

package/src/i18n.svelte.ts

@@ -19,6 +19,9 @@ const locales: Record<string, Locale> = {
     'common.page': '{current} / {total}',
     'common.export': '导出',
     'common.import': '导入',
+    'common.clone': '克隆',
+    'common.autoSaving': '自动保存中...',
+    'common.autoSaved': '已自动保存',
     'common.selectAll': '全选',
     'common.batchDelete': '批量删除 ({count})',
     'common.unsavedChanges': '有未保存的修改，确定离开吗？',
@@ -37,8 +40,6 @@ const locales: Record<string, Locale> = {
     'common.toggleTheme': '切换主题',
     'common.darkMode': '暗色模式',
     'common.lightMode': '亮色模式',
-    'common.noData': '暂无数据',
-    'common.search': '搜索...',
     'common.detail': '详情',
     'common.loadFailed': '加载失败: {message}',
     'common.pageNotFound': '页面未找到',
@@ -56,6 +57,38 @@ const locales: Record<string, Locale> = {
     'config.addToEnvFile': '请在 .env 文件中添加以下内容：',
     'config.envFilePath': '文件路径: .env',
     'config.reload': '配置完成后刷新页面',
+    // Auth pages
+    'auth.login': '登录',
+    'auth.register': '注册',
+    'auth.forgotPassword': '忘记密码',
+    'auth.resetPassword': '重置密码',
+    'auth.email': '邮箱',
+    'auth.password': '密码',
+    'auth.confirmPassword': '确认密码',
+    'auth.rememberMe': '记住我',
+    'auth.loginButton': '登录',
+    'auth.registerButton': '注册',
+    'auth.sendResetLink': '发送重置链接',
+    'auth.backToLogin': '返回登录',
+    'auth.noAccount': '还没有账号？',
+    'auth.hasAccount': '已有账号？',
+    'auth.forgotPasswordLink': '忘记密码？',
+    'auth.forgotPasswordDescription': '输入您的邮箱地址，我们将发送重置密码的链接。',
+    'auth.resetLinkSent': '重置链接已发送，请查看您的邮箱。',
+    'auth.passwordMismatch': '两次输入的密码不一致',
+    'auth.emailRequired': '请输入邮箱',
+    'auth.passwordRequired': '请输入密码',
+    'auth.registerSuccess': '注册成功',
+    'auth.welcomeBack': '欢迎回来',
+    'auth.welcomeMessage': '登录以继续使用管理后台',
+    'auth.createAccount': '创建账号',
+    'auth.createAccountMessage': '填写信息以创建您的账号',
+    // Validation
+    'validation.required': '此字段为必填项',
+    'validation.minLength': '最少 {min} 个字符',
+    'validation.maxLength': '最多 {max} 个字符',
+    'validation.invalidEmail': '请输入有效的邮箱地址',
+    'validation.invalidFormat': '格式不正确',
   },
   'en': {
     // Common
@@ -73,6 +106,9 @@ const locales: Record<string, Locale> = {
     'common.page': '{current} / {total}',
     'common.export': 'Export',
     'common.import': 'Import',
+    'common.clone': 'Clone',
+    'common.autoSaving': 'Auto-saving...',
+    'common.autoSaved': 'Saved',
     'common.selectAll': 'Select All',
     'common.batchDelete': 'Batch Delete ({count})',
     'common.unsavedChanges': 'You have unsaved changes. Leave anyway?',
@@ -91,8 +127,6 @@ const locales: Record<string, Locale> = {
     'common.toggleTheme': 'Toggle theme',
     'common.darkMode': 'Dark mode',
     'common.lightMode': 'Light mode',
-    'common.noData': 'No data',
-    'common.search': 'Search...',
     'common.detail': 'Detail',
     'common.loadFailed': 'Load failed: {message}',
     'common.pageNotFound': 'Page not found',
@@ -110,6 +144,38 @@ const locales: Record<string, Locale> = {
     'config.addToEnvFile': 'Add the following to your .env file:',
     'config.envFilePath': 'File path: .env',
     'config.reload': 'Reload after configuration',
+    // Auth pages
+    'auth.login': 'Login',
+    'auth.register': 'Register',
+    'auth.forgotPassword': 'Forgot Password',
+    'auth.resetPassword': 'Reset Password',
+    'auth.email': 'Email',
+    'auth.password': 'Password',
+    'auth.confirmPassword': 'Confirm Password',
+    'auth.rememberMe': 'Remember me',
+    'auth.loginButton': 'Sign In',
+    'auth.registerButton': 'Sign Up',
+    'auth.sendResetLink': 'Send Reset Link',
+    'auth.backToLogin': 'Back to Login',
+    'auth.noAccount': "Don't have an account?",
+    'auth.hasAccount': 'Already have an account?',
+    'auth.forgotPasswordLink': 'Forgot password?',
+    'auth.forgotPasswordDescription': 'Enter your email address and we will send you a reset link.',
+    'auth.resetLinkSent': 'Reset link sent! Check your email.',
+    'auth.passwordMismatch': 'Passwords do not match',
+    'auth.emailRequired': 'Email is required',
+    'auth.passwordRequired': 'Password is required',
+    'auth.registerSuccess': 'Registration successful',
+    'auth.welcomeBack': 'Welcome Back',
+    'auth.welcomeMessage': 'Sign in to continue to admin panel',
+    'auth.createAccount': 'Create Account',
+    'auth.createAccountMessage': 'Fill in your details to create an account',
+    // Validation
+    'validation.required': 'This field is required',
+    'validation.minLength': 'Minimum {min} characters',
+    'validation.maxLength': 'Maximum {max} characters',
+    'validation.invalidEmail': 'Please enter a valid email address',
+    'validation.invalidFormat': 'Invalid format',
   },
 };
 

package/src/i18n.test.ts

@@ -0,0 +1,90 @@
+// Unit tests for URL parsing (useParsed logic)
+// We test the pure parsing logic directly since the hook itself uses Svelte runes.
+import { describe, test, expect } from 'bun:test';
+
+/**
+ * Parse a hash-based URL into structured route info.
+ * This mirrors the logic in useParsed.ts.
+ */
+function parseHash(hash: string) {
+  const raw = hash.startsWith('#') ? hash.slice(1) : hash;
+  const [pathPart, queryPart] = raw.split('?');
+  const segments = pathPart.split('/').filter(Boolean);
+  
+  const params: Record<string, string> = {};
+  if (queryPart) {
+    for (const pair of queryPart.split('&')) {
+      const [k, v] = pair.split('=');
+      if (k) params[decodeURIComponent(k)] = decodeURIComponent(v ?? '');
+    }
+  }
+
+  return {
+    resource: segments[0],
+    action: segments[1],
+    id: segments[2],
+    params,
+  };
+}
+
+describe('parseHash (useParsed logic)', () => {
+  test('empty hash', () => {
+    const result = parseHash('');
+    expect(result.resource).toBeUndefined();
+    expect(result.action).toBeUndefined();
+    expect(result.id).toBeUndefined();
+    expect(result.params).toEqual({});
+  });
+
+  test('root hash', () => {
+    const result = parseHash('#/');
+    expect(result.resource).toBeUndefined();
+  });
+
+  test('resource only', () => {
+    const result = parseHash('#/posts');
+    expect(result.resource).toBe('posts');
+    expect(result.action).toBeUndefined();
+    expect(result.id).toBeUndefined();
+  });
+
+  test('resource and action', () => {
+    const result = parseHash('#/posts/create');
+    expect(result.resource).toBe('posts');
+    expect(result.action).toBe('create');
+  });
+
+  test('resource, action, and id', () => {
+    const result = parseHash('#/posts/edit/42');
+    expect(result.resource).toBe('posts');
+    expect(result.action).toBe('edit');
+    expect(result.id).toBe('42');
+  });
+
+  test('with query params', () => {
+    const result = parseHash('#/posts?page=2&sort=name');
+    expect(result.resource).toBe('posts');
+    expect(result.params.page).toBe('2');
+    expect(result.params.sort).toBe('name');
+  });
+
+  test('resource with action and query', () => {
+    const result = parseHash('#/posts/edit/5?tab=details');
+    expect(result.resource).toBe('posts');
+    expect(result.action).toBe('edit');
+    expect(result.id).toBe('5');
+    expect(result.params.tab).toBe('details');
+  });
+
+  test('encoded query params', () => {
+    const result = parseHash('#/search?q=hello%20world&filter=tag%3Djs');
+    expect(result.params.q).toBe('hello world');
+    expect(result.params.filter).toBe('tag=js');
+  });
+
+  test('login route', () => {
+    const result = parseHash('#/login');
+    expect(result.resource).toBe('login');
+    expect(result.action).toBeUndefined();
+  });
+});

package/src/index.ts

@@ -4,6 +4,7 @@ export {
   setDataProvider, getDataProvider,
   setAuthProvider, getAuthProvider,
   setResources, getResources, getResource,
+  setRouterProvider, getRouterProvider,
 } from './context';
 export {
   useList, useInfiniteList,
@@ -22,6 +23,7 @@ export { readURLState, writeURLState } from './url-sync';
 export { setAccessControl, canAccess, canAccessAsync } from './permissions';
 export { useLive } from './live';
 export { toast } from './toast.svelte';
+export { notify, closeNotification, setNotificationProvider, getNotificationProvider } from './notification.svelte';
 export { t, setLocale, getLocale, getAvailableLocales, addTranslations } from './i18n.svelte';
 export { audit, setAuditHandler } from './audit';
 export { getTheme, setTheme, toggleTheme, getResolvedTheme, getColorTheme, setColorTheme, colorThemes } from './theme.svelte';
@@ -46,3 +48,16 @@ export type {
 export type { LiveProvider, LiveEvent } from './live';
 export type { Action, AccessControlResult, AccessControlFn } from './permissions';
 export type { AuditEntry, AuditHandler } from './audit';
+export { useCan } from './useCan';
+export { useExport, useImport } from './data-transfer';
+export {
+  useLogin, useLogout,
+  useRegister, useForgotPassword, useUpdatePassword,
+  useGetIdentity, useIsAuthenticated,
+  useOnError, usePermissions,
+} from './auth-hooks.svelte';
+export { useParsed } from './useParsed';
+export { createHashRouterProvider, createHistoryRouterProvider } from './router-provider';
+export type { RouterProvider } from './router-provider';
+export { inferFieldType, inferResource } from './inferencer';
+export type { InferResult } from './inferencer';

package/src/inferencer.test.ts

@@ -0,0 +1,189 @@
+// Unit tests for Inferencer
+import { describe, test, expect } from 'bun:test';
+import { inferFieldType, inferResource } from './inferencer';
+
+describe('inferFieldType', () => {
+  test('detects boolean', () => {
+    expect(inferFieldType('active', true)).toBe('boolean');
+  });
+
+  test('detects number', () => {
+    expect(inferFieldType('age', 25)).toBe('number');
+  });
+
+  test('detects email', () => {
+    expect(inferFieldType('email', 'user@example.com')).toBe('email');
+  });
+
+  test('detects email from key name', () => {
+    expect(inferFieldType('user_email', 'test')).toBe('email');
+  });
+
+  test('detects URL', () => {
+    expect(inferFieldType('website', 'https://example.com')).toBe('url');
+  });
+
+  test('detects image URL', () => {
+    expect(inferFieldType('avatar', 'https://example.com/photo.jpg')).toBe('image');
+  });
+
+  test('detects image from key name', () => {
+    expect(inferFieldType('avatar', '/uploads/user.png')).toBe('image');
+  });
+
+  test('detects date ISO string', () => {
+    expect(inferFieldType('created', '2024-01-15T10:30:00Z')).toBe('date');
+  });
+
+  test('detects date from key name', () => {
+    expect(inferFieldType('created_at', 'some value')).toBe('date');
+  });
+
+  test('detects phone', () => {
+    expect(inferFieldType('phone', '+1 (555) 123-4567')).toBe('phone');
+  });
+
+  test('detects color hex', () => {
+    expect(inferFieldType('color', '#ff5533')).toBe('color');
+  });
+
+  test('detects textarea for long strings', () => {
+    expect(inferFieldType('content', 'a'.repeat(250))).toBe('textarea');
+  });
+
+  test('detects textarea from key name', () => {
+    expect(inferFieldType('description', 'short')).toBe('textarea');
+  });
+
+  test('detects tags array', () => {
+    expect(inferFieldType('tags', ['svelte', 'admin'])).toBe('tags');
+  });
+
+  test('detects images array', () => {
+    expect(inferFieldType('photos', ['https://x.com/a.png', 'https://x.com/b.jpg'])).toBe('images');
+  });
+
+  test('detects json object', () => {
+    expect(inferFieldType('meta', { foo: 'bar' })).toBe('json');
+  });
+
+  test('null defaults to text', () => {
+    expect(inferFieldType('unknown', null)).toBe('text');
+  });
+
+  test('plain string defaults to text', () => {
+    expect(inferFieldType('title', 'Hello World')).toBe('text');
+  });
+});
+
+describe('inferResource', () => {
+  const sampleData = [
+    {
+      id: 1,
+      title: 'First Post',
+      content: 'A very long description that is more than two hundred characters. '.repeat(4),
+      author_id: 5,
+      status: 'published',
+      views: 100,
+      is_featured: true,
+      created_at: '2024-01-15T10:00:00Z',
+      email: 'author@blog.com',
+      tags: ['svelte', 'admin'],
+    },
+    {
+      id: 2,
+      title: 'Second Post',
+      content: 'Another long body text that exceeds the 200 char limit easily. '.repeat(5),
+      author_id: 3,
+      status: 'draft',
+      views: 42,
+      is_featured: false,
+      created_at: '2024-02-20T14:30:00Z',
+      email: 'editor@blog.com',
+      tags: ['react'],
+    },
+  ];
+
+  test('returns correct resource name and label', () => {
+    const result = inferResource('posts', sampleData);
+    expect(result.resource.name).toBe('posts');
+    expect(result.resource.label).toBe('Posts');
+  });
+
+  test('infers correct number of fields', () => {
+    const result = inferResource('posts', sampleData);
+    expect(result.fields.length).toBe(10); // id, title, content, author_id, status, views, is_featured, created_at, email, tags
+  });
+
+  test('detects id as primary key', () => {
+    const result = inferResource('posts', sampleData);
+    const idField = result.fields.find(f => f.key === 'id');
+    expect(idField).toBeDefined();
+    expect(idField!.showInForm).toBe(false);
+  });
+
+  test('detects number type for views', () => {
+    const result = inferResource('posts', sampleData);
+    const viewsField = result.fields.find(f => f.key === 'views');
+    expect(viewsField!.type).toBe('number');
+  });
+
+  test('detects boolean type for is_featured', () => {
+    const result = inferResource('posts', sampleData);
+    const field = result.fields.find(f => f.key === 'is_featured');
+    expect(field!.type).toBe('boolean');
+  });
+
+  test('detects date for created_at', () => {
+    const result = inferResource('posts', sampleData);
+    const field = result.fields.find(f => f.key === 'created_at');
+    expect(field!.type).toBe('date');
+  });
+
+  test('detects relation for author_id', () => {
+    const result = inferResource('posts', sampleData);
+    const field = result.fields.find(f => f.key === 'author_id');
+    expect(field!.type).toBe('relation');
+    expect(field!.resource).toBe('authors');
+  });
+
+  test('detects email type', () => {
+    const result = inferResource('posts', sampleData);
+    const field = result.fields.find(f => f.key === 'email');
+    expect(field!.type).toBe('email');
+  });
+
+  test('detects tags array', () => {
+    const result = inferResource('posts', sampleData);
+    const field = result.fields.find(f => f.key === 'tags');
+    expect(field!.type).toBe('tags');
+  });
+
+  test('detects textarea for content', () => {
+    const result = inferResource('posts', sampleData);
+    const field = result.fields.find(f => f.key === 'content');
+    expect(field!.type).toBe('textarea');
+    expect(field!.showInList).toBe(false);
+  });
+
+  test('generates valid TypeScript code', () => {
+    const result = inferResource('posts', sampleData);
+    expect(result.code).toContain("name: 'posts'");
+    expect(result.code).toContain("import type { ResourceDefinition }");
+    expect(result.code).toContain("export const postsResource");
+  });
+
+  test('handles empty data gracefully', () => {
+    const result = inferResource('empty', []);
+    expect(result.fields.length).toBe(0);
+    expect(result.code).toContain('No data available');
+  });
+
+  test('custom primaryKey', () => {
+    const data = [{ _id: 'abc', name: 'Test' }];
+    const result = inferResource('items', data, { primaryKey: '_id' });
+    expect(result.resource.primaryKey).toBe('_id');
+    const pkField = result.fields.find(f => f.key === '_id');
+    expect(pkField!.showInForm).toBe(false);
+  });
+});