diff --git a/automatic-installation.md b/automatic-installation.md index 87b028f..b3a8210 100644 --- a/automatic-installation.md +++ b/automatic-installation.md @@ -14,6 +14,14 @@ php artisan splade:install The `splade:install` command will also build the frontend assets. Just like [regular Laravel applications](https://laravel.com/docs/10.x/vite#running-vite), you may run the Vite development server: +### npm + ```bash npm run dev -```` \ No newline at end of file +``` + +### yarn + +```bash +yarn dev +``` diff --git a/breeze.md b/breeze.md index 7e4930e..35fa975 100644 --- a/breeze.md +++ b/breeze.md @@ -16,6 +16,14 @@ php artisan breeze:install The `breeze:install` command will also build the frontend assets. Just like [regular Laravel applications](https://laravel.com/docs/10.x/vite#running-vite), you may run the Vite development server: +### npm + ```bash npm run dev -```` \ No newline at end of file +``` + +### yarn + +```bash +yarn dev +``` diff --git a/manual-installation.md b/manual-installation.md index 7527a5e..26a7f0e 100644 --- a/manual-installation.md +++ b/manual-installation.md @@ -50,10 +50,22 @@ class Handler extends ExceptionHandler On the frontend, you must ensure [Tailwind CSS 3.0](https://tailwindcss.com) and [Vue 3.0](https://vuejs.org) are correctly configured. Then, install the Splade frontend package: +### npm + +Via npm + ```bash npm install @protonemedia/laravel-splade ``` +### yarn + +Via yarn + +```bash +yarn add @protonemedia/laravel-splade +``` + In your Tailwind configuration file, make sure you add the Splade package to the content array: ```js @@ -69,21 +81,21 @@ module.exports = { }; ``` -In the `createApp` section of your main JavaScript file, you need to use the Splade plugin, as well as the custom render method. Note how it imports the `createApp` method from the *bundler* Vue build, as that build includes the [Vue template compiler](https://vuejs.org/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation). +In the `createApp` section of your main JavaScript file, you need to use the Splade plugin, as well as the custom render method. Note how it imports the `createApp` method from the _bundler_ Vue build, as that build includes the [Vue template compiler](https://vuejs.org/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation). ```js import "@protonemedia/laravel-splade/dist/style.css"; import { createApp } from "vue/dist/vue.esm-bundler.js"; -import { renderSpladeApp, SpladePlugin } from '@protonemedia/laravel-splade' +import { renderSpladeApp, SpladePlugin } from "@protonemedia/laravel-splade"; -const el = document.getElementById('app') +const el = document.getElementById("app"); createApp({ - render: renderSpladeApp({ el }) + render: renderSpladeApp({ el }), }) - .use(SpladePlugin) - .mount(el); + .use(SpladePlugin) + .mount(el); ``` As you can see at the top, there's also a default stylesheet to support the Choices.js, FilePond, and Flatpickr integrations of the [Form Components](/form-overview.md). Though you probably want to import this default stylesheet into your main JavaScript file, it's completely optional. @@ -104,4 +116,4 @@ Splade assumes the path of this file is `resources/views/root.blade.php`. If you ```php Splade::setRootView('base-layout'); -``` \ No newline at end of file +``` diff --git a/table-overview.md b/table-overview.md index 92938fc..dfcc5e2 100644 --- a/table-overview.md +++ b/table-overview.md @@ -107,6 +107,60 @@ public function authorize(Request $request) Instead of always returning `true`, you may also remove the method if you don't want to use authorization. +## Conditional in splade table +Sometimes we need some ```condition``` in our data table. splade have build in conditional in splade data table. + +```php +SpladeTable::for(User::class) + ->column('name') + ->when(Auth::user()->is_admin, function ($table) { + $table->column('email'); + }) + ->paginate(15); +``` + +You can also using inline function in php. +```php +SpladeTable::for(User::class) + ->column('name') + ->when(Auth::user()->is_admin, fn ($table) => $table->column('email')) + ->paginate(15); +``` + +You maybe need with ```Laravel-permission``` from spatie. here is the example. +```php +SpladeTable::for(User::class) + ->column('name') + ->when(Auth::user()->hasPermission("delete user"), function ($table) { + $table->bulkAction( + label: 'Delete data', + each: fn (User $user) => $user->delete(), + confirm: 'Delete users', + confirmText: 'Are you sure you want to delete the users?', + confirmButton: 'Yes, delete all selected rows!', + cancelButton: 'No, do not delete!', + ); + }) + ->paginate(15); +``` + +You can also using splade table class. +```php +// ... +$table->column('name') + ->when(Auth::user()->hasPermission("delete user"), function ($table) { + $table->bulkAction( + label: 'Delete data', + each: fn (User $user) => $user->delete(), + confirm: 'Delete users', + confirmText: 'Are you sure you want to delete the users?', + confirmButton: 'Yes, delete all selected rows!', + cancelButton: 'No, do not delete!', + ); + }); +// ... +``` + ## Pagination When the dataset is paginated, it will, by default, show a select dropdown to customize the number of rows per page. In addition, you may define a custom set of options using the `perPageOptions` method on the `SpladeTable`: @@ -171,4 +225,4 @@ You may use the `columns()` method and `resource` property of the table instance ``` -Also, check out the [default Blade templates](https://github.com/protonemedia/laravel-splade/tree/main/resources/views/table) for other related features. \ No newline at end of file +Also, check out the [default Blade templates](https://github.com/protonemedia/laravel-splade/tree/main/resources/views/table) for other related features.