@svadmin/ui 0.60.1 → 0.64.0

package/dist/components/AutoTable.svelte

@@ -121,6 +121,8 @@
     sorters?: Sort[];
     /** Custom batch actions to render when rows are selected */
     batchActions?: Snippet<[{ selectedIds: (string | number)[] }]>;
+    /** Summary row rendered at table footer */
+    summary?: Snippet<[{ data: BaseRecord[]; total: number; visibleColumnsCount: number }]>;
   }
 
   let {
@@ -139,6 +141,7 @@
     emptyState,
     expandedRowRender,
     batchActions,
+    summary,
     pagination: externalPagination,
     sorters: externalSorters,
   }: Props = $props();
@@ -1643,6 +1646,11 @@
               </Table.Row>
             {/each}
           </Table.Body>
+          {#if summary}
+            <Table.Footer class="bg-muted/30 font-medium">
+              {@render summary({ data: (query.data?.data as BaseRecord[]) ?? [], total: query.data?.total ?? 0, visibleColumnsCount: columns.filter((c) => c.id != null && isColumnVisible(c.id)).length })}
+            </Table.Footer>
+          {/if}
         </Table.Root>
         </div>
 

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

@@ -1,4 +1,4 @@
-import type { FieldDefinition, Sort } from '@svadmin/core';
+import type { BaseRecord, FieldDefinition, Sort } from '@svadmin/core';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
@@ -44,6 +44,12 @@ interface Props {
     batchActions?: Snippet<[{
         selectedIds: (string | number)[];
     }]>;
+    /** Summary row rendered at table footer */
+    summary?: Snippet<[{
+        data: BaseRecord[];
+        total: number;
+        visibleColumnsCount: number;
+    }]>;
 }
 declare const AutoTable: import("svelte").Component<Props, {}, "">;
 type AutoTable = ReturnType<typeof AutoTable>;

package/dist/components/Cascader.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import { ChevronRight, Check, X, ChevronsUpDown } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+  import * as Popover from './ui/popover/index.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  export interface CascaderOption {
+    value: string | number;
+    label: string;
+    children?: CascaderOption[];
+    disabled?: boolean;
+    isLeaf?: boolean;
+  }
+
+  const i18n = useTranslation();
+
+  interface Props {
+    options?: CascaderOption[];
+    value?: (string | number)[];
+    separator?: string;
+    placeholder?: string;
+    changeOnSelect?: boolean;
+    disabled?: boolean;
+    allowClear?: boolean;
+    class?: string;
+    onchange?: (value: (string | number)[] | undefined, selectedOptions: CascaderOption[]) => void;
+  }
+
+  let {
+    options = [],
+    value = $bindable(undefined),
+    separator = ' / ',
+    placeholder,
+    changeOnSelect = false,
+    disabled = false,
+    allowClear = true,
+    class: className,
+    onchange,
+  }: Props = $props();
+
+  let open = $state(false);
+  // Active selected path while navigating panels
+  let activePath = $state<(string | number)[]>([]);
+
+  $effect(() => {
+    if (value && Array.isArray(value)) {
+      activePath = [...value];
+    } else {
+      activePath = [];
+    }
+  });
+
+  // Calculate columns based on activePath
+  const columns = $derived.by<CascaderOption[][]>(() => {
+    const cols: CascaderOption[][] = [options];
+    let currentOptions = options;
+
+    for (const val of activePath) {
+      const selectedOpt = currentOptions.find((o) => o.value === val);
+      if (selectedOpt && selectedOpt.children && selectedOpt.children.length > 0) {
+        cols.push(selectedOpt.children);
+        currentOptions = selectedOpt.children;
+      } else {
+        break;
+      }
+    }
+
+    return cols;
+  });
+
+  // Selected options objects corresponding to value
+  const selectedOptions = $derived.by<CascaderOption[]>(() => {
+    if (!value || !Array.isArray(value) || value.length === 0) return [];
+    const opts: CascaderOption[] = [];
+    let currentLevel = options;
+
+    for (const val of value) {
+      const found = currentLevel.find((o) => o.value === val);
+      if (found) {
+        opts.push(found);
+        currentLevel = found.children ?? [];
+      } else {
+        break;
+      }
+    }
+    return opts;
+  });
+
+  const displayLabel = $derived.by(() => {
+    if (selectedOptions.length === 0) return '';
+    return selectedOptions.map((o) => o.label).join(separator);
+  });
+
+  function handleSelectOption(colIndex: number, option: CascaderOption) {
+    if (option.disabled) return;
+
+    const nextPath = [...activePath.slice(0, colIndex), option.value];
+    activePath = nextPath;
+
+    const hasChildren = Boolean(option.children && option.children.length > 0 && !option.isLeaf);
+
+    if (!hasChildren || changeOnSelect) {
+      value = nextPath;
+      const currentSelected = getOptionsForPath(nextPath);
+      onchange?.(nextPath, currentSelected);
+      if (!hasChildren) {
+        open = false;
+      }
+    }
+  }
+
+  function getOptionsForPath(path: (string | number)[]): CascaderOption[] {
+    const result: CascaderOption[] = [];
+    let currentLevel = options;
+    for (const val of path) {
+      const found = currentLevel.find((o) => o.value === val);
+      if (found) {
+        result.push(found);
+        currentLevel = found.children ?? [];
+      }
+    }
+    return result;
+  }
+
+  function clearAll(event?: MouseEvent) {
+    event?.stopPropagation();
+    value = undefined;
+    activePath = [];
+    onchange?.(undefined, []);
+  }
+</script>
+
+<div class={cn('relative w-full', className)} data-testid="cascader">
+  <Popover.Root bind:open>
+    <Popover.Trigger class="w-full">
+      {#snippet child({ props })}
+        <button
+          type="button"
+          {...props}
+          {disabled}
+          class={cn(
+            'flex min-h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-1.5 text-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-left',
+            open && 'ring-2 ring-ring ring-offset-2'
+          )}
+        >
+          <span class={cn('truncate', displayLabel ? 'text-foreground' : 'text-muted-foreground')}>
+            {displayLabel || (placeholder ?? (i18n.t('field.selectPlaceholder', undefined) ?? '请选择...'))}
+          </span>
+
+          <div class="flex items-center gap-1 shrink-0 ml-1 text-muted-foreground">
+            {#if allowClear && displayLabel && !disabled}
+              <span
+                role="button"
+                tabindex="0"
+                class="hover:text-foreground cursor-pointer p-0.5"
+                onclick={clearAll}
+                onkeydown={(e) => {
+                  if (e.key === 'Enter') clearAll(e as never);
+                }}
+              >
+                <X class="h-3.5 w-3.5" />
+              </span>
+            {/if}
+            <ChevronsUpDown class="h-3.5 w-3.5 opacity-50" />
+          </div>
+        </button>
+      {/snippet}
+    </Popover.Trigger>
+
+    <Popover.Content class="w-auto min-w-[180px] p-0 shadow-lg border border-border" align="start">
+      <div class="flex divide-x divide-border max-h-64 overflow-x-auto">
+        {#each columns as columnOptions, colIndex (colIndex)}
+          <div class="w-40 min-w-[140px] max-h-64 overflow-y-auto p-1 space-y-0.5">
+            {#each columnOptions as option (option.value)}
+              {@const isSelectedInPath = activePath[colIndex] === option.value}
+              {@const hasChildren = Boolean(option.children && option.children.length > 0 && !option.isLeaf)}
+              <button
+                type="button"
+                class={cn(
+                  'flex w-full items-center justify-between rounded-md px-2.5 py-1.5 text-xs text-left transition-colors',
+                  isSelectedInPath
+                    ? 'bg-primary/10 text-primary font-medium'
+                    : 'hover:bg-muted/60 text-foreground',
+                  option.disabled && 'opacity-50 cursor-not-allowed pointer-events-none'
+                )}
+                onclick={() => handleSelectOption(colIndex, option)}
+              >
+                <span class="truncate flex-1">{option.label}</span>
+                {#if hasChildren}
+                  <ChevronRight class="h-3.5 w-3.5 shrink-0 opacity-60 ml-1" />
+                {:else if isSelectedInPath && value && value[colIndex] === option.value}
+                  <Check class="h-3.5 w-3.5 shrink-0 text-primary ml-1" />
+                {/if}
+              </button>
+            {:else}
+              <div class="py-4 text-center text-xs text-muted-foreground">
+                {i18n.t('common.noData', undefined) ?? '无数据'}
+              </div>
+            {/each}
+          </div>
+        {/each}
+      </div>
+    </Popover.Content>
+  </Popover.Root>
+</div>

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

@@ -0,0 +1,21 @@
+export interface CascaderOption {
+    value: string | number;
+    label: string;
+    children?: CascaderOption[];
+    disabled?: boolean;
+    isLeaf?: boolean;
+}
+interface Props {
+    options?: CascaderOption[];
+    value?: (string | number)[];
+    separator?: string;
+    placeholder?: string;
+    changeOnSelect?: boolean;
+    disabled?: boolean;
+    allowClear?: boolean;
+    class?: string;
+    onchange?: (value: (string | number)[] | undefined, selectedOptions: CascaderOption[]) => void;
+}
+declare const Cascader: import("svelte").Component<Props, {}, "value">;
+type Cascader = ReturnType<typeof Cascader>;
+export default Cascader;

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;

package/dist/components/FieldRenderer.svelte

@@ -16,6 +16,9 @@
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import ComboboxField from './ComboboxField.svelte';
+  import TreeSelect, { type TreeSelectOption } from './TreeSelect.svelte';
+  import Cascader, { type CascaderOption } from './Cascader.svelte';
+  import Transfer, { type TransferItem } from './Transfer.svelte';
   import ArrayField from './fields/ArrayField.svelte';
   import MediaThumbnail from './content/MediaThumbnail.svelte';
   import { Plus, X } from '@lucide/svelte';
@@ -263,6 +266,35 @@
       class="resize-y"
     />
 
+  {: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}
+      multiple={field.multiple}
+      disabled={disabled}
+      placeholder={i18n.t('field.selectPlaceholder')}
+      onchange={(v) => onchange(v)}
+    />
+
+  {:else if field.type === 'cascader'}
+    <Cascader
+      options={(field.cascaderOptions ?? field.options ?? []) as CascaderOption[]}
+      value={value as (string | number)[]}
+      separator={field.separator}
+      changeOnSelect={field.changeOnSelect}
+      disabled={disabled}
+      placeholder={i18n.t('field.selectPlaceholder')}
+      onchange={(v) => onchange(v)}
+    />
+
+  {:else if field.type === 'transfer'}
+    <Transfer
+      dataSource={(field.transferData ?? field.options?.map((o: { label: string; value: string | number }) => ({ key: o.value, title: o.label })) ?? []) as TransferItem[]}
+      targetKeys={(value as (string | number)[]) ?? []}
+      disabled={disabled}
+      onchange={(next) => onchange(next)}
+    />
+
   {:else if field.type === 'relation' && field.resource}
     <input type="hidden" name={field.key} value={value == null ? '' : String(value)} />
     <ComboboxField