From e4a50bcd60b62ca056cf6770be28a6c4d692da5c Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 4 Jan 2025 16:40:27 +0800
Subject: [PATCH] migrate to composition API and typescript

---
 src/components/desktop/BtnVerticalGroup.vue | 51 +++++++++++----------
 1 file changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/components/desktop/BtnVerticalGroup.vue b/src/components/desktop/BtnVerticalGroup.vue
index 33082f79..72161f83 100644
--- a/src/components/desktop/BtnVerticalGroup.vue
+++ b/src/components/desktop/BtnVerticalGroup.vue
@@ -10,31 +10,36 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: [
-        'disabled',
-        'buttons',
-        'modelValue'
-    ],
-    emits: [
-        'update:modelValue'
-    ],
-    computed: {
-        value: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (value) {
-                if (value === this.modelValue) {
-                    return;
-                }
+<script setup lang="ts">
+import { computed } from 'vue';
 
-                this.$emit('update:modelValue', value);
-            }
-        }
-    }
+interface Button {
+    name: string,
+    value: unknown
 }
+
+const props = defineProps<{
+    modelValue: unknown;
+    buttons: Button[];
+    disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: unknown): void
+}>();
+
+const value = computed<unknown>({
+    get: () => {
+        return props.modelValue;
+    },
+    set: value => {
+        if (value === props.modelValue) {
+            return;
+        }
+
+        emit('update:modelValue', value);
+    }
+});
 </script>
 
 <style>