# Overview Welcome to TomatoPhp, the cutting-edge framework designed to revolutionize the way you build web applications.

Our framework is built with PHP and utilizes the power of Laravel, the leading PHP framework, as its main backbone. In addition, we have integrated the awesome package Splade.dev, which brings even more versatility and enhancements to your development experience. With TomatoPhp, you can experience accelerated development, as we have combined the most repetitive tasks into a comprehensive package that makes application generation a breeze. Not only that, but you can also customize your workflow and CRUD with ease, thanks to our dozens of ready-made add-ons and the integration of Splade.dev. Get ready to say goodbye to the tedious and time-consuming tasks of web development, and hello to a new era of efficiency and customization. Our framework is your secret weapon to build the next generation of web applications with ease. Don't wait any longer, download TomatoPhp now and start your journey to effortless web development today! > ### Gold Sponsors

### Overview **TomatoPHP** is built to make it easy to develop web apps and API by generating files of CRUD operations and support helpers of tonnes of functions to make it easy to manage and use framework services. ### Back-End Tech Space 1. [Laravel](https://laravel.com/) 2. [Splade](https://splade.dev) 3. [Breeze Starter Kit](https://splade.dev/docs/breeze) ### Front-End Tech Space please review these packages before starting development. 1. [VueJs](https://vuejs.org/) 2. [TailwindCSS](https://tailwindcss.com/) 3. [ViteJS](https://vitejs.dev/) 4. [inertiaJS](https://inertiajs.com) ### Features * SPA App With Blade * CRUD Generator Web / API [Web](https://github.com/tomatophp/docs/blob/master/broken-reference/README.md) / [API](/plugins/tomato-api) * Support [HMVC](https://nwidart.com/laravel-modules/v6/introduction) Architecture * [Authentication & User Manager](/plugins/tomato-roles) * Responsive UI Using [Filament Template](https://github.com/tomatophp/docs/blob/master/broken-reference/README.md) * RTL/Dark Mode Support * Ready to Use Breeze Tool Kit Support RTL/Dark Mode * Ready to Use Arabic / English Translations * Easy To use [Menu With Provider](/tomato-admin/menu) ### Credits TomatoPHP uses some open-source third-party libraries/packages internally, many thanks to the web community, it will be perfect if you review it before start using our framework: * [**Laravel**](https://laravel.com/) Main Framework * [**InertiaJS**](https://inertiajs.com/) VueJs Framework * [**TailwindCSS**](https://tailwindcss.com/) Style Kit * [**VueJs**](https://vuejs.org/) Javascript framework * [**Splade**](https://splade.dev) The magic of Inertia.js with the simplicity of Blade * [**Filament**](https://filamentphp.com/) It's a very creative admin panel for TALL stack * [**Laravel Sanctum**](https://laravel.com/docs/8.x/sanctum) APIs Token Auth * [**Laravel Permission**](https://spatie.be/docs/laravel-permission/v4/introduction) User ACL * [**Laravel Module**](https://nwidart.com/laravel-modules/v6/introduction) MVC Modular Arch * [**Laravel Excel**](https://laravel-excel.com/) Import & Export Excel * [**Laravel Sitemap**](https://github.com/spatie/laravel-sitemap) Sitemap Generator * [**Laravel Translatable**](https://github.com/spatie/laravel-translatable) Translation UI * [**Laravel Media Library**](https://github.com/spatie/laravel-medialibrary) Media & Upload * [**Laravel Backup**](https://github.com/spatie/laravel-backup) Backup ### Contributors * [Fady Mondy](https://github.com/3x1io) * [Khaled Abodaif](https://github.com/khaledAbodaif) * [Ahmed Elbanna](https://github.com/Ahmed-Elbanna-Git) * [Mohamed Ibrahem](https://github.com/marious) ### License The MIT License (MIT). Please see [License File](https://github.com/queents/vilt/blob/master/LICENSE.md) for more information. # Support ## Developers Support we have a good community to support your issues to can join our Discord Server to fix your bugs in real time [join now](https://discord.com/invite/VZc8nBJ3ZU) ## Sponsoring TomatoPHP is meant to be free, forever. Having a good companion for developing real-time applications locally and in production should not involve any third party and having a reliable app easy to deploy on a server makes TomatoPHP a compelling option for many applications. Of course, like many open-source software solutions, development is done by investing volunteer time into the project. Therefore, all donations are greatly appreciated. You can sponsor the development via [Github Sponsors](https://github.com/sponsors/3x1io).

# Contributing All contributions to ToamtoPHP are highly appreciated. Please consider [CONTRIBUTING](#contributing) for more information on making contributions. In addition, you may review our current development plans and tasks for the current and upcoming versions via [GitHub Projects](https://github.com/orgs/tomatophp/projects/1). We make every effort to give all contributors credit for their contribution in release notes, etc. ### Stargazers We really appreciate how this project turned out to be such a great success. It will always remain open-source, free, and maintained. This is real-time as it should be. ## Contributing Contributions are **welcome** and will be fully **credited**. Please read and understand the contribution guide before creating an issue or pull request. ### Etiquette This project is open source, and as such, the maintainers give their free time to build and maintain the source code held within. They make the code freely available in the hope that it will be of use to other developers. It would be extremely unfair for them to suffer abuse or anger for their hard work. Please be considerate towards maintainers when raising issues or presenting pull requests. Let's show the world that developers are civilized and selfless people. It's the duty of the maintainer to ensure that all submissions to the project are of sufficient quality to benefit the project. Many developers have different skill sets, strengths, and weaknesses. Respect the maintainer's decision, and do not be upset or abusive if your submission is not used. ### Viability When requesting or submitting new features, first consider whether it might be useful to others. Open source projects are used by many developers, who may have entirely different needs to your own. Think about whether or not your feature is likely to be used by other users of the project. ### Procedure Before filing an issue: * Attempt to replicate the problem, to ensure that it wasn't a coincidental incident. * Check to make sure your feature suggestion isn't already present within the project. * Check the pull requests tab to ensure that the bug doesn't have a fix in progress. * Check the pull requests tab to ensure that the feature isn't already in progress. Before submitting a pull request: * Check the codebase to ensure that your feature doesn't already exist. * Check the pull requests to ensure that another person hasn't already submitted the feature or fix. ### Requirements If the project maintainer has any additional requirements, you will find them listed here. * [**PSR-4 Coding Standard**](https://www.php-fig.org/psr/) - The easiest way to apply the conventions is to install [SonarLint](https://www.sonarsource.com/products/sonarlint). * **Add tests!** - Your patch won't be accepted if it doesn't have tests. * **Document any change in behavior** - Make sure the `README.md` and any other relevant documentation are kept up-to-date. * **One pull request per feature** - If you want to do more than one thing, send multiple pull requests. **Happy coding**! # Screenshots Screenshots form the admin panel and some plugins ## Login Screen

## Dashboard Dark Mode

## Dashboard Dark Mode RTL

## Dashboard Light Mode

## Table View Light Mode

## Table View Dark Mode

## SlideOver Form

## Settings Page

## Roles Edit Page

## Profile Page

# Environment Setup


Laravel Valet	/pages/bUV6xqQVs9syhwGmkVxH
PHPMyAdmin	/pages/vdn0Y8qTd0h1HVudVkHJ
Configuring Server		/pages/vCzeAXfFAItCLTYWgUEi

# Configuring the server we are recommending using our environment to make the project work will we are using ubuntu Linux and laravel valet + ### Install BackBox Linux we are like to use [BackBox](https://www.backbox.org/download/) Linux it has a lot of tools and supports our environment, so from the link we keep downloading the ISO image and putting it in USB using [Rufus](https://rufus.ie/en/) and then booting your computer into it *** ### Install dependencies packages let's start by opening our terminal and updating the system to the last one, and after that install some packages ```bash sudo add-apt-repository -y ppa:nginx/stable sudo apt install software-properties-common sudo add-apt-repository ppa:ondrej/php sudo apt-get update ``` ```bash sudo apt-get upgrade ``` after it finished reboot your computer and after that run this command ```bash sudo apt-get install network-manager libnss3-tools jq xsel ``` *** ### Install PHP & its extensions ```bash sudo apt install php8.2-fpm ``` ```bash sudo apt install php8.2-cli php8.2-common php8.2-curl php8.2-mbstring php8.2-opcache php8.2-readline php8.2-xml php8.2-zip php8.2-mysql php8.2-gd ``` ### Install MySql Server ```bash sudo apt-get -y install mysql-server ``` ```bash sudo mysql_secure_installation ``` use `0` for the password and use any password something like `12345678` after the installation is finished, start MySQL server ```bash sudo mysql ``` and on the MySQL server console use this command ```sql mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '12345678'; ``` ```sql mysql> FLUSH PRIVILEGES; ``` ```sql mysql> exit; ``` *** ### Install Composer ```bash sudo apt install curl ``` ```bash curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/local/bin --filename=composer ``` # Install Valet ```bash composer global require genesisweb/valet-linux-plus ``` no, you need to export Valet use ```bash PATH="$PATH:$HOME/.composer/vendor/bin" ``` Or use the following ```bash PATH="$PATH:$HOME/.config/composer/vendor/bin" ``` and now it will be easy to start installing valet ```bash valet install ``` it will ask you for a password input `12345678` # Install PHPMyAdmin the valet has been installed now, let's go and install PHPMyAdmin and link it with the .test subdomain using valet first of all, create a folder for your sites on the home directory \~ ```bash cd ~ mkdir Sites cd Sites ``` now we are on the Sites path, let's park this directory to be the directory of our projects ```bash valet park ``` now any project on this directory will be auto-linked with subdomain .test, let's download PHPMyAdmin from this [link](https://www.phpmyadmin.net/) and unzip the file inside the Sites directory and rename the folder to PHPMyAdmin, after that go inside the folder and use this command ```bash cp config.sample.inc.php config.sample.php nano config.sample.php ``` change the line to ```php $cfg['blowfish_secret'] = 'YK07LhNSe50vrj,HwBfb.l3gpbv;u8b7', ``` now use CTRL + x and say Y now we will use valet to link PHPMyAdmin and secure the link with SSL ```bash valet link valet secure valet open ``` now you can see the PHPMyAdmin working and you can use root as the user and the password you created to MySQL to login # Install

you can create a new project with our kit or use this package [Tomat Admin](/tomato-admin/get-started) ``` composer create-project tomatophp/tomato ``` create a new database and add your database credentials to .env file ``` DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=tomato-kit DB_USERNAME=root DB_PASSWORD=26111995 ``` change the main URL in .env file ``` APP_URL=https://tomato-kit.test APP_HOST=tomato-kit.test ``` clear cache of config ``` php artisan config:cache ``` and run the migration ``` php artisan migrate ``` install frontend packages ``` yarn yarn build ``` now your app is ready to login `admin/login` you can use `admin@admin.com` and `password` as a username and password for admin. enjoy it 🍅 ## Using Docker? no problem if you are using docker as your development env you can up the project in a very easy way by just using this command ```bash bin/serve ``` The `bin/serve` script is for installing the dependencies and setting up the local environment.\ The only requirement beforehand is that Docker/Docker Desktop is installed. ### Run WebSocket you can run your socket server just by running this command without any config ```bash php artisan websocket:serve ``` ### Ubuntu Auto Install Script if you have a fresh install Ubuntu OS you can install all needs for Tomato by just using 1 line ``` ubuntu-22-install-script ``` it will start the install script and ask you for your root password. ### Allow Spatie Media Library inside your app if you want to use media features inside your app you need to complete setup of Spatie Media Library, it's easy just publish the migration and migrate it. ```bash php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" ``` now run your migration ```bash php artisan migrate ``` now it's time to allow modules on your app by just adding this line to composer.json ```json "autoload": { "psr-4": { ... "Modules\\" : "Modules/" } }, ``` ### Installed Plugins * [Tomato Splade](https://splade.dev/) * [Tomato Admin](https://github.com/tomatophp/tomato-admin) * [Tomato Roles](/plugins/tomato-roles) * [Tomato Translations](/plugins/tomato-translations) * [Tomato Logs](/plugins/tomato-logs) * [Tomato Backup](/plugins/tomato-backup) ### More Plugins * [Tomato Plugins](https://docs.tomatophp.com/plugins) to install this package you can use this command line ``` php artisan tomato:plugins ``` ### Changelog Please see [CHANGELOG](https://github.com/tomatophp/tomato/blob/master/CHANGELOG.md) for more information on what has changed recently. ### Credits * [Fady Mondy](https://github.com/3x1io) ### License The MIT License (MIT). Please see [License File](https://github.com/tomatophp/tomato/blob/master/LICENSE.md) for more information. # Start Your First CRUD you can build a CRUD after you make a migration for your table, let's say you need to build a customer's table through this migration. you can create a new migration ```bash php artisan make:migration create_customers_table ``` and after that, you can build your customer table schema. ```php id(); $table->string('name')->index(); $table->longText('bio')->nullable(); $table->string('email')->unique()->index(); $table->string('phone'); $table->text('address')->nullable(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('customers'); } } ``` run migration to create the table ```bash php artisan migrate ``` now you need to install our Generator Plugin Tomato PHP so please use this command to install it ```bash composer require tomatophp/tomato-php ``` and here is the tomato step just use this command ```bash php artisan tomato:generate ``` it will ask you about the table name you generate a migration for it, and if you like to use Laravel Modules, you can just say `y` on the next ask. now you need to add a menu item to the `AppServiceProvier boot()` function like this ```php use TomatoPHP\TomatoAdmin\Facade\TomatoMenu; use TomatoPHP\TomatoAdmin\Services\Contracts\Menu; ... public function boot() { TomatoMenu::register( Menu::make() ->group('Resources') ->label('Users') ->route('admin.customers.index') ->icon('bx bx-user') ); } ``` This facade accepts an array or just 1 Menu class so you can use it as you like make sure that your view is clean by using this command ```bash php artisan optimize:clear ``` BOM.. your CRUD is ready. # Get Started 🍅 Tomato Admin Dashboard Build With FilamentPHP Theme for Laravel Splade

This package has some features you can use on your Splade project * [FilamentPHP](https://filamentphp.com/) v2 Admin panel Theme Clone * Menu Facade to attach new items to the menu from anywhere on the code * Support TomatoPHP CRUD generator * Ready To Use RTL support \[Arabic] * Ready To Use Dark Mode * Tons of Ready Components * Requests Facade to make it easy to make CRUDs, with support of Laravel-media-library * Widget Facade to help you add new Widgets to the home page of the dashboard * Response Helper to make it easy to return the same response to every API call ### Credits * [Splade](https://splade.dev/) * [Breeze Starter Kit](https://splade.dev/docs/breeze) * [FilamentPHP](https://filamentphp.com/) # Install

{% embed url="" %} to install this package you use this command ``` composer require tomatophp/tomato-admin ``` ### Use Install Command you can use the install command to build your admin panel **NOTE** before installing if you are not using `MacOS` please change the `Yarn` path of config on the [console-helper](/helpers/laravel-console-helpers) package after publishing the config file ``` php artisan tomato-admin:install ``` After Tomato installs everything run your npm ``` yarn yarn build ``` ### Allow Spatie Media Library inside your app if you want to use media features inside your app you need to complete setup of Spatie Media Library, it's easy just publish the migration and migrate it. ```bash php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" ``` now run your migration ```bash php artisan migrate ``` now it's time to allow modules on your app by just adding this line to composer.json ```json "autoload": { "psr-4": { ... "Modules\\" : "Modules/" } }, ``` ### Create New User you can create a new user to access the dashboard by using this command ```bash php artisan tomato:user ``` # Generate CRUD #### !Note thanks for [Tomato PHP](/tomato-php/get-started) generator plugin so you now can generate a full CRUD, you need to install it first to use this feature ### Create Migration first, make a migration like ```bash php artisan make:migration create_customer_table ``` after you fill migration with your schema run migration ```bash php artisan migrate ``` ### Generate CRUD it's straightforward to use our package by just creating a new migration and migrating it after your table and schema are ready to use this command ``` php artisan tomato:generate ``` it will ask you to input the table name and bingo you get the full CRUD ready. ### What is the file we are generating? you build a full CRUD with some files like * Controller \[app\Http\Controllers\Admin] * Table \[app\Tables] * Model \[app\Models] * Views \[resources\views\admin\TABLE] * Routes \[routes\web.php] # Slots as we like to add more customization to our dashboard we added a new Facade Class TomatoSlot it's used to attach a view to anywhere on the dashboard from any service provider, which means you can create a package to add a button in every single view on the app. ### Use on your service provider just add ```php use TomatoPHP\TomatoAdmin\Facade\TomatoSlot; public function boot() { TomatoSlot::layoutButtons('core::buttons'); } ``` ### Methods ```php * @method static navAfterUserDropdown(string $navAfterUserDropdown) * @method static navBeforeUserDropdown(string $navBeforeUserDropdown) * @method static navLeftSide(string $navLeftSide) * @method static sidebarTop(string $sidebarTop) * @method static sidebarBottom(string $sidebarBottom) * @method static footer(string $footer) * @method static dashboardBottom(string $dashboardBottom) * @method static dashboardTop(string $dashboardTop) * @method static layoutButtons(string $layoutButtons) * @method static layoutTitle(string $layoutTitle) * @method static layoutTop(string $layoutTop) * @method static layoutBottom(string $layoutBottom) * @method static layoutButtoms(string $layoutButtoms) * @method static logoSection(string $logoSection) ``` # Widgets we built a widget Facade service to make it easy to register a widget to the dashboard home page from any provider, so you can use it on your package or on your AppServiceProvider as well. ## Registering a widget you can go to any service provider `boot()` method and register your widget like this: ```php use TomatoPHP\TomatoAdmin\Facade\TomatoWidget; use TomatoPHP\TomatoAdmin\Services\Contracts\Widget; public function boot() { TomatoWidget::register([ Widget::make() ->title(__('Users')) ->icon('bx bxs-user') ->counter(User::count()), Widget::make() ->title(__('Roles')) ->icon('bx bx-lock') ->counter(Role::count()) ]); } } ``` and you will see the widget on the homepage of the dashboard directly. ### Widget Component you can use Widget as a component like this ```html ``` # Menus it's a very easy-to-use menu provider by just using this class method on your app service provider ```php use TomatoPHP\TomatoAdmin\Facade\TomatoMenu; use TomatoPHP\TomatoAdmin\Services\Contracts\Menu; public function boot() { TomatoMenu::register([ Menu::make() ->group(__('ALC')) ->label(__('Users')) ->icon('bx bx-user') ->route('admin.users.index'), Menu::make() ->group(__('ALC')) ->label(__('Roles')) ->icon('bx bx-lock') ->route('admin.roles.index') ]); } ``` and the menu will auto registered to your sidebar of the admin dashboard you can order the groups or hide a group using this method ```php use TomatoPHP\TomatoAdmin\Facade\TomatoMenu; public function boot() { TomatoMenu::groups([ __('ALC') => true, __('Settings') => false, //Hidden ]); } ``` # Requests # Index Request this method returns view or JsonResponse based on the request type. and we get the request type by check if the route has `splade` middleware or not. this method accept some arguments: * `request` the request object * `model` the model you want to get * `view` the view you want to return * `table` the table class you want to use * `data` the data you want to pass to the view * `api` if you want to return JsonResponse or not * `resource` resource class to resource your returned data * `query` if you want to add some query to the model * `filters` if you want to add some filters to the table ```php public function index(Request $request): View|JsonResponse { return Tomato::index( request: $request, //Required model: $this->model, //Required view: 'users.index', table: \App\Tables\UserTable::class, data: [ 'name' => 'john doe', ], api: true, resource: UserResource::class, query: User::query()->where('is_activated',true), filters: [ 'is_activated', ], ); } ``` # JSON Request this method return only json response of the model to make it easy to access it with `x-splade-select` or `x-tomato-admin-select` this method accept some arguments: * `request` the request object * `model` the model you want to get * `data` the data you want to pass to the view * `paginate` if you want to paginate the response or not * `query` if you want to add some query to the model * `filters` if you want to add some filters to the table ```php public function api(Request $request): JsonResponse { return Tomato::json( request: $request, //Required model: \App\Models\User::class, //Required data: [ 'name' => 'john doe', ], paginate: 10, query: User::query()->where('is_activated',true), filters: [ 'is_activated', ], ); } ``` # Get Request this method returns view or JsonResponse based on the request type. and we get the request type by check if the route has `splade` middleware or not. this method accept some arguments: * `model` the model you want to get * `view` the view you want to return * `data` the data you want to pass to the view * `hasMedia` if you want to get the media of the model or not * `collection [array]` the media collection you want to get as array take true if it's multi or false if it's single * `attach [array]` to attach some data to the model * `api` if you want to return JsonResponse or not * `resource` resource class to resource your returned data * `query` if you want to add some query to the model ```php public function show(\App\Models\User $model): View|JsonResponse { return Tomato::get( model: $model, //Required view: 'users.show', //Required data: [ 'name' => 'john doe', ], hasMedia: true, collection: [ 'avatar' => false, 'gallery' => true ], attach: [ 'roles' => $model->roles, ], api: true, resource: UserResource::class, query: User::query()->where('is_activated',true) ); } ``` # Store Request this method returns RedirectResponse or JsonResponse based on the request type. and we get the request type by check if the route has `splade` middleware or not. this method accept some arguments: * `request` the request object * `model` the model you want to get * `validation` the validation rules you want to use * `message` the message you want to return with the response * `validationError` the message you want to return if the validation failed * `redirect` the redirect route you want to redirect to * `hasMedia` if you want to get the media of the model or not * `collection [array]` the media collection you want to get as array take true if it's multi or false if it's single * `api` if you want to return JsonResponse or not ```php public function store(Request $request): RedirectResponse|JsonResponse { $response = Tomato::store( request: $request, //Required model: \App\Models\User::class, //Required validation: [ 'name' => 'required|string|max:255', 'email' => 'required|string|email|max:255|unique:users', ], message: __('User created successfully'), validationError: __('Error When Try To Store User'), redirect: 'admin.users.index', hasMedia: true, collection: [ 'avatar' => false, 'gallery' => true ], api: true, ); if($response instanceof JsonResponse){ return $response; } return $response->redirect; } ``` # Update Request this method returns RedirectResponse or JsonResponse based on the request type. and we get the request type by check if the route has `splade` middleware or not. this method accept some arguments: * `request` the request object * `model` the model you want to get * `validation` the validation rules you want to use * `message` the message you want to return with the response * `validationError` the message you want to return if the validation failed * `redirect` the redirect route you want to redirect to * `hasMedia` if you want to get the media of the model or not * `collection [array]` the media collection you want to get as array take true if it's multi or false if it's single * `api` if you want to return JsonResponse or not ```php public function update(Request $request, \App\Models\User $model): RedirectResponse|JsonResponse { $response = Tomato::update( request: $request, //Required model: $model, //Required validation: [ 'name' => 'required|string|max:255', 'email' => 'required|string|email|max:255|unique:users', ], message: __('User updated successfully'), redirect: 'admin.users.index', hasMedia: true, collection: [ 'avatar' => false, 'gallery' => true ], api: true, ); if($response instanceof JsonResponse){ return $response; } return $response->redirect; } ``` # Destroy Request this method returns RedirectResponse or JsonResponse based on the request type. and we get the request type by check if the route has `splade` middleware or not. this method accept some arguments: * `model` the model you want to get * `message` the message you want to return with the response * `redirect` the redirect route you want to redirect to * `api` if you want to return JsonResponse or not ```php public function destroy(\App\Models\User $model): RedirectResponse|JsonResponse { $response = Tomato::destroy( model: $model, //Required message: __('User deleted successfully'), //Required redirect: 'admin.users.index', ); if($response instanceof JsonResponse){ return $response; } return $response->redirect; } ``` # Inputs # Rich Text Editor

you can use a full Rich Text Editor on your project by using this component like ```html ``` this component is uses [vue3-editor](https://www.npmjs.com/package/vue3-editor) package to build this editor # Phone Editor

you can make an easy phone with country code and flag by using this component ```html ``` this component uses [vue3-tel-input](https://www.npmjs.com/package/vue3-tel-input) # Color Switcher

you can use a color switcher selector by using this component ```html ``` this component used [vue3-swatches](https://www.npmjs.com/package/vue3-swatches) # Inputs Repeater

if you have a JSON object and you want to fill it with data with a selected type of input? it can be easy to use Repeater Components. this component has 2 types, repeater/schema, the repeater builds an array of JSON but schema builds just 1 JSON Object ```html :options="['label']" ``` this attribute must have a field of your JSON object and you can access these fields by using v-model like this ```html repeater.main[key].label ``` where the label is the name of the field, and here is an example for your repeater. ```html

``` # Draggable

everyone needs a draggable input on a project, but it's very hard to handle, for this, we created a very easy component to make it easy to handle draggable objects and make it very easy to store and sort them on the database. you can start using this like this ```markup

@{{ drag.item.name }}

``` our component works with multi-levels which means you can create a tree of objects just by using this component you can change `:levels` as you like to be the count of levels and to make this component work you must pass options to it where `:options` is an array of objects you need to sort and at the end of this, you need to add `:url` and we will hit this your everytime you make a change on sorting inside the dragging area the last attribute is `:order-by` and we use it to order the objects by it to store this object and make the ordering successful you can just use this code on your store method ```php public function itemAll(Request $request, Menu $menu){ $request->validate([ "all" => "required|array", "orderBy" => "required|string", ]); $counter = 0; foreach($request->get('all') as $key=>$item){ $menuItem = MenusItem::where('id', $item['id'])->first(); $menuItem->{$request->get('orderBy')} = $counter; $menuItem->save(); if(isset($item['children']) && count($item['children'])){ $countChild = 0; foreach($item['children'] as $key=>$child){ $childItem = MenusItem::where('id', $child['id'])->first(); $childItem->parent_id = $menuItem->id; $childItem->{$request->get('orderBy')} = $countChild; $childItem->save(); $countChild++; if(isset($child['children']) && count($child['children'])){ $this->setChildren($child, $childItem); } } } else { $menuItem->parent_id = null; $menuItem->save(); } $counter++; } return back(); } ``` this method takes all objects on the draggable and sorting it this component used [vue-draggable-next](https://github.com/SortableJS/vue.draggable.next) # Code Editor

you can get a code editor like any input on splade by just use this code ```markup ``` where `:ex` is the excitation of the file this component used [codemirror-editor-vue3](https://www.npmjs.com/package/codemirror-editor-vue3) # Select Input

because of some limits of `x-splade-select` you develop a new component using [vue-multiselect](https://vue-multiselect.js.org/) this new component has features: * Load data from APIs * Search Sync with API * Pagination support with load more button * Auto Fill Selected Data from API you can use this select input like `x-splade-select` ```markup ``` `:type` is the type of select it can be select / relation `:query-by` is the name of the request key sent when searching `:paginated` is a bool for options of pagination # Submit

this component is a FilamentPHP button Primary Style for submitting any form support spinning on submit and disabled you can use it like this ```html ``` # Items

items component can be used on your invoice like a [Inputs Repeater](/tomato-admin/inputs/inputs-repeater) but it's support calculation operations for qty and price and total and vat. you can use it like this ```html

@{{ optionIndex.charAt(0).toUpperCase() + optionIndex.slice(1) }}

@{{ items.tax }}

@{{ items.price }}

@{{ items.discount }}

@{{ items.total }}

``` # Search

on some views we need to get data from APIs and view it as Object!, and that's what this component does when you search it does a query on the remote URL and returns with an array of objects that you can select any object and it's filled with the object not just the ID you can use it like this ```markup

@{{form.account_id.name}}

@{{form.account_id.email}}

@{{form.account_id.phone}}

@{{form.account_id.address}}

@{{form.account_id.zip}} @{{form.account_id.city}}

@{{form.account_id.country?form.account_id.country.name:''}}

``` # Icon

as we see it's a Box Icons Selector you can search and view all Box Icons and select the icon then it will go to form as a string you can use it like this ```markup ``` # Components # Relation Manager

as we clone FilamentPHP Theme we get some VIP components, here is the relation manager component, The component is used to manage the relation between models, for example, if you have a user model and you want to show the roles of this user, you can use this component to do that. ### Use you can use it like this ```html

``` as you see you can group the relations table with `x-tomato-admin-relations-group` component and you can add as many relations tables as you want inside this group, and you can use `x-tomato-admin-relations` component to add a relation table. # Container

we build a container component to make it easy to merge between page and model view, so this container converts any page to work as a page and model at the same time. ### Use you can use it like ```html ``` you can access this page as a direct page or using `modal` on the `x-splade-link` or `x-tomato-admin-button` like this ```html {{ __('Create User') }} ``` ### Slots this container has 2 slots you can use to custom your view ```html ``` this slot is used to attach more buttons on the top left side of the page ```html ``` this slot is used to add content after the card. # View Row

we all need to get a ready-to-use view item for our model, so we built this component to make it easy to use and customize. ### Use you can use it like this ```html ``` or you can use it as a link like ```html ``` and it's accepted on value just string value and you can use this types: * text * string * rich * number * email * tel * badge `this type accept icon and color and href` * date * datetime * time * image * images * icon * color * bool * copy * password # Widget

as we get the Widget Facade service to register the widgets to the dashboard homepage, we get this component to register the same widgets anywhere. ### Use you can use it like this ```html ``` or you can just pass a direct model and we will count it ```html ``` and you can change the query like this ```html ``` # Button

we are using buttons everywhere on the dashboard so we do 1 component to manage button types and button multi-style ## Use you can add a new button like this ```html {{ __('Create User') }} ``` or you can use it as an icon button inside a table like this

```html

```

and the button works as well as the `x-splade-link` so you can create a delete button like this ```html

``` # Menu

as you know on the config page you can use a custom menu view for the sidebar of the dashboard so we build a component to make it easy to add a new menu with groups to this custom view ### Use you can use it like this ```html

``` the group component used to group items together, but you can use menu items direct without a group # Tooltip

you can use a tooltip component to shop a tooltip over any div like this ```markup ``` this component used [tippyjs](https://atomiks.github.io/tippyjs/) # ©️ Clipboard

as we know we need to copy some string when we click on buttons like IPs or domains or just product links like this ```markup ``` this component uses [vueuse](https://vueuse.org/) # Slider

we are using Swiper to build this slider so all Swiper functions can be applied to the slider using native js buy use `` tag and you can use the slider like this ```markup @foreach($images as $image)

@endforeach ``` this component uses [Swiper](https://swiperjs.com/vue) # Action Buttons

this component is used to make it easy to add action buttons with some features you can use it like this ```markup ``` where `table` is the table name of current CRUD # Application Logo

this component is used to print the Tomato Logo everywhere and you can change it with your logo for your project you can use it like this ```markup ``` # Dropdown