From f3f40dd8622553372be496b91bc65807493833d1 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 9 Dec 2021 17:46:13 +0100
Subject: [PATCH] chore: update

---
 docs/app.vue                              |  6 ++-
 docs/pages/components/[component].vue     | 33 ++++++++++++--
 docs/pages/examples.vue                   | 13 ++++++
 docs/pages/migration.vue                  | 11 ++++-
 package.json                              |  1 +
 src/components/overlays/Notification.vue  | 17 +++-----
 src/components/overlays/Notifications.vue | 28 ++++++++++++
 src/index.ts                              |  6 ++-
 src/plugins/ticker.client.ts              | 19 ++++++++
 src/plugins/timer.client.ts               | 34 +++++++++++++++
 src/plugins/toast.client.ts               | 53 +++++++++++++++++++++++
 src/types/index.ts                        |  3 ++
 src/types/notifications.ts                | 10 +++++
 tsconfig.json                             |  5 ++-
 14 files changed, 219 insertions(+), 20 deletions(-)
 create mode 100644 src/components/overlays/Notifications.vue
 create mode 100644 src/plugins/ticker.client.ts
 create mode 100644 src/plugins/timer.client.ts
 create mode 100644 src/plugins/toast.client.ts
 create mode 100644 src/types/index.ts
 create mode 100644 src/types/notifications.ts

diff --git a/docs/app.vue b/docs/app.vue
index afe162a3..c2456593 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -48,6 +48,10 @@
         </div>
       </div>
     </UContainer>
+
+    <ClientOnly>
+      <UNotifications />
+    </ClientOnly>
   </div>
 </template>
 
@@ -56,7 +60,7 @@ import { UseDark } from '@vueuse/components'
 
 const sections = [
   { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
-  { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }, { label: 'Link', to: '/components/Link' }] },
+  { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }] },
   { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }] },
   { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'InputGroup', to: '/components/InputGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'RadioGroup', to: '/components/RadioGroup' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }, { label: 'ToggleGroup', to: '/components/ToggleGroup' }] },
   { label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },
diff --git a/docs/pages/components/[component].vue b/docs/pages/components/[component].vue
index 7346508f..ddcd49d6 100644
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -1,7 +1,11 @@
 <template>
   <UCard v-if="component" class="relative flex flex-col lg:max-h-[calc(100vh-10rem)]" body-class="px-4 py-5 sm:p-6 relative" footer-class="px-4 py-4 sm:px-6 flex-1 lg:overflow-y-auto">
     <div class="flex justify-center">
-      <component :is="is" v-bind="boundProps" />
+      <component :is="is" v-bind="boundProps">
+        <template v-if="defaultProps[params.component].slot" #default>
+          <component :is="`U${defaultProps[params.component].slot}`" v-bind="defaultProps[defaultProps[params.component].slot]" />
+        </template>
+      </component>
     </div>
 
     <template v-if="props.length" #footer>
@@ -108,11 +112,13 @@ const defaultProps = {
     name: 'heroicons-outline:bell'
   },
   Input: {
-    name: 'input'
+    name: 'input',
+    placeholder: 'Enter text'
   },
   InputGroup: {
     name: 'input',
-    label: 'Input group'
+    label: 'Input group',
+    slot: 'Input'
   },
   ToggleGroup: {
     name: 'input',
@@ -133,6 +139,11 @@ const defaultProps = {
   },
   Tooltip: {
     text: 'Tooltip text'
+  },
+  Notification: {
+    id: '1',
+    title: 'Notification title',
+    callback: 'alert(\'Timer expired\')'
   }
 }
 
@@ -181,8 +192,22 @@ const props = ref(refProps)
 const boundProps = computed(() => {
   const bound = {}
   for (const prop of props.value) {
+    let value = prop.value
+    if (!value) {
+      continue
+    }
+
     try {
-      bound[prop.key] = prop.type === 'Array' ? JSON.parse(prop.value) : prop.value
+      if (prop.type === 'Array') {
+        value = JSON.parse(value)
+      } else if (prop.type === 'Number') {
+        value = Number(value)
+      } else if (prop.type === 'Function') {
+        // eslint-disable-next-line no-new-func
+        value = Function(value)
+      }
+
+      bound[prop.key] = value
     } catch (e) {
       continue
     }
diff --git a/docs/pages/examples.vue b/docs/pages/examples.vue
index de35659d..4ec6e2cf 100644
--- a/docs/pages/examples.vue
+++ b/docs/pages/examples.vue
@@ -170,6 +170,13 @@
       <UToggle v-model="isSwitchEnabled" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
     </div>
 
+    <div>
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
+        Notifications:
+      </div>
+      <UButton icon="heroicons-outline:bell" variant="red" label="Trigger an error" @click="onNotificationClick" />
+    </div>
+
     <div>
       <div class="font-medium text-sm mb-1 u-text-gray-700">
         Card:
@@ -200,6 +207,8 @@
 const isModalOpen = ref(false)
 const isSwitchEnabled = ref(false)
 
+const { $toast } = useNuxtApp()
+
 function toggleModalIsOpen () {
   isModalOpen.value = !isModalOpen.value
 }
@@ -341,4 +350,8 @@ const solutions = [
 ]
 
 const description = ref('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.')
+
+const onNotificationClick = () => {
+  $toast.error({ title: 'Error', description: 'This is an error message' })
+}
 </script>
diff --git a/docs/pages/migration.vue b/docs/pages/migration.vue
index 92f8c89f..de3f1fda 100644
--- a/docs/pages/migration.vue
+++ b/docs/pages/migration.vue
@@ -187,7 +187,13 @@ const components = [
   },
   {
     label: 'Notification',
-    to: '/components/Notification'
+    to: '/components/Notification',
+    nuxt3: true
+  },
+  {
+    label: 'Notifications',
+    to: '/components/Notifications',
+    nuxt3: true
   },
   {
     label: 'Popover',
@@ -201,7 +207,8 @@ const components = [
   },
   {
     label: 'Tooltip',
-    to: '/components/Tooltip'
+    to: '/components/Tooltip',
+    nuxt3: true
   }
 ]
 </script>
diff --git a/package.json b/package.json
index 9ff0243c..5b6018c7 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "defu": "^5.0.0",
     "gradient-avatar": "^1.0.2",
     "lodash-es": "^4.17.21",
+    "nanoid": "^3.1.30",
     "pathe": "^0.2.0"
   },
   "devDependencies": {
diff --git a/src/components/overlays/Notification.vue b/src/components/overlays/Notification.vue
index 6c3add9d..f4d68943 100644
--- a/src/components/overlays/Notification.vue
+++ b/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 () {
diff --git a/src/components/overlays/Notifications.vue b/src/components/overlays/Notifications.vue
new file mode 100644
index 00000000..e9eafc63
--- /dev/null
+++ b/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>
diff --git a/src/index.ts b/src/index.ts
index d87af1ba..badd76de 100644
--- a/src/index.ts
+++ b/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,
diff --git a/src/plugins/ticker.client.ts b/src/plugins/ticker.client.ts
new file mode 100644
index 00000000..61b78d20
--- /dev/null
+++ b/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)
+})
diff --git a/src/plugins/timer.client.ts b/src/plugins/timer.client.ts
new file mode 100644
index 00000000..be544c78
--- /dev/null
+++ b/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)
+})
diff --git a/src/plugins/toast.client.ts b/src/plugins/toast.client.ts
new file mode 100644
index 00000000..7324de93
--- /dev/null
+++ b/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
+  }
+}
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 00000000..a9250bf3
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,3 @@
+export * from './notifications'
+export * from './organizations'
+export * from './users'
diff --git a/src/types/notifications.ts b/src/types/notifications.ts
new file mode 100644
index 00000000..5ec75f86
--- /dev/null
+++ b/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
+}
diff --git a/tsconfig.json b/tsconfig.json
index e3ba1486..1ac69ff4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,9 @@
       "node",
       "@nuxt/kit"
     ],
-    "allowJs": true
+    "allowJs": true,
+    "paths": {
+      "#app": ["./node_modules/nuxt3/dist/app"]
+    }
   }
 }