liberty-liu / everright-formeditor Goto Github PK

:guide_dog: Powerful lowcode|vue form editor,generator,designer,builder library. It provides an easy way to create custom forms. The project is extensible, easy to use and configure, and provides many commonly used form components and functions(vue可视化低代码表单设计器、表单编辑器、element-plus vant表单设计)

Home Page: https://everright.site/en/formEditor/introduction.html

License: MIT License

JavaScript 73.75% Shell 0.02% HTML 0.07% Vue 21.21% SCSS 4.95%

form drag-and-drop low-code no-code element-plus lowcode-editor form-editor wysiwyg-editor vue vant

everright-formeditor's Introduction

Everright-formEditor

简体中文 | English

中文主页 | ENGLISH HOMEPAGE

Everright-formEditor is a free and open source javascript visual low-code editor. It can create forms with simple operations through the GUI interface. It has a flexible interaction. The PC depends on element-plus while the mobile depends on vant. There is a set of adapters to convert parameters into ones that can be recognized by both element-plus and vant.

Features

1.Support Chinese and English
2.Support Pc and Mobile
3.Rich fields and layout containers
4.Flexible interaction
5.Fields and layout separated
6.Fields and layout not separated
7.The editor, previewer, and configuration panel can all be used separately
8.Logical controller (Visible, Required, Read only)

Docs

Examples

Editor layoutType1: Fields and layout not separated
Editor layoutType2: Fields and layout separated
Preview layoutType1: Fields and layout not separated
Preview layoutType2: Fields and layout separated
Config panel Various properties for displaying and editing form fields are provided, including basic information, types, layouts, and so on

Screenshot

Logical controller

Fields adaptation

Type	Pc	Mobile
Input	✅	✅
Email	✅	✅
ID	✅	✅
Cellphone	✅	✅
URL	✅	✅
Textarea	✅	✅
Number	✅	✅
Radio	✅	✅
Checkbox	✅	✅
Select	✅	✅
Time	✅	✅
Date	✅	✅
Rate	✅	✅
Switch	✅	✅
Slider	✅	✅
Html	✅	✅
Cascader	✅	✅
File	✅	✅
Signature	✅	✅
Region	✅	✅

Containers adaptation

Type	Pc	Mobile
Grid	✅	✅
Table	✅	❌
Tabs	✅	✅
Collapse	✅	✅
Divider	✅	✅
Subform	✅	✅

Logical controller operator

Field	Equal	Not equal	Contains	Not contain	Greater than	Greater than or equal to	Less than	Less than or equal to	Between	Equal to one of	Not equal to one of	Belong to one of	Not belong to one of	Empty	Not empty
Input	✅	✅	✅	✅										✅	✅
Email	✅	✅	✅	✅										✅	✅
ID number	✅	✅	✅	✅										✅	✅
Cellphone	✅	✅	✅	✅										✅	✅
URL	✅	✅	✅	✅										✅	✅
Textarea	✅	✅	✅	✅										✅	✅
Number	✅	✅			✅	✅	✅	✅	✅					✅	✅
Radio	✅	✅	✅	✅										✅	✅
Checkbox	✅	✅	✅	✅										✅	✅
Select	✅	✅	✅	✅										✅	✅
Time	✅	✅			✅	✅	✅	✅	✅					✅	✅
Date (date)	✅	✅			✅	✅	✅	✅	✅					✅	✅
Date (datetime)	✅	✅			✅	✅	✅	✅	✅					✅	✅
Date (dates)	✅	✅	✅	✅										✅	✅
Date (daterange)	✅	✅												✅	✅
Rate	✅	✅			✅	✅	✅	✅	✅					✅	✅
Switch	✅	✅
Slider	✅	✅			✅	✅	✅	✅	✅
Html	✅	✅	✅	✅										✅	✅
Cascader	✅	✅												✅	✅
File														✅	✅
Signature														✅	✅
Region										✅	✅	✅	✅	✅	✅
Subform														✅	✅

Contributors

This repo exists thanks to all the people who contributed.

Sponsor

Powerful JavaScript IDE WebStorm from Jetbrains.

everright-formeditor's People

Contributors

Stargazers

Watchers

everright-formeditor's Issues

拖动异常问题 pc端拖动N个组件，然后切换到手机端，进行向上的拖动，切回电脑端之后，组件宽度会变成50%

pc端拖动N个组件，然后切换到手机端，进行向上的拖动，切回电脑端之后，组件宽度会变成50%

卡顿&保存不了

logic: Control field display hidden, check, required

This feature is expected to finish development in mid-June
This feature is added to the unit test

Field	equal\|等于	not_equal\|不等于	contains\|包含	not_contain\|不包含	greater_than\|大于	greater_than_equal\|大于等于	less_than\|小于	less_than_equal\|小于等于	between\|区间	one_of\|等于其中之一	not_one_of\|不等于其中之一	belong_one_of\|属于其中之一	not_belong_one_of\|不属于其中之一	empty\|为空	not_empty\|不为空
Input	✅	✅	✅	✅										✅	✅
Email	✅	✅	✅	✅										✅	✅
ID number	✅	✅	✅	✅										✅	✅
Cellphone	✅	✅	✅	✅										✅	✅
URL	✅	✅	✅	✅										✅	✅
Textarea	✅	✅	✅	✅										✅	✅
Number	✅	✅			✅	✅	✅	✅	✅					✅	✅
Radio	✅	✅	✅	✅										✅	✅
Checkbox	✅	✅	✅	✅										✅	✅
Select	✅	✅	✅	✅										✅	✅
Time	✅	✅			✅	✅	✅	✅	✅					✅	✅
Date (date)	✅	✅			✅	✅	✅	✅	✅					✅	✅
Date (datetime)	✅	✅			✅	✅	✅	✅	✅					✅	✅
Date (dates)	✅	✅	✅	✅										✅	✅
Date (daterange)	✅	✅												✅	✅
Rate	✅	✅			✅	✅	✅	✅	✅					✅	✅
Switch	✅	✅
Slider	✅	✅			✅	✅	✅	✅	✅
Html	✅	✅	✅	✅										✅	✅
Cascader	✅	✅												✅	✅
File														✅	✅
Signature														✅	✅
Region										✅	✅	✅	✅	✅	✅

建议增加一个tag字段。

建议增加一个类似tag的字段。用户可以输入多个值~或者提供个自定义字段的功能？？

【建议优化】selectElement.jsx

感谢，这个开源仓库给了我很多启发和帮助，在学习与应用的同时发现了一些小问题，以及自己的一些思考
代码片段：packages\formEditor\components\Selection\selectElement.jsx

230行，不建议直接重写document的事件(发现如果重写导致通过箭头调整宽度后，组件会拖不动)，所以调整了一下

288行，这个拖拽handle区域，操作起来不是方便，可以调整直接在组件上拖动，相对比较灵活点

336行，mask全局开启，可以通过判断props.data.type，给每一个组件都添加一个type，类似 enter，box，容器组件穿透，输入组件就默认打遮罩

 const maskNode = (
      <div class={[ns.e('mask')]} style={{ 'pointer-events': props?.data?.type !== 'enter' ? 'none' : 'all' }}>
      </div>
    )

效果

这个功能解决了什么问题？

二维码过期

你期望的 API 是什么样子的？

二维码过期

表格布局向上选父节点错误

复现：

代码片段：
https://github.com/Liberty-liu/Everright-formEditor/blob/main/packages/formEditor/components/Selection/selectElement.jsx#LL196C52-L196C58

197行处理有问题

let parent = props.data.context.parent
if (/^(inline)$/.test(parent.type)) {
  parent = parent.context.parent
} else if (/^(tr)$/.test(parent.type)) {
  parent = parent.context.parent.context.parent // 这行处理有问题
}

调整一下似乎能解决，type 类型为inline或tr的向上找一层parent，collapse、tabs、grid默认当前context.parent

let parent = props.data.context.parent
if (/^(inline|tr)$/.test(parent.type)) {
  parent = parent.context.parent
}

liberty-liu / everright-formeditor Goto Github PK

everright-formeditor's Introduction

Everright-formEditor

Features

Docs

Examples

Screenshot

Logical controller

Fields adaptation

Containers adaptation

Logical controller operator

Contributors

Sponsor

everright-formeditor's People

Contributors

Stargazers

Watchers

Forkers

everright-formeditor's Issues

这个功能解决了什么问题？

你期望的 API 是什么样子的？

Recommend Projects

Recommend Topics

Recommend Org