Add ability to define columns (#90)

README.md

@@ -24,7 +24,6 @@ composer require digital-creative/nova-mega-filter
 Basic demo showing the power of this package:
 
 ```php
-
 use DigitalCreative\MegaFilter\MegaFilter;
 use DigitalCreative\MegaFilter\MegaFilterTrait;
 
@@ -55,7 +54,6 @@ moved away to its own package: https://github.com/dcasia/column-toggler
 You can also add other fields alongside your Mega Filters, they will be rendered as usual:
 
 ```php
-
 use DigitalCreative\MegaFilter\MegaFilter;
 use DigitalCreative\MegaFilter\MegaFilterTrait;
 
@@ -77,6 +75,17 @@ class ExampleNovaResource extends Resource {
 }
 ```
 
+You can also set how many columns you want to display your filters:
+
+```php
+public function filters(RequestRequest $request): array
+{
+    return [
+        MegaFilter::make([ ... ])->columns(3),
+    ];
+}
+```
+
 > 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.
 
 ## License

resources/js/components/MegaFilter.vue

@@ -1,6 +1,7 @@
 <template>
 
     <Card class="nova-mega-filter rounded p-1 overflow-hidden transition"
+          :style="{ '--columns-desktop': columns || 2 }"
           :class="{ '--active': filtersAreApplied, '': !filtersAreApplied, '--expanded': collapsed }">
 
         <div :class="{ 'h-8': collapsed, 'h-14': !collapsed }"
@@ -46,7 +47,7 @@
 
                     <div class="flex flex-wrap">
 
-                        <div v-for="filter in filters" :key="filter.name" class="w-1/2">
+                        <div v-for="filter in filters" :key="filter.name" class="filter__loop">
 
                             <component
                                 :is="filter.component"
@@ -65,6 +66,17 @@
 
             </div>
 
+            <Collapse :when="!filtersAreApplied">
+
+                <div class="flex justify-center items-center cursor-pointer"
+                     @click="collapsed = !collapsed">
+
+                    <Icon type="chevron-up" height="12" class="translate-y-[2px]"/>
+
+                </div>
+
+            </Collapse>
+
         </Collapse>
 
     </Card>
@@ -85,6 +97,7 @@
         emits: [ 'filter-changed' ],
         props: [
             'filters',
+            'columns',
             'realResourceName',
             'resourceName',
             'viaResource',
@@ -180,6 +193,12 @@
             color: rgba(var(--colors-gray-400));
         }
 
+        .filter__loop {
+            &:hover {
+                @apply border-gray-800;
+            }
+        }
+
     }
 
     .nova-mega-filter {
@@ -206,6 +225,30 @@
             color: rgba(var(--colors-gray-500));
         }
 
+        --columns-mobile: 1;
+        --columns-desktop: 2;
+
+        .filter__loop {
+
+            width: calc(100% / var(--columns-mobile));
+            margin: 1px;
+
+            @apply border border-transparent rounded transition-all;
+
+            &:hover {
+                @apply border-gray-200;
+            }
+
+        }
+
+        @screen lg {
+
+            .filter__loop {
+                width: calc(100% / var(--columns-desktop) - 2px);
+            }
+
+        }
+
     }
 
 </style>

resources/js/components/MegaFilterCard.vue

@@ -3,6 +3,7 @@
     <MegaFilter
         class="nova-mega-filter"
         :filters="card.filters"
+        :columns="card.columns"
         :realResource-name="resourceName"
         :resource-name="customResourceName"
         :via-resource="viaResource"

src/MegaFilter.php

@@ -10,10 +10,12 @@
 use Laravel\Nova\Http\Requests\CardRequest;
 use Laravel\Nova\Http\Requests\NovaRequest;
 use Laravel\Nova\Makeable;
+use Laravel\Nova\Metable;
 
 class MegaFilter extends MergeValue
 {
     use Makeable;
+    use Metable;
 
     public function __construct(array $data)
     {
@@ -24,12 +26,17 @@ public function __construct(array $data)
         }
 
         if ($this->request() instanceof CardRequest) {
-            $data = [ new MegaFilterFilterWrapper($data) ];
+            $data = [ new MegaFilterFilterWrapper($this, $data) ];
         }
 
         parent::__construct($data);
     }
 
+    public function columns(int $columns): self
+    {
+        return $this->withMeta([ 'columns' => $columns ]);
+    }
+
     private function request(): NovaRequest
     {
         return resolve(NovaRequest::class);

src/MegaFilterFilterWrapper.php

@@ -7,13 +7,16 @@
 class MegaFilterFilterWrapper
 {
     public function __construct(
-        public array $filters,
+        private readonly MegaFilter $megaFilter,
+        private readonly array $filters,
     )
     {
     }
 
     public function toCard(): MegaFilterCard
     {
-        return MegaFilterCard::make()->addFilters($this->filters);
+        return MegaFilterCard::make()
+            ->addFilters($this->filters)
+            ->withMeta($this->megaFilter->meta());
     }
 }

yarn.lock

@@ -1832,7 +1832,7 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.21.9:
+browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.21.9, browserslist@^4.22.1:
   version "4.22.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619"
   integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
@@ -1913,9 +1913,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
-  version "1.0.30001541"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001541.tgz#b1aef0fadd87fb72db4dcb55d220eae17b81cdb1"
-  integrity sha512-bLOsqxDgTqUBkzxbNlSBt8annkDpQB9NdzdTbO2ooJ+eC/IQcvDspDc058g84ejCelF7vHUx57KIOjEecOHXaw==
+  version "1.0.30001542"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001542.tgz#823ddb5aed0a70d5e2bfb49126478e84e9514b85"
+  integrity sha512-UrtAXVcj1mvPBFQ4sKd38daP8dEcXXr5sQe6QNNinaPd0iA/cxg9/l3VrSdL73jgw5sKyuQ6jNgiKO12W3SsVA==
 
 chalk@^2.4.2:
   version "2.4.2"
@@ -2147,11 +2147,11 @@ [email protected]:
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
 core-js-compat@^3.31.0, core-js-compat@^3.32.2:
-  version "3.32.2"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.32.2.tgz#8047d1a8b3ac4e639f0d4f66d4431aa3b16e004c"
-  integrity sha512-+GjlguTDINOijtVRUxrQOv3kfu9rl+qPNdX2LTbJ/ZyVTuxK+ksVSAGX1nHstu4hrv1En/uPTtWgq2gI5wt4AQ==
+  version "3.33.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.33.0.tgz#24aa230b228406450b2277b7c8bfebae932df966"
+  integrity sha512-0w4LcLXsVEuNkIqwjjf9rjCoPhK8uqA4tMRh4Ge26vfLtUutshn+aRJU21I9LCJlh2QQHfisNToLjw1XEJLTWw==
   dependencies:
-    browserslist "^4.21.10"
+    browserslist "^4.22.1"
 
 core-util-is@~1.0.0:
   version "1.0.3"