Loader button option (#969)

Author: Roene-JustBetter

resources/views/cart/sidebar.blade.php

@@ -49,6 +49,7 @@
         href="{{ route('checkout') }}"
         class="w-full text-center"
         v-bind:class="{ 'pointer-events-none': !canOrder }"
+        loader
     >
         @lang('Checkout')
     </x-rapidez::button.conversion>

resources/views/checkout/pages/credentials.blade.php

@@ -33,7 +33,7 @@ class="flex flex-col gap-5"
                             @include('rapidez::checkout.steps.shipping-method')
                         </template>
 
-                        <x-rapidez::button.conversion type="submit" data-testid="continue" class="self-start">
+                        <x-rapidez::button.conversion type="submit" data-testid="continue" class="self-start" loader>
                             @lang('Next')
                         </x-rapidez::button.conversion>
                     </form>

resources/views/checkout/pages/login.blade.php

@@ -20,7 +20,7 @@ class="max-w-md mx-auto"
         >
             @include('rapidez::checkout.steps.login')
 
-            <x-rapidez::button.conversion type="submit" data-testid="continue" class="mt-3">
+            <x-rapidez::button.conversion type="submit" data-testid="continue" class="mt-3" loader>
                 @lang('Next')
             </x-rapidez::button.conversion>
         </form>

resources/views/checkout/steps/place-order.blade.php

@@ -8,7 +8,7 @@
     v-slot="{ mutate, variables }"
 >
     <fieldset>
-        <x-rapidez::button.conversion type="submit" data-testid="continue" class="mt-3">
+        <x-rapidez::button.conversion type="submit" data-testid="continue" class="mt-3" loader>
             @lang('Place order')
         </x-rapidez::button.conversion>
     </fieldset>

resources/views/components/autocomplete/input.blade.php

@@ -30,9 +30,9 @@ class="absolute right-14 top-1/2 -translate-y-1/2 transition-opacity opacity-100
         <x-heroicon-s-x-mark class="size-7" />
     </button>
     <x-rapidez::button
-        class="absolute right-0 top-0 bg-opacity-0 hover:bg-opacity-0 border-none *:peer-placeholder-shown:bg-muted *:peer-placeholder-shown:text"
+        class="!absolute right-0 top-0 bg-opacity-0 hover:bg-opacity-0 border-none *:peer-placeholder-shown:bg-muted *:peer-placeholder-shown:text"
         type="submit"
-        title="@lang('Search')"
+        :title="__('Search')"
     >
         <x-rapidez::autocomplete.magnifying-glass />
     </x-rapidez::button>

resources/views/components/button/base.blade.php

@@ -1,14 +1,3 @@
-@props(['tag' => 'button', 'disableWhenLoading' => true])
-
-@php
-    $tag = $attributes->hasAny('href', ':href', 'v-bind:href') ? 'a' : $tag;
-    $tag = $attributes->has('for') ? 'label' : $tag;
-@endphp
-
-<x-rapidez::tag
-    is="{{ $tag }}"
-    {{ $attributes->merge([
-        ':disabled' => $attributes->has('href') || $attributes->has(':href') || !$disableWhenLoading ? null : '$root.loading']) }}
->
+<x-rapidez::button.tag {{ $attributes->twMerge('relative inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5') }}>
     {{ $slot }}
-</x-rapidez::tag>
+</x-rapidez::button.tag>

resources/views/components/button/tag.blade.php

@@ -0,0 +1,16 @@
+@props(['tag' => 'button', 'disableWhenLoading' => true, 'loader' => false])
+
+@php
+    $tag = $attributes->hasAny('href', ':href', 'v-bind:href') ? 'a' : $tag;
+    $tag = $attributes->has('for') ? 'label' : $tag;
+@endphp
+
+<x-rapidez::tag
+    is="{{ $tag }}"
+    :v-bind:class="$loader ? '{ \'button-loading\': $root.loading }' : ''"
+    {{ $attributes->merge([
+        ':disabled' => $attributes->has('href') || $attributes->has(':href') || !$disableWhenLoading ? null : '$root.loading',
+    ]) }}
+>
+    {{ $slot }}
+</x-rapidez::tag>