@svadmin/ui 0.63.0 → 0.65.0

package/dist/components/EditableTable.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import { Button } from './ui/button/index.js';
+  import { Plus, Trash2, Save, Loader2 } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface EditableTableColumn {
+    key: string;
+    label: string;
+    type?: 'text' | 'number' | 'select' | 'boolean' | 'date';
+    options?: Array<{ label: string; value: string | number }>;
+    required?: boolean;
+    width?: string;
+    readonly?: boolean;
+  }
+
+  interface Props {
+    columns: EditableTableColumn[];
+    data?: Record<string, unknown>[];
+    rowKey?: string;
+    allowAdd?: boolean;
+    allowDelete?: boolean;
+    onchange?: (data: Record<string, unknown>[]) => void;
+    onsave?: (data: Record<string, unknown>[]) => void | Promise<void>;
+    class?: string;
+  }
+
+  let {
+    columns,
+    data = $bindable([]),
+    rowKey = 'id',
+    allowAdd = true,
+    allowDelete = true,
+    onchange,
+    onsave,
+    class: className = '',
+  }: Props = $props();
+
+  let isSaving = $state(false);
+
+  function updateCell(rowIndex: number, columnKey: string, value: unknown) {
+    const nextData = [...data];
+    nextData[rowIndex] = {
+      ...nextData[rowIndex],
+      [columnKey]: value,
+    };
+    data = nextData;
+    onchange?.(data);
+  }
+
+  function handleAddRow() {
+    const newRow: Record<string, unknown> = {
+      [rowKey]: `row_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+    };
+    for (const col of columns) {
+      if (col.type === 'number') newRow[col.key] = 0;
+      else if (col.type === 'boolean') newRow[col.key] = false;
+      else newRow[col.key] = '';
+    }
+    data = [...data, newRow];
+    onchange?.(data);
+  }
+
+  function handleDeleteRow(index: number) {
+    data = data.filter((_, idx) => idx !== index);
+    onchange?.(data);
+  }
+
+  async function handleSave() {
+    isSaving = true;
+    try {
+      await onsave?.(data);
+    } finally {
+      isSaving = false;
+    }
+  }
+</script>
+
+<div class={cn('space-y-3 rounded-xl border border-border bg-card p-4 shadow-xs text-xs', className)}>
+  <div class="flex items-center justify-between gap-2 pb-2 border-b border-border/60">
+    <div class="font-semibold text-foreground">
+      Editable Grid <span class="text-muted-foreground font-normal">({data.length} records)</span>
+    </div>
+
+    <div class="flex items-center gap-2">
+      {#if allowAdd}
+        <Button variant="outline" size="sm" class="h-8 text-xs gap-1" onclick={handleAddRow}>
+          <Plus class="h-3.5 w-3.5" />
+          Add Row
+        </Button>
+      {/if}
+      {#if onsave}
+        <Button size="sm" class="h-8 text-xs gap-1 min-w-20" disabled={isSaving} onclick={handleSave}>
+          {#if isSaving}
+            <Loader2 class="h-3.5 w-3.5 animate-spin" />
+          {:else}
+            <Save class="h-3.5 w-3.5" />
+          {/if}
+          Save All
+        </Button>
+      {/if}
+    </div>
+  </div>
+
+  <div class="overflow-x-auto rounded-lg border border-border/60">
+    <table class="w-full text-left border-collapse">
+      <thead class="bg-muted/40 font-semibold text-muted-foreground border-b border-border/60">
+        <tr>
+          {#each columns as col (col.key)}
+            <th style={col.width ? `width: ${col.width};` : ''} class="px-3 py-2.5">
+              {col.label}
+              {#if col.required}<span class="text-destructive">*</span>{/if}
+            </th>
+          {/each}
+          {#if allowDelete}
+            <th class="w-12 px-3 py-2.5 text-center">Action</th>
+          {/if}
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/40">
+        {#each data as row, rowIndex (row[rowKey] ?? rowIndex)}
+          <tr class="hover:bg-muted/20 transition-colors">
+            {#each columns as col (col.key)}
+              <td class="p-1.5">
+                {#if col.readonly}
+                  <div class="px-2 py-1 text-muted-foreground font-mono truncate">{row[col.key] ?? '—'}</div>
+                {:else if col.type === 'select' && col.options}
+                  <select
+                    class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={String(row[col.key] ?? '')}
+                    onchange={(e) => updateCell(rowIndex, col.key, e.currentTarget.value)}
+                  >
+                    {#each col.options as opt (opt.value)}
+                      <option value={String(opt.value)}>{opt.label}</option>
+                    {/each}
+                  </select>
+                {:else if col.type === 'boolean'}
+                  <div class="flex items-center justify-center py-1">
+                    <input
+                      type="checkbox"
+                      class="h-4 w-4 rounded border-border text-primary focus:ring-primary/20 cursor-pointer"
+                      checked={Boolean(row[col.key])}
+                      onchange={(e) => updateCell(rowIndex, col.key, e.currentTarget.checked)}
+                    />
+                  </div>
+                {:else if col.type === 'number'}
+                  <input
+                    type="number"
+                    class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={Number(row[col.key] ?? 0)}
+                    oninput={(e) => updateCell(rowIndex, col.key, Number(e.currentTarget.value))}
+                  />
+                {:else if col.type === 'date'}
+                  <input
+                    type="date"
+                    class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={String(row[col.key] ?? '')}
+                    oninput={(e) => updateCell(rowIndex, col.key, e.currentTarget.value)}
+                  />
+                {:else}
+                  <input
+                    type="text"
+                    class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    value={String(row[col.key] ?? '')}
+                    oninput={(e) => updateCell(rowIndex, col.key, e.currentTarget.value)}
+                  />
+                {/if}
+              </td>
+            {/each}
+
+            {#if allowDelete}
+              <td class="p-1.5 text-center">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  class="h-7 w-7 p-0 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                  onclick={() => handleDeleteRow(rowIndex)}
+                >
+                  <Trash2 class="h-3.5 w-3.5" />
+                </Button>
+              </td>
+            {/if}
+          </tr>
+        {/each}
+
+        {#if data.length === 0}
+          <tr>
+            <td colspan={columns.length + (allowDelete ? 1 : 0)} class="py-8 text-center text-muted-foreground">
+              No rows. Click "Add Row" to create the first record.
+            </td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+export interface EditableTableColumn {
+    key: string;
+    label: string;
+    type?: 'text' | 'number' | 'select' | 'boolean' | 'date';
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    required?: boolean;
+    width?: string;
+    readonly?: boolean;
+}
+interface Props {
+    columns: EditableTableColumn[];
+    data?: Record<string, unknown>[];
+    rowKey?: string;
+    allowAdd?: boolean;
+    allowDelete?: boolean;
+    onchange?: (data: Record<string, unknown>[]) => void;
+    onsave?: (data: Record<string, unknown>[]) => void | Promise<void>;
+    class?: string;
+}
+declare const EditableTable: import("svelte").Component<Props, {}, "data">;
+type EditableTable = ReturnType<typeof EditableTable>;
+export default EditableTable;

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

package/dist/components/FilterBuilder.svelte

@@ -0,0 +1,310 @@
+<script lang="ts">
+  import { Plus, Trash2, RotateCcw, Filter as FilterIcon, Check } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import { Select } from './ui/select/index.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import type { CrudOperator, FieldDefinition, FieldFilter, Filter, LogicalFilter } from '@svadmin/core';
+
+  export interface FilterRuleItem {
+    id: string;
+    field: string;
+    operator: CrudOperator;
+    value: unknown;
+  }
+
+  const i18n = useTranslation();
+
+  interface Props {
+    fields?: FieldDefinition[];
+    filters?: Filter[];
+    logicalOperator?: 'and' | 'or';
+    class?: string;
+    onApply?: (filters: Filter[]) => void;
+    onReset?: () => void;
+  }
+
+  let {
+    fields = [],
+    filters = $bindable([]),
+    logicalOperator = $bindable('and'),
+    class: className,
+    onApply,
+    onReset,
+  }: Props = $props();
+
+  const operatorOptions: { value: CrudOperator; label: string }[] = [
+    { value: 'eq', label: '等于 (eq)' },
+    { value: 'ne', label: '不等于 (ne)' },
+    { value: 'contains', label: '包含 (contains)' },
+    { value: 'ncontains', label: '不包含 (ncontains)' },
+    { value: 'gt', label: '大于 (>)' },
+    { value: 'gte', label: '大于等于 (>=)' },
+    { value: 'lt', label: '小于 (<)' },
+    { value: 'lte', label: '小于等于 (<=)' },
+    { value: 'null', label: '为空 (null)' },
+    { value: 'nnull', label: '非空 (not null)' },
+  ];
+
+  let rules = $state<FilterRuleItem[]>([]);
+
+  // Initialize rules from filters prop
+  $effect(() => {
+    if (filters && filters.length > 0) {
+      const parsedRules: FilterRuleItem[] = [];
+      let nextLogical: 'and' | 'or' = 'and';
+
+      for (let i = 0; i < filters.length; i++) {
+        const item = filters[i];
+        if ('field' in item) {
+          parsedRules.push({
+            id: `rule-${i}-${Date.now()}`,
+            field: item.field,
+            operator: item.operator,
+            value: item.value,
+          });
+        } 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];
+            if ('field' in sub) {
+              parsedRules.push({
+                id: `rule-${i}-${j}-${Date.now()}`,
+                field: sub.field,
+                operator: sub.operator,
+                value: sub.value,
+              });
+            }
+          }
+        }
+      }
+      rules = parsedRules;
+      logicalOperator = nextLogical;
+    } else {
+      rules = [];
+    }
+  });
+
+  const availableFields = $derived(
+    fields.filter((f) => f.filterable !== false)
+  );
+
+  export function addRule() {
+    const firstField = availableFields[0]?.key ?? 'id';
+    const firstFieldDef = availableFields.find((f) => f.key === firstField);
+    const defaultOp: CrudOperator = firstFieldDef?.type === 'number' ? 'eq' : 'contains';
+
+    rules = [
+      ...rules,
+      {
+        id: `rule-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+        field: firstField,
+        operator: defaultOp,
+        value: '',
+      },
+    ];
+  }
+
+  export function removeRule(index: number) {
+    rules = rules.filter((_, i) => i !== index);
+  }
+
+  export function reset() {
+    rules = [];
+    filters = [];
+    onReset?.();
+  }
+
+  export function apply() {
+    const validFieldFilters: FieldFilter[] = rules
+      .filter((r) => r.field && (r.operator === 'null' || r.operator === 'nnull' || (r.value !== '' && r.value !== undefined)))
+      .map((r) => ({
+        field: r.field,
+        operator: r.operator,
+        value: r.operator === 'null' || r.operator === 'nnull' ? null : r.value,
+      }));
+
+    let compiledFilters: Filter[] = [];
+    if (validFieldFilters.length === 1 || logicalOperator === 'and') {
+      compiledFilters = validFieldFilters;
+    } else if (validFieldFilters.length > 1 && logicalOperator === 'or') {
+      const logical: LogicalFilter = {
+        operator: 'or',
+        value: validFieldFilters,
+      };
+      compiledFilters = [logical];
+    }
+
+    filters = compiledFilters;
+    onApply?.(compiledFilters);
+  }
+</script>
+
+<div class={cn('w-full rounded-lg border border-border bg-card p-4 shadow-xs space-y-3', className)} data-testid="filter-builder">
+  <div class="flex items-center justify-between gap-2 border-b border-border/60 pb-3">
+    <div class="flex items-center gap-2">
+      <FilterIcon class="h-4 w-4 text-muted-foreground" />
+      <span class="text-sm font-medium text-foreground">
+        {i18n.t('common.filterBuilder', undefined) ?? '高级筛选'}
+      </span>
+      {#if rules.length > 1}
+        <div class="flex items-center rounded-md border border-border bg-muted/40 p-0.5 text-xs">
+          <button
+            type="button"
+            class={cn(
+              'rounded px-2 py-0.5 text-xs transition-colors',
+              logicalOperator === 'and' ? 'bg-background font-semibold text-foreground shadow-xs' : 'text-muted-foreground hover:text-foreground'
+            )}
+            onclick={() => (logicalOperator = 'and')}
+          >
+            AND (且)
+          </button>
+          <button
+            type="button"
+            class={cn(
+              'rounded px-2 py-0.5 text-xs transition-colors',
+              logicalOperator === 'or' ? 'bg-background font-semibold text-foreground shadow-xs' : 'text-muted-foreground hover:text-foreground'
+            )}
+            onclick={() => (logicalOperator = 'or')}
+          >
+            OR (或)
+          </button>
+        </div>
+      {/if}
+    </div>
+
+    <div class="flex items-center gap-1.5">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-8 gap-1 text-xs"
+        data-testid="filter-builder-reset"
+        onclick={reset}
+      >
+        <RotateCcw class="h-3.5 w-3.5" />
+        {i18n.t('common.reset', undefined) ?? '重置'}
+      </Button>
+      <Button
+        variant="default"
+        size="sm"
+        class="h-8 gap-1 text-xs"
+        data-testid="filter-builder-apply"
+        onclick={apply}
+      >
+        <Check class="h-3.5 w-3.5" />
+        {i18n.t('common.confirm', undefined) ?? '应用'}
+      </Button>
+    </div>
+  </div>
+
+  <div class="space-y-2">
+    {#each rules as rule, index (rule.id)}
+      {@const fieldDef = availableFields.find((f) => f.key === rule.field)}
+      <div class="flex flex-wrap sm:flex-nowrap items-center gap-2 rounded-md bg-muted/20 p-2 border border-border/40">
+        <!-- Field select -->
+        <div class="w-36 shrink-0">
+          <Select
+            class="h-8 text-xs"
+            value={rule.field}
+            onchange={(e: Event) => {
+              rule.field = (e.currentTarget as HTMLSelectElement).value;
+            }}
+          >
+            {#each availableFields as f (f.key)}
+              <option value={f.key}>{f.label || f.key}</option>
+            {/each}
+          </Select>
+        </div>
+
+        <!-- Operator select -->
+        <div class="w-36 shrink-0">
+          <Select
+            class="h-8 text-xs"
+            value={rule.operator}
+            onchange={(e: Event) => {
+              rule.operator = (e.currentTarget as HTMLSelectElement).value as CrudOperator;
+            }}
+          >
+            {#each operatorOptions as op (op.value)}
+              <option value={op.value}>{op.label}</option>
+            {/each}
+          </Select>
+        </div>
+
+        <!-- Value input -->
+        <div class="flex-1 min-w-[120px]">
+          {#if rule.operator === 'null' || rule.operator === 'nnull'}
+            <div class="h-8 flex items-center px-3 text-xs text-muted-foreground italic bg-muted/30 rounded-md">
+              无需填值
+            </div>
+          {:else if fieldDef?.type === 'select' && fieldDef.options}
+            <Select
+              class="h-8 text-xs"
+              value={String(rule.value ?? '')}
+              onchange={(e: Event) => {
+                rule.value = (e.currentTarget as HTMLSelectElement).value;
+              }}
+            >
+              <option value="">{i18n.t('field.selectPlaceholder', undefined) ?? '请选择'}</option>
+              {#each fieldDef.options as opt (opt.value)}
+                <option value={String(opt.value)}>{opt.label}</option>
+              {/each}
+            </Select>
+          {:else if fieldDef?.type === 'boolean'}
+            <Select
+              class="h-8 text-xs"
+              value={String(rule.value ?? '')}
+              onchange={(e: Event) => {
+                const val = (e.currentTarget as HTMLSelectElement).value;
+                rule.value = val === 'true' ? true : val === 'false' ? false : '';
+              }}
+            >
+              <option value="">{i18n.t('field.selectPlaceholder', undefined) ?? '请选择'}</option>
+              <option value="true">{i18n.t('common.yes', undefined) ?? '是 (true)'}</option>
+              <option value="false">{i18n.t('common.no', undefined) ?? '否 (false)'}</option>
+            </Select>
+          {:else}
+            <Input
+              type={fieldDef?.type === 'number' ? 'number' : 'text'}
+              class="h-8 text-xs"
+              placeholder="输入筛选值..."
+              value={String(rule.value ?? '')}
+              oninput={(e: Event) => {
+                const val = (e.currentTarget as HTMLInputElement).value;
+                rule.value = fieldDef?.type === 'number' && val !== '' ? Number(val) : val;
+              }}
+            />
+          {/if}
+        </div>
+
+        <!-- Remove button -->
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          class="shrink-0 text-muted-foreground hover:text-destructive"
+          onclick={() => removeRule(index)}
+        >
+          <Trash2 class="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    {:else}
+      <div class="rounded-md border border-dashed border-border/80 py-4 text-center text-xs text-muted-foreground">
+        暂无筛选条件，点击下方按钮添加规则
+      </div>
+    {/each}
+  </div>
+
+  <Button
+    type="button"
+    variant="outline"
+    size="sm"
+    data-testid="filter-builder-add-rule"
+    class="w-full gap-1.5 border-dashed text-xs h-8"
+    onclick={addRule}
+  >
+    <Plus class="h-3.5 w-3.5" />
+    {i18n.t('common.addRule', undefined) ?? '添加筛选条件'}
+  </Button>
+</div>

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

@@ -0,0 +1,23 @@
+import type { CrudOperator, FieldDefinition, Filter } from '@svadmin/core';
+export interface FilterRuleItem {
+    id: string;
+    field: string;
+    operator: CrudOperator;
+    value: unknown;
+}
+interface Props {
+    fields?: FieldDefinition[];
+    filters?: Filter[];
+    logicalOperator?: 'and' | 'or';
+    class?: string;
+    onApply?: (filters: Filter[]) => void;
+    onReset?: () => void;
+}
+declare const FilterBuilder: import("svelte").Component<Props, {
+    addRule: () => void;
+    removeRule: (index: number) => void;
+    reset: () => void;
+    apply: () => void;
+}, "filters" | "logicalOperator">;
+type FilterBuilder = ReturnType<typeof FilterBuilder>;
+export default FilterBuilder;