@svadmin/ui 0.29.4 → 0.30.1

package/dist/components/AdminApp.svelte

@@ -47,6 +47,8 @@
     menu?: MenuItem[];
     /** External URL to the main application or workspace (renders a shortcut in the header) */
     siteUrl?: string;
+    /** Routing strategy for Sidebar links ('hash' | 'path' | 'auto') */
+    routeMode?: 'hash' | 'path' | 'auto';
   }
 
   let {
@@ -63,6 +65,7 @@
     components: userComponents,
     menu,
     siteUrl,
+    routeMode,
   }: Props = $props();
 
   // Default component registry
@@ -76,10 +79,13 @@
   };
 
   // Merge user overrides and set context
-  setComponentRegistry({ ...defaultComponents, ...userComponents });
+  $effect(() => {
+    setComponentRegistry({ ...defaultComponents, ...userComponents });
+  });
 
   // Resolve router provider (default to hash)
   const resolvedRouter = $derived(routerProvider ?? createHashRouterProvider());
+  const resolvedRouteMode = $derived(routeMode ?? (routerProvider ? 'auto' : 'hash'));
 
   // Set up context — use $effect so prop changes are tracked
   $effect.pre(() => {
@@ -151,7 +157,7 @@
   {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
     <ConfigErrorScreen title="{title} — {t('common.configRequired')}" />
   {:else if isAuthenticated || !authProvider}
-    <Layout {title} {menu} {siteUrl}>
+    <Layout {title} {menu} {siteUrl} routeMode={resolvedRouteMode}>
       {#key route + (params.resource ?? '') + (params.id ?? '')}
       <div class="svadmin-page-enter">
       {#if currentPath().startsWith('/settings')}
@@ -185,6 +191,11 @@
           {@const Comp = getComponentRegistry().ShowPage}
           <Comp resourceName={params.resource} id={params.id} />
         {/key}
+      {:else if route === '/:resource/clone/:id'}
+        {#key `${params.resource}-clone-${params.id}`}
+          {@const Comp = getComponentRegistry().AutoForm}
+          <Comp resourceName={params.resource} mode="create" id={params.id} />
+        {/key}
       {/if}
       </div>
       {/key}

package/dist/components/AdminApp.svelte.d.ts

@@ -20,6 +20,8 @@ interface Props {
     menu?: MenuItem[];
     /** External URL to the main application or workspace (renders a shortcut in the header) */
     siteUrl?: string;
+    /** Routing strategy for Sidebar links ('hash' | 'path' | 'auto') */
+    routeMode?: 'hash' | 'path' | 'auto';
 }
 declare const AdminApp: import("svelte").Component<Props, {}, "">;
 type AdminApp = ReturnType<typeof AdminApp>;

package/dist/components/AppearanceSettings.svelte

@@ -22,24 +22,24 @@
   // 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'
+    (typeof window !== '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);
+    if (typeof window !== '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
+    typeof window !== '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));
+    if (typeof window !== 'undefined') localStorage.setItem(PAGE_SIZE_KEY, String(size));
   }
 
   // Locale display names

package/dist/components/AutoForm.svelte

@@ -69,15 +69,17 @@
     return d;
   })());
 
+  const validator = $derived(deriveValidator(formFields));
+
   // ─── useForm: single source of truth for values, errors, tainted ──
   const form = useForm({
     get resource() { return resourceName; },
     get action() { return mode; },
     get id() { return id; },
-    defaultValues: defaults,
+    get defaultValues() { return defaults; },
     redirect: 'list',
     warnWhenUnsavedChanges: true,
-    validate: deriveValidator(formFields),
+    get validate() { return validator; },
   });
 
   // ─── Submission error (non-field, e.g. network error) ─────────────

package/dist/components/AutoTable.svelte

@@ -84,7 +84,7 @@
   const urlState = readURLState();
 
   // Snapshot resource values for initial state (untrack to avoid reactive tracking)
-  const storedPageSize = typeof localStorage !== 'undefined' ? parseInt(localStorage.getItem('svadmin-default-page-size') ?? '', 10) : NaN;
+  const storedPageSize = typeof window !== 'undefined' ? parseInt(localStorage.getItem('svadmin-default-page-size') ?? '', 10) : NaN;
   const initPageSize = untrack(() => resource.pageSize ?? (isNaN(storedPageSize) ? 10 : storedPageSize));
   const initDefaultSort = untrack(() => resource.defaultSort);
 
@@ -149,7 +149,7 @@
     get sorters() { return sorters; },
     get filters() { return activeFilters; },
   });
-  const query = listResult.query;
+  const query = listResult;
   const deleteResult = useDelete({ get resource() { return resourceName; } });
   const deleteMutation = deleteResult.mutation;
 
@@ -171,7 +171,7 @@
   let columnVisibility = $state<VisibilityState>((() => {
     // Try to restore from localStorage first
     const storageKey = `svadmin-columns-${resourceName}`;
-    if (typeof localStorage !== 'undefined') {
+    if (typeof window !== 'undefined') {
       try {
         const stored = localStorage.getItem(storageKey);
         if (stored) return JSON.parse(stored);
@@ -191,7 +191,7 @@
   // Persist column visibility to localStorage
   $effect(() => {
     const storageKey = `svadmin-columns-${resourceName}`;
-    if (typeof localStorage !== 'undefined') {
+    if (typeof window !== 'undefined') {
       try {
         localStorage.setItem(storageKey, JSON.stringify(columnVisibility));
       } catch { /* ignore quota errors */ }
@@ -623,7 +623,7 @@
                                 recordId={id}
                                 {field}
                                 value={cell.getValue()}
-                                onSave={() => listResult.query.refetch()}
+                                onSave={() => listResult.refetch()}
                               />
                             {:else if field?.key === primaryKey}
                               <span class="font-mono text-xs">{cell.getValue() ?? '—'}</span>

package/dist/components/DraggableHeader.svelte

@@ -32,7 +32,7 @@
   // Restore saved order from localStorage
   $effect(() => {
     const storageKey = `svadmin-colorder-${resourceName}`;
-    if (typeof localStorage === 'undefined') return;
+    if (typeof window === 'undefined') return;
     try {
       const saved = localStorage.getItem(storageKey);
       if (saved) {
@@ -79,7 +79,7 @@
 
     // Persist to localStorage
     const storageKey = `svadmin-colorder-${resourceName}`;
-    if (typeof localStorage !== 'undefined') {
+    if (typeof window !== 'undefined') {
       try {
         localStorage.setItem(storageKey, JSON.stringify(newColumns.map(c => c.id)));
       } catch { /* ignore */ }

package/dist/components/Layout.svelte

@@ -22,7 +22,7 @@
   let shortcutsOpen = $state(false);
   let mobileMenuOpen = $state(false);
 
-  let { children, title = 'Admin', menu, siteUrl }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string } = $props();
+  let { children, title = 'Admin', menu, siteUrl, routeMode = 'auto' }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string; routeMode?: 'hash' | 'path' | 'auto' } = $props();
 
   let hasAuth = true;
   let auth: ReturnType<typeof getAuthProvider> | null = null;
@@ -121,13 +121,13 @@
   <div class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
     <!-- Desktop sidebar -->
     <div class="hidden md:block">
-      <Sidebar {collapsed} {identity} {title} {menu} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
+      <Sidebar {collapsed} {identity} {title} {menu} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
     </div>
 
     <!-- Mobile sidebar via Sheet -->
     <Sheet.Root bind:open={mobileMenuOpen} side="left">
       <div class="md:hidden">
-        <Sidebar collapsed={false} {identity} {title} {menu} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
+        <Sidebar collapsed={false} {identity} {title} {menu} {routeMode} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
       </div>
     </Sheet.Root>
 

package/dist/components/Layout.svelte.d.ts

@@ -5,6 +5,7 @@ type $$ComponentProps = {
     title?: string;
     menu?: MenuItem[];
     siteUrl?: string;
+    routeMode?: 'hash' | 'path' | 'auto';
 };
 declare const Layout: import("svelte").Component<$$ComponentProps, {}, "">;
 type Layout = ReturnType<typeof Layout>;

package/dist/components/ShowPage.svelte

@@ -35,7 +35,7 @@
     {/snippet}
   </PageHeader>
 
-  {#if query.query.isLoading}
+  {#if query.isLoading}
     <Card.Root class="overflow-hidden border-border/40 shadow-sm">
       <Card.Content class="p-0">
         {#each showFields.slice(0, 6) as _, i}
@@ -46,11 +46,11 @@
         {/each}
       </Card.Content>
     </Card.Root>
-  {:else if query.query.data?.data}
+  {:else if query.data?.data}
     <Card.Root class="overflow-hidden border-border/40 shadow-sm">
       <Card.Content class="p-0">
         {#each showFields as field, i}
-          {@const value = (query.query.data!.data as Record<string, unknown>)[field.key]}
+          {@const value = (query.data!.data as Record<string, unknown>)[field.key]}
           {@const DisplayComponent = getDisplayComponent(field.type)}
           <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
             <div class="sm:w-1/3 text-xs sm:text-sm font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>

package/dist/components/StepsForm.svelte

@@ -53,15 +53,17 @@
     return d;
   })());
 
+  const validator = $derived(deriveValidator(flatStepsFields));
+
   // ─── useStepsForm: form state + step navigation ──────────────────
   const form = useStepsForm({
     get resource() { return resourceName; },
     get action() { return mode; },
     get id() { return id; },
-    defaultValues: defaults,
+    get defaultValues() { return defaults; },
     redirect: 'list',
     warnWhenUnsavedChanges: true,
-    validate: deriveValidator(flatStepsFields),
+    get validate() { return validator; },
   });
 
   const totalSteps = $derived(steps.length);

package/dist/components/TooltipButton.svelte

@@ -6,6 +6,9 @@
 
   interface Props extends Omit<HTMLButtonAttributes, 'class' | 'children'> {
     tooltip: string;
+    href?: string;
+    target?: string;
+    rel?: string;
     variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
     size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm';
     side?: 'top' | 'right' | 'bottom' | 'left';
@@ -24,6 +27,9 @@
     disabled = false,
     type = 'button',
     tabindex,
+    href,
+    target,
+    rel,
     children,
     ...restProps
   }: Props = $props();
@@ -32,7 +38,7 @@
 <Tooltip.Root>
   <Tooltip.Trigger>
     {#snippet child({ props })}
-      {@const buttonProps = { ...props, ...restProps, variant, size, type, class: className, 'aria-label': restProps['aria-label'] ?? tooltip, onclick, disabled, tabindex } as any}
+      {@const buttonProps = { ...props, ...restProps, href, target, rel, variant, size, type, class: className, 'aria-label': restProps['aria-label'] ?? tooltip, onclick, disabled, tabindex } as any}
       <Button {...buttonProps}>
         {@render children()}
       </Button>

package/dist/components/TooltipButton.svelte.d.ts

@@ -2,6 +2,9 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLButtonAttributes, 'class' | 'children'> {
     tooltip: string;
+    href?: string;
+    target?: string;
+    rel?: string;
     variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
     size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm';
     side?: 'top' | 'right' | 'bottom' | 'left';

package/dist/router-state.svelte.js

@@ -14,10 +14,12 @@ const ROUTES = [
     '/:resource/create',
     '/:resource/edit/:id',
     '/:resource/show/:id',
+    '/:resource/clone/:id',
     '/:parent/:parentId/:resource',
     '/:parent/:parentId/:resource/create',
     '/:parent/:parentId/:resource/edit/:id',
     '/:parent/:parentId/:resource/show/:id',
+    '/:parent/:parentId/:resource/clone/:id',
 ];
 function sync() {
     let path;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.29.4",
+  "version": "0.30.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -25,7 +25,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.20.3",
+    "@svadmin/core": "^0.21.1",
     "@tanstack/svelte-query": "^6.0.0",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.7.1",
@@ -53,6 +53,7 @@
   "dependencies": {
     "@lucide/svelte": "^1.7.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.10",
+    "@tanstack/table-core": "^9.0.0-alpha.10",
     "bits-ui": "^2.17.1",
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.19",
@@ -71,9 +72,7 @@
   "bugs": {
     "url": "https://github.com/zuohuadong/svadmin/issues"
   },
-  "devDependencies": {
-    "@tanstack/table-core": "8.21.3"
-  },
+  "devDependencies": {},
   "scripts": {
     "build": "svelte-package -i src -o dist"
   }