[6.x] Fix tab dropdowns for presets

resources/css/core/animation.css

@@ -81,6 +81,10 @@
         transition: opacity calc(var(--starting-style-transition-duration) / 2);
     }
 
+    .starting-style-transition--slow {
+        transition: opacity calc(var(--starting-style-transition-duration) * 3);
+    }
+
     .starting-style-transition--delay {
         transition-delay: calc(var(--starting-style-transition-duration) * 5);
     }

resources/js/components/blueprints/Tab.vue

@@ -11,12 +11,7 @@
 
         <Dropdown v-if="isActive" placement="left-start" class="me-3">
             <template #trigger>
-                <button
-                    class="hover:text-gray-900 active:text-gray-900 dark:hover:text-gray-400 ms-1"
-                    :aria-label="__('Open Dropdown')"
-                >
-                    <Icon name="chevron-down" />
-                </button>
+                <Button class="absolute! top-0.25 -right-4 starting-style-transition starting-style-transition--slow" variant="ghost" size="xs" icon="chevron-down" :aria-label="__('Open Dropdown')" />
             </template>
             <DropdownMenu>
                 <DropdownItem :text="__('Edit')" icon="edit" @click="edit" />
@@ -73,10 +68,10 @@
 </template>
 
 <script>
-import { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input, Stack, StackClose } from '@/components/ui';
+import { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Button, Icon, Field, Input, Stack, StackClose } from '@/components/ui';
 
 export default {
-    components: { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input, Stack, StackClose },
+    components: { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Button, Icon, Field, Input, Stack, StackClose },
 
     props: {
         tab: {

resources/js/components/blueprints/Tabs.vue

@@ -4,7 +4,7 @@
             <Tabs v-model="currentTab" :unmount-on-hide="false">
                 <div v-if="!singleTab && tabs.length > 0" class="flex items-center justify-between gap-x-2 mb-6">
                     <TabList class="flex-1">
-                        <div ref="tabs" class="flex-1 flex items-center">
+                        <div ref="tabs" class="flex-1 flex items-center gap-x-2.5">
                             <BlueprintTab
                                 ref="tab"
                                 v-for="tab in tabs"

resources/js/components/ui/Listing/PresetTrigger.vue

@@ -1,17 +1,14 @@
 <script setup>
+import { TabTrigger } from '@/components/ui';
+
 defineProps({
     text: { type: String, default: null },
     name: { type: String, default: null },
-    active: { type: Boolean, default: false },
 });
 </script>
 
 <template>
-    <button
-        :data-state="active ? 'active' : null"
-        :value="name"
-        class="translate-y-px cursor-pointer p-2 focus-visible:rounded-lg pb-1 hover:text-gray-600 data-[state=active]:border-b data-[state=active]:border-gray-800 data-[state=active]:text-gray-900 dark:hover:text-gray-400 dark:data-[state=active]:border-gray-200 dark:data-[state=active]:text-gray-200"
-    >
+    <TabTrigger :name="name">
         <slot>{{ text }}</slot>
-    </button>
+    </TabTrigger>
 </template>

resources/js/components/ui/Listing/Presets.vue

@@ -7,6 +7,8 @@ import {
     DropdownItem,
     DropdownMenu,
     DropdownSeparator,
+    Tabs,
+    TabList,
 } from '@ui';
 import { injectListingContext } from '../Listing/Listing.vue';
 import { computed, ref, watch } from 'vue';
@@ -85,6 +87,17 @@ function getPresetFromActiveFilters() {
     }
 }
 
+const currentTab = computed({
+    get: () => activePreset.value || 'all',
+    set: (value) => {
+        if (value === 'all') {
+            viewAll();
+        } else {
+            selectPreset(value);
+        }
+    },
+});
+
 const presetPreferencesPayload = computed(() => {
     let payload = {
         display: savingPresetName.value || activePresetPayload.value.display || '',
@@ -159,52 +172,53 @@ function deletePreset() {
 </script>
 
 <template>
-    <div
-        class="relative flex shrink-0 space-x-2 px-2 -mt-2 sm:px-0 border-b border-gray-200 text-sm text-gray-500 dark:border-gray-700/50 dark:text-gray-500 starting-style-transition"
-    >
-        <PresetTrigger :active="!activePreset" @click="viewAll" :text="__('All')" />
-        <PresetTrigger
-            v-for="(preset, handle) in presets"
-            :key="handle"
-            :active="handle === activePreset"
-            @click="selectPreset(handle)"
-        >
-            {{ preset.display }}
-            <template v-if="handle === activePreset">
-                <Dropdown class="w-48!">
-                    <template #trigger>
-                        <Button class="absolute top-1.5 -right-4" variant="ghost" size="xs" icon="chevron-down" />
+    <Tabs v-model:modelValue="currentTab">
+        <div class="relative flex shrink-0 items-center space-x-2.5 px-2 -mt-2 sm:px-0 starting-style-transition">
+            <TabList class="flex-1 space-x-2.5 !border-gray-200 !dark:border-gray-800">
+                <PresetTrigger name="all" :text="__('All')" />
+                <PresetTrigger
+                    v-for="(preset, handle) in presets"
+                    :key="handle"
+                    :name="handle"
+                >
+                    {{ preset.display }}
+                    <template v-if="handle === activePreset">
+                        <Dropdown class="w-48!">
+                            <template #trigger>
+                                <Button class="absolute! top-0.25 -right-4 starting-style-transition starting-style-transition--slow" variant="ghost" size="xs" icon="chevron-down" />
+                            </template>
+                            <DropdownMenu>
+                                <DropdownItem :text="__('Duplicate')" icon="duplicate" @click="createPreset" />
+                                <DropdownItem
+                                    v-if="canRenamePreset(handle)"
+                                    :text="__('Rename')"
+                                    icon="rename"
+                                    @click="renamePreset"
+                                />
+                                <DropdownSeparator v-if="canDeletePreset(handle)" />
+                                <DropdownItem
+                                    v-if="canDeletePreset(handle)"
+                                    :text="__('Delete')"
+                                    icon="delete"
+                                    variant="destructive"
+                                    @click="isConfirmingDeletion = true"
+                                />
+                            </DropdownMenu>
+                        </Dropdown>
                     </template>
-                    <DropdownMenu>
-                        <DropdownItem :text="__('Duplicate')" icon="duplicate" @click="createPreset" />
-                        <DropdownItem
-                            v-if="canRenamePreset(handle)"
-                            :text="__('Rename')"
-                            icon="rename"
-                            @click="renamePreset"
-                        />
-                        <DropdownSeparator v-if="canDeletePreset(handle)" />
-                        <DropdownItem
-                            v-if="canDeletePreset(handle)"
-                            :text="__('Delete')"
-                            icon="delete"
-                            variant="warning"
-                            @click="isConfirmingDeletion = true"
-                        />
-                    </DropdownMenu>
-                </Dropdown>
-            </template>
-        </PresetTrigger>
-        <Button
-            v-if="canSaveNewPreset"
-            @click="createPreset"
-            variant="ghost"
-            size="sm"
-            :text="__('New View')"
-            icon="add-bookmark"
-            class="relative top-0.5 [&_svg]:size-4"
-        />
-    </div>
+                </PresetTrigger>
+            </TabList>
+            <Button
+                v-if="canSaveNewPreset"
+                @click="createPreset"
+                variant="ghost"
+                size="sm"
+                :text="__('New View')"
+                icon="add-bookmark"
+                class="relative top-0.5 [&_svg]:size-4"
+            />
+        </div>
+    </Tabs>
 
     <confirmation-modal
         v-if="isCreating"

resources/js/components/ui/Tabs/Trigger.vue

@@ -16,7 +16,7 @@ defineProps({
 <template>
     <TabsTrigger
         :value="name"
-        class="cursor-pointer p-2 pb-1 hover:text-gray-600 data-[state=active]:text-gray-900 dark:hover:text-gray-400 dark:data-[state=active]:text-gray-200"
+        class="translate-y-px cursor-pointer px-2 py-1 focus-visible:rounded-lg hover:text-gray-600 data-[state=active]:text-gray-900 dark:hover:text-gray-400 dark:data-[state=active]:text-gray-200"
     >
         <slot v-if="hasSlot" />
         <span v-else>{{ text }}</span>