@svadmin/ui 0.72.0 → 0.74.0

package/dist/components/svar-grid-resource-session.svelte.js

@@ -0,0 +1,61 @@
+import { onDestroy, untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+import { SvarLoadCancelled } from './svar-grid-loading.js';
+/** Query workers remain descendants of the host AdminContext and QueryClientProvider. */
+export function createSvarResourceReads(options) {
+    const requests = new SvelteMap();
+    const pending = new Map();
+    let sequence = 0;
+    let alive = true;
+    function cancelAll() { for (const entry of [...pending.values()])
+        entry.cancel(); }
+    onDestroy(() => { alive = false; cancelAll(); });
+    $effect.pre(() => {
+        const scope = options.scope();
+        const available = options.current(scope);
+        untrack(() => {
+            for (const entry of [...pending.values()])
+                if (!available || entry.scope !== scope)
+                    entry.cancel();
+        });
+    });
+    async function read(input) {
+        const { scope, signal } = input;
+        const current = () => alive && !signal.aborted && options.current(scope);
+        if (!current())
+            throw new SvarLoadCancelled();
+        if (!await options.authorize(scope, input.parentId))
+            throw new Error('Resource read access denied');
+        if (!current())
+            throw new SvarLoadCancelled();
+        return new Promise((resolve, reject) => {
+            const id = ++sequence;
+            let settled = false;
+            const finish = (callback) => {
+                if (settled)
+                    return;
+                settled = true;
+                signal.removeEventListener('abort', abort);
+                pending.delete(id);
+                requests.delete(id);
+                callback();
+            };
+            const abort = () => finish(() => reject(new SvarLoadCancelled()));
+            pending.set(id, { scope, cancel: abort });
+            signal.addEventListener('abort', abort, { once: true });
+            if (!current()) {
+                abort();
+                return;
+            }
+            const childrenKey = options.childrenKey();
+            requests.set(id, {
+                resourceName: options.resourceName(), dataScopeKey: options.dataScopeKey(), primaryKey: options.primaryKey(),
+                ...(childrenKey === undefined ? {} : { childrenKey }),
+                pagination: { ...input.pagination }, filters: input.filters, sorters: input.sorters,
+                resolve(page) { finish(() => current() ? resolve(page) : reject(new SvarLoadCancelled())); },
+                reject(error) { finish(() => reject(current() ? error : new SvarLoadCancelled())); },
+            });
+        });
+    }
+    return { requests, read, cancelAll };
+}

package/dist/components/table-contract.d.ts

@@ -1,7 +1,18 @@
-import type { BaseRecord } from '@svadmin/core';
+import type { BaseRecord, Filter, Sort } from '@svadmin/core';
 export type TableRecord = BaseRecord & {
     id: string | number;
 };
+export type BatchSelection = {
+    scope: 'selected';
+    ids: (string | number)[];
+    currentPageIds: (string | number)[];
+} | {
+    scope: 'all';
+    filters: Filter[];
+    sorters: Sort[];
+    total: number;
+    excludedIds: (string | number)[];
+};
 /** The list hook validates business fields; this adapter proves table identity and detaches UI reads. */
 export declare function copyTableRecord(value: unknown): TableRecord;
 export declare function tableRowKey(id: string | number): string;

package/dist/components/task-action.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { TaskProvider } from '@svadmin/core';
+export declare function createTaskAction(options: {
+    action: 'cancel' | 'retry';
+    taskId: string;
+    provider?: TaskProvider | undefined;
+    disabled: boolean;
+    onSuccess?: (() => void) | undefined;
+    onError?: ((error: unknown) => void) | undefined;
+}): {
+    run: () => Promise<void>;
+    readonly pending: boolean;
+    readonly available: boolean;
+};

package/dist/components/task-action.svelte.js

@@ -0,0 +1,73 @@
+import { onDestroy } from 'svelte';
+import { captureAdminContext, captureAuthSession, queryKeyMatches, TaskError, withValidatedTaskProvider } from '@svadmin/core';
+import { useQueryClient } from '@tanstack/svelte-query';
+export function createTaskAction(options) {
+    const context = captureAdminContext();
+    const client = useQueryClient();
+    const provider = $derived(options.provider ?? context.taskProvider);
+    const scope = $derived({
+        provider, id: options.taskId, tenant: context.tenantCacheKey?.__svadminTenant,
+        auth: context.authProvider, session: captureAuthSession(context.authProvider),
+        router: context.routerProvider, access: context.accessControlProvider,
+    });
+    let mounted = true;
+    let attempt = $state.raw();
+    function current(origin) {
+        return mounted && origin.provider === scope.provider && origin.id === scope.id
+            && origin.tenant === scope.tenant && origin.auth === scope.auth
+            && origin.router === scope.router && origin.access === scope.access
+            && origin.session.isCurrent();
+    }
+    onDestroy(() => { mounted = false; attempt = undefined; });
+    $effect.pre(() => {
+        if (attempt && !current(attempt.scope))
+            attempt = undefined;
+    });
+    const pending = $derived(!!attempt && current(attempt.scope));
+    const available = $derived(!options.disabled && scope.session.available && !!provider?.[options.action]);
+    async function run() {
+        if (!available || pending || !mounted || !provider)
+            return;
+        const origin = scope;
+        const token = { scope: origin };
+        const matcher = context.queryKeyMatcher();
+        const success = options.onSuccess;
+        const failure = options.onError;
+        attempt = token;
+        let error;
+        let failed = false;
+        let deliver;
+        try {
+            const operation = withValidatedTaskProvider(provider)[options.action];
+            if (!operation)
+                return;
+            await operation(origin.id);
+            if (!current(origin) || attempt !== token)
+                return;
+            await Promise.allSettled([client.invalidateQueries({
+                    predicate: query => queryKeyMatches(query.queryKey, { ...matcher, kind: 'task', action: 'list' })
+                        || queryKeyMatches(query.queryKey, { ...matcher, kind: 'task', action: 'one', id: origin.id }),
+                })]);
+        }
+        catch (cause) {
+            failed = true;
+            error = cause instanceof TaskError ? cause : new TaskError('TASK_PROVIDER_FAILED');
+        }
+        finally {
+            deliver = current(origin) && attempt === token;
+            if (attempt === token)
+                attempt = undefined;
+        }
+        if (!deliver || !current(origin))
+            return;
+        // 观察者异常不能被误报为服务端操作失败，也不能形成未处理的 Promise。
+        try {
+            if (failed)
+                await failure?.(error);
+            else
+                await success?.();
+        }
+        catch { /* 回调由宿主管理，不重试已发出的写入。 */ }
+    }
+    return { run, get pending() { return pending; }, get available() { return available; } };
+}

package/dist/components/ui/DesignSystemShowcase.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import { Button } from "./button/index.js";
+	import Badge from "./badge/badge.svelte";
+	import Checkbox from "./checkbox/checkbox.svelte";
+	import Input from "./input/input.svelte";
+	import Select from "./select/select.svelte";
+	import * as Tabs from "./tabs/index.js";
+	import * as DropdownMenu from "./dropdown-menu/index.js";
+	import * as Dialog from "./dialog/index.js";
+	import * as Tooltip from "./tooltip/index.js";
+	import * as Table from "./table/index.js";
+	import StatusBadge from "../content/StatusBadge.svelte";
+
+	let dialogOpen = $state(false);
+</script>
+
+<div class="svadmin-design-system-showcase">
+	<section aria-labelledby="buttons-heading">
+		<h2 id="buttons-heading">Button states / 按钮状态</h2>
+		<div class="svadmin-design-system-showcase__row">
+			<Button>Default</Button>
+			<Button variant="outline">Outline</Button>
+			<Button variant="secondary" size="sm">Compact</Button>
+			<Button disabled>Disabled</Button>
+		</div>
+	</section>
+
+	<section aria-labelledby="fields-heading">
+		<h2 id="fields-heading">Fields and selection / 字段与选择</h2>
+		<div class="svadmin-design-system-showcase__grid">
+			<Input aria-label="Default input" placeholder="Default" />
+			<Input aria-label="Compact input" size="compact" placeholder="Compact" />
+			<Select aria-label="Status" size="compact" placeholder="Choose a status" />
+			<label class="svadmin-design-system-showcase__checkbox">
+				<Checkbox aria-label="Enabled" size="compact" />
+				Enabled
+			</label>
+		</div>
+	</section>
+
+	<section aria-labelledby="status-heading">
+		<h2 id="status-heading">Semantic status / 语义状态</h2>
+		<div class="svadmin-design-system-showcase__row">
+			<Badge variant="subtle-success">Success</Badge>
+			<Badge variant="subtle-warning">Warning</Badge>
+			<Badge variant="subtle-destructive">Danger</Badge>
+			<Badge variant="outline" size="compact">Compact</Badge>
+		</div>
+	</section>
+
+	<section aria-labelledby="tabs-heading">
+		<h2 id="tabs-heading">Tabs interaction / 标签页交互</h2>
+		<Tabs.Root value="overview">
+			<Tabs.List aria-label="Design system sections">
+				<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+				<Tabs.Trigger value="states">States</Tabs.Trigger>
+				<Tabs.Trigger value="disabled" disabled>Disabled</Tabs.Trigger>
+			</Tabs.List>
+			<Tabs.Content value="overview">Overview content</Tabs.Content>
+			<Tabs.Content value="states">State content</Tabs.Content>
+		</Tabs.Root>
+	</section>
+
+	<section aria-labelledby="overlay-heading">
+		<h2 id="overlay-heading">Menus and overlays / 菜单与浮层</h2>
+		<div class="svadmin-design-system-showcase__row">
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger class="svadmin-design-system-showcase__trigger">Menu</DropdownMenu.Trigger>
+				<DropdownMenu.Content>
+					<DropdownMenu.Item>View details</DropdownMenu.Item>
+					<DropdownMenu.Item disabled>Disabled action</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+			<Dialog.Root bind:open={dialogOpen}>
+				<Dialog.Trigger class="svadmin-design-system-showcase__trigger">Open dialog</Dialog.Trigger>
+				<Dialog.Content>
+					<Dialog.Header>
+						<Dialog.Title>Component dialog</Dialog.Title>
+						<Dialog.Description>Dialog focus and close behavior.</Dialog.Description>
+					</Dialog.Header>
+					<Dialog.Footer>
+						<Dialog.Close class="svadmin-design-system-showcase__trigger">Close</Dialog.Close>
+					</Dialog.Footer>
+				</Dialog.Content>
+			</Dialog.Root>
+			<Tooltip.Root>
+				<Tooltip.Trigger class="svadmin-design-system-showcase__trigger">Hover hint</Tooltip.Trigger>
+				<Tooltip.Content>Tooltip content</Tooltip.Content>
+			</Tooltip.Root>
+		</div>
+	</section>
+
+	<section aria-labelledby="table-heading">
+		<h2 id="table-heading">Table and status / 表格与状态</h2>
+		<div class="svadmin-design-system-showcase__row">
+			<StatusBadge status="success" label="Ready" />
+			<StatusBadge status="warning" label="Review" />
+			<StatusBadge status="danger" label="Blocked" />
+		</div>
+		<Table.Root>
+			<Table.Header>
+				<Table.Row>
+					<Table.Head>Component</Table.Head>
+					<Table.Head>State</Table.Head>
+				</Table.Row>
+			</Table.Header>
+			<Table.Body>
+				<Table.Row>
+					<Table.Cell>Table</Table.Cell>
+					<Table.Cell>Ready</Table.Cell>
+				</Table.Row>
+			</Table.Body>
+		</Table.Root>
+	</section>
+</div>
+
+<style>
+	.svadmin-design-system-showcase {
+		display: grid;
+		gap: 1.5rem;
+		max-width: 64rem;
+		padding: 1.5rem;
+		color: var(--foreground);
+		background: var(--background);
+	}
+
+	.svadmin-design-system-showcase section {
+		display: grid;
+		gap: 0.75rem;
+	}
+
+	.svadmin-design-system-showcase h2 {
+		margin: 0;
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+
+	.svadmin-design-system-showcase__row,
+	.svadmin-design-system-showcase__grid {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.svadmin-design-system-showcase__grid > :global(*) {
+		min-width: 12rem;
+		flex: 1 1 12rem;
+	}
+
+	.svadmin-design-system-showcase__checkbox {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	:global(.svadmin-design-system-showcase__trigger) {
+		border: 1px solid var(--border);
+		border-radius: 0.375rem;
+		background: var(--background);
+		padding: 0.375rem 0.625rem;
+		color: var(--foreground);
+	}
+</style>

package/dist/components/ui/DesignSystemShowcase.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DesignSystemShowcase: import("svelte").Component<Record<string, never>, {}, "">;
+type DesignSystemShowcase = ReturnType<typeof DesignSystemShowcase>;
+export default DesignSystemShowcase;

package/dist/components/ui/badge/badge-variants.d.ts

@@ -1,6 +1,7 @@
-export type BadgeVariant = "default" | "secondary" | "destructive" | "subtle" | "subtle-success" | "subtle-warning" | "subtle-destructive" | "subtle-pill" | "outline" | "ghost" | "link";
+import { type BadgeRecipeProps } from '../../../recipes.js';
+export type BadgeVariant = NonNullable<BadgeRecipeProps["variant"]>;
 export declare const badgeVariants: ({ variant, class: className, className: extraClassName, }?: {
-    variant?: BadgeVariant | null;
+    variant?: BadgeVariant | null | undefined;
     class?: string;
     className?: string;
 }) => string;

package/dist/components/ui/badge/badge-variants.js

@@ -1 +1,2 @@
-export const badgeVariants = ({ variant = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-badge", variant && `svadmin-badge--${variant}`, className, extraClassName].filter(Boolean).join(" ");
+import { badgeRecipe as uiBadge } from '../../../recipes.js';
+export const badgeVariants = ({ variant, class: className = "", className: extraClassName = "", } = {}) => uiBadge({ variant, class: [className, extraClassName].filter(Boolean).join(" ") }).root;

package/dist/components/ui/badge/badge.svelte

@@ -13,10 +13,12 @@
 		href,
 		class: className,
 		variant = "default",
+		size = "default",
 		children,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
 		variant?: BadgeVariantValue;
+		size?: "default" | "compact";
 	} = $props();
 </script>
 
@@ -25,6 +27,7 @@
 	bind:this={ref}
 	data-slot="badge"
 	data-variant={variant}
+	data-size={size}
 	{href}
 	class={cn(resolveBadgeVariants({ variant }), className)}
 	{...restProps}

package/dist/components/ui/badge/badge.svelte.d.ts

@@ -4,6 +4,7 @@ import type { HTMLAnchorAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
     variant?: BadgeVariantValue;
+    size?: "default" | "compact";
 };
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Badge = ReturnType<typeof Badge>;

package/dist/components/ui/button/button-variants.d.ts

@@ -1,8 +1,9 @@
-export type ButtonVariant = "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
-export type ButtonSize = "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+import { type ButtonRecipeProps } from '../../../recipes.js';
+export type ButtonVariant = NonNullable<ButtonRecipeProps["variant"]>;
+export type ButtonSize = NonNullable<ButtonRecipeProps["size"]>;
 export declare const buttonVariants: ({ variant, size, class: className, className: extraClassName, }?: {
-    variant?: ButtonVariant | null;
-    size?: ButtonSize | null;
+    variant?: ButtonVariant | null | undefined;
+    size?: ButtonSize | null | undefined;
     class?: string;
     className?: string;
 }) => string;

package/dist/components/ui/button/button-variants.js

@@ -1,2 +1,7 @@
-// Keep the public helper for composition, while styles are owned by app.css.
-export const buttonVariants = ({ variant = "default", size = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-button", variant && `svadmin-button--${variant}`, size && `svadmin-button-size--${size}`, className, extraClassName].filter(Boolean).join(" ");
+import { buttonRecipe } from '../../../recipes.js';
+// 只组合语义类，不要求消费者安装 Tailwind 编译器或 class merger。
+export const buttonVariants = ({ variant, size, class: className = "", className: extraClassName = "", } = {}) => buttonRecipe({
+    variant,
+    size,
+    class: [className, extraClassName].filter(Boolean).join(" "),
+}).root;

package/dist/components/ui/checkbox/checkbox.svelte

@@ -8,14 +8,18 @@
 		ref = $bindable(null),
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
+		size = "default",
 		class: className,
 		...restProps
-	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+	}: Omit<WithoutChildrenOrChild<CheckboxPrimitive.RootProps>, "size"> & {
+		size?: "default" | "compact";
+	} = $props();
 </script>
 
 <CheckboxPrimitive.Root
 	bind:ref
 	data-slot="checkbox"
+	data-size={size}
 	class={cn("svadmin-checkbox", className)}
 	bind:checked
 	bind:indeterminate

package/dist/components/ui/checkbox/checkbox.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Checkbox as CheckboxPrimitive } from "bits-ui";
-declare const Checkbox: import("svelte").Component<Omit<CheckboxPrimitive.RootProps, "children" | "child">, {}, "ref" | "checked" | "indeterminate">;
+import { type WithoutChildrenOrChild } from "../../../utils.js";
+type $$ComponentProps = Omit<WithoutChildrenOrChild<CheckboxPrimitive.RootProps>, "size"> & {
+    size?: "default" | "compact";
+};
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/ui/input/input.svelte

@@ -11,7 +11,8 @@
 		? number | null | undefined
 		: string | null | undefined;
 
-	type Props = WithElementRef<Omit<HTMLInputAttributes, "type" | "value">> &
+	type Props = WithElementRef<Omit<HTMLInputAttributes, "type" | "value" | "size">> &
+			{ size?: "default" | "compact"; nativeSize?: number } &
 			(Type extends "file"
 				? { type: "file"; files?: FileList; value?: never }
 				: { type?: Type; files?: undefined; value?: InputValue });
@@ -22,6 +23,8 @@
 		type,
 		files = $bindable(),
 		disabled,
+		size = "default",
+		nativeSize,
 		class: className,
 		"data-slot": dataSlot = "input",
 		...restProps
@@ -30,7 +33,7 @@
 	const i18n = useTranslation();
 	const isFileInput = $derived(type?.toLowerCase() === "file");
 	const isDateInput = $derived(["date", "datetime-local", "month", "week", "time"].includes(type?.toLowerCase() ?? ""));
-	const attributes = $derived(definedOptions({ ...restProps, disabled }));
+	const attributes = $derived(definedOptions({ ...restProps, disabled, size: nativeSize }));
 	const selectedFiles = $derived(files ? Array.from(files) : []);
 	const selectedFileLabel = $derived.by(() => {
 		const firstFile = selectedFiles[0];
@@ -48,6 +51,7 @@
 		<input
 			bind:this={ref}
 			data-slot={dataSlot}
+			data-size={size}
 			data-input-type="file"
 			class={cn("svadmin-input", className)}
 			type="file"
@@ -63,10 +67,8 @@
 	<input
 		bind:this={ref}
 		data-slot={dataSlot}
-		class={cn(
-			"svadmin-input",
-			className
-		)}
+		data-size={size}
+			class={cn("svadmin-input", className)}
 			{type}
 			lang={isDateInput ? i18n.locale : undefined}
 			bind:value

package/dist/components/ui/input/input.svelte.d.ts

@@ -1,7 +1,10 @@
 import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
 declare function $$render<Type extends HTMLInputTypeAttribute | undefined = undefined>(): {
-    props: Omit<HTMLInputAttributes, "type" | "value"> & {
+    props: Omit<HTMLInputAttributes, "type" | "size" | "value"> & {
         ref?: HTMLElement | null;
+    } & {
+        size?: "default" | "compact";
+        nativeSize?: number;
     } & (Type extends "file" ? {
         type: "file";
         files?: FileList;

package/dist/components/ui/select/select.svelte

@@ -4,8 +4,9 @@
 
 	// Use HTMLElement instead of HTMLSelectElement to avoid TS error:
 	// HTMLSelectElement.remove() returns void, incompatible with HTMLElement's Element return
-	type Props = WithElementRef<HTMLSelectAttributes, HTMLElement> & {
+	type Props = Omit<WithElementRef<HTMLSelectAttributes, HTMLElement>, "size"> & {
 		placeholder?: string;
+		size?: "default" | "compact";
 	};
 
 	let {
@@ -13,6 +14,7 @@
 		value = $bindable(""),
 		class: className,
 		placeholder,
+		size = "default",
 		children,
 		...restProps
 	}: Props = $props();
@@ -21,6 +23,7 @@
 <select
 	bind:this={ref}
 	data-slot="select"
+	data-size={size}
 	class={cn(
 		"svadmin-select",
 		className

package/dist/components/ui/select/select.svelte.d.ts

@@ -1,7 +1,8 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLSelectAttributes } from "svelte/elements";
-type Props = WithElementRef<HTMLSelectAttributes, HTMLElement> & {
+type Props = Omit<WithElementRef<HTMLSelectAttributes, HTMLElement>, "size"> & {
     placeholder?: string;
+    size?: "default" | "compact";
 };
 declare const Select: import("svelte").Component<Props, {}, "value" | "ref">;
 type Select = ReturnType<typeof Select>;

package/dist/components/ui/textarea/textarea.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import { textareaRecipe as uiTextarea } from "../../../recipes.js";
 
 	type Props = WithElementRef<HTMLTextareaAttributes, HTMLTextAreaElement>;
 
@@ -15,7 +16,7 @@
 <textarea
 	bind:this={ref}
 	data-slot="textarea"
-	class={cn("svadmin-textarea", className)}
+	class={cn(uiTextarea().root, className)}
 	bind:value
 	{...restProps}
 ></textarea>