feat: replace flux:select with dropdown menus using Alpine.js for fuel filters

composer.json

@@ -12,7 +12,7 @@
         "laravel/framework": "^13.0",
         "laravel/sanctum": "^4.0",
         "laravel/tinker": "^3.0",
-        "livewire/flux": "^2.12.0",
+        "livewire/flux": "^2.13",
         "livewire/livewire": "^4.1"
     },
     "require-dev": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "017a8badf2a8b99d8c2de9909475415f",
+    "content-hash": "789a2e6b542a1e2f263dc8e9c973423b",
     "packages": [
         {
             "name": "bacon/bacon-qr-code",
@@ -11776,7 +11776,7 @@
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": {
-        "php": "^8.3"
+        "php": "^8.4"
     },
     "platform-dev": {},
     "plugin-api-version": "2.9.0"

resources/views/components/fuel/radius-select.blade.php

@@ -1,7 +1,31 @@
-<flux:select {{ $attributes }} size="sm">
+<div
-    <flux:select.option value="1">1 mile</flux:select.option>
+    x-data="{
-    <flux:select.option value="2">2 miles</flux:select.option>
+        value: '',
-    <flux:select.option value="5">5 miles</flux:select.option>
+        labels: {
-    <flux:select.option value="10">10 miles</flux:select.option>
+            1: '1 mile',
-    <flux:select.option value="20">20 miles</flux:select.option>
+            2: '2 miles',
-</flux:select>
+            5: '5 miles',
+            10: '10 miles',
+            20: '20 miles',
+        },
+        get label() {
+            return this.labels[this.value] ?? 'Radius';
+        },
+    }"
+    x-modelable="value"
+    {{ $attributes->whereStartsWith('wire:model') }}
+>
+    <flux:dropdown>
+        <flux:button size="sm" icon:trailing="chevron-down">
+            <span x-text="label">Radius</span>
+        </flux:button>
+
+        <flux:menu>
+            <flux:menu.item @click="value = 1">1 mile</flux:menu.item>
+            <flux:menu.item @click="value = 2">2 miles</flux:menu.item>
+            <flux:menu.item @click="value = 5">5 miles</flux:menu.item>
+            <flux:menu.item @click="value = 10">10 miles</flux:menu.item>
+            <flux:menu.item @click="value = 20">20 miles</flux:menu.item>
+        </flux:menu>
+    </flux:dropdown>
+</div>

resources/views/components/fuel/sort-select.blade.php

@@ -1,7 +1,31 @@
-<flux:select {{ $attributes }} size="sm">
+<div
-    <flux:select.option value="reliable">Best price (reliable)</flux:select.option>
+    x-data="{
-    <flux:select.option value="price">Cheapest first</flux:select.option>
+        value: '',
-    <flux:select.option value="distance">Nearest first</flux:select.option>
+        labels: {
-    <flux:select.option value="updated">Recently updated</flux:select.option>
+            reliable: 'Best price (reliable)',
-    <flux:select.option value="brand">Brand A–Z</flux:select.option>
+            price: 'Cheapest first',
-</flux:select>
+            distance: 'Nearest first',
+            updated: 'Recently updated',
+            brand: 'Brand A–Z',
+        },
+        get label() {
+            return this.labels[this.value] ?? 'Sort by';
+        },
+    }"
+    x-modelable="value"
+    {{ $attributes->whereStartsWith('wire:model') }}
+>
+    <flux:dropdown>
+        <flux:button size="sm" icon:trailing="chevron-down">
+            <span x-text="label">Sort by</span>
+        </flux:button>
+
+        <flux:menu>
+            <flux:menu.item @click="value = 'reliable'">Best price (reliable)</flux:menu.item>
+            <flux:menu.item @click="value = 'price'">Cheapest first</flux:menu.item>
+            <flux:menu.item @click="value = 'distance'">Nearest first</flux:menu.item>
+            <flux:menu.item @click="value = 'updated'">Recently updated</flux:menu.item>
+            <flux:menu.item @click="value = 'brand'">Brand A–Z</flux:menu.item>
+        </flux:menu>
+    </flux:dropdown>
+</div>

resources/views/components/fuel/type-select.blade.php

@@ -1,8 +1,33 @@
-<flux:select {{ $attributes }} size="sm">
+<div
-    <flux:select.option value="petrol">Petrol (E10)</flux:select.option>
+    x-data="{
-    <flux:select.option value="e5">Super Unleaded (E5)</flux:select.option>
+        value: '',
-    <flux:select.option value="diesel">Diesel</flux:select.option>
+        labels: {
-    <flux:select.option value="b7_premium">Premium Diesel</flux:select.option>
+            petrol: 'Petrol (E10)',
-    <flux:select.option value="b10">B10 Biodiesel</flux:select.option>
+            e5: 'Super Unleaded (E5)',
-    <flux:select.option value="hvo">HVO</flux:select.option>
+            diesel: 'Diesel',
-</flux:select>
+            b7_premium: 'Premium Diesel',
+            b10: 'B10 Biodiesel',
+            hvo: 'HVO',
+        },
+        get label() {
+            return this.labels[this.value] ?? 'Select fuel type';
+        },
+    }"
+    x-modelable="value"
+    {{ $attributes->whereStartsWith('wire:model') }}
+>
+    <flux:dropdown>
+        <flux:button size="sm" icon:trailing="chevron-down">
+            <span x-text="label">Select fuel type</span>
+        </flux:button>
+
+        <flux:menu>
+            <flux:menu.item @click="value = 'petrol'">Petrol (E10)</flux:menu.item>
+            <flux:menu.item @click="value = 'e5'">Super Unleaded (E5)</flux:menu.item>
+            <flux:menu.item @click="value = 'diesel'">Diesel</flux:menu.item>
+            <flux:menu.item @click="value = 'b7_premium'">Premium Diesel</flux:menu.item>
+            <flux:menu.item @click="value = 'b10'">B10 Biodiesel</flux:menu.item>
+            <flux:menu.item @click="value = 'hvo'">HVO</flux:menu.item>
+        </flux:menu>
+    </flux:dropdown>
+</div>

resources/views/layouts/shell.blade.php

@@ -5,5 +5,6 @@
 </head>
 <body class="bg-surface-page text-text-base font-sans antialiased">
     {{ $slot }}
+    @fluxScripts
 </body>
 </html>