alert toast component

codex-ui/dev/Playground.vue

@@ -192,16 +192,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,71 @@
+<template>
+  <PageHeader>
+    Alert
+    <template #description>
+      Light and beautiful notex alert
+      <code>click the button to see for yourself </code>
+    </template>
+  </PageHeader>
+
+  <Button
+    @click="showToast"
+  >
+    click alert
+  </Button>
+
+  <p>The following outlines options for alert to display </p>
+
+  <div class="flex-content">
+    <div>
+      Content
+    </div>
+
+    <div>
+      Position
+    </div>
+
+    <div>
+      Status
+    </div>
+
+    <div>
+      Timeout
+    </div>
+  </div>
+
+  <AlertContainer />
+</template>
+
+<script setup lang="ts">
+import PageHeader from '../../components/PageHeader.vue';
+import { Button } from '../../../src/vue';
+import { useAlert, AlertContainer, POSITION, AlertType } from '../../../src/vue/components/alert';
+
+const toast = useAlert();
+
+const getRandom = <T>(list: T[]) => list[Math.floor((Math.random() * 10) % list.length)];
+
+const randomType = () => getRandom(Object.values(AlertType));
+
+const randomPosition = () => getRandom(Object.values(POSITION));
+
+const randomMessage = () =>
+  getRandom(['Hello', 'codex']);
+
+const showToast = () => {
+  toast.success({ content: randomMessage(),
+    position: randomPosition(),
+    timeout: 10000,
+    status: randomType() });
+};
+
+</script>
+
+<style lang="postcss">
+.flex-content {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-l);
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,120 @@
+<template>
+  <div ref="alertRef">
+    <div
+      v-for="pos in positions"
+      :key="pos"
+    >
+      <AlertTransition
+        :class="alertClasses[pos]"
+        :pos="pos"
+      >
+        <BaseAlert
+          v-for="alert in positionToasts[pos]"
+          :key="alert.id"
+          v-bind="alert"
+        />
+      </AlertTransition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseAlert from './BaseAlert.vue';
+import AlertTransition from './AlertTransition.vue';
+import { useAlert } from './core/useAlert';
+import { AlertOptions, POSITION } from './core/types';
+import { ALERT_CONTAINER_DEFAULTS, ALERT_NAMESPACE } from './core/constant';
+
+const props = withDefaults(defineProps<AlertOptions>(), {
+  id: ALERT_CONTAINER_DEFAULTS.id,
+  position: ALERT_CONTAINER_DEFAULTS.position,
+  content: ALERT_CONTAINER_DEFAULTS.content,
+  closeOnClick: ALERT_CONTAINER_DEFAULTS.closeOnClick,
+  icon: ALERT_CONTAINER_DEFAULTS.icon,
+  status: ALERT_CONTAINER_DEFAULTS.status,
+  timeout: ALERT_CONTAINER_DEFAULTS.timeout,
+  onClick: ALERT_CONTAINER_DEFAULTS.onClick,
+  onClose: ALERT_CONTAINER_DEFAULTS.onClose,
+});
+
+const positions = Object.values(POSITION);
+
+// eslint-disable-next-line no-unused-vars
+const asPositionRecord = <T>(getValues: (position: POSITION) => T) =>
+  positions.reduce(
+    (agg, position) => ({
+      ...agg,
+      [position]: getValues(position),
+    }),
+    {} as Record<POSITION, T>
+  );
+
+const { alertRef, alertStore } = useAlert(props);
+
+const positionToasts = computed(() => {
+  const getPosition = (position: POSITION) => {
+    return alertStore.value.filter((alert: AlertOptions) => alert.position === position).slice(0, 20)
+      .reverse();
+  };
+
+  return asPositionRecord(getPosition);
+});
+
+const alertClasses = computed(() => {
+  const getClasses = (position: POSITION) => {
+    const classes = [`${ALERT_NAMESPACE}__container`, position];
+
+    return classes;
+  };
+
+  return asPositionRecord(getClasses);
+});
+</script>
+
+<style lang="postcss">
+.notex-alert__container  {
+  --padding-left: var(--h-padding);
+  --padding-right: var(--h-padding);
+  --zIndex: 9999;
+
+  position: fixed;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  z-index: var(zIndex);
+
+  &.top-left,
+  &.top-right,
+  &.top-center {
+    top: 1rem;
+  }
+
+  &.bottom-left,
+  &.bottom-right,
+  &.bottom-center {
+    bottom: 1rem;
+    flex-direction: column-reverse;
+  }
+
+  &.top-left,
+  &.bottom-left {
+    left: 1rem;
+  }
+
+  &.top-right,
+  &.bottom-right {
+    right: 1rem;
+  }
+
+  &.top-center,
+  &.bottom-center {
+    left: 50%;
+    .notex-alert__alert {
+      margin-inline: auto;
+    }
+  }
+}
+
+</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>