@svadmin/ui 0.70.0 → 0.72.0

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,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { getResource, useNavigation } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
 
@@ -70,6 +72,6 @@
     {columns}
     showHeader={false}
     onNavigationGuardReady={(guard) => navigateGuard = guard}
-    {onSuccess}
+    {...definedOptions({ "onSuccess": onSuccess })}
   />
 </div>

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;

package/dist/components/FieldRenderer.svelte

@@ -4,6 +4,8 @@
 </script>
 
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import type { FieldDefinition } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Input } from './ui/input/index.js';
@@ -25,6 +27,7 @@
   import type { Snippet } from 'svelte';
   import { getRichTextEditor } from '../editor-config.svelte.js';
   import { cn } from '../utils.js';
+  import { numericInputValue } from '../numeric-input.js';
 
   const i18n = useTranslation();
 
@@ -43,7 +46,7 @@
 
   // Typed accessors
   const strVal = $derived((value as string) ?? '');
-  const numVal = $derived(value as number | null | undefined);
+  const numVal = $derived(numericInputValue(value));
   const boolVal = $derived((value as boolean) ?? false);
   const tagsVal = $derived((value as string[]) ?? []);
   const multiVal = $derived((value as (string | number)[]) ?? []);
@@ -210,10 +213,11 @@
       id={field.key}
       name={field.key}
       type="number"
-      value={numVal == null ? '' : String(numVal)}
+      value={numVal}
       oninput={(e) => {
-        const v = (e.target as HTMLInputElement).value;
-        onchange(v === '' ? null : Number(v));
+        const input = e.currentTarget;
+        if (!(input instanceof HTMLInputElement)) return;
+        onchange(input.value === '' ? null : numericInputValue(input.valueAsNumber));
       }}
       required={field.required}
       aria-invalid={invalid || undefined}
@@ -269,7 +273,7 @@
   {:else if field.type === 'tree-select' || field.type === 'treeselect'}
     <TreeSelect
       options={(field.treeOptions ?? field.options ?? []) as TreeSelectOption[]}
-      value={value as string | number | (string | number)[] | undefined}
+      {...definedOptions({ "value": value as string | number | (string | number)[] | undefined })}
       multiple={field.multiple}
       disabled={disabled}
       placeholder={i18n.t('field.selectPlaceholder')}

package/dist/components/FilterBuilder.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Plus, Trash2, RotateCcw, Filter as FilterIcon, Check } from '@lucide/svelte';
   import { cn } from '../utils.js';
+  import { numericInputValue } from '../numeric-input.js';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import { Select } from './ui/select/index.js';
@@ -55,8 +56,7 @@
       const parsedRules: FilterRuleItem[] = [];
       let nextLogical: 'and' | 'or' = 'and';
 
-      for (let i = 0; i < filters.length; i++) {
-        const item = filters[i];
+      for (const [i, item] of filters.entries()) {
         if ('field' in item) {
           parsedRules.push({
             id: `rule-${i}-${Date.now()}`,
@@ -66,8 +66,7 @@
           });
         } else if (item.operator === 'and' || item.operator === 'or') {
           nextLogical = item.operator;
-          for (let j = 0; j < item.value.length; j++) {
-            const sub = item.value[j];
+          for (const [j, sub] of item.value.entries()) {
             if ('field' in sub) {
               parsedRules.push({
                 id: `rule-${i}-${j}-${Date.now()}`,
@@ -264,15 +263,27 @@
               <option value="true">{i18n.t('common.yes', undefined) ?? '是 (true)'}</option>
               <option value="false">{i18n.t('common.no', undefined) ?? '否 (false)'}</option>
             </Select>
+          {:else if fieldDef?.type === 'number'}
+            <Input
+              type="number"
+              class="svadmin-u-ed8a5df7b2fb svadmin-u-359090c2d529"
+              placeholder="输入筛选值..."
+              value={numericInputValue(rule.value)}
+              oninput={(e) => {
+                const input = e.currentTarget;
+                if (!(input instanceof HTMLInputElement)) return;
+                rule.value = input.value === '' ? null : numericInputValue(input.valueAsNumber);
+              }}
+            />
           {:else}
             <Input
-              type={fieldDef?.type === 'number' ? 'number' : 'text'}
+              type="text"
               class="svadmin-u-ed8a5df7b2fb svadmin-u-359090c2d529"
               placeholder="输入筛选值..."
               value={String(rule.value ?? '')}
-              oninput={(e: Event) => {
-                const val = (e.currentTarget as HTMLInputElement).value;
-                rule.value = fieldDef?.type === 'number' && val !== '' ? Number(val) : val;
+              oninput={(e) => {
+                const input = e.currentTarget;
+                if (input instanceof HTMLInputElement) rule.value = input.value;
               }}
             />
           {/if}

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

@@ -19,6 +19,6 @@ interface Props {
     trigger?: Snippet;
     class?: string;
 }
-declare const FilterDropdown: import("svelte").Component<Props, {}, "value" | "open">;
+declare const FilterDropdown: import("svelte").Component<Props, {}, "open" | "value">;
 type FilterDropdown = ReturnType<typeof FilterDropdown>;
 export default FilterDropdown;

package/dist/components/Header.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   import { Moon, Sun, Search, MonitorUp } from '@lucide/svelte';
   import { Button } from './ui/button';
   import TooltipButton from './TooltipButton.svelte';
@@ -33,11 +32,11 @@
   }>();
 
   // Retrieve optional component overrides from registry
-  const registry = getComponentRegistry() || {} as any;
-  const CustomBreadcrumbs = registry.Breadcrumbs;
-  const CustomThemeToggle = registry.ThemeToggle;
-  const CustomUserMenu = registry.UserMenu;
-  const CustomNotificationPanel = registry.NotificationPanel;
+  const registry = getComponentRegistry();
+  const CustomBreadcrumbs = registry?.Breadcrumbs;
+  const CustomThemeToggle = registry?.ThemeToggle;
+  const CustomUserMenu = registry?.UserMenu;
+  const CustomNotificationPanel = registry?.NotificationPanel;
 </script>
 
 <header class="svadmin-u-3e0fd166d494 svadmin-u-2167406b24d7 svadmin-u-0f2fff0ae96e svadmin-u-60fbb7713999 svadmin-u-07017cde3e97 svadmin-u-6da6a3c3f741 svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-65fdbade2025 svadmin-u-6ee2d41e2d2d svadmin-u-16d6f96aa157 svadmin-u-1ca6dd1e47c4 svadmin-u-f0faeb26d656 svadmin-u-8a3831239aa5">

package/dist/components/ImportWizard.svelte

@@ -62,8 +62,9 @@
       }
     } else {
       const rows = parseCSV(cleanText);
-      if (rows.length > 0) {
-        rawHeaders = rows[0];
+      const firstRow = rows[0];
+      if (firstRow) {
+        rawHeaders = firstRow;
         rawRows = rows.slice(1).filter((r: string[]) => r.some((cell: string) => cell.trim().length > 0));
       }
     }

package/dist/components/InfiniteList.svelte

@@ -1,23 +1,26 @@
 <script lang="ts">
+  import { definedReactiveOptions } from '@svadmin/core/options';
+
   import { fade } from 'svelte/transition';
-  import { useInfiniteList } from '@svadmin/core';
+  import { useInfiniteList, useResourceContract } from '@svadmin/core';
   import type { BaseRecord, Sort, Filter } from '@svadmin/core';
   import type { Snippet } from 'svelte';
   import { useTranslation } from '@svadmin/core/i18n';
 
   import { Skeleton } from './ui/skeleton/index.js';
-  import { Loader2 } from '@lucide/svelte';
+  import { Loader2, RotateCw } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
   import { intersect } from '../actions.js';
 
   const i18n = useTranslation();
 
-  interface Props<T extends BaseRecord = BaseRecord> {
+  interface Props {
     resource: string;
     pageSize?: number;
     sorters?: Sort[];
     filters?: Filter[];
     /** Render each item */
-    children: Snippet<[{ item: T; index: number }]>;
+    children: Snippet<[{ item: BaseRecord & { id: string | number }; index: number }]>;
     /** Custom empty state */
     empty?: Snippet;
     /** Custom loading skeleton */
@@ -34,15 +37,18 @@
     loadingSkeleton,
   }: Props = $props();
 
-  const { query } = useInfiniteList({
-    get resource() { return resource; },
+  const binding = useResourceContract(() => resource);
+  const { query } = useInfiniteList(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get dataProviderName() { return binding.dataProviderName; },
+    get meta() { return binding.meta; },
     get pagination() { return { pageSize }; },
     get sorters() { return sorters; },
     get filters() { return filters; },
-  });
+  }));
 
   const allItems = $derived(
-    (query.data as { pages?: { data: BaseRecord[] }[] })?.pages?.flatMap(p => p.data) ?? []
+    query.data?.pages.flatMap(p => p.data) ?? []
   );
 
   const hasNextPage = $derived(query.hasNextPage ?? false);
@@ -66,6 +72,14 @@
         {/each}
       </div>
     {/if}
+  {:else if query.isError}
+    <div role="alert">
+      <p>{i18n.t('common.error')}</p>
+      <Button variant="outline" disabled={query.isFetching} onclick={() => query.refetch()}>
+        <RotateCw />
+        {i18n.t('common.retry')}
+      </Button>
+    </div>
   {:else if allItems.length === 0}
     {#if empty}
       {@render empty()}

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

@@ -1,13 +1,15 @@
 import type { BaseRecord, Sort, Filter } from '@svadmin/core';
 import type { Snippet } from 'svelte';
-interface Props<T extends BaseRecord = BaseRecord> {
+interface Props {
     resource: string;
     pageSize?: number;
     sorters?: Sort[];
     filters?: Filter[];
     /** Render each item */
     children: Snippet<[{
-        item: T;
+        item: BaseRecord & {
+            id: string | number;
+        };
         index: number;
     }]>;
     /** Custom empty state */
@@ -15,6 +17,6 @@ interface Props<T extends BaseRecord = BaseRecord> {
     /** Custom loading skeleton */
     loadingSkeleton?: Snippet;
 }
-declare const InfiniteList: import("svelte").Component<Props<BaseRecord>, {}, "">;
+declare const InfiniteList: import("svelte").Component<Props, {}, "">;
 type InfiniteList = ReturnType<typeof InfiniteList>;
 export default InfiniteList;