Merge pull request #9 from Gustavinho/fix/small-documentation-fixes

fix: Fix some mistakes on the documentation

CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+## [1.0.1] - 2020-06-27
+### Added
+- Added the changelog file
+- Added a overflow-y utility to the table view layout
+- Added missing `renderIf` documentation to the actions by row section
+### Changed
+- Changed inputs border color
+### Fixed
+- Fixed some broken links on the documentation
+- Bumped websocket-extensions from 0.1.3 to 0.1.4
+
+## [1.0.0] - 2020-06-14
+### Added
+- Created base LaravelViews class
+- Created the TableView component
+ - Search inpurt feature
+ - Customizable filters
+ - Actions by row
+- Definied components customization

README.md

@@ -17,8 +17,9 @@ Laravel package to create beautiful common views like tables using only PHP code
     - [Specifying a layout and section](#specifying-a-layout-and-section)
     - [Send extra data](send-extra-data)
 - [Components customization](#components-customization)
-    - [Component variants using tailwindcss](#using-tailwindcss)
-    - [Components full customization](#using-tailwindcss)
+    - [Component variants using tailwindcss](#component-variants-using-tailwindcss)
+    - [Components full customization](#components-full-customization)
+- [Table view](doc/table-view.md)
 
 # Installation and basic usage
 
@@ -102,7 +103,7 @@ The easiest way to render the view is using the facade directly with a blade fil
 {!! LaravelViews::create(App\Http\Livewire\UsersTableView::class)->render() !!}
 ```
 
-At this point, you would be able to see a table with some data
+At this point, you would be able to see a table with some data, the table view doesn't have any styled container or title as the image example, you can render the table view inside any container you want.
 
 In the example above the view is using the User model created by default in every Laravel project, feel free to use any model you have, the method `row` is receiving a sinlge model object and you can use any property or public method you have difined inside your model.
 

doc/table-view.md

@@ -1,6 +1,6 @@
 # Table view
 
-This view creates a dinamic data table, you can customize the headers, the data to be displayed for each row, add a search input, filters and actions
+This view creates a dinamic data table with some features like filters, pagination and search input, you can customize the headers, the data to be displayed for each row.
 
 - [Laravel views](../README.md)
 - [Table view](#table-view)
@@ -20,6 +20,7 @@ This view creates a dinamic data table, you can customize the headers, the data
     - [Registering actions](#registering-actions)
     - [Redirect action](#redirect-action)
     - [Showing alert messages](#showing-alert-messages)
+    - [Hiding actions](#hiding-actions)
 - [Showing UI components](#showing-ui-components)
     - [Avatar](#avatar)
     - [Badges](#badges)
@@ -28,6 +29,8 @@ This view creates a dinamic data table, you can customize the headers, the data
 
 ![](../doc/table.png)
 
+The table view doesn't have any styled container or title as the image example so you can render the table view inside any container you want.
+
 ## Create new table view
 
 ```bash
@@ -284,6 +287,16 @@ $this->error();
 
 ![](error.png)
 
+## Hiding actions
+You can choose if the action will be shown or hidden for an specific row defining a `renderIf` method and returning a boolean value, if you don't define this method the action will be shown aways.
+
+```php
+public function renderIf($model)
+{
+    return !$model->active;
+}
+```
+
 # Showing UI components
 You can display some UI components instead of plain text like avateres or badges
 

resources/views/components/form/input-group.blade.php

@@ -19,7 +19,7 @@
     {{ $label ?? '' }}
   </label>
   <input
-    class="pr-12 appearance-none w-full bg-white border-gray-400 hover:border-blue-400 px-4 py-2 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-blue-400 focus:border-2 border"
+    class="appearance-none w-full bg-white border-gray-300 hover:border-gray-500 px-4 py-2 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-blue-400 focus:border-2 border"
     type="text"
     name="{{ $name ?? '' }}"
     placeholder="{{ $placeholder ?? ''}}"

resources/views/components/form/input.blade.php

@@ -17,7 +17,7 @@
     {{ $label ?? '' }}
   </label>
   <input
-    class="block appearance-none w-full bg-white border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-blue-600 focus:border-2 border"
+    class="block appearance-none w-full bg-white border-gray-300 hover:border-gray-500 px-4 py-2 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-blue-600 focus:border-2 border"
     type="text"
     name="{{ $name ?? '' }}"
     placeholder="{{ $placeholder ?? ''}}"

resources/views/components/form/select.blade.php

@@ -18,7 +18,7 @@
   @endif
   <div class="inline-block relative w-full">
     <select
-      class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded leading-tight focus:outline-none"
+      class="block appearance-none w-full bg-white border border-gray-300 hover:border-gray-500 px-4 py-2 pr-8 rounded leading-tight focus:outline-none"
       {{ isset($model) ? 'wire:model='.$model : '' }} name="{{ $name }}" class="{{ $class ?? '' }}"
     >
       @if (count($options))

resources/views/table-view/table-view.blade.php

@@ -30,13 +30,15 @@
   @if (count($items))
 
     {{-- Content table --}}
-    @component('laravel-views::components.table', [
-      'headers' => $headers,
-      'actionsByRow' => $actionsByRow,
-      'items' => $items,
-      'view' => $view
-    ])
-    @endcomponent
+    <div class="overflow-x-auto">
+      @component('laravel-views::components.table', [
+        'headers' => $headers,
+        'actionsByRow' => $actionsByRow,
+        'items' => $items,
+        'view' => $view
+      ])
+      @endcomponent
+    </div>
 
   @else