Designable - 🧩 Make everything designable 🧩 Such as form builder/table builder/chart builder/app builder etc.

Information

Category: JavaScript / Miscellaneous
Watchers: 33
Star: 2k
Fork: 377
Last update: Jun 22, 2022

Resource links

https://github.com/alibaba/designable

Introduction

If you are worrying about something builder, Such as form builder/table builder/chart builder/app builder etc. Designable is your perfect choice.

Screenshot

Features

🚀 High performance, Smooth and beautiful drag and drop experience
💡 Full scene coverage
🎨 Support Low Code and No Code
🏅 Strong scalability

Website

playground

Contributors

This project exists thanks to all the people who contribute.

32 Open More issues

Closed

feat(core/react): add free layout

add FreeLayout feature.

Add hooks and handlers to achieve this function. When the component has freeLayout properties in designerProps, it show a button with text 'Free' on the top left corner. Developer can press the button, drag and drop to place the component everywhere on the designer panel.

Before submitting a pull request, please make sure the following is done...

[x] Ensure the pull request title and commit message follow the Commit Specific in English.
[x] Fork the repo and create your branch from main.
[ ] If you've added code that should be tested, add tests!
[ ] If you've changed APIs, update the documentation.
[ ] Ensure the test suite passes (npm test).
[x] Make sure your code lints (npm run lint) - we've done our best to make sure these rules match our internal linting guidelines.

opened Dec 26, 2021 by jinphic 13

Closed

feat(react): ResourceWidget support description

Before submitting a pull request, please make sure the following is done...

[x] Ensure the pull request title and commit message follow the Commit Specific in English.
[x] Fork the repo and create your branch from main.
[ ] If you've added code that should be tested, add tests!
[ ] If you've changed APIs, update the documentation.
[ ] Ensure the test suite passes (npm test).
[ ] Make sure your code lints (npm run lint) - we've done our best to make sure these rules match our internal linting guidelines.

opened Apr 20, 2022 by whinc 10

Closed

什么时候发布 1.0 班本

如题

opened Nov 11, 2021 by kaoding 9

Closed

fix(core): increment save behaviors

modify registerDesignerBehaviors function increment save behaviors

Bug flow description:

setDesignerBehaviors set behaviors
ComponentTreeWidget effect call registerDesignerBehaviors save behaviors
then setDesignerBehaviors behaviors lose

opened Oct 13, 2021 by lidianhao123 6

Closed

fix(core): getClosestPosition error when component nesting

问题

当组件嵌套了多个组件时，会发生 closestPosition 计算不对的问题

拿Card 举例，在 behavior 里设置了 Card 不能 append 到 Card

录制了一个 gif 图，拖拽滑动到子组件时光标位置计算不对。拖拽到 input， textArea 和 password 分别发生了多次光标跳动，无法给予拖拽用户一个准确的预期

原因

getClosestPosition 方法做了 closestNode 的重计算（主要是 onMove 事件在方法外会修改 closestNode，所以重计算 closestNode 没有问题），但没有进行 isAfter 的重计算。

[x] Ensure the pull request title and commit message follow the Commit Specific in English.
[x] Fork the repo and create your branch from main.
[x] If you've added code that should be tested, add tests!
[x] If you've changed APIs, update the documentation.
[x] Ensure the test suite passes (npm test).
[x] Make sure your code lints (npm run lint) - we've done our best to make sure these rules match our internal linting guidelines.

opened Apr 9, 2022 by bcguan2008 5

Closed

[Bug Report] 自增组件中添加输入控件，控件的label不能右对齐

null

opened Feb 9, 2022 by chenyangchi 5

Open

[Bug Report] designable-formily 工具 NumberPicker 组件配置 formatter 参数报错

Reproduction link

https://designable-antd.formilyjs.org/

Steps to reproduce

使用官方提供的 formilyjs 线上设计器工具按照如下步骤操作

选中 NumberPicker 组件
编辑组件属性中的格式转换器
输入 value => `$$ ${value}`
切换到 JSONTREE 模式, 可以看到相关配置: "formatter": "{{value => `$$ ${value}`}}"
切换到 PREVIEW 模式, 可以看到formily/antd 是正常运行的
切换回 DESIGNABLE 模式, 出现报错

opened Jun 24, 2022 by melodyJie 0

Open

fix(react-settings-form): BoxStyleSetter value maybe negative

Before submitting a pull request, please make sure the following is done...

[x] Ensure the pull request title and commit message follow the Commit Specific in English.
[x] Fork the repo and create your branch from main.
[ ] If you've added code that should be tested, add tests!
[ ] If you've changed APIs, update the documentation.
[ ] Ensure the test suite passes (npm test).
[x] Make sure your code lints (npm run lint) - we've done our best to make sure these rules match our internal linting guidelines.

opened Jun 17, 2022 by yiyunwan 3

Open

[Bug Report]自定义组件中使用iframe,自定义组件拖入画布的时候没有问题，预览也没有问题，从预览切换到画布的时候就报错，

Package

@designable/core

opened Jun 10, 2022 by sarah0730 0

Open