awesome-nova · xUJYx · Jul 15, 2021 · Jul 15, 2021 · Jul 15, 2021 · Jul 15, 2021
diff --git a/dist/css/card.css b/dist/css/card.css
@@ -0,0 +1 @@
+.card-panel{height:auto}
diff --git a/dist/js/card.js b/dist/js/card.js
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,3 +1,4 @@
 {
-    "/js/card.js": "/js/card.js"
+    "/js/card.js": "/js/card.js",
+    "/css/card.css": "/css/card.css"
 }
diff --git a/resources/css/card.css b/resources/css/card.css
@@ -0,0 +1,3 @@
+.card-panel {
+    height: auto;
+}
diff --git a/resources/js/components/Card.vue b/resources/js/components/Card.vue
@@ -1,14 +1,38 @@
 <template>
-    <card class="overflow-hidden flex flex-row">
-        <button
-                v-for="option in filter.options"
-                :key="option.value"
-                class="py-4 px-8 border-b-2 focus:outline-none flex-1"
-                :class="[isActive(option) ? 'text-grey-black font-bold border-primary': 'text-grey font-semibold border-40']"
-                @click="handleChange(option)"
-        >{{ option.name }}
-        </button>
+  <div>
+    <div v-if="showAsSelect" class="text-center">
+      <h3
+          v-if="! hideSelectHeading"
+          class="text-sm uppercase tracking-wide p-3 text-grey"
+      >
+        {{ filter.name }}
+      </h3>
+
+      <div class="p-2 pt-0">
+        <select-control
+            class="block w-full form-control-sm form-select"
+            :value="value"
+            @change="handleChange"
+            :options="filter.options"
+            label="name"
+        >
+          <option value="" selected>-- ALL --</option>
+        </select-control>
+      </div>
+    </div>
+
+    <card v-else class="overflow-hidden flex flex-row">
+      <button
+        v-for="option in filter.options"
+        :key="option.value"
+        class="py-4 px-8 border-b-2 focus:outline-none flex-1"
+        :class="[isActive(option) ? 'text-grey-black font-bold border-primary': 'text-grey font-semibold border-40']"
+        @click="handleChange(option)"
+      >
+        {{ option.name }}
+      </button>
     </card>
+  </div>
 </template>
 
 <script>
@@ -28,7 +52,7 @@ export default {
     },
 
     data: () => ({
-        filterKey: null,
+        filterKey: null
     }),
 
     created() {
@@ -37,17 +61,19 @@ export default {
 
     methods: {
         handleChange(option) {
+          const option_value = this.showAsSelect ? option.target.value : option.value;
+
             this.$store.commit(`${this.resourceName}/updateFilterState`, {
                 filterClass: this.filterKey,
-                value: option.value,
+                value: option_value,
             })
 
             this.filterChanged()
         },
 
         isActive(option) {
             return String(this.value) == String(option.value)
-        },
+        }
     },
 
     computed: {
@@ -65,6 +91,14 @@ export default {
         pageParameter() {
             return this.resourceName + '_page'
         },
+
+        showAsSelect() {
+          return this.card.show_as_select || false
+        },
+
+        hideSelectHeading() {
+          return this.card.hide_select_heading || false
+        },
     },
 }
 </script>
diff --git a/src/Cards/FilterCard.php b/src/Cards/FilterCard.php
@@ -28,4 +28,18 @@ public function __construct($filter)
 
         $this->withMeta(['filter' => $filter]);
     }
+
+    public function showAsSelect($show_as_select = true)
+    {
+        $this->withMeta(['show_as_select' => $show_as_select]);
+
+        return $this;
+    }
+
+    public function hideSelectHeading($hide_select_heading = true)
+    {
+        $this->withMeta(['hide_select_heading' => $hide_select_heading]);
+
+        return $this;
+    }
 }
diff --git a/src/FilterCardServiceProvider.php b/src/FilterCardServiceProvider.php
@@ -18,6 +18,7 @@ public function boot()
     {
         Event::listen(ServingNova::class, function () {
             Nova::script('awesome-nova-filter-card', dirname(__DIR__) . '/dist/js/card.js');
+            Nova::style('awesome-nova-filter-card', dirname(__DIR__) . '/dist/css/card.css');
         });
     }
 }
diff --git a/webpack.mix.js b/webpack.mix.js
@@ -2,3 +2,4 @@ let mix = require('laravel-mix')
 
 mix.setPublicPath('dist')
     .js('resources/js/card.js', 'js')
+    .postCss('resources/css/card.css', 'css')
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@ let mix = require('laravel-mix')

		mix.setPublicPath('dist')
		.js('resources/js/card.js', 'js')
		.postCss('resources/css/card.css', 'css')