form-schema-renderer 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 form-schema-renderer contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,253 @@
+# form-schema-renderer
+
+一个 Vue 3 组件库，支持 JSON Schema 表单渲染和可视化表单设计器。
+
+A Vue 3 component library that supports JSON Schema form rendering and a visual form designer.
+
+---
+
+## ✨ 特性 / Features
+
+- 📋 **JSON Schema 自动渲染表单** — 根据 JSON Schema 配置自动生成表单
+- 🎨 **可视化表单设计器** — 拖拽排序、属性配置，所见即所得
+- 🔀 **条件可见逻辑（visibleIf）** — 支持 `equals`/`notEquals`/`exists`/`greaterThan`/`lessThan`/`greaterThanOrEqual`/`lessThanOrEqual` 操作符
+- 🔗 **逻辑组合** — 支持 `allOf`（全部满足）/ `anyOf`（任一满足）组合条件
+- 🌍 **多语言支持** — 内置中/英文，标签和描述支持 `{ zh, en }` 对象格式
+- 🧩 **自定义 Widget** — `input` / `textarea` / `number` / `select` / `checkbox` / `date` / `file` / `rich-text`
+- ✅ **AJV Schema 验证** — 基于 ajv 的实时表单验证
+- 📁 **文件上传支持** — 内置文件选择与上传处理
+- 🔄 **设计配置自动转换** — `configToSchema()` 将设计器配置自动转换为标准 JSON Schema
+
+---
+
+## 📦 安装 / Install
+
+```bash
+npm install form-schema-renderer
+```
+
+### Peer Dependencies
+
+| 依赖 | 版本 |
+|------|------|
+| vue | ^3.4.0 |
+| naive-ui | ^2.44.0 |
+
+`ajv` 已内置为库依赖，无需业务侧单独安装。
+
+---
+
+## 🚀 快速使用 / Quick Start
+
+### 渲染模式 / Render Mode
+
+通过 JSON Schema 配置自动渲染表单：
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FormRenderer } from 'form-schema-renderer'
+import 'form-schema-renderer/style.css'
+
+const schema = ref({
+  type: 'object',
+  properties: {
+    name: { type: 'string', title: '姓名' },
+    age: { type: 'number', title: '年龄' }
+  }
+})
+const formData = ref({})
+</script>
+
+<template>
+  <FormRenderer :schema="schema" v-model="formData" />
+</template>
+```
+
+### 设计器模式 / Designer Mode
+
+可视化拖拽设计表单，自动生成 JSON Schema：
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FormRenderer, configToSchema } from 'form-schema-renderer'
+import type { FormDesignConfig } from 'form-schema-renderer'
+
+const designConfig = ref<FormDesignConfig>({ fields: [] })
+
+// Convert design config to JSON Schema
+const { schema, uiSchema } = configToSchema(designConfig.value)
+</script>
+
+<template>
+  <FormRenderer mode="design" v-model:designConfig="designConfig" />
+</template>
+```
+
+### 独立使用设计器 / Standalone Designer
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FormDesigner } from 'form-schema-renderer'
+import type { FormDesignConfig } from 'form-schema-renderer'
+
+const config = ref<FormDesignConfig>({ fields: [] })
+</script>
+
+<template>
+  <FormDesigner v-model="config" />
+</template>
+```
+
+---
+
+## 📖 API 参考 / API Reference
+
+### FormRenderer Props
+
+| Prop | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| mode | `'render' \| 'design'` | `'render'` | 组件模式：渲染或设计 |
+| schema | `object` | — | JSON Schema 对象（渲染模式） |
+| uiSchema | `object` | `{}` | UI 配置，控制 Widget 类型和属性（渲染模式） |
+| modelValue | `object` | — | 表单数据，`v-model` 绑定（渲染模式） |
+| designConfig | `FormDesignConfig` | `{ fields: [] }` | 设计器配置，`v-model:designConfig` 绑定（设计模式） |
+| locale | `string` | `'zh'` | 语言设置，支持 `'zh'` / `'en'` |
+
+### FormRenderer Events
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| update:modelValue | `(data: object)` | 表单数据变更时触发（渲染模式） |
+| update:designConfig | `(config: FormDesignConfig)` | 设计配置变更时触发（设计模式） |
+| validate | `(valid: boolean, errors: Record<string, string>)` | 表单验证结果，包含验证状态和错误信息 |
+
+---
+
+## 🎨 设计器配置格式 / Designer Config
+
+### FormDesignConfig
+
+```ts
+interface FormDesignConfig {
+  title?: string | { zh: string; en: string }  // Form title
+  fields: FormFieldConfig[]                      // Field list
+}
+```
+
+### FormFieldConfig
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| key | `string` | 字段标识，唯一 |
+| type | `'input' \| 'textarea' \| 'number' \| 'select' \| 'checkbox' \| 'date' \| 'file' \| 'rich-text'` | 组件类型 |
+| label | `string \| { zh: string; en: string }` | 字段标签 |
+| description | `string \| { zh: string; en: string }` | 字段描述（可选） |
+| required | `boolean` | 是否必填 |
+| placeholder | `string` | 占位文本（可选） |
+| options | `FieldOption[]` | 选项列表，select 类型使用（可选） |
+| props | `Record<string, any>` | 传递给底层 Widget 的额外属性（可选） |
+| visibleIf | `VisibleIfRule` | 条件显示规则（可选） |
+| validation | `{ min?, max?, minLength?, maxLength?, pattern? }` | 验证规则（可选） |
+
+### FieldOption
+
+```ts
+interface FieldOption {
+  label: string | { zh: string; en: string }
+  value: string | number
+}
+```
+
+---
+
+## 🔀 条件可见 / Conditional Visibility
+
+通过 `visibleIf` 配置字段的条件显示逻辑。
+
+### 支持的操作符 / Supported Operators
+
+| 操作符 | 说明 | 示例 |
+|--------|------|------|
+| `equals` | 等于 | `{ field: 'gender', operator: 'equals', value: 'Male' }` |
+| `notEquals` | 不等于 | `{ field: 'status', operator: 'notEquals', value: 'draft' }` |
+| `exists` | 字段存在（有值） | `{ field: 'company', operator: 'exists' }` |
+| `greaterThan` | 大于 | `{ field: 'age', operator: 'greaterThan', value: 18 }` |
+| `lessThan` | 小于 | `{ field: 'age', operator: 'lessThan', value: 65 }` |
+| `greaterThanOrEqual` | 大于等于 | `{ field: 'age', operator: 'greaterThanOrEqual', value: 18 }` |
+| `lessThanOrEqual` | 小于等于 | `{ field: 'score', operator: 'lessThanOrEqual', value: 100 }` |
+
+### 逻辑组合 / Logic Combination
+
+使用 `allOf`（所有条件满足）或 `anyOf`（任一条件满足）组合多个条件：
+
+```json
+{
+  "visibleIf": {
+    "logic": "allOf",
+    "conditions": [
+      { "field": "gender", "operator": "equals", "value": "Male" },
+      { "field": "age", "operator": "greaterThanOrEqual", "value": 18 }
+    ]
+  }
+}
+```
+
+---
+
+## 📤 导出 / Exports
+
+```ts
+// Components
+export { FormRenderer } from 'form-schema-renderer'
+export { FormDesigner } from 'form-schema-renderer'
+
+// Utilities
+export { configToSchema } from 'form-schema-renderer'
+
+// Types
+export type { FormDesignConfig, FormFieldConfig, FieldOption, VisibleIfCondition, VisibleIfRule, SchemaConvertResult } from 'form-schema-renderer'
+```
+
+---
+
+## 🛠 开发 / Development
+
+```bash
+# Install dependencies
+npm install
+
+# Development mode
+npm run dev
+
+# Demo site (port 5173)
+npm run dev:demo
+
+# Build library
+npm run build
+
+# Build demo site
+npm run build:demo
+
+# Run tests
+npm run test
+```
+
+---
+
+## 🔧 技术栈 / Tech Stack
+
+- **Vue 3** — Composition API + `<script setup>`
+- **TypeScript** — 类型安全
+- **Vite** — 构建工具
+- **Naive UI** — 表单组件库
+- **AJV** — JSON Schema 验证
+- **vuedraggable** — 拖拽排序
+
+---
+
+## 📄 License
+
+MIT