chore: update

src/components/overlays/Notification.vue

@@ -31,14 +31,9 @@
                 variant="white"
                 size="xs"
                 class="mt-2"
-                @click.native.stop="cancel"
+                @click.stop="cancel"
               >
                 Undo
-                <div class="inline-flex items-center rounded u-bg-gray-200 ml-1.5">
-                  <span class="w-full px-1 text-center u-text-gray-600 text-xxs">
-                    Z
-                  </span>
-                </div>
               </Button>
             </div>
             <div class="flex-shrink-0 ml-4">
@@ -47,7 +42,7 @@
                 @click.stop="close"
               >
                 <span class="sr-only">Close</span>
-                <Icon name="outline/x" class="w-5 h-5" />
+                <Icon name="heroicons-solid:x" class="w-5 h-5" />
               </button>
             </div>
           </div>
@@ -117,10 +112,10 @@ export default {
   computed: {
     iconName () {
       return this.icon || ({
-        warning: 'solid/exclamation-circle',
-        info: 'solid/information-circle',
-        success: 'solid/check-circle',
-        error: 'solid/x-circle'
+        warning: 'heroicons-outline:exclamation-circle',
+        info: 'heroicons-outline:information-circle',
+        success: 'heroicons-outline:check-circle',
+        error: 'heroicons-outline:x-circle'
       })[this.type]
     },
     iconClass () {

src/components/overlays/Notifications.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="fixed bottom-0 right-0 flex flex-col justify-end w-full z-55 sm:w-96">
+    <div
+      v-if="notifications.length"
+      class="px-4 py-6 space-y-3 overflow-y-auto sm:px-6 lg:px-8"
+    >
+      <div
+        v-for="(notification, index) of notifications"
+        v-show="index === notifications.length - 1"
+        :key="notification.id"
+      >
+        <Notification
+          v-bind="notification"
+          :class="notification.click && 'cursor-pointer'"
+          @click="notification.click && notification.click(notification)"
+          @close="$toast.removeNotification(notification.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Notification from './Notification'
+
+const { $toast } = useNuxtApp()
+const notifications = useState('notifications')
+</script>

src/index.ts

@@ -1,5 +1,5 @@
 import { resolve } from 'pathe'
-import { defineNuxtModule, installModule, addComponentsDir, addTemplate, resolveModule } from '@nuxt/kit'
+import { defineNuxtModule, installModule, addComponentsDir, addTemplate, resolveModule, addPlugin } from '@nuxt/kit'
 import { colors } from '@unocss/preset-uno'
 import defu from 'defu'
 import type { UnocssNuxtOptions } from '@unocss/nuxt'
@@ -176,6 +176,10 @@ export default defineNuxtModule<UiOptions>({
       getContents: () => `/* @unocss-include */ export default ${JSON.stringify(ui)}`
     })
 
+    addPlugin(resolve(__dirname, './plugins/ticker.client'))
+    addPlugin(resolve(__dirname, './plugins/timer.client'))
+    addPlugin(resolve(__dirname, './plugins/toast.client'))
+
     addComponentsDir({
       path: resolve(__dirname, './components/elements'),
       prefix,

src/plugins/ticker.client.ts

@@ -0,0 +1,19 @@
+import { defineNuxtPlugin } from '#app'
+
+function Ticker (callback, interval) {
+  let id
+
+  this.start = function () {
+    id = window.setInterval(callback, interval)
+  }
+
+  this.stop = function () {
+    window.clearInterval(id)
+  }
+
+  this.start()
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.provide('ticker', Ticker)
+})

src/plugins/timer.client.ts

@@ -0,0 +1,34 @@
+import { defineNuxtPlugin } from '#app'
+
+function Timer (callback, delay) {
+  let timerId
+  let start
+  let remaining = delay
+
+  this.pause = function () {
+    window.clearTimeout(timerId)
+    remaining -= new Date() - start
+  }
+
+  this.resume = function () {
+    start = new Date()
+    window.clearTimeout(timerId)
+    timerId = window.setTimeout(callback, remaining)
+  }
+
+  this.reset = function () {
+    start = new Date()
+    window.clearTimeout(timerId)
+    timerId = window.setTimeout(callback, delay)
+  }
+
+  this.stop = function () {
+    window.clearTimeout(timerId)
+  }
+
+  this.resume()
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.provide('timer', Timer)
+})

src/plugins/toast.client.ts

@@ -0,0 +1,53 @@
+import { nanoid } from 'nanoid'
+import { Ref } from 'vue'
+import { Notification } from '../types'
+import { defineNuxtPlugin, useState } from '#app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const notifications: Ref<Notification[]> = useState('notifications', () => [])
+
+  function addNotification (notification: Partial<Notification>) {
+    const body = {
+      id: nanoid(),
+      ...notification
+    }
+
+    const index = notifications.value.findIndex((n: Notification) => n.id === body.id)
+    if (index === -1) {
+      notifications.value.push(body as Notification)
+    }
+
+    return body
+  }
+
+  function removeNotification (id: string) {
+    notifications.value = notifications.value.filter((n: Notification) => n.id !== id)
+  }
+
+  nuxtApp.provide('toast', {
+    addNotification,
+    removeNotification,
+    success ({ title, description }: { title?: string, description?: string } = {}) {
+      addNotification({
+        type: 'success',
+        title,
+        description,
+        timeout: 4000
+      })
+    },
+    error ({ title = 'An error occurred!', description }: { title?: string, description?: string } = {}) {
+      addNotification({
+        type: 'error',
+        title,
+        description,
+        timeout: 4000
+      })
+    }
+  })
+})
+
+declare module '#app' {
+  interface NuxtApp {
+    $toast: object
+  }
+}

src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './notifications'
+export * from './organizations'
+export * from './users'

src/types/notifications.ts

@@ -0,0 +1,10 @@
+export interface Notification {
+  id: string
+  title: string
+  description: string
+  type: string
+  icon?: string
+  timeout: number
+  undo?: Function
+  callback?: Function
+}