move * to apps/frontend

2024-11-21 01:15:06 +02:00
parent 3ac451e5f3
commit 11bba7a275
89 changed files with 35 additions and 23 deletions
@@ -0,0 +1,46 @@
+<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) {
+      sectionRef.value?.querySelector('input[type="text"]')?.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>