# JSON Schema Form Vue3 + Element Plus

A Vue 3 component for editing JSON Schema with nested object and array support, built with Element Plus.

## 安装

```bash
npm install json-schema-form-vue3
```

## 功能特性

- 支持所有 JSON Schema 类型
- 支持嵌套对象属性
- 支持数组类型，可自定义数组项类型
- 基于 Element Plus 的清晰现代界面
- 完整的 TypeScript 支持
- 简单易用的 v-model 接口

## 快速开始

### 1. 安装依赖

```bash
npm install json-schema-form-vue3 element-plus
```

### 2. 在组件中使用

```vue
<template>
  <json-schema-form v-model="schema" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import JsonSchemaForm from '@json-schema-form-vue3'
import type { JsonSchema } from '@json-schema-form-vue3'

const schema = ref<JsonSchema>({
  type: 'object',
  properties: {
    name: {
      type: 'string',
      title: '姓名'
    },
    age: {
      type: 'number',
      title: '年龄'
    },
    hobbies: {
      type: 'array',
      title: '爱好',
      items: {
        type: 'string'
      }
    },
    address: {
      type: 'object',
      title: '地址',
      properties: {
        street: {
          type: 'string',
          title: '街道'
        },
        city: {
          type: 'string',
          title: '城市'
        }
      }
    }
  },
  required: ['name', 'age']
})
</script>
```

## 组件属性

### Props

| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|--------|------|------|--------|------|
| modelValue | JsonSchema \| SchemaProperty | 是 | - | 通过 v-model 绑定的 JSON Schema 对象 |
| isRootLevel | boolean | 否 | true | 是否为根级别编辑器，影响界面展示 |

### Events

| 事件名 | 参数类型 | 说明 |
|--------|----------|------|
| update:modelValue | JsonSchema \| SchemaProperty | 当 schema 发生变化时触发 |

## 类型定义

```typescript
interface SchemaProperty {
  type: JSONSchema7TypeName; // 'string' | 'number' | 'integer' | 'object' | 'array' | 'boolean' | 'null'
  title?: string;
  description?: string;
  properties?: Record<string, SchemaProperty>;
  items?: SchemaProperty;
  required?: string[];
}

interface JsonSchema {
  type: 'object';
  properties: Record<string, SchemaProperty>;
  required?: string[];
  $schema?: string;
  $id?: string;
  $comment?: string;
  title?: string;
  description?: string;
}
```

## 高级用法

### 嵌套对象示例

```vue
<template>
  <json-schema-form v-model="schema" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import JsonSchemaForm from 'json-schema-form-vue3'
import type { JsonSchema } from 'json-schema-form-vue3'

const schema = ref<JsonSchema>({
  type: 'object',
  properties: {
    user: {
      type: 'object',
      title: '用户信息',
      properties: {
        basicInfo: {
          type: 'object',
          title: '基本信息',
          properties: {
            name: {
              type: 'string',
              title: '姓名'
            },
            age: {
              type: 'number',
              title: '年龄'
            }
          },
          required: ['name']
        },
        contact: {
          type: 'object',
          title: '联系方式',
          properties: {
            email: {
              type: 'string',
              title: '邮箱'
            },
            phone: {
              type: 'string',
              title: '电话'
            }
          }
        }
      }
    }
  }
})
</script>
```

### 数组类型示例

```vue
<template>
  <json-schema-form v-model="schema" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import JsonSchemaForm from 'json-schema-form-vue3'
import type { JsonSchema } from 'json-schema-form-vue3'

const schema = ref<JsonSchema>({
  type: 'object',
  properties: {
    tags: {
      type: 'array',
      title: '标签',
      items: {
        type: 'string'
      }
    },
    contacts: {
      type: 'array',
      title: '联系人',
      items: {
        type: 'object',
        properties: {
          name: {
            type: 'string',
            title: '姓名'
          },
          phone: {
            type: 'string',
            title: '电话'
          }
        }
      }
    }
  }
})
</script>
```

## 开发相关

从源码构建：

```bash
git clone <repository-url>
cd json-schema-form-vue3
npm install
npm run build
```

了解更多关于 Vue 3 TypeScript 项目设置的信息，请访问 [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup)。