@svadmin/ui 0.0.6 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.0.6",
+  "version": "0.4.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -21,7 +21,8 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@svadmin/core": "0.0.5",
+    "@svadmin/core": "^0.4.1",
+    "@tanstack/svelte-query": "^5.0.0",
     "bits-ui": "^2.0.0",
     "tailwind-variants": "^3.0.0",
     "clsx": "^2.0.0",
@@ -29,7 +30,11 @@
   },
   "dependencies": {
     "@lucide/svelte": "^0.577.0",
-    "lucide-svelte": "^0.577.0"
+    "@tanstack/svelte-table": "^9.0.0-alpha.10",
+    "cmdk-sv": "^0.0.19",
+    "lucide-svelte": "^0.577.0",
+    "svelte-sonner": "^1.1.0",
+    "vaul-svelte": "^0.3.2"
   },
   "license": "MIT",
   "author": "zuohuadong",

package/src/actions.ts

@@ -0,0 +1,110 @@
+// Svelte Actions — reusable DOM behavior directives
+// Usage: <div use:clickOutside={() => close()}>
+//        <div use:shortcut={{ key: 'k', ctrl: true, action: open }}>
+
+/**
+ * Fires callback when clicking outside the node.
+ */
+export function clickOutside(node: HTMLElement, callback: () => void) {
+  const handle = (e: MouseEvent) => {
+    if (node && !node.contains(e.target as Node) && !e.defaultPrevented) {
+      callback();
+    }
+  };
+
+  document.addEventListener('pointerdown', handle, true);
+
+  return {
+    update(newCallback: () => void) {
+      callback = newCallback;
+    },
+    destroy() {
+      document.removeEventListener('pointerdown', handle, true);
+    },
+  };
+}
+
+export interface ShortcutParams {
+  key: string;
+  ctrl?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+  action: () => void;
+}
+
+/**
+ * Fires action on keyboard shortcut.
+ */
+export function shortcut(_node: HTMLElement, params: ShortcutParams) {
+  let current = params;
+
+  const handle = (e: KeyboardEvent) => {
+    const match =
+      e.key.toLowerCase() === current.key.toLowerCase() &&
+      (!current.ctrl || e.ctrlKey || e.metaKey) &&
+      (!current.shift || e.shiftKey) &&
+      (!current.alt || e.altKey);
+
+    if (match) {
+      e.preventDefault();
+      current.action();
+    }
+  };
+
+  window.addEventListener('keydown', handle);
+
+  return {
+    update(newParams: ShortcutParams) {
+      current = newParams;
+    },
+    destroy() {
+      window.removeEventListener('keydown', handle);
+    },
+  };
+}
+
+/**
+ * Fires callback when element enters the viewport (infinite scroll sentinel).
+ */
+export function intersect(node: HTMLElement, callback: () => void) {
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      if (entry.isIntersecting) callback();
+    },
+    { rootMargin: '200px' },
+  );
+
+  observer.observe(node);
+
+  return {
+    update(newCallback: () => void) {
+      callback = newCallback;
+    },
+    destroy() {
+      observer.disconnect();
+    },
+  };
+}
+
+/**
+ * Copies text content to clipboard on click.
+ */
+export function copyOnClick(node: HTMLElement, text?: string) {
+  let value = text;
+
+  const handle = async () => {
+    const content = value ?? node.textContent ?? '';
+    await navigator.clipboard.writeText(content);
+  };
+
+  node.addEventListener('click', handle);
+
+  return {
+    update(newText: string) {
+      value = newText;
+    },
+    destroy() {
+      node.removeEventListener('click', handle);
+    },
+  };
+}

package/src/components/AdminApp.svelte

@@ -2,6 +2,7 @@
   import type { Snippet } from 'svelte';
   import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider } from '@svadmin/core';
   import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
   import Layout from './Layout.svelte';
@@ -88,7 +89,10 @@
 <QueryClientProvider client={queryClient}>
   {#if !authChecked}
     <div class="flex h-screen items-center justify-center">
-      <div class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-primary"></div>
+      <div class="space-y-4 text-center">
+        <div class="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary mx-auto"></div>
+        <p class="text-sm text-muted-foreground">Loading...</p>
+      </div>
     </div>
   {:else if route === '/login' && loginPage}
     {@render loginPage()}
@@ -109,8 +113,8 @@
           {@render dashboard()}
         {:else}
           <div class="space-y-4">
-            <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Welcome to {title}</h1>
-            <p class="text-gray-500">Select a resource from the sidebar to get started.</p>
+            <h1 class="text-2xl font-bold text-foreground">{t('common.welcome', { title })}</h1>
+            <p class="text-muted-foreground">{t('common.dashboardHint')}</p>
           </div>
         {/if}
       {:else if route === '/:resource'}
@@ -133,7 +137,7 @@
     </Layout>
   {:else}
     <div class="flex h-screen items-center justify-center">
-      <p class="text-gray-500">Redirecting to login...</p>
+      <p class="text-muted-foreground">{t('common.redirecting')}</p>
     </div>
   {/if}
   <Toast />

package/src/components/Authenticated.svelte

@@ -1,26 +1,51 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import { useIsAuthenticated } from '@svadmin/core';
+  import type { Snippet } from 'svelte';
+  import { navigate } from '@svadmin/core';
 
-  let { children, fallback, loading } = $props<{
-    children: Snippet;
+  let {
+    children,
+    fallback,
+    loading,
+    redirectTo = '/login',
+    appendCurrentPathToQuery = true,
+  } = $props<{
+    children?: Snippet;
     fallback?: Snippet;
     loading?: Snippet;
+    redirectTo?: string;
+    appendCurrentPathToQuery?: boolean;
   }>();
 
-  const auth = useIsAuthenticated();
+  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 auth.isLoading}
+{#if isAuth.isLoading}
   {#if loading}
     {@render loading()}
-  {:else}
-    <div class="flex items-center justify-center min-h-[200px]">
-      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-    </div>
   {/if}
-{:else if auth.isAuthenticated}
-  {@render children()}
-{:else if fallback}
-  {@render fallback()}
+{:else if isAuth.isAuthenticated}
+  {#if children}
+    {@render children()}
+  {/if}
+{:else}
+  {#if fallback}
+    {@render fallback()}
+  {/if}
 {/if}

package/src/components/AutoForm.svelte

@@ -5,16 +5,37 @@
   import { canAccess } from '@svadmin/core/permissions';
   import { t } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
+  import TooltipButton from './TooltipButton.svelte';
   import * as Card from './ui/card/index.js';
   import { Badge } from './ui/badge/index.js';
-  import { Save, ArrowLeft, Loader2 } from 'lucide-svelte';
+  import { Save, ArrowLeft, Loader2, AlertCircle } from 'lucide-svelte';
   import FieldRenderer from './FieldRenderer.svelte';
+  import * as Alert from './ui/alert/index.js';
+  import { Skeleton } from './ui/skeleton/index.js';
+  import ConfirmDialog from './ConfirmDialog.svelte';
 
-  let { resourceName, id = undefined, mode = 'create' } = $props<{
+  import type { Snippet } from 'svelte';
+
+  interface Props {
     resourceName: string;
     id?: string | number;
     mode?: 'create' | 'edit';
-  }>();
+    /** Custom field renderer — overrides default FieldRenderer */
+    fieldRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; onchange: (v: unknown) => void }]>;
+    /** Custom form action buttons */
+    formActions?: Snippet<[{ isLoading: boolean; onSubmit: () => void }]>;
+    /** Custom header content (after title) */
+    headerContent?: Snippet;
+  }
+
+  let {
+    resourceName,
+    id = undefined,
+    mode = 'create',
+    fieldRenderer,
+    formActions,
+    headerContent,
+  }: Props = $props();
 
   const resource = getResource(resourceName);
   const primaryKey = resource.primaryKey ?? 'id';
@@ -27,6 +48,19 @@
     return true;
   });
 
+  const hasGroups = formFields.some(f => f.group);
+  const groups = (() => {
+    if (!hasGroups) return [];
+    const order: string[] = [];
+    const map = new Map<string, typeof formFields>();
+    for (const f of formFields) {
+      const g = f.group ?? '';
+      if (!map.has(g)) { order.push(g); map.set(g, []); }
+      map.get(g)!.push(f);
+    }
+    return order.map(g => ({ name: g, fields: map.get(g)! }));
+  })();
+
   // Load existing data for edit mode
   const existingQuery = mode === 'edit' && id != null
     ? useOne({ resource: resourceName, id })
@@ -52,8 +86,8 @@
     }
   }
 
-  // Initialize form data
-  $effect(() => {
+  // Initialize form data (pre-DOM to avoid flash of empty values)
+  $effect.pre(() => {
     if (initialized) return;
     if (mode === 'create') {
       const defaults: Record<string, unknown> = {};
@@ -62,8 +96,8 @@
       }
       formData = defaults;
       initialized = true;
-    } else if (existingQuery && existingQuery?.data) {
-      formData = { ...existingQuery.data as Record<string, unknown> };
+    } else if (existingQuery && existingQuery.query.data?.data) {
+      formData = { ...existingQuery.query.data.data as Record<string, unknown> };
       initialized = true;
     }
   });
@@ -82,8 +116,8 @@
     };
   });
 
-  const createMut = useCreate(resourceName);
-  const updateMut = useUpdate(resourceName);
+  const createMut = useCreate({ resource: resourceName });
+  const updateMut = useUpdate({ resource: resourceName });
 
   function validateFields(): boolean {
     const errors: Record<string, string> = {};
@@ -125,9 +159,9 @@
       }
 
       if (mode === 'create') {
-        await createMut.mutateAsync(cleanData);
+        await createMut.mutation.mutateAsync({ variables: cleanData });
       } else if (id != null) {
-        await updateMut.mutateAsync({ id, variables: cleanData });
+        await updateMut.mutation.mutateAsync({ id, variables: cleanData });
       }
 
       isDirty = false;
@@ -144,32 +178,50 @@
     isDirty = true;
     // Clear field error when user starts typing
     if (fieldErrors[key]) {
-      const next = { ...fieldErrors };
-      delete next[key];
-      fieldErrors = next;
+      delete fieldErrors[key];
     }
   }
 
-  const isLoading = $derived(mode === 'edit' && existingQuery ? existingQuery?.isLoading : false);
+  const isLoading = $derived(mode === 'edit' && existingQuery ? existingQuery.query.isLoading : false);
 
   const pageTitle = $derived(
     mode === 'create'
       ? `${t('common.create')}${resource.label}`
       : `${t('common.edit')}${resource.label}`
   );
+  // Unsaved changes dialog state
+  let confirmOpen = $state(false);
+  let pendingNavigation: (() => void) | null = null;
+
+  function guardNavigate(fn: () => void) {
+    if (isDirty) {
+      pendingNavigation = fn;
+      confirmOpen = true;
+    } else {
+      fn();
+    }
+  }
+
+  function confirmNavigate() {
+    confirmOpen = false;
+    pendingNavigation?.();
+    pendingNavigation = null;
+  }
+
+  function cancelNavigate() {
+    confirmOpen = false;
+    pendingNavigation = null;
+  }
 </script>
 
 <div class="space-y-6">
   <div class="flex items-center gap-4">
-    <Button
-      variant="ghost" size="icon"
-      onclick={() => {
-        if (isDirty && !confirm(t('common.unsavedChanges'))) return;
-        navigate(`/${resourceName}`);
-      }}
+    <TooltipButton
+      tooltip={t('common.back')}
+      onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
     >
       <ArrowLeft class="h-5 w-5" />
-    </Button>
+    </TooltipButton>
     <h1 class="text-2xl font-bold text-foreground">{pageTitle}</h1>
     {#if isDirty}
       <Badge variant="outline" class="border-amber-200 bg-amber-50 text-amber-700">{t('common.unsaved')}</Badge>
@@ -177,68 +229,105 @@
   </div>
 
   {#if isLoading}
-    <div class="flex h-64 items-center justify-center">
-      <Loader2 class="h-6 w-6 animate-spin text-primary" />
+    <div class="max-w-3xl space-y-6">
+      <div class="rounded-xl border p-6 space-y-5">
+        {#each Array(4) as _}
+          <div class="space-y-2">
+            <Skeleton class="h-4 w-24" />
+            <Skeleton class="h-10 w-full" />
+          </div>
+        {/each}
+      </div>
     </div>
   {:else}
     <form onsubmit={(e: Event) => { e.preventDefault(); handleSubmit(); }} class="max-w-3xl space-y-6">
       {#if error}
-        <div class="rounded-lg bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
-          {error}
-        </div>
+        <Alert.Root variant="destructive">
+          <AlertCircle class="h-4 w-4" />
+          <Alert.Description>{error}</Alert.Description>
+        </Alert.Root>
       {/if}
 
-      <Card.Root>
-        <Card.Content class="space-y-5">
-          {#each formFields as field (field.key)}
-            <div class="field-wrapper" class:has-error={fieldErrors[field.key]}>
-              <FieldRenderer
-                {field}
-                value={formData[field.key]}
-                onchange={(val: unknown) => handleFieldChange(field.key, val)}
-              />
-              {#if fieldErrors[field.key]}
-                <p class="field-error">{fieldErrors[field.key]}</p>
-              {/if}
-            </div>
-          {/each}
-        </Card.Content>
-      </Card.Root>
+      {#if hasGroups}
+        {#each groups as group}
+          <Card.Root>
+            {#if group.name}
+              <Card.Header>
+                <Card.Title class="text-lg">{group.name}</Card.Title>
+              </Card.Header>
+            {/if}
+            <Card.Content class="space-y-5">
+              {#each group.fields as field (field.key)}
+                <div class:border-destructive={!!fieldErrors[field.key]}>
+                  {#if fieldRenderer}
+                    {@render fieldRenderer({ field, value: formData[field.key], onchange: (val: unknown) => handleFieldChange(field.key, val) })}
+                  {:else}
+                    <FieldRenderer
+                      {field}
+                      value={formData[field.key]}
+                      onchange={(val: unknown) => handleFieldChange(field.key, val)}
+                    />
+                  {/if}
+                  {#if fieldErrors[field.key]}
+                    <p class="text-destructive text-[0.8125rem] mt-1">{fieldErrors[field.key]}</p>
+                  {/if}
+                </div>
+              {/each}
+            </Card.Content>
+          </Card.Root>
+        {/each}
+      {:else}
+        <Card.Root>
+          <Card.Content class="space-y-5">
+            {#each formFields as field (field.key)}
+              <div class:border-destructive={!!fieldErrors[field.key]}>
+                {#if fieldRenderer}
+                  {@render fieldRenderer({ field, value: formData[field.key], onchange: (val: unknown) => handleFieldChange(field.key, val) })}
+                {:else}
+                  <FieldRenderer
+                    {field}
+                    value={formData[field.key]}
+                    onchange={(val: unknown) => handleFieldChange(field.key, val)}
+                  />
+                {/if}
+                {#if fieldErrors[field.key]}
+                  <p class="text-destructive text-[0.8125rem] mt-1">{fieldErrors[field.key]}</p>
+                {/if}
+              </div>
+            {/each}
+          </Card.Content>
+        </Card.Root>
+      {/if}
 
       <div class="flex items-center gap-3">
-        <Button type="submit" disabled={submitting}>
-          {#if submitting}
-            <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />
-          {:else}
-            <Save class="h-4 w-4" data-icon="inline-start" />
-          {/if}
-          {t('common.save')}
-        </Button>
-        <Button
-          type="button"
-          variant="outline"
-          onclick={() => {
-            if (isDirty && !confirm(t('common.unsavedChanges'))) return;
-            navigate(`/${resourceName}`);
-          }}
-        >
-          {t('common.cancel')}
-        </Button>
+        {#if formActions}
+          {@render formActions({ isLoading: submitting, onSubmit: handleSubmit })}
+        {:else}
+          <Button type="submit" disabled={submitting}>
+            {#if submitting}
+              <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />
+            {:else}
+              <Save class="h-4 w-4" data-icon="inline-start" />
+            {/if}
+            {t('common.save')}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onclick={() => guardNavigate(() => navigate(`/${resourceName}`))}
+          >
+            {t('common.cancel')}
+          </Button>
+        {/if}
       </div>
     </form>
   {/if}
 </div>
 
-<style>
-  .field-error {
-    color: hsl(var(--destructive));
-    font-size: 0.8125rem;
-    margin-top: 0.25rem;
-  }
-
-  .field-wrapper.has-error :global(input),
-  .field-wrapper.has-error :global(textarea),
-  .field-wrapper.has-error :global(select) {
-    border-color: hsl(var(--destructive));
-  }
-</style>
+<ConfirmDialog
+  open={confirmOpen}
+  message={t('common.unsavedChanges')}
+  confirmText={t('common.confirm')}
+  onconfirm={confirmNavigate}
+  oncancel={cancelNavigate}
+/>

package/src/components/AutoSaveIndicator.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { fade, fly } from 'svelte/transition';
+  import { Loader2, Check, X, Cloud } from 'lucide-svelte';
+  import { t } from '@svadmin/core/i18n';
+
+  let {
+    status = 'idle',
+    error,
+  } = $props<{
+    /** The current auto-save status */
+    status?: 'idle' | 'loading' | 'success' | 'error';
+    /** Optional error message */
+    error?: string;
+  }>();
+</script>
+
+<div class="flex items-center gap-2 text-sm text-muted-foreground">
+  {#key status}
+    <div class="flex items-center gap-2" in:fly={{ y: -8, duration: 200 }} out:fade={{ duration: 150 }}>
+      {#if status === 'idle'}
+        <Cloud class="h-4 w-4" />
+        <span>{t('autoSave.idle')}</span>
+      {:else if status === 'loading'}
+        <Loader2 class="h-4 w-4 animate-spin text-primary" />
+        <span>{t('autoSave.saving')}</span>
+      {:else if status === 'success'}
+        <Check class="h-4 w-4 text-green-500" />
+        <span class="text-green-500">{t('autoSave.saved')}</span>
+      {:else if status === 'error'}
+        <X class="h-4 w-4 text-destructive" />
+        <span class="text-destructive" title={error}>{t('autoSave.error')}</span>
+      {/if}
+    </div>
+  {/key}
+</div>