@svadmin/ui 0.88.1 → 0.92.0

package/dist/components/TaskQueueDrawer.svelte

@@ -18,8 +18,10 @@
   import * as Card from './ui/card/index.js';
   import TaskList from './TaskList.svelte';
   import TaskDetails from './TaskDetails.svelte';
+  import DataState from './content/DataState.svelte';
   import {
     isTaskActive,
+    formatTaskDate,
     resolveTaskCreatedAt,
     resolveTaskMessage,
     resolveTaskTitle,
@@ -57,6 +59,9 @@
   let mounted = true;
   onDestroy(() => { mounted = false; submitAttempt = null; });
   const activeTaskProvider = $derived(taskProvider ?? context.taskProvider);
+  const canListTasks = $derived(typeof activeTaskProvider?.list === 'function');
+  const canListDlq = $derived(typeof activeTaskProvider?.listDlq === 'function');
+  const canListCurrentTab = $derived(activeTab === 'dlq' ? canListDlq : canListTasks);
   const taskScope = $derived({
     provider: activeTaskProvider,
     tenant: context.tenantCacheKey?.__svadminTenant,
@@ -99,12 +104,13 @@
   const resolvedTitle = $derived(title ?? i18n.t('task.drawerTitle'));
 
   const taskQuery = useTaskList(definedReactiveOptions({
+    errorNotification: false,
     get taskProvider() {
       return activeTaskProvider;
     },
     get queryOptions() {
       return {
-        enabled: !!activeTaskProvider,
+        enabled: canListTasks,
         refetchInterval: refreshInterval,
         refetchIntervalInBackground: true,
       };
@@ -112,6 +118,7 @@
   }));
 
   const dlqQuery = useTaskList(definedReactiveOptions({
+    errorNotification: false,
     get dlq() {
       return true;
     },
@@ -120,7 +127,7 @@
     },
     get queryOptions() {
       return {
-        enabled: !!activeTaskProvider && !!activeTaskProvider?.listDlq,
+        enabled: canListDlq,
         refetchInterval: refreshInterval,
         refetchIntervalInBackground: true,
       };
@@ -129,8 +136,9 @@
 
   const submitTask = useSubmitTask();
 
-  const allTasks = $derived(taskQuery.data?.data ?? []);
-  const dlqTasks = $derived(dlqQuery.data?.data ?? []);
+  const allTasks = $derived(canListTasks ? taskQuery.data?.data ?? [] : []);
+  const dlqTasks = $derived(canListDlq ? dlqQuery.data?.data ?? [] : []);
+  const currentQuery = $derived(activeTab === 'dlq' ? dlqQuery : taskQuery);
 
   const availableStatuses = $derived.by(() => {
     const source = activeTab === 'dlq' ? dlqTasks : allTasks;
@@ -189,12 +197,6 @@
     }
   });
 
-  function formatTime(value: unknown) {
-    if (typeof value !== 'string' || !value) return '—';
-    const date = new Date(value);
-    if (Number.isNaN(date.getTime())) return '—';
-    return date.toLocaleString();
-  }
 
   function resetSubmitForm() {
     submitTaskName = '';
@@ -247,23 +249,24 @@
       submitOpen = false;
       resetSubmitForm();
       await Promise.allSettled([
-        taskQuery.refetch?.(),
-        dlqQuery.refetch?.(),
+        ...(canListTasks ? [taskQuery.refetch?.()] : []),
+        ...(canListDlq ? [dlqQuery.refetch?.()] : []),
       ]);
-    } catch (error) {
+    } catch {
       if (!current()) return;
-      submitError = error instanceof Error ? error.message : i18n.t('task.submitFailed');
+      submitError = i18n.t('task.submitFailed');
     } finally {
       if (submitAttempt === attempt) submitAttempt = null;
     }
   }
 
   async function refreshCurrentTab() {
+    if (!canListCurrentTab || currentQuery.isFetching) return;
     if (activeTab === 'dlq') {
-      await dlqQuery.refetch?.();
+      await dlqQuery.refetch?.({ cancelRefetch: false });
       return;
     }
-    await taskQuery.refetch?.();
+    await taskQuery.refetch?.({ cancelRefetch: false });
   }
 </script>
 
@@ -298,9 +301,11 @@
         <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
           <ListTodo class="svadmin-u-cd0d9c512cdc svadmin-u-72470489ff4e svadmin-u-bfa603190748" />
           <h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91">{resolvedTitle}</h2>
-          <Badge variant="secondary" class="svadmin-u-359090c2d529">{i18n.t('task.activeCount', { count: runningCount })}</Badge>
+          {#if canListTasks}
+            <Badge variant="secondary" class="svadmin-u-359090c2d529">{i18n.t('task.activeCount', { count: runningCount })}</Badge>
+          {/if}
           {#if allTasks[0] && resolveTaskCreatedAt(allTasks[0])}
-            <span class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{i18n.t('task.lastQueuedAt', { time: formatTime(resolveTaskCreatedAt(allTasks[0])) })}</span>
+            <span class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{i18n.t('task.lastQueuedAt', { time: formatTaskDate(resolveTaskCreatedAt(allTasks[0]), i18n.locale) })}</span>
           {/if}
         </div>
       </div>
@@ -319,16 +324,20 @@
                     <Tabs.List class="svadmin-u-52083e7da442 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-b00f43c30c2b svadmin-u-eb6a3cef9686">
                       <Tabs.Trigger value="tasks" active={activeTab === 'tasks'} onclick={() => activeTab = 'tasks'}>
                         {i18n.t('task.tabTasks')}
-                        <Badge variant="outline" class="svadmin-u-f58b02572ab2 svadmin-u-1dc571a3609f">{taskQuery.data?.total ?? allTasks.length}</Badge>
+                        {#if canListTasks}
+                          <Badge variant="outline" class="svadmin-u-f58b02572ab2 svadmin-u-1dc571a3609f">{taskQuery.data?.total ?? allTasks.length}</Badge>
+                        {/if}
                       </Tabs.Trigger>
                       <Tabs.Trigger value="dlq" active={activeTab === 'dlq'} onclick={() => activeTab = 'dlq'}>
                         {i18n.t('task.tabDlq')}
-                        <Badge variant="outline" class="svadmin-u-f58b02572ab2 svadmin-u-1dc571a3609f">{dlqQuery.data?.total ?? dlqTasks.length}</Badge>
+                        {#if canListDlq}
+                          <Badge variant="outline" class="svadmin-u-f58b02572ab2 svadmin-u-1dc571a3609f">{dlqQuery.data?.total ?? dlqTasks.length}</Badge>
+                        {/if}
                       </Tabs.Trigger>
                     </Tabs.List>
                   </Tabs.Root>
                   <div class="svadmin-u-fb56d9cff341 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
-                    <Button variant="outline" size="sm" onclick={() => void refreshCurrentTab()}>
+                    <Button variant="outline" size="sm" disabled={!canListCurrentTab || currentQuery.isFetching} onclick={() => void refreshCurrentTab()}>
                       <RefreshCw class="svadmin-u-82cc6c6581cd svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
                       {i18n.t('common.refresh')}
                     </Button>
@@ -345,16 +354,17 @@
                     <Input
                       class="svadmin-u-9e83b2412bc9"
                       placeholder={i18n.t('task.searchPlaceholder')}
+                      disabled={!canListCurrentTab}
                       bind:value={searchQuery}
                     />
                   </div>
-                  <Select bind:value={statusFilter} aria-label={i18n.t('task.statusFilterLabel')}>
+                  <Select bind:value={statusFilter} disabled={!canListCurrentTab} aria-label={i18n.t('task.statusFilterLabel')}>
                     <option value="all">{i18n.t('task.statusAll')}</option>
                     {#each availableStatuses as status, _i (_i)}
                       <option value={status}>{status}</option>
                     {/each}
                   </Select>
-                  <Select bind:value={autoRefresh} aria-label={i18n.t('task.autoRefreshLabel')}>
+                  <Select bind:value={autoRefresh} disabled={!canListCurrentTab} aria-label={i18n.t('task.autoRefreshLabel')}>
                     <option value="0">{i18n.t('task.refreshOff')}</option>
                     <option value="5000">{i18n.t('task.refresh5s')}</option>
                     <option value="15000">{i18n.t('task.refresh15s')}</option>
@@ -400,22 +410,32 @@
                 </Card.Root>
               {/if}
 
-              <TaskList
-                tasks={filteredTasks}
-                taskProvider={activeTaskProvider}
-                dlq={activeTab === 'dlq'}
-                title={activeTab === 'dlq' ? i18n.t('task.dlqTitle') : i18n.t('task.listTitle')}
-                emptyText={activeTab === 'dlq' ? i18n.t('task.noDlq') : i18n.t('task.noTasks')}
-                onSelect={(task) => {
-                  selectedTaskId = task.id;
-                }}
-              />
+              {#if !canListCurrentTab}
+                <DataState state="error" title={i18n.t('common.configRequired')}
+                  description={i18n.t(activeTab === 'dlq' ? 'task.dlqUnavailable' : 'task.listUnavailable')} />
+              {:else if currentQuery.isError}
+                <DataState state="error" description={i18n.t('task.fetchListFailed')}
+                  {...definedOptions({ retry: currentQuery.isFetching ? undefined : () => { void refreshCurrentTab(); } })} />
+              {:else if currentQuery.isLoading}
+                <DataState state="loading" loadingLabel={i18n.t('task.loadingList')} />
+              {:else}
+                <TaskList
+                  tasks={filteredTasks}
+                  taskProvider={activeTaskProvider}
+                  dlq={activeTab === 'dlq'}
+                  title={activeTab === 'dlq' ? i18n.t('task.dlqTitle') : i18n.t('task.listTitle')}
+                  emptyText={activeTab === 'dlq' ? i18n.t('task.noDlq') : i18n.t('task.noTasks')}
+                  onSelect={(task) => {
+                    selectedTaskId = task.id;
+                  }}
+                />
+              {/if}
             </div>
           </div>
 
           <div class="svadmin-u-fb7302e5364d svadmin-u-73fc3fb18ceb svadmin-u-8a25a995eb8e">
             <div class="svadmin-u-8e63407b5ceb">
-              {#if selectedTaskId}
+              {#if canListCurrentTab && selectedTaskId && !currentQuery.isError && !currentQuery.isLoading}
                 <TaskDetails
                   taskId={selectedTaskId}
                   taskProvider={activeTaskProvider}

package/dist/components/Toast.svelte

@@ -16,14 +16,25 @@
   import UndoableNotification from './UndoableNotification.svelte';
 
   let host = $state<ToastHostRegistration | null>(null);
+  let sheetOpen = $state(false);
   const isActiveHost = $derived(host?.isActive() ?? false);
   const theme = $derived(getResolvedTheme() === 'dark' ? 'dark' : 'light');
+  const toastPosition = $derived<'top-right' | 'bottom-left'>(sheetOpen ? 'bottom-left' : 'top-right');
 
   onMount(() => {
+    const syncSheetState = (): void => {
+      sheetOpen = document.querySelector('.svadmin-sheet-panel') !== null;
+    };
+    syncSheetState();
+    const sheetObserver = new MutationObserver(syncSheetState);
+    sheetObserver.observe(document.body, { childList: true, subtree: true });
     const registration = registerToastHost();
     host = registration;
 
-    return () => registration.unregister();
+    return () => {
+      sheetObserver.disconnect();
+      registration.unregister();
+    };
   });
 
   $effect(() => {
@@ -55,7 +66,7 @@
   });
 
   const toasterProps = $derived({
-    position: "top-right",
+    position: toastPosition,
     richColors: true,
     closeButton: true,
     expand: false,

package/dist/components/Transfer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { SvelteSet } from 'svelte/reactivity';
   import type { Snippet } from 'svelte';
+  import { untrack } from 'svelte';
   import { ChevronRight, ChevronLeft, ChevronsRight, ChevronsLeft, Search } from '@lucide/svelte';
   import { cn } from '../utils.js';
   import { Checkbox } from './ui/checkbox/index.js';
@@ -18,6 +19,10 @@
   const i18n = useTranslation();
 
   interface Props {
+    id?: string;
+    labelledby?: string;
+    describedby?: string;
+    invalid?: boolean;
     dataSource?: TransferItem[];
     targetKeys?: (string | number)[];
     titles?: [string, string];
@@ -33,6 +38,10 @@
   }
 
   let {
+    id,
+    labelledby,
+    describedby,
+    invalid = false,
     dataSource = [],
     targetKeys = $bindable([]),
     titles = ['源列表', '目标列表'],
@@ -45,6 +54,7 @@
 
   let leftSearch = $state('');
   let rightSearch = $state('');
+  let observedSearchable = $state(untrack(() => searchable));
 
   const leftSelected = new SvelteSet<string | number>();
   const rightSelected = new SvelteSet<string | number>();
@@ -59,6 +69,28 @@
     dataSource.filter((item) => targetKeySet.has(item.key))
   );
 
+  $effect.pre(() => {
+    const leftKeys = new Set(
+      leftDataSource.filter((item) => !item.disabled).map((item) => item.key)
+    );
+    const rightKeys = new Set(
+      rightDataSource.filter((item) => !item.disabled).map((item) => item.key)
+    );
+    for (const key of leftSelected) {
+      if (!leftKeys.has(key)) leftSelected.delete(key);
+    }
+    for (const key of rightSelected) {
+      if (!rightKeys.has(key)) rightSelected.delete(key);
+    }
+  });
+
+  $effect.pre(() => {
+    if (observedSearchable === searchable) return;
+    observedSearchable = searchable;
+    leftSearch = '';
+    rightSearch = '';
+  });
+
   const filteredLeft = $derived(
     leftDataSource.filter((item) => {
       if (!leftSearch.trim()) return true;
@@ -76,16 +108,19 @@
   );
 
   function toggleLeftSelect(key: string | number) {
+    if (disabled || !leftDataSource.some(item => item.key === key && !item.disabled)) return;
     if (leftSelected.has(key)) leftSelected.delete(key);
     else leftSelected.add(key);
   }
 
   function toggleRightSelect(key: string | number) {
+    if (disabled || !rightDataSource.some(item => item.key === key && !item.disabled)) return;
     if (rightSelected.has(key)) rightSelected.delete(key);
     else rightSelected.add(key);
   }
 
   function toggleAllLeft() {
+    if (disabled) return;
     const selectable = filteredLeft.filter((i) => !i.disabled);
     const allSelected = selectable.length > 0 && selectable.every((i) => leftSelected.has(i.key));
     if (allSelected) {
@@ -96,6 +131,7 @@
   }
 
   function toggleAllRight() {
+    if (disabled) return;
     const selectable = filteredRight.filter((i) => !i.disabled);
     const allSelected = selectable.length > 0 && selectable.every((i) => rightSelected.has(i.key));
     if (allSelected) {
@@ -154,13 +190,24 @@
   }
 </script>
 
-<div class={cn('svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-020ba687fa12 svadmin-u-3960ffc248d9 svadmin-u-1004c0c3954c svadmin-u-6da6a3c3f741', className)} data-testid="transfer">
+<div
+  id={id}
+  role="group"
+  aria-labelledby={labelledby}
+  aria-label={labelledby ? undefined : titles.join(' / ')}
+  aria-describedby={describedby}
+  aria-disabled={disabled || undefined}
+  data-invalid={invalid || undefined}
+  class={cn('svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-020ba687fa12 svadmin-u-3960ffc248d9 svadmin-u-1004c0c3954c svadmin-u-6da6a3c3f741', className)}
+  data-testid="transfer"
+>
   <!-- Left Panel -->
   <div class="svadmin-u-36e579c0b41c svadmin-u-6da6a3c3f741 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-cef5b893cf23 svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-ff4a6777f1bc">
     <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-65fdbade2025 svadmin-u-c9ed8c5f79ae svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-2859c861d7de">
       <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
         <Checkbox
-          checked={filteredLeft.length > 0 && filteredLeft.filter((i) => !i.disabled).every((i) => leftSelected.has(i.key))}
+          aria-label={titles[0]}
+          checked={filteredLeft.some((i) => !i.disabled) && filteredLeft.filter((i) => !i.disabled).every((i) => leftSelected.has(i.key))}
           disabled={disabled || filteredLeft.filter((i) => !i.disabled).length === 0}
           onCheckedChange={toggleAllLeft}
         />
@@ -177,6 +224,7 @@
           <Search class="svadmin-u-da4dbfbc4fdc svadmin-u-ecfeb742a3f3 svadmin-u-7a470f4c9b28 svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-bfa603190748" />
           <Input
             type="text"
+            aria-label={titles[0]}
             bind:value={leftSearch}
             placeholder={i18n.t('common.search', undefined) ?? '搜索...'}
             class="svadmin-u-ed8a5df7b2fb svadmin-u-e4af885410fe svadmin-u-aa2c13a5e1b4 svadmin-u-359090c2d529"
@@ -191,7 +239,8 @@
         {@const selected = leftSelected.has(item.key)}
         <div
           role="button"
-          tabindex="0"
+          tabindex={disabled || item.disabled ? -1 : 0}
+          aria-disabled={disabled || item.disabled || undefined}
           class={cn(
             'svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-421ac2be5045 svadmin-u-0b91436debbd svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-ceb69a6b0e5f svadmin-u-34516836730d svadmin-u-7f6912283f11',
             selected ? 'svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1 svadmin-u-2689f3958069' : 'svadmin-u-39f703dbe296 svadmin-u-d4108abe6359',
@@ -206,8 +255,13 @@
           }}
         >
           <Checkbox
+            aria-label={item.title}
             checked={selected}
             disabled={disabled || item.disabled}
+            onclick={(event) => event.stopPropagation()}
+            onkeydown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();
+            }}
             onCheckedChange={() => toggleLeftSelect(item.key)}
           />
           <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c">
@@ -281,7 +335,8 @@
     <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-65fdbade2025 svadmin-u-c9ed8c5f79ae svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-2859c861d7de">
       <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
         <Checkbox
-          checked={filteredRight.length > 0 && filteredRight.filter((i) => !i.disabled).every((i) => rightSelected.has(i.key))}
+          aria-label={titles[1]}
+          checked={filteredRight.some((i) => !i.disabled) && filteredRight.filter((i) => !i.disabled).every((i) => rightSelected.has(i.key))}
           disabled={disabled || filteredRight.filter((i) => !i.disabled).length === 0}
           onCheckedChange={toggleAllRight}
         />
@@ -298,6 +353,7 @@
           <Search class="svadmin-u-da4dbfbc4fdc svadmin-u-ecfeb742a3f3 svadmin-u-7a470f4c9b28 svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-bfa603190748" />
           <Input
             type="text"
+            aria-label={titles[1]}
             bind:value={rightSearch}
             placeholder={i18n.t('common.search', undefined) ?? '搜索...'}
             class="svadmin-u-ed8a5df7b2fb svadmin-u-e4af885410fe svadmin-u-aa2c13a5e1b4 svadmin-u-359090c2d529"
@@ -312,7 +368,8 @@
         {@const selected = rightSelected.has(item.key)}
         <div
           role="button"
-          tabindex="0"
+          tabindex={disabled || item.disabled ? -1 : 0}
+          aria-disabled={disabled || item.disabled || undefined}
           class={cn(
             'svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-421ac2be5045 svadmin-u-0b91436debbd svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-ceb69a6b0e5f svadmin-u-34516836730d svadmin-u-7f6912283f11',
             selected ? 'svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1 svadmin-u-2689f3958069' : 'svadmin-u-39f703dbe296 svadmin-u-d4108abe6359',
@@ -327,8 +384,13 @@
           }}
         >
           <Checkbox
+            aria-label={item.title}
             checked={selected}
             disabled={disabled || item.disabled}
+            onclick={(event) => event.stopPropagation()}
+            onkeydown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') event.stopPropagation();
+            }}
             onCheckedChange={() => toggleRightSelect(item.key)}
           />
           <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c">

package/dist/components/Transfer.svelte.d.ts

@@ -6,6 +6,10 @@ export interface TransferItem {
     disabled?: boolean;
 }
 interface Props {
+    id?: string;
+    labelledby?: string;
+    describedby?: string;
+    invalid?: boolean;
     dataSource?: TransferItem[];
     targetKeys?: (string | number)[];
     titles?: [string, string];