Notifications (#52)

* Notifications * fix docs
2023-05-22 14:33:45 -07:00
parent 625511d28b
commit 097a1cc799
13 changed files with 207 additions and 4 deletions
--- a/lib/components/base/Notifications.vue
+++ b/lib/components/base/Notifications.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="vue-notification-group">
+    <transition-group name="notifs">
+      <div
+        v-for="(item, index) in notifications"
+        :key="item.id"
+        class="vue-notification-wrapper"
+        @click="notifications.splice(index, 1)"
+        @mouseenter="stopTimer(item)"
+        @mouseleave="setNotificationTimer(item)"
+      >
+        <div class="vue-notification-template vue-notification" :class="{ [item.type]: true }">
+          <div class="notification-title" v-html="item.title"></div>
+          <div class="notification-content" v-html="item.text"></div>
+        </div>
+      </div>
+    </transition-group>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+
+const notifications = ref([])
+
+defineExpose({
+  addNotification: (notification) => {
+    const existingNotif = notifications.value.find(
+      (x) =>
+        x.text === notification.text &&
+        x.title === notification.title &&
+        x.type === notification.type
+    )
+    if (existingNotif) {
+      setNotificationTimer(existingNotif)
+
+      return
+    }
+
+    notification.id = new Date()
+
+    setNotificationTimer(notification)
+    notifications.value.push(notification)
+  },
+})
+
+function setNotificationTimer(notification) {
+  if (!notification) return
+
+  if (notification.timer) {
+    clearTimeout(notification.timer)
+  }
+
+  notification.timer = setTimeout(() => {
+    notifications.value.splice(notifications.value.indexOf(notification), 1)
+  }, 30000)
+}
+
+function stopTimer(notif) {
+  clearTimeout(notif.timer)
+}
+</script>
+<style lang="scss" scoped>
+.vue-notification {
+  background: var(--color-blue) !important;
+  color: var(--color-accent-contrast) !important;
+
+  box-sizing: border-box;
+  text-align: left;
+  font-size: 12px;
+  padding: 10px;
+  margin: 0 5px 5px;
+
+  &.success {
+    background: var(--color-green) !important;
+  }
+
+  &.warn {
+    background: var(--color-orange) !important;
+  }
+
+  &.error {
+    background: var(--color-red) !important;
+  }
+}
+
+.vue-notification-group {
+  position: fixed;
+  right: 25px;
+  bottom: 25px;
+  z-index: 99999999;
+  width: 300px;
+
+  .vue-notification-wrapper {
+    width: 100%;
+    overflow: hidden;
+    margin-bottom: 10px;
+
+    .vue-notification-template {
+      border-radius: var(--radius-md);
+      margin: 0;
+
+      .notification-title {
+        font-size: var(--font-size-lg);
+        margin-right: auto;
+        font-weight: 600;
+      }
+
+      .notification-content {
+        margin-right: auto;
+        font-size: var(--font-size-md);
+      }
+    }
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+}
+
+.notifs-enter-active,
+.notifs-leave-active,
+.notifs-move {
+  transition: all 0.5s;
+}
+.notifs-enter-from,
+.notifs-leave-to {
+  opacity: 0;
+}
+</style>