@svadmin/ui 0.29.0 → 0.29.2

package/src/components/AppearanceSettings.svelte

@@ -1,183 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { getTheme, setTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme, getColorPresets } from '@svadmin/core';
-  import { getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
-  import * as Card from './ui/card/index.js';
-  import { Button } from './ui/button/index.js';
-  import { Sun, Moon, Monitor, Check } from '@lucide/svelte';
-
-  // Theme mode
-  const themeOptions = [
-    { value: 'light' as const, icon: Sun, label: 'settings.light' },
-    { value: 'dark' as const, icon: Moon, label: 'settings.dark' },
-    { value: 'system' as const, icon: Monitor, label: 'settings.systemTheme' },
-  ];
-
-  let currentTheme = $derived(getTheme());
-  let currentColor = $derived(getColorTheme());
-  let currentLocale = $derived(getLocale());
-  const availableLocales = getAvailableLocales();
-  const presets = getColorPresets();
-
-  // Sidebar density
-  const DENSITY_KEY = 'svadmin-sidebar-density';
-  let density = $state<'compact' | 'standard'>(
-    (typeof localStorage !== 'undefined' ? localStorage.getItem(DENSITY_KEY) : null) as 'compact' | 'standard' ?? 'standard'
-  );
-
-  function setDensity(d: 'compact' | 'standard') {
-    density = d;
-    if (typeof localStorage !== 'undefined') localStorage.setItem(DENSITY_KEY, d);
-  }
-
-  // Page size
-  const PAGE_SIZE_KEY = 'svadmin-default-page-size';
-  const pageSizeOptions = [10, 20, 50];
-  let pageSize = $state<number>(
-    typeof localStorage !== 'undefined' ? parseInt(localStorage.getItem(PAGE_SIZE_KEY) ?? '10', 10) : 10
-  );
-
-  function setPageSize(size: number) {
-    pageSize = size;
-    if (typeof localStorage !== 'undefined') localStorage.setItem(PAGE_SIZE_KEY, String(size));
-  }
-
-  // Locale display names
-  const localeNames: Record<string, string> = {
-    'zh-CN': '中文（简体）',
-    'en': 'English',
-    'ja': '日本語',
-    'ko': '한국어',
-  };
-</script>
-
-<div class="space-y-6">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{t('settings.appearance')}</h2>
-    <p class="text-sm text-muted-foreground mt-1">{t('settings.settingsDescription')}</p>
-  </div>
-
-  <!-- Theme Mode -->
-  <Card.Card>
-    <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base">{t('settings.themeMode')}</Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="grid grid-cols-3 gap-3">
-        {#each themeOptions as opt}
-          {@const active = currentTheme === opt.value}
-          <button
-            class="relative flex flex-col items-center gap-2 rounded-xl border-2 p-4 transition-all duration-200
-              {active
-                ? 'border-primary bg-primary/5 shadow-sm'
-                : 'border-border hover:border-muted-foreground/30 hover:bg-accent/50'}"
-            onclick={() => setTheme(opt.value)}
-          >
-            {#if active}
-              <div class="absolute top-2 right-2">
-                <Check class="h-3.5 w-3.5 text-primary" />
-              </div>
-            {/if}
-            <div class="h-10 w-10 rounded-lg flex items-center justify-center
-              {active ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}">
-              <opt.icon class="h-5 w-5" />
-            </div>
-            <span class="text-xs font-medium {active ? 'text-primary' : 'text-muted-foreground'}">
-              {t(opt.label)}
-            </span>
-          </button>
-        {/each}
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Color Accent -->
-  <Card.Card>
-    <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base">{t('settings.colorAccent')}</Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent>
-      <div class="flex flex-wrap gap-3">
-        {#each presets as preset}
-          {@const active = currentColor === preset.name}
-          <button
-            class="group relative h-9 w-9 rounded-full transition-all duration-200 hover:scale-110
-              {active ? 'ring-2 ring-offset-2 ring-offset-background scale-110' : 'opacity-70 hover:opacity-100'}"
-            style="background-color: {preset.color}; {active ? `--tw-ring-color: ${preset.color}` : ''}"
-            onclick={() => setColorTheme(preset.name as Parameters<typeof setColorTheme>[0])}
-            title={preset.label}
-          >
-            {#if active}
-              <Check class="h-4 w-4 text-white absolute inset-0 m-auto drop-shadow-sm" />
-            {/if}
-          </button>
-        {/each}
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Interface -->
-  <Card.Card>
-    <Card.CardHeader class="pb-3">
-      <Card.CardTitle class="text-base">{t('settings.interface')}</Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent class="space-y-5">
-      <!-- Language -->
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-sm font-medium text-foreground">{t('settings.language')}</p>
-          <p class="text-xs text-muted-foreground">{localeNames[currentLocale] ?? currentLocale}</p>
-        </div>
-        <select
-          class="h-9 rounded-md border border-input bg-background px-3 text-sm ring-offset-background
-            focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-          value={currentLocale}
-          onchange={(e) => setLocale((e.target as HTMLSelectElement).value)}
-        >
-          {#each availableLocales as loc}
-            <option value={loc}>{localeNames[loc] ?? loc}</option>
-          {/each}
-        </select>
-      </div>
-
-      <div class="h-px bg-border"></div>
-
-      <!-- Sidebar Density -->
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-sm font-medium text-foreground">{t('settings.sidebarDensity')}</p>
-        </div>
-        <div class="flex rounded-lg border border-input overflow-hidden">
-          <button
-            class="px-3 py-1.5 text-xs font-medium transition-colors
-              {density === 'compact' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
-            onclick={() => setDensity('compact')}
-          >{t('settings.compact')}</button>
-          <button
-            class="px-3 py-1.5 text-xs font-medium transition-colors
-              {density === 'standard' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
-            onclick={() => setDensity('standard')}
-          >{t('settings.standard')}</button>
-        </div>
-      </div>
-
-      <div class="h-px bg-border"></div>
-
-      <!-- Default Page Size -->
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-sm font-medium text-foreground">{t('settings.defaultPageSize')}</p>
-        </div>
-        <div class="flex rounded-lg border border-input overflow-hidden">
-          {#each pageSizeOptions as size}
-            <button
-              class="px-3 py-1.5 text-xs font-mono font-medium transition-colors
-                {pageSize === size ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
-              onclick={() => setPageSize(size)}
-            >{size}</button>
-          {/each}
-        </div>
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-</div>

package/src/components/AuditLogDrawer.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-  import { getAuditLogProvider, t } from '@svadmin/core';
-  import type { AuditEntry } from '@svadmin/core';
-  import * as Sheet from './ui/sheet/index.js';
-  import { History, Loader2 } from '@lucide/svelte';
-
-  let { open = $bindable(false), resource, recordId } = $props<{
-    open: boolean;
-    resource: string;
-    recordId?: string | number;
-  }>();
-
-  let logs = $state<AuditEntry[]>([]);
-  let isLoading = $state(false);
-
-  $effect(() => {
-    if (open) {
-      const provider = getAuditLogProvider();
-      if (provider) {
-        isLoading = true;
-        provider.get({ resource, meta: recordId ? { recordId } : undefined })
-          .then((data) => {
-            logs = data;
-            isLoading = false;
-          })
-          .catch((err) => {
-            console.error('[svadmin] Failed to fetch audit logs', err);
-            isLoading = false;
-          });
-      }
-    }
-  });
-
-  // Action semantic color mapping
-  function getActionColor(action: string) {
-    switch (action) {
-      case 'create': return 'bg-success';
-      case 'update': return 'bg-info';
-      case 'delete': return 'bg-destructive';
-      default: return 'bg-muted-foreground';
-    }
-  }
-</script>
-
-<Sheet.Root bind:open>
-  <Sheet.Content class="w-full sm:max-w-md overflow-y-auto">
-    <Sheet.Header>
-      <Sheet.Title class="flex items-center gap-2">
-        <History class="h-5 w-5" />
-        {t('common.history') || 'History'}
-      </Sheet.Title>
-      <Sheet.Description>
-        Audit log and revision history for this record.
-      </Sheet.Description>
-    </Sheet.Header>
-
-    <div class="mt-8 space-y-4">
-      {#if isLoading}
-        <div class="flex justify-center py-8 text-muted-foreground">
-          <Loader2 class="h-6 w-6 animate-spin" />
-        </div>
-      {:else if logs.length === 0}
-        <div class="text-center py-10">
-          <History class="h-8 w-8 mx-auto text-muted-foreground/30 mb-3" />
-          <p class="text-sm text-muted-foreground">
-            {t('common.noData') || 'No audit logs found'}
-          </p>
-        </div>
-      {:else}
-        <div class="relative border-l border-border ml-3 pl-6 space-y-8">
-          {#each logs as log}
-            <div class="relative">
-              <span class="absolute -left-7 top-1 flex h-2 w-2 items-center justify-center rounded-full ring-4 ring-background {getActionColor(log.action)}"></span>
-              <div class="flex flex-col gap-1.5">
-                <div class="flex items-center gap-2 justify-between">
-                  <span class="text-sm font-semibold capitalize">{log.action}</span>
-                  <span class="text-xs text-muted-foreground">
-                    {new Date(log.timestamp).toLocaleString()}
-                  </span>
-                </div>
-                {#if log.userId}
-                  <span class="text-xs text-muted-foreground font-mono bg-muted inline-flex px-1.5 py-0.5 rounded w-fit">
-                    User: {log.userId}
-                  </span>
-                {/if}
-              </div>
-            </div>
-          {/each}
-        </div>
-      {/if}
-    </div>
-  </Sheet.Content>
-</Sheet.Root>

package/src/components/AuditLogViewer.svelte

@@ -1,226 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { getAuthProvider } from '@svadmin/core';
-  import type { AuditLog } from '@svadmin/core';
-  import { toast } from '@svadmin/core/toast';
-  import * as Table from './ui/table/index.js';
-  import { Badge } from './ui/badge/index.js';
-  import { Button } from './ui/button/index.js';
-  import { Input } from './ui/input/index.js';
-  import { Loader2, ChevronLeft, ChevronRight, Search, FileSearch, Eye, X } from '@lucide/svelte';
-
-  const authProvider = getAuthProvider();
-
-  let logs = $state<AuditLog[]>([]);
-  let total = $state(0);
-  let page = $state(1);
-  let pageSize = 20;
-  let loading = $state(true);
-  let error = $state<string | null>(null);
-  let searchQuery = $state('');
-
-  // Snapshot drawer
-  let drawerOpen = $state(false);
-  let drawerLog = $state<AuditLog | null>(null);
-
-  async function loadLogs() {
-    if (!authProvider?.getAuditLogs) {
-      error = t('settings.auditNotSupported') ?? 'Audit logs are not supported by the current AuthProvider';
-      loading = false;
-      return;
-    }
-    loading = true;
-    try {
-      const result = await authProvider.getAuditLogs({ page, pageSize });
-      logs = result.data;
-      total = result.total;
-    } catch (e) {
-      toast.error((e as Error).message);
-    } finally {
-      loading = false;
-    }
-  }
-
-  $effect(() => {
-    loadLogs();
-  });
-
-  let totalPages = $derived(Math.ceil(total / pageSize) || 1);
-
-  let filteredLogs = $derived(
-    searchQuery.trim()
-      ? logs.filter(l =>
-          (l.userName ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-          l.action.toLowerCase().includes(searchQuery.toLowerCase()) ||
-          (l.resource ?? '').toLowerCase().includes(searchQuery.toLowerCase())
-        )
-      : logs
-  );
-
-  function openSnapshot(log: AuditLog) {
-    drawerLog = log;
-    drawerOpen = true;
-  }
-
-  function formatDate(d: string | Date) {
-    return new Date(d).toLocaleString();
-  }
-
-  function getActionColor(action: string): 'default' | 'secondary' | 'destructive' | 'outline' {
-    const a = action.toLowerCase();
-    if (a.includes('delete') || a.includes('remove')) return 'destructive';
-    if (a.includes('create') || a.includes('add')) return 'default';
-    if (a.includes('update') || a.includes('edit')) return 'secondary';
-    return 'outline';
-  }
-</script>
-
-<div class="h-full flex flex-col">
-  <!-- Header -->
-  <div class="mb-6">
-    <h2 class="text-xl font-semibold text-foreground flex items-center gap-2">
-      <FileSearch class="h-5 w-5 text-muted-foreground" />
-      {t('settings.auditLogs') ?? 'Audit Logs'}
-    </h2>
-    <p class="text-sm text-muted-foreground mt-1">
-      {t('settings.auditDescription') ?? 'Track and review all system operations for compliance and debugging.'}
-    </p>
-  </div>
-
-  {#if error}
-    <div class="p-6 border border-destructive/20 bg-destructive/5 text-destructive rounded-lg text-center">
-      <p>{error}</p>
-    </div>
-  {:else}
-    <!-- Search Bar -->
-    <div class="mb-4 relative">
-      <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-      <Input
-        bind:value={searchQuery}
-        placeholder={t('settings.searchLogs') ?? 'Search by user, action, or resource...'}
-        class="pl-9"
-      />
-    </div>
-
-    <!-- Table -->
-    <div class="flex-1 shadow-sm ring-1 ring-border/10 rounded-lg bg-card overflow-hidden">
-      {#if loading}
-        <div class="flex items-center justify-center h-48 text-muted-foreground">
-          <Loader2 class="h-5 w-5 animate-spin mr-2" />
-          {t('common.loading')}
-        </div>
-      {:else}
-        <div class="overflow-auto">
-          <Table.Root>
-            <Table.Header>
-              <Table.Row>
-                <Table.Head class="w-[160px]">{t('settings.auditTime') ?? 'Time'}</Table.Head>
-                <Table.Head>{t('settings.auditUser') ?? 'User'}</Table.Head>
-                <Table.Head>{t('settings.auditAction') ?? 'Action'}</Table.Head>
-                <Table.Head>{t('settings.auditResource') ?? 'Resource'}</Table.Head>
-                <Table.Head class="w-[120px]">{t('settings.auditIp') ?? 'IP Address'}</Table.Head>
-                <Table.Head class="w-[60px] text-center">{t('common.detail') ?? 'Detail'}</Table.Head>
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {#each filteredLogs as log}
-                <Table.Row class="border-0 even:bg-muted/20 hover:bg-muted/40 transition-colors">
-                  <Table.Cell class="text-xs text-muted-foreground font-mono">
-                    {formatDate(log.createdAt)}
-                  </Table.Cell>
-                  <Table.Cell class="text-sm font-medium">{log.userName ?? log.userId ?? '—'}</Table.Cell>
-                  <Table.Cell>
-                    <Badge variant={getActionColor(log.action)}>{log.action}</Badge>
-                  </Table.Cell>
-                  <Table.Cell class="text-sm text-muted-foreground">{log.resource ?? '—'}</Table.Cell>
-                  <Table.Cell class="text-xs text-muted-foreground font-mono">{log.ipAddress ?? '—'}</Table.Cell>
-                  <Table.Cell class="text-center">
-                    {#if log.details}
-                      <Button variant="ghost" size="icon" class="h-7 w-7" onclick={() => openSnapshot(log)}>
-                        <Eye class="h-3.5 w-3.5" />
-                      </Button>
-                    {/if}
-                  </Table.Cell>
-                </Table.Row>
-              {:else}
-                <Table.Row>
-                  <Table.Cell colspan={6} class="h-24 text-center text-muted-foreground">
-                    {t('common.noData')}
-                  </Table.Cell>
-                </Table.Row>
-              {/each}
-            </Table.Body>
-          </Table.Root>
-        </div>
-      {/if}
-    </div>
-
-    <!-- Pagination -->
-    <div class="mt-4 flex items-center justify-between text-sm text-muted-foreground">
-      <span>{total} {t('settings.auditTotal') ?? 'total records'}</span>
-      <div class="flex items-center gap-2">
-        <Button
-          variant="outline" size="sm"
-          disabled={page <= 1}
-          onclick={() => { page--; loadLogs(); }}
-        >
-          <ChevronLeft class="h-4 w-4" />
-        </Button>
-        <span>{page} / {totalPages}</span>
-        <Button
-          variant="outline" size="sm"
-          disabled={page >= totalPages}
-          onclick={() => { page++; loadLogs(); }}
-        >
-          <ChevronRight class="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<!-- Snapshot Drawer -->
-{#if drawerOpen && drawerLog}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div class="fixed inset-0 z-[100] flex justify-end bg-black/40 backdrop-blur-sm" onclick={() => drawerOpen = false}>
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div class="bg-card shadow-2xl w-full max-w-2xl h-full flex flex-col animate-in slide-in-from-right duration-300" onclick={(e) => e.stopPropagation()}>
-      <!-- Drawer Header -->
-      <div class="p-6 shadow-[0_1px_0_rgba(0,0,0,0.05)] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)] flex items-center justify-between bg-muted/30">
-        <div>
-          <h2 class="text-lg font-bold text-foreground flex items-center gap-2">
-            <FileSearch class="h-5 w-5 text-primary" />
-            {t('settings.auditSnapshot') ?? 'Change Snapshot'}
-          </h2>
-          <p class="text-xs text-muted-foreground mt-1">{formatDate(drawerLog.createdAt)} · {drawerLog.userName ?? drawerLog.userId}</p>
-        </div>
-        <button onclick={() => drawerOpen = false} class="text-muted-foreground hover:text-foreground transition p-2 rounded-lg hover:bg-muted">
-          <X class="w-5 h-5" />
-        </button>
-      </div>
-
-      <!-- Meta Tags -->
-      <div class="px-6 py-3 shadow-[0_1px_0_rgba(0,0,0,0.05)] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)] flex items-center gap-2 flex-wrap">
-        <Badge variant="outline">{drawerLog.action}</Badge>
-        {#if drawerLog.resource}
-          <Badge variant="secondary">{drawerLog.resource}</Badge>
-        {/if}
-        {#if drawerLog.ipAddress}
-          <Badge variant="outline" class="font-mono text-xs">{drawerLog.ipAddress}</Badge>
-        {/if}
-      </div>
-
-      <!-- JSON Diff Viewer -->
-      <div class="flex-1 p-6 overflow-y-auto bg-foreground/[0.03] dark:bg-background/50">
-        <pre class="whitespace-pre-wrap text-xs font-mono leading-relaxed text-foreground/80 bg-muted/30 rounded-lg p-4 border border-border">{typeof drawerLog.details === 'object' ? JSON.stringify(drawerLog.details, null, 2) : drawerLog.details}</pre>
-      </div>
-
-      <!-- Footer -->
-      <div class="p-4 shadow-[0_-1px_0_rgba(0,0,0,0.05)] dark:shadow-[0_-1px_0_rgba(255,255,255,0.05)] bg-muted/20 text-right text-[11px] text-muted-foreground font-medium">
-        System audit snapshot · Read-only
-      </div>
-    </div>
-  </div>
-{/if}

package/src/components/Authenticated.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import { useIsAuthenticated } from '@svadmin/core';
-  import type { Snippet } from 'svelte';
-  import { navigate } from '@svadmin/core';
-
-  let {
-    children,
-    fallback,
-    loading,
-    redirectTo = '/login',
-    appendCurrentPathToQuery = true,
-  } = $props<{
-    children?: Snippet;
-    fallback?: Snippet;
-    loading?: Snippet;
-    redirectTo?: string;
-    appendCurrentPathToQuery?: boolean;
-  }>();
-
-  const isAuth = useIsAuthenticated();
-
-  function triggerRedirect() {
-    if (fallback) return;
-    let url = redirectTo;
-    if (appendCurrentPathToQuery && typeof window !== 'undefined') {
-      const current = encodeURIComponent(window.location.pathname + window.location.search);
-      url += `?to=${current}`;
-    }
-    navigate(url);
-  }
-
-  $effect(() => {
-    if (!isAuth.isLoading && !isAuth.isAuthenticated) {
-      triggerRedirect();
-    }
-  });
-</script>
-
-{#if isAuth.isLoading}
-  {#if loading}
-    {@render loading()}
-  {/if}
-{:else if isAuth.isAuthenticated}
-  {#if children}
-    {@render children()}
-  {/if}
-{:else}
-  {#if fallback}
-    {@render fallback()}
-  {/if}
-{/if}