Fix viewAll and table styling

- Fixed table style 'tight'
- Fixed viewAll not showing
- Add viewAll styling and positioning

Author: Joeri

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.0.4] - 2024-04-23
+
+Fixed table style 'tight' \
+Fixed viewAll not showing \
+Add viewAll styling and positioning \
+Update README
+
 ## [1.0.3] - 2023-05-31
 
 Fixed return type

README.md

@@ -103,7 +103,12 @@ class LatestOrders extends TableCard
         $header = collect(['Date', 'Order Number', 'Status', 'Price', 'Name']);
 
         $this->title('Latest Orders');
-        $this->viewAll(['label' => 'View All', 'link' => '/resources/orders']);
+        $this->viewAll([
+            'label' => 'View All', //Default value `View All`
+            'link' => '/resources/orders', //Required field
+            'position' => 'bottom' //Default value `top`
+            'style' => 'button' //Default value `link`
+        ]);
 
         // $orders = Order::take(10)->latest->get();
         // Data from you model
@@ -133,6 +138,10 @@ class LatestOrders extends TableCard
                 Cell::make($order['name'])
             );
         })->toArray());
+
+        //Possible style configuration
+        // $this->style = 'tight';
+
     }
 
     private function getStatusSortableData (string $status) : int
@@ -160,8 +169,21 @@ protected function cards()
  }
 ```
 
-Note: If you don't specify viewLink() on a row `Row::make()->viewLink()`, show icon will not be visible.
+#### Note: 
+If you don't specify viewLink() on a row `Row::make()->viewLink()`, show icon will not be visible.
+#### Additional Fields in viewAll
 You can also show a viewAll on the table with `$this->viewAll()` 
+- **label (optional)**: By default, it is set to 'View All'.
+- **position (optional)**: By default, it is set to 'top'. You can change it to 'bottom' if needed.
+- **style (optional)**: DThe default style is a 'link'. Alternatively, you can set it to 'button' for a button-style appearance.
+```php
+$this->viewAll([
+    'label' => '__('Latest Orders')',
+    'link' => '/resources/orders', //URL to navigate when the link is clicked
+    'position' => 'bottom', //(Possible values `top` - `bottom`)
+    'style' => 'button', //(Possible values `link` - `button`)
+]);
+```
 
 ## Table Style Customization
 To show more data on your table, you can use the "tight" table style option designed to increase the visual density of your table rows.
@@ -180,7 +202,7 @@ protected function cards()
 ```
 Or override the `$style` property on your custom class:
 ```php
-public $style = 'tight';
+$this->style = 'tight';
 ```
 
 ## Using the pagination

dist/js/card.js

@@ -1,9 +1,22 @@
 <template>
-    <div class="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow h-full pt-4">
-        <h1 v-if="title" class="h-6 flex mb-3 text-sm font-bold px-6">{{ title }}</h1>
+    <div class="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow h-full">
+        <div v-if="title || useViewAll" 
+            class="flex items-center justify-between py-3 text-sm px-6">
+            <h1 v-if="title" class="font-bold">
+                {{ title }}
+            </h1>
+            <div v-if="useViewAll && !viewAllBottomPosition">
+                <a :class="viewAllUseButton ?
+                        'flex-shrink-0 shadow rounded focus:outline-none ring-primary-200 dark:ring-gray-600 focus:ring bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-white dark:text-gray-800 inline-flex items-center font-bold px-3 h-8 text-xs' :
+                        'link-default'" 
+                    :href="viewAll.link"
+                >
+                    {{ viewAll.label ?? 'View All' }}
+                </a>
+            </div>
+        </div>
         <table
             class="w-full"
-            :class="card.style"
             data-testid="resource-table"
             ref="table"
         >
@@ -22,10 +35,16 @@
                 />
             </tbody>
         </table>
-        <div v-if="viewAll && viewAll.label" class="w-full border-t border-gray-200 dark:border-gray-700 rounded-b-lg flex justify-center py-3">
-            <div>
-                <a class="text-primary-200 text-xs hover:text-primary-600" :href="viewAll.link">{{ viewAll.label }}</a>
-            </div>
+        <div v-if="useViewAll &&viewAllBottomPosition" 
+            class="w-full border-t border-gray-200 dark:border-gray-700 rounded-b-lg flex justify-center py-3"
+        >
+            <a :class="viewAllUseButton ?
+                        'flex-shrink-0 shadow rounded focus:outline-none ring-primary-200 dark:ring-gray-600 focus:ring bg-primary-500 hover:bg-primary-400 active:bg-primary-600 text-white dark:text-gray-800 inline-flex items-center font-bold px-3 h-8 text-xs' :
+                        'link-default'" 
+                :href="viewAll.link"
+                >
+                {{ viewAll.label ?? 'View All' }}
+            </a>
         </div>
 
         <Pagination v-if="paginator" v-model="paginator" @update-rows="update"></Pagination>
@@ -51,7 +70,7 @@ export default {
             rows: [],
             header: [],
             title: '',
-            viewAll: false,
+            viewAll: null,
             paginator: null,
         }
     },
@@ -61,7 +80,7 @@ export default {
         },
 
         shouldShowTight() {
-            return this.card.style === 'table-tight';
+            return this.card.style === 'tight';
         },
 
         /**
@@ -70,19 +89,29 @@ export default {
         shouldShowColumnBorders() {
             return !! this.card.showBorders;
         },
+        useViewAll() {
+            return this.viewAll && this.viewAll.link;
+        },
+        viewAllUseButton() {
+            return this.viewAll && this.viewAll.style && this.viewAll.style === 'button';
+        },
+        viewAllBottomPosition() {
+            return this.viewAll && this.viewAll.position && this.viewAll.position === 'bottom';
+        }
     },
     methods: {
         update(event){
             this.rows = event;
         }
     },
     created () {
-		const {header, rows, title, paginator} = this.card;
+		const {header, rows, title, paginator, viewAll} = this.card;
 
 		this.header = header;
 		this.title = title;
         this.rows = rows;
         this.paginator = paginator;
+        this.viewAll = viewAll;
 	},
 }
 </script>

resources/js/components/Card.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-20 rounded-b">
+    <div class="bg-20 border-t border-gray-200 dark:border-gray-700 rounded-b">
         <pagination-links 
             :is="paginationComponent"
             :all-matching-resource-count="allMatchingResourceCount"

resources/js/components/Pagination.vue

@@ -27,9 +27,9 @@ class TableCard extends Card
      * @param array $header
      * @param array $data
      * @param string $title
-     * @param bool|array $viewAll
+     * @param array $viewAll
      */
-    public function __construct(array $header = [], array $data = [], string $title = '', bool $viewAll = false)
+    public function __construct(array $header = [], array $data = [], string $title = '', array $viewAll = [])
     {
         parent::__construct();