@svadmin/ui 0.72.0 → 0.74.0

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

@@ -1,8 +1,18 @@
+import { type ResourceRendering } from '../rendering/index.js';
+import type { AutoTableGridState } from './auto-table-grid.js';
+import { type ExportFormat, type TaskProvider } from '@svadmin/core';
+import { type BatchSelection } from './table-contract';
 import type { BaseRecord, FieldDefinition, Sort } from '@svadmin/core';
+import { type SavedListViewProvider } from './saved-list-views.js';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
+    /** 可选主体渲染器：不替换资源、权限、工具栏和持久化逻辑。 */
+    gridBody?: Snippet<[AutoTableGridState]>;
     selectable?: boolean;
+    /** 仅在业务回调支持按查询执行服务端命令时启用。 */
+    allowSelectAllMatching?: boolean;
     density?: 'compact' | 'comfortable';
     showHeader?: boolean;
     title?: string;
@@ -40,9 +50,10 @@ interface Props {
     };
     /** Externally controlled sorters */
     sorters?: Sort[];
-    /** Custom batch actions to render when rows are selected */
+    /** 批量操作必须按 selection.scope 区分明确 ID 与全部查询结果。 */
     batchActions?: Snippet<[{
         selectedIds: (string | number)[];
+        selection: BatchSelection;
     }]>;
     /** Summary row rendered at table footer */
     summary?: Snippet<[{
@@ -51,6 +62,16 @@ interface Props {
         visibleColumnsCount: number;
     }]>;
     deleteVariables?: unknown;
+    /** 团队/系统视图；写入需要 Provider 能力和显式可写标记。 */
+    savedViewProvider?: SavedListViewProvider;
+    /** 显式允许唯一的远程默认视图在无 URL/个人活动视图时初始化页面。 */
+    applyRemoteDefaultView?: boolean;
+    /** 提供任务名后按当前筛选/排序提交全量导出；未提供时仍导出当前已加载页。 */
+    exportTaskName?: string;
+    exportTaskProvider?: TaskProvider;
+    exportTaskIdempotencyKey?: string;
+    exportFormat?: ExportFormat;
+    exportMaxItemCount?: number;
 }
 declare const AutoTable: import("svelte").Component<Props, {}, "">;
 type AutoTable = ReturnType<typeof AutoTable>;

package/dist/components/BoundRecordDetailDrawer.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
   import { definedOptions } from '@svadmin/core/options';
+  import type { Snippet } from 'svelte';
 
   import { useCan, useNavigation, type FieldDefinition } from '@svadmin/core';
   import { useRecordDetail } from './record-detail.svelte';
@@ -12,19 +14,23 @@
 
   let {
     resourceName,
+    rendering,
     open = $bindable(false),
     recordId,
     onClose,
+    extraSections,
   }: {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     open?: boolean;
     recordId: string | number;
     onClose?: () => void;
+    extraSections?: Snippet;
   } = $props();
 
   const i18n = useTranslation();
   const navigation = useNavigation();
-  const detail = useRecordDetail(() => ({ resourceName, id: recordId }));
+  const detail = useRecordDetail(() => ({ resourceName, id: recordId, rendering }));
   const resource = $derived(detail.resource);
   const showFields = $derived(detail.fields);
   const fieldGroups = $derived.by(() => {
@@ -68,12 +74,13 @@
 
 {#snippet fieldsList(fields: FieldDefinition[])}
   {#if query.isSuccess}
+    {@const record = detail.rendering ? detail.rendering.record(query.data.data) : query.data.data}
     <dl class="svadmin-u-fa6acbf81d74 svadmin-u-d2c3932343f5">
       {#each fields as field (field.key)}
         <div class="svadmin-u-f3c543ad5fe9 svadmin-u-58284b4ea568 svadmin-u-cb11fec3bb46 svadmin-u-d9bdd3d643a2 svadmin-u-022e8076dfea">
           <dt class="svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-e2327d142859">{field.label}</dt>
           <dd class="svadmin-u-7e0b7cdf1a94 svadmin-u-170cee3ff4e4 svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359">
-            <FieldDisplay type={field.type} value={query.data.data[field.key]} options={field.options} resourceName={field.resource} />
+            <FieldDisplay type={field.type} value={record[field.key]} options={field.options} resourceName={field.resource} />
           </dd>
         </div>
       {/each}
@@ -83,6 +90,8 @@
 
 <DetailDrawer
   bind:open
+  data-svadmin-rendering-resource={detail.rendering?.resource.name}
+  data-svadmin-rendering-kind={detail.rendering ? 'detail-drawer' : undefined}
   title="{resource.label} {i18n.t('common.detail')}"
   description={`#${recordId}`}
   closeLabel={i18n.t('common.close')}
@@ -143,6 +152,12 @@
     </div>
   {/if}
 
+  {#if extraSections && canReadRecord && query.isSuccess}
+    <section data-svadmin-detail-extensions aria-label={i18n.t('common.additionalDetails')}>
+      {@render extraSections()}
+    </section>
+  {/if}
+
   {#snippet footer()}
     {#if canReadRecord && query.isSuccess}
         <Button type="button" variant="outline" onclick={() => navigateTo('show')}>

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

@@ -1,8 +1,12 @@
+import type { ResourceRendering } from '../rendering/index.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     open?: boolean;
     recordId: string | number;
     onClose?: () => void;
+    extraSections?: Snippet;
 };
 declare const BoundRecordDetailDrawer: import("svelte").Component<$$ComponentProps, {}, "open">;
 type BoundRecordDetailDrawer = ReturnType<typeof BoundRecordDetailDrawer>;

package/dist/components/Breadcrumbs.svelte

@@ -17,6 +17,12 @@
 
   interface Crumb { label: string; href?: string; }
 
+  // 仅复用 AdminApp 明确支持的成员页别名，宿主精确菜单项始终优先。
+  const memberAliases: Readonly<Record<string, string>> = {
+    '/account/members-starter': '/account/members/members-starter',
+    '/account/team-members': '/account/members/team-members',
+  };
+
   function normalizePath(path: string): string {
     const normalized = path.replace(/^#/, '').replace(/[?#].*$/, '').replace(/\/$/, '');
     return normalized || '/';
@@ -38,7 +44,11 @@
     const currentPathname = normalizePath(getPath());
     if (currentPathname === '/') return result;
 
-    const menuTrail = menu ? findMenuTrail(menu, currentPathname) : undefined;
+    const canonicalPath = memberAliases[currentPathname];
+    const menuTrail = menu
+      ? findMenuTrail(menu, currentPathname)
+        ?? (canonicalPath ? findMenuTrail(menu, canonicalPath) : undefined)
+      : undefined;
     if (menuTrail) {
       for (const item of menuTrail) {
         result.push(definedOptions({

package/dist/components/CancelTaskButton.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
-  import { captureAdminContext, queryKeyMatches, withValidatedTaskProvider } from '@svadmin/core';
-  import { useQueryClient } from '@tanstack/svelte-query';
   import { useTranslation } from '@svadmin/core/i18n';
 
   import { Button } from './ui/button/index.js';
   import { Loader2, Ban } from '@lucide/svelte';
+  import { createTaskAction } from './task-action.svelte.js';
 
   const i18n = useTranslation();
-  const adminContext = captureAdminContext();
 
   let {
     taskId,
-    taskProvider = adminContext.taskProvider ?? undefined,
+    taskProvider,
     onSuccess,
     onError,
     disabled = false,
@@ -29,46 +27,18 @@
     children?: import('svelte').Snippet;
   }>();
 
-  const queryClient = useQueryClient();
-  let pending = $state(false);
-
-  async function handleCancel() {
-    if (!taskProvider?.cancel || pending) return;
-    const scopedTaskId = taskId;
-    const scope = adminContext.queryKeyMatcher();
-    pending = true;
-    try {
-      const provider = withValidatedTaskProvider(taskProvider);
-      if (!provider.cancel) return;
-      await provider.cancel(scopedTaskId);
-      await Promise.all([
-        queryClient.invalidateQueries({
-          predicate: (query) => queryKeyMatches(query.queryKey, {
-            ...scope,
-            kind: 'task',
-            action: 'list',
-          }),
-        }),
-        queryClient.invalidateQueries({
-          predicate: (query) => queryKeyMatches(query.queryKey, {
-            ...scope,
-            kind: 'task',
-            action: 'one',
-            id: scopedTaskId,
-          }),
-        }),
-      ]);
-      onSuccess?.();
-    } catch (error) {
-      onError?.(error);
-    } finally {
-      pending = false;
-    }
-  }
+  const action = createTaskAction({
+    action: 'cancel',
+    get taskId() { return taskId; },
+    get provider() { return taskProvider; },
+    get disabled() { return disabled; },
+    get onSuccess() { return onSuccess; },
+    get onError() { return onError; },
+  });
 </script>
 
-<Button {variant} {size} onclick={handleCancel} disabled={disabled || pending || !taskProvider?.cancel}>
-  {#if pending}
+<Button {variant} {size} onclick={action.run} disabled={!action.available || action.pending}>
+  {#if action.pending}
     <Loader2 class="svadmin-u-82cc6c6581cd svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-afbdd13a380e" />
   {:else}
     <Ban class="svadmin-u-82cc6c6581cd svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />

package/dist/components/ColorPicker.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  interface Props {
+    value?: string;
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    name,
+    id,
+    disabled = false,
+    required = false,
+    invalid = false,
+    describedby,
+    ariaLabel,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  function handleInput(event: Event): void {
+    const input = event.currentTarget;
+    if (!(input instanceof HTMLInputElement) || disabled) return;
+    value = input.value;
+    onchange?.(input.value);
+  }
+</script>
+
+<input
+  class={cn('svadmin-color-picker', className)}
+  {id}
+  {name}
+  type="color"
+  value={value}
+  {disabled}
+  {required}
+  aria-label={ariaLabel}
+  aria-invalid={invalid || undefined}
+  aria-describedby={describedby}
+  oninput={handleInput}
+/>
+
+<style>
+  .svadmin-color-picker {
+    display: block;
+    inline-size: 40px;
+    block-size: 32px;
+    padding: 2px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--background);
+    cursor: pointer;
+  }
+
+  .svadmin-color-picker:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  .svadmin-color-picker:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+interface Props {
+    value?: string;
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+}
+declare const ColorPicker: import("svelte").Component<Props, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/components/ComboboxField.svelte

@@ -2,7 +2,8 @@
   import { definedReactiveOptions } from '@svadmin/core/options';
 
   import { useTranslation } from '@svadmin/core/i18n';
-  import { useResourceContract, useSelect } from '@svadmin/core';
+  import { captureAdminContext, captureAuthSession, useResourceContract, useSelect } from '@svadmin/core';
+  import { onDestroy, untrack } from 'svelte';
   import type { BaseRecord, Filter } from '@svadmin/core';
   import type { HTMLButtonAttributes } from 'svelte/elements';
   import type { ButtonProps } from './ui/button/index.js';
@@ -23,13 +24,15 @@
 
   interface Props extends Omit<HTMLButtonAttributes, 'value' | 'onchange' | 'children' | 'onclick' | 'type'> {
     resource: string;
-    value?: string | number | null;
-    onchange?: (value: string | number | null) => void;
+    value?: string | number | null | (string | number)[];
+    onchange?: (value: string | number | null | (string | number)[]) => void;
     optionLabel?: string;
     optionValue?: string;
     placeholder?: string;
     searchable?: boolean;
+    multiple?: boolean;
     onSearch?: (value: string) => Filter[];
+    fetchSize?: number;
     id?: string;
     class?: string;
   }
@@ -40,20 +43,51 @@
     onchange,
     optionLabel = 'title',
     optionValue = 'id',
-    placeholder = 'Select...',
+    placeholder,
     searchable = true,
+    multiple = false,
     onSearch,
+    fetchSize = 50,
     disabled = false,
     ...restProps
   }: Props = $props();
 
   const buttonRestProps = $derived(restProps as Omit<ButtonProps, 'children' | 'variant' | 'size'>);
+  let open = $state(false);
+  let searchInputValue = $state('');
+  let page = $state(1);
+  let appliedSearch = $state('');
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  onDestroy(() => clearTimeout(timer));
+  const normalizedFetchSize = $derived(
+    Number.isSafeInteger(fetchSize) && fetchSize >= 10 && fetchSize <= 200 ? fetchSize : 50,
+  );
 
   const binding = useResourceContract(() => resource);
+  const context = captureAdminContext();
+  const sourceScope = $derived({
+    contract: binding.resource, provider: context.providers?.[binding.dataProviderName],
+    meta: JSON.stringify(binding.meta), tenant: context.tenantCacheKey?.__svadminTenant,
+    auth: context.authProvider, session: captureAuthSession(context.authProvider).cacheKey,
+    access: context.accessControlProvider, router: context.routerProvider,
+    optionLabel, optionValue, onSearch, searchable, normalizedFetchSize,
+  });
+  type Option = { value: string | number; label: string };
+  let loaded = $state.raw<{ scope: typeof sourceScope; search: string; options: Option[] }>();
   const defaultSearch = $derived.by(() => {
     const field = optionLabel;
     return (v: string): Filter[] => v ? [{ field, operator: 'contains', value: v }] : [];
   });
+  const searchFilters = $derived.by(() => {
+    try {
+      return {
+        filters: appliedSearch && (onSearch || searchable)
+          ? (onSearch ?? defaultSearch)(appliedSearch)
+          : [],
+        invalid: false,
+      };
+    } catch { return { filters: [], invalid: true }; }
+  });
   const select = useSelect(definedReactiveOptions({
     get resource() { return binding.resource; },
     get dataProviderName() { return binding.dataProviderName; },
@@ -67,44 +101,108 @@
       };
     },
     get projectionKey() { return `combobox:${optionLabel}:${optionValue}`; },
-    get defaultValue() { return value === null ? [] : [value]; },
-    get onSearch() { return onSearch ?? (searchable ? defaultSearch : undefined); },
+    get fetchSize() { return normalizedFetchSize; },
+    get pagination() { return { current: page, pageSize: normalizedFetchSize }; },
+    get defaultValue() {
+      if (Array.isArray(value)) return value;
+      return value === null || value === undefined || value === '' ? [] : [value];
+    },
+    get filters() { return searchFilters.filters; },
+    get queryOptions() { return { enabled: !searchFilters.invalid }; },
   }));
 
-  let open = $state(false);
-  let searchInputValue = $state('');
-  $effect(() => {
-    void binding.resource;
-    void binding.dataProviderName;
-    void binding.meta;
-    searchInputValue = '';
+  $effect.pre(() => {
+    void sourceScope;
+    clearTimeout(timer);
+    searchInputValue = appliedSearch = '';
     open = false;
+    page = 1;
+    loaded = undefined;
+  });
+  $effect(() => {
+    const data = select.query.data;
+    if (!data || select.query.isFetching || select.isError || searchFilters.invalid) return;
+    const scope = sourceScope;
+    const search = appliedSearch;
+    const previous = untrack(() => loaded);
+    const options = new Map<string | number, Option>(
+      page > 1 && previous?.scope === scope && previous.search === search
+        ? previous.options.map(option => [option.value, option]) : [],
+    );
+    for (const option of data.options) options.set(option.value, option);
+    loaded = { scope, search, options: [...options.values()] };
   });
 
-  const selectedLabel = $derived(
-    select.options.find(o => o.value === value)?.label ?? ''
+  const selectedValues = $derived(
+    Array.isArray(value) ? value : value === null || value === undefined ? [] : [value],
   );
+  const availableOptions = $derived.by(() => {
+    if (select.isError || searchFilters.invalid) return [];
+    const options = new Map<string | number, Option>(
+      loaded?.scope === sourceScope && loaded.search === appliedSearch
+        ? loaded.options.map(option => [option.value, option]) : [],
+    );
+    for (const option of select.options) options.set(option.value, option);
+    return [...options.values()];
+  });
+  const totalOptions = $derived(select.query.data?.total ?? availableOptions.length);
+  const hasMore = $derived(totalOptions > page * normalizedFetchSize && !select.isError
+    && !searchFilters.invalid && searchInputValue === appliedSearch);
+  const invalidOptions = $derived(select.isError || searchFilters.invalid);
+  const selectedLabels = $derived(selectedValues.flatMap(selectedValue => {
+    const option = availableOptions.find(candidate => candidate.value === selectedValue);
+    return option ? [option.label] : [];
+  }));
+  const selectedLabel = $derived(selectedLabels.join(', '));
 
   function handleSelect(optValue: string | number) {
+    if (disabled || invalidOptions || select.isFetching || searchInputValue !== appliedSearch) return;
+    if (multiple) {
+      const next = selectedValues.includes(optValue)
+        ? selectedValues.filter(selectedValue => selectedValue !== optValue)
+        : [...selectedValues, optValue];
+      onchange?.(next);
+      return;
+    }
     onchange?.(optValue === value ? null : optValue);
     open = false;
-    searchInputValue = '';
-    select.onSearchChange('');
+    resetSearch();
   }
 
   function handleClear(e: Event) {
     e.stopPropagation();
-    onchange?.(null);
+    if (disabled) return;
+    onchange?.(multiple ? [] : null);
     open = false;
-    searchInputValue = '';
-    select.onSearchChange('');
+    resetSearch();
+  }
+
+  function resetSearch(): void {
+    clearTimeout(timer);
+    searchInputValue = appliedSearch = '';
+    page = 1;
+    loaded = undefined;
   }
 
   function handleSearchInput(e: Event) {
     if (!(e.currentTarget instanceof HTMLInputElement)) return;
     const v = e.currentTarget.value;
     searchInputValue = v;
-    select.onSearchChange(v);
+    clearTimeout(timer);
+    const scope = sourceScope;
+    const apply = () => {
+      if (scope !== sourceScope || disabled) return;
+      appliedSearch = v;
+      page = 1;
+      loaded = undefined;
+    };
+    if (!v) apply();
+    else timer = setTimeout(apply, 300);
+  }
+
+  function loadMore(): void {
+    if (disabled || select.isFetching || !hasMore) return;
+    page += 1;
   }
 </script>
 
@@ -119,26 +217,27 @@
     {disabled}
     aria-haspopup="listbox"
     aria-expanded={open}
+    aria-multiselectable={multiple || undefined}
     aria-busy={select.isFetching}
-    aria-invalid={select.isError}
+    aria-invalid={invalidOptions || restProps['aria-invalid']}
   >
     {#if selectedLabel}
       <span class="svadmin-u-f283ea9bea0e">{selectedLabel}</span>
     {:else}
-      <span class="svadmin-u-bfa603190748">{placeholder}</span>
+      <span class="svadmin-u-bfa603190748">{placeholder ?? i18n.t('field.selectPlaceholder')}</span>
     {/if}
     <ChevronsUpDown class="svadmin-u-fb56d9cff341 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-012fbd121f37 svadmin-u-0b8c506a0596" />
   </Button>
-  {#if value !== null}
+  {#if selectedValues.length}
     <Button type="button" variant="ghost" size="icon-sm" {disabled}
       title={i18n.t('common.clear')} aria-label={i18n.t('common.clear')} onclick={handleClear}>
       <X class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
     </Button>
   {/if}
   </div>
-  {#if select.isError}
+  {#if invalidOptions}
     <div role="alert" class="select-error">
-      <span>Unable to load options.</span>
+      <span>{i18n.t('select.loadFailed')}</span>
       <Button type="button" variant="ghost" size="icon-sm" disabled={disabled || select.isFetching}
         title={i18n.t('common.retry')} aria-label={i18n.t('common.retry')} onclick={() => select.refetch()}>
         <RotateCw class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
@@ -146,7 +245,7 @@
     </div>
   {/if}
 
-  {#if open}
+  {#if open && !disabled}
     <div class="svadmin-u-da4dbfbc4fdc svadmin-u-181b286668b5 svadmin-u-b6b02c0ebef6 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e541d86d1ec8 svadmin-u-06bbb43166db">
       <Command.Root shouldFilter={false} class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-e541d86d1ec8 svadmin-u-9b13e8ae5c9c">
         {#if searchable}
@@ -155,34 +254,44 @@
             <Command.Input
               bind:value={searchInputValue}
               oninput={handleSearchInput}
-              placeholder="Search..."
+              placeholder={i18n.t('common.search')}
               class="svadmin-u-60fbb7713999 svadmin-u-e7a768f922d2 svadmin-u-6da6a3c3f741 svadmin-u-7f19cdf4c5bb svadmin-u-03b4dd7f172b svadmin-u-fc7473ca09eb svadmin-u-df37b1fd9495 svadmin-u-9c24ab70af61"
             />
           </div>
         {/if}
-        <Command.List class="svadmin-u-558f64349245 svadmin-u-92bf82f493b1 svadmin-u-eb6a3cef9686">
+        <Command.List
+          role="listbox"
+          aria-multiselectable={multiple || undefined}
+          class="svadmin-u-558f64349245 svadmin-u-92bf82f493b1 svadmin-u-eb6a3cef9686"
+        >
           {#if select.isLoading}
             {#each Array(3) as _, _i (_i)}
               <div class="svadmin-u-d5eab218aa34 svadmin-u-ec0091ee009b"><Skeleton class="svadmin-u-cd0d9c512cdc svadmin-u-6da6a3c3f741" /></div>
             {/each}
-          {:else if !select.isError}
-            {#if !select.options.length}
+          {:else if !invalidOptions}
+            {#if !availableOptions.length}
               <Command.Empty class="svadmin-u-cb11fec3bb46 svadmin-u-ca6bf63030aa svadmin-u-359090c2d529 svadmin-u-bfa603190748">
-                No results.
+                {i18n.t('select.noResults')}
               </Command.Empty>
             {/if}
-            {#each select.options as opt (opt.value)}
+            {#each availableOptions as opt (`${typeof opt.value}:${opt.value}`)}
               <Command.Item
+                disabled={select.isFetching || searchInputValue !== appliedSearch}
                 value={`${typeof opt.value}:${opt.value}`}
                 onSelect={() => handleSelect(opt.value)}
                 class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-50ca6ba56aa3 svadmin-u-7f6912283f11 svadmin-u-3960ffc248d9 svadmin-u-36d4469299aa svadmin-u-d5eab218aa34 svadmin-u-ec0091ee009b svadmin-u-fc7473ca09eb svadmin-u-df37b1fd9495 svadmin-u-99afb1cc3b47 svadmin-u-529780e25268"
               >
-                <Check class="svadmin-u-d2347e8497a9 svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c {value === opt.value ? 'svadmin-u-3972e98dc84f' : 'svadmin-u-7065497e1ca0'}" />
+                <Check class="svadmin-u-d2347e8497a9 svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c {selectedValues.includes(opt.value) ? 'svadmin-u-3972e98dc84f' : 'svadmin-u-7065497e1ca0'}" />
                 {opt.label}
               </Command.Item>
             {/each}
           {/if}
         </Command.List>
+        {#if hasMore}
+          <Button type="button" variant="ghost" size="sm" disabled={select.isFetching} onclick={loadMore}>
+            {i18n.t('select.loadMore')}
+          </Button>
+        {/if}
       </Command.Root>
     </div>
   {/if}

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

@@ -2,13 +2,15 @@ import type { Filter } from '@svadmin/core';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLButtonAttributes, 'value' | 'onchange' | 'children' | 'onclick' | 'type'> {
     resource: string;
-    value?: string | number | null;
-    onchange?: (value: string | number | null) => void;
+    value?: string | number | null | (string | number)[];
+    onchange?: (value: string | number | null | (string | number)[]) => void;
     optionLabel?: string;
     optionValue?: string;
     placeholder?: string;
     searchable?: boolean;
+    multiple?: boolean;
     onSearch?: (value: string) => Filter[];
+    fetchSize?: number;
     id?: string;
     class?: string;
 }

package/dist/components/CreatePage.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
   import { definedOptions } from '@svadmin/core/options';
 
   import { getResource, captureAdminContext } from '@svadmin/core';
@@ -12,6 +13,7 @@
 
   interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     title?: string;
     density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
@@ -22,6 +24,7 @@
 
   let {
     resourceName,
+    rendering,
     title,
     density = 'comfortable',
     columns = 1,
@@ -51,6 +54,7 @@
   </PageHeader>
 
   <AutoForm
+    {rendering}
     {resourceName}
     mode="create"
     {density}