# visbar-gui

> > 生成低代码右侧配置面板，通过物料协议的入参配置，生成对应的配置面板组件.

Latest version **1.2.2** (published 2021-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install visbar-gui
pnpm add visbar-gui
yarn add visbar-gui
bun add visbar-gui
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2021-10-22 |
| First published | 2021-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chensir725 |

## Links

- npm: https://www.npmjs.com/package/visbar-gui
- npm.io page: https://npm.io/package/visbar-gui

## Dependencies (7)

- [antd](https://npm.io/package/antd.md) ^4.16.13
- [react](https://npm.io/package/react.md) ^17.0.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [react-color](https://npm.io/package/react-color.md) ^2.19.3
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^4.7.0
- [react-monaco-editor](https://npm.io/package/react-monaco-editor.md) ^0.45.0

## Recent versions

- 1.2.2 (latest) — 2021-10-22
- 1.2.1 — 2021-10-18
- 1.2.0 — 2021-10-18
- 1.1.9 — 2021-10-18
- 1.1.8 — 2021-10-17
- 1.1.7 — 2021-10-17
- 1.1.6 — 2021-10-17
- 1.1.5 — 2021-10-17
- 1.1.4 — 2021-10-16
- 1.1.3 — 2021-10-16
- 1.1.2 — 2021-10-16
- 1.1.1 — 2021-10-16
- 1.1.0 — 2021-10-16
- 1.0.8 — 2021-10-10
- 1.0.7 — 2021-10-08
- … 7 more at https://npm.io/package/visbar-gui/versions

## README

# Visbar-GUI生成器
> 生成低代码右侧配置面板，通过物料协议的入参配置，生成对应的配置面板组件.

### 快速开始:
```bash
npm install visbar-gui --save
# 或
yarn add visbar-gui --save
```
* 项目必须依赖 react, antd基础库，请确认是否安装
```tsx
/**
 * config: 物料协议的配置信息
 * onChange: 数据变更时的回调
 * value: 值，会根据路径分发给相应的控件（路径为对象的路径, 如 obj.user.name）  
 */
<VisbarGUI config={this.state.config}
  onChange={this.guiConfigChange}
  value={extractDefault({ config: this.state.config, value: this.state.data })}
/>
```

### 入参配置
| 参数名 | 参数描述 | 参数类型 | 默认值 |
|---|---|---|---|
| config | GUI配置面板的物料配置，根据配置生成面板组件 | any | {} |
| value | GUI面板中生成控件的value值 | any | {} |
| onChange | GUI面板中的值改变时触发的回调 | (data: any) => any | - |
| extensions | GUI面板控件扩展, 可以添加额外的渲染控件 | { [key: string]: React.ComponentClass \| React.FunctionComponent } | - |

### 静态属性方法
`GUI.extensionControl`: 扩展的渲染控件属性,类型同`extensions`属性类型, 会在所有的VisbarGUI组件中生效.

`GUI.register`: 往`GUI.extensionControl`中添加渲染控件的方法，参数同`extensions`类型.

### 物料协议配置描述:
* name: 控件元素的名称，会作为控件的label展示
* node: 控件元素使用的渲染控件，可以为默认内置控件和扩展控件(默认控件见下文)
* children: 控件的子元素，如果当控件时容器控件时才需要存在，否则将打乱控件的渲染
* description: 控件的描述文案，将会做为label的tooltip展示
* default: 控件的默认值
* 其他: 控件的其他属性，如stepper控件的min,max属性等，将原样传递的对应的控件

### 内置控件:
* `text`: 渲染文本输入框控件

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| default | 默认值 | string | false |
| description | 控件描述 | string | false |

* `stepper`: 渲染数值步进器控件

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| default | 默认值 | number | false |
| description | 控件描述 | string | false |
| min | 最小值 | number | false |
| max | 最大值 | number | false |
| precision | 数值精度 | number | false |
| step | 步长 | number | false |

* `slider`: 渲染滑动条控件

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| default | 默认值 | number \| number[] | false |
| description | 控件描述 | string | false |
| range | 双滑块模式 | boolean | false |
| min | 最小值 | number | false |
| max | 最大值 | number | false |
| step | 步长 | number | false |

* `select`: 选择框控件

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| default | 默认值 | any | false |
| description | 控件描述 | string | false |
| options | 选项列表 | {label: string, value: any}[] | true |
| mode | 多选框模式 | 'multiple' \| 'tags' | false |

* `switch`: 开关控件

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| default | 默认值 | boolean | false |
| description | 控件描述 | string | false |

* `radio`: 单选框控件，有默认形式和button形式

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| default | 默认值 | any | false |
| description | 控件描述 | string | false |
| type | 控件形式 | 'default' \| 'button' | false |
| options | 选项列表 | {label: string, value: any}[] | true |

* `checkbox`: 多选框控件，有默认形式和button形式

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| default | 默认值 | any[] | false |
| description | 控件描述 | string | false |
| type | 控件形式 | 'normal' \| 'button' | false |
| options | 选项列表 | {label: string, value: any}[] | true |

* `color`: 颜色选择器控件

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| default | 默认值 | hex颜色值 | false |
| description | 控件描述 | string | false |

* `codeEditor`: 代码编辑器控件

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| default | 默认值 | string | false |
| description | 控件描述 | string | false |
| language | 编辑器语言 | string | false |

* `suite`: 可控控件，会在控件前加一个开关，表示控件是否可用

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| default | 默认值 | any | false |
| description | 控件描述 | string | false |
| nodeTruly | 实际渲染的控件 | string | true |
| show | 控制开关的状态 | boolean | false |


* `group`: 组控件，其子控件在其下拉面板中展示

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| children | 组控件的子元素 | { [key: strig]: any } | true |

* `menu`: 菜单控件，展示tab菜单

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| children | 菜单控件的子元素 | { [key: strig]: any }(一级子控件需要是tab控件) | true |

* `tab`: 菜单面板控件，需和menu控件结合使用，作为menu控件的子控件

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| children | 菜单面板控件的子元素 | { [key: strig]: any } | true |

* `margin`: 边距编辑控件

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| default | 边距数据 | [top: number, right: number, bottom: number, left: number] | false |

* `array`: 数组对象控件

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| length | 默认数组长度| number | false |
| activeKey | 默认选中激活的数组项 | number | false |
| value | 默认数据值 | any | false |
| childItem | 数组对象的每个值的物料渲染配置，形式同tab的children | any | true |


* `type`: 多类型数据控件

| 必要属性 | 值描述 | 值类型 | 是否必须 |
|---|---|---|---|
| type | 当前类型对象 | { [key: string]: any(渲染的控件); } | true |
| defaultType | 默认激活的控件 | string | false |
| value | 默认数据值(该默认值会根据其类型映射到具体的控件中) | any | false |
| onChange | 数据值改变时的回调 | (data: any) => any | false |

---
_Source: https://npm.io/package/visbar-gui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._