From a08c9782eb284edb1f214ab1180ef4d5e061f16d Mon Sep 17 00:00:00 2001
From: Sirttas <calloch.gael@gmail.com>
Date: Wed, 26 Jul 2023 16:02:54 +0200
Subject: [PATCH] cleanup

---
 src/BuySellSlider.vue                  | 32 ++++++++++++++++++++++++++
 src/reprocess/ReprocessResultTable.vue | 14 ++---------
 2 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 src/BuySellSlider.vue

diff --git a/src/BuySellSlider.vue b/src/BuySellSlider.vue
new file mode 100644
index 0000000..afe9c18
--- /dev/null
+++ b/src/BuySellSlider.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+    modelValue?: boolean;
+}
+interface Emits {
+    (e: 'update:modelValue', value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: false
+});
+const emit = defineEmits<Emits>();
+
+const value = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+    <label class="flex items-center relative w-max cursor-pointer select-none">
+        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black" v-model="value" />
+        <span class="absolute font-medium text-xs right-1 text-white"> Buy </span>
+        <span class="absolute font-medium text-xs right-8 text-white"> Sell </span>
+        <span class="w-7 h-7 right-7 absolute rounded-full transform transition-transform bg-gray-200" />
+    </label>
+</template>
+
+<style scoped>
+    input:checked ~ span:last-child {
+        --tw-translate-x: 1.75rem;
+    }
+</style>
\ No newline at end of file
diff --git a/src/reprocess/ReprocessResultTable.vue b/src/reprocess/ReprocessResultTable.vue
index e901d39..49417bb 100644
--- a/src/reprocess/ReprocessResultTable.vue
+++ b/src/reprocess/ReprocessResultTable.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import BuySellSlider from '@/BuySellSlider.vue';
 import { iskFormater, percentFormater } from '@/formaters';
 import { useStorage } from '@vueuse/core';
 import { computed, ref } from 'vue';
@@ -29,12 +30,7 @@ const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
 <template>
     <div class="grid grid-cols-2 mb-2 mt-4 ms-auto">
         <div class="justify-self-end">
-            <label class="flex items-center relative w-max cursor-pointer select-none">
-                <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black" v-model="useSellOrder" />
-                <span class="absolute font-medium text-xs right-1 text-white"> Buy </span>
-                <span class="absolute font-medium text-xs right-8 text-white"> Sell </span>
-                <span class="w-7 h-7 right-7 absolute rounded-full transform transition-transform bg-gray-200" />
-            </label>
+            <BuySellSlider v-model="useSellOrder" />
         </div>
         <div class="justify-self-end ms-2">
             <span>Threshold: </span>
@@ -60,9 +56,3 @@ const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
         </tbody>
     </table>
 </template>
-
-<style scoped>
-    input:checked ~ span:last-child {
-        --tw-translate-x: 1.75rem;
-    }
-</style>
\ No newline at end of file