@svadmin/ui 0.40.2 → 0.40.4

package/dist/components/AutoTable.svelte

@@ -429,6 +429,11 @@
   });
 
   const selectedCount = $derived(Object.keys(tableRowSelection.current).length);
+
+  function isColumnVisible(columnId: string): boolean {
+    return tableColumnVisibility.current[columnId] !== false;
+  }
+
   const tableView = $derived.by(() => {
     void tableSorting.current;
     void tableColumnVisibility.current;
@@ -696,8 +701,9 @@
         <Table.Root>
           <Table.Header>
             {#each tableView.headerGroups as headerGroup, _i (_i)}
+              {@const visibleHeaders = headerGroup.headers.filter((header: Header<TableFeatures, BaseRecord, unknown>) => isColumnVisible(header.column.id))}
               <DraggableHeader
-                columns={headerGroup.headers.map((header: Header<TableFeatures, BaseRecord, unknown>) => ({ id: header.column.id, header }))}
+                columns={visibleHeaders.map((header) => ({ id: header.column.id, header }))}
                 resourceName={resourceName}
                 onReorder={(newOrder) => columnOrderAtom.set(newOrder.map((column) => column.id))}
               >
@@ -744,11 +750,12 @@
             {#each tableView.rows as row, _i (_i)}
               {@const record = row.original}
               {@const id = record[primaryKey] as string | number}
+              {@const visibleCells = row_getVisibleCells(row).filter((cell) => isColumnVisible(cell.column.id))}
               <ContextMenu.Root>
                 <ContextMenu.Trigger>
                   {#snippet child({ props })}
                     <Table.Row {...props} class="transition-all duration-300 border-b border-border/10 {row_getIsSelected(row) ? 'bg-primary/5' : 'hover:bg-muted/20'}">
-                      {#each row_getVisibleCells(row) as cell, _i (_i)}
+                      {#each visibleCells as cell, _i (_i)}
                         <Table.Cell>
                           {#if cell.column.id === '_select'}
                             <Checkbox
@@ -840,7 +847,7 @@
               </ContextMenu.Root>
               {#if expandedRowRender && rowIsExpanded(row.id)}
                 <Table.Row class="bg-muted/10 border-b border-border/10 transition-all">
-                  <Table.Cell colspan={row_getVisibleCells(row).length}>
+                  <Table.Cell colspan={visibleCells.length}>
                     {@render expandedRowRender({ record })}
                   </Table.Cell>
                 </Table.Row>
@@ -913,7 +920,7 @@
               </div>
               <!-- Card fields -->
               <div class="space-y-2">
-                {#each visibleFields.slice(0, 6) as field, _i (_i)}
+                {#each visibleFields.filter((field) => isColumnVisible(field.key)).slice(0, 6) as field, _i (_i)}
                   {@const value = record[field.key]}
                   <div class="flex items-start justify-between gap-4">
                     <span class="text-xs font-medium text-muted-foreground shrink-0">{field.label}</span>
@@ -959,11 +966,11 @@
 
   <!-- Pagination (shadcn) -->
   {#if totalPages > 0}
-  <div class="flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-muted-foreground">
-    <div class="flex items-center gap-2">
-      <span>{i18n.t('common.total', { total: query.data?.total ?? 0 })}</span>
+  <div class="flex flex-col sm:flex-row items-center justify-between gap-3 px-1 py-2 text-sm text-muted-foreground">
+    <div class="flex shrink-0 items-center gap-3 leading-8">
+      <span class="shrink-0 whitespace-nowrap">{i18n.t('common.total', { total: query.data?.total ?? 0 })}</span>
       <select
-        class="h-8 w-[70px] px-1 py-1 flex items-center justify-between rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        class="h-8 w-[70px] shrink-0 px-1 py-1 flex items-center justify-between rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
         value={String(pagination.pageSize ?? 10)}
         onchange={(e) => {
           const size = Number((e.target as HTMLSelectElement).value);

package/dist/components/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { captureAdminContext, getResources, canAccessAsync } from '@svadmin/core';
+  import { captureAdminContext, getResources, canAccessAsync, getAccessControlProvider } from '@svadmin/core';
   import type { Identity, MenuItem } from '@svadmin/core';
   import { getPath } from '../router-state.svelte.js';
   import { useTranslation } from '@svadmin/core/i18n';
@@ -103,6 +103,62 @@
     items: NavItem[];
   }
 
+  async function hasCustomMenuAccess(menuItem: MenuItem): Promise<boolean> {
+    const resource = menuItem.meta?.resource;
+    if (!resource) return true;
+
+    try {
+      const { can } = await canAccessAsync(resource, menuItem.meta?.action ?? 'list');
+      return can;
+    } catch {
+      // Permission-provider failures must not expose protected navigation.
+      return false;
+    }
+  }
+
+  function isVisibleCustomMenuItem(candidate: MenuItem | null): candidate is MenuItem {
+    return candidate !== null;
+  }
+
+  function snapshotCustomMenuItems(menuItems: MenuItem[]): MenuItem[] {
+    return menuItems.map((menuItem) => ({
+      ...menuItem,
+      meta: menuItem.meta ? { ...menuItem.meta } : undefined,
+      children: menuItem.children ? snapshotCustomMenuItems(menuItem.children) : undefined,
+    }));
+  }
+
+  async function visibleCustomMenuItem(menuItem: MenuItem): Promise<MenuItem | null> {
+    if (menuItem.meta?.hidden || !await hasCustomMenuAccess(menuItem)) return null;
+    if (!menuItem.children) return menuItem;
+
+    const children = await visibleCustomMenuItems(menuItem.children);
+    if (children.length === 0 && !menuItem.href) return null;
+    return { ...menuItem, children };
+  }
+
+  async function visibleCustomMenuItems(menuItems: MenuItem[]): Promise<MenuItem[]> {
+    const filteredItems = await Promise.all(menuItems.map(visibleCustomMenuItem));
+    return filteredItems.filter(isVisibleCustomMenuItem);
+  }
+
+  let customMenuItems = $state.raw<MenuItem[]>([]);
+
+  $effect(() => {
+    const configuredMenu = menu?.length ? snapshotCustomMenuItems(menu) : [];
+    // Provider swaps must invalidate checks nested below public menu groups.
+    getAccessControlProvider();
+    customMenuItems = [];
+    if (configuredMenu.length === 0) return;
+
+    let cancelled = false;
+    void visibleCustomMenuItems(configuredMenu).then((visibleItems) => {
+      if (!cancelled) customMenuItems = visibleItems;
+    });
+
+    return () => { cancelled = true; };
+  });
+
   let navItems = $state.raw<NavItem[]>([]);
 
   $effect(() => {
@@ -239,7 +295,7 @@
   <nav aria-label="Main menu" class="pb-4" class:px-[10px]={!collapsed} class:px-2={collapsed}>
     {#if menu && menu.length > 0}
       <div class="space-y-[2px]">
-        {#each menu as item, _i (_i)}
+        {#each customMenuItems as item (item.name)}
           <SidebarItem {item} currentPath={path} {collapsed} depth={0} />
         {/each}
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.40.2",
+  "version": "0.40.4",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,11 +39,11 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.34.1",
+    "@svadmin/core": "^0.34.2",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
-    "isomorphic-dompurify": "^3.20.0",
-    "marked": "^18.0.7",
+    "isomorphic-dompurify": "^3.22.0",
+    "marked": "^18.0.9",
     "marked-highlight": "^2.2.4",
     "svelte": "^5.56.8"
   },
@@ -75,15 +75,15 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@lucide/svelte": "^1.28.0",
-    "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/svelte-table": "9.0.0",
-    "@tanstack/table-core": "9.0.0",
+    "@lucide/svelte": "^1.30.0",
+    "@tanstack/svelte-store": "^0.12.1",
+    "@tanstack/svelte-table": "9.1.2",
+    "@tanstack/table-core": "9.1.2",
     "bits-ui": "^2.18.1",
     "clsx": "^2.1.1",
     "svelte-sonner": "^1.1.1",
     "tailwind-merge": "^3.6.0",
-    "tailwind-variants": "^3.3.0"
+    "tailwind-variants": "^3.3.1"
   },
   "license": "MIT",
   "author": "zuohuadong",
@@ -97,12 +97,12 @@
     "url": "https://github.com/zuohuadong/svadmin/issues"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.11.1",
-    "@sveltejs/vite-plugin-svelte": "^7.2.0",
+    "@happy-dom/global-registrator": "^20.11.2",
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/svelte": "^5.4.2",
-    "@testing-library/user-event": "^14.6.1",
-    "happy-dom": "^20.11.1",
+    "@testing-library/user-event": "^14.6.3",
+    "happy-dom": "^20.11.2",
     "vitest": "^4.1.10"
   },
   "scripts": {