@svadmin/ui 0.74.0 → 0.75.0

package/dist/components/AdminApp.svelte

@@ -575,15 +575,15 @@
       {#key renderedRoute + (renderedParams['resource'] ?? '') + (renderedParams['id'] ?? '') + (renderedParams['variant'] ?? '') + (renderedParams['columns'] ?? '')}
       <div class="svadmin-page-enter">
       {#if renderedRoute === '/public-profile'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects' }} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects' } as const} />
       {:else if renderedRoute === '/public-profile/projects/:columns'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects', columns: renderedParams['columns']?.includes('3') ? 3 : 2 }} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects', columns: renderedParams['columns']?.includes('3') ? 3 : 2 } as const} />
       {:else if renderedRoute === '/public-profile/activity'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'activity' }} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'activity' } as const} />
       {:else if renderedRoute === '/public-profile/teams'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'teams' }} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'teams' } as const} />
       {:else if renderedRoute === '/public-profile/profiles/:variant'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: (renderedParams['variant'] === 'company' || renderedParams['variant'] === 'gamer' || renderedParams['variant'] === 'default' ? renderedParams['variant'] : 'default') as 'company' | 'gamer' | 'default', showSections: true }} />
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: (renderedParams['variant'] === 'company' || renderedParams['variant'] === 'gamer' || renderedParams['variant'] === 'default' ? renderedParams['variant'] : 'default') as 'company' | 'gamer' | 'default', showSections: true } as const} />
       {:else if renderedRoute === '/account/get-started' || renderedRoute === '/account/home/get-started'}
         <LazyPage loader={loadGetStartedPage} props={{}} />
       {:else if renderedRoute === '/account/home/user-profile'}

package/dist/components/DatePicker.svelte

@@ -4,7 +4,7 @@
 
   export type DatePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
 
-  let props: DatePickerProps = $props();
+  let { value = $bindable(null), ...props }: DatePickerProps = $props();
 </script>
 
-<DateTimeInput {...props} mode="date" />
+<DateTimeInput {...props} bind:value mode="date" />

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

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import DateTimeInput from './DateTimeInput.svelte';
 export type DatePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
-declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "">;
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "value">;
 type DatePicker = ReturnType<typeof DatePicker>;
 export default DatePicker;

package/dist/components/DateRangePicker.svelte

@@ -4,7 +4,7 @@
 
   export type DateRangePickerProps = Omit<ComponentProps<typeof DateRangeInput>, 'mode'>;
 
-  let props: DateRangePickerProps = $props();
+  let { value = $bindable({ start: null, end: null }), ...props }: DateRangePickerProps = $props();
 </script>
 
-<DateRangeInput {...props} mode="date" />
+<DateRangeInput {...props} bind:value mode="date" />

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

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import DateRangeInput from './DateRangeInput.svelte';
 export type DateRangePickerProps = Omit<ComponentProps<typeof DateRangeInput>, 'mode'>;
-declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {}, "">;
+declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {}, "value">;
 type DateRangePicker = ReturnType<typeof DateRangePicker>;
 export default DateRangePicker;

package/dist/components/DateTimeInput.svelte

@@ -11,24 +11,24 @@
   interface Props {
     value?: string | null;
     mode?: DateTimeInputMode;
-    min?: string;
-    max?: string;
-    minInstant?: string;
-    maxInstant?: string;
-    step?: number;
-    disabledDate?: (date: string) => boolean;
-    id?: string;
-    name?: string;
-    disabled?: boolean;
-    required?: boolean;
-    invalid?: boolean;
-    describedby?: string;
-    ariaLabel?: string;
-    class?: string;
-    onchange?: (value: string | null) => void;
-    timeZone?: string;
-    valueMode?: DateTimeValueMode;
-    disambiguation?: DateTimeDisambiguation;
+    min?: string | undefined;
+    max?: string | undefined;
+    minInstant?: string | undefined;
+    maxInstant?: string | undefined;
+    step?: number | undefined;
+    disabledDate?: ((date: string) => boolean) | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    invalid?: boolean | undefined;
+    describedby?: string | undefined;
+    ariaLabel?: string | undefined;
+    class?: string | undefined;
+    onchange?: ((value: string | null) => void) | undefined;
+    timeZone?: string | undefined;
+    valueMode?: DateTimeValueMode | undefined;
+    disambiguation?: DateTimeDisambiguation | undefined;
   }
 
   let {

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

@@ -3,24 +3,24 @@ export type DateTimeInputMode = 'date' | 'time' | 'datetime';
 interface Props {
     value?: string | null;
     mode?: DateTimeInputMode;
-    min?: string;
-    max?: string;
-    minInstant?: string;
-    maxInstant?: string;
-    step?: number;
-    disabledDate?: (date: string) => boolean;
-    id?: string;
-    name?: string;
-    disabled?: boolean;
-    required?: boolean;
-    invalid?: boolean;
-    describedby?: string;
-    ariaLabel?: string;
-    class?: string;
-    onchange?: (value: string | null) => void;
-    timeZone?: string;
-    valueMode?: DateTimeValueMode;
-    disambiguation?: DateTimeDisambiguation;
+    min?: string | undefined;
+    max?: string | undefined;
+    minInstant?: string | undefined;
+    maxInstant?: string | undefined;
+    step?: number | undefined;
+    disabledDate?: ((date: string) => boolean) | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    invalid?: boolean | undefined;
+    describedby?: string | undefined;
+    ariaLabel?: string | undefined;
+    class?: string | undefined;
+    onchange?: ((value: string | null) => void) | undefined;
+    timeZone?: string | undefined;
+    valueMode?: DateTimeValueMode | undefined;
+    disambiguation?: DateTimeDisambiguation | undefined;
 }
 declare const DateTimeInput: import("svelte").Component<Props, {}, "value">;
 type DateTimeInput = ReturnType<typeof DateTimeInput>;

package/dist/components/DateTimePicker.svelte

@@ -4,7 +4,7 @@
 
   export type DateTimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
 
-  let props: DateTimePickerProps = $props();
+  let { value = $bindable(null), ...props }: DateTimePickerProps = $props();
 </script>
 
-<DateTimeInput {...props} mode="datetime" />
+<DateTimeInput {...props} bind:value mode="datetime" />

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

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import DateTimeInput from './DateTimeInput.svelte';
 export type DateTimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
-declare const DateTimePicker: import("svelte").Component<DateTimePickerProps, {}, "">;
+declare const DateTimePicker: import("svelte").Component<DateTimePickerProps, {}, "value">;
 type DateTimePicker = ReturnType<typeof DateTimePicker>;
 export default DateTimePicker;

package/dist/components/FieldRenderer.svelte

@@ -38,6 +38,7 @@
   import { cn } from '../utils.js';
   import { numericInputValue } from '../numeric-input.js';
 
+  type FieldOption = NonNullable<FieldDefinition['options']>[number];
   const i18n = useTranslation();
 
   let { field, value, onchange, disabled, invalid = false, errorId, density = 'comfortable', children } = $props<{
@@ -59,7 +60,6 @@
   const boolVal = $derived((value as boolean) ?? false);
   const tagsVal = $derived((value as string[]) ?? []);
   const multiVal = $derived((value as (string | number)[]) ?? []);
-  type FieldOption = NonNullable<FieldDefinition['options']>[number];
   const selectToken = $derived.by(() => {
     const index = field.options?.findIndex((option: FieldOption) => option.value === value) ?? -1;
     return index < 0 ? '' : `option:${index}`;

package/dist/components/LazyPage.svelte

@@ -1,11 +1,11 @@
 <script module lang="ts">
   import type { Component } from 'svelte';
 
+  export type LazyPageRenderable = Component<never>;
   export type LazyPageModule = {
-    default: Component<never>;
+    default: LazyPageRenderable;
   };
 
-  export type LazyPageRenderable = Component<Record<string, unknown>>;
   export type LazyPageLoader = () => Promise<LazyPageModule>;
 
   const pagePromises = new WeakMap<object, Promise<unknown>>();
@@ -38,7 +38,7 @@
     <span class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">Loading...</span>
   </div>
 {:then pageModule}
-  {@const Page = pageModule.default as unknown as LazyPageRenderable}
+  {@const Page = pageModule.default as unknown as Component<Record<string, unknown>>}
   <Page {...props} />
 {:catch}
   <div class="svadmin-u-60fbb7713999 svadmin-u-8a7a926578c8 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227" role="alert">

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

@@ -1,8 +1,8 @@
 import type { Component } from 'svelte';
+export type LazyPageRenderable = Component<never>;
 export type LazyPageModule = {
-    default: Component<never>;
+    default: LazyPageRenderable;
 };
-export type LazyPageRenderable = Component<Record<string, unknown>>;
 export type LazyPageLoader = () => Promise<LazyPageModule>;
 export declare function loadLazyPage(loader: LazyPageLoader): Promise<LazyPageModule>;
 type $$ComponentProps = {

package/dist/components/PasswordInput.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   import { Input } from './ui/input/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import { Label } from './ui/label/index.js';
   import { Lock, Eye, EyeOff } from '@lucide/svelte';
   import { useTranslation } from '@svadmin/core/i18n';
+  import type { FullAutoFill } from 'svelte/elements';
 
   const i18n = useTranslation();
 
@@ -13,7 +13,7 @@
     label: string;
     value: string;
     placeholder?: string;
-    autocomplete?: string;
+    autocomplete?: FullAutoFill;
     showStrength?: boolean;
     disabled?: boolean;
     class?: string;
@@ -67,7 +67,7 @@
       {placeholder}
       bind:value
       class="svadmin-u-9e83b2412bc9 svadmin-u-1b1df78e4d0a"
-      autocomplete={autocomplete as any}
+      {autocomplete}
       {disabled}
     />
     <TooltipButton

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

@@ -1,9 +1,10 @@
+import type { FullAutoFill } from 'svelte/elements';
 interface Props {
     id: string;
     label: string;
     value: string;
     placeholder?: string;
-    autocomplete?: string;
+    autocomplete?: FullAutoFill;
     showStrength?: boolean;
     disabled?: boolean;
     class?: string;

package/dist/components/ResourceOperationsPage.svelte

@@ -78,8 +78,12 @@
     emptyLanesText = 'No grouped records yet.',
     highlightsLabel = 'Focus queue',
     workspaceStyle = 'operations',
-    tableProps = {},
+    tableProps: rawTableProps = {},
   }: Props = $props();
+  const tableProps = $derived({
+    ...rawTableProps,
+    ...(rendering === undefined ? {} : { rendering }),
+  });
   const navigation = useNavigation();
   const context = captureAdminContext();
   const resource = $derived(context.getResource(resourceName));

package/dist/components/TimePicker.svelte

@@ -4,7 +4,7 @@
 
   export type TimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
 
-  let props: TimePickerProps = $props();
+  let { value = $bindable(null), ...props }: TimePickerProps = $props();
 </script>
 
-<DateTimeInput {...props} mode="time" />
+<DateTimeInput {...props} bind:value mode="time" />

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

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import DateTimeInput from './DateTimeInput.svelte';
 export type TimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
-declare const TimePicker: import("svelte").Component<TimePickerProps, {}, "">;
+declare const TimePicker: import("svelte").Component<TimePickerProps, {}, "value">;
 type TimePicker = ReturnType<typeof TimePicker>;
 export default TimePicker;

package/dist/components/TooltipButton.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   import * as Tooltip from './ui/tooltip/index.js';
   import { Button } from './ui/button/index.js';
   import type { Snippet } from 'svelte';
@@ -43,8 +42,8 @@
     onclick?.(event);
   }
 
-  function mergeButtonProps(primitiveProps: Record<string, any>) {
-    const merged: Record<string, any> = { ...primitiveProps, ...restProps };
+  function mergeButtonProps(primitiveProps: Record<string, unknown>) {
+    const merged: Record<string, unknown> = { ...primitiveProps, ...restProps };
     for (const [key, userHandler] of Object.entries(restProps)) {
       const primitiveHandler = primitiveProps[key];
       if (!key.startsWith('on') || typeof userHandler !== 'function' || typeof primitiveHandler !== 'function') continue;
@@ -61,7 +60,7 @@
   <Tooltip.Trigger aria-describedby={restProps['aria-describedby']}>
     {#snippet child({ props })}
       {@const primitiveOnclick = props['onclick'] as ((event: MouseEvent) => void) | undefined}
-      {@const buttonProps = { ...mergeButtonProps(props), href, target, rel, variant, size, type, class: className, 'aria-label': restProps['aria-label'] ?? tooltip, 'aria-describedby': props['aria-describedby'], onclick: (event: MouseEvent) => handleClick(event, primitiveOnclick), disabled, tabindex } as any}
+      {@const buttonProps = { ...mergeButtonProps(props), href, target, rel, variant, size, type, class: className, 'aria-label': typeof restProps['aria-label'] === 'string' ? restProps['aria-label'] : tooltip, 'aria-describedby': typeof props['aria-describedby'] === 'string' ? props['aria-describedby'] : undefined, onclick: (event: MouseEvent) => handleClick(event, primitiveOnclick), disabled, tabindex }}
       <Button {...buttonProps}>
         {@render children()}
       </Button>

package/dist/components/fields/MarkdownField.svelte

@@ -12,6 +12,15 @@
   interface DomPurifyLike {
     sanitize(source: string | Node, config?: Record<string, unknown>): string;
   }
+  interface DomPurifyModule {
+    default?: DomPurifyLike;
+    sanitize?: DomPurifyLike["sanitize"];
+  }
+
+  function isDomPurifyModule(value: unknown): value is DomPurifyModule {
+    return typeof value === 'object' && value !== null;
+  }
+
   let DOMPurify: DomPurifyLike | null = $state(null);
 
   onMount(() => {
@@ -19,12 +28,12 @@
     import("isomorphic-dompurify")
       .then((pkg) => {
         if (!cancelled) {
-          const mod = pkg as unknown as { default?: DomPurifyLike; sanitize?: DomPurifyLike["sanitize"] };
+          if (!isDomPurifyModule(pkg)) return;
           const loaded: DomPurifyLike | undefined =
-            mod.default && typeof mod.default.sanitize === "function"
-              ? mod.default
-              : typeof mod.sanitize === "function"
-                ? (mod as DomPurifyLike)
+            pkg.default && typeof pkg.default.sanitize === "function"
+              ? pkg.default
+              : typeof pkg.sanitize === "function"
+                ? { sanitize: pkg.sanitize }
                 : undefined;
           if (loaded) {
             DOMPurify = loaded;

package/dist/components/ui/DesignSystemShowcase.svelte

@@ -29,7 +29,7 @@
 		<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" />
+			<Input aria-label="Compact input" data-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" />

package/dist/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 	import { getContext } from "svelte";
@@ -19,7 +18,7 @@
 	function handleClick(e: MouseEvent) {
 		e.stopPropagation();
 		toggle?.();
-		restProps.onclick?.(e as any);
+		restProps.onclick?.(e as Parameters<NonNullable<typeof restProps.onclick>>[0]);
 	}
 </script>
 

package/dist/editor-config.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Component } from 'svelte';
+type EditorProps = Record<string, unknown>;
 /**
  * Register a global Rich Text Editor component.
  * This decouples @svadmin/ui from @svadmin/editor, making the editor completely optional.
@@ -11,5 +12,6 @@ import type { Component } from 'svelte';
  * setRichTextEditor(Editor);
  * ```
  */
-export declare function setRichTextEditor(editorComponent: Component<any>): void;
-export declare function getRichTextEditor(): Component<any> | undefined;
+export declare function setRichTextEditor(editorComponent: Component<EditorProps>): void;
+export declare function getRichTextEditor(): Component<EditorProps> | undefined;
+export {};