Downloads
Stars
Version
Builded with Vue.js, vuetifyjs
Manage your data, store files.
Support Laravel 7
Fields validation using laravel validator
Crud forms has access check by roles(select, add, edit, delete)
Check db settings and APP_URL in .ENV file of your application
Make laravel auth scaffolding
php artisan make:auth
composer require vshapovalov/crud
if you are using Laravel 5.4, add to config/app.php provider section
Vshapovalov\Crud\CrudServiceProvider::class,
php artisan crud:install
Check url http://app_url/cruds
There is still a lot of work ahead - localization, etc. ;] All crud forms can be edited from admin panel
System options->Crud forms
textbox - simple textbox
{ "slugify": "fieldname_to_store_slug" }
{ "mode": "password" }
{ "mode": "masked", "mask":"+7(777)###-##-##" }
datepicker - date picker
{ "mode":"date or datetime" }
dropdown - simple dropdown, additional field required
{
"mode:": "single or multi",
"values": [
{ "key": "DRAFT", "value": "Draft" },
{ "key": "PUBLISHED", "value": "Published" }
]
}
richedit - richeditor by tinymce
{ "size": "small or medium or large"}
image - image picker, pick images/files from media library
{
"mode": "multi or single",
"type": "file or image",
"resize": { "width":1000, "height": null, "quality": 90 },
"thumbnails": [
{ "name":"medium", "scale":50 },
{ "name":"small", "scale":25 },
{ "name":"cropped", "crop": {"width": 250, "height": 250 } },
{ "name":"fitted", "fit": {"width": 250, "height": 250 } }
]
}
relation - relation field type, field has options
{ "buttons": [ "add", "edit", "pick", "delete_all" ] , "mode": "simple or normal" }
Media library can resize image, create thumbnails for uploaded images by default settings, also crud image field have additional options for resize image
config/cruds.php
'media_default_settings' => [
'resize' => [
'width' => 1440,
'height' => null,
'quality' => 90
],
'thumbnails' => [
[
'name' => 'medium',
'scale' => 50
],
[
'name' => 'small',
'scale' => 25
],
[
'name' => 'cropped',
'crop' => [
'width' => 250,
'height' => 250,
]
],
[
'name' => 'fit320-240',
'fit' => [
'width' => 320,
'height' => 240,
'position' => 'center'
]
]
]
],
Dashboard menu items can be edited from admin panel
Also you can use own Vue components, just add them in components section of config/cruds.php
'components' => [
[
'name' => 'test-component', // just simple name
'path' => '/js/test-components.js' // path to component, must be absolute
]
],
simple component file
Vue.component('test-component', require('./test-component.vue') );
let userComponent = {
id: 'user-component-1',
name: 'test-component',
options: {
isModal: false,
counterStartValue: 100
}
};
Bus.$on( 'user:testcomponent:mount', ()=> AdminManager.mountComponent( userComponent, true ) );
then create dashboard menu item< and set action to 'user:testcomponent:mount'
link js file in components section of cruds.php, use registerMiddleware function to make some action on events emmited by crud form or edit panel or add custom component. if you did not call next(), the action will be interruted in some events:
AdminManager.registerMiddleware( ( event, options, next )=>{
if (event == 'crud:on:mount' && options.crud.code === 'users') {
options.addComponents(
[
{
id: 'test-component',
name: 'test-component',
options: {
message: 'i am custom component'
}
}
]
);
}
next();
});
'components' => [
[
'name' => 'jquery-slim-cdn',
'path' => 'https://code.jquery.com/jquery-3.3.1.slim.js'
]
],
Custom components can use Lodash, Axios, they are declared as window obj props
watch this guide (coming soon)
watch this guide (coming soon)