@svadmin/ui 0.0.3 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.0.3",
+  "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.1.0",
+    "@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

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode } from '@svadmin/core';
-  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme } from '@svadmin/core';
+  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';
@@ -12,12 +13,15 @@
   import LoginPage from './LoginPage.svelte';
   import RegisterPage from './RegisterPage.svelte';
   import ForgotPasswordPage from './ForgotPasswordPage.svelte';
+  import UpdatePasswordPage from './UpdatePasswordPage.svelte';
+  import ConfigErrorScreen from './ConfigErrorScreen.svelte';
   import DevTools from './DevTools.svelte';
   import { initRouter, getRoute, getParams } from '../router-state.svelte.js';
 
   interface Props {
     dataProvider: DataProvider;
     authProvider?: AuthProvider;
+    routerProvider?: RouterProvider;
     resources: ResourceDefinition[];
     locale?: string;
     title?: string;
@@ -29,6 +33,7 @@
   let {
     dataProvider,
     authProvider,
+    routerProvider,
     resources,
     locale,
     title = 'Admin',
@@ -37,10 +42,14 @@
     loginPage,
   }: Props = $props();
 
+  // Resolve router provider (default to hash)
+  const resolvedRouter = routerProvider ?? createHashRouterProvider();
+
   // Set up context
   setDataProvider(dataProvider);
   if (authProvider) setAuthProvider(authProvider);
   setResources(resources);
+  setRouterProvider(resolvedRouter);
   if (locale) setLocale(locale);
   if (defaultTheme) setTheme(defaultTheme);
 
@@ -50,23 +59,27 @@
     },
   });
 
-  // Initialize hash router
-  initRouter();
+  // Initialize router with provider
+  initRouter(resolvedRouter);
 
   // Reactive getters for route state
   const route = $derived(getRoute());
   const params = $derived(getParams());
 
   // Auth check
-  let isAuthenticated = $state(!authProvider);
-  let authChecked = $state(!authProvider);
+  let isAuthenticated = $state(false);
+  let authChecked = $state(false);
 
   $effect(() => {
-    if (!authProvider) return;
+    if (!authProvider) {
+      isAuthenticated = true;
+      authChecked = true;
+      return;
+    }
     authProvider.check().then(result => {
       isAuthenticated = result.authenticated;
       authChecked = true;
-      if (!result.authenticated && route !== '/login' && route !== '/register' && route !== '/forgot-password') {
+      if (!result.authenticated && route !== '/login' && route !== '/register' && route !== '/forgot-password' && route !== '/update-password') {
         navigate(result.redirectTo ?? '/login');
       }
     });
@@ -81,18 +94,15 @@
   {:else if route === '/login' && loginPage}
     {@render loginPage()}
   {:else if route === '/login' && authProvider}
-    <LoginPage {authProvider} {title} onSuccess={() => { isAuthenticated = true; navigate('/'); }} />
+    <LoginPage {title} onSuccess={() => { isAuthenticated = true; navigate('/'); }} />
   {:else if route === '/register' && authProvider?.register}
-    <RegisterPage {authProvider} {title} />
+    <RegisterPage {title} />
   {:else if route === '/forgot-password' && authProvider?.forgotPassword}
-    <ForgotPasswordPage {authProvider} {title} />
-  {:else if route === '/login' || route === '/register' || route === '/forgot-password'}
-    <div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
-      <div class="w-full max-w-sm rounded-2xl bg-white dark:bg-gray-900 p-8 shadow-xl text-center">
-        <h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">{title}</h1>
-        <p class="mt-2 text-sm text-gray-500">Please configure an authProvider.</p>
-      </div>
-    </div>
+    <ForgotPasswordPage {title} />
+  {:else if route === '/update-password' && authProvider?.updatePassword}
+    <UpdatePasswordPage {title} />
+  {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
+    <ConfigErrorScreen title="{title} — Configuration Required" />
   {:else if isAuthenticated || !authProvider}
     <Layout {title}>
       {#if route === '/'}
@@ -100,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'}
@@ -124,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

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

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}