@svadmin/ui 0.70.0 → 0.73.0

package/dist/components/InlineEdit.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
-  import { useUpdate } from '@svadmin/core';
+  import { useUpdate, useResourceContract, captureAdminContext, captureAuthSession, useCan, HttpError, useTranslation } from '@svadmin/core';
   import type { FieldDefinition } from '@svadmin/core';
-  import { Loader2 } from '@lucide/svelte';
+  import { definedReactiveOptions } from '@svadmin/core/options';
+  import { untrack } from 'svelte';
+  import { Check, X, Loader2 } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import FieldDisplay from './FieldDisplay.svelte';
+  import { inlineDisplayValue, parseInlineValue } from '../inline-value';
 
   interface Props {
     resourceName: string;
@@ -14,53 +19,103 @@
 
   let { resourceName, recordId, field, value, onSave }: Props = $props();
 
+  const context = captureAdminContext();
+  const binding = useResourceContract(() => resourceName);
+  const i18n = useTranslation();
+  const permission = useCan(() => ({ resource: resourceName, action: 'edit', id: recordId }));
+  const { mutation } = useUpdate(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get id() { return recordId; },
+  }));
+  const display = $derived(inlineDisplayValue(field.type, value));
+  const session = $derived(captureAuthSession(context.authProvider));
+  const editable = $derived(session.available && context.getResource(resourceName).canEdit !== false && field.showInEdit !== false &&
+    field.key !== 'id' && permission.allowed === true && display !== undefined);
+  const scope = $derived({
+    contract: binding.resource, id: recordId, field: field.key, type: field.type, editable,
+    provider: context.providers?.[binding.dataProviderName], meta: binding.meta,
+    tenant: context.tenantCacheKey?.__svadminTenant,
+    auth: context.authProvider, session,
+  });
   let editing = $state(false);
   let editValue = $state('');
   let inputRef = $state<HTMLInputElement | null>(null);
+  let editorRef = $state<HTMLDivElement | null>(null);
   let saving = $state(false);
-  let savePending = false;
-  const displayValue = $derived(String(value ?? ''));
+  let failure = $state<'input' | 'request' | null>(null);
+  let active: object | undefined;
+  let editingScope = $state.raw<typeof scope>();
   const fieldLabel = $derived(field.label || field.key);
 
-  const { mutation } = useUpdate({ get resource() { return resourceName; } });
+  $effect(() => {
+    void scope;
+    editing = false;
+    editValue = '';
+    saving = false;
+    failure = null;
+    active = undefined;
+    editingScope = undefined;
+  });
+  $effect(() => () => { active = undefined; });
+  $effect(() => {
+    const node = inputRef;
+    if (editing && node) untrack(() => node.focus());
+  });
 
   function startEdit() {
-    if (field.type === 'number' || field.type === 'text' || field.type === 'url' || field.type === 'email') {
-      editing = true;
-      editValue = displayValue;
-      // Focus input on next tick
-      setTimeout(() => inputRef?.focus(), 0);
-    }
+    if (!editable || !display || saving || !session.isCurrent()) return;
+    editingScope = scope;
+    failure = null;
+    editValue = display.text;
+    editing = true;
   }
 
   async function save() {
-    if (!editing || saving || savePending) return;
-    const newValue = field.type === 'number' ? (editValue.trim() === '' ? null : (() => { const n = Number(editValue); return isNaN(n) ? value : n; })()) : editValue;
-    if (newValue === value) {
+    if (!editing || saving || !editable || editingScope !== scope || !session.isCurrent()) return;
+    let newValue: string | number | null;
+    try { newValue = parseInlineValue(field.type, editValue); }
+    catch { failure = 'input'; return; }
+    if (newValue === display?.value) {
       editing = false;
       return;
     }
-    savePending = true;
+    const current = scope;
+    const fieldKey = field.key;
+    const callback = onSave;
+    const token = {};
+    active = token;
     saving = true;
+    failure = null;
+    let succeeded = false;
+    let savedValue: unknown;
     try {
-      await mutation.mutateAsync({
-        id: recordId,
-        resource: resourceName,
-        variables: { [field.key]: newValue },
+      const result = await mutation.mutateAsync({
+        variables: { [fieldKey]: newValue }, dataProviderName: binding.dataProviderName,
       });
-      editing = false;
-      onSave?.(newValue);
-    } catch {
-      // Keep editing on error
+      if (active === token && scope === current && current.session.isCurrent()) {
+        editing = false;
+        succeeded = true;
+        savedValue = result.data[fieldKey];
+      }
+    } catch (error) {
+      if (active === token && scope === current && current.session.isCurrent()) {
+        failure = error instanceof HttpError && error.code === 'INVALID_RESOURCE_INPUT' ? 'input' : 'request';
+      }
     } finally {
-      saving = false;
-      savePending = false;
+      if (active === token && scope === current && current.session.isCurrent()) {
+        active = undefined;
+        saving = false;
+      }
     }
+    if (succeeded && scope === current && current.session.isCurrent()) callback?.(savedValue);
   }
 
   function cancel() {
+    if (saving) return;
     editing = false;
-    editValue = displayValue;
+    failure = null;
+    editingScope = undefined;
+    editValue = display?.text ?? '';
   }
 
   function handleKeydown(e: KeyboardEvent) {
@@ -71,38 +126,53 @@
     if (e.key === 'Escape') cancel();
   }
 
-  function handleBlur() {
-    if (!savePending) save();
+  function handleBlur(event: FocusEvent) {
+    if (event.relatedTarget instanceof Node && editorRef?.contains(event.relatedTarget)) return;
+    if (!saving) void save();
   }
 </script>
 
-{#if editing}
-  <div class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-6da6a3c3f741">
+{#if editing && editingScope === scope && session.isCurrent()}
+  <div bind:this={editorRef} class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-6da6a3c3f741">
     <input
       bind:this={inputRef}
-      type={field.type === 'number' ? 'number' : 'text'}
+      type="text"
+      inputmode={field.type === 'number' ? 'decimal' : field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'}
       bind:value={editValue}
       onkeydown={handleKeydown}
       onblur={handleBlur}
       disabled={saving}
       aria-label={fieldLabel}
-      class="svadmin-u-d0a52b312f7d svadmin-u-6da6a3c3f741 svadmin-u-07389a777c1f svadmin-u-ca6bcd4b6f3f svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-fc7473ca09eb svadmin-u-df37b1fd9495 svadmin-u-3daca9af0861 svadmin-u-f42e9fee68a1 svadmin-u-608dd26cd5ba svadmin-u-1a5f9520d7fa svadmin-u-0fe7d7d814d0 svadmin-u-d463b664011d"
+      aria-invalid={failure !== null}
+      class="svadmin-u-d0a52b312f7d svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c svadmin-u-07389a777c1f svadmin-u-ca6bcd4b6f3f svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-fc7473ca09eb svadmin-u-df37b1fd9495 svadmin-u-3daca9af0861 svadmin-u-f42e9fee68a1 svadmin-u-608dd26cd5ba svadmin-u-1a5f9520d7fa svadmin-u-0fe7d7d814d0 svadmin-u-d463b664011d"
     />
-    {#if saving}
-      <span class="svadmin-u-da4dbfbc4fdc svadmin-u-7b2d63937d23 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-a4326536b8f5" role="status" aria-label="Saving...">
-        <Loader2 class="svadmin-u-783b0d9d1e2c svadmin-u-afbdd13a380e svadmin-u-bfa603190748" aria-hidden="true" />
-      </span>
-    {/if}
+    <Button type="button" variant="ghost" size="icon-sm" disabled={saving} title={i18n.t('common.save')}
+      aria-label={i18n.t('common.save')} aria-busy={saving} onclick={save}>
+      {#if saving}
+        <Loader2 class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-afbdd13a380e" role="status" aria-label="Saving..." />
+      {:else}
+        <Check class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+      {/if}
+    </Button>
+    <Button type="button" variant="ghost" size="icon-sm" disabled={saving} title={i18n.t('common.cancel')}
+      aria-label={i18n.t('common.cancel')} onclick={cancel}>
+      <X class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+    </Button>
   </div>
-{:else}
-  <span
+  {#if failure}
+    <p role="alert">{i18n.t(failure === 'input' ? 'validation.invalidFormat' : 'common.operationFailed')}</p>
+  {/if}
+{:else if editable && display}
+  <button type="button"
     class="svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-34516836730d svadmin-u-07389a777c1f svadmin-u-45d828117213 svadmin-u-465609a240a8 svadmin-u-76610325273f svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359 svadmin-u-2a6233dc87a9 svadmin-u-f10f771f87e9 svadmin-u-793c80e97ffb svadmin-u-9c1295a6914a svadmin-u-ce4edccf4cbb svadmin-u-ceb69a6b0e5f"
     ondblclick={startEdit}
-    title={`Double-click to edit ${fieldLabel}`}
-    role="button"
-    tabindex="0"
+    onclick={startEdit}
+    title={`${i18n.t('common.edit')} ${fieldLabel}`}
+    aria-label={`${i18n.t('common.edit')} ${fieldLabel}`}
     onkeydown={(e) => { if (e.key === 'Enter' || e.key === 'F2') { e.preventDefault(); startEdit(); } }}
   >
-    {value != null && value !== '' ? String(value) : '—'}
-  </span>
+    {display.text || '—'}
+  </button>
+{:else}
+  <FieldDisplay type={field.type} {value} options={field.options} resourceName={field.resource} />
 {/if}

package/dist/components/JsonSchemaForm.svelte

@@ -1,13 +1,32 @@
 <script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
-  import { Loader2 } from '@lucide/svelte';
+  import { Loader2, Plus, Trash2 } from '@lucide/svelte';
   import { cn } from '../utils.js';
+  import { onDestroy, untrack } from 'svelte';
+  import {
+    initializeSchemaForm, schemaFormArrayItem, schemaFormEnumIndex,
+    schemaFormEnumValue, schemaFormSnapshot, writeSchemaFormPath,
+    type JsonSchemaFormSchema,
+  } from './json-schema-form-state.js';
+
+  import { readRecursiveSchemaForm, validateRecursiveSchemaForm, schemaFormPointer } from './enterprise/recursive-schema-form.js';
+  import { parseSchemaNumber, type SchemaFormIssue } from './enterprise/json-schema-form.js';
+  type JsonSchema = JsonSchemaFormSchema;
 
   interface Props {
-    schema: Record<string, unknown>;
+    schema: JsonSchema;
     value?: Record<string, unknown>;
     onsubmit?: (data: Record<string, unknown>) => void | Promise<void>;
     submitText?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    /** 只决定此实例文案；不修改全局语言。 */
+    locale?: string;
+    onerror?: (error: unknown) => void;
+    onvalidationerror?: (issues: SchemaFormIssue[]) => void;
+    /** Use a unique stable prefix when several schema forms share a page. */
+    idPrefix?: string;
     class?: string;
   }
 
@@ -16,134 +35,276 @@
     value = $bindable({}),
     onsubmit,
     submitText = 'Submit Form',
+    disabled = false,
+    readonly = false,
+    locale,
+    onerror,
+    onvalidationerror,
+    idPrefix,
     class: className = '',
   }: Props = $props();
 
+  const i18n = useTranslation();
+  const instanceId = $props.id();
+  const prefix = $derived(idPrefix ?? `json-form-${instanceId}`);
+  const isZh = $derived((locale ?? i18n.locale).startsWith('zh'));
+  const labels = $derived(isZh ? {
+    add: '添加项目', remove: '删除', empty: '暂无项目',
+    failed: '提交未完成，请检查状态后重试。', invalid: '请检查表单输入。',
+  } : {
+    add: 'Add item', remove: 'Remove item', empty: 'No items',
+    failed: 'Submission did not complete. Check its status before retrying.', invalid: 'Check the form input.',
+  });
+  const model = $derived(readRecursiveSchemaForm(schema));
+  let validationIssues = $state<SchemaFormIssue[]>([]);
+  let parseIssues = $state<SchemaFormIssue[]>([]);
+  let internalValue: Record<string, unknown> | undefined;
   let isSubmitting = $state(false);
-
-  interface FieldMeta {
-    key: string;
-    title: string;
-    description?: string;
-    type: string;
-    enum?: Array<string | number>;
-    required?: boolean;
-    default?: unknown;
-  }
-
-  const properties = $derived.by<FieldMeta[]>(() => {
-    const propsObj = (schema.properties ?? {}) as Record<string, Record<string, unknown>>;
-    const requiredKeys = Array.isArray(schema.required) ? (schema.required as string[]) : [];
-
-    return Object.entries(propsObj).map(([key, propDef]) => ({
-      key,
-      title: String(propDef.title ?? key),
-      description: propDef.description ? String(propDef.description) : undefined,
-      type: String(propDef.type ?? 'string'),
-      enum: Array.isArray(propDef.enum) ? (propDef.enum as Array<string | number>) : undefined,
-      required: requiredKeys.includes(key),
-      default: propDef.default,
-    }));
+  let failure = $state<'invalid' | 'failed' | null>(null);
+  let formElement: HTMLFormElement | undefined;
+  let destroyed = false;
+  let authorityRevision = 0;
+  let identity: readonly unknown[] = [];
+  const prepared = $derived.by(() => {
+    try {
+      if (model.issues.length) return { ok: false as const };
+      return { ok: true as const, value: initializeSchemaForm(schema, value) };
+    }
+    catch { return { ok: false as const }; }
+  });
+  const locked = $derived(disabled || readonly || isSubmitting || !prepared.ok);
+  // 按键是否存在初始化，不能每次输入都用 ?? 把清空的默认值补回来。
+  $effect.pre(() => {
+    if (prepared.ok && prepared.value !== value) value = prepared.value;
+  });
+  $effect.pre(() => {
+    const next = [schema, value, disabled, readonly, onsubmit];
+    untrack(() => {
+      if (next.some((part, index) => part !== identity[index])) {
+        authorityRevision += 1;
+        failure = null;
+        validationIssues = [];
+        if (schema !== identity[0] || value !== internalValue) parseIssues = [];
+        internalValue = undefined;
+      }
+      identity = next;
+    });
   });
+  onDestroy(() => { destroyed = true; });
 
-  async function handleSubmit(e: SubmitEvent) {
-    e.preventDefault();
+  function editable(): boolean {
+    return !destroyed && !disabled && !readonly && !isSubmitting && prepared.ok
+      && !formElement?.closest('fieldset[disabled]');
+  }
+  function nodeType(node: JsonSchema): string | undefined {
+    return Array.isArray(node.type) ? node.type.find(type => type !== 'null') : node.type;
+  }
+  function choices(node: JsonSchema): JsonSchema['enum'] {
+    return node.enum ?? (Object.hasOwn(node, 'const') ? [node.const ?? null] : undefined);
+  }
+  function pathReadonly(path: readonly string[]): boolean {
+    let node: JsonSchema | undefined = schema;
+    if (node.readOnly) return true;
+    for (const key of path) {
+      node = node && (nodeType(node) === 'array' ? node.items : node.properties?.[key]);
+      if (node?.readOnly) return true;
+    }
+    return false;
+  }
+  function invalid(issues: SchemaFormIssue[]): void {
+    failure = 'invalid';
+    validationIssues = issues;
+    try { onvalidationerror?.(issues); } catch { /* Observers do not authorize submission. */ }
+  }
+  function fieldInvalid(path: readonly string[]): boolean {
+    return [...validationIssues, ...parseIssues].some(issue => issue.path === schemaFormPointer(path));
+  }
+  function writeNumber(path: string[], input: HTMLInputElement): void {
+    if (!editable() || pathReadonly(path)) return;
+    const pointer = schemaFormPointer(path);
+    parseIssues = parseIssues.filter(issue => issue.path !== pointer);
+    try {
+      if (input.validity.badInput) throw new Error('Invalid numeric input');
+      writePath(path, parseSchemaNumber(input.value));
+    } catch {
+      parseIssues = [...parseIssues, { path: pointer, code: 'invalid-value' }];
+      invalid(parseIssues);
+    }
+  }
+  function readPath(path: string[]): unknown {
+    return path.reduce<unknown>((current, key) => (
+      current && typeof current === 'object' && Object.hasOwn(current, key)
+        ? (current as Record<string, unknown>)[key] : undefined
+    ), prepared.ok ? prepared.value : {});
+  }
+  function writePath(path: string[], nextValue: unknown): boolean {
+    if (!editable() || !prepared.ok || pathReadonly(path)) return false;
+    try {
+      value = writeSchemaFormPath(prepared.value, path, nextValue);
+      // Capture the actual bindable value after Svelte wraps it, not its raw source.
+      internalValue = value;
+      failure = null;
+      validationIssues = [];
+      return true;
+    }
+    catch { failure = 'invalid'; return false; }
+  }
+  function choose(path: string[], raw: string, choices: JsonSchema['enum']): void {
+    if (!editable()) return;
+    try { writePath(path, schemaFormEnumValue(choices ?? [], raw)); }
+    catch { failure = 'invalid'; }
+  }
+  function addArrayItem(path: string[], itemSchema: JsonSchema): void {
+    if (!editable()) return;
+    const current = readPath(path);
+    try { writePath(path, [...(Array.isArray(current) ? current : []), schemaFormArrayItem(itemSchema)]); }
+    catch { failure = 'invalid'; }
+  }
+  function removeArrayItem(path: string[], index: number): void {
+    if (!editable()) return;
+    const current = readPath(path);
+    if (!Array.isArray(current) || !Number.isSafeInteger(index) || index < 0 || index >= current.length) return;
+    const prefix = schemaFormPointer(path) + '/';
+    const nextIssues = parseIssues.flatMap(issue => {
+      if (!issue.path.startsWith(prefix)) return [issue];
+      const tail = issue.path.slice(prefix.length);
+      const separator = tail.indexOf('/');
+      const segment = separator < 0 ? tail : tail.slice(0, separator);
+      if (!/^(0|[1-9][0-9]*)$/u.test(segment)) return [issue];
+      const itemIndex = Number(segment);
+      if (itemIndex === index) return [];
+      if (itemIndex < index) return [issue];
+      return [{ ...issue, path: prefix + String(itemIndex - 1) + (separator < 0 ? '' : tail.slice(separator)) }];
+    });
+    // Retire only the removed item's error and shift surviving descendants with their
+    // array item. A rejected readonly/disabled write must not clear any error.
+    if (writePath(path, current.filter((_, itemIndex) => itemIndex !== index))) parseIssues = nextIssues;
+  }
+  async function handleSubmit(event: SubmitEvent): Promise<void> {
+    event.preventDefault();
+    // 同步置锁，防止同一帧的双击/重入 submit；遵循宿主 fieldset 的预览禁用状态；权限仍需服务端校验。
+    if (!editable() || !prepared.ok || !onsubmit) return;
+    const problems = [...parseIssues, ...validateRecursiveSchemaForm(model, prepared.value)];
+    if (problems.length) { invalid(problems); return; }
+    if (formElement && !formElement.checkValidity()) { invalid([{ path: '', code: 'invalid-value' }]); return; }
+    let payload: Record<string, unknown>;
+    try { payload = schemaFormSnapshot(prepared.value); }
+    catch { invalid([{ path: '', code: 'invalid-value' }]); return; }
+    const currentValue = value, currentSchema = schema, handler = onsubmit, revision = authorityRevision;
+    const fingerprint = JSON.stringify(payload);
+    failure = null;
     isSubmitting = true;
     try {
-      await onsubmit?.(value);
+      await handler(payload);
+    } catch (error) {
+      // 回调只能拿到副本；被替换/卸载实例的失败不能污染新的表单上下文。
+      if (!destroyed && revision === authorityRevision && !disabled && !readonly && currentValue === value && currentSchema === schema && handler === onsubmit) {
+        try {
+          if (JSON.stringify(schemaFormSnapshot(prepared.ok ? prepared.value : value)) === fingerprint) {
+            failure = 'failed';
+            try { onerror?.(error); } catch { /* 错误观察者不改变提交状态。 */ }
+          }
+        } catch { /* 新上下文不再是可比较的 JSON 草稿，不发布旧错误。 */ }
+      }
     } finally {
-      isSubmitting = false;
+      if (!destroyed) isSubmitting = false;
     }
   }
 
-  function updateValue(key: string, val: unknown) {
-    value = {
-      ...value,
-      [key]: val,
-    };
-  }
 </script>
 
 <form
+  novalidate
+  data-testid="json-schema-form"
+  bind:this={formElement}
+  aria-busy={isSubmitting}
   onsubmit={handleSubmit}
   class={cn('svadmin-u-3e7ce58d64fa svadmin-u-a217b4eaa918 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-0478c89a150f svadmin-u-cef5b893cf23 svadmin-u-359090c2d529', className)}
 >
   {#if schema.title}
     <div class="svadmin-u-f4cc511ff0c1 svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff">
       <h3 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{schema.title}</h3>
-      {#if schema.description}
-        <p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-15e1b1f444fe">{schema.description}</p>
-      {/if}
+      {#if schema.description}<p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-15e1b1f444fe">{schema.description}</p>{/if}
     </div>
   {/if}
 
-  <div class="svadmin-u-9c6cdfa2ba3d">
-    {#each properties as field (field.key)}
+  {#if !prepared.ok || failure}
+    <p role="alert" data-testid="schema-form-errors">{labels[!prepared.ok ? 'invalid' : failure ?? 'invalid']}</p>
+  {/if}
+
+  {#snippet renderField(node: JsonSchema, path: string[], title: string, required = false)}
+    {@const current = readPath(path)}
+    {@const options = choices(node)}
+    {@const type = nodeType(node)}
+    {@const fieldLocked = locked || pathReadonly(path)}
+    {@const id = `${prefix}_${path.map(encodeURIComponent).join('/')}`}
+    {#if type === 'object' || node.properties}
+      <fieldset class="svadmin-u-da7c36cd8867 svadmin-u-421ac2be5045">
+        <legend class="svadmin-u-0214b4b355d1 svadmin-u-2689f3958069">{title}</legend>
+        {#if node.description}<p class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748">{node.description}</p>{/if}
+        <div class="svadmin-u-9c6cdfa2ba3d">
+          {#each Object.entries(node.properties ?? {}) as [key, child] (key)}
+            {@render renderField(child, [...path, key], child.title ?? key, node.required?.includes(key) ?? false)}
+          {/each}
+        </div>
+      </fieldset>
+    {:else if type === 'array'}
+      {@const items = Array.isArray(current) ? current : []}
+      <fieldset class="svadmin-u-da7c36cd8867 svadmin-u-421ac2be5045">
+        <legend class="svadmin-u-0214b4b355d1 svadmin-u-2689f3958069">{title}</legend>
+        {#if node.description}<p class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748">{node.description}</p>{/if}
+        {#each items as _, index (index)}
+          {@render renderField(node.items ?? { type: 'string' }, [...path, String(index)], `${title} ${index + 1}`, true)}
+          <Button type="button" disabled={fieldLocked} variant="ghost" size="sm" onclick={() => removeArrayItem(path, index)}>
+            <Trash2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" /> {labels.remove}
+          </Button>
+        {:else}
+          <span class="svadmin-u-bfa603190748">{labels.empty}</span>
+        {/each}
+        <Button type="button" disabled={fieldLocked} variant="outline" size="sm" onclick={() => addArrayItem(path, node.items ?? { type: 'string' })}>
+          <Plus class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" /> {labels.add}
+        </Button>
+      </fieldset>
+    {:else}
       <div class="svadmin-u-da7c36cd8867">
-        <label for="json_field_{field.key}" class="svadmin-u-0214b4b355d1 svadmin-u-2689f3958069 svadmin-u-d4108abe6359">
-          {field.title}
-          {#if field.required}
-            <span class="svadmin-u-811148b13d1e">*</span>
-          {/if}
+        <label for={id} class="svadmin-u-0214b4b355d1 svadmin-u-2689f3958069 svadmin-u-d4108abe6359">
+          {title}{#if required}<span class="svadmin-u-811148b13d1e">*</span>{/if}
         </label>
-
-        {#if field.description}
-          <p class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748">{field.description}</p>
-        {/if}
-
-        {#if field.enum}
-          <select
-            id="json_field_{field.key}"
-            required={field.required}
-            value={String(value[field.key] ?? field.default ?? '')}
-            onchange={(e) => updateValue(field.key, e.currentTarget.value)}
-            class="svadmin-u-ed8a5df7b2fb svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-359090c2d529 svadmin-u-f10f771f87e9 svadmin-u-3e94a98e1466 svadmin-u-9c1295a6914a"
-          >
-            <option value="">Select an option...</option>
-            {#each field.enum as option (option)}
-              <option value={String(option)}>{option}</option>
-            {/each}
+        {#if node.description}<p class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748">{node.description}</p>{/if}
+        {#if options}
+          <select id={id} name={path.join('.')} aria-invalid={fieldInvalid(path)} disabled={fieldLocked} required={required} value={schemaFormEnumIndex(options, current)} onchange={(event) => choose(path, event.currentTarget.value, options)} class="svadmin-u-ed8a5df7b2fb svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-359090c2d529">
+            <option value="">{i18n.t('common.selectOption')}</option>
+            {#each options as option, optionIndex (optionIndex)}<option value={String(optionIndex)}>{String(option)}</option>{/each}
           </select>
-        {:else if field.type === 'boolean'}
-          <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-6b7d6e21ccbd">
-            <input
-              id="json_field_{field.key}"
-              type="checkbox"
-              checked={Boolean(value[field.key] ?? field.default)}
-              onchange={(e) => updateValue(field.key, e.currentTarget.checked)}
-              class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-07389a777c1f svadmin-u-18049387f0af svadmin-u-20aaf08a7ed1 svadmin-u-4df2b13689a4 svadmin-u-34516836730d"
-            />
-            <span class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{field.title}</span>
-          </div>
-        {:else if field.type === 'number' || field.type === 'integer'}
-          <input
-            id="json_field_{field.key}"
-            type="number"
-            required={field.required}
-            value={Number(value[field.key] ?? field.default ?? 0)}
-            oninput={(e) => updateValue(field.key, Number(e.currentTarget.value))}
-            class="svadmin-u-ed8a5df7b2fb svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-359090c2d529 svadmin-u-f10f771f87e9 svadmin-u-3e94a98e1466 svadmin-u-9c1295a6914a"
-          />
+        {:else if type === 'boolean'}
+          <input id={id} name={path.join('.')} aria-invalid={fieldInvalid(path)} disabled={fieldLocked} type="checkbox" checked={Boolean(current)} onchange={(event) => writePath(path, event.currentTarget.checked)} />
+        {:else if type === 'number' || type === 'integer'}
+          <input id={id} name={path.join('.')} aria-invalid={fieldInvalid(path)} disabled={fieldLocked} type="number" step={type === 'integer' ? 1 : 'any'} required={required} value={current === undefined ? '' : String(current)} oninput={(event) => writeNumber(path, event.currentTarget)} class="svadmin-u-ed8a5df7b2fb svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-359090c2d529" />
         {:else}
-          <input
-            id="json_field_{field.key}"
-            type="text"
-            required={field.required}
-            value={String(value[field.key] ?? field.default ?? '')}
-            oninput={(e) => updateValue(field.key, e.currentTarget.value)}
-            class="svadmin-u-ed8a5df7b2fb svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-359090c2d529 svadmin-u-f10f771f87e9 svadmin-u-3e94a98e1466 svadmin-u-9c1295a6914a"
-          />
+          <input id={id} name={path.join('.')} aria-invalid={fieldInvalid(path)} disabled={fieldLocked} type="text" required={required} value={String(current ?? '')} oninput={(event) => writePath(path, event.currentTarget.value)} class="svadmin-u-ed8a5df7b2fb svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-d5eab218aa34 svadmin-u-359090c2d529" />
         {/if}
       </div>
+    {/if}
+  {/snippet}
+
+  <fieldset class="schema-form-fields svadmin-u-3e7ce58d64fa" disabled={locked}>
+  {#if prepared.ok}
+  <div class="svadmin-u-9c6cdfa2ba3d">
+    {#each Object.entries(schema.properties ?? {}) as [key, node] (key)}
+      {@render renderField(node, [key], node.title ?? key, schema.required?.includes(key) ?? false)}
     {/each}
   </div>
 
+  {/if}
   <div class="svadmin-u-173fa8f06789 svadmin-u-b950dda299d3 svadmin-u-05faf5c801ff svadmin-u-60fbb7713999 svadmin-u-77c08e015d14">
-    <Button type="submit" size="sm" disabled={isSubmitting} class="svadmin-u-44ee8ba0a421 svadmin-u-25effcb585ab">
-      {#if isSubmitting}
-        <Loader2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-afbdd13a380e" />
-      {/if}
+    <Button type="submit" size="sm" disabled={locked} class="svadmin-u-44ee8ba0a421 svadmin-u-25effcb585ab">
+      {#if isSubmitting}<Loader2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-afbdd13a380e" />{/if}
       {submitText}
     </Button>
   </div>
+  </fieldset>
 </form>
+
+<style>
+  .schema-form-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
+</style>

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

@@ -1,8 +1,19 @@
+import { type JsonSchemaFormSchema } from './json-schema-form-state.js';
+import { type SchemaFormIssue } from './enterprise/json-schema-form.js';
+type JsonSchema = JsonSchemaFormSchema;
 interface Props {
-    schema: Record<string, unknown>;
+    schema: JsonSchema;
     value?: Record<string, unknown>;
     onsubmit?: (data: Record<string, unknown>) => void | Promise<void>;
     submitText?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    /** 只决定此实例文案；不修改全局语言。 */
+    locale?: string;
+    onerror?: (error: unknown) => void;
+    onvalidationerror?: (issues: SchemaFormIssue[]) => void;
+    /** Use a unique stable prefix when several schema forms share a page. */
+    idPrefix?: string;
     class?: string;
 }
 declare const JsonSchemaForm: import("svelte").Component<Props, {}, "value">;