From 0dda27b9bbc4ed72e2c8f563e2eee08da36d1333 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sun, 4 Feb 2024 01:20:24 +0100
Subject: [PATCH] UPD: Fancy animated TabSelect

---
 src/components/config/TabSelect.vue       | 57 ++++++++++++++++++-----
 src/components/config/TabSelectButton.vue |  4 +-
 2 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/components/config/TabSelect.vue b/src/components/config/TabSelect.vue
index a27f6ba..986e68e 100644
--- a/src/components/config/TabSelect.vue
+++ b/src/components/config/TabSelect.vue
@@ -1,26 +1,61 @@
 <template>
-  <div class="flex font-heading px-4 py-2 gap-2">
-    <div class="absolute"/>
-    <TabSelectButton
-      v-for="(option, key) in options" :key="key"
-      :title="$t(option.titleKey)"
-      :icon="option.icon" :selected="model===key"
-      @select="model=key">
-      <template v-if="$slots[key]" #replace>
-        <slot :name="key" />
-      </template>
-    </TabSelectButton>
+  <div class="relative">
+    <div
+      :style="backgroundStyle"
+      class="absolute bg-zinc-300 outline outline-zinc-100 rounded-xl transition-all ease-out duration-75" />
+    <div class="flex font-heading px-4 py-2 gap-2 relative">
+      <TabSelectButton
+        v-for="(option, key) in options" :key="key"
+        :ref="(el) => buttons[key] = el"
+        :title="$t(option.titleKey)"
+        :icon="option.icon" :selected="model===key"
+        @select="model=key">
+        <template v-if="$slots[key]" #replace>
+          <slot :name="key" />
+        </template>
+      </TabSelectButton>
+    </div>
   </div>
 </template>
 <script setup>
 import { CircleDot } from 'lucide-vue-next'
 import TabSelectButton from '@/components/config/TabSelectButton.vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const model = defineModel({
   type: String,
   default: 'a',
 })
 
+const buttons = ref({})
+
+const backgroundStyle = ref({})
+
+const updateBackgroundStyle = () => {
+  const selected = buttons.value[model.value]
+  if (selected) {
+    backgroundStyle.value = {
+      top: `${selected.$el.offsetTop}px`,
+      left: `${selected.$el.offsetLeft}px`,
+      width: `${selected.$el.offsetWidth}px`,
+      height: `${selected.$el.offsetHeight}px`,
+    }
+  }
+}
+
+watch([model, buttons], updateBackgroundStyle)
+
+let observer = null
+
+onMounted(() => {
+  observer = new ResizeObserver(updateBackgroundStyle)
+  observer.observe(buttons.value[model.value].$el)
+})
+
+onBeforeUnmount(() => {
+  observer.disconnect()
+})
+
 defineProps({
   options: {
     type: Object,
diff --git a/src/components/config/TabSelectButton.vue b/src/components/config/TabSelectButton.vue
index 6bb7159..40bf7be 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"
-    :class="{'text-black bg-zinc-300 hover:bg-zinc-200 outline outline-zinc-100': selected,
+    class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2 transition-colors"
+    :class="{'text-black 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" />