@svadmin/ui 0.58.0 → 0.59.0

package/dist/components/AICommandBar.svelte

@@ -111,6 +111,7 @@
 
 <Dialog.Dialog bind:open onOpenChange={(v: boolean) => !v && close()}>
   <Dialog.DialogContent class="overflow-hidden p-0 sm:max-w-[600px] border-none shadow-2xl">
+    <Dialog.DialogTitle class="sr-only">{i18n.t('common.actions')}</Dialog.DialogTitle>
     <Command.Root
       shouldFilter={!aiMode}
       class="flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-command-group-heading]]:text-muted-foreground [&_[data-command-group-heading]]:px-2 [&_[data-command-group-heading]]:py-1.5 [&_[data-command-group-heading]]:text-xs [&_[data-command-group-heading]]:font-semibold [&_[data-command-group-heading]]:uppercase [&_[data-command-group-heading]]:tracking-wider"

package/dist/components/AutoTable.svelte

@@ -76,6 +76,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 * as Select from './ui/select/index.js';
   import {
     Plus, Pencil, Trash2,
     Search, Download, ChevronDown, ChevronUp, SlidersHorizontal, Filter as FilterIcon,
@@ -87,6 +88,7 @@
   import TooltipButton from './TooltipButton.svelte';
   import InlineEdit from './InlineEdit.svelte';
   import DraggableHeader from './DraggableHeader.svelte';
+  import DataState from './content/DataState.svelte';
   import type { Snippet } from 'svelte';
 
   const i18n = useTranslation();
@@ -1172,17 +1174,17 @@
                 <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
+                    <Select.Root
                       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"
+                      class="h-9 text-sm"
                       value={filterValues[field.key] ?? ""}
-                      onchange={(e) => setFilterValue(field.key, e.currentTarget.value)}
+                      onchange={(e) => setFilterValue(field.key, (e.currentTarget as HTMLSelectElement).value)}
                     >
                       <option value="">{i18n.t("common.all")}</option>
                       {#each field.options as opt, _i (_i)}
                         <option value={opt.value}>{opt.label}</option>
                       {/each}
-                    </select>
+                    </Select.Root>
                   {:else}
                     <Input
                       id="filter-{field.key}"
@@ -1275,12 +1277,12 @@
             </div>
             <div class="space-y-1">
               <label class="text-xs text-muted-foreground" for="saved-list-view">{i18n.t("common.currentView")}</label>
-              <select
+              <Select.Root
                 id="saved-list-view"
-                class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                class="h-9 w-full"
                 value={activeSavedViewId ?? ""}
                 onchange={(event) => {
-                  const id = event.currentTarget.value;
+                  const id = (event.currentTarget as HTMLSelectElement).value;
                   const view = savedViews.find((candidate) => candidate.id === id);
                   if (view) applySavedView(view);
                   else {
@@ -1293,7 +1295,7 @@
                 {#each savedViews as view (view.id)}
                   <option value={view.id}>{view.name}</option>
                 {/each}
-              </select>
+              </Select.Root>
             </div>
             <div class="flex gap-2">
               <Input
@@ -1409,9 +1411,11 @@
         {/each}
       </div>
     {:else if query.error}
-      <div class="flex h-64 items-center justify-center text-destructive text-sm">
-        {i18n.t('common.loadFailed', { message: (query.error as Error).message })}
-      </div>
+      <DataState
+        state="error"
+        description={i18n.t('common.loadFailed', { message: (query.error as Error).message })}
+        retry={() => listResult.refetch()}
+      />
     {:else}
       <div in:fade={{ duration: 150 }}>
         <!-- Desktop Table (hidden on mobile) -->
@@ -1475,7 +1479,7 @@
             {/each}
           </Table.Header>
           <Table.Body>
-            {#each tableView.rows as row, _i (_i)}
+            {#each tableView.rows as row (row.id)}
               {@const record = row.original}
               {@const id = record[primaryKey] as string | number}
               {@const visibleCells = row_getVisibleCells(row).filter((cell) => isColumnVisible(cell.column.id))}
@@ -1702,7 +1706,7 @@
               </div>
               <!-- Card fields -->
               <div class="space-y-2">
-                {#each visibleFields.filter((field) => isColumnVisible(field.key)).slice(0, 6) as field, _i (_i)}
+                {#each visibleFields.filter((field) => isColumnVisible(field.key)).slice(0, 6) as field (field.key)}
                   {@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>
@@ -1737,7 +1741,7 @@
               {#if emptyState}
                 {@render emptyState()}
               {:else}
-                {i18n.t('common.noData')}
+                <DataState state="empty" class="border-0 bg-transparent px-2 py-4" />
               {/if}
             </div>
           {/each}
@@ -1751,11 +1755,12 @@
   <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] 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"
+      <Select.Root
+        aria-label={i18n.t('common.perPage')}
+        class="h-8 w-[78px] shrink-0"
         value={String(pagination.pageSize ?? 10)}
         onchange={(e) => {
-          const size = Number((e.target as HTMLSelectElement).value);
+          const size = Number((e.currentTarget as HTMLSelectElement).value);
           if (!isNaN(size)) {
             markSavedViewDirty();
             pagination = { ...pagination, pageSize: size, current: 1 };
@@ -1766,7 +1771,7 @@
         <option value="20">20</option>
         <option value="50">50</option>
         <option value="100">100</option>
-      </select>
+      </Select.Root>
     </div>
     <PaginationUI.Root>
       <PaginationUI.Content>

package/dist/components/CommandPalette.svelte

@@ -45,6 +45,7 @@
 
 <Dialog.Dialog bind:open>
   <Dialog.DialogContent class="overflow-hidden p-0 sm:max-w-[560px]">
+    <Dialog.DialogTitle class="sr-only">{i18n.t('common.search')}</Dialog.DialogTitle>
     <Command.Root class="flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-command-group-heading]]:text-muted-foreground [&_[data-command-group-heading]]:px-2 [&_[data-command-group-heading]]:py-1.5 [&_[data-command-group-heading]]:text-xs [&_[data-command-group-heading]]:font-semibold [&_[data-command-group-heading]]:uppercase [&_[data-command-group-heading]]:tracking-wider">
       <div class="flex items-center border-b px-3" data-cmdk-input-wrapper="">
         <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />

package/dist/components/EmptyState.svelte

@@ -17,8 +17,10 @@
 </script>
 
 <div
-  class="flex flex-col items-center justify-center rounded-lg bg-card/50 px-8 py-10 text-center shadow-sm"
-  in:scale={{ start: 0.95, duration: 250, opacity: 0 }}
+  class="flex flex-col items-center justify-center rounded-lg bg-card/50 px-8 py-10 text-center shadow-xs"
+  in:scale={{ start: 0.95, duration: 200, opacity: 0 }}
+  role="status"
+  aria-live="polite"
 >
   <div class="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-4">
     <PackageOpen class="h-10 w-10 text-muted-foreground" />

package/dist/components/Layout.svelte

@@ -170,7 +170,14 @@
     </div>
 
     <!-- Mobile sidebar via Sheet -->
-    <Sheet.Root bind:open={mobileMenuOpen} side="left">
+    <Sheet.Root
+      bind:open={mobileMenuOpen}
+      side="left"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={`${layoutScope}-mobile-navigation-title`}
+    >
+      <Sheet.Title id={`${layoutScope}-mobile-navigation-title`} class="sr-only">{title}</Sheet.Title>
       <div class="md:hidden">
         <Sidebar collapsed={false} {identity} {title} {menu} {routeMode} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
       </div>

package/dist/components/StatsCard.svelte

@@ -60,11 +60,13 @@
         <p class="text-xl font-mono font-semibold text-foreground tracking-tight">{value}</p>
         {#if trend}
           <span
-            class="text-xs font-medium {trend.value >= 0 ? 'text-success' : 'text-destructive'}"
+            class="text-xs font-medium inline-flex items-center gap-0.5 {trend.value >= 0 ? 'text-success' : 'text-destructive'}"
+            aria-label="{trend.value >= 0 ? '上升' : '下降'} {Math.abs(trend.value)}%"
           >
-            {trend.value >= 0 ? '↑' : '↓'}{Math.abs(trend.value)}%
+            <span aria-hidden="true">{trend.value >= 0 ? '↑' : '↓'}</span>
+            <span>{Math.abs(trend.value)}%</span>
             {#if trend.label}
-              <span class="text-muted-foreground">{trend.label}</span>
+              <span class="text-muted-foreground ml-0.5">{trend.label}</span>
             {/if}
           </span>
         {/if}

package/dist/components/TaskQueueDrawer.svelte

@@ -227,10 +227,19 @@
   {/if}
 </Button>
 
-<Sheet.Root bind:open side="right" class="w-full max-w-6xl border-l border-border bg-card p-0" onClose={() => open = false}>
+<Sheet.Root
+  bind:open
+  side="right"
+  class="w-full max-w-6xl border-l border-border bg-card p-0"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="svadmin-task-queue-title"
+  onClose={() => open = false}
+>
   <Sheet.Content class="h-full gap-0 p-0">
     <div class="flex h-full flex-col">
       <div class="border-b border-border bg-muted/30 px-4 py-3">
+        <Sheet.Title id="svadmin-task-queue-title" class="sr-only">{resolvedTitle}</Sheet.Title>
         <div class="flex flex-wrap items-center gap-2">
           <ListTodo class="h-5 w-5 text-muted-foreground" />
           <h2 class="text-sm font-semibold">{resolvedTitle}</h2>

package/dist/components/ui/input/input.svelte

@@ -32,7 +32,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1.5 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent p-1 pr-3 text-xs md:text-sm text-muted-foreground transition-colors file:mr-3 file:inline-flex file:h-7 file:cursor-pointer file:items-center file:rounded-md file:border file:border-border/60 file:bg-muted file:px-2.5 file:text-xs file:font-medium file:text-foreground file:transition-colors hover:file:bg-muted/80 focus-visible:ring-3 aria-invalid:ring-3 placeholder:text-muted-foreground w-full min-w-0 outline-none cursor-pointer disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		type="file"
@@ -44,7 +44,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1.5 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1.5 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		{type}

package/package.json

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