Add prettier config, format codebase

src/demo/TextAnimations/ScrollFloatDemo.vue

@@ -2,30 +2,35 @@
   <TabbedLayout>
     <template #preview>
       <div ref="containerRef" class="demo-container" @wheel="smoothScroll">
-
-        <div class="scroll-instruction">
-          Scroll Down
-        </div>
+        <div class="scroll-instruction">Scroll Down</div>
 
         <div class="scroll-content">
-          <ScrollFloat 
-            :children="scrollText" 
-            :animation-duration="animationDuration" 
+          <ScrollFloat
+            :children="scrollText"
+            :animation-duration="animationDuration"
             :ease="ease"
-            :scroll-start="scrollStart" 
-            :scroll-end="scrollEnd" 
+            :scroll-start="scrollStart"
+            :scroll-end="scrollEnd"
             :stagger="stagger"
-            :container-class-name="containerClassName" 
+            :container-class-name="containerClassName"
             :text-class-name="textClassName"
-            :scroll-container-ref="{ current: containerRef }" 
-            :key="rerenderKey" 
+            :scroll-container-ref="{ current: containerRef }"
+            :key="rerenderKey"
           />
         </div>
       </div>
 
       <Customize>
         <PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
-        <PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
+
+        <PreviewSlider
+          title="Animation Duration:"
+          v-model="animationDuration"
+          :min="1"
+          :max="10"
+          :step="0.1"
+          value-unit="s"
+        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -42,60 +47,57 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { gsap } from 'gsap'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import Customize from '../../components/common/Customize.vue'
-import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode'
-
-
-const containerRef = ref<HTMLElement | null>(null)
-const scrollText = ref("vuebits")
-const animationDuration = ref(1)
-const ease = ref('back.inOut(2)')
-const scrollStart = ref('center bottom+=50%')
-const scrollEnd = ref('bottom bottom-=40%')
-const stagger = ref(0.03)
-const containerClassName = ref("")
-const textClassName = ref("")
-const rerenderKey = ref(0)
+import { ref, onMounted, onUnmounted } from 'vue';
+import { gsap } from 'gsap';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode';
 
+const containerRef = ref<HTMLElement | null>(null);
+const scrollText = ref('vuebits');
+const animationDuration = ref(1);
+const ease = ref('back.inOut(2)');
+const scrollStart = ref('center bottom+=50%');
+const scrollEnd = ref('bottom bottom-=40%');
+const stagger = ref(0.03);
+const containerClassName = ref('');
+const textClassName = ref('');
+const rerenderKey = ref(0);
 
 const smoothScroll = (e: WheelEvent) => {
-  e.preventDefault()
-  const container = containerRef.value
-  if (!container) return
+  e.preventDefault();
+  const container = containerRef.value;
+  if (!container) return;
 
-  const delta = e.deltaY || e.detail
-  const scrollAmount = delta * 2
+  const delta = e.deltaY || e.detail;
+  const scrollAmount = delta * 2;
 
   gsap.to(container, {
     scrollTop: container.scrollTop + scrollAmount,
     duration: 1,
-    ease: "power3.out",
-    overwrite: "auto"
-  })
-}
-
+    ease: 'power3.out',
+    overwrite: 'auto'
+  });
+};
 
 onMounted(() => {
-  const container = containerRef.value
+  const container = containerRef.value;
   if (container) {
-    container.addEventListener('wheel', smoothScroll, { passive: false })
+    container.addEventListener('wheel', smoothScroll, { passive: false });
   }
-})
+});
 
 onUnmounted(() => {
-  const container = containerRef.value
+  const container = containerRef.value;
   if (container) {
-    container.removeEventListener('wheel', smoothScroll)
+    container.removeEventListener('wheel', smoothScroll);
   }
-})
+});
 
 const propData = [
   {
@@ -152,8 +154,9 @@ const propData = [
     default: '0.03',
     description: 'Delay between each character animation'
   }
-]
+];
 </script>
+
 <style scoped>
 .demo-container {
   height: 60vh;
@@ -180,4 +183,4 @@ const propData = [
 .scroll-content {
   color: aliceblue;
 }
-</style>
+</style>