alert toast component

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';
@@ -197,6 +200,12 @@ 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',
+      },
     ],
   },
 ]);
@@ -206,7 +215,7 @@ const pages = computed(() => [
 .playground {
   background-color: var(--base--bg-primary);
   color: var(--base--text);
-  min-height: 100%;
+  min-height: 100vh;
 }
 .header {
   display: grid;

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

@@ -0,0 +1,150 @@
+<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"
+      >
+        Show success alert
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Error</span>
+      <Button
+        @click="showErrorAlert"
+      >
+        Show error alert
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Warning</span>
+      <Button
+        @click="showWarningAlert"
+      >
+        Show warning alert
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Info</span>
+      <Button
+        @click="showInfoAlert"
+      >
+        Show info alert
+      </Button>
+    </div>
+
+    <div class="flex">
+      <span>Default</span>
+      <Button
+        @click="showDefaultAlert"
+      >
+        Show default alert
+      </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, alert } = useAlert();
+
+const showSuccessAlert = () => {
+  success({
+    message: 'codex',
+    timeout: 5000,
+  });
+};
+
+const showErrorAlert = () => {
+  error({
+    message: 'codex',
+    timeout: 5000,
+  });
+};
+
+const showWarningAlert = () => {
+  warning({
+    message: 'codex',
+    timeout: 5000,
+  });
+};
+
+const showInfoAlert = () => {
+  info({
+    message: 'codex',
+    timeout: 5000,
+  });
+};
+
+const showDefaultAlert = () => {
+  alert({
+    message: 'codex',
+    timeout: 5000,
+  });
+};
+
+</script>
+
+<style lang="postcss">
+.flex-content {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-l);
+  align-items: center;
+}
+
+.flex-type {
+  display: grid;
+  grid-template-columns: repeat(1, 2fr);
+  gap: var(--spacing-l);
+  align-items: center;
+  margin-top: 2rem;
+
+  .flex {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    align-items: center;
+    gap: var(--spacing-l);
+
+    button {
+      display: grid;
+      grid-column: span 1;
+    }
+  }
+}
+</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/styles/z-axis.pcss

@@ -1,3 +1,4 @@
 :root {
   --z-popover: 3;
+  --z-alert: calc(var(--z-popover) + 1)
 }

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

@@ -0,0 +1,35 @@
+/**
+ * Various alert type
+ */
+export type AlerType = 'success' | 'error' | 'warning' | 'info' | 'default';
+
+/**
+ * alert configuration
+ */
+export interface AlertOptions {
+  /** unique alert id */
+  id?: string;
+
+  /**
+   * Custom icon class to be used.
+   *
+   */
+  icon?: string;
+
+  /**
+   * content to be rendered
+   */
+  message: string;
+
+  /**
+   *  Type of the alert.
+   *
+   *  Can be any of `(success, error, default, info, warning)`
+   */
+  type?: AlerType;
+
+  /**
+   * How many milliseconds for the alert to be auto dismissed
+   */
+  timeout?: number;
+}

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

@@ -0,0 +1,107 @@
+<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, ref } from 'vue';
+import Icon from '../icon/Icon.vue';
+import type { AlertOptions } from './Alert.types';
+
+const el = ref<HTMLElement>();
+
+const props = withDefaults(defineProps<AlertOptions>(), {
+  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
+ */
+const computedTheme = computed((): AlertTheme => {
+  switch (props.type) {
+    case 'success':
+      return 'grass';
+
+    case 'error':
+      return 'red';
+
+    case 'warning':
+      return 'amber';
+
+    case 'info':
+      return 'graphite';
+
+    default:
+      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;
+  direction: ltr;
+  padding: var(--v-padding) var(--h-padding) var(--v-padding) var(--h-padding);
+  border-radius: var(--radius-field);
+  color: var(--base--text-solid-foreground);
+  overflow-wrap: anywhere;
+  transform: translateY(10%);
+
+  &--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 {
+    color: var(--base--text);
+    background-color: var(--base--bg-secondary);
+  }
+}
+
+</style>