@svadmin/ui 0.33.1 → 0.34.1

package/dist/components/TaskQueueDrawer.test.svelte.js

@@ -0,0 +1,143 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import TaskQueueDrawer from './TaskQueueDrawer.svelte';
+const taskFixtures = [
+    {
+        id: 'task-1',
+        title: 'Generate poster',
+        status: 'running',
+        message: 'Rendering hero artwork',
+        createdAt: '2026-04-19T10:00:00.000Z',
+        updatedAt: '2026-04-19T10:05:00.000Z',
+        progress: 42,
+    },
+    {
+        id: 'task-2',
+        title: 'Send email batch',
+        status: 'queued',
+        message: 'Waiting for worker',
+        createdAt: '2026-04-19T10:10:00.000Z',
+        updatedAt: '2026-04-19T10:12:00.000Z',
+    },
+];
+const dlqFixtures = [
+    {
+        id: 'task-dlq-1',
+        title: 'Nightly sync',
+        status: 'failed',
+        message: 'Remote API timeout',
+        createdAt: '2026-04-18T23:00:00.000Z',
+        updatedAt: '2026-04-18T23:05:00.000Z',
+        error: { message: 'Remote API timeout' },
+    },
+];
+const mockTaskProvider = {
+    submit: vi.fn(async () => ({
+        id: 'submitted-image.generate',
+        wait: async () => ({
+            id: 'submitted-image.generate',
+            title: 'image.generate',
+            status: 'queued',
+            createdAt: '2026-04-19T11:00:00.000Z',
+            updatedAt: '2026-04-19T11:00:00.000Z',
+        }),
+    })),
+    get: vi.fn(async (taskId) => {
+        return [...taskFixtures, ...dlqFixtures].find((task) => task.id === taskId) ?? taskFixtures[0];
+    }),
+    list: vi.fn(async () => ({ data: taskFixtures, total: taskFixtures.length })),
+    listDlq: vi.fn(async () => ({ data: dlqFixtures, total: dlqFixtures.length })),
+    retry: vi.fn(async () => undefined),
+    cancel: vi.fn(async () => undefined),
+};
+const refetchTasks = vi.fn(async () => ({ data: { data: taskFixtures, total: taskFixtures.length } }));
+const refetchDlq = vi.fn(async () => ({ data: { data: dlqFixtures, total: dlqFixtures.length } }));
+const mutateAsync = vi.fn(async (params) => ({
+    id: `submitted-${params.taskName}`,
+    wait: async () => ({
+        id: `submitted-${params.taskName}`,
+        title: params.taskName,
+        status: 'queued',
+    }),
+}));
+vi.mock('@svadmin/core', () => ({
+    getTaskProvider: () => mockTaskProvider,
+    useTaskList: ({ dlq }) => ({
+        data: dlq
+            ? { data: dlqFixtures, total: dlqFixtures.length }
+            : { data: taskFixtures, total: taskFixtures.length },
+        isLoading: false,
+        refetch: dlq ? refetchDlq : refetchTasks,
+    }),
+    useTask: ({ taskId }) => ({
+        data: [...taskFixtures, ...dlqFixtures].find((task) => task.id === taskId) ?? taskFixtures[0],
+        isLoading: false,
+    }),
+    useSubmitTask: () => ({
+        mutation: {
+            mutateAsync,
+            isPending: false,
+        },
+    }),
+}));
+vi.mock('@tanstack/svelte-query', () => ({
+    useQueryClient: () => ({
+        invalidateQueries: vi.fn(async () => undefined),
+    }),
+}));
+describe('TaskQueueDrawer', () => {
+    beforeEach(() => {
+        refetchTasks.mockClear();
+        refetchDlq.mockClear();
+        mutateAsync.mockClear();
+        mockTaskProvider.submit.mockClear();
+        mockTaskProvider.get.mockClear();
+        mockTaskProvider.list.mockClear();
+        mockTaskProvider.listDlq.mockClear();
+        mockTaskProvider.retry.mockClear();
+        mockTaskProvider.cancel.mockClear();
+    });
+    it('supports tab switching, filtering, and detail selection', async () => {
+        render(TaskQueueDrawer, { open: true, taskProvider: mockTaskProvider });
+        expect(screen.getByText('Task Center')).toBeTruthy();
+        expect(screen.getAllByText('Generate poster').length).toBeGreaterThan(0);
+        expect(screen.getAllByText('Rendering hero artwork').length).toBeGreaterThan(0);
+        const searchInput = screen.getByPlaceholderText('Filter tasks by name, ID, status, or message...');
+        await fireEvent.input(searchInput, { target: { value: 'email' } });
+        await waitFor(() => {
+            expect(screen.queryAllByText('Generate poster').length).toBeLessThan(2);
+        });
+        expect(screen.getByText('Send email batch')).toBeTruthy();
+        await fireEvent.input(searchInput, { target: { value: '' } });
+        await fireEvent.click(screen.getByRole('tab', { name: /DLQ/i }));
+        expect(screen.getByText('Nightly sync')).toBeTruthy();
+        const dlqRow = screen.getByText('Nightly sync').closest('tr');
+        expect(dlqRow).toBeTruthy();
+        await fireEvent.click(dlqRow);
+        await waitFor(() => {
+            expect(screen.getAllByText('Remote API timeout').length).toBeGreaterThan(0);
+        });
+    });
+    it('submits a task from the inline form', async () => {
+        render(TaskQueueDrawer, { open: true, taskProvider: mockTaskProvider });
+        await fireEvent.click(screen.getAllByRole('button', { name: 'Submit Task' })[0]);
+        await fireEvent.input(screen.getByLabelText('Task name'), {
+            target: { value: 'image.generate' },
+        });
+        await fireEvent.input(screen.getByLabelText('Task payload (JSON)'), {
+            target: { value: '{"prompt":"poster"}' },
+        });
+        const submitButtons = screen.getAllByRole('button', { name: 'Submit Task' });
+        await fireEvent.click(submitButtons[submitButtons.length - 1]);
+        await waitFor(() => {
+            expect(mutateAsync).toHaveBeenCalledWith({
+                taskName: 'image.generate',
+                taskProvider: mockTaskProvider,
+                options: {
+                    body: { prompt: 'poster' },
+                    idempotencyKey: undefined,
+                },
+            });
+        });
+    });
+});

package/dist/components/TaskStatusBadge.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Clock3, Loader2, CheckCircle2, AlertTriangle, CircleDashed } from '@lucide/svelte';
+  import { Badge } from './ui/badge/index.js';
+
+  let {
+    status = 'pending',
+    showIcon = true,
+    class: className = '',
+  } = $props<{
+    status?: string;
+    showIcon?: boolean;
+    class?: string;
+  }>();
+
+  const normalizedStatus = $derived(String(status || 'pending').toLowerCase());
+
+  function translateStatus(value: string) {
+    const key = `task.status.${value}`;
+    const translated = t(key);
+    if (translated !== key) return translated;
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  }
+
+  const config = $derived.by(() => {
+    switch (normalizedStatus) {
+      case 'running':
+      case 'processing':
+        return {
+          label: translateStatus(normalizedStatus),
+          variant: 'default' as const,
+          icon: Loader2,
+          iconClass: 'animate-spin',
+        };
+      case 'completed':
+      case 'success':
+      case 'done':
+        return {
+          label: translateStatus(normalizedStatus),
+          variant: 'secondary' as const,
+          icon: CheckCircle2,
+          iconClass: 'text-green-600 dark:text-green-400',
+        };
+      case 'failed':
+      case 'error':
+        return {
+          label: translateStatus(normalizedStatus),
+          variant: 'destructive' as const,
+          icon: AlertTriangle,
+          iconClass: '',
+        };
+      case 'queued':
+        return {
+          label: t('task.status.queued'),
+          variant: 'outline' as const,
+          icon: CircleDashed,
+          iconClass: '',
+        };
+      case 'pending':
+      default:
+        return {
+          label: translateStatus(normalizedStatus),
+          variant: 'outline' as const,
+          icon: Clock3,
+          iconClass: '',
+        };
+    }
+  });
+
+  const Icon = $derived(config.icon);
+</script>
+
+<Badge variant={config.variant} class={`gap-1.5 ${className}`.trim()}>
+  {#if showIcon}
+    <Icon class={`h-3.5 w-3.5 ${config.iconClass}`.trim()} />
+  {/if}
+  <span>{config.label}</span>
+</Badge>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    status?: string;
+    showIcon?: boolean;
+    class?: string;
+};
+declare const TaskStatusBadge: import("svelte").Component<$$ComponentProps, {}, "">;
+type TaskStatusBadge = ReturnType<typeof TaskStatusBadge>;
+export default TaskStatusBadge;

package/dist/index.d.ts

@@ -66,7 +66,12 @@ export { default as AuditLogViewer } from "./components/AuditLogViewer.svelte";
 export { default as TenantSwitcher } from "./components/TenantSwitcher.svelte";
 export type { Tenant } from "./types.js";
 export { default as TaskQueueDrawer } from "./components/TaskQueueDrawer.svelte";
-export type { BackgroundTask, TaskStatus } from "./types.js";
+export { default as TaskStatusBadge } from "./components/TaskStatusBadge.svelte";
+export { default as TaskProgressBar } from "./components/TaskProgressBar.svelte";
+export { default as TaskList } from "./components/TaskList.svelte";
+export { default as TaskDetails } from "./components/TaskDetails.svelte";
+export { default as RetryTaskButton } from "./components/RetryTaskButton.svelte";
+export { default as CancelTaskButton } from "./components/CancelTaskButton.svelte";
 export { default as DraggableGrid } from "./components/DraggableGrid.svelte";
 export type { GridModule } from "./types.js";
 export { BarChart, LineChart, PieChart } from './components/charts/index.js';

package/dist/index.js

@@ -69,6 +69,12 @@ export { default as RolesSettings } from "./components/RolesSettings.svelte";
 export { default as AuditLogViewer } from "./components/AuditLogViewer.svelte";
 export { default as TenantSwitcher } from "./components/TenantSwitcher.svelte";
 export { default as TaskQueueDrawer } from "./components/TaskQueueDrawer.svelte";
+export { default as TaskStatusBadge } from "./components/TaskStatusBadge.svelte";
+export { default as TaskProgressBar } from "./components/TaskProgressBar.svelte";
+export { default as TaskList } from "./components/TaskList.svelte";
+export { default as TaskDetails } from "./components/TaskDetails.svelte";
+export { default as RetryTaskButton } from "./components/RetryTaskButton.svelte";
+export { default as CancelTaskButton } from "./components/CancelTaskButton.svelte";
 export { default as DraggableGrid } from "./components/DraggableGrid.svelte";
 // Dashboard Charts (zero-dependency SVG)
 export { BarChart, LineChart, PieChart } from './components/charts/index.js';

package/dist/types.d.ts

@@ -20,17 +20,6 @@ export interface Tenant {
     logo?: string;
     [key: string]: unknown;
 }
-export type TaskStatus = 'pending' | 'running' | 'completed' | 'failed';
-export interface BackgroundTask {
-    id: string;
-    title: string;
-    status: TaskStatus;
-    progress?: number;
-    message?: string;
-    createdAt: string | Date;
-    downloadUrl?: string;
-    [key: string]: unknown;
-}
 export interface GridModule {
     id: string;
     w: number;

package/package.json

@@ -1,33 +1,32 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.33.1",
+  "version": "0.34.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
-    "./src/app.css"
+    "./dist/app.css"
   ],
   "files": [
-    "dist",
-    "src/app.css"
+    "dist"
   ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./src/index.ts",
+      "svelte": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./app.css": {
-      "svelte": "./src/app.css",
-      "import": "./src/app.css",
-      "style": "./src/app.css",
-      "default": "./src/app.css"
+      "svelte": "./dist/app.css",
+      "import": "./dist/app.css",
+      "style": "./dist/app.css",
+      "default": "./dist/app.css"
     },
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.24.0",
+    "@svadmin/core": "^0.25.0",
     "@tanstack/svelte-query": "^6.0.0",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.7.1",
@@ -63,7 +62,7 @@
   },
   "dependencies": {
     "@lucide/svelte": "^1.7.0",
-    "@tanstack/svelte-table": "^9.0.0-alpha.32",
+    "@tanstack/svelte-table": "9.0.0-alpha.32",
     "bits-ui": "^2.17.1",
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.19",
@@ -82,8 +81,17 @@
   "bugs": {
     "url": "https://github.com/zuohuadong/svadmin/issues"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.9.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "happy-dom": "^20.9.0",
+    "vitest": "^4.1.4"
+  },
   "scripts": {
-    "build": "svelte-package -i src -o dist"
+    "build": "svelte-package -i src -o dist",
+    "test": "vitest run --config ./vitest.config.ts"
   }
 }