migrated to vue wtf

src/ui/BeatSettings/BeatSettings.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="beat-settings" v-if="beat">
+        <div class="beat-settings-options">
+            <div class="beat-settings-boxes beat-settings-option">
+                <number-input label="Bars: " v-model="beat!.barCount.value" :disabled="beat!.barSettingsLocked.value" /> 
+            </div>
+            <div class="beat-settings-bar-count beat-settings-option">
+                <number-input label="Boxes per bar: " v-model="beat!.timeSigUp.value" /> 
+            </div>
+            <div class="beat-settings-bar-count beat-settings-option">
+                <bool-box label="Auto beat length: " v-model="beat!.useAutoBeatLength.value" />
+            </div>
+            <action-button
+                label="New Track"
+                @click="() => beat!.addTrack()" />
+            <div>
+                <track-settings 
+                    v-for="(_, i) in beat!.tracks.value ?? []"
+                    :key="i"
+                    :beat-index="beatIndex"
+                    :track-index="i" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import NumberInput from "@/ui/Widgets/NumberInput/NumberInput.vue";
+    import BoolBox from "@/ui/Widgets/BoolBox/BoolBox.vue";
+    import TrackSettings from "@/ui/TrackSettings/TrackSettings.vue";
+    import { useBeatStore } from '@/BeatStore';
+    import ActionButton from "@/ui/Widgets/ActionButton/ActionButton.vue";
+    import { computed } from "vue";
+
+    const props = defineProps<{
+        beatIndex: number,
+    }>();
+    
+    const { beats } = useBeatStore();
+
+    const beat = computed(() => beats.value[props.beatIndex] ?? null);
+</script>
+
+<style scoped lang="scss">
+    .beat-settings {
+    }
+
+    .beat-settings-options {
+        padding: 1em;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+    }
+
+    .beat-settings-option {
+        text-align: center;
+    }
+
+    .beat-settings-option-group {
+        display: none;
+    }
+    .beat-settings-option-group.visible {
+        display: inline-block;
+    }
+</style>