@svadmin/ui 0.78.1 → 0.79.0

package/dist/components/content/AuditContent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { definedOptions } from '@svadmin/core/options';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import DataState from './DataState.svelte';
+  import { Button } from '../ui/button/index.js';
+  import { RefreshCw } from '@lucide/svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  let { state = 'ready', message, retry, children }: {
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+    children?: Snippet | undefined;
+  } = $props();
+  const i18n = useTranslation();
+</script>
+
+{#if state === 'loading' || state === 'empty' || state === 'error' || state === 'forbidden'}
+  <DataState {state} {...definedOptions({ title: message, retry: state === 'error' ? retry : undefined })} />
+{:else}
+  {#if state === 'partial' || state === 'readonly'}
+    <div class="svadmin-audit-notice" data-state={state} role="status">
+      <span>{message ?? (state === 'partial'
+        ? (i18n.locale === 'zh-CN' ? '部分数据暂不可用' : 'Some data is unavailable')
+        : (i18n.locale === 'zh-CN' ? '只读' : 'Read only'))}</span>
+      {#if state === 'partial' && retry}
+        <Button variant="outline" size="sm" onclick={retry}><RefreshCw size={16} aria-hidden="true" />{i18n.t('common.retry')}</Button>
+      {/if}
+    </div>
+  {/if}
+  {@render children?.()}
+{/if}

package/dist/components/content/AuditContent.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { AuditDataState } from './audit-state.js';
+type $$ComponentProps = {
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+    children?: Snippet | undefined;
+};
+declare const AuditContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type AuditContent = ReturnType<typeof AuditContent>;
+export default AuditContent;

package/dist/components/content/AuditSection.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import AuditContent from './AuditContent.svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  export type AuditAccent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+
+  interface Props {
+    title: string;
+    description?: string | undefined;
+    eyebrow?: string;
+    accent?: AuditAccent;
+    actions?: Snippet | undefined;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+  }
+
+  let {
+    title,
+    description,
+    eyebrow,
+    accent = 'primary',
+    actions,
+    children,
+    class: className = '',
+    state = 'ready',
+    message,
+    retry,
+  }: Props = $props();
+</script>
+
+<section aria-label={title} class={cn('svadmin-audit-section', className)} data-svadmin-audit-section data-accent={accent} data-state={state}>
+  <header class="svadmin-audit-section__header">
+    <div class="svadmin-audit-section__heading">
+      {#if eyebrow}<p class="svadmin-audit-section__eyebrow">{eyebrow}</p>{/if}
+      <h2>{title}</h2>
+      {#if description}<p class="svadmin-audit-section__description">{description}</p>{/if}
+    </div>
+    {#if actions && state !== 'forbidden'}<div class="svadmin-audit-section__actions">{@render actions()}</div>{/if}
+  </header>
+  <div class="svadmin-audit-section__body"><AuditContent {state} {message} {retry} {children} /></div>
+</section>

package/dist/components/content/AuditSection.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { AuditDataState } from './audit-state.js';
+export type AuditAccent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+interface Props {
+    title: string;
+    description?: string | undefined;
+    eyebrow?: string;
+    accent?: AuditAccent;
+    actions?: Snippet | undefined;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+}
+declare const AuditSection: import("svelte").Component<Props, {}, "">;
+type AuditSection = ReturnType<typeof AuditSection>;
+export default AuditSection;

package/dist/components/content/ChartContainer.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import AuditSection from './AuditSection.svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+  }
+
+  let {
+    title,
+    description,
+    actions,
+    children,
+    class: className = '',
+    state = 'ready',
+    message,
+    retry,
+  }: Props = $props();
+</script>
+
+<AuditSection {title} {description} {actions} {state} {message} {retry} accent="info" class={cn('svadmin-chart-container', className)}>
+  <div class="svadmin-chart-container__body">{@render children?.()}</div>
+</AuditSection>

package/dist/components/content/ChartContainer.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { AuditDataState } from './audit-state.js';
+interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+}
+declare const ChartContainer: import("svelte").Component<Props, {}, "">;
+type ChartContainer = ReturnType<typeof ChartContainer>;
+export default ChartContainer;

package/dist/components/content/CoverageMatrix.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import type { AuditAccent } from './AuditSection.svelte';
+  import AuditContent from './AuditContent.svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  export interface CoverageMatrixColumn {
+    key: string;
+    label: string;
+  }
+
+  export interface CoverageMatrixRow {
+    id: string;
+    title: string;
+    cells: Readonly<Record<string, string | undefined>>;
+    accent?: AuditAccent;
+  }
+
+  interface Props {
+    columns: readonly CoverageMatrixColumn[];
+    rows: readonly CoverageMatrixRow[];
+    class?: string;
+    caption: string;
+    rowLabel?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+  }
+
+  let { columns, rows, caption, rowLabel = '', state = 'ready', message, retry, class: className = '' }: Props = $props();
+</script>
+
+<AuditContent state={state === 'ready' && rows.length === 0 ? 'empty' : state} {message} {retry}>
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex (命名滚动区域需要键盘访问。) -->
+  <div class={cn('svadmin-coverage-matrix', className)} data-svadmin-coverage-matrix role="region" aria-label={caption} tabindex="0">
+    <table>
+      <caption>{caption}</caption>
+      <thead><tr><th scope="col">{rowLabel}</th>{#each columns as column (column.key)}<th scope="col">{column.label}</th>{/each}</tr></thead>
+      <tbody>
+        {#each rows as row (row.id)}
+          <tr data-accent={row.accent ?? 'neutral'}>
+            <th scope="row">{row.title}</th>
+            {#each columns as column (column.key)}<td>{row.cells[column.key] ?? '—'}</td>{/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</AuditContent>

package/dist/components/content/CoverageMatrix.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { AuditAccent } from './AuditSection.svelte';
+import type { AuditDataState } from './audit-state.js';
+export interface CoverageMatrixColumn {
+    key: string;
+    label: string;
+}
+export interface CoverageMatrixRow {
+    id: string;
+    title: string;
+    cells: Readonly<Record<string, string | undefined>>;
+    accent?: AuditAccent;
+}
+interface Props {
+    columns: readonly CoverageMatrixColumn[];
+    rows: readonly CoverageMatrixRow[];
+    class?: string;
+    caption: string;
+    rowLabel?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+}
+declare const CoverageMatrix: import("svelte").Component<Props, {}, "">;
+type CoverageMatrix = ReturnType<typeof CoverageMatrix>;
+export default CoverageMatrix;

package/dist/components/content/EvidenceCard.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import StatusPill, { type StatusPillTone } from './StatusPill.svelte';
+
+  interface Props {
+    title: string;
+    status: string;
+    statusTone?: StatusPillTone;
+    description?: string;
+    source?: string;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    title,
+    status,
+    statusTone = 'neutral',
+    description,
+    source,
+    children,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<article aria-label={title} class={cn('svadmin-evidence-card', className)} data-svadmin-evidence-card data-accent={statusTone}>
+  <div class="svadmin-evidence-card__header">
+    <h3>{title}</h3>
+    <StatusPill label={status} tone={statusTone} />
+  </div>
+  {#if description}<p class="svadmin-evidence-card__description">{description}</p>{/if}
+  {#if children}<div class="svadmin-evidence-card__body">{@render children()}</div>{/if}
+  {#if source}<p class="svadmin-evidence-card__source">{source}</p>{/if}
+</article>

package/dist/components/content/EvidenceCard.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import { type StatusPillTone } from './StatusPill.svelte';
+interface Props {
+    title: string;
+    status: string;
+    statusTone?: StatusPillTone;
+    description?: string;
+    source?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const EvidenceCard: import("svelte").Component<Props, {}, "">;
+type EvidenceCard = ReturnType<typeof EvidenceCard>;
+export default EvidenceCard;

package/dist/components/content/FilterToolbar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import * as Sheet from '../ui/sheet/index.js';
   import { Search, X, SlidersHorizontal, ChevronDown, ChevronUp } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
@@ -40,6 +42,15 @@
 
   const isCompact = $derived(density === 'compact');
   const advancedPanelId = `svadmin-filter-toolbar-advanced-${uid}`;
+  const i18n = useTranslation();
+  let mobile = $state(false);
+  onMount(() => {
+    const media = window.matchMedia('(max-width: 767px)');
+    const update = () => { mobile = media.matches; };
+    update();
+    media.addEventListener('change', update);
+    return () => media.removeEventListener('change', update);
+  });
 </script>
 
 <div class={cn('svadmin-filter-toolbar', className)} data-density={density} data-svadmin-filter-toolbar data-advanced-open={advanced && advancedOpen ? 'true' : 'false'}>
@@ -67,12 +78,12 @@
         {/if}
       </div>
     {/if}
-    {#if filters}
+    {#if filters && !mobile}
       <div class="svadmin-filter-toolbar__filters">
         {@render filters()}
       </div>
     {/if}
-    {#if advanced}
+    {#if advanced || (mobile && filters)}
       <Button
         variant={advancedOpen ? 'secondary' : 'outline'}
         size={isCompact ? 'sm' : 'default'}
@@ -101,7 +112,16 @@
       </div>
     {/if}
   </div>
-  {#if advanced && advancedOpen}
+  {#if mobile && (advanced || filters)}
+    <Sheet.Root bind:open={advancedOpen} class="svadmin-filter-bottom-sheet" role="dialog" aria-modal="true"
+      aria-label={advancedLabel} id={advancedPanelId} closeLabel={i18n.t('common.close')}>
+      <Sheet.Header><Sheet.Title>{advancedLabel}</Sheet.Title></Sheet.Header>
+      <Sheet.Content>
+        {@render filters?.()}
+        {@render advanced?.()}
+      </Sheet.Content>
+    </Sheet.Root>
+  {:else if advanced && advancedOpen}
     <div id={advancedPanelId} role="region" aria-label={advancedLabel} class="svadmin-filter-toolbar-advanced" aria-hidden="false">
       {@render advanced()}
     </div>

package/dist/components/content/FilterToolbar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 interface Props {
     query?: string;
     placeholder?: string;

package/dist/components/content/StatusPill.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import StatusBadge from './StatusBadge.svelte';
+
+  export type StatusPillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+
+  interface Props {
+    label: string;
+    tone?: StatusPillTone;
+    class?: string;
+  }
+
+  let { label, tone = 'neutral', class: className = '' }: Props = $props();
+</script>
+
+<StatusBadge status={tone} {label} class={cn('svadmin-status-pill', className)} />

package/dist/components/content/StatusPill.svelte.d.ts

@@ -0,0 +1,9 @@
+export type StatusPillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+interface Props {
+    label: string;
+    tone?: StatusPillTone;
+    class?: string;
+}
+declare const StatusPill: import("svelte").Component<Props, {}, "">;
+type StatusPill = ReturnType<typeof StatusPill>;
+export default StatusPill;

package/dist/components/content/audit-state.d.ts

@@ -0,0 +1 @@
+export type AuditDataState = 'ready' | 'loading' | 'empty' | 'partial' | 'error' | 'forbidden' | 'readonly';

package/dist/components/content/audit-state.js

@@ -0,0 +1 @@
+export {};

package/dist/components/content/index.d.ts

@@ -48,5 +48,14 @@ export { default as FeedbackNotice } from './FeedbackNotice.svelte';
 export type { FeedbackNoticeTone, FeedbackNoticePriority } from './FeedbackNotice.svelte';
 export { default as AuditTimeline } from './AuditTimeline.svelte';
 export type { TimelineItem } from './AuditTimeline.svelte';
+export { default as AuditSection } from './AuditSection.svelte';
+export type { AuditAccent } from './AuditSection.svelte';
+export type { AuditDataState } from './audit-state.js';
+export { default as ChartContainer } from './ChartContainer.svelte';
+export { default as CoverageMatrix } from './CoverageMatrix.svelte';
+export type { CoverageMatrixColumn, CoverageMatrixRow } from './CoverageMatrix.svelte';
+export { default as EvidenceCard } from './EvidenceCard.svelte';
+export { default as StatusPill } from './StatusPill.svelte';
+export type { StatusPillTone } from './StatusPill.svelte';
 export { default as MediaThumbnail } from './MediaThumbnail.svelte';
 export type { MediaThumbnailSize, MediaThumbnailFit } from './MediaThumbnail.svelte';

package/dist/components/content/index.js

@@ -33,4 +33,9 @@ export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
 export { default as FeedbackNotice } from './FeedbackNotice.svelte';
 export { default as AuditTimeline } from './AuditTimeline.svelte';
+export { default as AuditSection } from './AuditSection.svelte';
+export { default as ChartContainer } from './ChartContainer.svelte';
+export { default as CoverageMatrix } from './CoverageMatrix.svelte';
+export { default as EvidenceCard } from './EvidenceCard.svelte';
+export { default as StatusPill } from './StatusPill.svelte';
 export { default as MediaThumbnail } from './MediaThumbnail.svelte';

package/dist/components/list-column-preferences.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { ColumnVisibilityState } from '@tanstack/svelte-table';
+import type { FieldDefinition } from '@svadmin/core';
+import { type ListPreferenceScope, type SavedListViewState } from './saved-list-views.js';
+type ColumnPreferences = Pick<SavedListViewState, 'columnVisibility' | 'columnOrder'>;
+interface ListColumnPreferencesOptions {
+    scope: () => ListPreferenceScope;
+    columns: () => Set<string>;
+    fields: () => FieldDefinition[];
+    isScopeLoaded: () => boolean;
+    readPreference: (scope: ListPreferenceScope, key: string, legacyKey: string) => string | null;
+    initialViewState: ColumnPreferences | undefined;
+    onDirty: () => void;
+}
+export declare function createListColumnPreferences(options: ListColumnPreferencesOptions): {
+    visibility: {
+        readonly current: NoInfer<ColumnVisibilityState>;
+    };
+    order: {
+        readonly current: NoInfer<string[]>;
+    };
+    readScope: (scope: ListPreferenceScope) => ColumnPreferences;
+    captureState: () => ColumnPreferences;
+    applyState: (state: ColumnPreferences) => void;
+    setVisibility: (columnId: string, visible: boolean) => void;
+    setOrder: (columns: Array<{
+        id: string;
+    }>) => void;
+};
+export {};

package/dist/components/list-column-preferences.svelte.js

@@ -0,0 +1,92 @@
+import { untrack } from 'svelte';
+import { createAtom, useSelector } from '@tanstack/svelte-store';
+import { decodeBaseRecord } from '@svadmin/core/schema';
+import { columnOrderStorageKey, columnVisibilityStorageKey, legacyColumnOrderStorageKey, legacyColumnVisibilityStorageKey, } from './saved-list-views.js';
+export function createListColumnPreferences(options) {
+    const visibilityAtom = createAtom(untrack(() => (options.initialViewState?.columnVisibility ?? readVisibility(options.scope()))));
+    const orderAtom = createAtom(untrack(() => (options.initialViewState?.columnOrder.length
+        ? options.initialViewState.columnOrder : readOrder(options.scope()))));
+    const visibility = useSelector(visibilityAtom);
+    const order = useSelector(orderAtom);
+    function readVisibility(scope) {
+        const stored = options.readPreference(scope, columnVisibilityStorageKey(scope), legacyColumnVisibilityStorageKey(scope.resourceName));
+        if (stored) {
+            try {
+                const parsed = JSON.parse(stored);
+                if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                    const visibility = {};
+                    for (const [columnId, visible] of Object.entries(decodeBaseRecord(parsed))) {
+                        if (options.columns().has(columnId) && typeof visible === 'boolean')
+                            visibility[columnId] = visible;
+                    }
+                    return visibility;
+                }
+            }
+            catch { /* fall through to resource defaults */ }
+        }
+        const visibility = {};
+        for (const field of options.fields()) {
+            if (field.showInList === false)
+                visibility[field.key] = false;
+        }
+        return visibility;
+    }
+    function readOrder(scope) {
+        const stored = options.readPreference(scope, columnOrderStorageKey(scope), legacyColumnOrderStorageKey(scope.resourceName));
+        if (!stored)
+            return [];
+        try {
+            const parsed = JSON.parse(stored);
+            return Array.isArray(parsed)
+                ? [...new Set(parsed.filter((columnId) => (typeof columnId === 'string' && options.columns().has(columnId))))]
+                : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    function persistOrder(ids) {
+        if (typeof window === 'undefined' || !options.isScopeLoaded())
+            return;
+        try {
+            localStorage.setItem(columnOrderStorageKey(options.scope()), JSON.stringify(ids));
+        }
+        catch { /* keep in-memory preferences when storage is unavailable */ }
+    }
+    $effect(() => {
+        if (!options.isScopeLoaded())
+            return;
+        const storageKey = columnVisibilityStorageKey(options.scope());
+        if (typeof window !== 'undefined') {
+            try {
+                localStorage.setItem(storageKey, JSON.stringify(visibility.current));
+            }
+            catch { /* keep in-memory preferences when storage is unavailable */ }
+        }
+    });
+    $effect(() => {
+        if (!options.isScopeLoaded())
+            return;
+        persistOrder(order.current);
+    });
+    function readScope(scope) {
+        return { columnVisibility: readVisibility(scope), columnOrder: readOrder(scope) };
+    }
+    function captureState() {
+        return { columnVisibility: { ...visibility.current }, columnOrder: [...order.current] };
+    }
+    function applyState(state) {
+        visibilityAtom.set(state.columnVisibility);
+        orderAtom.set(state.columnOrder);
+        persistOrder(state.columnOrder);
+    }
+    function setVisibility(columnId, visible) {
+        options.onDirty();
+        visibilityAtom.set({ ...visibility.current, [columnId]: visible });
+    }
+    function setOrder(columns) {
+        options.onDirty();
+        orderAtom.set(columns.map(column => column.id));
+    }
+    return { visibility, order, readScope, captureState, applyState, setVisibility, setOrder };
+}

package/dist/components/list-deletion.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { createListSelection } from './list-selection.svelte.js';
+interface DeleteRequest {
+    ids: (string | number)[];
+    batch: boolean;
+}
+interface ListDeletionOptions {
+    canRequestSingle: () => boolean;
+    canRequestBatch: () => boolean;
+    canConfirm: () => boolean;
+    permission: () => {
+        isLoading: boolean;
+        allowed: boolean;
+    };
+    selection: () => Pick<ReturnType<typeof createListSelection>, 'selectedIds' | 'captureExplicit' | 'restoreExplicit' | 'retainFailedIds'>;
+    clearSelection: () => void;
+    captureScope: () => () => boolean;
+    mutate: (ids: (string | number)[]) => Promise<unknown>;
+    reportError: (message: string | null) => void;
+    messages: {
+        single: () => string;
+        batch: (count: number) => string;
+        failure: () => string;
+        partial: (failed: number, total: number) => string;
+    };
+}
+export declare function createListDeletion(options: ListDeletionOptions): {
+    readonly request: DeleteRequest | null;
+    readonly open: boolean;
+    readonly pending: boolean;
+    readonly message: string;
+    requestDelete: (id: string | number) => void;
+    requestBatchDelete: () => void;
+    confirm: () => Promise<void>;
+    cancel: () => void;
+    cancelBatchOnCriteriaChange: () => void;
+    reset: () => void;
+};
+export {};