Add trigger transition

SlovakNationalGallery · Apr 25, 2024 · 9c3872c · 9c3872c
1 parent 4a039a7
commit 9c3872c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/resources/js/components/catalog-new/SortSelect.vue b/resources/js/components/catalog-new/SortSelect.vue
@@ -1,13 +1,12 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { trans } from 'laravel-vue-i18n'
 import {
     SelectRoot,
     SelectTrigger,
     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
@@ -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') }}