alert toast component

codex-ui/dev/Playground.vue

@@ -197,16 +197,27 @@ 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;
 }
 .header {
   display: grid;

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

@@ -0,0 +1,149 @@
+<template>
+  <PageHeader>
+    Alert
+    <template #description>
+      Light and beautiful codex alert
+      <code>click the button to see for yourself </code>
+    </template>
+  </PageHeader>
+
+  <p>The following outlines options for alert to display </p>
+
+  <div class="flex-content">
+    <div>
+      Message - message of the alert to be displayed (string)
+    </div>
+
+    <div>
+      Position - position of alert (bottom-center)
+    </div>
+
+    <div>
+      Type - alert type (success, error, warning, info and default)
+    </div>
+
+    <div>
+      Timeout - visibility duration in milliseconds, set timeout to keep alert visible
+    </div>
+  </div>
+
+  <div class="flex-type">
+    <div class="flex">
+      <span>Success</span>
+      <Button
+        @click="showSuccessAlert"
+      >
+        click success
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Error</span>
+      <Button
+        @click="showErrorAlert"
+      >
+        click error
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Warning</span>
+      <Button
+        @click="showWarningAlert"
+      >
+        click warning
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Info</span>
+      <Button
+        @click="showInfoAlert"
+      >
+        click info
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Default</span>
+      <Button
+        @click="showDefaultAlert"
+      >
+        click default
+      </Button>
+    </div>
+  </div>
+
+  <AlertContainer />
+</template>
+
+<script setup lang="ts">
+import PageHeader from '../../components/PageHeader.vue';
+import { Button, useAlert, AlertContainer } from '../../../src/vue';
+
+const { success, error, warning, info, defaultAlert } = useAlert();
+
+const showSuccessAlert = () => {
+  success({
+    message: 'success',
+    icon: 'Trash',
+    timeout: 5000,
+  });
+};
+
+const showErrorAlert = () => {
+  error({
+    message: 'error',
+    icon: 'Trash',
+    timeout: 5000,
+  });
+};
+
+const showWarningAlert = () => {
+  warning({
+    message: 'warning',
+    icon: 'Trash',
+    timeout: 5000,
+  });
+};
+
+const showInfoAlert = () => {
+  info({
+    message: 'info',
+    icon: 'Trash',
+    timeout: 5000,
+  });
+};
+
+const showDefaultAlert = () => {
+  defaultAlert({
+    message: 'default',
+    icon: 'Trash',
+    timeout: 5000,
+  });
+};
+
+</script>
+
+<style lang="postcss">
+.flex-content {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-l);
+  align-items: center;
+}
+
+.flex-type {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  margin-top: 2rem;
+
+  .flex {
+    display: grid;
+    grid-template-columns: repeat(2, max-content);
+    gap: var(--spacing-l);
+    align-items: center;
+  }
+}
+</style>

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/AlertContainer.vue

@@ -0,0 +1,59 @@
+<template>
+  <div ref="alertRef">
+    <div
+      :class="[
+        $style.alert__container,
+        $style['alert__container--' + props.position]
+      ]"
+    >
+      <AlertTransition>
+        <BaseAlert
+          v-for="alert in alertStore"
+          :key="alert.id"
+          v-bind="alert"
+        />
+      </AlertTransition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BaseAlert from './BaseAlert.vue';
+import AlertTransition from './AlertTransition.vue';
+import { useAlert } from './core/useAlert';
+import type { AlertOptions } from './core/types';
+import { ALERT_CONTAINER_STYLES } from './core/constant';
+
+const props = withDefaults(defineProps<AlertOptions>(), {
+  id: ALERT_CONTAINER_STYLES.id,
+  position: ALERT_CONTAINER_STYLES.position,
+  content: ALERT_CONTAINER_STYLES.message,
+  icon: ALERT_CONTAINER_STYLES.icon,
+  type: ALERT_CONTAINER_STYLES.type,
+  timeout: ALERT_CONTAINER_STYLES.timeout,
+});
+
+const {
+  alertRef,
+  alertStore,
+} = useAlert(props.type!, props);
+</script>
+
+<style module lang="postcss">
+.alert__container  {
+  --zIndex: 9999;
+
+  position: fixed;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column-reverse;
+  box-sizing: border-box;
+  z-index: var(zIndex);
+
+  &--bottom-center {
+   left: 50%;
+   bottom: 2rem
+  }
+}
+
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+  <transition-group
+    tag="div"
+    name="fade"
+    @leave="leave"
+  >
+    <slot />
+  </transition-group>
+</template>
+
+<script setup lang="ts">
+
+const leave = (el: unknown) => {
+  if (el instanceof HTMLElement) {
+    el.style.left = el.offsetLeft + 'px';
+    el.style.top = el.offsetTop + 'px';
+    el.style.width = getComputedStyle(el).width;
+    el.style.position = 'absolute';
+  }
+};
+
+</script>
+
+<style lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s ease;
+
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translate(30px, 20px);
+}
+</style>

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

@@ -0,0 +1,103 @@
+<template>
+  <div
+    ref="el"
+    :class="[
+      $style.alert,
+      $style['alert--' + props.type]
+    ]"
+    :theme-base="computedTheme"
+  >
+    <Icon
+      v-show="icon"
+      :name="icon"
+    />
+    <div>{{ props.message }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed, withDefaults, ref } from 'vue';
+import Icon from '../icon/Icon.vue';
+import type { AlertOptions } from './core/types';
+import { ALERT_CONTAINER_STYLES } from './core/constant';
+
+const el = ref<HTMLElement>();
+
+const props = withDefaults(defineProps<AlertOptions>(), {
+  id: ALERT_CONTAINER_STYLES.id,
+  position: ALERT_CONTAINER_STYLES.position,
+  message: ALERT_CONTAINER_STYLES.message,
+  icon: ALERT_CONTAINER_STYLES.icon,
+  type: ALERT_CONTAINER_STYLES.type,
+  timeout: ALERT_CONTAINER_STYLES.timeout,
+});
+
+/**
+ *
+ * computed theme
+ */
+const computedTheme = computed(() => {
+  if (props.type === 'success') {
+    return 'grass';
+  }
+
+  if (props.type === 'error') {
+    return 'red';
+  }
+
+  if (props.type === 'warning') {
+    return 'amber';
+  }
+
+  if (props.type === 'info') {
+    return 'graphite';
+  }
+
+  return undefined;
+});
+</script>
+
+<style module lang="postcss">
+.alert {
+
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--v-padding);
+  border: 0;
+  margin-block-start: 0.4rem;
+  outline: 0;
+  font-family: inherit;
+  pointer-events: auto;
+  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);
+  box-shadow: inset 0 0 0 1px var(--border-color);
+  color: var(--accent--text-solid-foreground);
+
+  &--success {
+    background-color: var(--base--solid);
+  }
+
+  &--error {
+    background-color: var(--base--solid);
+  }
+
+  &--warning {
+    background-color: var(--base--solid);
+  }
+
+  &--info {
+    background-color: var(--base--solid);
+  }
+
+  &--default {
+    background-color: var(--base--solid-secondary);
+  }
+}
+</style>