From 9c3872cb716a9bc1eb1d9477a96898b817b984ad Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 10:52:33 +0200
Subject: [PATCH] Add trigger transition

---
 .../js/components/catalog-new/SortSelect.vue  | 25 ++++++++++++++-----
 .../frontend/catalog-new/index.blade.php      |  3 +--
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/catalog-new/SortSelect.vue b/resources/js/components/catalog-new/SortSelect.vue
index 462985ec1..2679a3376 100644
--- a/resources/js/components/catalog-new/SortSelect.vue
+++ b/resources/js/components/catalog-new/SortSelect.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { trans } from 'laravel-vue-i18n'
 import {
     SelectRoot,
@@ -7,7 +7,6 @@ import {
     SelectPortal,
     SelectContent,
     SelectViewport,
-    SelectValue,
     SelectItem,
     SelectItemText,
 } from 'radix-vue'
@@ -32,16 +31,30 @@ const options = [
     { value: 'updated_at', label: trans('sortable.updated_at') },
     { value: 'relevance', label: trans('sortable.relevance') },
 ]
+
+const label = computed(
+    () => options.find((option) => option.value === value.value)?.label ?? value.value
+)
 </script>
 <template>
     <SelectRoot v-model="value" @update:modelValue="emit('change', value)">
         <SelectTrigger
             class="tw-font-bold tw-underline tw-decoration-2 tw-underline-offset-4 tw-outline-none"
         >
-            <div class="tw-flex tw-items-center tw-space-x-1">
-                <SelectValue />
-                <CaretUpIcon class="tw-h-4 tw-w-4 tw-rotate-180" />
-            </div>
+            <transition
+                enter-from-class="tw-opacity-0"
+                leave-to-class="tw-opacity-0"
+                enter-active-class="tw-duration-50 tw-transition"
+                leave-active-class="tw-duration-50 tw-transition"
+                mode="out-in"
+            >
+                <div class="tw-flex tw-items-center tw-space-x-1" :key="value">
+                    <span>
+                        {{ label }}
+                    </span>
+                    <CaretUpIcon class="tw-h-4 tw-w-4 tw-rotate-180" />
+                </div>
+            </transition>
         </SelectTrigger>
 
         <SelectPortal>
diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index 453dc367e..f31e3c732 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -877,8 +877,7 @@ class="tw-capitalize">{{ trans_choice('item.filter.displaying', 5) }}</span>
 
                                 <catalog.sort-select
                                     v-on:change="handleSortChange"
-                                    v-bind:default-value="query.sort"
-                                    v-bind:key="query.sort">
+                                    v-bind:default-value="query.sort">
                                 </catalog.sort-select>
                                 <span>
                                     {{ utrans('item.filter.try_also') }}