@svadmin/ui 0.88.0 → 0.91.0

package/dist/components/KanbanBoard.svelte

@@ -4,6 +4,7 @@
   import { Plus, GripVertical, RotateCw, ArrowUp, ArrowDown } from '@lucide/svelte';
   import { cn } from '../utils.js';
   import { useTranslation } from '@svadmin/core/i18n';
+  import { snapshotPlainData } from '@svadmin/core/schema';
   import { onDestroy } from 'svelte';
 
   export interface KanbanCard {
@@ -27,9 +28,9 @@
     columns: KanbanColumn[];
     cards?: KanbanCard[];
     allowAddCard?: boolean;
-    oncardmove?: (cardId: string, targetColumnId: string, targetIndex: number) => void | Promise<void>;
+    oncardmove?: ((cardId: string, targetColumnId: string, targetIndex: number) => KanbanCard | undefined | Promise<KanbanCard | undefined>) | undefined;
     canMoveCard?: (card: KanbanCard, targetColumnId: string) => boolean;
-    oncardmoveerror?: (error: unknown) => void;
+    oncardmoveerror?: ((error: unknown) => void) | undefined;
     oncardclick?: (card: KanbanCard) => void;
     oncardadd?: (columnId: string, title: string) => KanbanCard | Promise<KanbanCard>;
     scopeKey?: string | number;
@@ -62,6 +63,7 @@
   let newCardTitle = $state('');
   let movingCardId = $state<string | null>(null);
   let moveError = $state<string | null>(null);
+  let failedMove = $state<{ cardId: string; targetColumnId: string; targetIndex: number } | null>(null);
   let adding = $state(false);
   let mounted = true;
   const i18n = useTranslation();
@@ -100,11 +102,26 @@
       && (card.dueDate === undefined || typeof card.dueDate === 'string')
       && (card.priority === undefined || ['low', 'medium', 'high', 'urgent'].includes(card.priority));
   }
+  function decodeMoveReceipt(receipt: unknown): KanbanCard | undefined {
+    if (receipt === undefined) return undefined;
+    if (receipt === null || typeof receipt !== 'object' || Array.isArray(receipt)) {
+      throw new Error('Invalid move receipt');
+    }
+    // 将已提交卡片与回调持有方的可变对象图分离，避免别名修改已提交状态。
+    const snapshot = snapshotPlainData(receipt);
+    if (snapshot === null || typeof snapshot !== 'object' || Array.isArray(snapshot)) {
+      throw new Error('Invalid move receipt');
+    }
+    return snapshot as unknown as KanbanCard;
+  }
   function moveAllowed(card: KanbanCard, targetColumn: string): boolean {
     if (!oncardmove || loading || displayError || busy || !columns.some(column => column.id === targetColumn)) return false;
     try { return canMoveCard === undefined || canMoveCard(card, targetColumn) === true; }
     catch { return false; }
   }
+  function canDragCard(card: KanbanCard): boolean {
+    return !!oncardmove && !loading && !displayError && !busy && columns.some(column => moveAllowed(card, column.id));
+  }
   function active(origin: typeof scope): boolean {
     return mounted && origin === scope;
   }
@@ -114,11 +131,13 @@
     addingColumnId = null;
     newCardTitle = '';
     moveError = null;
+    failedMove = null;
   });
   onDestroy(() => { mounted = false; });
 
   function handleDragStart(e: DragEvent, cardId: string) {
-    if (!oncardmove || busy || loading || displayError) { e.preventDefault(); return; }
+    const card = cards.find((c) => c.id === cardId);
+    if (!card || !canDragCard(card)) { e.preventDefault(); return; }
     draggedCardId = cardId;
     if (e.dataTransfer) {
       e.dataTransfer.effectAllowed = 'move';
@@ -151,12 +170,23 @@
     adding = false;
     movingCardId = card.id;
     moveError = null;
+    failedMove = null;
     try {
-      await origin.oncardmove?.(card.id, targetColId, index);
-      if (active(origin) && operation === current) cards = optimistic;
+      const receipt = await origin.oncardmove?.(card.id, targetColId, index);
+      if (!active(origin) || operation !== current) return;
+      let confirmed = optimistic;
+      if (receipt !== undefined) {
+        const authoritative = decodeMoveReceipt(receipt);
+        if (!authoritative || !validCard(authoritative) || authoritative.id !== card.id || authoritative.columnId !== targetColId) {
+          throw new Error('Invalid move receipt');
+        }
+        confirmed = optimistic.map(item => item.id === card.id ? authoritative : item);
+      }
+      cards = confirmed;
     } catch (cause) {
       if (active(origin) && operation === current) {
         moveError = i18n.t('kanban.moveFailed');
+        failedMove = { cardId: card.id, targetColumnId: targetColId, targetIndex: index };
         try { oncardmoveerror?.(cause); } catch { /* 错误观察者不能再次触发写入。 */ }
       }
     } finally {
@@ -164,6 +194,12 @@
     }
   }
 
+  function retryFailedMove() {
+    const failed = failedMove;
+    if (!failed || busy) return;
+    void moveCard(failed.cardId, failed.targetColumnId, failed.targetIndex);
+  }
+
   function handleDrop(targetColId: string, index?: number) {
     const id = draggedCardId;
     draggedCardId = null;
@@ -208,7 +244,7 @@
   }
 </script>
 
-{#if moveError}<div role="alert">{moveError}</div>{/if}
+{#if moveError}<div role="alert"><span>{moveError}</span>{#if failedMove}<Button type="button" variant="ghost" size="sm" disabled={busy} onclick={retryFailedMove}>{i18n.t('common.retry')}</Button>{/if}</div>{/if}
 <div role="region" aria-label={ariaLabel ?? i18n.t('kanban.label')} aria-busy={loading || busy}
   class={cn('svadmin-u-60fbb7713999 svadmin-u-0c3bc98565dd svadmin-u-1384f66f41d0 svadmin-u-9fcd8a13827e svadmin-u-359090c2d529 svadmin-u-7f6912283f11', className)}>
   {#if loading}
@@ -265,7 +301,7 @@
             role="group"
             aria-label={card.title}
             aria-busy={busy && movingCardId === card.id}
-            draggable={!!oncardmove && !busy}
+            draggable={canDragCard(card)}
             class={cn(
               'group svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-77a2a20e90d4 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-05faf5c801ff svadmin-u-cd0ad9a56558 svadmin-u-eb6e8b881acd svadmin-u-cef5b893cf23 svadmin-u-0fe7d7d814d0 svadmin-u-8d08385288a6 svadmin-u-d9bff91ef7ee svadmin-u-512e82e6a68f svadmin-u-ab1dd417ce7d svadmin-u-2eba0d65d059',
               draggedCardId === card.id ? 'svadmin-u-2a2db4667b27 svadmin-u-16b1efa5875e svadmin-u-2691847b25ed' : ''

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

@@ -20,9 +20,9 @@ interface Props {
     columns: KanbanColumn[];
     cards?: KanbanCard[];
     allowAddCard?: boolean;
-    oncardmove?: (cardId: string, targetColumnId: string, targetIndex: number) => void | Promise<void>;
+    oncardmove?: ((cardId: string, targetColumnId: string, targetIndex: number) => KanbanCard | undefined | Promise<KanbanCard | undefined>) | undefined;
     canMoveCard?: (card: KanbanCard, targetColumnId: string) => boolean;
-    oncardmoveerror?: (error: unknown) => void;
+    oncardmoveerror?: ((error: unknown) => void) | undefined;
     oncardclick?: (card: KanbanCard) => void;
     oncardadd?: (columnId: string, title: string) => KanbanCard | Promise<KanbanCard>;
     scopeKey?: string | number;

package/dist/components/Layout.svelte

@@ -125,7 +125,7 @@
 
   function handleGlobalKeydown(e: KeyboardEvent) {
     if (!ownsLayoutEvent(e)) return;
-    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+    if ((e.ctrlKey || e.metaKey) && (e.key.toLowerCase() === 'k' || e.code === 'KeyK')) {
       e.preventDefault();
       commandOpen = true;
     }

package/dist/components/LoginPage.svelte

@@ -69,7 +69,7 @@
     if (result.success) {
       onSuccess?.();
     } else {
-      error = result.error?.message ?? i18n.t('common.loginFailed');
+      error = i18n.t('common.loginFailed');
     }
   }
 </script>

package/dist/components/MetricStrip.svelte

@@ -16,6 +16,7 @@
     };
     icon?: import('svelte').Component<{ class?: string }>;
     href?: string;
+    onActivate?: () => void;
     trend?: {
       value: number;
       label?: string;
@@ -52,10 +53,14 @@
     {@render children()}
   {:else}
     {#each items as item, index (item.id || index)}
-      {@const isInteractive = Boolean(item.href)}
+      {@const hasActivation = Boolean(item.onActivate)}
+      {@const isInteractive = Boolean(item.href) || hasActivation}
       <svelte:element
-        this={isInteractive ? 'a' : 'div'}
-        href={item.href}
+        this={hasActivation ? 'button' : item.href ? 'a' : 'div'}
+        type={hasActivation ? 'button' : undefined}
+        href={hasActivation ? undefined : item.href}
+        onclick={item.onActivate}
+        role={hasActivation ? 'button' : item.href ? 'link' : undefined}
         data-interactive={isInteractive ? 'true' : undefined}
         data-tone={item.tone || 'default'}
         class={cn('svadmin-metric-item', item.class)}

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

@@ -13,6 +13,7 @@ export interface MetricStripItem {
         class?: string;
     }>;
     href?: string;
+    onActivate?: () => void;
     trend?: {
         value: number;
         label?: string;

package/dist/components/ModalForm.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+  import { onDestroy, type Snippet } from 'svelte';
   import * as Dialog from './ui/dialog/index.js';
   import { Button } from './ui/button/index.js';
   import { Loader2 } from '@lucide/svelte';
   import { cn } from '../utils.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import FeedbackNotice from './content/FeedbackNotice.svelte';
 
   interface Props {
     open?: boolean;
@@ -17,8 +19,8 @@
     widthClass?: string;
     isSubmitting?: boolean;
     disabled?: boolean;
-    onsubmit?: () => void | Promise<void>;
-    oncancel?: () => void;
+    onsubmit?: (() => void | Promise<void>) | undefined;
+    oncancel?: (() => void) | undefined;
     class?: string;
     triggerSnippet?: Snippet;
     children?: Snippet;
@@ -43,26 +45,96 @@
     children,
   }: Props = $props();
 
+  const i18n = useTranslation();
   let loading = $state(false);
+  let submitError = $state('');
+  let round = 0;
+  let nextRequestId = 0;
+  let activeRequest: { id: number; round: number; onsubmit?: Props['onsubmit'] } | undefined;
+  let formElement: HTMLFormElement | undefined;
+  let destroyed = false;
+  const busy = $derived(loading || isSubmitting);
+
+  let lastOpen = open;
+  let lastOnsubmit: Props['onsubmit'];
+  let hasLastOnsubmit = false;
+  function resetRequestState() {
+    round += 1;
+    activeRequest = undefined;
+    loading = false;
+    submitError = '';
+  }
+
+  $effect(() => {
+    if (open === lastOpen) return;
+    lastOpen = open;
+    resetRequestState();
+  });
+
+  $effect(() => {
+    const handler = onsubmit;
+    if (!hasLastOnsubmit) {
+      hasLastOnsubmit = true;
+      lastOnsubmit = handler;
+      return;
+    }
+    if (handler === lastOnsubmit) return;
+    lastOnsubmit = handler;
+    resetRequestState();
+  });
+
+  onDestroy(() => {
+    destroyed = true;
+    formElement = undefined;
+    resetRequestState();
+  });
+
+  function isCurrentRequest(token: { id: number; round: number; onsubmit?: Props['onsubmit'] }) {
+    return !destroyed && activeRequest === token && token.round === round && token.onsubmit === onsubmit;
+  }
 
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault();
+    if (!open || destroyed || e.currentTarget !== formElement || disabled || busy) return;
+    const token = { id: ++nextRequestId, round, onsubmit };
+    activeRequest = token;
     loading = true;
+    submitError = '';
     try {
       await onsubmit?.();
+      if (!isCurrentRequest(token)) return;
       open = false;
+    } catch {
+      if (!isCurrentRequest(token)) return;
+      submitError = i18n.t('common.operationFailed');
     } finally {
-      loading = false;
+      if (activeRequest === token) {
+        activeRequest = undefined;
+        loading = false;
+      }
     }
   }
 
   function handleCancel() {
+    if (busy) return;
     oncancel?.();
     open = false;
   }
+
+  function handleOpenChange(next: boolean) {
+    if (next) {
+      open = true;
+      return;
+    }
+    if (busy) {
+      open = true;
+      return;
+    }
+    open = false;
+  }
 </script>
 
-<Dialog.Root bind:open>
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
   {#if triggerSnippet}
     <Dialog.Trigger>
       {#snippet child({ props })}
@@ -82,7 +154,7 @@
   {/if}
 
   <Dialog.Content class={cn(widthClass, 'svadmin-u-b4168890eac6 svadmin-u-92bf82f493b1', className)}>
-    <form onsubmit={handleSubmit} class="svadmin-u-3e7ce58d64fa">
+    <form bind:this={formElement} onsubmit={handleSubmit} aria-busy={busy} class="svadmin-u-3e7ce58d64fa">
       <Dialog.Header>
         <Dialog.Title>{title}</Dialog.Title>
         {#if description}
@@ -90,6 +162,10 @@
         {/if}
       </Dialog.Header>
 
+      {#if submitError}
+        <FeedbackNotice tone="danger" message={submitError} />
+      {/if}
+
       <div class="svadmin-u-03b4dd7f172b svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359">
         {#if children}
           {@render children()}
@@ -101,7 +177,7 @@
           type="button"
           variant="outline"
           size="sm"
-          disabled={loading || isSubmitting}
+          disabled={busy}
           onclick={handleCancel}
         >
           {cancelText}
@@ -109,10 +185,10 @@
         <Button
           type="submit"
           size="sm"
-          disabled={loading || isSubmitting || disabled}
+          disabled={busy || disabled}
           class="svadmin-u-58284b4ea568 svadmin-u-2e7a6d18a20d"
         >
-          {#if loading || isSubmitting}
+          {#if busy}
             <Loader2 class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" />
           {/if}
           {submitText}

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 interface Props {
     open?: boolean;
     title: string;
@@ -11,8 +11,8 @@ interface Props {
     widthClass?: string;
     isSubmitting?: boolean;
     disabled?: boolean;
-    onsubmit?: () => void | Promise<void>;
-    oncancel?: () => void;
+    onsubmit?: (() => void | Promise<void>) | undefined;
+    oncancel?: (() => void) | undefined;
     class?: string;
     triggerSnippet?: Snippet;
     children?: Snippet;

package/dist/components/MoneyInput.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import NumericInput from './NumericInput.svelte';
+  import type { NumericInputLocale } from './numeric-format.js';
 
   interface Props {
     value?: number | null;
+    locale?: NumericInputLocale | undefined;
     currency?: string;
     min?: number;
     max?: number;
@@ -14,12 +16,12 @@
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     class?: string;
     onchange?: (value: number | null) => void;
   }
 
-  let props: Props = $props();
+  let { value = $bindable(null), ...props }: Props = $props();
 </script>
 
-<NumericInput {...props} mode="currency" />
+<NumericInput {...props} bind:value mode="currency" />

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

@@ -1,5 +1,7 @@
+import type { NumericInputLocale } from './numeric-format.js';
 interface Props {
     value?: number | null;
+    locale?: NumericInputLocale | undefined;
     currency?: string;
     min?: number;
     max?: number;
@@ -11,10 +13,10 @@ interface Props {
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     class?: string;
     onchange?: (value: number | null) => void;
 }
-declare const MoneyInput: import("svelte").Component<Props, {}, "">;
+declare const MoneyInput: import("svelte").Component<Props, {}, "value">;
 type MoneyInput = ReturnType<typeof MoneyInput>;
 export default MoneyInput;