@svadmin/core 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/core",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Core SDK — hooks, types, context, i18n, permissions, router",
   "type": "module",
   "sideEffects": false,

package/src/data-transfer.ts

@@ -0,0 +1,139 @@
+// Data transfer utilities — CSV export/import
+
+import { getDataProvider } from './context';
+import type { GetListResult } from './types';
+
+/**
+ * useExport — export all records from a resource as CSV download
+ */
+export function useExport(resource: string) {
+  let isExporting = $state(false);
+
+  async function exportCSV(opts?: { filename?: string; fields?: string[] }) {
+    const provider = getDataProvider();
+    isExporting = true;
+
+    try {
+      // Fetch all records (up to 10000)
+      const result: GetListResult = await provider.getList({
+        resource,
+        pagination: { current: 1, pageSize: 10000 },
+      });
+
+      if (result.data.length === 0) return;
+
+      const records = result.data as Record<string, unknown>[];
+      const fields = opts?.fields ?? Object.keys(records[0]);
+
+      // Build CSV
+      const header = fields.join(',');
+      const rows = records.map(record =>
+        fields.map(f => {
+          const val = record[f];
+          const str = val === null || val === undefined ? '' : String(val);
+          // Escape commas and quotes
+          return str.includes(',') || str.includes('"') || str.includes('\n')
+            ? `"${str.replace(/"/g, '""')}"`
+            : str;
+        }).join(',')
+      );
+
+      const csv = [header, ...rows].join('\n');
+      const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = opts?.filename ?? `${resource}_export.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } finally {
+      isExporting = false;
+    }
+  }
+
+  return {
+    exportCSV,
+    get isExporting() { return isExporting; },
+  };
+}
+
+/**
+ * useImport — import records from a CSV file
+ */
+export function useImport(resource: string) {
+  let isImporting = $state(false);
+  let importResult = $state<{ success: number; failed: number } | null>(null);
+
+  async function importCSV(file: File): Promise<{ success: number; failed: number }> {
+    const provider = getDataProvider();
+    isImporting = true;
+    let success = 0;
+    let failed = 0;
+
+    try {
+      const text = await file.text();
+      const lines = text.split('\n').filter(l => l.trim() !== '');
+      if (lines.length < 2) return { success: 0, failed: 0 };
+
+      const headers = parseCSVLine(lines[0]);
+
+      for (let i = 1; i < lines.length; i++) {
+        const values = parseCSVLine(lines[i]);
+        const record: Record<string, unknown> = {};
+        headers.forEach((h, idx) => {
+          record[h] = values[idx] ?? '';
+        });
+
+        try {
+          await provider.create({ resource, variables: record });
+          success++;
+        } catch {
+          failed++;
+        }
+      }
+
+      importResult = { success, failed };
+      return { success, failed };
+    } finally {
+      isImporting = false;
+    }
+  }
+
+  return {
+    importCSV,
+    get isImporting() { return isImporting; },
+    get importResult() { return importResult; },
+  };
+}
+
+/** Parse a single CSV line respecting quoted fields */
+function parseCSVLine(line: string): string[] {
+  const result: string[] = [];
+  let current = '';
+  let inQuotes = false;
+
+  for (let i = 0; i < line.length; i++) {
+    const ch = line[i];
+    if (inQuotes) {
+      if (ch === '"' && line[i + 1] === '"') {
+        current += '"';
+        i++;
+      } else if (ch === '"') {
+        inQuotes = false;
+      } else {
+        current += ch;
+      }
+    } else {
+      if (ch === '"') {
+        inQuotes = true;
+      } else if (ch === ',') {
+        result.push(current.trim());
+        current = '';
+      } else {
+        current += ch;
+      }
+    }
+  }
+  result.push(current.trim());
+  return result;
+}

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 ────────────────────────────────────────────────────
 
@@ -391,12 +392,42 @@ interface UseFormOptions {
   onMutationSuccess?: (data: unknown) => void;
   onMutationError?: (error: Error) => void;
   meta?: Record<string, unknown>;
+  validate?: (values: Record<string, unknown>) => Record<string, string> | null;
 }
 
 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 } = 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 +481,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);
@@ -467,6 +504,10 @@ export function useForm<T = Record<string, unknown>>(options: UseFormOptions) {
     },
     mutation: action === 'edit' ? updateMut : createMut,
     onFinish,
+    get errors() { return errors; },
+    setFieldError,
+    clearErrors,
+    clearFieldError,
   };
 }
 
@@ -483,10 +524,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 +554,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

@@ -56,6 +56,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
@@ -110,6 +142,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/index.ts

@@ -22,10 +22,11 @@ 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 } from './theme.svelte';
-export type { ThemeMode } from './theme.svelte';
+export { getTheme, setTheme, toggleTheme, getResolvedTheme, getColorTheme, setColorTheme, colorThemes } from './theme.svelte';
+export type { ThemeMode, ColorTheme } from './theme.svelte';
 
 export type {
   DataProvider, AuthProvider, NotificationProvider, MutationMode,
@@ -46,3 +47,5 @@ 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';

package/src/notification.svelte.ts

@@ -0,0 +1,45 @@
+// Notification Provider — pluggable notification system
+// Falls back to built-in toast when no provider is set
+
+import { toast } from './toast.svelte';
+import type { NotificationProvider } from './types';
+
+let notificationProvider: NotificationProvider | null = null;
+
+export function setNotificationProvider(provider: NotificationProvider): void {
+  notificationProvider = provider;
+}
+
+export function getNotificationProvider(): NotificationProvider | null {
+  return notificationProvider;
+}
+
+/**
+ * Send a notification through the configured provider, or fall back to toast.
+ */
+export function notify(params: {
+  type: 'success' | 'error' | 'warning' | 'info';
+  message: string;
+  description?: string;
+  key?: string;
+}): void {
+  if (notificationProvider) {
+    notificationProvider.open(params);
+  } else {
+    // Fallback to built-in toast
+    const { type, message } = params;
+    switch (type) {
+      case 'success': toast.success(message); break;
+      case 'error': toast.error(message); break;
+      case 'warning': toast.warning(message); break;
+      case 'info': toast.info(message); break;
+    }
+  }
+}
+
+/**
+ * Close a notification by key (only works with custom provider).
+ */
+export function closeNotification(key: string): void {
+  notificationProvider?.close(key);
+}

package/src/theme.svelte.ts

@@ -1,8 +1,22 @@
-// Theme — dark/light/system mode management (Svelte 5 runes)
+// Theme — dark/light/system mode + color theme management (Svelte 5 runes)
 
 export type ThemeMode = 'light' | 'dark' | 'system';
+export type ColorTheme = 'blue' | 'green' | 'rose' | 'orange' | 'violet' | 'zinc';
 
 const STORAGE_KEY = 'svadmin-theme';
+const COLOR_STORAGE_KEY = 'svadmin-color-theme';
+
+// ── Color themes (display metadata) ──────────────────────
+export const colorThemes: { id: ColorTheme; label: string; color: string }[] = [
+  { id: 'blue',   label: 'Blue',   color: '#3b82f6' },
+  { id: 'green',  label: 'Green',  color: '#22c55e' },
+  { id: 'rose',   label: 'Rose',   color: '#f43f5e' },
+  { id: 'orange', label: 'Orange', color: '#f97316' },
+  { id: 'violet', label: 'Violet', color: '#8b5cf6' },
+  { id: 'zinc',   label: 'Zinc',   color: '#71717a' },
+];
+
+// ── Dark/Light mode ──────────────────────────────────────
 
 function getStoredTheme(): ThemeMode {
   if (typeof localStorage === 'undefined') return 'system';
@@ -54,3 +68,33 @@ export function toggleTheme(): void {
 export function getResolvedTheme(): 'light' | 'dark' {
   return mode === 'system' ? getSystemPreference() : mode;
 }
+
+// ── Color theme ──────────────────────────────────────────
+
+function getStoredColorTheme(): ColorTheme {
+  if (typeof localStorage === 'undefined') return 'blue';
+  return (localStorage.getItem(COLOR_STORAGE_KEY) as ColorTheme) ?? 'blue';
+}
+
+let colorTheme = $state<ColorTheme>(getStoredColorTheme());
+
+function applyColorTheme(ct: ColorTheme): void {
+  if (typeof document !== 'undefined') {
+    document.documentElement.setAttribute('data-theme', ct);
+  }
+}
+
+// Apply on init
+applyColorTheme(colorTheme);
+
+export function getColorTheme(): ColorTheme {
+  return colorTheme;
+}
+
+export function setColorTheme(ct: ColorTheme): void {
+  colorTheme = ct;
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem(COLOR_STORAGE_KEY, ct);
+  }
+  applyColorTheme(ct);
+}

package/src/types.ts

@@ -233,4 +233,6 @@ export interface FieldDefinition {
   resource?: string;       // related resource name
   optionLabel?: string;    // field to use as label
   optionValue?: string;    // field to use as value
+  // Validation
+  validate?: (value: unknown) => string | null;
 }

package/src/useCan.ts

@@ -0,0 +1,37 @@
+// useCan — reactive permission check hook
+
+import { canAccessAsync } from './permissions';
+import type { Action, AccessControlResult } from './permissions';
+
+interface UseCanResult {
+  allowed: boolean;
+  reason?: string;
+  isLoading: boolean;
+}
+
+/**
+ * Reactive permission check. Calls canAccessAsync() and returns reactive state.
+ * Usage: const can = useCan('posts', 'delete');
+ *        if (can.allowed) { ... }
+ */
+export function useCan(resource: string, action: Action, params?: Record<string, unknown>): UseCanResult {
+  let allowed = $state(true);
+  let reason = $state<string | undefined>(undefined);
+  let isLoading = $state(true);
+
+  // Run the async check
+  canAccessAsync(resource, action, params).then((result: AccessControlResult) => {
+    allowed = result.can;
+    reason = result.reason;
+    isLoading = false;
+  }).catch(() => {
+    allowed = true; // default to allowed on error
+    isLoading = false;
+  });
+
+  return {
+    get allowed() { return allowed; },
+    get reason() { return reason; },
+    get isLoading() { return isLoading; },
+  };
+}