Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cimple-admin/forms
form builder for laravel
https://github.com/cimple-admin/forms
laravel livewire
Last synced: 10 days ago
JSON representation
form builder for laravel
- Host: GitHub
- URL: https://github.com/cimple-admin/forms
- Owner: cimple-admin
- License: mit
- Created: 2022-11-07T01:49:14.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-14T02:11:02.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T15:41:30.323Z (about 1 month ago)
- Topics: laravel, livewire
- Language: PHP
- Homepage:
- Size: 18.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## livewire 表单构造器
这是一个基于 [livewire](https://laravel-livewire.com/) 的 [laravel](https://laravel.com/) 表单构造器。
前端基于 [AdminLTE](https://adminlte.io/)
[](https://www.murphysec.com/accept?code=5607fe9d76703e206fe71e9aa0f45ca1&type=1&from=2&t=2)
### 如何使用
> 项目目前还处于开发期，变动会很大，不建议在生产环境中使用。
>
> 使用本扩展需要对 [livewire](https://laravel-livewire.com/) 有足够的了解。
#### 在新项目中安装
1. 创建 laravel 项目后，安装扩展 `composer require cimple-admin/forms`
2. ` ./vendor/bin/sail artisan vendor:publish --tag=cimple-form --force`
使用这个命令把资源文件复制到自己的项目中，注意这个命令适合全新项目使用，如果是混合项目，则可以去 `provider`
里面看下需要什么再复制对应资源，尤其是 layout 不要覆盖了。
3. 安装后就可以使用 `artisan make:livewire XXX` 命令来创建自己的组件了。
4. 引入 `HasFormTrait`。只需实现一个方法 `getForm`
```php
namespace App\Http\Livewire;
use Illuminate\Validation\Rules\Password;
use JetBrains\PhpStorm\NoReturn;
use Livewire\Component;
use CimpleAdmin\Forms\Builder\TextInput;
use CimpleAdmin\Forms\Builder\PasswordInput;
use CimpleAdmin\Forms\Builder\CheckList;
use CimpleAdmin\Forms\Builder\CheckBox;
use CimpleAdmin\Forms\Builder\Select;
use CimpleAdmin\Forms\Builder\SelectMulti;
use CimpleAdmin\Forms\Builder\Radio;
use CimpleAdmin\Forms\Builder\Textarea;
use CimpleAdmin\Forms\Builder\WangEditor;
use CimpleAdmin\Forms\Builder\FileUploader;
use CimpleAdmin\Forms\HasForm;
use CimpleAdmin\Forms\Traits\HasFormTrait;
class Test1 extends Component
{
use HasFormTrait;
public string $title = "test page title";
public string $email = 'abc';
public string $password;
public string $username = 'df fdasfs';
public array $hobby;
public bool $remember = false;
public string $tel;
public string $sex;
public string $intro;
public string|array $interest;
public string $interest2;
public string $content1;
public string $content2;
public array $pic = ['c9fe0330-3d8f-4ead-9b99-144e7e35a734.pdf', '671c09c8-e6d4-4440-a5ac-4c99744a5daf.jpg'];
public array $pic2;
public function render()
{
return view('livewire.test1');
}
public function getForm(): array
{
return [
TextInput::make('email')->label("电子邮件")->required()->email()->hint("this is text input hint"),
TextInput::make('username')->label("用户名")->required()->alphaDash(),
// TextInput::make('tel')->label("手机号")->required()->type('tel'),
// PasswordInput::make('password')->label("密码")->required()->rules([
// Password::min(10)->letters()->numbers()->mixedCase()->symbols(),
// ])->hint("密码必须包含大写字母、小写字母、符号以及数字，最少10位"),
// CheckList::make('hobby')->label('爱好')->options([
// 'football' => '足球',
// 'swaming' => '游泳',
// 'basketball' => '篮球',
// ])->required()->itemInArray(['football']),
// CheckBox::make('remember')->label('记住我')->toggle()->hiddenLabel(),
// Radio::make('sex')->label('性别')->options([
// 'male' => '男',
// 'female' => '女',
// 'other' => '未知',
// ])->required()->itemInOption(),
// SelectMulti::make('interest')->label('爱好2')->options([
// 'football' => '足球',
// 'swaming' => '游泳',
// 'basketball' => '篮球',
// ])->required()->itemInOption()->inline(),
// Select::make('interest2')->label('爱好3')->options([
// 'football' => '足球',
// 'swaming' => '游泳',
// 'basketball' => '篮球',
// ])->required()->itemInOption()->inline(),
Textarea::make('intro')->label('简介')->rows(8)->inline(),
// WangEditor::make('content1')->label('内容1'),
// WangEditor::make('content2')->label('内容2')->inline(),
FileUploader::make('pic')->label('封面图片')->maxFileSize(1000 * 1024 * 1024)->autoUpload(true),
//FileUploader::make('pic2')->label('封面图片2')->maxFileSize(1000 * 1024 * 1024)->autoUpload(false),
];
}
#[NoReturn] public function submit()
{
$this->validate();
dd('pass validate', $this->content1, $this->username, $this->email);
}
}
```
5. 这个方法返回了，一批表单组件。
```php
public function getForm()
{
return [
TextInput::make('email')->label("电子邮件")->required()->email()->hint("this is text input hint"),
TextInput::make('username')->label("用户名")->required()->alphaDash(),
// TextInput::make('tel')->label("手机号")->required()->type('tel'),
// PasswordInput::make('password')->label("密码")->required()->rules([
// Password::min(10)->letters()->numbers()->mixedCase()->symbols(),
// ])->hint("密码必须包含大写字母、小写字母、符号以及数字，最少10位"),
// CheckList::make('hobby')->label('爱好')->options([
// 'football' => '足球',
// 'swaming' => '游泳',
// 'basketball' => '篮球',
// ])->required()->itemInArray(['football']),
// CheckBox::make('remember')->label('记住我')->toggle()->hiddenLabel(),
// Radio::make('sex')->label('性别')->options([
// 'male' => '男',
// 'female' => '女',
// 'other' => '未知',
// ])->required()->itemInOption(),
// SelectMulti::make('interest')->label('爱好2')->options([
// 'football' => '足球',
// 'swaming' => '游泳',
// 'basketball' => '篮球',
// ])->required()->itemInOption()->inline(),
// Select::make('interest2')->label('爱好3')->options([
// 'football' => '足球',
// 'swaming' => '游泳',
// 'basketball' => '篮球',
// ])->required()->itemInOption()->inline(),
Textarea::make('intro')->label('简介')->rows(8)->inline(),
// WangEditor::make('content1')->label('内容1'),
// WangEditor::make('content2')->label('内容2')->inline(),
FileUploader::make('pic')->label('封面图片')->maxFileSize(1000 * 1024 * 1024)->autoUpload(true),
//FileUploader::make('pic2')->label('封面图片2')->maxFileSize(1000 * 1024 * 1024)->autoUpload(false),
];
}
```
6. 页面模板
```html
{{-- If your happiness depends on money, you will never be happy with yourself. --}}
{{$this->form}}
submit
@section('title')
{{$title}}
@endsection
```
只要增加 `{{$this->form}}` 就可以显示出来再代码中定义的组件了
至于 button 就是自己实现提交逻辑的方法了，这个库只生成表单，其他的都要自己实现，后续的更多支持，可以期待后续的库
7. 至此，全部都结束了。只需在代码里面定义表单和提交逻辑，前端部分几乎什么都不需要了。
### 初步完成组件
* [x] input
* [x] password
* [x] checkbox
* [x] checklist
* [x] radio
* [x] textarea
* [x] select
* [x] wangeditor
* [x] fileupload (dropzone)
上面这些仅仅是功能完成了，后续还有抽象、样式优化、功能细节优化等持续功能要做
### 待增加组件
* [ ] editor ( editor.md 、 ueditorplus(这个待考虑))
### 更多说明
1. 还在初期，改动很大，不要生产环境
2. 参考了很多 [https://filamentphp.com/](https://filamentphp.com/) 的逻辑，代码是否有交叉未知。