@svadmin/ui 0.22.1 → 0.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.22.1",
+  "version": "0.23.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -22,15 +22,11 @@
   "peerDependencies": {
     "@svadmin/core": "^0.5.0",
     "@tanstack/svelte-query": "^6.0.0",
-    "bits-ui": "^2.0.0",
-    "clsx": "^2.0.0",
     "highlight.js": "^11.0.0",
     "isomorphic-dompurify": "^2.0.0",
     "marked": "^15.0.0",
     "marked-highlight": "^2.2.0",
-    "svelte": "^5.0.0",
-    "tailwind-merge": "^3.0.0",
-    "tailwind-variants": "^3.0.0"
+    "svelte": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "marked": {
@@ -52,10 +48,13 @@
   "dependencies": {
     "@lucide/svelte": "^0.577.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.10",
+    "bits-ui": "^2.0.0",
+    "clsx": "^2.0.0",
     "cmdk-sv": "^0.0.19",
     "lucide-svelte": "^0.577.0",
     "sonner-svelte": "^0.3.3",
-    "vaul-svelte": "^0.3.2"
+    "tailwind-merge": "^3.0.0",
+    "tailwind-variants": "^3.0.0"
   },
   "license": "MIT",
   "author": "zuohuadong",

package/src/components/AutoTable.svelte

@@ -308,9 +308,7 @@
     const ids = Object.keys(rowSelection);
     confirmMessage = t('common.batchDeleteConfirm', { count: ids.length });
     confirmAction = async () => {
-      for (const id of ids) {
-        await deleteMutation.mutateAsync({ id, resource: resourceName });
-      }
+      await Promise.allSettled(ids.map(id => deleteMutation.mutateAsync({ id, resource: resourceName })));
       rowSelection = {};
       confirmOpen = false;
     };

package/src/components/FieldRenderer.svelte

@@ -78,7 +78,7 @@
 </script>
 
 <div class="space-y-1.5">
-  <Label for={field.key}>
+  <Label for={field.key} id="label-{field.key}">
     {field.label}
     {#if field.required}
       <span class="text-destructive">*</span>
@@ -233,7 +233,11 @@
     {/if}
 
   {:else if field.type === 'multiselect'}
-    <div class="space-y-2 rounded-lg border border-input p-3 max-h-48 overflow-y-auto">
+    <div 
+      class="space-y-2 rounded-lg border border-input p-3 max-h-48 overflow-y-auto"
+      role="group" 
+      aria-labelledby="label-{field.key}"
+    >
       {#each field.options ?? [] as opt}
         <label class="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5 transition-colors">
           <Checkbox

package/src/components/Sidebar.svelte

@@ -17,16 +17,23 @@
     ChevronLeft, ChevronDown, LogOut, Sun, Moon, Palette
   } from 'lucide-svelte';
 
-  let { collapsed, identity, title, onToggle, onLogout, menu, legacyHashRouting = false }: {
+  let { collapsed, identity, title, onToggle, onLogout, menu, routeMode = 'auto' }: {
     collapsed: boolean;
     identity: Identity | null;
     title: string;
     onToggle: () => void;
     onLogout: () => void;
     menu?: MenuItem[];
-    legacyHashRouting?: boolean;
+    /** 'hash' for SPA hash routing, 'path' for SvelteKit/filesystem routing, 'auto' to detect */
+    routeMode?: 'hash' | 'path' | 'auto';
   } = $props();
 
+  const effectiveRouteMode = $derived(
+    routeMode === 'auto'
+      ? (typeof window !== 'undefined' && window.location.hash.startsWith('#/') ? 'hash' : 'path')
+      : routeMode
+  );
+
   const resources = getResources();
 
   const iconMap: Record<string, typeof LayoutDashboard> = {
@@ -98,7 +105,7 @@
 
   function isActive(itemPath: string): boolean {
     if (itemPath === '/') return path === '/';
-    return path.startsWith(itemPath);
+    return path === itemPath || path.startsWith(itemPath + "/");
   }
 
   /** Prefetch resource data on hover for instant navigation */
@@ -206,7 +213,7 @@
               {#each group.items as item}
                 {@const active = isActive(item.path)}
                 <a
-                  href={legacyHashRouting ? `#${item.path}` : item.path}
+                  href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
                   class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
                   {active
                     ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
@@ -229,7 +236,7 @@
                 {#snippet child({ props }: { props: Record<string, unknown> })}
                   <a
                     {...props}
-                    href={legacyHashRouting ? `#${item.path}` : item.path}
+                    href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
                     class="flex items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
                     {active
                       ? 'bg-sidebar-accent text-sidebar-accent-foreground'
@@ -245,7 +252,7 @@
             </Tooltip.Root>
           {:else}
             <a
-              href={legacyHashRouting ? `#${item.path}` : item.path}
+              href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
               class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
               {active
                 ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'

package/src/components/Toast.svelte

@@ -1,8 +1,33 @@
 <script lang="ts">
-  import { Toaster } from 'sonner-svelte';
-  import { getResolvedTheme } from '@svadmin/core';
+  import { Toaster, toast as sonner } from 'sonner-svelte';
+  import { getResolvedTheme, getToastQueue, consumeToastQueue, getPromiseQueue, consumePromiseQueue } from '@svadmin/core';
 
   const theme = $derived(getResolvedTheme() === 'dark' ? 'dark' : 'light');
+
+  $effect(() => {
+    const queue = getToastQueue();
+    if (queue.length > 0) {
+      for (const t of queue) {
+        switch (t.type) {
+          case 'success': sonner.success(t.message, { duration: t.duration }); break;
+          case 'error': sonner.error(t.message, { duration: t.duration }); break;
+          case 'warning': sonner.warning(t.message, { duration: t.duration }); break;
+          case 'info': sonner.info(t.message, { duration: t.duration }); break;
+        }
+      }
+      consumeToastQueue();
+    }
+  });
+
+  $effect(() => {
+    const pQueue = getPromiseQueue();
+    if (pQueue.length > 0) {
+      for (const p of pQueue) {
+        sonner.promise(p.promise, p.opts);
+      }
+      consumePromiseQueue();
+    }
+  });
 </script>
 
 <Toaster

package/src/components/ui/drawer/drawer-content.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
-  import { cn } from '../../../utils.js';
-  import type { Snippet } from 'svelte';
-
-  let { class: className, children, ...restProps }: { class?: string; children?: Snippet; [key: string]: unknown } = $props();
-</script>
-
-<DrawerPrimitive.Portal>
-  <DrawerPrimitive.Overlay class="fixed inset-0 z-50 bg-black/80" />
-  <DrawerPrimitive.Content
-    class={cn(
-      "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
-      className
-    )}
-    {...restProps}
-  >
-    <div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full"></div>
-    {@render children?.()}
-  </DrawerPrimitive.Content>
-</DrawerPrimitive.Portal>

package/src/components/ui/drawer/drawer-description.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
-  import { cn } from '../../../utils.js';
-  import type { Snippet } from 'svelte';
-
-  let { class: className, children, ...restProps }: { class?: string; children?: Snippet; [key: string]: unknown } = $props();
-</script>
-
-<DrawerPrimitive.Description class={cn("text-muted-foreground text-sm", className)} {...restProps}>
-  {@render children?.()}
-</DrawerPrimitive.Description>

package/src/components/ui/drawer/drawer-footer.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-  import { cn } from '../../../utils.js';
-  import type { Snippet } from 'svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
-</script>
-
-<div data-slot="drawer-footer" class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...restProps}>
-  {@render children?.()}
-</div>

package/src/components/ui/drawer/drawer-header.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-  import { cn } from '../../../utils.js';
-  import type { Snippet } from 'svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
-</script>
-
-<div data-slot="drawer-header" class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...restProps}>
-  {@render children?.()}
-</div>

package/src/components/ui/drawer/drawer-title.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
-  import { cn } from '../../../utils.js';
-  import type { Snippet } from 'svelte';
-
-  let { class: className, children, ...restProps }: { class?: string; children?: Snippet; [key: string]: unknown } = $props();
-</script>
-
-<DrawerPrimitive.Title class={cn("text-lg font-semibold leading-none tracking-tight", className)} {...restProps}>
-  {@render children?.()}
-</DrawerPrimitive.Title>

package/src/components/ui/drawer/drawer.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
-  import type { Snippet } from 'svelte';
-
-  let {
-    open = $bindable(false),
-    children,
-    ...restProps
-  }: {
-    open?: boolean;
-    children?: Snippet;
-    [key: string]: unknown;
-  } = $props();
-</script>
-
-<DrawerPrimitive.Root bind:open {...restProps}>
-  {@render children?.()}
-</DrawerPrimitive.Root>

package/src/components/ui/drawer/index.ts

@@ -1,6 +0,0 @@
-export { default as Root } from './drawer.svelte';
-export { default as Content } from './drawer-content.svelte';
-export { default as Header } from './drawer-header.svelte';
-export { default as Footer } from './drawer-footer.svelte';
-export { default as Title } from './drawer-title.svelte';
-export { default as Description } from './drawer-description.svelte';