@wenext/schema-form v0.0.3

一个轻量的 Schema Form 核心，基于 JSON Schema / UI Schema 渲染表单，并通过 Element Plus entry 提供基础与高阶控件。

安装

pnpm add @wenext/schema-form @jsonforms/core @jsonforms/vue @jsonforms/vue-vanilla vue

使用 Element Plus 控件时额外安装：

pnpm add element-plus @element-plus/icons-vue

使用高阶控件时，再安装颜色选择器：

pnpm add vue3-colorpicker

vue3-colorpicker 仅由 element-plus 聚合入口和 element-plus/advanced 入口使用；只使用 element-plus/basic 时无需安装。

使用

import { SchemaForm } from '@wenext/schema-form'
import { elementPlusRenderers } from '@wenext/schema-form/element-plus'
import 'element-plus/dist/index.css'
import '@wenext/schema-form/element-plus/styles.css'

<SchemaForm
  v-model="data"
  :schema="schema"
  :ui-schema="uiSchema"
  :renderers="elementPlusRenderers"
/>

值变更校验

控件可以在 UI Schema 的 Control.options 中配置变更前校验。校验失败时不会更新 v-model，默认尝试使用 ElMessage.error 提示；也可以通过 services.toast 覆盖：

const uiSchema = {
  type: 'Control',
  label: '连抽次数',
  scope: '#/properties/multiLotteryCount',
  options: {
    attrs: { type: 'number', min: 2, max: 10 },
    tips: '最低连抽 2 次，最多 10 次',
    validator: ({ value }) =>
      Number(value) % 2 === 0 || '连抽次数必须是偶数',
  },
};

attrs 支持 min、max、step、minLength、maxLength、pattern、required 和 type: 'number' | 'range' 等内置规则。自定义 validator 可以返回 true、false、错误文案，或 { valid, message }。

<SchemaForm
  v-model="data"
  :ui-schema="uiSchema"
  :services="{ toast: (message) => ElMessage.error(message) }"
  :schema="schema"
  :renderers="elementPlusRenderers"
 />

SchemaForm 默认使用 JSON Forms 的 vanillaRenderers，再叠加通过 renderers 传入的 Element Plus renderer；因此未覆盖的控件仍保持旧包的 vanilla 行为。

只使用基础控件时，可以减少高阶控件的静态引用：

import { elementPlusBasicRenderers } from '@wenext/schema-form/element-plus/basic'

高阶控件通过 services 接收外部实现，包本身不实现上传、翻译或 ZIP 解析：

<SchemaForm
  v-model="data"
  :schema="schema"
  :ui-schema="uiSchema"
  :renderers="elementPlusRenderers"
  :services="{ upload, translate }"
/>

颜色控件支持纯色和渐变色，使用 UI Schema 的 options.attrs 透传颜色选择器配置：

{
  "type": "Control",
  "scope": "#/properties/themeColor",
  "options": {
    "producer": "color-picker",
    "attrs": {
      "format": "rgb",
      "useType": "both"
    }
  }
}

多语言控件的语言列表可放在 UI Schema options，或继续使用旧包兼容的 SchemaForm.config.langOptions：

const config = {
  langOptions: [
    { label: 'English', value: 'en' },
    { label: '简体中文', value: 'zh-CN' },
  ],
}

详细的拆分原则和迁移记录见 重构实践文档。