alert toast component

codex-ui/dev/Playground.vue

@@ -192,16 +192,28 @@ const pages = computed(() => [
         onActivate: () => router.push('/components/editor'),
         isActive: route.path === '/components/editor',
       },
+
+      {
+        title: 'Alert',
+        onActivate: () => router.push('/components/alert'),
+        isActive: route.path === '/components/alert',
+      },
     ],
   },
 ]);
 </script>
 
 <style module>
 .playground {
+  display: flex;
+  flex-direction: column;
   background-color: var(--base--bg-primary);
   color: var(--base--text);
   min-height: 100%;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  /* height: 100vh; */
 }
 .header {
   display: grid;

codex-ui/dev/pages/components/Alert.vue

@@ -0,0 +1,10 @@
+<template>
+  <Alert
+    :message="'Hello alert'"
+    type="info"
+  />
+</template>
+
+<script setup lang="ts">
+import { Alert } from '../../../src/vue';
+</script>

codex-ui/dev/pages/components/Card.vue

@@ -16,7 +16,7 @@
     orientation="horizontal"
     src="https://via.placeholder.com/150"
   >
-    <Button icon="Plus"/>
+    <Button icon="Plus" />
   </Card>
 
   <Heading :level="2">
@@ -29,7 +29,7 @@
     orientation="vertical"
     src="https://via.placeholder.com/150"
   >
-    <Button icon="Plus"/>
+    <Button icon="Plus" />
   </Card>
 </template>
 

codex-ui/dev/routes.ts

@@ -28,6 +28,7 @@ import VerticalMenu from './pages/components/VerticalMenu.vue';
 import ContextMenu from './pages/components/ContextMenu.vue';
 import Editor from './pages/components/Editor.vue';
 import ThemePreview from './pages/components/ThemePreview.vue';
+import Alert from './pages/components/Alert.vue';
 
 /**
  * Vue router routes list
@@ -145,6 +146,11 @@ const routes: RouteRecordRaw[] = [
     path: '/components/theme-preview',
     component: ThemePreview as Component,
   },
+
+  {
+    path: '/components/alert',
+    component: Alert as Component,
+  },
 ];
 
 export default routes;

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

@@ -0,0 +1,136 @@
+<template>
+  <transition name="fadeInBottom">
+    <div
+      v-show="message"
+      class="alert"
+      :class="`alert--${alertType}`"
+    >
+      <Icon name="Check" />
+      <span v-if="props.message">{{ message }}</span>
+      <slot />
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed, withDefaults } from 'vue';
+import Icon from '../icon/Icon.vue';
+
+const props = withDefaults(
+  defineProps<{
+  /**
+   * message to display
+   */
+    message?: string;
+
+    /**
+     * alert status
+     */
+    type: 'success' | 'error' | 'warning' | 'default' | 'info';
+
+  }>(), {
+    message: '',
+    type: 'default',
+  }
+);
+
+/** determine alert status */
+const alertType = computed(() => {
+  if (props.type === 'success') {
+    return 'success';
+  }
+
+  if (props.type === 'error') {
+    return 'error';
+  }
+
+  if (props.type === 'warning') {
+    return 'warning';
+  }
+
+  if (props.type === 'info') {
+    return 'info';
+  }
+
+  return 'default';
+});
+
+</script>
+
+<style  lang="postcss">
+
+@keyframes fadeInBottom {
+  0% {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.alert {
+  --padding-left: var(--h-padding);
+  --padding-right: var(--h-padding);
+  --success: #00A64D;
+  --error: #BB393D;
+  --warning: #DE6205;
+  --info: #54617B;
+  --default: #54617B;
+
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  font-size: inherit;
+  gap: var(--v-padding);
+  border: 0;
+  outline: 0;
+  font-family: inherit;
+  cursor: text;
+  word-break: keep-all;
+  z-index: 1;
+  border-radius: var(--radius-field);
+  padding: 1rem;
+
+  &--success {
+    background-color: var(--success);
+  }
+
+  &--error {
+    background-color: var(--error);
+  }
+
+  &--warning {
+    background-color: var(--warning);
+  }
+
+  &--default {
+    background-color: var(--default);
+  }
+
+  &--info {
+    background-color: var(--info);
+  }
+}
+
+.fadeInBottom__fade-enter-active {
+  animation-name: fadeInBottom;
+}
+
+.fadeInBottom__fade-leave-active,
+.fadeInBottom__fade-enter-active {
+  animation-duration: 750ms;
+  animation-fill-mode: both;
+}
+
+.fadeInBottom__fade-move {
+  transition-timing-function: ease-in-out;
+  transition-property: all;
+  transition-duration: 400ms;
+}
+</style>

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

@@ -0,0 +1,17 @@
+export enum ToastType {
+  SUCCESS = 'success',
+  ERROR = 'error',
+  WARNING = 'warning',
+  INFO = 'info',
+  DEFAULT = 'default'
+};
+
+export enum EVENTS {
+  ADD = 'add'
+}
+
+export interface ToastInterface {};
+
+export interface ToastOptions {
+
+}

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

@@ -0,0 +1,3 @@
+import Alert from './Alert.vue';
+
+export { Alert };

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

@@ -0,0 +1,84 @@
+import { inject } from 'vue';
+import type { ToastInterface, ToastOptions } from './constant';
+import { EVENTS, ToastType } from './constant';
+
+const toastSymbolKey = Symbol('Alert');
+
+type Events = {
+  [EVENTS.ADD]: {
+    id: string;
+  };
+};
+
+type Handler<E extends EVENTS> = (event: Events[E]) => void;
+
+type HandlerList<E extends EVENTS> = Handler<E>[];
+type HandlerMap = {
+  [E in EVENTS]?: HandlerList<E>
+};
+
+/**
+ *
+ */
+class EventBus {
+  protected allHandlers: HandlerMap = {};
+
+  protected getHandlers<E extends EVENTS>(eventType: E) {
+    return (this.allHandlers[eventType]) || [];
+  }
+
+  public on<E extends EVENTS>(eventType: E, handler: Handler<E>) {
+    const handlers = this.getHandlers(eventType).push(handler);
+
+    this.allHandlers[eventType] = handlers as unknown as EventBus['allHandlers'][E ];
+  }
+
+  public off<E extends EVENTS>(eventType: E, handler: Handler<E>) {
+    const handlers = this.getHandlers(eventType);
+
+    handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+  }
+
+  public emit<E extends EVENTS>(eventType: E, event: Events[E]) {
+    return this.getHandlers(eventType).forEach(handler => handler(event));
+  }
+};
+
+const eventBus = new EventBus();
+
+interface ToastInstance {
+  (option?: ToastOptions): ToastInterface;
+}
+
+const toastId = (i: number = 0) => i++;
+
+/**
+ *
+ * @param eventBus
+ */
+const useToast = (eventBus?: EventBus) => {
+  if (!eventBus) {
+    return;
+  }
+
+  const toastMethod = <T extends ToastType = ToastType> (type: T) => {
+    eventBus.emit(EVENTS.ADD, eventBus);
+
+    return {
+      id: toastId(),
+      type,
+    };
+  };
+
+  return {
+    success: toastMethod(ToastType.SUCCESS),
+    error: toastMethod(ToastType.ERROR),
+    info: toastMethod(ToastType.INFO),
+    warning: toastMethod(ToastType.WARNING),
+    default: toastMethod(ToastType.DEFAULT),
+  };
+};
+
+export {
+  useToast
+};

codex-ui/src/vue/components/row/Row.vue

@@ -10,15 +10,21 @@
     <div :class="$style['row__body']">
       <div :class="$style['row__body-inner']">
         <div :class="$style['row__center']">
-          <div v-if="label" :class="[$style['row__label'], 'text-ui-footnote']">
+          <div
+            v-if="label"
+            :class="[$style['row__label'], 'text-ui-footnote']"
+          >
             {{ label }}
           </div>
 
           <div :class="[$style['row__title'], 'text-ui-base-medium']">
             {{ title }}
           </div>
 
-          <div v-if="subtitle" class="text-ui-subtle">
+          <div
+            v-if="subtitle"
+            class="text-ui-subtle"
+          >
             {{ subtitle }}
           </div>
         </div>

codex-ui/src/vue/index.ts

@@ -1,3 +1,4 @@
+export * from './components/alert';
 export * from './components/button';
 export * from './components/form';
 export * from './components/heading';