hereconnect/apps/frontend/src/components/create/CreateSection.vue

<template>
  <section :class="{ 'active-section': isActive }" ref="section">
    <slot />
  </section>
</template>

<script setup lang="ts">
import { watch, useTemplateRef } from 'vue'

const props = defineProps<{ isActive: boolean; isNextActiveSection: boolean }>()

const sectionRef = useTemplateRef('section')

// плавная прокрутка при активации секции
watch(
  () => sectionRef.value && props.isNextActiveSection,
  (isNextActiveSection) => {
    if (isNextActiveSection) {
      const input = sectionRef.value?.querySelector('input[type="text"]')
      if (input instanceof HTMLInputElement) {
        input.focus()
      }

      sectionRef.value?.scrollIntoView({ behavior: 'smooth' })
    }
  },
  { immediate: true },
)
</script>

<style scoped>
section {
  opacity: 0.1;
  transition: opacity 0.5s;
  pointer-events: none;
}

section {
  border-top: 1px solid silver;
  padding-top: 1em;
}
section:first-of-type {
  border-top: none;
}

section.active-section {
  opacity: 1;
  pointer-events: all;
}
</style>