Merge pull request #120 from Gustavinho/feature/support-to-add-js-scripts-manually

feat: Add support to customize the JS scripts

Author: Gustavinho

README.md

@@ -59,12 +59,13 @@ Add the following Blade directives in the *head* tag, and before the end *body*
 </html>
 ```
 
-These blade directives are also including [Laravel livewire](https://laravel-livewire.com/) and [Tailwindcss](https://tailwindcss.com/) styles and scripts, after that you may need to clear the view cache
+Laravel Views includes by default a set up using different parts of the TALL stack assets like the [Laravel livewire](https://laravel-livewire.com/) and [Tailwindcss](https://tailwindcss.com/) styles and scripts, it alsoincludes the [Alpine.js](https://laravel-livewire.com/docs/2.x/alpine-js) script, after adding these directives you may need to clear the view cache
+
 ```bash
 php artisan view:clear
 ```
-If you are already using your own Tailwindcss setup you can set `laravel-views` to not importing Tailwindcss by default. ([Importing assets](./doc/laravel-views#including-assets))
 
+These directives are fine for a dev environment, however, if you want to use your own Tailwindcss or Alpinde.js setup, you can [disable these assets](./doc/laravel-views#including-assets) from being loaded with the Laravel views directive.
 # First table view
 This is a basic usage of a table view, you can [read the full table view documentation ](doc/table-view.md)
 
@@ -179,6 +180,7 @@ Here's the plan for what's coming:
 ## Upgrade guide
 ### From 2.2 to 2.3
 - Clear your cached views `php artisan view:clear` since some of the internal components changed.
+- Update assets
 - Update components.
 - Update config-file.
 - Update the renderIf() function in your action classes as follows:

doc/grid-view.md

@@ -11,6 +11,7 @@ This view creates a dynamic grid view using card data, same as a TableView this
 - [Defining card data](#defining-card-data)
 - [Customizing card data](#customizing-card-data)
 - [Default card item action](#default-card-item-action)
+- [Sorting Data](#sorting-data)
 - [More features](#more-features)
   - [Searching data](./table-view.md#searching-data)
   - [Pagination](./table-view.md#pagination)
@@ -136,6 +137,19 @@ public $withBackground = true
 
 This will render the item with a white background.
 
+## Sorting data
+You can add an option to sort the items on the grid view by an specific field defining a `sortableBy` method with an array of the fields to sort by, as the grid view desn't have headers, a `Sort by` button will be displayed with a drop down with all the fields defined in this method.
+
+```php
+public function sortableBy()
+{
+    return [
+        'Name' => 'name',
+        'Email' => 'email'
+    ];
+}
+```
+
 ## More features
 This grid view is based on a table view, so you could use some of the table view features as:
 

doc/laravel-views.md

@@ -21,10 +21,10 @@
 - [Grid view](doc/grid-view.md)
 
 # Version compatibility
-|Laravel views|Livewire|Laravel|
-|-|-|-|
-|2.x|2.x|7.x, 8.x|
-|1.x|1.x|5.x, 6.x|
+|Laravel views|Alpine|Livewire|Laravel|
+|-|-|-|-|
+|2.x|2.8.x|2.x|7.x, 8.x|
+|1.x|2.8.x|1.x|5.x, 6.x|
 
 # Installation and basic usage
 
@@ -69,24 +69,26 @@ You can specify which assets you want to include passing a string to those direc
 
 ```php
 @laravelViewsStyles(laravel-views,tailwindcss,livewire)
+@laravelViewsScripts(laravel-views,livewire,alpine)
 ```
 
-If you dont need to include `Tailwindcss` or `Livewire` assets you can just set the `laravel-views` assets in the list.
+If you dont need to include `Tailwindcss`, `Livewire` or `Alpine` assets you can just set the `laravel-views` assets in the list.
 
 ```php
 @laravelViewsStyles(laravel-views)
+@laravelViewsScripts(laravel-views)
 ```
 
+This is recomended for a production environment where you surely have a compile assets pipeline, like Laravel Mix, or you want to include the assets from a CDN on your own.
+
 ## Purge Tailwindcss styles
 If you're using your own Tailwindcss setup you must consider `laravel-views` in your `purge` configuration, for that just add this path to the `purge` array on the `tailwind.config.js`file.
 
 ```js
-purge: {
-  content: [
-    //...Rest of your paths
-    "./vendor/laravel-views/**/*.php",
-  ],
-},
+purge: [
+  //...Rest of your paths
+  "./vendor/laravel-views/**/*.php",
+],
 ```
 
 # First table view
@@ -147,63 +149,11 @@ In the example above the view is using the User model created by default in ever
 This is the basic usage of the table view, but you can customize it with more features.
 
 [Read the full table view documentation ](doc/table-view.md)
-
-# Rendering a view from a controller
-
-You can render a view manually in a controller creating a `LaravelViews` instance and executing the `render` method on a `blade` file.
-
-```php
-use use LaravelViews\LaravelViews;
-
-public function index(LaravelViews $laravelViews)
-{
-    $laravelViews->create(App\Http\Livewire\UsersTableView::class);
-
-    return view('my-view', [
-      'view' => $laravelViews
-    ]);
-}
-```
-And render it in your blade file
-```blade
-{!! $view->render() !!}
-```
-
-## Specifying a layout and section
-You can also return the view directly from your controller and specify the layout and section of your layout
-```php
-use use LaravelViews\LaravelViews;
-
-public function index(LaravelViews $laravelViews)
-{
-    $laravelViews->create(App\Http\Livewire\UsersTableView::class)
-      ->layout('layout', 'section-name');
-
-    return $laravelViews->render();
-}
-```
-
-## Send extra data to the layout
-In the same way that you would send data to your views, you can send more data to the layout file
-```php
-use use LaravelViews\LaravelViews;
-
-public function index(LaravelViews $laravelViews)
-{
-    $laravelViews->create(App\Http\Livewire\UsersTableView::class)
-      ->layout('layout', 'section-name', [
-        'title' => 'My layout title'
-      ]);
-
-    return $laravelViews->render();
-}
-```
-
 # Components customization
 These views are build with [Tailwind CSS](https://tailwindcss.com/) and you can either change the colors of the components following tailwindcss utilities or fully customize all the html of the components
 
 ## Component variants using tailwindcss
-If you are using [Tailwind CSS](https://tailwindcss.com/) or if you don't have issues  using Tailwindcss and your own css styles, you can customize some utilities to change the color for each variant of the components publishing a config file
+You can customize some of the components styles (like the color) for each one of the variants with a config file.
 
 ```bash
 php artisan vendor:publish --tag=config

doc/list-view.md

@@ -127,6 +127,19 @@ public function sortableBy()
     }
 ```
 
+## Sorting data
+You can add an option to sort the items on the list view by an specific field defining a `sortableBy` method with an array of the fields to sort by, as the list view desn't have headers, a `Sort by` button will be displayed with a drop down with all the fields defined in this method.
+
+```php
+public function sortableBy()
+{
+    return [
+        'Name' => 'name',
+        'Email' => 'email'
+    ];
+}
+```
+
 ## More features
 This list view is based on a table view, so you could use some of the table view features as:
 

public/laravel-views.css

@@ -1,13 +1,7 @@
-import $ from 'jquery'
 import feather from 'feather-icons'
 import Pikaday from 'pikaday'
-import moment from 'moment'
-import alpine from 'alpinejs'
 
 try {
-  window.Alpine = alpine
-  // window.$ = window.jQuery = require('jquery')
-
   const setUpUiLibraries = () => {
     feather.replace()
   }
@@ -33,12 +27,10 @@ try {
   }
 
   // require('bootstrap')
-  $(document).ready(function() {
+  document.addEventListener("DOMContentLoaded", () => {
     setUpUiLibraries()
-  });
 
-  $(document).on("livewire:load", () => {
-    window.livewire.hook('message.processed', () => {
+    Livewire.hook('message.processed', () => {
       setUpUiLibraries()
     })
   })

public/laravel-views.js

@@ -1,2 +1,4 @@
 @import "~pikaday/scss/pikaday.scss";
-@import "custom-utilities";
+@import "custom-utilities";
+
+[x-cloak] { display: none !important; }

resources/js/bootstrap.js

@@ -7,7 +7,7 @@
     message = actionObject.message;
   })"
 >
-  <div x-show="open">
+  <div x-show="open" x-cloak>
     <x-lv-modal>
       <div x-text='message' class="text-gray-900 text-lg font-medium" ></div>
       <div class="mt-4 flex flex-col space-y-2 sm:space-y-0 sm:space-x-2 sm:flex-row sm:items-center">

resources/scss/app.scss

@@ -17,11 +17,10 @@
     @if (count($filters) > 0)
       {{-- Clear filters button --}}
       <div class="p-4 bg-gray-100 text-right flex justify-end">
-        <a wire:click="clearFilters" @click="open = false" href="#"
-          class="text-gray-600 flex items-center hover:text-gray-700">
+        <button wire:click.prevent="clearFilters" @click="open = false" class="text-gray-600 flex items-center hover:text-gray-700 focus:outline-none text-sm">
           <i data-feather="x-circle" class="mr-2 w-5 h-5"></i>
           {{__('Clear filters')}}
-        </a>
+        </button>
       </div>
     @endif
     </x-lv-drop-down>