Add open option (#100)

Co-authored-by: et-hoangdv <[email protected]>
Co-authored-by: Rafael Milewski <[email protected]>

README.md

@@ -61,7 +61,7 @@ class ExampleNovaResource extends Resource {
 
     use MegaFilterTrait;
 
-    public function filters(RequestRequest $request): array
+    public function filters(NovaRequest $request): array
     {
         return [
             MegaFilter::make([ ... ]),
@@ -78,14 +78,25 @@ class ExampleNovaResource extends Resource {
 You can also set how many columns you want to display your filters:
 
 ```php
-public function filters(RequestRequest $request): array
+public function filters(NovaRequest $request): array
 {
     return [
         MegaFilter::make([ ... ])->columns(3),
     ];
 }
 ```
 
+By default, the filter section is collapsed. If you want it to open or expanded initially, you can do:
+
+```php
+public function filters(NovaRequest $request): array
+{
+    return [
+        MegaFilter::make([ ... ])->open(),
+    ];
+}
+```
+
 > Note: At the moment this package only works with a single Mega Filter per resource, adding multiple on the same resource may result in unexpected behavior.
 
 ## ⭐️ Show Your Support

resources/js/components/MegaFilter.vue

@@ -98,6 +98,7 @@
         props: [
             'filters',
             'columns',
+            'open',
             'resourceName',
             'viaResource',
             'viaResourceId',
@@ -141,7 +142,7 @@
             await this.initializeState()
         },
         beforeMount() {
-            this.collapsed = this.filtersAreApplied
+            this.collapsed = this.open ? this.open : this.filtersAreApplied
         },
     }
 
@@ -182,6 +183,7 @@
     }
 
     .nova-mega-filter {
+        overflow: visible;
 
         &.\--expanded {
             background-color: rgba(var(--colors-gray-300));

resources/js/components/MegaFilterCard.vue

@@ -5,6 +5,7 @@
         :lens="lens"
         :filters="card.filters"
         :columns="card.columns"
+        :open="card.open"
         :resource-name="resourceName"
         :via-resource="viaResource"
         :via-resource-id="viaResourceId"

src/MegaFilter.php

@@ -37,6 +37,11 @@ public function columns(int $columns): self
         return $this->withMeta([ 'columns' => $columns ]);
     }
 
+    public function open(bool $open = true): self
+    {
+        return $this->withMeta([ 'open' => $open ]);
+    }
+
     private function request(): NovaRequest
     {
         return resolve(NovaRequest::class);