@svadmin/ui 0.0.6 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.0.6",
+  "version": "0.3.0",
   "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.3.0",
+    "@tanstack/svelte-query": "^5.0.0",
     "bits-ui": "^2.0.0",
     "tailwind-variants": "^3.0.0",
     "clsx": "^2.0.0",

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';
@@ -109,8 +110,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-gray-900 dark:text-gray-100">{t('common.welcome', { title })}</h1>
+            <p class="text-gray-500">{t('common.dashboardHint')}</p>
           </div>
         {/if}
       {:else if route === '/:resource'}
@@ -133,7 +134,7 @@
     </Layout>
   {:else}
     <div class="flex h-screen items-center justify-center">
-      <p class="text-gray-500">Redirecting to login...</p>
+      <p class="text-gray-500">{t('common.redirecting')}</p>
     </div>
   {/if}
   <Toast />

package/src/components/Authenticated.svelte

@@ -1,26 +1,57 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import { useIsAuthenticated } from '@svadmin/core';
+  import { onMount, 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);
+  }
+
+  onMount(() => {
+    if (!isAuth.isLoading && !isAuth.isAuthenticated) {
+      triggerRedirect();
+    }
+  });
+
+  $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

@@ -62,8 +62,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;
     }
   });
@@ -125,9 +125,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;
@@ -150,7 +150,7 @@
     }
   }
 
-  const isLoading = $derived(mode === 'edit' && existingQuery ? existingQuery?.isLoading : false);
+  const isLoading = $derived(mode === 'edit' && existingQuery ? existingQuery.query.isLoading : false);
 
   const pageTitle = $derived(
     mode === 'create'

package/src/components/AutoSaveIndicator.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  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 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>

package/src/components/AutoTable.svelte

@@ -10,10 +10,20 @@
   import { Checkbox } from './ui/checkbox/index.js';
   import { Badge } from './ui/badge/index.js';
   import * as Table from './ui/table/index.js';
-  import { Plus, Pencil, Trash2, ChevronLeft, ChevronRight, Search, Loader2, Download, Upload } from 'lucide-svelte';
+  import { Plus, Pencil, Trash2, ChevronLeft, ChevronRight, Search, Loader2, Download, Upload, ChevronDown, ChevronUp, SlidersHorizontal } from 'lucide-svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
 
-  let { resourceName } = $props<{ resourceName: string }>();
+  import type { Snippet } from 'svelte';
+
+  let {
+    resourceName,
+    expandedRowRender,
+    selectable = true,
+  } = $props<{
+    resourceName: string;
+    expandedRowRender?: Snippet<[record: Record<string, unknown>]>;
+    selectable?: boolean;
+  }>();
 
   const resource = getResource(resourceName);
   const primaryKey = $derived(resource.primaryKey ?? 'id');
@@ -33,6 +43,25 @@
   let filters = $state<Filter[]>([]);
   let searchText = $state(urlState.search ?? '');
 
+  // Column visibility
+  let columnVisibility = $state<Record<string, boolean>>({});
+  function initColumnVisibility() {
+    const vis: Record<string, boolean> = {};
+    for (const f of resource.fields) vis[f.key] = f.showInList !== false;
+    return vis;
+  }
+  columnVisibility = initColumnVisibility();
+  const visibleFields = $derived(resource.fields.filter(f => columnVisibility[f.key] !== false && f.showInList !== false));
+  let showColumnPicker = $state(false);
+
+  // Expanded rows
+  let expandedRowIds = $state<Set<string | number>>(new Set());
+  function toggleExpand(id: string | number) {
+    const next = new Set(expandedRowIds);
+    if (next.has(id)) next.delete(id); else next.add(id);
+    expandedRowIds = next;
+  }
+
   // Batch selection
   let selectedIds = $state<Set<string | number>>(new Set());
   let selectAll = $state(false);
@@ -54,7 +83,7 @@
   });
 
   const searchableFields = resource.fields.filter(f => f.searchable);
-  const listFields = resource.fields.filter(f => f.showInList !== false);
+  const listFields = $derived(visibleFields);
 
   const activeFilters = $derived.by(() => {
     const result: Filter[] = [...filters];
@@ -64,14 +93,16 @@
     return result;
   });
 
-  const query = useList({
+  const listResult = useList({
     resource: resourceName,
     pagination,
     sorters,
     filters: activeFilters,
   });
+  const query = listResult.query;
 
-  const deleteMutation = useDelete(resourceName);
+  const deleteResult = useDelete({ resource: resourceName });
+  const deleteMutation = deleteResult.mutation;
 
   function toggleSort(field: string) {
     const existing = sorters.find(s => s.field === field);
@@ -111,7 +142,7 @@
   function confirmDelete(id: string | number) {
     confirmMessage = t('common.deleteConfirm');
     confirmAction = async () => {
-      await deleteMutation.mutateAsync(id);
+      await deleteMutation.mutateAsync({ id, resource: resourceName });
       confirmOpen = false;
     };
     confirmOpen = true;
@@ -121,7 +152,7 @@
     confirmMessage = t('common.batchDeleteConfirm', { count: selectedIds.size });
     confirmAction = async () => {
       for (const id of selectedIds) {
-        await deleteMutation.mutateAsync(id);
+        await deleteMutation.mutateAsync({ id, resource: resourceName });
       }
       selectedIds = new Set();
       selectAll = false;
@@ -194,6 +225,25 @@
           <Trash2 class="h-4 w-4" data-icon="inline-start" /> {t('common.batchDelete', { count: selectedIds.size })}
         </Button>
       {/if}
+      <!-- Column Visibility Picker -->
+      <div class="relative">
+        <Button variant="outline" size="sm" onclick={() => showColumnPicker = !showColumnPicker}>
+          <SlidersHorizontal class="h-4 w-4" data-icon="inline-start" /> {t('common.columns') || 'Columns'}
+        </Button>
+        {#if showColumnPicker}
+          <div class="absolute right-0 top-full mt-1 z-50 w-48 rounded-lg border bg-popover p-2 shadow-lg">
+            {#each resource.fields.filter(f => f.showInList !== false) as field}
+              <label class="flex items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-accent cursor-pointer">
+                <Checkbox
+                  checked={columnVisibility[field.key] !== false}
+                  onCheckedChange={(v) => { columnVisibility = { ...columnVisibility, [field.key]: !!v }; }}
+                />
+                {field.label}
+              </label>
+            {/each}
+          </div>
+        {/if}
+      </div>
       {#if canCreate}
         <Button onclick={() => navigate(`/${resourceName}/create`)}>
           <Plus class="h-4 w-4" data-icon="inline-start" /> {t('common.create')}
@@ -230,11 +280,14 @@
       <Table.Root>
         <Table.Header>
           <Table.Row class="bg-muted/50 hover:bg-muted/50">
-            {#if canDelete}
+            {#if selectable && canDelete}
               <Table.Head class="w-10">
                 <Checkbox checked={selectAll} onCheckedChange={() => toggleSelectAll()} />
               </Table.Head>
             {/if}
+            {#if expandedRowRender}
+              <Table.Head class="w-10"></Table.Head>
+            {/if}
             {#each listFields as field}
               <Table.Head style={field.width ? `width:${field.width}` : undefined}>
                 <button class="flex items-center gap-1 hover:text-foreground" onclick={() => toggleSort(field.key)}>
@@ -250,11 +303,22 @@
           {#each query.data?.data ?? [] as record}
             {@const id = record[primaryKey] as string | number}
             <Table.Row class="transition-colors {selectedIds.has(id) ? 'bg-accent' : ''}">
-              {#if canDelete}
+              {#if selectable && canDelete}
                 <Table.Cell>
                   <Checkbox checked={selectedIds.has(id)} onCheckedChange={() => toggleSelect(id)} />
                 </Table.Cell>
               {/if}
+              {#if expandedRowRender}
+                <Table.Cell>
+                  <button class="p-1 hover:bg-accent rounded" onclick={() => toggleExpand(id)}>
+                    {#if expandedRowIds.has(id)}
+                      <ChevronUp class="h-4 w-4" />
+                    {:else}
+                      <ChevronDown class="h-4 w-4" />
+                    {/if}
+                  </button>
+                </Table.Cell>
+              {/if}
               {#each listFields as field}
                 <Table.Cell>
                   {#if field.type === 'boolean'}
@@ -299,9 +363,16 @@
                 </div>
               </Table.Cell>
             </Table.Row>
+            {#if expandedRowRender && expandedRowIds.has(id)}
+              <Table.Row class="bg-muted/30">
+                <Table.Cell colspan={listFields.length + (selectable && canDelete ? 1 : 0) + (expandedRowRender ? 1 : 0) + 1}>
+                  {@render expandedRowRender(record)}
+                </Table.Cell>
+              </Table.Row>
+            {/if}
           {:else}
             <Table.Row>
-              <Table.Cell colspan={listFields.length + (canDelete ? 2 : 1)} class="h-24 text-center text-muted-foreground">
+              <Table.Cell colspan={listFields.length + (selectable && canDelete ? 2 : 1) + (expandedRowRender ? 1 : 0)} class="h-24 text-center text-muted-foreground">
                 {t('common.noData')}
               </Table.Cell>
             </Table.Row>

package/src/components/Breadcrumbs.svelte

@@ -29,6 +29,8 @@
         result.push({ label: t('common.create'), href: `#/${res.name}/create` });
       } else if (segments[1] === 'edit' && segments[2]) {
         result.push({ label: `${t('common.edit')} #${segments[2]}`, href: `#/${res.name}/edit/${segments[2]}` });
+      } else if (segments[1] === 'show' && segments[2]) {
+        result.push({ label: `${t('common.detail')} #${segments[2]}`, href: `#/${res.name}/show/${segments[2]}` });
       }
     }
     return result;

package/src/components/CatchAllNavigate.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { useIsAuthenticated } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import NavigateToResource from './NavigateToResource.svelte';
+  
+  const auth = useIsAuthenticated();
+
+  $effect(() => {
+    if (!auth.isLoading && !auth.isAuthenticated) {
+      navigate('/login');
+    }
+  });
+</script>
+
+{#if auth.isLoading}
+  <div class="flex h-screen w-screen items-center justify-center">
+    <div class="h-8 w-8 animate-spin rounded-full border-4 border-primary border-r-transparent"></div>
+  </div>
+{:else if auth.isAuthenticated}
+  <NavigateToResource />
+{/if}

package/src/components/ConfirmDialog.svelte

@@ -37,7 +37,7 @@
       <Button variant="outline" onclick={oncancel}>
         {resolvedCancelText}
       </Button>
-      <Button variant={variantMap[variant]} onclick={onconfirm}>
+      <Button variant={variantMap[variant as keyof typeof variantMap]} onclick={onconfirm}>
         {resolvedConfirmText}
       </Button>
     </Dialog.Footer>

package/src/components/CreatePage.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { getResource } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { t } from '@svadmin/core/i18n';
+  import type { Snippet } from 'svelte';
+  import PageHeader from './PageHeader.svelte';
+  import AutoForm from './AutoForm.svelte';
+  import { ArrowLeft } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+
+  interface Props {
+    resourceName: string;
+    title?: string;
+    headerActions?: Snippet;
+    class?: string;
+  }
+
+  let {
+    resourceName,
+    title,
+    headerActions,
+    class: className = '',
+  }: Props = $props();
+
+  const resource = getResource(resourceName);
+  const pageTitle = title ?? `${t('common.create')}${resource.label}`;
+</script>
+
+<div class="space-y-6 {className}">
+  <PageHeader title={pageTitle}>
+    {#snippet actions()}
+      <Button variant="ghost" size="icon" onclick={() => navigate(`/${resourceName}`)}>
+        <ArrowLeft class="h-5 w-5" />
+      </Button>
+      {#if headerActions}
+        {@render headerActions()}
+      {/if}
+    {/snippet}
+  </PageHeader>
+
+  <AutoForm {resourceName} mode="create" />
+</div>

package/src/components/EditPage.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { getResource } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { t } from '@svadmin/core/i18n';
+  import type { Snippet } from 'svelte';
+  import PageHeader from './PageHeader.svelte';
+  import AutoForm from './AutoForm.svelte';
+  import { ArrowLeft, Trash2 } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+
+  interface Props {
+    resourceName: string;
+    id: string | number;
+    title?: string;
+    canDelete?: boolean;
+    headerActions?: Snippet;
+    class?: string;
+  }
+
+  let {
+    resourceName,
+    id,
+    title,
+    canDelete,
+    headerActions,
+    class: className = '',
+  }: Props = $props();
+
+  const resource = getResource(resourceName);
+  const pageTitle = title ?? `${t('common.edit')} ${resource.label} #${id}`;
+  const showDelete = canDelete ?? resource.canDelete !== false;
+</script>
+
+<div class="space-y-6 {className}">
+  <PageHeader title={pageTitle}>
+    {#snippet actions()}
+      <Button variant="ghost" size="icon" onclick={() => navigate(`/${resourceName}`)}>
+        <ArrowLeft class="h-5 w-5" />
+      </Button>
+      {#if showDelete}
+        <Button variant="destructive" size="sm">
+          <Trash2 class="h-4 w-4" data-icon="inline-start" /> {t('common.delete')}
+        </Button>
+      {/if}
+      {#if headerActions}
+        {@render headerActions()}
+      {/if}
+    {/snippet}
+  </PageHeader>
+
+  <AutoForm {resourceName} mode="edit" {id} />
+</div>

package/src/components/EmptyState.svelte

@@ -1,41 +1,27 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { t } from '@svadmin/core/i18n';
-  import { Button } from './ui/button/index.js';
-  import { InboxIcon } from 'lucide-svelte';
+  import { PackageOpen } from 'lucide-svelte';
+  import { t } from '@svadmin/core';
 
-  interface Props {
-    icon?: typeof InboxIcon;
+  let {
+    title = t('empty.title'),
+    description = t('empty.description'),
+    children,
+  } = $props<{
     title?: string;
     description?: string;
-    action?: Snippet;
-    class?: string;
-  }
-
-  let {
-    icon: Icon = InboxIcon,
-    title,
-    description,
-    action,
-    class: className = '',
-  }: Props = $props();
+    children?: import('svelte').Snippet;
+  }>();
 </script>
 
-<div class="flex flex-col items-center justify-center py-16 text-center {className}">
-  <div class="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
-    <Icon class="h-8 w-8 text-muted-foreground" />
+<div class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card rounded-lg border border-dashed border-border/50 shadow-sm transition-all duration-300">
+  <div class="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-4">
+    <PackageOpen class="h-10 w-10 text-muted-foreground" />
   </div>
-  <h3 class="text-lg font-semibold text-foreground">
-    {title ?? t('common.noData')}
-  </h3>
-  {#if description}
-    <p class="mt-1 text-sm text-muted-foreground max-w-sm">
-      {description}
-    </p>
-  {/if}
-  {#if action}
-    <div class="mt-4">
-      {@render action()}
+  <h3 class="text-lg font-semibold tracking-tight">{title}</h3>
+  <p class="text-sm text-muted-foreground mt-2 max-w-sm">{description}</p>
+  {#if children}
+    <div class="mt-6">
+      {@render children()}
     </div>
   {/if}
 </div>

package/src/components/ErrorComponent.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { AlertTriangle, AlertCircle } from 'lucide-svelte';
+  import { t } from '@svadmin/core';
+  import { Button } from './ui/button';
+
+  let {
+    error,
+    title = t('error.title'),
+    description = t('error.description'),
+    retry,
+  } = $props<{
+    error?: Error | null;
+    title?: string;
+    description?: string;
+    retry?: () => void;
+  }>();
+</script>
+
+<div class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-destructive/5 rounded-lg border border-destructive/20 text-destructive transition-all duration-300">
+  <div class="h-16 w-16 rounded-full bg-destructive/10 flex items-center justify-center mb-4">
+    <AlertTriangle class="h-8 w-8 text-destructive" />
+  </div>
+  <h3 class="text-lg font-semibold">{title}</h3>
+  <p class="text-sm opacity-90 mt-2 max-w-md">
+    {error?.message || description}
+  </p>
+  {#if retry}
+    <div class="mt-6">
+      <Button variant="outline" class="border-destructive/30 hover:bg-destructive/10 text-destructive" onclick={retry}>
+        <AlertCircle class="mr-2 h-4 w-4" />
+        {t('buttons.retry')}
+      </Button>
+    </div>
+  {/if}
+</div>