Merge remote-tracking branch 'origin/next' into feature/vultr-cloud-provider

resources/views/components/dropdown.blade.php

@@ -1,3 +1,9 @@
+@props([
+    'inline' => false,
+    'triggerClass' => '',
+    'panelClass' => '',
+])
+
 <div x-data="{
     dropdownOpen: false,
     panelStyles: '',
@@ -9,7 +15,7 @@
         this.dropdownOpen = false;
     },
     updatePanelPosition() {
-        if (window.innerWidth >= 768) {
+        if ({{ $inline ? 'true' : 'false' }} || window.innerWidth >= 768) {
             this.panelStyles = '';
 
             return;
@@ -37,9 +43,13 @@
             this.panelStyles = `position: fixed; left: ${left}px; top: ${top}px;`;
         });
     }
-}" class="relative" @click.outside="close()" x-on:resize.window="if (dropdownOpen) updatePanelPosition()">
-    <button x-ref="trigger" @click="dropdownOpen ? close() : open()"
-        class="inline-flex items-center justify-start pr-8 transition-colors focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
+}" @class(['relative', 'w-full' => $inline]) @click.outside="if (! {{ $inline ? 'true' : 'false' }}) close()" x-on:resize.window="if (dropdownOpen) updatePanelPosition()">
+    <button type="button" x-ref="trigger" @click="dropdownOpen ? close() : open()"
+        @class([
+            'inline-flex items-center justify-start pr-8 transition-colors focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none',
+            'w-full border border-neutral-300 bg-white px-3 py-2 text-left dark:border-coolgray-300 dark:bg-coolgray-100' => $inline,
+            $triggerClass,
+        ])>
         <span class="flex flex-col items-start h-full leading-none">
             {{ $title }}
         </span>
@@ -50,11 +60,18 @@
         </svg>
     </button>
 
-    <div x-ref="panel" x-show="dropdownOpen" @click.away="close()" x-transition:enter="ease-out duration-200"
+    <div x-ref="panel" x-show="dropdownOpen" @click.away="if (! {{ $inline ? 'true' : 'false' }}) close()" x-transition:enter="ease-out duration-200"
         x-transition:enter-start="-translate-y-2" x-transition:enter-end="translate-y-0"
-        :style="panelStyles" class="absolute top-full z-50 mt-1 min-w-max max-w-[calc(100vw-1rem)] md:top-0 md:mt-6" x-cloak>
-        <div
-            class="border border-neutral-300 bg-white p-1 shadow-sm dark:border-coolgray-300 dark:bg-coolgray-200">
+        :style="panelStyles" @class([
+            'mt-1 w-full' => $inline,
+            'absolute top-full z-50 mt-1 min-w-max max-w-[calc(100vw-1rem)] md:top-0 md:mt-6' => ! $inline,
+        ]) x-cloak>
+        <div @class([
+            'border border-neutral-300 bg-white p-1 dark:border-coolgray-300',
+            'shadow-sm dark:bg-coolgray-200' => ! $inline,
+            'border-0 bg-transparent shadow-none dark:border-0 dark:bg-transparent' => $inline,
+            $panelClass,
+        ])>
             {{ $slot }}
         </div>
     </div>

resources/views/components/helper.blade.php

@@ -1,5 +1,5 @@
 <div x-data="{ open: false }" @click.stop="open = !open" @click.outside="open = false"
-    {{ $attributes->merge(['class' => 'group']) }}>
+    {{ $attributes->merge(['class' => 'group relative inline-block align-middle']) }}>
     <div class="info-helper">
         @isset($icon)
             {{ $icon }}