@svadmin/ui 0.63.0 → 0.65.0

package/dist/components/DraggableRowTable.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { GripVertical } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface DraggableTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+  }
+
+  interface Props {
+    columns: DraggableTableColumn[];
+    items?: Record<string, unknown>[];
+    rowKey?: string;
+    onreorder?: (reorderedItems: Record<string, unknown>[]) => void;
+    class?: string;
+  }
+
+  let {
+    columns,
+    items = $bindable([]),
+    rowKey = 'id',
+    onreorder,
+    class: className = '',
+  }: Props = $props();
+
+  let draggedIndex = $state<number | null>(null);
+  let overIndex = $state<number | null>(null);
+
+  function handleDragStart(index: number, e: DragEvent) {
+    draggedIndex = index;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', String(index));
+    }
+  }
+
+  function handleDragOver(index: number, e: DragEvent) {
+    e.preventDefault();
+    if (draggedIndex === null || draggedIndex === index) return;
+    overIndex = index;
+  }
+
+  function handleDrop(index: number, e: DragEvent) {
+    e.preventDefault();
+    if (draggedIndex === null || draggedIndex === index) {
+      draggedIndex = null;
+      overIndex = null;
+      return;
+    }
+
+    const nextItems = [...items];
+    const [movedItem] = nextItems.splice(draggedIndex, 1);
+    nextItems.splice(index, 0, movedItem);
+
+    items = nextItems;
+    onreorder?.(items);
+
+    draggedIndex = null;
+    overIndex = null;
+  }
+
+  function handleDragEnd() {
+    draggedIndex = null;
+    overIndex = null;
+  }
+</script>
+
+<div class={cn('w-full rounded-xl border border-border bg-card shadow-xs overflow-hidden text-xs', className)}>
+  <table class="w-full text-left border-collapse">
+    <thead class="bg-muted/40 font-semibold text-muted-foreground border-b border-border/60 select-none">
+      <tr>
+        <th class="w-10 px-2 py-2.5 text-center">#</th>
+        {#each columns as col (col.key)}
+          <th style={col.width ? `width: ${col.width};` : ''} class="px-4 py-2.5">
+            {col.label}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-border/40">
+      {#each items as item, index (item[rowKey] ?? index)}
+        {@const isDragging = draggedIndex === index}
+        {@const isOver = overIndex === index}
+        <tr
+          draggable="true"
+          ondragstart={(e) => handleDragStart(index, e)}
+          ondragover={(e) => handleDragOver(index, e)}
+          ondrop={(e) => handleDrop(index, e)}
+          ondragend={handleDragEnd}
+          class={cn(
+            'transition-colors cursor-move select-none',
+            isDragging ? 'opacity-30 bg-muted/50' : 'hover:bg-muted/20',
+            isOver ? 'border-t-2 border-primary bg-primary/5' : ''
+          )}
+        >
+          <td class="px-2 py-2.5 text-center text-muted-foreground/60 hover:text-foreground">
+            <GripVertical class="h-4 w-4 mx-auto" />
+          </td>
+          {#each columns as col (col.key)}
+            <td class="px-4 py-2.5 font-medium text-foreground">
+              {item[col.key] ?? '—'}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+
+      {#if items.length === 0}
+        <tr>
+          <td colspan={columns.length + 1} class="py-8 text-center text-muted-foreground">
+            No items to display
+          </td>
+        </tr>
+      {/if}
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,15 @@
+export interface DraggableTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+}
+interface Props {
+    columns: DraggableTableColumn[];
+    items?: Record<string, unknown>[];
+    rowKey?: string;
+    onreorder?: (reorderedItems: Record<string, unknown>[]) => void;
+    class?: string;
+}
+declare const DraggableRowTable: import("svelte").Component<Props, {}, "items">;
+type DraggableRowTable = ReturnType<typeof DraggableRowTable>;
+export default DraggableRowTable;

package/dist/components/DrawerForm.svelte

@@ -1,38 +1,122 @@
 <script lang="ts">
-  import { getResource } from '@svadmin/core';
-  import { useTranslation } from '@svadmin/core/i18n';
-
+  import type { Snippet } from 'svelte';
   import * as Sheet from './ui/sheet/index.js';
-  import AutoForm from './AutoForm.svelte';
-
-  const i18n = useTranslation();
+  import { Button } from './ui/button/index.js';
+  import { Loader2 } from '@lucide/svelte';
+  import { cn } from '../utils.js';
 
-  let { resourceName, mode = 'create', id, open = $bindable(false), side = 'right', onSuccess } = $props<{
-    resourceName: string;
-    mode?: 'create' | 'edit';
-    id?: string | number;
-    open: boolean;
+  interface Props {
+    open?: boolean;
+    title: string;
+    description?: string;
+    triggerText?: string;
+    triggerVariant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive';
+    triggerSize?: 'default' | 'sm' | 'lg' | 'icon';
+    submitText?: string;
+    cancelText?: string;
     side?: 'left' | 'right';
-    onSuccess?: () => void;
-  }>();
+    widthClass?: string;
+    isSubmitting?: boolean;
+    disabled?: boolean;
+    onsubmit?: () => void | Promise<void>;
+    oncancel?: () => void;
+    class?: string;
+    triggerSnippet?: Snippet;
+    children?: Snippet;
+  }
 
-  const resource = $derived(getResource(resourceName));
+  let {
+    open = $bindable(false),
+    title,
+    description,
+    triggerText = 'Open Drawer',
+    triggerVariant = 'default',
+    triggerSize = 'sm',
+    submitText = 'Save',
+    cancelText = 'Cancel',
+    side = 'right',
+    widthClass = 'sm:max-w-md w-full',
+    isSubmitting = false,
+    disabled = false,
+    onsubmit,
+    oncancel,
+    class: className = '',
+    triggerSnippet,
+    children,
+  }: Props = $props();
 
-  function handleSuccess() {
+  let loading = $state(false);
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    loading = true;
+    try {
+      await onsubmit?.();
+      open = false;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleCancel() {
+    oncancel?.();
     open = false;
-    onSuccess?.();
   }
 </script>
 
-<Sheet.Root bind:open {side}>
-  <Sheet.Content>
-    <Sheet.Header>
-      <Sheet.Title>
-        {mode === 'create' ? `${i18n.t('common.create')}${resource.label}` : `${i18n.t('common.edit')}${resource.label}`}
-      </Sheet.Title>
-    </Sheet.Header>
-    <div class="flex-1 overflow-y-auto">
-      <AutoForm {resourceName} {mode} {id} showHeader={false} onSuccess={handleSuccess} />
-    </div>
+{#if triggerSnippet}
+  <button
+    type="button"
+    class="inline-flex cursor-pointer bg-transparent border-0 p-0 text-left"
+    onclick={() => { open = true; }}
+    {disabled}
+  >
+    {@render triggerSnippet()}
+  </button>
+{:else if triggerText}
+  <Button variant={triggerVariant} size={triggerSize} {disabled} onclick={() => { open = true; }}>
+    {triggerText}
+  </Button>
+{/if}
+
+<Sheet.Root bind:open {side} onClose={handleCancel} class={cn(widthClass, 'p-0 overflow-hidden', className)}>
+  <Sheet.Content class="flex flex-col h-full gap-0 p-0">
+    <form onsubmit={handleSubmit} class="flex flex-col h-full">
+      <Sheet.Header class="px-6 py-4 border-b border-border/60">
+        <Sheet.Title>{title}</Sheet.Title>
+        {#if description}
+          <Sheet.Description>{description}</Sheet.Description>
+        {/if}
+      </Sheet.Header>
+
+      <div class="flex-1 overflow-y-auto p-6 text-sm text-foreground space-y-4">
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+
+      <Sheet.Footer class="gap-2 px-6 py-4 border-t border-border/60 mt-auto">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={loading || isSubmitting}
+          onclick={handleCancel}
+        >
+          {cancelText}
+        </Button>
+        <Button
+          type="submit"
+          size="sm"
+          disabled={loading || isSubmitting || disabled}
+          class="gap-1.5 min-w-20"
+        >
+          {#if loading || isSubmitting}
+            <Loader2 class="h-4 w-4 animate-spin" />
+          {/if}
+          {submitText}
+        </Button>
+      </Sheet.Footer>
+    </form>
   </Sheet.Content>
 </Sheet.Root>

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

@@ -1,11 +1,23 @@
-type $$ComponentProps = {
-    resourceName: string;
-    mode?: 'create' | 'edit';
-    id?: string | number;
-    open: boolean;
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    title: string;
+    description?: string;
+    triggerText?: string;
+    triggerVariant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive';
+    triggerSize?: 'default' | 'sm' | 'lg' | 'icon';
+    submitText?: string;
+    cancelText?: string;
     side?: 'left' | 'right';
-    onSuccess?: () => void;
-};
-declare const DrawerForm: import("svelte").Component<$$ComponentProps, {}, "open">;
+    widthClass?: string;
+    isSubmitting?: boolean;
+    disabled?: boolean;
+    onsubmit?: () => void | Promise<void>;
+    oncancel?: () => void;
+    class?: string;
+    triggerSnippet?: Snippet;
+    children?: Snippet;
+}
+declare const DrawerForm: import("svelte").Component<Props, {}, "open">;
 type DrawerForm = ReturnType<typeof DrawerForm>;
 export default DrawerForm;

package/dist/components/DynamicFormList.svelte

@@ -0,0 +1,214 @@
+<script lang="ts" generics="T = Record<string, unknown>">
+  import type { Snippet } from 'svelte';
+  import { Plus, Trash2, ArrowUp, ArrowDown, Copy } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import TooltipButton from './TooltipButton.svelte';
+
+  const i18n = useTranslation();
+
+  interface Props {
+    items?: T[];
+    label?: string;
+    description?: string;
+    addButtonLabel?: string;
+    minItems?: number;
+    maxItems?: number;
+    defaultItem?: T | (() => T);
+    disabled?: boolean;
+    emptyText?: string;
+    onchange?: (items: T[]) => void;
+    children?: Snippet<[{
+      item: T;
+      index: number;
+      remove: () => void;
+      moveUp: () => void;
+      moveDown: () => void;
+      duplicate: () => void;
+      isFirst: boolean;
+      isLast: boolean;
+    }]>;
+    headerExtra?: Snippet<[{ count: number; add: (item?: T) => void }]>;
+  }
+
+  let {
+    items = $bindable([]),
+    label,
+    description,
+    addButtonLabel,
+    minItems = 0,
+    maxItems = Infinity,
+    defaultItem,
+    disabled = false,
+    emptyText,
+    onchange,
+    children,
+    headerExtra,
+  }: Props = $props();
+
+  function createNewItem(): T {
+    if (typeof defaultItem === 'function') {
+      return (defaultItem as () => T)();
+    }
+    if (defaultItem !== undefined) {
+      return structuredClone(defaultItem);
+    }
+    return {} as T;
+  }
+
+  export function add(customItem?: T): void {
+    if (disabled || items.length >= maxItems) return;
+    const itemToAdd = customItem !== undefined ? structuredClone(customItem) : createNewItem();
+    items = [...items, itemToAdd];
+    onchange?.(items);
+  }
+
+  export function remove(index: number): void {
+    if (disabled || items.length <= minItems || index < 0 || index >= items.length) return;
+    const next = [...items];
+    next.splice(index, 1);
+    items = next;
+    onchange?.(items);
+  }
+
+  export function moveUp(index: number): void {
+    if (disabled || index <= 0 || index >= items.length) return;
+    const next = [...items];
+    const temp = next[index - 1];
+    next[index - 1] = next[index];
+    next[index] = temp;
+    items = next;
+    onchange?.(items);
+  }
+
+  export function moveDown(index: number): void {
+    if (disabled || index < 0 || index >= items.length - 1) return;
+    const next = [...items];
+    const temp = next[index + 1];
+    next[index + 1] = next[index];
+    next[index] = temp;
+    items = next;
+    onchange?.(items);
+  }
+
+  export function duplicate(index: number): void {
+    if (disabled || items.length >= maxItems || index < 0 || index >= items.length) return;
+    const next = [...items];
+    const cloned = structuredClone(next[index]);
+    next.splice(index + 1, 0, cloned);
+    items = next;
+    onchange?.(items);
+  }
+</script>
+
+<div class="w-full space-y-3" data-testid="dynamic-form-list">
+  {#if label || description || headerExtra}
+    <div class="flex items-center justify-between gap-2">
+      <div>
+        {#if label}
+          <div class="text-sm font-medium text-foreground">{label}</div>
+        {/if}
+        {#if description}
+          <div class="text-xs text-muted-foreground">{description}</div>
+        {/if}
+      </div>
+      {#if headerExtra}
+        {@render headerExtra({ count: items.length, add })}
+      {/if}
+    </div>
+  {/if}
+
+  <div class="space-y-2">
+    {#each items as item, index (index)}
+      {@const isFirst = index === 0}
+      {@const isLast = index === items.length - 1}
+      <div class="group relative rounded-lg border border-border/70 bg-card p-3 shadow-xs transition-colors hover:border-border">
+        <div class="flex items-start gap-3">
+          <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-medium text-muted-foreground">
+            {index + 1}
+          </div>
+
+          <div class="min-w-0 flex-1">
+            {#if children}
+              {@render children({
+                item,
+                index,
+                remove: () => remove(index),
+                moveUp: () => moveUp(index),
+                moveDown: () => moveDown(index),
+                duplicate: () => duplicate(index),
+                isFirst,
+                isLast,
+              })}
+            {:else}
+              <div class="text-sm text-foreground/80">
+                {JSON.stringify(item)}
+              </div>
+            {/if}
+          </div>
+
+          <div class="flex shrink-0 items-center gap-0.5 opacity-80 group-hover:opacity-100">
+            <TooltipButton
+              tooltip={i18n.t('common.moveUp', undefined) ?? '上移'}
+              variant="ghost"
+              size="icon-sm"
+              disabled={disabled || isFirst}
+              onclick={() => moveUp(index)}
+            >
+              <ArrowUp class="h-3.5 w-3.5" />
+            </TooltipButton>
+
+            <TooltipButton
+              tooltip={i18n.t('common.moveDown', undefined) ?? '下移'}
+              variant="ghost"
+              size="icon-sm"
+              disabled={disabled || isLast}
+              onclick={() => moveDown(index)}
+            >
+              <ArrowDown class="h-3.5 w-3.5" />
+            </TooltipButton>
+
+            <TooltipButton
+              tooltip={i18n.t('common.clone', undefined) ?? '复制'}
+              variant="ghost"
+              size="icon-sm"
+              disabled={disabled || items.length >= maxItems}
+              onclick={() => duplicate(index)}
+            >
+              <Copy class="h-3.5 w-3.5" />
+            </TooltipButton>
+
+            <TooltipButton
+              tooltip={i18n.t('common.delete', undefined) ?? '删除'}
+              variant="ghost"
+              size="icon-sm"
+              class="text-muted-foreground hover:text-destructive"
+              disabled={disabled || items.length <= minItems}
+              onclick={() => remove(index)}
+            >
+              <Trash2 class="h-3.5 w-3.5" />
+            </TooltipButton>
+          </div>
+        </div>
+      </div>
+    {:else}
+      <div class="rounded-lg border border-dashed border-border/80 p-6 text-center text-xs text-muted-foreground">
+        {emptyText ?? (i18n.t('common.noData', undefined) ?? '暂无项目')}
+      </div>
+    {/each}
+  </div>
+
+  {#if items.length < maxItems}
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      class="w-full gap-1.5 border-dashed"
+      {disabled}
+      onclick={() => add()}
+    >
+      <Plus class="h-4 w-4" />
+      {addButtonLabel ?? (i18n.t('common.add', undefined) ?? '添加一项')}
+    </Button>
+  {/if}
+</div>

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

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T = Record<string, unknown>>(): {
+    props: {
+        items?: T[];
+        label?: string;
+        description?: string;
+        addButtonLabel?: string;
+        minItems?: number;
+        maxItems?: number;
+        defaultItem?: T | (() => T);
+        disabled?: boolean;
+        emptyText?: string;
+        onchange?: (items: T[]) => void;
+        children?: Snippet<[{
+            item: T;
+            index: number;
+            remove: () => void;
+            moveUp: () => void;
+            moveDown: () => void;
+            duplicate: () => void;
+            isFirst: boolean;
+            isLast: boolean;
+        }]>;
+        headerExtra?: Snippet<[{
+            count: number;
+            add: (item?: T) => void;
+        }]>;
+    };
+    exports: {
+        add: (customItem?: T) => void;
+        remove: (index: number) => void;
+        moveUp: (index: number) => void;
+        moveDown: (index: number) => void;
+        duplicate: (index: number) => void;
+    };
+    bindings: "items";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "items";
+    exports(): {
+        add: (customItem?: T | undefined) => void;
+        remove: (index: number) => void;
+        moveUp: (index: number) => void;
+        moveDown: (index: number) => void;
+        duplicate: (index: number) => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DynamicFormList: $$IsomorphicComponent;
+type DynamicFormList<T = Record<string, unknown>> = InstanceType<typeof DynamicFormList<T>>;
+export default DynamicFormList;