requestAnimation was used

Author: iamgabrielsoft

@codexteam/ui/dev/Playground.vue

@@ -114,6 +114,11 @@ const pages = computed(() => [
   {
     title: 'Components',
     items: [
+      {
+        title: 'Alert',
+        onActivate: () => router.push('/alert'),
+        isActive: route.path === '/alert',
+      },
       {
         title: 'Button',
         onActivate: () => router.push('/components/button'),

@codexteam/ui/dev/routes.ts

@@ -1,6 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 import type { Component } from 'vue';
 import Index from './pages/Index.vue';
+import Alert from './pages/components/Alert.vue';
 import TypeScale from './pages/base-concepts/TypeScale.vue';
 import ControlsDimensions from './pages/base-concepts/ControlsDimensions.vue';
 import Sizes from './pages/base-concepts/Sizes.vue';
@@ -41,6 +42,10 @@ const routes: RouteRecordRaw[] = [
     path: '/',
     component: Index as Component,
   },
+  {
+    path: '/alert',
+    component: Alert as Component,
+  },
   {
     path: '/type-scale',
     component: TypeScale as Component,

…/src/vue/components/alert/Alert.types.ts …/src/vue/components/alert/Alert.types.tscodex-ui/src/vue/components/alert/Alert.types.ts renamed to @codexteam/ui/src/vue/components/alert/Alert.types.ts codex-ui/src/vue/components/alert/Alert.types.ts renamed to @codexteam/ui/src/vue/components/alert/Alert.types.ts

@@ -20,7 +20,6 @@
 import Alert from './Alert.vue';
 import AlertTransition from './AlertTransition.vue';
 import { useAlert } from './useAlert';
-
 const { alerts } = useAlert();
 </script>
 

…ex-ui/src/vue/components/alert/Alert.vue …am/ui/src/vue/components/alert/Alert.vuecodex-ui/src/vue/components/alert/Alert.vue renamed to @codexteam/ui/src/vue/components/alert/Alert.vue codex-ui/src/vue/components/alert/Alert.vue renamed to @codexteam/ui/src/vue/components/alert/Alert.vue

@@ -0,0 +1,54 @@
+<template>
+  <transition-group
+    tag="div"
+    name="alert"
+    class="alert-container"
+  >
+    <slot />
+  </transition-group>
+</template>
+
+<script setup lang="ts">
+// No script logic needed for basic transitions
+</script>
+
+<style lang="postcss">
+/* Enter/Leave transitions */
+.alert-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.alert-leave-active {
+  transition: all 0.4s ease-in;
+  position: absolute;
+  width: 100%;
+}
+
+.alert-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.alert-enter-to {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.alert-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+/* Move other items smoothly when one is removed */
+.alert-move {
+  transition: transform 0.4s ease;
+}
+
+.alert-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+}
+</style>

…/vue/components/alert/AlertContainer.vue …/vue/components/alert/AlertContainer.vuecodex-ui/src/vue/components/alert/AlertContainer.vue renamed to @codexteam/ui/src/vue/components/alert/AlertContainer.vue codex-ui/src/vue/components/alert/AlertContainer.vue renamed to @codexteam/ui/src/vue/components/alert/AlertContainer.vue

@@ -1,4 +1,4 @@
-import { useAlert } from './useAlert';
+import { useAlert } from './useAlert.js';
 import AlertContainer from './AlertContainer.vue';
 
 export * from './Alert.types.js';

@codexteam/ui/src/vue/components/alert/AlertTransition.vue

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import { ref } from 'vue';
+import { onUnmounted, ref } from 'vue';
 import { createSharedComposable } from '@vueuse/core';
 import type { AlertOptions, AlertType } from './Alert.types';
 
@@ -49,14 +49,37 @@ export interface UseAlertComposableState {
  */
 export const useAlert = createSharedComposable((): UseAlertComposableState => {
   const counter = ref(0);
+  const maxAlerts = 10; // Default maximum number of alerts
   const alerts = ref<AlertOptions[]>([]);
+  const animationFrameIds = new Map<number, number>();
 
   function removeExpiredAlerts(): void {
     const currentTime = new Date().getTime();
 
     alerts.value = alerts.value.filter(alert => alert.timeout > currentTime);
   }
 
+  function scheduleRemoval(alertId: number, timeout: number): void {
+    const startTime = performance.now();
+
+    const checkExpiry = (timestamp: number): void => {
+      const elpased = timestamp - startTime;
+
+      if (elpased >= timeout) {
+        removeExpiredAlerts();
+        animationFrameIds.delete(alertId);
+      } else {
+        const frameId = requestAnimationFrame(checkExpiry);
+
+        animationFrameIds.set(alertId, frameId);
+      }
+    };
+
+    const frameId = requestAnimationFrame(checkExpiry);
+
+    animationFrameIds.set(alertId, frameId);
+  }
+
   /**
    * Trigger alert component
    * @param type alert type (success, error, warning, info and default)
@@ -70,12 +93,41 @@ export const useAlert = createSharedComposable((): UseAlertComposableState => {
     const currentTime = new Date().getTime();
     const currentTimeout = currentTime + opt.timeout;
 
-    opt.id = counter.value++, opt.type = type, opt.timeout = currentTimeout;
+    if (alerts.value.length >= maxAlerts) {
+      // Find and remove the oldest alert (smallest ID)
+      const oldestAlert = alerts.value.reduce((prev, current) => {
+        if (prev?.id === undefined || current.id === undefined) {
+          return prev;
+        }
 
-    alerts.value = [...alerts.value, opt];
-    setInterval(removeExpiredAlerts, currentTimeout);
+        return (prev.id < current.id) ? prev : current;
+      });
+
+      alerts.value = alerts.value.filter(alert => alert.id !== oldestAlert?.id);
+    }
+
+    const newAlert = {
+      ...opt,
+      id: counter.value++,
+      type,
+      timeout: currentTimeout,
+    };
+
+    alerts.value = [newAlert, ...alerts.value];
+
+    requestAnimationFrame(() => {
+      scheduleRemoval(Number(newAlert.id), opt.timeout);
+    });
   }
 
+  onUnmounted(() => {
+    animationFrameIds.forEach((frameId) => {
+      cancelAnimationFrame(frameId);
+    });
+
+    animationFrameIds.clear();
+  });
+
   return {
     alerts,
     success: (opt: Omit<AlertOptions, 'id'>) => triggerAlert('success', opt),