# @suwujs/vantui-form-render

> 一套适用于vantui组件库的form-render

Latest version **0.1.4** (published 2023-05-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @suwujs/vantui-form-render
pnpm add @suwujs/vantui-form-render
yarn add @suwujs/vantui-form-render
bun add @suwujs/vantui-form-render
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2023-05-16 |
| First published | 2023-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 20 |
| Unpacked size | 207.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 833 |
| Author | suk.bear |
| Maintainers | suk.bear |
| Keywords | weui, vant-weapp, Taro, React, form-render |

## Links

- npm: https://www.npmjs.com/package/@suwujs/vantui-form-render
- Repository: https://github.com/AntmJS/vantui
- Homepage: https://github.com/AntmJS/vantui#readme
- Issues: https://github.com/AntmJS/vantui/issues/new
- npm.io page: https://npm.io/package/@suwujs/vantui-form-render

## Dependencies (20)

- [raf](https://npm.io/package/raf.md) ^3.4.1
- [glob](https://npm.io/package/glob.md) ^10.1.0
- [color](https://npm.io/package/color.md) ^3.1.2
- [dayjs](https://npm.io/package/dayjs.md) ^1.10.6
- [ahooks](https://npm.io/package/ahooks.md) 3.7.5
- [rc-util](https://npm.io/package/rc-util.md) ^5.14.0
- [zustand](https://npm.io/package/zustand.md) 4.1.5
- [prettier](https://npm.io/package/prettier.md) ^2.8.7
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [@vant/icons](https://npm.io/package/@vant/icons.md) ^1.7.1
- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.0
- [@antmjs/types](https://npm.io/package/@antmjs/types.md) ^2.3.6
- [ast-to-markdown](https://npm.io/package/ast-to-markdown.md) ^1.0.0
- [async-validator](https://npm.io/package/async-validator.md) ^3.5.1
- [markdown-to-ast](https://npm.io/package/markdown-to-ast.md) ^6.0.3
- [rc-color-picker](https://npm.io/package/rc-color-picker.md) ^1.2.6
- [antd-mobile-icons](https://npm.io/package/antd-mobile-icons.md) ^0.3.0
- [use-deep-compare-effect](https://npm.io/package/use-deep-compare-effect.md) ^1.8.1
- [virtualizedtableforantd4](https://npm.io/package/virtualizedtableforantd4.md) ^1.1.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2023-05-16
- 0.1.3 — 2023-05-15
- 0.1.2 — 2023-05-15
- 0.1.1 — 2023-05-13
- 0.1.0 — 2023-05-13

## README

## ✨ 简介

基于 FormRender Mobile 适配的 vantui 动态渲染表单，支持 h5 和小程序。

## ⚙️ 安装

单独使用不要忘记同时安装 @antmjs/vantui@3.0.0

```shell
yarn add @suwujs/vantui-form-render
```

## 🚀 快速上手

```jsx
import { Button, Icon, Dialog } from '@antmjs/vantui'
import FormRender, { useForm } from '@suwujs/vantui-form-render'
import { View } from '@tarojs/components'

const schema = {
  type: 'object',
  displayType: 'row',
  properties: {
    nickname: {
      title: '昵称',
      type: 'string',
      widget: 'input',
      props: {},
      itemProps: {
        trigger: 'onInput',
        validateTrigger: 'onBlur',
      },
      rules: [
        {
          rule: /[\u4e00-\u9fa5]/,
          message: '昵称仅支持中文!',
        },
      ],
      required: true,
    },
    sex: {
      title: '性别',
      type: 'string',
      widget: 'radio',
      props: {
        options: [
          { label: '男', value: 'male' },
          { label: '女', value: 'female' },
        ],
      },
      required: true,
    },
    skills: {
      title: '特长',
      type: 'string',
      widget: 'checkboxes',
      props: {
        options: [
          { label: '足球', value: 'soccer' },
          { label: '跳舞', value: 'dance' },
          { label: '游戏', value: 'game' },
          { label: '画画', value: 'painting' },
          { label: '钓鱼', value: 'fishing' },
          { label: '化妆', value: 'makeup' },
        ],
      },
      required: true,
    },
    date: {
      title: '日期',
      type: 'string',
      widget: 'datetimePickerBox',
      props: {},
      required: true,
      itemProps: {
        valueFormat: (e) => e.detail.value,
        valueKey: 'value',
        trigger: 'onConfirm',
        renderRight: <Icon name="arrow" />,
      },
    },
  },
}

export default () => {
  const form = useForm()

  // const onFinish = (formData) => {
  //   console.log('formData:', formData)
  // }

  const handleClick = () => {
    form.validateFields((errorMessage, fieldValues) => {
      if (errorMessage && errorMessage.length) {
        Dialog.alert({
          message: `errorMessage: ${JSON.stringify(errorMessage)}`,
          selector: '#form-demo11',
        })
        return console.info('errorMessage', errorMessage)
      }

      Dialog.alert({
        message: `result: ${JSON.stringify(fieldValues)}`,
        selector: '#form-demo11',
      })
    })
  }

  return (
    <FormRender
      footer={
        <>
          <Button
            className="form-render-submit-btn"
            block
            onClick={handleClick}
            type="primary"
            // formType="submit"
          >
            提交
          </Button>
          <Dialog id="form-demo11" />
        </>
      }
      form={form}
      schema={schema}
      // onFinish={onFinish}
    />
  )
}
```

## 配置

```js
// src/config/index.js
compiler: {
    type: 'webpack5',
    prebundle: {
      exclude: ['@suwujs/vantui-form-render'],
    },
  },

// app.less
@import url('@suwujs/vantui-form-render/lib/index.less');
```

---
_Source: https://npm.io/package/@suwujs/vantui-form-render · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._