UP

Author: ManukMinasyan

README.md

@@ -233,6 +233,49 @@ public function mount(): void
 }
 ```
 
+### Configuring Pagination
+
+You can customize how many cards are loaded initially and how many are loaded when scrolling to the bottom of a column:
+
+#### Option 1: Via constructor parameters
+
+Pass parameters directly when instantiating the board:
+
+```php
+// In your Filament page or Livewire component
+public function mount(): void
+{
+    parent::mount(initialCardsCount: 5, cardsIncrement: 5);
+    
+    // Rest of your configuration...
+}
+```
+
+#### Option 2: Via config file
+
+Update values in the `config/flowforge.php` file:
+
+```php
+// config/flowforge.php
+return [
+    // ...
+    
+    'kanban' => [
+        'initial_cards_count' => 5, // Initial number of cards to show per column
+        'cards_increment' => 10,    // Number of cards to load when loading more
+        'max_cards_per_column' => 100, // Maximum number of cards that can be loaded per column
+    ],
+    
+    // ...
+];
+```
+
+To publish the configuration file:
+
+```bash
+php artisan vendor:publish --tag="flowforge-config"
+```
+
 ### Customizing Badge Appearance
 
 The badge colors are defined in the CSS file and can be customized by publishing the assets:

config/flowforge.php

@@ -15,6 +15,13 @@
         'default_limit' => 10, // Maximum number of items per column
     ],
 
+    // Kanban board settings
+    'kanban' => [
+        'initial_cards_count' => 20, // Initial number of cards to show per column
+        'cards_increment' => 10, // Number of cards to load when loading more
+        'max_cards_per_column' => 100, // Maximum number of cards that can be loaded per column
+    ],
+
     // User Interface settings
     'ui' => [
         'show_item_counts' => true, // Whether to show item counts in column headers
@@ -26,4 +33,4 @@
     'animations' => [
         'enable_drag_animations' => true, // Whether to enable animations during drag operations
     ],
-];
+];

resources/dist/flowforge.css

@@ -2503,6 +2503,14 @@ select {
   margin-top: auto;
 }
 
+.-ml-1 {
+  margin-left: -0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
 .line-clamp-2 {
   overflow: hidden;
   display: -webkit-box;
@@ -4212,6 +4220,14 @@ select {
   opacity: 0.7;
 }
 
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);