fix transition

codex-ui/dev/Playground.vue

@@ -30,6 +30,7 @@
       </div>
     </div>
     <Popover />
+    <AlertContainer />
   </div>
 </template>
 
@@ -38,8 +39,10 @@ import { computed } from 'vue';
 import {
   VerticalMenu,
   Tabbar,
-  Popover
+  Popover,
+  AlertContainer
 } from '../src/vue';
+
 import { useTheme } from '../src/vue/composables/useTheme';
 
 import { useRouter, useRoute } from 'vue-router';
@@ -210,12 +213,10 @@ const pages = computed(() => [
 
 <style module>
 .playground {
-  display: flex;
-  flex-direction: column;
+
   background-color: var(--base--bg-primary);
   color: var(--base--text);
   min-height: 100vh;
-  width: 100%;
 }
 .header {
   display: grid;

codex-ui/src/vue/components/alert/Alert.types.ts

@@ -3,11 +3,6 @@
  */
 export type AlerType = 'success' | 'error' | 'warning' | 'info' | 'default';
 
-/**
- * Various alert theme type
- */
-export type AlertTheme = 'grass' | 'red' | 'amber' | 'graphite' | '';
-
 /**
  * alert configuration
  */
@@ -33,13 +28,6 @@ export interface AlertOptions {
    */
   type?: AlerType;
 
-  /**
-   *  Position of the alert on the screen.
-   *
-   * (bottom-center).
-   */
-  position?: 'bottom-center';
-
   /**
    * How many milliseconds for the alert to be auto dismissed
    */

codex-ui/src/vue/components/alert/Alert.vue

@@ -18,19 +18,24 @@
 <script setup lang="ts">
 import { defineProps, computed, withDefaults, ref } from 'vue';
 import Icon from '../icon/Icon.vue';
-import type { AlertOptions, AlertTheme } from './Alert.types';
+import type { AlertOptions } from './Alert.types';
 
 const el = ref<HTMLElement>();
 
 const props = withDefaults(defineProps<AlertOptions>(), {
-  id: `alert-' ${Math.random()}`,
+  id: `alert-'${Math.random()}`,
   position: 'bottom-center',
   message: '',
   icon: '',
   type: 'default',
   timeout: 5000,
 });
 
+/**
+ * Various alert theme type
+ */
+export type AlertTheme = 'grass' | 'red' | 'amber' | 'graphite' | undefined;
+
 /**
  *
  * computed theme
@@ -50,7 +55,7 @@ const computedTheme = computed((): AlertTheme => {
       return 'graphite';
 
     default:
-      return '';
+      return undefined;
   }
 });
 </script>
@@ -70,11 +75,12 @@ const computedTheme = computed((): AlertTheme => {
   background-color: var(--base-text);
   overflow: hidden;
   word-break: keep-all;
-  transform: translateZ(0);
   direction: ltr;
   padding: var(--v-padding) var(--h-padding) var(--v-padding) var(--h-padding);
   border-radius: var(--radius-field);
-  color: var(--accent--text-solid-foreground);
+  color: var(--base--text-solid-foreground);
+  overflow-wrap: anywhere;
+  transform: translateY(10%);
 
   &--success {
     background-color: var(--base--solid);
@@ -93,7 +99,9 @@ const computedTheme = computed((): AlertTheme => {
   }
 
   &--default {
+    color: var(--base--text);
     background-color: var(--base--bg-secondary);
   }
 }
+
 </style>

codex-ui/src/vue/components/alert/AlertContainer.vue

@@ -2,9 +2,10 @@
   <div
     :class="[
       $style.alert__container,
-      $style['alert__container--' + defaultAlertOpt.position]
+      $style['alert__container--bottom-center']
     ]"
   >
+    <!-- Transition group for the list of alerts -->
     <AlertTransition>
       <Alert
         v-for="(alert, index) in alerts"
@@ -20,7 +21,7 @@ import Alert from './Alert.vue';
 import AlertTransition from './AlertTransition.vue';
 import { useAlert } from './useAlert';
 
-const { alerts, defaultAlertOpt } = useAlert();
+const { alerts } = useAlert();
 
 </script>
 
@@ -35,8 +36,8 @@ const { alerts, defaultAlertOpt } = useAlert();
 
   &--bottom-center {
    left: 50%;
-   bottom: 2rem
+   transform: translateX(-50%);
+   bottom: var(--spacing-l);
   }
 }
-
 </style>

codex-ui/src/vue/components/alert/AlertTransition.vue

@@ -9,13 +9,18 @@
 
 <style lang="postcss">
 
+.fade-move,
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.5s ease;
+  transition: all 0.5s ease;
 }
 
-.fade-enter,
-.fade-leave-to {
+.fade-enter-from, .fade-leave-to {
   opacity: 0;
+  transform: translateX(-50%);
+}
+
+.fade-leave-active {
+  position: absolute;
 }
 </style>

codex-ui/src/vue/components/alert/useAlert.ts

@@ -4,7 +4,6 @@ import { createSharedComposable } from '@vueuse/core';
 import type { AlertOptions, AlerType } from './Alert.types';
 
 /**
- *
  * Return values of useAlert composable
  */
 export interface UseAlertComposableState {
@@ -57,7 +56,6 @@ export const useAlert = createSharedComposable((): UseAlertComposableState => {
 
   const defaultAlertOpt = ref<AlertOptions>({
     id: `alert-'${Math.random()}`,
-    position: 'bottom-center',
     message: '',
     icon: undefined,
     type: 'default',
@@ -66,11 +64,11 @@ export const useAlert = createSharedComposable((): UseAlertComposableState => {
 
   /**
    * Trigger alert component
-   * @param type type of alert (success, error, warning, info and default)
+   * @param type alert type (success, error, warning, info and default)
    * @param opt alert options(timeout, message and icon)
    */
-  function triggerAlert(type: AlerType, opt: Omit<AlertOptions, 'position'>): void {
-    const alertIndex = alerts.value.findIndex((idx: AlertOptions) => idx.id === opt.id);
+  function triggerAlert(type: AlerType, opt: AlertOptions): void {
+    let alertIndex = alerts.value.findIndex((idx: AlertOptions) => idx.id === opt.id);
 
     alerts.value.push({ type,
       ...opt });