@svadmin/ui 0.64.0 → 0.65.0

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

@@ -0,0 +1,23 @@
+import type { Snippet, Component } from 'svelte';
+export interface FormStep {
+    title: string;
+    description?: string;
+    icon?: Component;
+}
+interface Props {
+    steps: FormStep[];
+    currentStep?: number;
+    onstepchange?: (newStep: number, prevStep: number) => boolean | Promise<boolean> | undefined;
+    onfinish?: () => void | Promise<void>;
+    oncancel?: () => void;
+    submitText?: string;
+    nextText?: string;
+    prevText?: string;
+    isSubmitting?: boolean;
+    class?: string;
+    children?: Snippet;
+    stepContent?: Snippet<[number]>;
+}
+declare const StepForm: Component<Props, {}, "currentStep">;
+type StepForm = ReturnType<typeof StepForm>;
+export default StepForm;

package/dist/components/TableSummary.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  export type AggregationType = 'sum' | 'avg' | 'count' | 'min' | 'max' | ((rows: Record<string, unknown>[]) => string | number);
+
+  export interface TableSummaryColumn {
+    key: string;
+    label?: string;
+    align?: 'left' | 'center' | 'right';
+  }
+
+  interface Props {
+    columns: TableSummaryColumn[];
+    data: Record<string, unknown>[];
+    aggregations: Record<string, AggregationType>;
+    title?: string;
+    titleColumnKey?: string;
+    prefix?: Record<string, string>;
+    suffix?: Record<string, string>;
+    precision?: Record<string, number>;
+    class?: string;
+  }
+
+  let {
+    columns,
+    data = [],
+    aggregations = {},
+    title = 'Total',
+    titleColumnKey,
+    prefix = {},
+    suffix = {},
+    precision = {},
+    class: className = '',
+  }: Props = $props();
+
+  const titleKey = $derived(titleColumnKey || (columns[0]?.key ?? ''));
+
+  function calculateAggregation(key: string, type: AggregationType): string | number {
+    if (!data.length) return '—';
+
+    if (typeof type === 'function') {
+      return type(data);
+    }
+
+    if (type === 'count') {
+      return data.length;
+    }
+
+    const numbers = data
+      .map((row) => Number(row[key]))
+      .filter((val) => !isNaN(val) && val !== null && val !== undefined);
+
+    if (numbers.length === 0) return '—';
+
+    const p = precision[key] !== undefined ? precision[key] : 2;
+
+    switch (type) {
+      case 'sum': {
+        const total = numbers.reduce((acc, curr) => acc + curr, 0);
+        return Number.isInteger(total) && p === 0 ? total : total.toFixed(p);
+      }
+      case 'avg': {
+        const avg = numbers.reduce((acc, curr) => acc + curr, 0) / numbers.length;
+        return avg.toFixed(p);
+      }
+      case 'min': {
+        const min = Math.min(...numbers);
+        return Number.isInteger(min) && p === 0 ? min : min.toFixed(p);
+      }
+      case 'max': {
+        const max = Math.max(...numbers);
+        return Number.isInteger(max) && p === 0 ? max : max.toFixed(p);
+      }
+      default:
+        return '—';
+    }
+  }
+</script>
+
+<div class={cn('w-full overflow-x-auto border-t-2 border-border/80 bg-muted/30 font-medium text-xs text-foreground', className)}>
+  <table class="w-full text-left border-collapse">
+    <tbody>
+      <tr class="h-10">
+        {#each columns as col (col.key)}
+          {@const isTitle = col.key === titleKey}
+          {@const aggType = aggregations[col.key]}
+          {@const align = col.align || 'left'}
+          <td
+            class={cn(
+              'px-4 py-2 tabular-nums',
+              align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left',
+              isTitle ? 'font-semibold text-foreground' : 'text-muted-foreground'
+            )}
+          >
+            {#if isTitle && !aggType}
+              <span>{title}</span>
+            {:else if aggType}
+              {@const result = calculateAggregation(col.key, aggType)}
+              <span class="font-semibold text-foreground">
+                {#if prefix[col.key]}{prefix[col.key]}{/if}{result}{#if suffix[col.key]}{suffix[col.key]}{/if}
+              </span>
+            {:else}
+              <span class="opacity-40">—</span>
+            {/if}
+          </td>
+        {/each}
+      </tr>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,20 @@
+export type AggregationType = 'sum' | 'avg' | 'count' | 'min' | 'max' | ((rows: Record<string, unknown>[]) => string | number);
+export interface TableSummaryColumn {
+    key: string;
+    label?: string;
+    align?: 'left' | 'center' | 'right';
+}
+interface Props {
+    columns: TableSummaryColumn[];
+    data: Record<string, unknown>[];
+    aggregations: Record<string, AggregationType>;
+    title?: string;
+    titleColumnKey?: string;
+    prefix?: Record<string, string>;
+    suffix?: Record<string, string>;
+    precision?: Record<string, number>;
+    class?: string;
+}
+declare const TableSummary: import("svelte").Component<Props, {}, "">;
+type TableSummary = ReturnType<typeof TableSummary>;
+export default TableSummary;

package/dist/components/TreeTable.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { ChevronRight, ChevronDown, Folder, File } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import { Checkbox } from './ui/checkbox/index.js';
+  import { cn } from '../utils.js';
+
+  export interface TreeTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+  }
+
+  interface Props {
+    data: Record<string, unknown>[];
+    columns: TreeTableColumn[];
+    primaryKey?: string;
+    childrenKey?: string;
+    selectable?: boolean;
+    selectedKeys?: (string | number)[];
+    onselect?: (selectedKeys: (string | number)[]) => void;
+    rowActions?: Snippet<[{ record: Record<string, unknown>; id: string | number }]>;
+    customCell?: Snippet<[{ column: TreeTableColumn; record: Record<string, unknown>; value: unknown }]>;
+    class?: string;
+  }
+
+  let {
+    data = [],
+    columns = [],
+    primaryKey = 'id',
+    childrenKey = 'children',
+    selectable = false,
+    selectedKeys = $bindable([]),
+    onselect,
+    rowActions,
+    customCell,
+    class: className = '',
+  }: Props = $props();
+
+  let expandedKeys = $state<Set<string | number>>(new Set());
+
+  interface FlatTreeItem {
+    record: Record<string, unknown>;
+    id: string | number;
+    level: number;
+    hasChildren: boolean;
+    isExpanded: boolean;
+    isLastChild?: boolean;
+  }
+
+  function flattenTree(items: Record<string, unknown>[], level = 0): FlatTreeItem[] {
+    const flat: FlatTreeItem[] = [];
+    for (const item of items) {
+      const id = item[primaryKey] as string | number;
+      const children = item[childrenKey] as Record<string, unknown>[] | undefined;
+      const hasChildren = Array.isArray(children) && children.length > 0;
+      const isExpanded = expandedKeys.has(id);
+
+      flat.push({
+        record: item,
+        id,
+        level,
+        hasChildren,
+        isExpanded,
+      });
+
+      if (hasChildren && isExpanded && children) {
+        flat.push(...flattenTree(children, level + 1));
+      }
+    }
+    return flat;
+  }
+
+  const flattenedRows = $derived(flattenTree(data));
+
+  function toggleExpand(id: string | number) {
+    const next = new Set(expandedKeys);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    expandedKeys = next;
+  }
+
+  function expandAll() {
+    const all = new Set<string | number>();
+    function collect(items: Record<string, unknown>[]) {
+      for (const item of items) {
+        const id = item[primaryKey] as string | number;
+        const children = item[childrenKey] as Record<string, unknown>[] | undefined;
+        if (Array.isArray(children) && children.length > 0) {
+          all.add(id);
+          collect(children);
+        }
+      }
+    }
+    collect(data);
+    expandedKeys = all;
+  }
+
+  function collapseAll() {
+    expandedKeys = new Set();
+  }
+
+  function getAllDescendantIds(item: Record<string, unknown>): (string | number)[] {
+    const ids: (string | number)[] = [item[primaryKey] as string | number];
+    const children = item[childrenKey] as Record<string, unknown>[] | undefined;
+    if (Array.isArray(children)) {
+      for (const child of children) {
+        ids.push(...getAllDescendantIds(child));
+      }
+    }
+    return ids;
+  }
+
+  function toggleSelect(item: Record<string, unknown>) {
+    const descendantIds = getAllDescendantIds(item);
+    const isSelected = selectedKeys.includes(item[primaryKey] as string | number);
+
+    let next: (string | number)[];
+    if (isSelected) {
+      next = selectedKeys.filter((k) => !descendantIds.includes(k));
+    } else {
+      next = Array.from(new Set([...selectedKeys, ...descendantIds]));
+    }
+
+    selectedKeys = next;
+    onselect?.(next);
+  }
+</script>
+
+<div class={cn('w-full space-y-2', className)}>
+  <div class="flex items-center justify-between px-1 py-1 text-xs">
+    <div class="flex items-center gap-2">
+      <Button variant="ghost" size="sm" class="h-6 px-2 text-xs" onclick={expandAll}>
+        Expand All
+      </Button>
+      <Button variant="ghost" size="sm" class="h-6 px-2 text-xs text-muted-foreground" onclick={collapseAll}>
+        Collapse All
+      </Button>
+    </div>
+    {#if selectable && selectedKeys.length > 0}
+      <span class="text-xs text-muted-foreground">
+        Selected: <strong class="text-foreground">{selectedKeys.length}</strong>
+      </span>
+    {/if}
+  </div>
+
+  <div class="rounded-lg border border-border/80 overflow-hidden bg-card">
+    <table class="w-full text-left text-xs border-collapse">
+      <thead class="bg-muted/50 border-b border-border/60 font-semibold text-muted-foreground">
+        <tr>
+          {#if selectable}
+            <th class="w-8 px-3 py-2 text-center"></th>
+          {/if}
+          {#each columns as col (col.key)}
+            <th class="px-3 py-2" style={col.width ? `width: ${col.width}` : ''}>
+              {col.label}
+            </th>
+          {/each}
+          {#if rowActions}
+            <th class="w-20 px-3 py-2 text-right">Actions</th>
+          {/if}
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/40">
+        {#each flattenedRows as row (row.id)}
+          {@const isSelected = selectedKeys.includes(row.id)}
+          <tr class="hover:bg-muted/30 transition-colors {isSelected ? 'bg-primary/5' : ''}">
+            {#if selectable}
+              <td class="w-8 px-3 py-2 text-center">
+                <Checkbox
+                  checked={isSelected}
+                  onCheckedChange={() => toggleSelect(row.record)}
+                  aria-label="Select {row.id}"
+                />
+              </td>
+            {/if}
+
+            {#each columns as col, colIdx (col.key)}
+              {@const val = row.record[col.key]}
+              <td class="px-3 py-2">
+                {#if colIdx === 0}
+                  <!-- Primary tree node column with indent -->
+                  <div
+                    class="flex items-center gap-1.5"
+                    style="padding-left: {row.level * 20}px;"
+                  >
+                    {#if row.hasChildren}
+                      <button
+                        type="button"
+                        class="h-5 w-5 flex items-center justify-center rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                        onclick={() => toggleExpand(row.id)}
+                        aria-label={row.isExpanded ? 'Collapse' : 'Expand'}
+                      >
+                        {#if row.isExpanded}
+                          <ChevronDown class="h-3.5 w-3.5" />
+                        {:else}
+                          <ChevronRight class="h-3.5 w-3.5" />
+                        {/if}
+                      </button>
+                      <Folder class="h-3.5 w-3.5 text-primary/70 shrink-0" />
+                    {:else}
+                      <span class="w-5 inline-block"></span>
+                      <File class="h-3.5 w-3.5 text-muted-foreground/50 shrink-0" />
+                    {/if}
+
+                    <span class="font-medium text-foreground truncate">
+                      {val ?? '—'}
+                    </span>
+                  </div>
+                {:else if customCell}
+                  {@render customCell({ column: col, record: row.record, value: val })}
+                {:else}
+                  <span class="text-foreground truncate">{val ?? '—'}</span>
+                {/if}
+              </td>
+            {/each}
+
+            {#if rowActions}
+              <td class="w-20 px-3 py-2 text-right">
+                {@render rowActions({ record: row.record, id: row.id })}
+              </td>
+            {/if}
+          </tr>
+        {:else}
+          <tr>
+            <td colspan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} class="py-8 text-center text-muted-foreground">
+              No data available
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+export interface TreeTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+}
+interface Props {
+    data: Record<string, unknown>[];
+    columns: TreeTableColumn[];
+    primaryKey?: string;
+    childrenKey?: string;
+    selectable?: boolean;
+    selectedKeys?: (string | number)[];
+    onselect?: (selectedKeys: (string | number)[]) => void;
+    rowActions?: Snippet<[{
+        record: Record<string, unknown>;
+        id: string | number;
+    }]>;
+    customCell?: Snippet<[{
+        column: TreeTableColumn;
+        record: Record<string, unknown>;
+        value: unknown;
+    }]>;
+    class?: string;
+}
+declare const TreeTable: import("svelte").Component<Props, {}, "selectedKeys">;
+type TreeTable = ReturnType<typeof TreeTable>;
+export default TreeTable;

package/dist/components/UnsavedChangesPrompt.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  interface Props {
+    dirty: boolean;
+    message?: string;
+  }
+
+  let { dirty, message }: Props = $props();
+
+  const i18n = useTranslation();
+  const promptMessage = $derived(
+    message ?? i18n.t('common.warnUnsavedChanges', { defaultValue: 'You have unsaved changes. Are you sure you want to leave?' })
+  );
+
+  function handleBeforeUnload(e: BeforeUnloadEvent) {
+    if (dirty) {
+      e.preventDefault();
+      e.returnValue = promptMessage;
+      return promptMessage;
+    }
+  }
+
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+
+    if (dirty) {
+      window.addEventListener('beforeunload', handleBeforeUnload);
+    } else {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    }
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  });
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    }
+  });
+</script>

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

@@ -0,0 +1,7 @@
+interface Props {
+    dirty: boolean;
+    message?: string;
+}
+declare const UnsavedChangesPrompt: import("svelte").Component<Props, {}, "">;
+type UnsavedChangesPrompt = ReturnType<typeof UnsavedChangesPrompt>;
+export default UnsavedChangesPrompt;

package/dist/components/VersionDiffViewer.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { Badge } from './ui/badge/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Columns2, AlignJustify } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    oldValue: Record<string, unknown>;
+    newValue: Record<string, unknown>;
+    oldTitle?: string;
+    newTitle?: string;
+    viewMode?: 'split' | 'unified';
+    fieldLabels?: Record<string, string>;
+    class?: string;
+  }
+
+  let {
+    oldValue = {},
+    newValue = {},
+    oldTitle = 'Previous Version',
+    newTitle = 'Current Version',
+    viewMode = 'split',
+    fieldLabels = {},
+    class: className = '',
+  }: Props = $props();
+
+  let mode = $state<'split' | 'unified'>(untrack(() => viewMode));
+
+  interface FieldDiff {
+    key: string;
+    label: string;
+    oldVal: unknown;
+    newVal: unknown;
+    status: 'added' | 'removed' | 'modified' | 'unchanged';
+  }
+
+  const diffList = $derived.by<FieldDiff[]>(() => {
+    const oldObj = oldValue || {};
+    const newObj = newValue || {};
+    const allKeys = Array.from(new Set([...Object.keys(oldObj), ...Object.keys(newObj)]));
+
+    return allKeys.map((key) => {
+      const hasOld = key in oldObj && oldObj[key] !== undefined;
+      const hasNew = key in newObj && newObj[key] !== undefined;
+      const oldVal = oldObj[key];
+      const newVal = newObj[key];
+
+      let status: FieldDiff['status'] = 'unchanged';
+      if (!hasOld && hasNew) {
+        status = 'added';
+      } else if (hasOld && !hasNew) {
+        status = 'removed';
+      } else if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
+        status = 'modified';
+      }
+
+      return {
+        key,
+        label: fieldLabels[key] || key,
+        oldVal,
+        newVal,
+        status,
+      };
+    });
+  });
+
+  const modifiedCount = $derived(diffList.filter((d) => d.status !== 'unchanged').length);
+
+  function formatValue(val: unknown): string {
+    if (val === undefined || val === null) return '—';
+    if (typeof val === 'object') {
+      try {
+        return JSON.stringify(val, null, 2);
+      } catch {
+        return String(val);
+      }
+    }
+    return String(val);
+  }
+</script>
+
+<div class={cn('rounded-xl border border-border bg-card shadow-xs overflow-hidden', className)}>
+  <!-- Header & Toolbar -->
+  <div class="flex items-center justify-between p-3.5 border-b border-border/60 bg-muted/20">
+    <div class="flex items-center gap-2">
+      <h4 class="text-xs font-semibold text-foreground">Record Comparison</h4>
+      <Badge variant="outline" class="text-[11px]">
+        {modifiedCount} change{modifiedCount === 1 ? '' : 's'}
+      </Badge>
+    </div>
+
+    <div class="flex items-center gap-1">
+      <Button
+        variant={mode === 'split' ? 'secondary' : 'ghost'}
+        size="sm"
+        class="h-7 text-xs gap-1 px-2"
+        onclick={() => { mode = 'split'; }}
+      >
+        <Columns2 class="h-3.5 w-3.5" />
+        Side by Side
+      </Button>
+      <Button
+        variant={mode === 'unified' ? 'secondary' : 'ghost'}
+        size="sm"
+        class="h-7 text-xs gap-1 px-2"
+        onclick={() => { mode = 'unified'; }}
+      >
+        <AlignJustify class="h-3.5 w-3.5" />
+        Unified
+      </Button>
+    </div>
+  </div>
+
+  {#if mode === 'split'}
+    <!-- Split Side-by-Side View -->
+    <div class="grid grid-cols-2 divide-x divide-border/60 text-xs">
+      <div class="p-3 bg-muted/10 font-semibold text-muted-foreground border-b border-border/60">{oldTitle}</div>
+      <div class="p-3 bg-muted/10 font-semibold text-muted-foreground border-b border-border/60">{newTitle}</div>
+    </div>
+
+    <div class="divide-y divide-border/40 text-xs">
+      {#each diffList as diff (diff.key)}
+        {@const isDiff = diff.status !== 'unchanged'}
+        <div class={cn('grid grid-cols-2 divide-x divide-border/40 transition-colors', isDiff ? 'bg-muted/15' : '')}>
+          <!-- Left Column -->
+          <div class={cn('p-3 space-y-1', diff.status === 'removed' ? 'bg-destructive/5' : '')}>
+            <div class="flex items-center justify-between text-[11px] text-muted-foreground font-medium">
+              <span>{diff.label}</span>
+              {#if diff.status === 'removed'}
+                <Badge variant="outline" class="bg-destructive/15 text-destructive border-destructive/20 text-[10px]">Deleted</Badge>
+              {/if}
+            </div>
+            <div class={cn('font-mono text-xs break-words', diff.status === 'removed' ? 'line-through text-destructive' : 'text-foreground')}>
+              {formatValue(diff.oldVal)}
+            </div>
+          </div>
+
+          <!-- Right Column -->
+          <div class={cn('p-3 space-y-1', diff.status === 'added' ? 'bg-success/5' : diff.status === 'modified' ? 'bg-warning/5' : '')}>
+            <div class="flex items-center justify-between text-[11px] text-muted-foreground font-medium">
+              <span>{diff.label}</span>
+              {#if diff.status === 'added'}
+                <Badge variant="outline" class="bg-success/15 text-success border-success/20 text-[10px]">Added</Badge>
+              {:else if diff.status === 'modified'}
+                <Badge variant="outline" class="bg-warning/15 text-warning-foreground border-warning/20 text-[10px]">Modified</Badge>
+              {/if}
+            </div>
+            <div class={cn('font-mono text-xs break-words', diff.status === 'added' ? 'text-success font-medium' : diff.status === 'modified' ? 'text-warning-foreground font-medium' : 'text-foreground')}>
+              {formatValue(diff.newVal)}
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <!-- Unified List View -->
+    <div class="divide-y divide-border/40 text-xs">
+      {#each diffList as diff (diff.key)}
+        <div class="p-3 space-y-2">
+          <div class="flex items-center justify-between">
+            <span class="font-medium text-foreground">{diff.label}</span>
+            {#if diff.status === 'added'}
+              <Badge variant="outline" class="bg-success/15 text-success border-success/20 text-[10px]">Added</Badge>
+            {:else if diff.status === 'removed'}
+              <Badge variant="outline" class="bg-destructive/15 text-destructive border-destructive/20 text-[10px]">Removed</Badge>
+            {:else if diff.status === 'modified'}
+              <Badge variant="outline" class="bg-warning/15 text-warning-foreground border-warning/20 text-[10px]">Modified</Badge>
+            {:else}
+              <Badge variant="outline" class="text-[10px] text-muted-foreground">Unchanged</Badge>
+            {/if}
+          </div>
+
+          {#if diff.status === 'modified'}
+            <div class="space-y-1 rounded-md bg-muted/40 p-2 font-mono text-[11px]">
+              <div class="text-destructive line-through">- {formatValue(diff.oldVal)}</div>
+              <div class="text-success font-medium">+ {formatValue(diff.newVal)}</div>
+            </div>
+          {:else if diff.status === 'added'}
+            <div class="rounded-md bg-success/10 p-2 font-mono text-[11px] text-success">
+              + {formatValue(diff.newVal)}
+            </div>
+          {:else if diff.status === 'removed'}
+            <div class="rounded-md bg-destructive/10 p-2 font-mono text-[11px] text-destructive line-through">
+              - {formatValue(diff.oldVal)}
+            </div>
+          {:else}
+            <div class="font-mono text-[11px] text-muted-foreground">
+              {formatValue(diff.newVal)}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,12 @@
+interface Props {
+    oldValue: Record<string, unknown>;
+    newValue: Record<string, unknown>;
+    oldTitle?: string;
+    newTitle?: string;
+    viewMode?: 'split' | 'unified';
+    fieldLabels?: Record<string, string>;
+    class?: string;
+}
+declare const VersionDiffViewer: import("svelte").Component<Props, {}, "">;
+type VersionDiffViewer = ReturnType<typeof VersionDiffViewer>;
+export default VersionDiffViewer;