@svadmin/lite 0.13.0 → 0.14.0

package/dist/components/LiteErrorSummary.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  export interface LiteFormErrorEntry {
+    fieldKey: string;
+    label: string;
+    message: string;
+    /** 可选的表单控件 id；提供后错误项会链接到该控件。 */
+    fieldId?: string;
+  }
+
+  let {
+    errors = [],
+    title = 'Please fix the following errors',
+  }: {
+    errors?: LiteFormErrorEntry[];
+    title?: string;
+  } = $props();
+</script>
+
+{#if errors.length > 0}
+  <section class="lite-error-summary" aria-labelledby="lite-error-summary-title">
+    <h2 id="lite-error-summary-title">{title}</h2>
+    <ul>
+      {#each errors as error (error.fieldKey)}
+        <li>
+          {#if error.fieldId}
+            <a href={`#${error.fieldId}`}>{error.label}: {error.message}</a>
+          {:else}
+            <span>{error.label}: {error.message}</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  </section>
+{/if}

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

@@ -0,0 +1,14 @@
+export interface LiteFormErrorEntry {
+    fieldKey: string;
+    label: string;
+    message: string;
+    /** 可选的表单控件 id；提供后错误项会链接到该控件。 */
+    fieldId?: string;
+}
+type $$ComponentProps = {
+    errors?: LiteFormErrorEntry[];
+    title?: string;
+};
+declare const LiteErrorSummary: import("svelte").Component<$$ComponentProps, {}, "">;
+type LiteErrorSummary = ReturnType<typeof LiteErrorSummary>;
+export default LiteErrorSummary;

package/dist/components/LiteFilterBuilder.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import type { CrudOperator, FieldDefinition, Filter } from '@svadmin/core';
-  import { readFilterForm } from '../filter-form.js';
+  import { filterOperatorsForField as operatorsForField, isNumericFilterField as isNumericField,
+    isCollectionFilterOperator, isFilterCollectionValue } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
+  import { readFilterForm } from '../filter-form.js';
 
   export interface FilterRuleItem {
     id: string;
@@ -12,7 +14,7 @@
 
   type FilterNode =
     | { kind: 'group'; id: string; operator: 'and' | 'or'; children: FilterNode[] }
-    | { kind: 'rule'; id: string; field: string; operator: CrudOperator; value: unknown };
+    | { kind: 'rule'; id: string; field: string; operator: CrudOperator; value: unknown; readonly?: boolean };
 
   interface Props {
     fields?: FieldDefinition[];
@@ -31,41 +33,48 @@
     disabled = false,
     onApply,
   }: Props = $props();
+  let validationError = $state<string | undefined>();
 
-  const formId = $props.id();
-  let formError = $state('');
-
-  function handleSubmit(event: SubmitEvent): void {
-    if (disabled) { event.preventDefault(); return; }
-    // 无回调时保留原生 GET/POST；添加/删除规则仍交给原生服务端 action。
-    if (!onApply || (event.submitter instanceof HTMLButtonElement && event.submitter.name === '_action')) return;
-    event.preventDefault();
-    if (!(event.currentTarget instanceof HTMLFormElement)) return;
-    let next: Filter[];
-    try { next = readFilterForm(filters, availableFields, new FormData(event.currentTarget)); }
-    catch { formError = '筛选条件无效，请检查字段、运算符和值。'; return; }
-    formError = '';
-    onApply(next);
-  }
-
-  const operatorOptions: { value: CrudOperator; label: string }[] = [
+  const instanceId = $props.id();
+  const formId = `${instanceId}-filter-form`;
+  const operatorOptions = $derived<{ value: CrudOperator; label: string }[]>([
     { value: 'eq', label: '= 等于' },
     { value: 'ne', label: '!= 不等于' },
     { value: 'contains', label: '包含' },
     { value: 'ncontains', label: '不包含' },
+    { value: 'startswith', label: '开头为' },
+    { value: 'endswith', label: '结尾为' },
     { value: 'gt', label: '> 大于' },
     { value: 'gte', label: '>= 大于等于' },
     { value: 'lt', label: '< 小于' },
     { value: 'lte', label: '<= 小于等于' },
+    { value: 'in', label: t('filter.in') },
+    { value: 'nin', label: t('filter.nin') },
+    { value: 'between', label: t('filter.between') },
+    { value: 'nbetween', label: t('filter.nbetween') },
     { value: 'null', label: '为空' },
     { value: 'nnull', label: '不为空' },
-  ];
+  ]);
 
   const availableFields = $derived(fields.filter(field => field.filterable !== false));
 
   function nodeFromFilter(filter: Filter, path: string): FilterNode {
     if ('field' in filter) {
-      return { kind: 'rule', id: `rule-${path}`, field: filter.field, operator: filter.operator, value: filter.value };
+      const field = availableFields.find(candidate => candidate.key === filter.field);
+      const editable = field !== undefined
+        && operatorsForField(field).includes(filter.operator)
+        && (filter.operator === 'null' || filter.operator === 'nnull'
+          ? filter.value === null
+          : isCollectionFilterOperator(filter.operator)
+            ? isFilterCollectionValue(field, filter.operator, filter.value)
+          : isNumericField(field)
+            ? typeof filter.value === 'number' && Number.isFinite(filter.value)
+            : field.type === 'boolean'
+              ? typeof filter.value === 'boolean'
+              : field.type === 'select'
+                ? field.options?.some(option => Object.is(option.value, filter.value)) === true
+                : typeof filter.value === 'string');
+      return { kind: 'rule', id: `rule-${path}`, field: filter.field, operator: filter.operator, value: filter.value, readonly: !editable };
     }
     return {
       kind: 'group',
@@ -81,6 +90,19 @@
     return node.kind === 'rule' ? node.value : undefined;
   }
 
+  function handleSubmit(event: SubmitEvent): void {
+    if (!onApply) return;
+    const submitter = event.submitter;
+    if (submitter instanceof HTMLButtonElement && submitter.name === '_action') return;
+    event.preventDefault();
+    try {
+      validationError = undefined;
+      onApply(readFilterForm(filters, fields, new FormData(event.currentTarget as HTMLFormElement)));
+    } catch (error) {
+      validationError = error instanceof Error ? error.message : 'Invalid filters';
+    }
+  }
+
 </script>
 
 <div class="lite-filter-builder lite-form-group">
@@ -91,8 +113,8 @@
     </button>
   </div>
 
-  {#if formError}<p role="alert">{formError}</p>{/if}
-  <form id={formId} {action} {method} onsubmit={handleSubmit} class="lite-filter-form">
+  <form id={formId} {action} {method} class="lite-filter-form" onsubmit={handleSubmit}>
+    {#if validationError}<p role="alert" class="lite-error">{validationError}</p>{/if}
     {#snippet renderNode(node: FilterNode, path: string, isRoot = false)}
       {#if node.kind === 'group'}
         <fieldset class="lite-filter-group" data-testid={isRoot ? 'lite-filter-root' : 'lite-filter-group'}>
@@ -115,19 +137,54 @@
         </fieldset>
       {:else}
         <div class="lite-filter-row" data-testid="lite-filter-rule">
-          <select name={`filters[${path}][field]`} value={node.field} {disabled}>
-            {#each availableFields as field (field.key)}<option value={field.key}>{field.label || field.key}</option>{/each}
-          </select>
-          <select name={`filters[${path}][operator]`} value={node.operator} {disabled}>
-            {#each operatorOptions as operator (operator.value)}<option value={operator.value}>{operator.label}</option>{/each}
-          </select>
-          {#if node.operator !== 'null' && node.operator !== 'nnull'}
-            {#if availableFields.find(field => field.key === node.field)?.type === 'boolean'}
-              <select name={`filters[${path}][value]`} value={String(readValue(node) ?? '')} {disabled}>
-                <option value="">请选择</option><option value="true">是</option><option value="false">否</option>
-              </select>
-            {:else}
-              <input name={`filters[${path}][value]`} type={availableFields.find(field => field.key === node.field)?.type === 'number' ? 'number' : 'text'} value={String(readValue(node) ?? '')} {disabled} />
+          {#if node.readonly}
+            <output aria-label={t('filter.readonly')}>{node.field} {node.operator} {JSON.stringify(node.value)}</output>
+            <!-- 严格解析器拒绝非协议属性，防止原生文本传输改变历史条件类型。 -->
+            <input type="hidden" name={`filters[${path}][invalid]`} value="true" {disabled} />
+            <input type="hidden" name={`filters[${path}][field]`} value={node.field} {disabled} />
+            <input type="hidden" name={`filters[${path}][operator]`} value={node.operator} {disabled} />
+            {#if node.operator !== 'null' && node.operator !== 'nnull'}
+              <input type="hidden" name={`filters[${path}][value]`} value={typeof node.value === 'string' ? node.value : JSON.stringify(node.value)} {disabled} />
+            {/if}
+          {:else}
+            <select name={`filters[${path}][field]`} value={node.field} {disabled}>
+              {#each availableFields as field (field.key)}<option value={field.key}>{field.label || field.key}</option>{/each}
+            </select>
+            <select name={`filters[${path}][operator]`} value={node.operator} {disabled}>
+              {#each operatorOptions.filter(operator => operatorsForField(availableFields.find(field => field.key === node.field)).includes(operator.value)) as operator (operator.value)}<option value={operator.value}>{operator.label}</option>{/each}
+            </select>
+            {#if node.operator !== 'null' && node.operator !== 'nnull'}
+              {#if isCollectionFilterOperator(node.operator) && Array.isArray(node.value)}
+                {@const field = availableFields.find(field => field.key === node.field)}
+                <div class="lite-filter-values">
+                  {#each node.value as item, index (index)}
+                    {@const label = node.operator === 'between' || node.operator === 'nbetween'
+                      ? t(index === 0 ? 'filter.rangeStart' : 'filter.rangeEnd')
+                      : t('filter.collectionItem', { number: String(index + 1) })}
+                    {#if field?.type === 'select'}
+                      <select aria-label={label} name={`filters[${path}][values.${index}]`} value={JSON.stringify(item)} {disabled}>
+                        {#each field.options ?? [] as option, optionIndex (optionIndex)}
+                          <option value={JSON.stringify(option.value)} disabled={option.disabled}>{option.label}</option>
+                        {/each}
+                      </select>
+                    {:else if field?.type === 'boolean'}
+                      <select aria-label={label} name={`filters[${path}][values.${index}]`} value={String(item)} {disabled}>
+                        <option value="true">{t('common.yes')}</option>
+                        <option value="false">{t('common.no')}</option>
+                      </select>
+                    {:else}
+                      <input aria-label={label} name={`filters[${path}][values.${index}]`}
+                        type={isNumericField(field) ? 'number' : 'text'} step="any" value={String(item)} {disabled} />
+                    {/if}
+                  {/each}
+                </div>
+              {:else if availableFields.find(field => field.key === node.field)?.type === 'boolean'}
+                <select name={`filters[${path}][value]`} value={String(readValue(node) ?? '')} {disabled}>
+                  <option value="">请选择</option><option value="true">是</option><option value="false">否</option>
+                </select>
+              {:else}
+                <input name={`filters[${path}][value]`} type={isNumericField(availableFields.find(field => field.key === node.field)) ? 'number' : 'text'} value={String(readValue(node) ?? '')} {disabled} />
+              {/if}
             {/if}
           {/if}
           <button type="submit" name="_action" value={`remove_filter_rule:${path}`} class="lite-btn lite-btn-sm lite-btn-danger" {disabled} title="删除此行条件">删除</button>
@@ -154,6 +211,8 @@
   .lite-filter-row > * { min-width: 120px; flex: 1; }
   .lite-filter-row > * + * { margin-left: 8px; }
   .lite-filter-row .lite-btn { flex: 0 0 auto; }
+  .lite-filter-values { display: flex; flex-wrap: wrap; min-width: 0; }
+  .lite-filter-values > * { width: 160px; max-width: 100%; box-sizing: border-box; margin: 0 8px 8px 0; }
   .lite-hint { color: #64748b; font-size: 12px; }
   .lite-btn { margin-right: 6px; }
 </style>

package/dist/components/LiteGanttChart.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { GANTT_LIMITS, validateGantt } from '@svadmin/core/gantt';
   export interface GanttTask {
     id: string;
     title: string;
@@ -6,12 +8,18 @@
     durationDays: number;
     progress?: number;
     status?: 'planned' | 'in_progress' | 'completed' | 'delayed';
+    dependencies?: string[];
+    milestone?: boolean;
   }
 
   interface Props {
     tasks?: GanttTask[];
     totalDays?: number;
     dayLabelPrefix?: string;
+    loading?: boolean;
+    error?: string | undefined;
+    retryHref?: string;
+    ariaLabel?: string;
     class?: string;
   }
 
@@ -19,48 +27,73 @@
     tasks = [],
     totalDays = 14,
     dayLabelPrefix = 'D',
+    loading = false,
+    error,
+    retryHref,
+    ariaLabel,
     class: className = '',
   }: Props = $props();
 
   const days = $derived(
-    Array.from({ length: totalDays }, (_, i) => `${dayLabelPrefix}${i + 1}`)
+    Array.from({ length: Number.isSafeInteger(totalDays) && totalDays > 0 && totalDays <= GANTT_LIMITS.days ? totalDays : 0 }, (_, i) => `${dayLabelPrefix}${i + 1}`)
   );
+  const i18n = useTranslation();
+  const validationError = $derived(validateGantt(loading || error ? [] : tasks, totalDays));
+  const displayError = $derived(error || (validationError ? i18n.t(`gantt.${validationError}`) : ''));
+  const safeRetryHref = $derived(retryHref?.startsWith('/') && !/^\/[\\/]/.test(retryHref)
+    && !retryHref.includes('\\')
+    && ![...retryHref].some(char => char.charCodeAt(0) <= 32 || char.charCodeAt(0) === 127) ? retryHref : undefined);
 </script>
 
-<div class="sv-lite-gantt-container {className}">
+<div class="sv-lite-gantt-container {className}" aria-busy={loading}>
   <div class="sv-lite-gantt-title">
-    <strong>Project Schedule</strong> ({tasks.length} tasks / {totalDays} days)
+    <strong>{i18n.t('gantt.title')}</strong> ({i18n.t('gantt.summary', { tasks: tasks.length, days: totalDays })})
   </div>
 
-  <table class="sv-lite-gantt-table">
+  {#if loading}
+    <div role="status">{i18n.t('common.loading')}</div>
+  {:else if displayError}
+    <div role="alert">{displayError}</div>
+    {#if error && safeRetryHref}<a href={safeRetryHref}>{i18n.t('common.retry')}</a>{/if}
+  {:else if tasks.length === 0}
+    <div role="status">{i18n.t('gantt.noData')}</div>
+  {:else}
+  <table class="sv-lite-gantt-table" aria-label={ariaLabel ?? i18n.t('gantt.title')}>
     <thead>
       <tr>
-        <th class="sv-lite-th-task">Task</th>
-        <th class="sv-lite-th-status">Status</th>
+        <th scope="col" class="sv-lite-th-task">{i18n.t('gantt.task')}</th>
+        <th scope="col" class="sv-lite-th-status">{i18n.t('gantt.status')}</th>
         {#each days as day (day)}
-          <th class="sv-lite-th-day">{day}</th>
+          <th scope="col" class="sv-lite-th-day">{day}</th>
         {/each}
       </tr>
     </thead>
     <tbody>
       {#each tasks as task (task.id)}
         <tr>
-          <td class="sv-lite-td-task">{task.title}</td>
+          <th scope="row" class="sv-lite-td-task" aria-label={`${task.title}, ${task.milestone
+            ? i18n.t('gantt.milestone', { day: task.startDay + 1 })
+            : i18n.t('gantt.range', { start: task.startDay + 1, end: task.startDay + task.durationDays })}`}>{task.title}</th>
           <td class="sv-lite-td-status">
-            <span class="sv-lite-gantt-badge sv-lite-{task.status ?? 'planned'}">{task.status ?? 'planned'}</span>
+            <span class="sv-lite-gantt-badge sv-lite-{task.status ?? 'planned'}">{i18n.t(`gantt.${task.status ?? 'planned'}`)}</span>
           </td>
           {#each days as _, dIdx (dIdx)}
             {@const isCovered = dIdx >= task.startDay && dIdx < task.startDay + task.durationDays}
-            <td class="sv-lite-td-cell {isCovered ? 'sv-lite-cell-active sv-lite-bg-' + (task.status ?? 'planned') : ''}">
+            {@const isMilestone = task.milestone && dIdx === task.startDay}
+            <td aria-label={isMilestone ? `${task.title}, ${i18n.t('gantt.milestone', { day: dIdx + 1 })}`
+              : isCovered ? `${task.title}, ${days[dIdx]}, ${i18n.t(`gantt.${task.status ?? 'planned'}`)}` : undefined}
+              class="sv-lite-td-cell {isCovered ? 'sv-lite-cell-active sv-lite-bg-' + (task.status ?? 'planned') : ''}">
               {#if isCovered && dIdx === task.startDay && task.progress !== undefined}
                 <span class="sv-lite-cell-progress">{task.progress}%</span>
               {/if}
+              {#if isMilestone}<span aria-hidden="true">◆</span>{/if}
             </td>
           {/each}
         </tr>
       {/each}
     </tbody>
   </table>
+  {/if}
 </div>
 
 <style>

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

@@ -5,11 +5,17 @@ export interface GanttTask {
     durationDays: number;
     progress?: number;
     status?: 'planned' | 'in_progress' | 'completed' | 'delayed';
+    dependencies?: string[];
+    milestone?: boolean;
 }
 interface Props {
     tasks?: GanttTask[];
     totalDays?: number;
     dayLabelPrefix?: string;
+    loading?: boolean;
+    error?: string | undefined;
+    retryHref?: string;
+    ariaLabel?: string;
     class?: string;
 }
 declare const LiteGanttChart: import("svelte").Component<Props, {}, "">;

package/dist/components/LiteJsonSchemaForm.svelte

@@ -1,14 +1,7 @@
 <script lang="ts">
-  interface JsonSchema {
-    type?: string;
-    title?: string;
-    description?: string;
-    properties?: Record<string, JsonSchema>;
-    items?: JsonSchema;
-    enum?: Array<string | number | boolean | null>;
-    default?: unknown;
-    required?: string[];
-  }
+  import { assertSchemaFormSchema, isSchemaFormNodeVisible, type SchemaFormSchema as JsonSchema } from '@svadmin/core/schema-form';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { encodeSchemaFormArrayAction, schemaFormActionName, schemaFormFieldName } from '../schema-form-data';
 
   interface Props {
     schema: JsonSchema;
@@ -20,14 +13,17 @@
 
   let {
     schema,
-    value = $bindable({}),
+    value = $bindable(undefined),
     action = '',
     method = 'POST',
     submitText = 'Submit Form',
   }: Props = $props();
+  const instanceId = $props.id();
+  const i18n = useTranslation();
 
   function cloneDefault(node: JsonSchema): unknown {
-    if (node.default !== undefined) return structuredClone(node.default);
+    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 ?? {})
@@ -39,55 +35,82 @@
     return undefined;
   }
 
-  function mergeDefaults(node: JsonSchema, current: unknown): unknown {
+  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(current)) return cloneDefault(node);
-      return current.map(item => node.items ? mergeDefaults(node.items, item) : item);
+      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 current ?? cloneDefault(node);
-    const source = current && typeof current === 'object' && !Array.isArray(current)
-      ? current as Record<string, unknown>
-      : {};
+    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 next = mergeDefaults(child, result[key]);
-      if (next !== undefined) result[key] = next;
+      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;
   }
 
-  $effect(() => {
-    const next = mergeDefaults(schema, value);
-    if (JSON.stringify(next) !== JSON.stringify(value)) value = next as Record<string, unknown>;
+  const resolved = $derived.by(() => {
+    try {
+      assertSchemaFormSchema(schema);
+      const next = mergeDefaults(schema, value, value !== undefined);
+      return { invalid: false, data: next && typeof next === 'object' && !Array.isArray(next) ? next as Record<string, unknown> : {} };
+    } catch {
+      return { invalid: true, data: {} as Record<string, unknown> };
+    }
   });
+  const resolvedValue = $derived(resolved.data);
 
   function readPath(path: string[]): unknown {
     return path.reduce<unknown>((current, key) => (
-      current && typeof current === 'object' ? (current as Record<string, unknown>)[key] : undefined
-    ), value);
+      current && typeof current === 'object' && Object.hasOwn(current, key) ? (current as Record<string, unknown>)[key] : undefined
+    ), resolvedValue);
   }
 
   function writePath(path: string[], nextValue: unknown): void {
-    const next = structuredClone(value);
+    const next = structuredClone($state.snapshot(resolvedValue));
     let target: Record<string, unknown> = next;
     for (const key of path.slice(0, -1)) {
-      const child = target[key];
-      target[key] = child && typeof child === 'object' ? child : {};
-      target = target[key] as Record<string, unknown>;
+      const child = Object.hasOwn(target, key) ? target[key] : undefined;
+      const container = child && typeof child === 'object' ? child : {};
+      Object.defineProperty(target, key, { value: container, enumerable: true, configurable: true, writable: true });
+      target = container as Record<string, unknown>;
     }
     const lastKey = path[path.length - 1];
-    if (lastKey !== undefined) target[lastKey] = nextValue;
+    if (lastKey !== undefined) Object.defineProperty(target, lastKey, { value: nextValue, enumerable: true, configurable: true, writable: true });
     value = next;
   }
 
+  function fieldName(path: string[]): string {
+    return schemaFormFieldName(path);
+  }
+
+  function enumToken(index: number): string {
+    return `__json_enum_${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 {
-    return options?.find(option => String(option) === raw) ?? raw;
+    if (!/^__json_enum_(0|[1-9]\d*)$/.test(raw)) return undefined;
+    const index = Number(raw.slice('__json_enum_'.length));
+    return Number.isSafeInteger(index) ? options?.[index] : undefined;
   }
 
   function addArrayItem(path: string[], itemSchema: JsonSchema): void {
     const current = readPath(path);
     const items = Array.isArray(current) ? current : [];
-    writePath(path, [...items, cloneDefault(itemSchema) ?? (itemSchema.type === 'object' ? {} : '')]);
+    const item = cloneDefault(itemSchema);
+    writePath(path, [...items, item === undefined ? (itemSchema.type === 'object' ? {} : '') : item]);
   }
 
   function removeArrayItem(path: string[], index: number): void {
@@ -101,10 +124,13 @@
   {#if schema.description}<p class="lite-schema-description">{schema.description}</p>{/if}
 
   <form {action} {method} class="lite-schema-form">
+    {#if resolved.invalid}<p role="alert">{i18n.t('common.operationFailed')}</p>{/if}
     {#snippet renderField(node: JsonSchema, path: string[], title: string, required = false)}
       {@const current = readPath(path)}
-      {@const id = `lite_json_${path.join('_')}`}
-      {#if node.type === 'object' || node.properties}
+      {@const id = `${instanceId}-${encodeURIComponent(JSON.stringify(path))}`}
+      {#if !isSchemaFormNodeVisible(node, resolvedValue)}
+        <!-- 隐藏字段不进入原生表单传输。 -->
+      {:else if node.type === 'object' || node.properties}
         <fieldset class="lite-schema-fieldset">
           <legend>{title}</legend>
           {#if node.description}<p class="lite-schema-description">{node.description}</p>{/if}
@@ -115,41 +141,61 @@
       {:else if node.type === 'array'}
         {@const items = Array.isArray(current) ? current : []}
         <fieldset class="lite-schema-fieldset">
+          <input type="hidden" name={`length:${JSON.stringify(path)}`} value={items.length} />
           <legend>{title}</legend>
           {#if node.description}<p class="lite-schema-description">{node.description}</p>{/if}
           {#each items as _, index (index)}
             {@render renderField(node.items ?? { type: 'string' }, [...path, String(index)], `${title} ${index + 1}`)}
-            <button type="button" class="lite-btn lite-btn-sm" onclick={() => removeArrayItem(path, index)}>Remove</button>
+            <button
+              type={action ? 'submit' : 'button'}
+              formnovalidate
+              name={action ? schemaFormActionName : undefined}
+              value={action ? encodeSchemaFormArrayAction({ type: 'remove', path, index }) : undefined}
+              class="lite-btn lite-btn-sm"
+              disabled={node.minItems !== undefined && items.length <= node.minItems}
+              onclick={action ? (event) => { event.preventDefault(); removeArrayItem(path, index); } : () => removeArrayItem(path, index)}
+            >Remove</button>
           {:else}
             <span class="lite-hint">No items</span>
           {/each}
-          <button type="button" class="lite-btn lite-btn-sm" onclick={() => addArrayItem(path, node.items ?? { type: 'string' })}>Add item</button>
+          <button
+            type={action ? 'submit' : 'button'}
+            formnovalidate
+            name={action ? schemaFormActionName : undefined}
+            value={action ? encodeSchemaFormArrayAction({ type: 'add', path }) : undefined}
+            class="lite-btn lite-btn-sm"
+            disabled={node.maxItems !== undefined && items.length >= node.maxItems}
+            onclick={action ? (event) => { event.preventDefault(); addArrayItem(path, node.items ?? { type: 'string' }); } : () => addArrayItem(path, node.items ?? { type: 'string' })}
+          >Add item</button>
         </fieldset>
       {:else}
         <div class="lite-schema-field">
           <label for={id} class="lite-label">{title}{#if required}<span aria-hidden="true">*</span>{/if}</label>
           {#if node.description}<p class="lite-schema-description">{node.description}</p>{/if}
           {#if node.enum}
-            <select id={id} required={required} value={String(current ?? '')} onchange={(event) => writePath(path, enumValue(event.currentTarget.value, node.enum))} class="lite-select">
+            <select id={id} name={fieldName(path)} required={required} value={enumIndex(current, node.enum) < 0 ? '' : enumToken(enumIndex(current, node.enum))} onchange={(event) => writePath(path, enumValue(event.currentTarget.value, node.enum))} class="lite-select">
               <option value="">Select an option</option>
-              {#each node.enum as option (String(option))}<option value={String(option)}>{String(option)}</option>{/each}
+              {#each node.enum as option, index (index)}<option value={enumToken(index)}>{String(option)}</option>{/each}
             </select>
+          {:else if node.type === 'null'}
+            <input id={id} name={fieldName(path)} value="null" readonly />
           {:else if node.type === 'boolean'}
-            <input id={id} type="checkbox" checked={Boolean(current)} onchange={(event) => writePath(path, event.currentTarget.checked)} />
+            <input type="hidden" name={fieldName(path)} value="false" />
+            <input id={id} type="checkbox" name={fieldName(path)} value="true" checked={Boolean(current)} onchange={(event) => writePath(path, event.currentTarget.checked)} />
           {:else if node.type === 'number' || node.type === 'integer'}
-            <input id={id} type="number" required={required} value={current === undefined ? '' : String(current)} oninput={(event) => writePath(path, event.currentTarget.value === '' ? undefined : Number(event.currentTarget.value))} class="lite-input" />
+            <input id={id} name={fieldName(path)} type="number" step={node.type === 'integer' ? 1 : 'any'} min={node.minimum} max={node.maximum} required={required} value={current == null ? '' : String(current)} oninput={(event) => writePath(path, event.currentTarget.value === '' ? undefined : Number(event.currentTarget.value))} class="lite-input" />
           {:else}
-            <input id={id} type="text" required={required} value={String(current ?? '')} oninput={(event) => writePath(path, event.currentTarget.value)} class="lite-input" />
+            <input id={id} name={fieldName(path)} type="text" minlength={node.minLength} maxlength={node.maxLength} pattern={node.pattern} required={required} value={String(current ?? '')} oninput={(event) => writePath(path, event.currentTarget.value)} class="lite-input" />
           {/if}
         </div>
       {/if}
     {/snippet}
 
-    {#each Object.entries(schema.properties ?? {}) as [key, node] (key)}
+    {#each Object.entries(resolved.invalid ? {} : schema.properties ?? {}) as [key, node] (key)}
       {@render renderField(node, [key], node.title ?? key, schema.required?.includes(key) ?? false)}
     {/each}
     <div class="lite-schema-footer">
-      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm">{submitText}</button>
+      <button type="submit" disabled={resolved.invalid} class="lite-btn lite-btn-primary lite-btn-sm">{submitText}</button>
     </div>
   </form>
 </div>

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

@@ -1,13 +1,4 @@
-interface JsonSchema {
-    type?: string;
-    title?: string;
-    description?: string;
-    properties?: Record<string, JsonSchema>;
-    items?: JsonSchema;
-    enum?: Array<string | number | boolean | null>;
-    default?: unknown;
-    required?: string[];
-}
+import { type SchemaFormSchema as JsonSchema } from '@svadmin/core/schema-form';
 interface Props {
     schema: JsonSchema;
     value?: Record<string, unknown>;