open-index/open-npm huggingface dataset:
npm package: @form-cross-view/native-view
Description: form-cross-view 是一个跨视图动态表单生成框架，它是基于并扩展了 [async-validator](https://github.com/yiminghe/async-validator) 数据描述规范， 分离了表单逻辑与视图，支持自定义基于不同业务框架、UI 组件库的视图。
Author: zhangzifang
Latest version: 1.0.0


form-cross-view 是一个跨视图动态表单生成框架，它是基于并扩展了 [async-validator](https://github.com/yiminghe/async-validator) 数据描述规范， 分离了表单逻辑与视图，支持自定义基于不同业务框架、UI 组件库的视图。

你可能出于以下原因选择 form-cross-view，当然前提是你需要一个表单生成组件：
1. 你需要自定义表单视图，但又不想写表单逻辑（动态渲染、数据收集、数据验证等），一种场景是社区当前没有较好的表单生成方案适合你项目所使用的业务框架（如 Solid）、UI 组件库（如 Hope UI）；
2. 你不想写繁琐的 JSON Schema，并且在某些情况下，你需要自定义单个字段的同步或异步校验逻辑。

另外，form-cross-view 内置了一些视图组件，作为自定义视图的参考范例，包括原生 DOM、React、Solid、Vue，可开箱即用，但目前只支持部分简单字段类型。

<a href="https://github.com/upqingup/form-cross-view" target="_blank">点击打开详细说明</a>

<img style="max-width: 500px" src="./demo.gif">
npm package: @form-cross-view/react-view
Description: form-cross-view 是一个跨视图动态表单生成框架，它是基于并扩展了 [async-validator](https://github.com/yiminghe/async-validator) 数据描述规范， 分离了表单逻辑与视图，支持自定义基于不同业务框架、UI 组件库的视图。
Author: zhangzifang
Latest version: 1.0.0


form-cross-view 是一个跨视图动态表单生成框架，它是基于并扩展了 [async-validator](https://github.com/yiminghe/async-validator) 数据描述规范， 分离了表单逻辑与视图，支持自定义基于不同业务框架、UI 组件库的视图。

你可能出于以下原因选择 form-cross-view，当然前提是你需要一个表单生成组件：
1. 你需要自定义表单视图，但又不想写表单逻辑（动态渲染、数据收集、数据验证等），一种场景是社区当前没有较好的表单生成方案适合你项目所使用的业务框架（如 Solid）、UI 组件库（如 Hope UI）；
2. 你不想写繁琐的 JSON Schema，并且在某些情况下，你需要自定义单个字段的同步或异步校验逻辑。

另外，form-cross-view 内置了一些视图组件，作为自定义视图的参考范例，包括原生 DOM、React、Solid、Vue，可开箱即用，但目前只支持部分简单字段类型。

<a href="https://github.com/upqingup/form-cross-view" target="_blank">点击打开详细说明</a>

<img style="max-width: 500px" src="./demo.gif">
npm package: @form-cross-view/solid-view
Description: form-cross-view 是一个跨视图动态表单生成框架，它是基于并扩展了 [async-validator](https://github.com/yiminghe/async-validator) 数据描述规范， 分离了表单逻辑与视图，支持自定义基于不同业务框架、UI 组件库的视图。
Author: zhangzifang
Latest version: 1.0.0


form-cross-view 是一个跨视图动态表单生成框架，它是基于并扩展了 [async-validator](https://github.com/yiminghe/async-validator) 数据描述规范， 分离了表单逻辑与视图，支持自定义基于不同业务框架、UI 组件库的视图。

你可能出于以下原因选择 form-cross-view，当然前提是你需要一个表单生成组件：
1. 你需要自定义表单视图，但又不想写表单逻辑（动态渲染、数据收集、数据验证等），一种场景是社区当前没有较好的表单生成方案适合你项目所使用的业务框架（如 Solid）、UI 组件库（如 Hope UI）；
2. 你不想写繁琐的 JSON Schema，并且在某些情况下，你需要自定义单个字段的同步或异步校验逻辑。

另外，form-cross-view 内置了一些视图组件，作为自定义视图的参考范例，包括原生 DOM、React、Solid、Vue，可开箱即用，但目前只支持部分简单字段类型。

<a href="https://github.com/upqingup/form-cross-view" target="_blank">点击打开详细说明</a>

<img style="max-width: 500px" src="./demo.gif">
npm package: @form-design/designer
Description: 好用的Vue可视化表单设计器，可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率。
Author: leon
Latest version: 3.2.3

## @FormDesign

**@FormDesign是根据@form-create/designer进行改造后的组件，使用说明等一切以@form-create/designer为准**

<p align="center">
    <a href="https://www.form-create.com/" target="_blank">官网</a>
    <span>&nbsp;|&nbsp;</span>
    <a href="https://view.form-create.com/" target="_blank">帮助文档</a>
    <span>&nbsp;|&nbsp;</span>
    <a href="https://form-create.com/v3/designer/" target="_blank">在线演示</a>
</p>

<p align="center">
  <a href="https://github.com/xaboy/form-create" target="_blank"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="TIM" /></a>
  <a href="https://github.com/xaboy/form-create" target="_blank"><img src="https://img.shields.io/npm/dt/@form-create/designer.svg" alt="dt" /></a>
</p>

**FcDesigner 是基于 [@form-create/element-ui](https://github.com/xaboy/form-create) 实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。**

[![FcDesigner](https://static.form-create.com/file/img/banner-m2.jpg)](https://pro.form-create.com/view)

## 特点
- 使用JSON数据生成表单
- 支持扩展自定义组件
- 内置36个常用的表单组件和布局组件
- 提供丰富的表单操作API
- 支持子表单和分组
- 支持事件配置
- 支持表格布局
- 支持表单验证
- 支持多语言

> 如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！本项目还在不断开发完善中,如有任何建议或问题[请在这里提出](https://github.com/xaboy/form-create-designer/issues/new)

> 本项目QQ讨论群[629709230](https://jq.qq.com/?_wv=1027&k=F1FlEFIV)

![demo1](https://static.form-create.com/file/img/open-designer.jpg)

## 引入

**CDN:**

```html
<link href="https://unpkg.com/element-plus@2.0.1/dist/index.css"></link>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/element-plus@2.0.1/dist/index.full.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script>
```

**NodeJs:**

```shell
npm install @form-design/elemet-plus@next
```

请自行导入`ElementPlus`并挂载

```js
import formCreate from '@form-create/element-ui'
import FcDesigner from '@form-design/elemet-plus'

app.use(formCreate)
app.use(FcDesigner)
```

## 使用

```html
<fc-designer ref="designer"/>
```

## 联系

![http://static.form-create.com/file/img/support.jpg](http://static.form-create.com/file/img/support.jpg)

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2021-present xaboy
npm package: @form-eng/react-aria
Description: React Aria Components field implementations for @form-eng/core
Author: bghcore
Latest version: 1.6.1
Deprecated: This package has been renamed to @formosaic/react-aria. Install @formosaic/react-aria instead. See https://github.com/bghcore/formosaic

> **DEPRECATED:** This package has been renamed to [`@formosaic/react-aria`](https://www.npmjs.com/package/@formosaic/react-aria). Please install `@formosaic/react-aria` instead. This package will no longer receive updates.
>
> **New repo:** [github.com/bghcore/formosaic](https://github.com/bghcore/formosaic)

# @form-eng/react-aria

React Aria Components adapter for `@form-eng/core`. Provides 28 accessible field components using [React Aria Components](https://react-spectrum.adobe.com/react-aria/) for best-in-class ARIA patterns. Includes 11 native React Aria components and 17 semantic HTML fallbacks.

## Installation

```bash
npm install @form-eng/react-aria @form-eng/core react react-dom react-hook-form react-aria-components
```

## Quick Start

```tsx
import { FormEngine, RulesEngineProvider, InjectedFieldProvider } from "@form-eng/core";
import { createReactAriaFieldRegistry } from "@form-eng/react-aria";

const fields = createReactAriaFieldRegistry();

function App() {
  return (
    <RulesEngineProvider>
      <InjectedFieldProvider fields={fields}>
        <FormEngine config={formConfig} entityData={data} />
      </InjectedFieldProvider>
    </RulesEngineProvider>
  );
}
```

## Field Implementations

| Field | Implementation |
|-------|---------------|
| Textbox | React Aria `TextField` + `Input` |
| Number | React Aria `NumberField` + `Input` |
| Toggle | React Aria `Switch` |
| Dropdown | React Aria `Select` + `ListBox` + `Popover` |
| SimpleDropdown | React Aria `Select` + `ListBox` + `Popover` |
| MultiSelect | `<select multiple>` (semantic HTML) |
| DateControl | `<input type="date">` (semantic HTML) |
| Slider | React Aria `Slider` + `SliderTrack` + `SliderThumb` |
| RadioGroup | React Aria `RadioGroup` + `Radio` |
| CheckboxGroup | React Aria `CheckboxGroup` + `Checkbox` |
| Textarea | React Aria `TextField` + `TextArea` (inline) + native `<dialog>` (modal) |
| DynamicFragment | `<input type="hidden">` |
| ReadOnly | `<span>` |

## Styling

This adapter ships with **no styles**. React Aria Components expose `data-*` render props and CSS class names for custom styling. All fields emit `data-field-type` and `data-field-state` attributes:

```css
[data-field-type="Toggle"] { /* ... */ }
[data-field-state="error"] { /* ... */ }
```

## Accessibility

React Aria Components provide built-in accessibility features including keyboard navigation, focus management, and ARIA attributes. This adapter has the highest native Tier 1 coverage (10/13 fields use React Aria components natively).

## License

MIT