# LTD-formGenerator

**Repository Path**: ltd_1/ltd-form-generator

## Basic Information

- **Project Name**: LTD-formGenerator
- **Description**: LTD-formGenerator：一个高效的表单生成工具，支持快速创建和定制各种复杂的表单，适用于Web应用开发，提升开发效率。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-23
- **Last Updated**: 2026-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LTD Form Generator

A drag-and-drop form builder based on Vue 3, Naive UI and TypeScript.

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Features

- Drag-and-drop form builder with real-time preview
- 13+ built-in form components (Input, Select, Radio, Checkbox, DatePicker, etc.)
- Component plugin registry for easy extensibility
- Multiple export formats: JSON Schema, Vue component code, HTML page, API submission
- Property editor with dynamic form generation
- Validation rules configuration
- Light/Dark theme support
- Responsive layout with grid system

## Quick Start

```bash
# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build
```

## Supported Components

| Category | Components |
|----------|------------|
| Basic | Input, Textarea, Number Input, Switch |
| Selection | Select, Radio Group, Checkbox Group |
| Advanced | DatePicker, TimePicker, Rate, Slider, Upload, Color Picker |

## Architecture

The form builder uses a **schema-driven rendering** approach:

1. **FormSchema** is the single source of truth
2. **ComponentRegistry** manages component types and their properties
3. **Pinia Stores** handle state management (formStore, uiStore)
4. **Composables** provide reusable business logic

## Extending Components

Add a new form component in 3 steps:

1. Create a Vue component in `src/components/form-components/`
2. Define its property schema and defaults
3. Register it with `registry.register()`

```typescript
import { registry } from '@/plugins'

registry.register({
  type: 'custom',
  name: 'Custom Component',
  icon: 'icon-name',
  category: 'basic',
  component: CustomComponent,
  defaultProps: { /* ... */ },
  propertySchema: [ /* ... */ ],
  validationTemplates: [ /* ... */ ],
})
```

## Development

```bash
# Install dependencies
pnpm install

# Development server
pnpm dev

# Type check
npx vue-tsc -b --noEmit

# Build
pnpm build

# Documentation
pnpm docs:dev
```

## Contributing

See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.

## License

[MIT](./LICENSE)