@svadmin/ui 0.24.0 → 0.25.0

package/package.json

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

package/src/components/AutoTable.svelte

@@ -28,7 +28,7 @@
   import * as DropdownMenu from './ui/dropdown-menu/index.js';
   import * as PaginationUI from './ui/pagination/index.js';
   import * as ContextMenu from './ui/context-menu/index.js';
-  import { Select } from './ui/select/index.js';
+  import { Pagination } from './ui/pagination/index.js';
   import {
     Plus, Pencil, Trash2,
     Search, Download, Upload, ChevronDown, ChevronUp, SlidersHorizontal, Filter as FilterIcon,
@@ -60,6 +60,8 @@
     pagination?: { current: number; pageSize: number };
     /** Externally controlled sorters */
     sorters?: Sort[];
+    /** Custom batch actions to render when rows are selected */
+    batchActions?: Snippet<[{ selectedIds: string[] }]>;
   }
 
   let {
@@ -71,6 +73,7 @@
     rowActions,
     emptyState,
     expandedRowRender,
+    batchActions,
     pagination: externalPagination,
     sorters: externalSorters,
   }: Props = $props();
@@ -353,10 +356,20 @@
         </Button>
       {/if}
       {#if selectedCount > 0 && canDelete}
-        <Button variant="destructive" size="sm" onclick={confirmBatchDelete}>
+        <Button
+          variant="destructive"
+          size="sm"
+          class="h-9 whitespace-nowrap"
+          onclick={confirmBatchDelete}
+        >
           <Trash2 class="h-4 w-4" data-icon="inline-start" /> {t('common.batchDelete', { count: selectedCount })}
         </Button>
       {/if}
+      
+      {#if selectedCount > 0 && batchActions}
+        {@render batchActions({ selectedIds: Object.keys(rowSelection) })}
+      {/if}
+
       <!-- Column Visibility Picker (DropdownMenu) -->
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
@@ -388,64 +401,80 @@
     </div>
   </div>
 
-  <!-- Search -->
-  {#if searchableFields.length > 0}
-    <div class="relative max-w-sm">
-      <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-      <Input
-        type="text"
-        bind:value={searchText}
-        oninput={() => { pagination = { ...pagination, current: 1 }; }}
-        placeholder={t('common.search')}
-        class="pl-10"
-      />
-    </div>
-  {/if}
+  <!-- Search and Advanced Filters -->
+  <div class="flex flex-wrap items-center gap-2">
+    {#if searchableFields.length > 0}
+      <div class="relative max-w-sm flex-1 sm:min-w-[250px]">
+        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          type="text"
+          bind:value={searchText}
+          oninput={() => { pagination = { ...pagination, current: 1 }; }}
+          placeholder={t('common.search')}
+          class="pl-10 h-9"
+        />
+      </div>
+    {/if}
 
-  <!-- Advanced Filters (Popover) -->
-  {#if filterableFields.length > 0}
-    <Popover.Root>
-      <Popover.Trigger>
-        {#snippet child({ props })}
-          <Button variant="outline" size="sm" {...props}>
-            <FilterIcon class="h-4 w-4" data-icon="inline-start" />
-            {t('common.filter')}
-            {#if activeFilterCount > 0}
-              <Badge variant="secondary" class="ml-1 h-5 min-w-5 px-1">{activeFilterCount}</Badge>
-            {/if}
-          </Button>
-        {/snippet}
-      </Popover.Trigger>
-      <Popover.Content class="w-80">
-        <div class="space-y-3">
-          <h4 class="font-medium text-sm">{t('common.filter')}</h4>
-          {#each filterableFields as field}
-            <div class="space-y-1">
-              <label class="text-xs text-muted-foreground" for="filter-{field.key}">{field.label}</label>
-              <Input
-                id="filter-{field.key}"
-                type="text"
-                bind:value={filterValues[field.key]}
-                placeholder={field.label}
-                class="h-8 text-sm"
-              />
-            </div>
-          {/each}
-          <div class="flex gap-2">
-            <Button size="sm" class="flex-1" onclick={() => { pagination = { ...pagination, current: 1 }; }}>
-              {t('common.confirm')}
-            </Button>
-            <Button variant="outline" size="sm" onclick={() => {
-              filterValues = {};
-              pagination = { ...pagination, current: 1 };
-            }}>
-              {t('common.reset')}
+    {#if filterableFields.length > 0}
+      <Popover.Root>
+        <Popover.Trigger>
+          {#snippet child({ props })}
+            <Button variant="outline" size="sm" class="h-9 px-3" {...props}>
+              <FilterIcon class="h-4 w-4" data-icon="inline-start" />
+              {t('common.filter')}
+              {#if activeFilterCount > 0}
+                <Badge variant="secondary" class="ml-1 h-5 min-w-5 px-1">{activeFilterCount}</Badge>
+              {/if}
             </Button>
+          {/snippet}
+        </Popover.Trigger>
+        <Popover.Content class="w-80">
+          <div class="space-y-3">
+            <h4 class="font-medium text-sm">{t('common.filter')}</h4>
+            {#each filterableFields as field}
+              <div class="space-y-1">
+                <label class="text-xs text-muted-foreground" for="filter-{field.key}">{field.label}</label>
+                {#if field.type === 'select' && field.options}
+                  <select
+                    id="filter-{field.key}"
+                    class="h-9 text-sm w-full font-normal flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 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={filterValues[field.key] ?? ''}
+                    onchange={(e) => filterValues[field.key] = (e.currentTarget as HTMLSelectElement).value}
+                  >
+                    <option value="">全部</option>
+                    {#each field.options as opt}
+                      <option value={opt.value}>{opt.label}</option>
+                    {/each}
+                  </select>
+                {:else}
+                  <Input
+                    id="filter-{field.key}"
+                    type="text"
+                    value={filterValues[field.key] ?? ''}
+                    oninput={(e) => filterValues[field.key] = (e.currentTarget as HTMLInputElement).value}
+                    placeholder={field.label}
+                    class="h-9 text-sm"
+                  />
+                {/if}
+              </div>
+            {/each}
+            <div class="flex gap-2 pt-2">
+              <Button size="sm" class="flex-1" onclick={() => { pagination = { ...pagination, current: 1 }; }}>
+                {t('common.confirm')}
+              </Button>
+              <Button variant="outline" size="sm" onclick={() => {
+                filterValues = {};
+                pagination = { ...pagination, current: 1 };
+              }}>
+                {t('common.reset')}
+              </Button>
+            </div>
           </div>
-        </div>
-      </Popover.Content>
-    </Popover.Root>
-  {/if}
+        </Popover.Content>
+      </Popover.Root>
+    {/if}
+  </div>
 
   <!-- Table (TanStack-powered) -->
   <div class="rounded-lg bg-card shadow-sm ring-1 ring-border/10 overflow-hidden" role="region" aria-label="{resource.label} {t('common.list')}">
@@ -741,18 +770,21 @@
   <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>{t('common.total', { total: query.data?.total ?? 0 })}</span>
-      <Select
-        class="hidden sm:inline-block h-8 w-auto text-xs"
+      <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"
         value={String(pagination.pageSize ?? 10)}
-        onchange={(e: Event) => {
+        onchange={(e) => {
           const size = Number((e.target as HTMLSelectElement).value);
-          pagination = { ...pagination, pageSize: size, current: 1 };
+          if (!isNaN(size)) {
+            pagination = { ...pagination, pageSize: size, current: 1 };
+          }
         }}
       >
-        {#each [10, 20, 50, 100] as size}
-          <option value={size}>{size} / {t('common.perPage')}</option>
-        {/each}
-      </Select>
+        <option value="10">10</option>
+        <option value="20">20</option>
+        <option value="50">50</option>
+        <option value="100">100</option>
+      </select>
     </div>
     <PaginationUI.Root>
       <PaginationUI.Content>

package/src/components/Sidebar.svelte

@@ -14,7 +14,7 @@
   import { Avatar } from './ui/avatar/index.js';
   import {
     LayoutDashboard, FileText, Users, Settings, Home,
-    ChevronLeft, ChevronDown, LogOut, Sun, Moon, Palette
+    ChevronLeft, ChevronRight, ChevronDown, LogOut, Sun, Moon, Palette
   } from 'lucide-svelte';
 
   let { collapsed, identity, title, onToggle, onLogout, menu, routeMode = 'auto' }: {
@@ -181,7 +181,9 @@
         <ChevronLeft class="h-4 w-4" />
       </TooltipButton>
     {:else}
-      <div></div>
+      <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle} class="mx-auto mt-2 mb-2 block">
+        <ChevronRight class="h-4 w-4" />
+      </TooltipButton>
     {/if}
   </div>