@svadmin/ui 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -21,7 +21,7 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@svadmin/core": "^0.3.0",
+    "@svadmin/core": "^0.4.1",
     "@tanstack/svelte-query": "^5.0.0",
     "bits-ui": "^2.0.0",
     "tailwind-variants": "^3.0.0",
@@ -30,13 +30,18 @@
   },
   "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",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/zuohuadong/svadmin.git"
+    "url": "https://github.com/zuohuadong/svadmin.git",
+    "directory": "packages/ui"
   },
   "homepage": "https://github.com/zuohuadong/svadmin#readme",
   "bugs": {

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

@@ -89,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()}
@@ -110,8 +113,8 @@
           {@render dashboard()}
         {:else}
           <div class="space-y-4">
-            <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">{t('common.welcome', { title })}</h1>
-            <p class="text-gray-500">{t('common.dashboardHint')}</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'}
@@ -134,7 +137,7 @@
     </Layout>
   {:else}
     <div class="flex h-screen items-center justify-center">
-      <p class="text-gray-500">{t('common.redirecting')}</p>
+      <p class="text-muted-foreground">{t('common.redirecting')}</p>
     </div>
   {/if}
   <Toast />

package/src/components/Authenticated.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { useIsAuthenticated } from '@svadmin/core';
-  import { onMount, type Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
   import { navigate } from '@svadmin/core';
 
   let {
@@ -29,12 +29,6 @@
     navigate(url);
   }
 
-  onMount(() => {
-    if (!isAuth.isLoading && !isAuth.isAuthenticated) {
-      triggerRedirect();
-    }
-  });
-
   $effect(() => {
     if (!isAuth.isLoading && !isAuth.isAuthenticated) {
       triggerRedirect();

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> = {};
@@ -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> = {};
@@ -144,9 +178,7 @@
     isDirty = true;
     // Clear field error when user starts typing
     if (fieldErrors[key]) {
-      const next = { ...fieldErrors };
-      delete next[key];
-      fieldErrors = next;
+      delete fieldErrors[key];
     }
   }
 
@@ -157,19 +189,39 @@
       ? `${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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { fade, fly } from 'svelte/transition';
   import { Loader2, Check, X, Cloud } from 'lucide-svelte';
   import { t } from '@svadmin/core/i18n';
 
@@ -13,18 +14,22 @@
   }>();
 </script>
 
-<div class="flex items-center gap-2 text-sm text-muted-foreground transition-all duration-300">
-  {#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 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>