43 lines
No EOL
1.1 KiB
Vue
43 lines
No EOL
1.1 KiB
Vue
<template>
|
|
<div
|
|
:class="isActive ? 'bg-green-700' : ''"
|
|
class="px-4 py-1 flex items-center justify-between gap-2 transition"
|
|
>
|
|
<CueBox :step="step"/>
|
|
<button class="flex items-center text-4" @click="goToPosition(step.position)">
|
|
<KeyReturnIcon/>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style module>
|
|
|
|
</style>
|
|
|
|
<script lang="ts" setup>
|
|
import { state, Step } from "@/state"
|
|
import { goToPosition } from "@/syncing"
|
|
import KeyReturnIcon from "virtual:icons/ph/key-return"
|
|
import CueBox from "./CueBox.vue"
|
|
import { useCurrentElement } from "@vueuse/core"
|
|
import { computed, toRef, watchEffect } from "vue"
|
|
import { isEqual } from "lodash-es"
|
|
|
|
const props = defineProps<{
|
|
step: Step
|
|
}>()
|
|
|
|
const position = toRef(state, "position")
|
|
const element = useCurrentElement<HTMLElement>()
|
|
const isActive = computed(() => isEqual(props.step.position, position.value))
|
|
|
|
watchEffect(() => {
|
|
if (isActive.value) {
|
|
element.value?.scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "center",
|
|
inline: "nearest"
|
|
})
|
|
}
|
|
})
|
|
</script> |