From 364b4578cbc75d7596eae723fa9350412f99df4b Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 7 Feb 2024 02:13:16 +0100
Subject: [PATCH] UPD: Animate drag

---
 src/components/common/TabSelectButton.vue     |  2 +-
 src/components/config/ConfigPane.vue          |  4 +-
 .../config/keys/KeyFeedbackConfig.vue         |  2 +-
 .../config/knob/KnobFeedbackConfig.vue        |  1 +
 src/components/old/DragTest.vue               | 76 +++++++++++++++++++
 src/components/profile/ProfileManager.vue     | 61 +++++++++------
 6 files changed, 118 insertions(+), 28 deletions(-)
 create mode 100644 src/components/old/DragTest.vue

diff --git a/src/components/common/TabSelectButton.vue b/src/components/common/TabSelectButton.vue
index fa339ce..73416fb 100644
--- a/src/components/common/TabSelectButton.vue
+++ b/src/components/common/TabSelectButton.vue
@@ -3,7 +3,7 @@
     class="flex-1 flex flex-col items-center rounded-lg p-2 gap-2 font-heading transition-all border"
     :class="{'text-black bg-zinc-300 hover:bg-zinc-200 border-zinc-100': selected,
           'hover:bg-zinc-800 text-muted-foreground border-transparent' : !selected}"
-    @click="$emit('select'); $refs.title.scramble()">
+    @click="$emit('select'); $refs.title?.scramble()">
     <slot v-if="$slots['replace']" name="replace" />
     <template v-else>
       <img
diff --git a/src/components/config/ConfigPane.vue b/src/components/config/ConfigPane.vue
index 94343bf..003dd8d 100644
--- a/src/components/config/ConfigPane.vue
+++ b/src/components/config/ConfigPane.vue
@@ -6,8 +6,8 @@
         v-model="configPage"
         :options="configPages"
         class="p-2 border solid border-b">
-        <template v-for="(page, key) in configPages" #[key]>
-          {{ $t(page.titleKey) }}
+        <template v-for="(page, key) in configPages" #[key] :key="key">
+          <ScrambleText ref="title" :text="$t(page.titleKey)" />
         </template>
       </TabSelect>
       <div class="grow overflow-y-auto">
diff --git a/src/components/config/keys/KeyFeedbackConfig.vue b/src/components/config/keys/KeyFeedbackConfig.vue
index 9155f28..070ff66 100644
--- a/src/components/config/keys/KeyFeedbackConfig.vue
+++ b/src/components/config/keys/KeyFeedbackConfig.vue
@@ -41,7 +41,7 @@
 <script setup>
 import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
 import ConfigSection from '@/components/common/ConfigSection.vue'
-import Color from 'color'
+import { Separator } from '@/components/ui/separator'
 import { ref } from 'vue'
 import TabSelect from '@/components/common/TabSelect.vue'
 import FdIcon from '@/assets/icons/iconFineDetents.svg'
diff --git a/src/components/config/knob/KnobFeedbackConfig.vue b/src/components/config/knob/KnobFeedbackConfig.vue
index 987fc3a..d3fc394 100644
--- a/src/components/config/knob/KnobFeedbackConfig.vue
+++ b/src/components/config/knob/KnobFeedbackConfig.vue
@@ -48,6 +48,7 @@ import CdIcon from '@/assets/icons/iconCoarseDetents.svg'
 import VfIcon from '@/assets/icons/iconViscousRotation.svg'
 import RcIcon from '@/assets/icons/iconReturnToCenter.svg'
 import SteppedSlider from '@/components/common/SteppedSlider.vue'
+import { Separator } from '@/components/ui/separator'
 
 const feedbackType = ref('fineDetents') // TODO: replace with actual value
 
diff --git a/src/components/old/DragTest.vue b/src/components/old/DragTest.vue
new file mode 100644
index 0000000..8018295
--- /dev/null
+++ b/src/components/old/DragTest.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import draggable from 'vuedraggable'
+import { ref } from 'vue'
+
+const message = [
+  'vue.draggable',
+  'draggable',
+  'component',
+  'for',
+  'vue.js 2.0',
+  'based',
+  'on',
+  'Sortablejs',
+]
+
+const list = ref(
+  message.map((name, index) => {
+    return { name, order: index + 1 }
+  }),
+)
+
+const dragOptions = ref({
+  animation: 200,
+  group: 'description',
+  disabled: false,
+  ghostClass: 'ghost',
+})
+
+const drag = ref(false)
+
+const sort = () => {
+  console.log('here')
+  list.value = list.value.sort((a, b) => a.order - b.order)
+}
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-2 flex">
+      <button class="btn btn-secondary button" @click="sort">
+        To original order
+      </button>
+    </div>
+
+    <div class="col-6 flex-col">
+      <h3>Transition</h3>
+      <transition-group>
+        <draggable
+          key="dragggable"
+          item-key="name"
+          :list="list"
+          v-bind="dragOptions"
+          @start="drag = true"
+          @end="drag = false"
+        >
+          <template #item="{ element }">
+            <li :key="element.name">
+              {{ element.name }}
+            </li>
+          </template>
+        </draggable>
+      </transition-group>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.button {
+  margin-top: 35px;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+</style>
diff --git a/src/components/profile/ProfileManager.vue b/src/components/profile/ProfileManager.vue
index 1ebf7ab..73edaf6 100644
--- a/src/components/profile/ProfileManager.vue
+++ b/src/components/profile/ProfileManager.vue
@@ -50,30 +50,32 @@
               }})</span>
             </CollapsibleTrigger>
             <CollapsibleContent>
-              <draggable
-                :list="category.profiles"
-                group="profiles"
-                item-key="name"
-                :animation="150"
-                direction="vertical"
-                @start="drag = true"
-                @end="drag = false"
-                @change="(event)=>onProfileDrop(event, categoryIndex)">
-                <template v-if="category.profiles.length === 0" #header>
-                  <div class="flex h-12 justify-center items-center hideable-header">
-                    <MoreHorizontal class="w-4 text-zinc-600" />
-                  </div>
-                </template>
-                <template #item="{ element }">
-                  <ProfileButton
-                    :key="element.id"
-                    :profile="element"
-                    :selected="store.selectedProfile?.id === element.id"
-                    @select="store.selectProfile(element.id); showProfileConfig=true"
-                    @duplicate="store.duplicateProfile(element.id)"
-                    @delete="store.removeProfile(element.id)" />
-                </template>
-              </draggable>
+              <TransitionGroup>
+                <draggable
+                  key="draggable"
+                  item-key="id"
+                  :list="category.profiles"
+                  v-bind="dragOptions"
+                  @start="drag = true"
+                  @end="drag = false"
+                  @change="(event)=>onProfileDrop(event, categoryIndex)">
+                  <template v-if="category.profiles.length === 0" #header>
+                    <div class="flex h-12 justify-center items-center hideable-header">
+                      <MoreHorizontal class="w-4 text-zinc-600" />
+                    </div>
+                  </template>
+                  <template #item="{ element }">
+                    <div :key="element.name">
+                      <ProfileButton
+                        :profile="element"
+                        :selected="store.selectedProfile?.id === element.id"
+                        @select="store.selectProfile(element.id); showProfileConfig=true"
+                        @duplicate="store.duplicateProfile(element.id)"
+                        @delete="store.removeProfile(element.id)" />
+                    </div>
+                  </template>
+                </draggable>
+              </TransitionGroup>
             </CollapsibleContent>
           </Collapsible>
         </div>
@@ -104,6 +106,13 @@ defineProps({
   },
 })
 
+const dragOptions = ref({
+  group: 'profiles',
+  ghostClass: 'ghost',
+  animation: 150,
+  direction: 'vertical',
+})
+
 const maxProfiles = 32
 
 const store = useStore()
@@ -198,6 +207,10 @@ const onProfileDrop = (event, categoryIndex) => {
   opacity: 0;
 }
 
+.sortable-drag {
+  opacity: 0;
+}
+
 .hideable-header:not(:only-child) {
   display: none;
 }