@svadmin/ui 0.63.0 → 0.65.0

package/dist/components/TreeSelect.svelte

@@ -0,0 +1,307 @@
+<script lang="ts">
+  import { SvelteSet } from 'svelte/reactivity';
+  import { ChevronRight, ChevronDown, Check, X, Search, ChevronsUpDown } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+  import * as Popover from './ui/popover/index.js';
+  import { Input } from './ui/input/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  export interface TreeSelectOption {
+    value: string | number;
+    label: string;
+    children?: TreeSelectOption[];
+    disabled?: boolean;
+    expanded?: boolean;
+  }
+
+  const i18n = useTranslation();
+
+  interface Props {
+    options?: TreeSelectOption[];
+    value?: string | number | (string | number)[];
+    multiple?: boolean;
+    placeholder?: string;
+    searchable?: boolean;
+    onlyLeafSelectable?: boolean;
+    disabled?: boolean;
+    allowClear?: boolean;
+    class?: string;
+    onchange?: (value: string | number | (string | number)[] | undefined) => void;
+  }
+
+  let {
+    options = [],
+    value = $bindable(undefined),
+    multiple = false,
+    placeholder,
+    searchable = true,
+    onlyLeafSelectable = false,
+    disabled = false,
+    allowClear = true,
+    class: className,
+    onchange,
+  }: Props = $props();
+
+  let open = $state(false);
+  let searchQuery = $state('');
+  let expandedNodes = new SvelteSet<string | number>();
+
+  // Map to quickly look up option info by value
+  const optionMap = $derived.by(() => {
+    const map = new Map<string | number, TreeSelectOption>();
+    function traverse(nodes: TreeSelectOption[]) {
+      for (const node of nodes) {
+        map.set(node.value, node);
+        if (node.children) traverse(node.children);
+      }
+    }
+    traverse(options);
+    return map;
+  });
+
+  // Selected values array normalized
+  const selectedValues = $derived.by< (string | number)[]>(() => {
+    if (value === undefined || value === null || value === '') return [];
+    return Array.isArray(value) ? value : [value];
+  });
+
+  const selectedLabels = $derived.by(() => {
+    return selectedValues.map((v) => optionMap.get(v)?.label ?? String(v));
+  });
+
+  function toggleExpand(nodeValue: string | number, event?: MouseEvent) {
+    event?.stopPropagation();
+    if (expandedNodes.has(nodeValue)) {
+      expandedNodes.delete(nodeValue);
+    } else {
+      expandedNodes.add(nodeValue);
+    }
+  }
+
+  function isNodeExpanded(node: TreeSelectOption): boolean {
+    if (searchQuery.trim()) return true; // Auto expand all on search
+    return expandedNodes.has(node.value) || !!node.expanded;
+  }
+
+  function isSelected(val: string | number): boolean {
+    return selectedValues.includes(val);
+  }
+
+  function handleSelect(node: TreeSelectOption) {
+    if (node.disabled) return;
+    const hasChildren = node.children && node.children.length > 0;
+    if (onlyLeafSelectable && hasChildren) {
+      toggleExpand(node.value);
+      return;
+    }
+
+    if (multiple) {
+      let next: (string | number)[];
+      if (isSelected(node.value)) {
+        next = selectedValues.filter((v) => v !== node.value);
+      } else {
+        next = [...selectedValues, node.value];
+      }
+      value = next;
+      onchange?.(next);
+    } else {
+      const next = node.value;
+      value = next;
+      onchange?.(next);
+      open = false;
+    }
+  }
+
+  function clearAll(event?: MouseEvent) {
+    event?.stopPropagation();
+    const next = multiple ? [] : undefined;
+    value = next;
+    onchange?.(next);
+  }
+
+  function removeSingle(val: string | number, event?: MouseEvent) {
+    event?.stopPropagation();
+    if (multiple) {
+      const next = selectedValues.filter((v) => v !== val);
+      value = next;
+      onchange?.(next);
+    }
+  }
+
+  function filterTree(nodes: TreeSelectOption[], query: string): TreeSelectOption[] {
+    const q = query.trim().toLowerCase();
+    if (!q) return nodes;
+
+    const filtered: TreeSelectOption[] = [];
+    for (const node of nodes) {
+      const matchSelf = node.label.toLowerCase().includes(q);
+      const filteredChildren = node.children ? filterTree(node.children, q) : undefined;
+      const matchChildren = filteredChildren && filteredChildren.length > 0;
+
+      if (matchSelf || matchChildren) {
+        filtered.push({
+          ...node,
+          children: filteredChildren ?? node.children,
+        });
+      }
+    }
+    return filtered;
+  }
+
+  const visibleOptions = $derived(filterTree(options, searchQuery));
+</script>
+
+{#snippet treeNode(node: TreeSelectOption, level: number)}
+  {@const hasChildren = Boolean(node.children && node.children.length > 0)}
+  {@const expanded = isNodeExpanded(node)}
+  {@const selected = isSelected(node.value)}
+  {@const selectable = !node.disabled && (!onlyLeafSelectable || !hasChildren)}
+
+  <div class="flex flex-col">
+    <div
+      role="treeitem"
+      tabindex="0"
+      aria-selected={selected}
+      aria-expanded={hasChildren ? expanded : undefined}
+      class={cn(
+        'group flex items-center justify-between gap-1.5 rounded-md px-2 py-1.5 text-xs transition-colors cursor-pointer select-none',
+        selected ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted/60 text-foreground',
+        node.disabled && 'opacity-50 cursor-not-allowed pointer-events-none'
+      )}
+      style="padding-left: {level * 16 + 8}px;"
+      onclick={() => {
+        if (selectable) handleSelect(node);
+      }}
+      onkeydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          if (selectable) handleSelect(node);
+        }
+      }}
+    >
+      <div class="flex min-w-0 items-center gap-1.5">
+        {#if hasChildren}
+          <button
+            type="button"
+            class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted"
+            onclick={(e) => toggleExpand(node.value, e)}
+          >
+            {#if expanded}
+              <ChevronDown class="h-3.5 w-3.5" />
+            {:else}
+              <ChevronRight class="h-3.5 w-3.5" />
+            {/if}
+          </button>
+        {:else}
+          <span class="inline-block h-4 w-4 shrink-0"></span>
+        {/if}
+
+        <span class="truncate">{node.label}</span>
+      </div>
+
+      {#if selected}
+        <Check class="h-3.5 w-3.5 shrink-0 text-primary" />
+      {/if}
+    </div>
+
+    {#if hasChildren && expanded && node.children}
+      <div role="group" class="flex flex-col">
+        {#each node.children as child (child.value)}
+          {@render treeNode(child, level + 1)}
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+<div class={cn('relative w-full', className)} data-testid="tree-select">
+  <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'
+          )}
+        >
+          <div class="flex flex-wrap items-center gap-1 min-w-0 flex-1">
+            {#if selectedValues.length === 0}
+              <span class="text-muted-foreground">
+                {placeholder ?? (i18n.t('field.selectPlaceholder', undefined) ?? '请选择...')}
+              </span>
+            {:else if multiple}
+              {#each selectedValues as val (val)}
+                {@const opt = optionMap.get(val)}
+                <Badge variant="secondary" class="h-5 px-1.5 py-0 text-[11px] gap-1 shrink-0">
+                  <span>{opt?.label ?? val}</span>
+                  {#if !disabled}
+                    <span
+                      role="button"
+                      tabindex="0"
+                      class="hover:text-destructive cursor-pointer"
+                      onclick={(e) => removeSingle(val, e)}
+                      onkeydown={(e) => {
+                        if (e.key === 'Enter') removeSingle(val, e as never);
+                      }}
+                    >
+                      <X class="h-3 w-3" />
+                    </span>
+                  {/if}
+                </Badge>
+              {/each}
+            {:else}
+              <span class="truncate text-foreground font-normal">
+                {selectedLabels[0] ?? ''}
+              </span>
+            {/if}
+          </div>
+
+          <div class="flex items-center gap-1 shrink-0 ml-1 text-muted-foreground">
+            {#if allowClear && selectedValues.length > 0 && !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-(--bits-popover-anchor-width) min-w-[220px] max-w-[400px] p-2" align="start">
+      {#if searchable}
+        <div class="relative mb-2">
+          <Search class="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
+          <Input
+            type="text"
+            bind:value={searchQuery}
+            placeholder={i18n.t('common.search', undefined) ?? '搜索...'}
+            class="h-8 pl-8 pr-2 text-xs"
+          />
+        </div>
+      {/if}
+
+      <div role="tree" class="max-h-60 overflow-y-auto space-y-0.5 pr-1">
+        {#each visibleOptions as rootNode (rootNode.value)}
+          {@render treeNode(rootNode, 0)}
+        {:else}
+          <div class="py-6 text-center text-xs text-muted-foreground">
+            {i18n.t('common.noData', undefined) ?? '无匹配选项'}
+          </div>
+        {/each}
+      </div>
+    </Popover.Content>
+  </Popover.Root>
+</div>

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

@@ -0,0 +1,22 @@
+export interface TreeSelectOption {
+    value: string | number;
+    label: string;
+    children?: TreeSelectOption[];
+    disabled?: boolean;
+    expanded?: boolean;
+}
+interface Props {
+    options?: TreeSelectOption[];
+    value?: string | number | (string | number)[];
+    multiple?: boolean;
+    placeholder?: string;
+    searchable?: boolean;
+    onlyLeafSelectable?: boolean;
+    disabled?: boolean;
+    allowClear?: boolean;
+    class?: string;
+    onchange?: (value: string | number | (string | number)[] | undefined) => void;
+}
+declare const TreeSelect: import("svelte").Component<Props, {}, "value">;
+type TreeSelect = ReturnType<typeof TreeSelect>;
+export default TreeSelect;

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;