refactor: Meteors logic ( use Array.from() instead of new Array)

selemondev · Oct 8, 2024 · 0c7948a · 0c7948a
1 parent d59df38
commit 0c7948a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/docs/src/components/spark-ui/meteors/Meteors.vue b/docs/src/components/spark-ui/meteors/Meteors.vue
@@ -12,16 +12,19 @@ const props = withDefaults(defineProps<MeteorsProps>(), {
 
 const meteorStyles = ref()
 
+const getRandomPosition = (max: number) => `${Math.floor(Math.random() * max)}px`
+const getRandomDelay = () => `${(Math.random() * 1 + 0.2).toFixed(2)}s`
+const getRandomDuration = () => `${Math.floor(Math.random() * 8 + 2)}s`
+
 watch(() => props.number, (val) => {
-  const styles = [...Array.of(val)].map(() => ({
+  const styles = Array.from({ length: val }, () => ({
     top: -5,
-    left: `${Math.floor(Math.random() * window.innerWidth)}px`,
-    animationDelay: `${Math.random() * 1 + 0.2}s`,
-    animationDuration: `${Math.floor(Math.random() * 8 + 2)}s`,
+    left: getRandomPosition(window.innerWidth),
+    animationDelay: getRandomDelay(),
+    animationDuration: getRandomDuration(),
   }))
   meteorStyles.value = styles
 }, {
-  deep: true,
   immediate: true,
 })
 </script>

diff --git a/docs/src/example/meteors/Meteors.vue b/docs/src/example/meteors/Meteors.vue
@@ -12,16 +12,19 @@ const props = withDefaults(defineProps<MeteorsProps>(), {
 
 const meteorStyles = ref()
 
+const getRandomPosition = (max: number) => `${Math.floor(Math.random() * max)}px`
+const getRandomDelay = () => `${(Math.random() * 1 + 0.2).toFixed(2)}s`
+const getRandomDuration = () => `${Math.floor(Math.random() * 8 + 2)}s`
+
 watch(() => props.number, (val) => {
-  const styles = [...Array.of(val)].map(() => ({
+  const styles = Array.from({ length: val }, () => ({
     top: -5,
-    left: `${Math.floor(Math.random() * window.innerWidth)}px`,
-    animationDelay: `${Math.random() * 1 + 0.2}s`,
-    animationDuration: `${Math.floor(Math.random() * 8 + 2)}s`,
+    left: getRandomPosition(window.innerWidth),
+    animationDelay: getRandomDelay(),
+    animationDuration: getRandomDuration(),
   }))
   meteorStyles.value = styles
 }, {
-  deep: true,
   immediate: true,
 })
 </script>
@@ -50,6 +53,7 @@ watch(() => props.number, (val) => {
   70% {
     opacity: 1;
   }
+
   100% {
     transform: rotate(215deg) translateX(-500px);
     opacity: 0;