@svadmin/ui 0.70.0 → 0.73.0

package/dist/components/DateRangeInput.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import DateTimeInput, { type DateTimeInputMode } from './DateTimeInput.svelte';
+  import { cn } from '../utils.js';
+  import { definedOptions } from '@svadmin/core/options';
+
+  export interface DateRangeInputValue {
+    start: string | null;
+    end: string | null;
+  }
+
+  interface Props {
+    value?: DateRangeInputValue | null;
+    mode?: DateTimeInputMode;
+    min?: string;
+    max?: string;
+    step?: number;
+    startId?: string;
+    endId?: string;
+    startName?: string;
+    endName?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: DateRangeInputValue) => void;
+  }
+
+  let {
+    value = $bindable({ start: null, end: null }),
+    mode = 'date',
+    min,
+    max,
+    step,
+    startId,
+    endId,
+    startName,
+    endName,
+    disabled = false,
+    required = false,
+    invalid = false,
+    describedby,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  function update(part: 'start' | 'end', next: string | null): void {
+    // null 范围首次编辑也必须返回两个明确的端点。
+    const result: DateRangeInputValue = { start: value?.start ?? null, end: value?.end ?? null, [part]: next };
+    value = result;
+    onchange?.(result);
+  }
+</script>
+
+<div class={cn('svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-421ac2be5045', className)} data-date-range-input>
+  <DateTimeInput
+    value={value?.start ?? null}
+    {mode}
+    {...definedOptions({ min, max, step, id: startId, name: startName, describedby })}
+    {disabled}
+    {required}
+    {invalid}
+    onchange={(next) => update('start', next)}
+  />
+  <span aria-hidden="true">至</span>
+  <DateTimeInput
+    value={value?.end ?? null}
+    {mode}
+    {...definedOptions({ min, max, step, id: endId, name: endName, describedby })}
+    {disabled}
+    {required}
+    {invalid}
+    onchange={(next) => update('end', next)}
+  />
+</div>

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

@@ -0,0 +1,25 @@
+import { type DateTimeInputMode } from './DateTimeInput.svelte';
+export interface DateRangeInputValue {
+    start: string | null;
+    end: string | null;
+}
+interface Props {
+    value?: DateRangeInputValue | null;
+    mode?: DateTimeInputMode;
+    min?: string;
+    max?: string;
+    step?: number;
+    startId?: string;
+    endId?: string;
+    startName?: string;
+    endName?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: DateRangeInputValue) => void;
+}
+declare const DateRangeInput: import("svelte").Component<Props, {}, "value">;
+type DateRangeInput = ReturnType<typeof DateRangeInput>;
+export default DateRangeInput;

package/dist/components/DateTimeInput.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { Input } from './ui/input/index.js';
+  import { cn } from '../utils.js';
+
+  export type DateTimeInputMode = 'date' | 'time' | 'datetime';
+
+  interface Props {
+    value?: string | null;
+    mode?: DateTimeInputMode;
+    min?: string;
+    max?: string;
+    step?: number;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: string | null) => void;
+  }
+
+  let {
+    value = $bindable(null),
+    mode = 'date',
+    min,
+    max,
+    step,
+    id,
+    name,
+    disabled = false,
+    required = false,
+    invalid = false,
+    describedby,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  const inputType = $derived(mode === 'datetime' ? 'datetime-local' : mode);
+
+  function handleInput(event: Event): void {
+    const input = event.currentTarget;
+    if (!(input instanceof HTMLInputElement)) return;
+    const next = input.value === '' ? null : input.value;
+    value = next;
+    onchange?.(next);
+  }
+</script>
+
+<div class={cn('svadmin-u-6da6a3c3f741', className)} data-date-time-input={mode}>
+  <Input
+    {id}
+    {name}
+    type={inputType}
+    value={value ?? ''}
+    {min}
+    {max}
+    {step}
+    {disabled}
+    {required}
+    aria-invalid={invalid || undefined}
+    aria-describedby={describedby}
+    oninput={handleInput}
+  />
+</div>

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

@@ -0,0 +1,19 @@
+export type DateTimeInputMode = 'date' | 'time' | 'datetime';
+interface Props {
+    value?: string | null;
+    mode?: DateTimeInputMode;
+    min?: string;
+    max?: string;
+    step?: number;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: string | null) => void;
+}
+declare const DateTimeInput: import("svelte").Component<Props, {}, "value">;
+type DateTimeInput = ReturnType<typeof DateTimeInput>;
+export default DateTimeInput;

package/dist/components/DetailDrawer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
   import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import { cn, type WithElementRef } from "../utils.js";
@@ -14,6 +15,7 @@
     side?: "left" | "right";
     width?: string;
     onClose?: () => void;
+    onCloseRequest?: (close: () => void) => void;
     children?: Snippet;
     footer?: Snippet;
     extra?: Snippet;
@@ -34,6 +36,7 @@
     descriptionId,
     closeLabel = "Close",
     onClose,
+    onCloseRequest,
     children,
     footer,
     extra,
@@ -51,6 +54,7 @@
   bind:open
   {side}
   onClose={handleClose}
+  {...definedOptions({ onCloseRequest })}
   {closeLabel}
   class={cn("svadmin-u-63a285be6490 svadmin-u-8a539c7fe216 svadmin-u-2cd02d11d1af", width, className)}
   role="dialog"

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

@@ -11,6 +11,7 @@ type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     side?: "left" | "right";
     width?: string;
     onClose?: () => void;
+    onCloseRequest?: (close: () => void) => void;
     children?: Snippet;
     footer?: Snippet;
     extra?: Snippet;

package/dist/components/DevTools.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { SvelteMap } from 'svelte/reactivity';
   import { fly } from 'svelte/transition';
   import { useQueryClient } from '@tanstack/svelte-query';
   import {
@@ -55,13 +56,10 @@
   let collapsed = $state(false);
   let cacheDiagnostics = $state.raw<CacheDiagnostics>(EMPTY_CACHE_DIAGNOSTICS);
   let safeQueryDiagnostics = $state.raw<SafeQueryDiagnostic[]>([]);
-  const queryTimings = new Map<string, { startedAt?: number; duration?: number }>();
+  const queryTimings = new SvelteMap<string, { startedAt?: number; duration?: number }>();
 
   function toggle() {
     visible = !visible;
-    if (visible) {
-      refreshCacheDiagnostics();
-    }
   }
 
   function handleKeydown(event: KeyboardEvent) {
@@ -109,20 +107,9 @@
     });
   }
 
-  let refreshScheduled = false;
-  function scheduleRefreshCacheDiagnostics() {
-    if (!visible || refreshScheduled) return;
-    refreshScheduled = true;
-    queueMicrotask(() => {
-      refreshScheduled = false;
-      if (visible) {
-        refreshCacheDiagnostics();
-      }
-    });
-  }
-
   onMount(() => {
     if (!isDev) return;
+    refreshCacheDiagnostics();
     const unsubscribeQueries = queryClient.getQueryCache().subscribe((event) => {
       // Observer events arrive in pairs during component rerenders. Refreshing diagnostics triggers another render,
       // so respond only to events that actually change cached content or request state.
@@ -139,9 +126,9 @@
           });
         }
       }
-      scheduleRefreshCacheDiagnostics();
+      refreshCacheDiagnostics();
     });
-    const unsubscribeMutations = queryClient.getMutationCache().subscribe(scheduleRefreshCacheDiagnostics);
+    const unsubscribeMutations = queryClient.getMutationCache().subscribe(refreshCacheDiagnostics);
     return () => {
       unsubscribeQueries();
       unsubscribeMutations();
@@ -213,7 +200,7 @@
       {
         name: 'Audit',
         configured: Boolean(audit),
-        capabilities: audit ? 'create, get, update' : 'not configured',
+        capabilities: audit ? 'create, get' : 'not configured',
       },
       {
         name: 'Notification',
@@ -254,8 +241,8 @@
   {#if visible}
     <div
       class="svadmin-u-7bc555991dba svadmin-u-189f036c335c svadmin-u-5a438c30beec svadmin-u-f50571addf44 svadmin-u-11863ecc32e7 svadmin-u-c69e21ff5804 svadmin-u-1301e5c1ce71 svadmin-u-ca6bcd4b6f3f svadmin-u-d5e98261a758 svadmin-u-cd0ad9a56558 svadmin-u-14e46609fd68 svadmin-u-1d5904e7e755 svadmin-u-2cd02d11d1af"
-      class:w-auto={collapsed}
-      class:min-w-[200px]={collapsed}
+      class:svadmin-devtools--collapsed-width={collapsed}
+      class:svadmin-devtools--collapsed-min-width={collapsed}
       transition:fly={{ y: 400, duration: 300 }}
     >
       <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-2ef11f1cb219 svadmin-u-65fdbade2025">

package/dist/components/DraggableGrid.svelte

@@ -53,6 +53,7 @@
 
     const newModules = [...modules];
     const [dragged] = newModules.splice(sourceIdx, 1);
+    if (dragged === undefined) return;
     newModules.splice(targetIdx, 0, dragged);
 
     modules = newModules;

package/dist/components/DraggableHeader.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="TColumn extends { id: string }">
   /**
    * DraggableHeader — Wraps table header cells with HTML5 Drag and Drop
    * to enable column reorder. The parent owns persistence and restoration.
@@ -12,11 +12,6 @@
    */
   import type { Snippet } from 'svelte';
 
-  interface Column {
-    id: string;
-    [key: string]: unknown;
-  }
-
   interface DragHeaderProps {
     draggable: true;
     ondragstart: (event: DragEvent) => void;
@@ -29,9 +24,9 @@
   }
 
   interface Props {
-    columns: Column[];
-    onReorder: (newOrder: Column[]) => void;
-    header: Snippet<[Column, number, DragHeaderProps]>;
+    columns: TColumn[];
+    onReorder: (newOrder: TColumn[]) => void;
+    header: Snippet<[TColumn, number, DragHeaderProps]>;
   }
 
   let { columns, onReorder, header }: Props = $props();
@@ -65,6 +60,7 @@
 
     const newColumns = [...columns];
     const [moved] = newColumns.splice(dragIndex, 1);
+    if (moved === undefined) return;
     newColumns.splice(index, 0, moved);
 
     onReorder(newColumns);

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

@@ -10,25 +10,50 @@
    *   </DraggableHeader>
    */
 import type { Snippet } from 'svelte';
-interface Column {
+declare function $$render<TColumn extends {
     id: string;
-    [key: string]: unknown;
-}
-interface DragHeaderProps {
-    draggable: true;
-    ondragstart: (event: DragEvent) => void;
-    ondragover: (event: DragEvent) => void;
-    ondrop: (event: DragEvent) => void;
-    ondragend: () => void;
-    'data-dragging': boolean;
-    'data-drop-target': boolean;
-    class: string;
+}>(): {
+    props: {
+        columns: TColumn[];
+        onReorder: (newOrder: TColumn[]) => void;
+        header: Snippet<[TColumn, number, {
+            draggable: true;
+            ondragstart: (event: DragEvent) => void;
+            ondragover: (event: DragEvent) => void;
+            ondrop: (event: DragEvent) => void;
+            ondragend: () => void;
+            'data-dragging': boolean;
+            'data-drop-target': boolean;
+            class: string;
+        }]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TColumn extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<TColumn>>['props'];
+    events(): ReturnType<typeof $$render<TColumn>>['events'];
+    slots(): ReturnType<typeof $$render<TColumn>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-interface Props {
-    columns: Column[];
-    onReorder: (newOrder: Column[]) => void;
-    header: Snippet<[Column, number, DragHeaderProps]>;
+interface $$IsomorphicComponent {
+    new <TColumn extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TColumn>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TColumn>['props']>, ReturnType<__sveltets_Render<TColumn>['events']>, ReturnType<__sveltets_Render<TColumn>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TColumn>['bindings']>;
+    } & ReturnType<__sveltets_Render<TColumn>['exports']>;
+    <TColumn extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<TColumn>['props']> & {}): ReturnType<__sveltets_Render<TColumn>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const DraggableHeader: import("svelte").Component<Props, {}, "">;
-type DraggableHeader = ReturnType<typeof DraggableHeader>;
+declare const DraggableHeader: $$IsomorphicComponent;
+type DraggableHeader<TColumn extends {
+    id: string;
+}> = InstanceType<typeof DraggableHeader<TColumn>>;
 export default DraggableHeader;

package/dist/components/DraggableRowTable.svelte

@@ -50,8 +50,8 @@
     }
 
     const nextItems = [...items];
-    const [movedItem] = nextItems.splice(draggedIndex, 1);
-    nextItems.splice(index, 0, movedItem);
+    const movedItems = nextItems.splice(draggedIndex, 1);
+    nextItems.splice(index, 0, ...movedItems);
 
     items = nextItems;
     onreorder?.(items);

package/dist/components/DynamicFormList.svelte

@@ -14,7 +14,8 @@
     addButtonLabel?: string;
     minItems?: number;
     maxItems?: number;
-    defaultItem?: T | (() => T);
+    defaultItem?: T;
+    createItem?: () => T;
     disabled?: boolean;
     emptyText?: string;
     onchange?: (items: T[]) => void;
@@ -39,6 +40,7 @@
     minItems = 0,
     maxItems = Infinity,
     defaultItem,
+    createItem,
     disabled = false,
     emptyText,
     onchange,
@@ -47,13 +49,13 @@
   }: Props = $props();
 
   function createNewItem(): T {
-    if (typeof defaultItem === 'function') {
-      return (defaultItem as () => T)();
+    if (createItem) {
+      return createItem();
     }
     if (defaultItem !== undefined) {
       return structuredClone(defaultItem);
     }
-    return {} as T;
+    throw new Error('DynamicFormList requires defaultItem or createItem when adding without a value');
   }
 
   export function add(customItem?: T): void {
@@ -64,7 +66,7 @@
   }
 
   export function remove(index: number): void {
-    if (disabled || items.length <= minItems || index < 0 || index >= items.length) return;
+    if (disabled || items.length <= minItems || !Number.isInteger(index) || index < 0 || index >= items.length) return;
     const next = [...items];
     next.splice(index, 1);
     items = next;
@@ -72,30 +74,28 @@
   }
 
   export function moveUp(index: number): void {
-    if (disabled || index <= 0 || index >= items.length) return;
+    if (disabled || !Number.isInteger(index) || index <= 0 || index >= items.length) return;
     const next = [...items];
-    const temp = next[index - 1];
-    next[index - 1] = next[index];
-    next[index] = temp;
+    const moved = next.splice(index, 1);
+    next.splice(index - 1, 0, ...moved);
     items = next;
     onchange?.(items);
   }
 
   export function moveDown(index: number): void {
-    if (disabled || index < 0 || index >= items.length - 1) return;
+    if (disabled || !Number.isInteger(index) || index < 0 || index >= items.length - 1) return;
     const next = [...items];
-    const temp = next[index + 1];
-    next[index + 1] = next[index];
-    next[index] = temp;
+    const moved = next.splice(index, 1);
+    next.splice(index + 1, 0, ...moved);
     items = next;
     onchange?.(items);
   }
 
   export function duplicate(index: number): void {
-    if (disabled || items.length >= maxItems || index < 0 || index >= items.length) return;
+    if (disabled || items.length >= maxItems || !Number.isInteger(index) || index < 0 || index >= items.length) return;
     const next = [...items];
-    const cloned = structuredClone(next[index]);
-    next.splice(index + 1, 0, cloned);
+    const cloned = structuredClone(next.slice(index, index + 1));
+    next.splice(index + 1, 0, ...cloned);
     items = next;
     onchange?.(items);
   }
@@ -204,7 +204,7 @@
       variant="outline"
       size="sm"
       class="svadmin-u-6da6a3c3f741 svadmin-u-58284b4ea568 svadmin-u-a29b7a649c77"
-      {disabled}
+      disabled={disabled || (defaultItem === undefined && createItem === undefined)}
       onclick={() => add()}
     >
       <Plus class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />

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

@@ -7,7 +7,8 @@ declare function $$render<T = Record<string, unknown>>(): {
         addButtonLabel?: string;
         minItems?: number;
         maxItems?: number;
-        defaultItem?: T | (() => T);
+        defaultItem?: T;
+        createItem?: () => T;
         disabled?: boolean;
         emptyText?: string;
         onchange?: (items: T[]) => void;

package/dist/components/EditPage.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
+  import { definedOptions } from '@svadmin/core/options';
+
   import { getResource, useNavigation } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
 
@@ -14,6 +17,7 @@
 
   interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     id: string | number;
     title?: string;
     density?: 'compact' | 'comfortable';
@@ -26,6 +30,7 @@
 
   let {
     resourceName,
+    rendering,
     id,
     title,
     density = 'comfortable',
@@ -63,6 +68,7 @@
   </PageHeader>
 
   <AutoForm
+    {rendering}
     {resourceName}
     mode="edit"
     {id}
@@ -70,6 +76,6 @@
     {columns}
     showHeader={false}
     onNavigationGuardReady={(guard) => navigateGuard = guard}
-    {onSuccess}
+    {...definedOptions({ "onSuccess": onSuccess })}
   />
 </div>

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

@@ -1,6 +1,8 @@
+import type { ResourceRendering } from '../rendering/index.js';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     id: string | number;
     title?: string;
     density?: 'compact' | 'comfortable';

package/dist/components/EditableTable.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
   import { Plus, Trash2, Save, Loader2 } from '@lucide/svelte';
   import { cn } from '../utils.js';
@@ -35,6 +36,8 @@
     class: className = '',
   }: Props = $props();
 
+  const i18n = useTranslation();
+
   let isSaving = $state(false);
 
   function updateCell(rowIndex: number, columnKey: string, value: unknown) {
@@ -152,6 +155,7 @@
                 {:else if col.type === 'date'}
                   <input
                     type="date"
+                    lang={i18n.locale}
                     class="svadmin-u-d1c57777d8b6 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-359090c2d529 svadmin-u-f10f771f87e9 svadmin-u-3e94a98e1466 svadmin-u-9c1295a6914a"
                     value={String(row[col.key] ?? '')}
                     oninput={(e) => updateCell(rowIndex, col.key, e.currentTarget.value)}

package/dist/components/ErrorPage.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import SystemErrorState from './content/SystemErrorState.svelte';
   import ContentPageShell from './content/ContentPageShell.svelte';
   interface Props { status?: '404' | '500'; title?: string; description?: string; }
   let { status = '404', title, description }: Props = $props();
 </script>
 
-<ContentPageShell pageId="system-error" width="narrow"><SystemErrorState {status} {title} {description} /></ContentPageShell>
+<ContentPageShell pageId="system-error" width="narrow"><SystemErrorState {status} {...definedOptions({ "title": title })} {...definedOptions({ "description": description })} /></ContentPageShell>

package/dist/components/FieldDisplay.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { getDisplayComponent, type FieldDisplayProps } from './fieldComponentMap';
+
+  let { type, value, options, resourceName }: FieldDisplayProps & { type: string } = $props();
+  const Display = $derived(getDisplayComponent(type));
+  const i18n = useTranslation();
+</script>
+
+{#if Display}
+  <Display {value} {options} {resourceName} />
+{:else}
+  <span role="status" data-svadmin-invalid-field>{i18n.t('validation.invalidFormat')}</span>
+{/if}

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

@@ -0,0 +1,7 @@
+import { type FieldDisplayProps } from './fieldComponentMap';
+type $$ComponentProps = FieldDisplayProps & {
+    type: string;
+};
+declare const FieldDisplay: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldDisplay = ReturnType<typeof FieldDisplay>;
+export default FieldDisplay;