removed alert constant

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

@@ -1,14 +1,14 @@
 /**
  * Various alert type
  */
-export type Alertype = 'success' | 'error' | 'warning' | 'info' | 'default';
+export type AlerType = 'success' | 'error' | 'warning' | 'info' | 'default';
 
 /**
  * alert configuration
  */
 export interface AlertOptions {
 
-  id?: number;
+  id?: string;
   /**
    * Custom icon class to be used.
    *
@@ -23,7 +23,7 @@ export interface AlertOptions {
    *
    *  Can be any of `(success, error, default, info, warning)`
    */
-  type?: Alertype;
+  type?: AlerType;
   /**
    *  Position of the alert on the screen.
    *

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

@@ -19,12 +19,11 @@
 import { defineProps, computed, withDefaults, ref } from 'vue';
 import Icon from '../icon/Icon.vue';
 import type { AlertOptions } from './Alert.types';
-import { genId } from './constant';
 
 const el = ref<HTMLElement>();
 
 const props = withDefaults(defineProps<AlertOptions>(), {
-  id: genId(),
+  id: `alert-' ${Math.random()}`,
   position: 'bottom-center',
   message: '',
   icon: '',

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

@@ -2,7 +2,7 @@
   <div
     :class="[
       $style.alert__container,
-      $style['alert__container--' + props.position]
+      $style['alert__container--' + defaultAlertOpt.position]
     ]"
   >
     <AlertTransition>
@@ -19,19 +19,8 @@
 import Alert from './Alert.vue';
 import AlertTransition from './AlertTransition.vue';
 import { useAlert } from './useAlert';
-import type { AlertOptions } from './Alert.types';
-import { genId } from './constant';
 
-const props = withDefaults(defineProps<AlertOptions>(), {
-  id: genId(),
-  position: 'bottom-center',
-  content: '',
-  icon: '',
-  type: undefined,
-  timeout: 5000,
-});
-
-const { alerts } = useAlert();
+const { alerts, defaultAlertOpt } = useAlert();
 
 </script>
 

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

@@ -1,9 +1,14 @@
 import type { Ref } from 'vue';
 import { ref } from 'vue';
 import { createSharedComposable } from '@vueuse/core';
-import type { AlertOptions, Alertype } from './Alert.types';
+import type { AlertOptions, AlerType } from './Alert.types';
 
 export interface UseAlertComposableState {
+  /**
+   * Default alert option
+   */
+  defaultAlertOpt: Ref<AlertOptions>;
+
   /**
    * Iterated store of alerts
    */
@@ -46,12 +51,21 @@ export interface UseAlertComposableState {
 export const useAlert = createSharedComposable((): UseAlertComposableState => {
   const alerts = ref<AlertOptions[]>([]);
 
+  const defaultAlertOpt = ref<AlertOptions>({
+    id: `alert-'${Math.random()}`,
+    position: 'bottom-center',
+    message: '',
+    icon: undefined,
+    type: undefined,
+    timeout: 5000,
+  });
+
   /**
    * Trigger alert component
    * @param type type of alert (success, error, warning, info and default)
    * @param opt alert options(timeout, message and icon)
    */
-  function triggerAlert(type?: Alertype, opt?: Pick<AlertOptions, 'id' | 'icon' | 'message' | 'timeout'>): void {
+  function triggerAlert(type?: AlerType, opt?: Pick<AlertOptions, 'id' | 'icon' | 'message' | 'timeout'>): void {
     const alertIndex = alerts.value.findIndex((idx: AlertOptions) => idx.id === opt?.id);
 
     alerts.value.push({ type,
@@ -69,5 +83,6 @@ export const useAlert = createSharedComposable((): UseAlertComposableState => {
     warning: (opt?: Omit<AlertOptions, 'id'>) => triggerAlert('warning', opt),
     info: (opt?: Omit<AlertOptions, 'id'>) => triggerAlert('info', opt),
     alert: (opt?: Omit<AlertOptions, 'id'>) => triggerAlert('default', opt),
+    defaultAlertOpt,
   };
 });