@svadmin/ui 0.22.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

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/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { getContext } from "svelte";
 
 	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		align?: "start" | "center" | "end";
@@ -13,8 +14,11 @@
 		children,
 		...restProps
 	}: Props = $props();
+
+	let isOpen = $derived(getContext<() => boolean>("svadmin-dropdown-open")?.() ?? true);
 </script>
 
+{#if isOpen}
 <div
 	bind:this={ref}
 	data-slot="dropdown-menu-content"
@@ -28,3 +32,4 @@
 >
 	{@render children?.()}
 </div>
+{/if}

package/src/components/ui/dropdown-menu/dropdown-menu.svelte

@@ -16,6 +16,8 @@
 		...restProps
 	}: Props = $props();
 
+	import { setContext } from "svelte";
+
 	function handleClickOutside(e: MouseEvent) {
 		if (ref && !ref.contains(e.target as Node)) {
 			open = false;
@@ -23,6 +25,8 @@
 		}
 	}
 
+	setContext("svadmin-dropdown-open", () => open);
+
 	$effect(() => {
 		if (open) {
 			document.addEventListener('click', handleClickOutside, true);