66 lines
2.0 KiB
Vue
66 lines
2.0 KiB
Vue
<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>
|