@svadmin/ui 0.73.0 → 0.75.0

package/dist/components/JsonSchemaForm.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
+  import { assertSchemaFormSchema, isSchemaFormNodeVisible, prepareSchemaFormValue, type SchemaFormSchema } from '@svadmin/core/schema-form';
+  import { tick } from 'svelte';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Button } from './ui/button/index.js';
   import { Loader2, Plus, Trash2 } from '@lucide/svelte';
   import { cn } from '../utils.js';
   import { onDestroy, untrack } from 'svelte';
   import {
-    initializeSchemaForm, schemaFormArrayItem, schemaFormEnumIndex,
-    schemaFormEnumValue, schemaFormSnapshot, writeSchemaFormPath,
+    initializeSchemaForm, schemaFormArrayItem,
+    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 JsonSchema extends JsonSchemaFormSchema {
+    properties?: Record<string, JsonSchema>;
+    items?: JsonSchema;
+    visibleWhen?: SchemaFormSchema['visibleWhen'];
+    pattern?: string;
+  }
 
   interface Props {
     schema: JsonSchema;
@@ -48,35 +54,70 @@
   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 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.' });
+  let isSubmitting = $state(false);
   const model = $derived(readRecursiveSchemaForm(schema));
+  // 两个已发布的 schema 子集分别验证；任何一个都不接受时关闭表单。
+  const coreSchema = $derived.by(() => {
+    try { assertSchemaFormSchema(schema as SchemaFormSchema); return schema as SchemaFormSchema; }
+    catch { return undefined; }
+  });
   let validationIssues = $state<SchemaFormIssue[]>([]);
   let parseIssues = $state<SchemaFormIssue[]>([]);
-  let internalValue: Record<string, unknown> | undefined;
-  let isSubmitting = $state(false);
   let failure = $state<'invalid' | 'failed' | null>(null);
   let formElement: HTMLFormElement | undefined;
   let destroyed = false;
   let authorityRevision = 0;
   let identity: readonly unknown[] = [];
+  let internalValue: Record<string, unknown> | undefined;
+
+  function cloneDefault(node: JsonSchema): unknown {
+    if (node.default !== undefined) return structuredClone($state.snapshot(node.default));
+    if (node.type === 'null') return null;
+    if (node.type === 'object' || node.properties) {
+      return Object.fromEntries(
+        Object.entries(node.properties ?? {})
+          .map(([key, child]) => [key, cloneDefault(child)])
+          .filter(([, child]) => child !== undefined),
+      );
+    }
+    if (node.type === 'array') return [];
+    return undefined;
+  }
+
+  function mergeDefaults(node: JsonSchema, current: unknown, present: boolean, budget = { nodes: 0 }): unknown {
+    if (++budget.nodes > 1000) throw new Error('Schema form data limit exceeded.');
+    const candidate = present ? current : cloneDefault(node);
+    if (candidate === null || (present && candidate === undefined)) return candidate;
+    if (node.type === 'array') {
+      if (Array.isArray(candidate) && candidate.length > 1000 - budget.nodes) throw new Error('Schema form data limit exceeded.');
+      return Array.isArray(candidate)
+        ? candidate.map(item => mergeDefaults(node.items ?? { type: 'string' }, item, true, budget))
+        : candidate;
+    }
+    if (node.type !== 'object' && !node.properties) return candidate;
+    if (candidate !== undefined && (typeof candidate !== 'object' || Array.isArray(candidate))) return candidate;
+    const source = (candidate ?? {}) as Record<string, unknown>;
+    const result: Record<string, unknown> = { ...source };
+    for (const [key, child] of Object.entries(node.properties ?? {})) {
+      const own = Object.hasOwn(source, key);
+      const next = mergeDefaults(child, own ? source[key] : undefined, own, budget);
+      if (next !== undefined || own) Object.defineProperty(result, key, { value: next, enumerable: true, configurable: true, writable: true });
+    }
+    return result;
+  }
+
   const prepared = $derived.by(() => {
     try {
-      if (model.issues.length) return { ok: false as const };
-      return { ok: true as const, value: initializeSchemaForm(schema, value) };
+      if (model.issues.length && !coreSchema) return { ok: false as const };
+      const seeded = mergeDefaults(schema, value, true);
+      return { ok: true as const, value: initializeSchemaForm(schema, seeded as Record<string, unknown>) };
+    } catch {
+      return { ok: false as const };
     }
-    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(() => {
@@ -133,31 +174,39 @@
   }
   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
+      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; }
+    } 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 enumToken(index: number): string {
+    return coreSchema && model.issues.length ? `__json_enum_${index}` : String(index);
+  }
+
+  function enumIndex(current: unknown, options: JsonSchema['enum']): number {
+    return options?.findIndex((option) => Object.is(option, current)) ?? -1;
+  }
+
+  function enumValue(raw: string, options: JsonSchema['enum']): unknown {
+    if (!/^(?:__json_enum_)?(0|[1-9]\d*)$/.test(raw)) return undefined;
+    const index = Number(raw.replace(/^__json_enum_/, ''));
+    return Number.isSafeInteger(index) ? options?.[index] : undefined;
   }
   function addArrayItem(path: string[], itemSchema: JsonSchema): void {
     if (!editable()) return;
     const current = readPath(path);
-    try { writePath(path, [...(Array.isArray(current) ? current : []), schemaFormArrayItem(itemSchema)]); }
+    const items = Array.isArray(current) ? current : [];
+    try { writePath(path, [...items, schemaFormArrayItem(itemSchema)]); }
     catch { failure = 'invalid'; }
   }
   function removeArrayItem(path: string[], index: number): void {
@@ -182,29 +231,40 @@
   }
   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; }
+    try {
+      const result = coreSchema ? prepareSchemaFormValue(coreSchema, prepared.value) : undefined;
+      const detailedIssues = model.issues.length ? [] : validateRecursiveSchemaForm(model, prepared.value);
+      const problems = [...parseIssues, ...(result
+        ? result.errors.map(issue => {
+          const path = schemaFormPointer(JSON.parse(issue.path) as string[]);
+          // 共用子集保留公开错误码；核心校验仍决定哪些字段不可提交。
+          return detailedIssues.find(detail => detail.path === path) ?? { path, code: 'invalid-value' as const };
+        })
+        : detailedIssues)];
+      if (problems.length) {
+        invalid(problems);
+        await tick();
+        formElement?.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus();
+        return;
+      }
+      payload = schemaFormSnapshot(result?.data ?? prepared.value);
+    } catch { invalid([{ path: '', code: 'invalid-value' }]); return; }
     const currentValue = value, currentSchema = schema, handler = onsubmit, revision = authorityRevision;
-    const fingerprint = JSON.stringify(payload);
+    const fingerprint = JSON.stringify(schemaFormSnapshot(prepared.value));
     failure = null;
     isSubmitting = true;
     try {
       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 草稿，不发布旧错误。 */ }
+        } catch { /* 新草稿不接收旧请求的错误。 */ }
       }
     } finally {
       if (!destroyed) isSubmitting = false;
@@ -234,13 +294,17 @@
 
   {#snippet renderField(node: JsonSchema, path: string[], title: string, required = false)}
     {@const current = readPath(path)}
-    {@const options = choices(node)}
+    {@const id = `${prefix}_${path.map(encodeURIComponent).join('/')}`}
     {@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">
+    {@const error = fieldInvalid(path)}
+    {@const options = choices(node)}
+    {#if coreSchema && !isSchemaFormNodeVisible(node as SchemaFormSchema, prepared.ok ? prepared.value : {})}
+      <!-- 隐藏字段保留草稿，但不进入提交数据。 -->
+    {:else if type === 'object' || node.properties}
+      <fieldset disabled={fieldLocked} class="svadmin-u-da7c36cd8867 svadmin-u-421ac2be5045">
         <legend class="svadmin-u-0214b4b355d1 svadmin-u-2689f3958069">{title}</legend>
+        {#if error}<p id={`${id}-error`}>{i18n.t('validation.invalidFormat')}</p>{/if}
         {#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)}
@@ -250,18 +314,19 @@
       </fieldset>
     {:else if type === 'array'}
       {@const items = Array.isArray(current) ? current : []}
-      <fieldset class="svadmin-u-da7c36cd8867 svadmin-u-421ac2be5045">
+      <fieldset disabled={fieldLocked} class="svadmin-u-da7c36cd8867 svadmin-u-421ac2be5045">
         <legend class="svadmin-u-0214b4b355d1 svadmin-u-2689f3958069">{title}</legend>
+        {#if error}<p id={`${id}-error`}>{i18n.t('validation.invalidFormat')}</p>{/if}
         {#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)}>
+          {@render renderField(node.items ?? { type: 'string' }, [...path, String(index)], `${title} ${index + 1}`)}
+          <Button type="button" variant="ghost" size="sm" disabled={fieldLocked || (node.minItems !== undefined && items.length <= node.minItems)} 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' })}>
+        <Button type="button" variant="outline" size="sm" disabled={fieldLocked || (node.maxItems !== undefined && items.length >= node.maxItems)} onclick={() => addArrayItem(path, node.items ?? { type: 'string' })}>
           <Plus class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" /> {labels.add}
         </Button>
       </fieldset>
@@ -272,17 +337,20 @@
         </label>
         {#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">
+          <select id={id} name={path.join('.')} disabled={fieldLocked} aria-invalid={error ? 'true' : undefined} aria-describedby={error ? `${id}-error` : undefined} required={required} value={enumIndex(current, options) < 0 ? '' : enumToken(enumIndex(current, options))} onchange={(event) => writePath(path, enumValue(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}
+            {#each options as option, index (index)}<option value={enumToken(index)}>{String(option)}</option>{/each}
           </select>
+        {:else if node.type === 'null'}
+          <input id={id} disabled={fieldLocked} type="text" value="null" readonly />
         {: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)} />
+          <input id={id} name={path.join('.')} disabled={fieldLocked} aria-invalid={error ? 'true' : undefined} aria-describedby={error ? `${id}-error` : undefined} 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" />
+          <input id={id} name={path.join('.')} disabled={fieldLocked} aria-invalid={error ? 'true' : undefined} aria-describedby={error ? `${id}-error` : undefined} type="number" step={type === 'integer' ? 1 : 'any'} min={node.minimum} max={node.maximum} required={required} value={current == null ? '' : 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={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" />
+          <input id={id} name={path.join('.')} disabled={fieldLocked} aria-invalid={error ? 'true' : undefined} aria-describedby={error ? `${id}-error` : undefined} type="text" minlength={node.minLength} maxlength={node.maxLength} 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}
+        {#if error}<p id={`${id}-error`}>{i18n.t('validation.invalidFormat')}</p>{/if}
       </div>
     {/if}
   {/snippet}

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

@@ -1,6 +1,12 @@
+import { type SchemaFormSchema } from '@svadmin/core/schema-form';
 import { type JsonSchemaFormSchema } from './json-schema-form-state.js';
 import { type SchemaFormIssue } from './enterprise/json-schema-form.js';
-type JsonSchema = JsonSchemaFormSchema;
+interface JsonSchema extends JsonSchemaFormSchema {
+    properties?: Record<string, JsonSchema>;
+    items?: JsonSchema;
+    visibleWhen?: SchemaFormSchema['visibleWhen'];
+    pattern?: string;
+}
 interface Props {
     schema: JsonSchema;
     value?: Record<string, unknown>;