From 4f05a3782dd628496866bd14d8d59ce9ced212f6 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sun, 4 Feb 2024 02:04:19 +0100
Subject: [PATCH] UPD: TabSelect transition

---
 src/components/config/TabSelect.vue       | 8 +++++++-
 src/components/config/TabSelectButton.vue | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/config/TabSelect.vue b/src/components/config/TabSelect.vue
index 9abad10..427bd6c 100644
--- a/src/components/config/TabSelect.vue
+++ b/src/components/config/TabSelect.vue
@@ -2,6 +2,7 @@
   <div class="relative">
     <div
       :style="backgroundStyle"
+      :class="{'hidden': !showBackground}"
       class="absolute bg-zinc-300 outline outline-zinc-100 rounded-xl transition-all duration-75 ease-out" />
     <div class="flex font-heading px-4 py-2 gap-2 relative">
       <TabSelectButton
@@ -29,6 +30,8 @@ const model = defineModel({
 
 const buttons = ref({})
 
+const showBackground = ref(false)
+
 const backgroundStyle = ref({
   top: '0',
   left: '0',
@@ -48,7 +51,10 @@ const updateBackgroundStyle = () => {
   }
 }
 
-watch([model, buttons], updateBackgroundStyle)
+watch([model, buttons], () => {
+  updateBackgroundStyle()
+  showBackground.value = true
+})
 
 let observer = null
 
diff --git a/src/components/config/TabSelectButton.vue b/src/components/config/TabSelectButton.vue
index 995a9eb..20fc09b 100644
--- a/src/components/config/TabSelectButton.vue
+++ b/src/components/config/TabSelectButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
-    class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2 transition-colors"
-    :class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
+    class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2 transition-all"
+    :class="{'text-black bg-zinc-300 outline outline-zinc-100 hover:bg-zinc-200': selected,
     'hover:bg-zinc-800 text-muted-foreground' : !selected}"
     @click="$emit('select'); $refs.title.scramble()">
     <slot v-if="$slots['replace']" name="replace" />