@svadmin/core 0.50.0 → 0.52.0

package/src/useStepsForm.svelte.ts

@@ -1,77 +1,137 @@
-import { useForm } from './form-hooks.svelte';
-import type { UseFormOptions, UseFormReturn } from './form-hooks.svelte';
-import type { BaseRecord, HttpError } from './types';
+import { Type } from '@sinclair/typebox';
+import { useContractForm, type ContractFormOptions } from './contract-form.svelte';
+import { getContractFormFields, type ContractSchemas, type ContractFormValues } from './resource-contract';
+import { snapshotPlainData } from './plain-data';
+import { checkExact } from './schema-validation';
+import { replaceReactiveMembers } from './reactive-projection';
+import { HttpError } from './types';
+import { captureAdminContext } from './context.svelte';
+import { captureAuthLiveScope } from './auth-hooks.svelte';
 
-export interface UseStepsFormOptions<
-  TVariables extends Record<string, unknown> = Record<string, unknown>,
-  TData extends BaseRecord = BaseRecord,
-  TError = HttpError,
-> extends UseFormOptions<TVariables, TData, TError> {
-  /** Total number of steps. Defaults to 1 */
-  stepsCount?: number;
-  /** Default step index. Starts at 0. */
-  defaultStep?: number;
-  /** Validate the form when navigating back? */
-  isBackValidate?: boolean;
-}
-
-export interface UseStepsFormReturn<
-  TVariables extends Record<string, unknown> = Record<string, unknown>,
-  TData extends BaseRecord = BaseRecord,
-> extends UseFormReturn<TVariables, TData> {
-  steps: {
-    currentStep: number;
-    totalSteps: number;
-    canGoNext: boolean;
-    canGoPrev: boolean;
-    gotoStep: (step: number) => void;
-    nextStep: () => void;
-    prevStep: () => void;
+type Action = 'create' | 'edit';
+type Field<S extends ContractSchemas, A extends Action> = Extract<keyof ContractFormValues<S, A>, string>;
+export type UseStepsFormOptions<S extends ContractSchemas = ContractSchemas, A extends Action = Action> =
+  ContractFormOptions<S, A> & {
+    steps: readonly { readonly fields: readonly NoInfer<Field<S, A>>[] }[];
+    defaultStep?: number;
+    isBackValidate?: boolean;
   };
-}
-
-/**
- * useStepsForm
- * Extends `useForm` with a nested `steps` object tracking navigation state.
- */
-export function useStepsForm<
-  TVariables extends Record<string, unknown> = Record<string, unknown>,
-  TData extends BaseRecord = BaseRecord,
-  TError = HttpError,
->(options: UseStepsFormOptions<TVariables, TData, TError> = {} as UseStepsFormOptions<TVariables, TData, TError>): UseStepsFormReturn<TVariables, TData> {
-  const form = useForm<TVariables, TData, TError>(options);
 
-  let currentStep = $state(options.defaultStep ?? 0);
-  const totalSteps = options.stepsCount ?? 1;
+const stepsSchema = Type.Array(Type.Object({
+  fields: Type.Array(Type.String(), { uniqueItems: true }),
+}, { additionalProperties: false }), { minItems: 1 });
+function invalid(): HttpError {
+  return new HttpError('Invalid form steps', 422, undefined, { code: 'INVALID_RESOURCE_INPUT' });
+}
 
-  function gotoStep(step: number) {
-    currentStep = Math.max(0, Math.min(step, totalSteps - 1));
+/** Step navigation shares the form's validation, request lifecycle and checked receipts. */
+export function useStepsForm<S extends ContractSchemas, A extends Action>(options: UseStepsFormOptions<S, A>) {
+  const context = captureAdminContext();
+  const layout = $derived.by(() => {
+    try {
+      const steps = snapshotPlainData(options.steps);
+      if (!checkExact(stepsSchema, steps)) throw invalid();
+      const names: readonly string[] = getContractFormFields(options.resource, options.action);
+      if (steps.some(step => step.fields.some(field => !names.includes(field)))) throw invalid();
+      const defaultStep = options.defaultStep ?? 0;
+      if (!Number.isInteger(defaultStep) || defaultStep < 0 || defaultStep >= steps.length ||
+          (options.isBackValidate !== undefined && typeof options.isBackValidate !== 'boolean')) throw invalid();
+      return { ok: true as const, steps, defaultStep, key: JSON.stringify([steps, defaultStep]) };
+    } catch {
+      return { ok: false as const, error: invalid() };
+    }
+  });
+  let currentStep = $state(0);
+  let epoch = 0;
+  let navigation: object | undefined;
+  let submission: object | undefined;
+  let mounted = true;
+  function resetNavigation() {
+    currentStep = layout.ok ? layout.defaultStep : 0;
+    epoch++;
+    navigation = undefined;
+    submission = undefined;
   }
+  const form = useContractForm<S, A>(options, {
+    get enabled() { return layout.ok; },
+    get key() { return layout.ok ? layout.key : 'invalid'; },
+    reset: resetNavigation,
+  });
+  $effect(() => () => { mounted = false; resetNavigation(); });
 
-  function nextStep() {
-    if (currentStep < totalSteps - 1) gotoStep(currentStep + 1);
+  function capture() {
+    const revision = epoch;
+    const auth = context.authProvider;
+    const session = captureAuthLiveScope(auth);
+    const router = context.routerProvider;
+    const key = layout.ok ? layout.key : undefined;
+    return () => mounted && revision === epoch && session.isCurrent() && context.authProvider === auth &&
+      context.routerProvider === router && layout.ok && layout.key === key && form.ready;
   }
 
-  function prevStep() {
-    if (currentStep > 0) gotoStep(currentStep - 1);
+  function focusErrorStep(current: () => boolean): void {
+    if (!current() || !layout.ok) return;
+    const first = layout.steps.findIndex(step => step.fields.some(field => Boolean(form.errors[field])));
+    if (first >= 0 && current()) currentStep = first;
+  }
+  function validateTo(step: number, current: () => boolean): boolean {
+    if (!current() || !layout.ok) return false;
+    const fields = step > currentStep
+      ? layout.steps.slice(0, step).flatMap(item => item.fields)
+      : layout.steps[currentStep]?.fields ?? [];
+    const selected = getContractFormFields(options.resource, options.action).filter(field => fields.includes(field));
+    const valid = form.validateFields(selected);
+    if (!current()) return false;
+    if (!valid) focusErrorStep(current);
+    return valid;
+  }
+  function gotoStep(step: number): boolean {
+    if (!layout.ok || !form.ready || form.submitting) return false;
+    if (!Number.isInteger(step) || step < 0 || step >= layout.steps.length) throw invalid();
+    const token = {};
+    navigation = token;
+    const active = capture();
+    const current = () => navigation === token && active();
+    if (step === currentStep) return true;
+    if ((step > currentStep || options.isBackValidate === true) && !validateTo(step, current)) return false;
+    if (!current()) return false;
+    currentStep = step;
+    return true;
+  }
+  function submit(overrides?: Parameters<typeof form.submit>[0]) {
+    const current = capture();
+    const navigationAtSubmit = navigation;
+    const token = {};
+    submission = token;
+    const source = form.submit(overrides);
+    // Observe errors without adding another result handoff after the base form's final check.
+    void source.catch(() => {
+      try {
+        if (submission === token && navigation === navigationAtSubmit && current() && !form.submitting) {
+          focusErrorStep(() => submission === token && navigation === navigationAtSubmit && current());
+        }
+      } catch { /* Workflow presentation cannot replace a checked submission result. */ }
+    });
+    return source;
+  }
+  function reset() {
+    form.reset();
+    resetNavigation();
   }
-
-  const result = form as unknown as UseStepsFormReturn<TVariables, TData>;
-
   const steps = {
-    get currentStep() { return currentStep; },
-    get totalSteps() { return totalSteps; },
-    get canGoNext() { return currentStep < totalSteps - 1; },
-    get canGoPrev() { return currentStep > 0; },
+    get currentStep() { return mounted && form.ready ? currentStep : 0; },
+    get totalSteps() { return layout.ok ? layout.steps.length : 0; },
+    get canGoNext() { return form.ready && !form.submitting && layout.ok && currentStep < layout.steps.length - 1; },
+    get canGoPrev() { return form.ready && !form.submitting && currentStep > 0; },
     gotoStep,
-    nextStep,
-    prevStep,
+    nextStep() { return layout.ok && currentStep < layout.steps.length - 1 ? gotoStep(currentStep + 1) : false; },
+    prevStep() { return currentStep > 0 ? gotoStep(currentStep - 1) : false; },
   };
-
-  Object.defineProperty(result, 'steps', {
-    get: () => steps,
-    enumerable: true
+  return replaceReactiveMembers(form, {
+    steps, submit, reset,
+    get error() { return layout.ok ? form.error : invalid(); },
   });
-
-  return result;
 }
+
+export type UseStepsFormReturn<S extends ContractSchemas = ContractSchemas, A extends Action = Action> =
+  ReturnType<typeof useStepsForm<S, A>>;

package/src/utility-hooks.svelte.ts

@@ -1,83 +1,24 @@
-import { useForm, type UseFormOptions } from './form-hooks.svelte';
-import { useQueryClient } from '@tanstack/svelte-query';
+import { definedOptions } from './defined-options';
 import { useParsed } from './useParsed.svelte';
 import { captureAdminContext } from './context.svelte';
-import { dataQueryMatches } from './query-keys';
 import { getAdminOptions } from './options.svelte';
 import { t } from './i18n.svelte';
-import type { BaseRecord, HttpError, Filter, KnownResources, ResourceDefinition } from './types';
+import type { BaseRecord,HttpError,Filter,KnownResources,ResourceDefinition } from './types';
 import { useList } from './query-hooks.svelte';
 import { toast } from './toast.svelte';
-import type { UseSelectOptions } from './hooks.svelte';
-import { useSelect as useSelectImpl } from './hooks.svelte';
+import { createSelectQuery as useSelectImpl, type UseSelectOptions } from './select-query.svelte';
+import { decodeBaseRecord } from './record-decoder';
 
 // ─── useModal ─────────────────────────────────────────────────
 export function useModal(options?: { defaultVisible?: boolean }) {
-  let visible = $state(options?.defaultVisible ?? false);
+  let visible=$state(options?.defaultVisible??false);
   return {
     get visible() { return visible; },
-    show() { visible = true; },
-    close() { visible = false; },
+    show() { visible=true; },
+    close() { visible=false; },
   };
 }
 
-// ─── useModalForm ─────────────────────────────────────────────
-
-export interface UseModalFormOptions<
-  TVariables extends Record<string, unknown> = Record<string, unknown>,
-  TData extends BaseRecord = BaseRecord,
-  TError = HttpError,
-> extends UseFormOptions<TVariables, TData, TError> {
-  defaultVisible?: boolean;
-  autoSave?: UseFormOptions<TVariables, TData, TError>['autoSave'] & {
-    invalidateOnClose?: boolean;
-  };
-}
-
-export function useModalForm<
-  TVariables extends Record<string, unknown> = Record<string, unknown>,
-  TData extends BaseRecord = BaseRecord,
-  TError = HttpError,
->(options: UseModalFormOptions<TVariables, TData, TError> = {} as UseModalFormOptions<TVariables, TData, TError>) {
-  const queryClient = useQueryClient();
-  const adminContext = captureAdminContext();
-  const formState = useForm<TVariables, TData, TError>(options);
-  let visible = $state(options.defaultVisible ?? false);
-
-  function show(id?: string | number) {
-    if (id !== undefined) {
-      formState.setAction('edit');
-      formState.setId(id);
-    } else {
-      formState.setAction('create');
-      formState.setId(undefined);
-    }
-    visible = true;
-  }
-
-  function close() {
-    visible = false;
-    formState.reset();
-    if (options.autoSave?.invalidateOnClose) {
-      const resource = formState.resource;
-      const matcher = adminContext.queryKeyMatcher(resource, options.dataProviderName);
-      queryClient.invalidateQueries({
-        predicate: (q) => dataQueryMatches(q.queryKey, { ...matcher, resource }),
-      });
-    }
-  }
-
-  return {
-    get visible() { return visible; },
-    show,
-    close,
-    get modalProps() { return { visible, close }; },
-    formState,
-  };
-}
-
-export const useDrawerForm = useModalForm; // Alias for UI variations
-
 // ─── useMenu ──────────────────────────────────────────────────
 
 export interface MenuConfig {
@@ -90,31 +31,33 @@ export interface MenuConfig {
 }
 
 export function useMenu() {
-  const adminContext = captureAdminContext();
-  const parsed = useParsed();
-
-  const menuItems = $derived.by<MenuConfig[]>(() => {
-    const adminOptions = getAdminOptions();
-    const resources = adminContext.resources;
-    let items: MenuConfig[] = resources
-      .filter((r: ResourceDefinition) => r.showInMenu !== false)
+  const adminContext=captureAdminContext();
+  const parsed=useParsed();
+
+  const menuItems=$derived.by<MenuConfig[]>(() => {
+    const adminOptions=getAdminOptions();
+    const resources=adminContext.resources;
+    let items: MenuConfig[]=resources
+      .filter((r: ResourceDefinition) => r.showInMenu!==false)
       .map((r: ResourceDefinition): MenuConfig => ({
         name: r.name,
         route: `/${r.name}`,
-        label: r.label || r.name, // Usually handled by i18n label mapping
-        icon: r.icon,
-        parentName: r.parentName,
-        order: r.menuOrder ?? 999,
+        label: r.label||r.name, // Usually handled by i18n label mapping
+        ...definedOptions({
+          icon: r.icon,
+          parentName: r.parentName,
+        }),
+        order: r.menuOrder??999,
       }));
 
-    if (adminOptions.menuItems) items = adminOptions.menuItems(items);
-    items.sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
+    if(adminOptions.menuItems) items=adminOptions.menuItems(items);
+    items.sort((a,b) => (a.order??999)-(b.order??999));
     return items;
   });
 
   return {
     get menuItems() { return menuItems; },
-    get selectedKey() { return parsed.resource ?? '/'; },
+    get selectedKey() { return parsed.resource??'/'; },
   };
 }
 
@@ -127,32 +70,32 @@ export interface BreadcrumbItem {
 }
 
 export function useBreadcrumb() {
-  const adminContext = captureAdminContext();
-  const parsed = useParsed();
-  
-  const items = $derived.by<BreadcrumbItem[]>(() => {
-    const list: BreadcrumbItem[] = [];
-    if (!parsed.resource) return list;
+  const adminContext=captureAdminContext();
+  const parsed=useParsed();
+
+  const items=$derived.by<BreadcrumbItem[]>(() => {
+    const list: BreadcrumbItem[]=[];
+    if(!parsed.resource) return list;
 
     try {
-      const res = adminContext.getResource(parsed.resource);
-      const chain: { label: string; link: string; icon?: string }[] = [];
-      let current: typeof res | undefined = res;
-      const visited = new Set<string>();
-      while (current) {
-        if (visited.has(current.name)) break;
+      const res=adminContext.getResource(parsed.resource);
+      const chain: { label: string; link: string; icon?: string }[]=[];
+      let current: typeof res|undefined=res;
+      const visited=new Set<string>();
+      while(current) {
+        if(visited.has(current.name)) break;
         visited.add(current.name);
-        chain.unshift({ label: current.label || current.name, link: `/${current.name}`, icon: current.icon });
-        current = current.parentName ? adminContext.getResource(current.parentName) : undefined;
+        chain.unshift({ label: current.label||current.name,link: `/${current.name}`,...definedOptions({ icon: current.icon }) });
+        current=current.parentName? adminContext.getResource(current.parentName):undefined;
       }
       list.push(...chain);
 
-      if (parsed.action === 'create') {
+      if(parsed.action==='create') {
         list.push({ label: t('common.create') });
-      } else if (parsed.action === 'edit' && parsed.id) {
+      } else if(parsed.action==='edit'&&parsed.id) {
         list.push({ label: t('common.edit') });
         list.push({ label: String(parsed.id) });
-      } else if (parsed.action === 'show' && parsed.id) {
+      } else if(parsed.action==='show'&&parsed.id) {
         list.push({ label: t('common.show') });
         list.push({ label: String(parsed.id) });
       }
@@ -167,48 +110,48 @@ export function useBreadcrumb() {
 
 // ─── useRelation ───────────────────────────────────────────
 
-export interface UseRelationOptions<_TData extends BaseRecord = BaseRecord, _TError = HttpError> {
+export interface UseRelationOptions<_TData extends BaseRecord=BaseRecord,_TError=HttpError> {
   resource: KnownResources;
-  id?: string | number;
+  id?: string|number;
   pagination?: { current?: number; pageSize?: number };
-  sorters?: { field: string; order: 'asc' | 'desc' }[];
+  sorters?: { field: string; order: 'asc'|'desc' }[];
   filters?: Filter[];
   queryOptions?: { enabled?: boolean; staleTime?: number };
 }
 
-export function useRelation<TData extends BaseRecord = BaseRecord, TError = HttpError>(options: UseRelationOptions<TData, TError>) {
-  return useList<TData, TError>({
+export function useRelation(options: UseRelationOptions) {
+  return useList({
     ...options
   });
 }
 
 // ─── useNotification ────────────────────────────────────────
 export function useNotification() {
-  const adminContext = captureAdminContext();
+  const adminContext=captureAdminContext();
 
   function sendToast(
-    type: 'success' | 'error' | 'warning' | 'info',
+    type: 'success'|'error'|'warning'|'info',
     message: string,
     duration?: number,
     options?: { key?: string },
   ): void {
-    const provider = adminContext.notificationProvider;
-    if (provider) {
-      provider.open({ type, message, key: options?.key });
+    const provider=adminContext.notificationProvider;
+    if(provider) {
+      provider.open({ type,message,...definedOptions({ key: options?.key }) });
       return;
     }
-    toast[type](message, duration, options);
+    toast[type](message,duration,options);
   }
 
   return {
-    open: (message: string, duration?: number, options?: { key?: string }) =>
-      sendToast('info', message, duration, options),
-    success: (message: string, duration?: number, options?: { key?: string }) =>
-      sendToast('success', message, duration, options),
-    error: (message: string, duration?: number, options?: { key?: string }) =>
-      sendToast('error', message, duration, options),
-    warning: (message: string, duration?: number, options?: { key?: string }) =>
-      sendToast('warning', message, duration, options),
+    open: (message: string,duration?: number,options?: { key?: string }) =>
+      sendToast('info',message,duration,options),
+    success: (message: string,duration?: number,options?: { key?: string }) =>
+      sendToast('success',message,duration,options),
+    error: (message: string,duration?: number,options?: { key?: string }) =>
+      sendToast('error',message,duration,options),
+    warning: (message: string,duration?: number,options?: { key?: string }) =>
+      sendToast('warning',message,duration,options),
     close: (key: string) => adminContext.notificationProvider?.close(key),
   };
 }
@@ -217,34 +160,34 @@ export function useNotification() {
 // useCheckboxGroup / useRadioGroup / useAutocomplete are convenience
 // wrappers around useSelect for common form field patterns.
 
-export interface UseCheckboxGroupOptions<TData extends BaseRecord = BaseRecord> extends Omit<UseSelectOptions<TData>, 'optionLabel' | 'optionValue' | 'defaultValue'> {
+export interface UseCheckboxGroupOptions<TData extends BaseRecord=BaseRecord> extends Omit<UseSelectOptions<TData>,'optionLabel'|'optionValue'|'defaultValue'> {
   /** Field on the record used as the option label (default: 'title') */
-  optionLabel?: string | ((item: TData) => string);
+  optionLabel?: string|((item: TData) => string);
   /** Field on the record used as the checkbox value (default: 'id') */
-  optionValue?: string | ((item: TData) => string | number);
+  optionValue?: string|((item: TData) => string|number);
   /** Currently selected values — controlled mode */
-  defaultValue?: (string | number)[];
+  defaultValue?: (string|number)[];
 }
 
 /**
  * useCheckboxGroup — multi-select field state backed by a resource query.
  * Provides a list of checkbox options plus helpers to toggle individual values.
  */
-export function useCheckboxGroup<TData extends BaseRecord = BaseRecord>(options: UseCheckboxGroupOptions<TData>) {
-  const select = useSelectImpl<TData>(options);
-  let selected = $state<(string | number)[]>(options.defaultValue ?? []);
-
-  function toggle(value: string | number) {
-    const idx = selected.findIndex(v => String(v) === String(value));
-    if (idx >= 0) {
-      selected = selected.filter(v => String(v) !== String(value));
+export function useCheckboxGroup(options: UseCheckboxGroupOptions) {
+  const select=useSelectImpl(options, () => decodeBaseRecord);
+  let selected=$state<(string|number)[]>(options.defaultValue??[]);
+
+  function toggle(value: string|number) {
+    const idx=selected.findIndex(v => String(v)===String(value));
+    if(idx>=0) {
+      selected=selected.filter(v => String(v)!==String(value));
     } else {
-      selected = [...selected, value];
+      selected=[...selected,value];
     }
   }
 
-  function isSelected(value: string | number): boolean {
-    return selected.some(v => String(v) === String(value));
+  function isSelected(value: string|number): boolean {
+    return selected.some(v => String(v)===String(value));
   }
 
   return {
@@ -254,70 +197,70 @@ export function useCheckboxGroup<TData extends BaseRecord = BaseRecord>(options:
     get selected() { return selected; },
     toggle,
     isSelected,
-    setSelected: (values: (string | number)[]) => { selected = values; },
+    setSelected: (values: (string|number)[]) => { selected=values; },
   };
 }
 
-export interface UseRadioGroupOptions<TData extends BaseRecord = BaseRecord> extends Omit<UseSelectOptions<TData>, 'optionLabel' | 'optionValue' | 'defaultValue'> {
-  optionLabel?: string | ((item: TData) => string);
-  optionValue?: string | ((item: TData) => string | number);
-  defaultValue?: string | number;
+export interface UseRadioGroupOptions<TData extends BaseRecord=BaseRecord> extends Omit<UseSelectOptions<TData>,'optionLabel'|'optionValue'|'defaultValue'> {
+  optionLabel?: string|((item: TData) => string);
+  optionValue?: string|((item: TData) => string|number);
+  defaultValue?: string|number;
 }
 
 /**
  * useRadioGroup — single-select field state backed by a resource query.
  * Provides a list of radio options plus a setter for the currently selected value.
  */
-export function useRadioGroup<TData extends BaseRecord = BaseRecord>(options: UseRadioGroupOptions<TData>) {
-  const { defaultValue: _dv, ...selectOpts } = options;
-  // useSelect 的 defaultValue 是数组类型；透传单值以便远程选项回填当前已选值
-  const select = useSelectImpl<TData>({
+export function useRadioGroup(options: UseRadioGroupOptions) {
+  const { defaultValue: _dv,...selectOpts }=options;
+  // useSelect defaultValue is an array; pass the scalar value through so remote options can restore the selection.
+  const select=useSelectImpl({
     ...selectOpts,
-    defaultValue: _dv !== undefined ? [_dv] : [],
-  });
-  let value = $state<string | number | undefined>(_dv);
+    defaultValue: _dv!==undefined? [_dv]:[],
+  }, () => decodeBaseRecord);
+  let value=$state<string|number|undefined>(_dv);
 
   return {
     query: select.query,
     get options() { return select.options; },
     onSearchChange: select.onSearchChange,
     get value() { return value; },
-    setValue: (v: string | number) => { value = v; },
+    setValue: (v: string|number) => { value=v; },
   };
 }
 
-export interface UseAutocompleteOptions<TData extends BaseRecord = BaseRecord> extends Omit<UseSelectOptions<TData>, 'onSearch' | 'defaultValue'> {
-  optionLabel?: string | ((item: TData) => string);
-  optionValue?: string | ((item: TData) => string | number);
+export interface UseAutocompleteOptions<TData extends BaseRecord=BaseRecord> extends Omit<UseSelectOptions<TData>,'onSearch'|'defaultValue'> {
+  optionLabel?: string|((item: TData) => string);
+  optionValue?: string|((item: TData) => string|number);
   /** Field name to search against (default: optionLabel) */
   searchField?: string;
-  defaultValue?: string | number;
+  defaultValue?: string|number;
 }
 
 /**
  * useAutocomplete — typeahead search field backed by a resource query.
  * Builds a 'contains' filter on the search field and debounces input.
  */
-export function useAutocomplete<TData extends BaseRecord = BaseRecord>(options: UseAutocompleteOptions<TData>) {
-  const { searchField, defaultValue: _dv, ...selectOpts } = options;
-  const labelField = typeof options.optionLabel === 'string' ? options.optionLabel : 'title';
+export function useAutocomplete(options: UseAutocompleteOptions) {
+  const { searchField,defaultValue: _dv,...selectOpts }=options;
+  const labelField=typeof options.optionLabel==='string'? options.optionLabel:'title';
 
-  const select = useSelectImpl<TData>({
+  const select=useSelectImpl({
     ...selectOpts,
-    defaultValue: _dv !== undefined ? [_dv] : [],
+    defaultValue: _dv!==undefined? [_dv]:[],
     onSearch: (term) => [{
-      field: searchField ?? labelField,
+      field: searchField??labelField,
       operator: 'contains' as const,
       value: term,
     }],
-  });
-  let value = $state<string | number | undefined>(_dv);
+  }, () => decodeBaseRecord);
+  let value=$state<string|number|undefined>(_dv);
 
   return {
     query: select.query,
     get options() { return select.options; },
     onSearchChange: select.onSearchChange,
     get value() { return value; },
-    setValue: (v: string | number) => { value = v; },
+    setValue: (v: string|number) => { value=v; },
   };
 }